/* Reset CSS */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .card2KMI-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        margin: 2rem auto;
        max-width: 1200px;
        padding: 0 1rem;
    }
    .card2KMI {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.5rem;
        background: #fff;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        cursor: pointer;
        transition: transform 0.3s ease;
        height: 500px;
    }
    .card2KMI:hover {
        transform: scale(1.05);
    }
    .card2KMI img {
        width: 60%;
        max-width: 60%;
        height: 100%;
        border-radius: 10px;
    }
    .text-section2KMI {
        width: 100%;
        padding: 0.5rem;
        text-align: center;
    }
    .text-section2KMI h1 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
        color: var(--Carte--titre-colorH1);
        text-align: var(--Carte--titre-textalign-H1);
    }
    .text-section2KMI h2 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
        color: var(--Carte--titre-colorH2);
        text-align: var(--Carte--titre-textalign-H2);
    }
    .modal2KMI-content p,
    .text-section2KMI p {
        font-size: 0.9rem;
        color: var(--Carte--texte-color);
        text-align: var(--Carte--textalign-p);
        padding: 0.5rem;
    }
    .text-section2KMI p {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    .text-section2KMI .btn2KMI {
        display: inline-block;
        padding: 0.5rem 1rem;
        background: #0070ba;
        color: #fff;
        text-decoration: none;
        border-radius: 5px;
        transition: background 0.3s ease;
    }
    .text-section2KMI .btn2KMI:hover {
        background: #005f9e;
    }
    /* Modal Styles */
    .modalGene,
    .modal2KMI,
    .read-more2KMI-modal2KMI {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        z-index: 1200;
    }
    .modalGene,
    .modal2KMI {
        background: rgba(0, 0, 0, 0.7);
    }
    .infocard2KMI{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0.9rem;
    }
    .modal2KMI-carousel {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: row;
    }
    .read-more2KMI-modal2KMI {
        background: transparent;
    }
    .modalGene.show,
    .modal2KMI.show,
    .read-more2KMI-modal2KMI.show {
        display: flex;
    }
    .modal2KMI-content {
      /*  position: relative;*/
        background: #fff;
        width: 100%;
       /* height: 100vh;*/
        max-width: 80%;
        padding: 0.2rem;
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }




    .read-more2KMI-content  {
        background: white;
        border-radius: 10px;
        padding: 1.5rem;
        width: 90%;
        max-width: 600px;
     //   position: relative;
        height: 95vh;
    }
    .read-more2KMI-content {
        overflow-y: auto;
    }
    .modal2KMI img {
        width: 100%;
        height: auto;
        border-radius: 10px;
//        margin-bottom: 1rem;
        cursor: pointer;
        height: 80%;
    }
    .modal2KMI h3 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
        color: var(--Carte--titre-colorH2);
        text-align: var(--Carte--titre-textalign-H2);
    }
.fa-cart-shopping ,
    .modal2KMI p {
        font-size: 1rem;
        color: var(--Carte--texte-color);
        text-align: var(--Carte--textalign-p);
        margin: 0.2rem;
    }
    .close-btn2KMI {
        position: absolute;
        top: -7px;
        right: -120px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }
           .close-btnmireseau1,
    .close-btn2KMI {
        color: #f70505;
        font-size: 2.5rem;
    }
    .nav-btn2KMI {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.5);
        color:  var(--Mh-icon-color);
        border: none;
        font-size: 5rem;
        cursor: pointer;
        padding: 0.5rem 1rem;
        z-index: 1001;
    }
    .nav-btn2KMI.left {
        left: 10px;
    }
    .nav-btn2KMI.right {
        right: 10px;
    }
.truncate1 {
display: block;  /*Permet de forcer l'affichage du paragraphe comme un bloc */
overflow: hidden; /* Cache le texte qui déborde */
white-space: nowrap; /* Empêche le texte de passer à la ligne */
text-overflow: ellipsis; /* Ajoute des "..." pour indiquer que le texte est tronqué */
max-width: 400px; /* Ajustez la largeur maximale en fonction de la longueur souhaitée */
}
.truncate{
    text-align:justify;
    text-align: left;  
}
.readMoreContent{
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
    color: var(--Carte--titre-colorH2);
    text-align: var(--Carte--titre-textalign-H2);
}
   .read-more2KMI-content{
    color: var(--Carte--titre-colorH2);
    text-align: var(--Carte--titre-textalign-H2);
   }
 
.readMoreContent p {
    font-size: 1.1em;
    color: var(--Carte--texte-color);
    text-align: var(--Carte--textalign-p);
    line-height: 1.6;
    margin-bottom: 16px; /* Double espace entre les paragraphes */
}
.description2KMI {
    font-size: 14px;
    color: var(--Carte--texte-color);
    line-height: 1.6;
    margin-bottom: 16px;
    position: relative;
    width: 100%;
}
.read-more2KMI {
    font-size: 14px;
    color: #007BFF;
    text-decoration: none;
}
.read-more2KMI:hover {
    text-decoration: underline;
}
.prixTitle2KMI{
    display: flex;
    justify-content:space-between;
    flex-direction: row;   
}
.prixTitle2KMI h3{
    color: var(--Carte--titre-colorH2);
}
.modal2KMIprix{
    font-size: 1.9rem;
    color: var(--Carte--fontPrix-color);
    font-weight: 900;
}
        /* Style pour les select */
    .select-container {
        display: flex;
        gap: 1rem;
        justify-content: center;
       // margin-top: 1rem;
       // margin-bottom: 2rem;
    }
    select:hover,
    select:focus {
        border-color: #005f9e;
    }
.selectmode {
width: 115px;
}
    .btn2KMIpanier {
        padding: 3px 3px;
        align-items: center;
        font-size: 1rem;
        border: 0px solid #0070ba;
        border-radius: 5px;
        outline: none;
        transition: border-color 0.3s ease;
       /* background-color: #fff;*/
    }
    .btn2KMIpanier:hover {
        border-color: #005f9e;
    }
    .modal2KMI .fa-cart-shopping,
    .modalkmiplus  .fa-cart-shopping{
        color: var(--icon-panier-color);
        font-size: 1.5rem;
        cursor: pointer;
    }
    .modal2KMI .fa-cart-shopping:hover,
     .modalkmiplus  .fa-cart-shopping:hover{
        color:  var(--InT-lien-color-hover);
    }
    .modal2KMI-carousel{
        width: 100%;
    }
    .modal2KMIcarousel{
        width: 100%;
    }
    .modal2KMI-carousel img {
        max-width: 100%;
//        height: auto;
        height: 98vh; 
        border-radius: 10px;
    }
    .modal2KMIcarousel img {
        max-width: 100%;
      //  height: auto;
        height: 100vh; 
        border-radius: 10px;
    }
    .modal2KMI-carousel {
      height: 98vh;
    }
    .infocard2KMI{
        width: 40%;
    }
    
    .prixTitle2KMI{
    display: flex;
    justify-content:space-between;
    flex-direction: row; 
    width: 100%;  
    }  
    .prixpaiement{
    display: flex;
    justify-content:space-between;
    flex-direction: row; 
    width: 100%;  
    } 

    .modal2KMI.full-image .modal2KMI-carousel img {
        max-width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
    }  
    
            /* Responsive pour petits écrans */
    @media (max-width: 1200px) {
      .card2KMI-container{
        display: flex;
        justify-content:center;
        flex-direction: column; 
        align-items: center;
        }
    .card2KMI {
        display: flex;
        justify-content:center;
        flex-direction: column; 
        align-items: center;
        height: auto;
        width: 100%;
    }
    .card2KMI img {
        width: 100%;
        max-width: 100%;
    }
     .modalkmiplus-content, .read-more-content {
       padding: 0.2rem;
       width: 100%;
       height: 100%;
      }
      .text-section2KMI {
       max-width: 100%;
      }
      .card2KMI-container {
        margin: 2rem auto;
        padding: 0 0rem;
    }
    .modal2KMI-carousel {
      flex-direction: column;
      }
    .modal2KMI-content,
    .modal2KMI-carousel,
    .read-more2KMI-content  {
    width: 100%;
    max-width: 1200px;
    height: 95vh;
}
    .infocard2KMI{
        padding: 1.5rem;
        width: 100%;
        height: auto;
    }
 }
.cardkmiplus-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem auto;
    max-width: 1200px;
    padding: 0 1rem;
}
.cardkmiplus {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
    cursor: pointer;
}
.cardkmiplus:hover {
    transform: scale(1.05);
}
.cardkmiplus img {
    width: 100%;
    height: auto;
    display: block;
    height: 400px;
}
/* Si une carte n'a pas de données, l'image remplit toute la carte */
.cardkmiplus.full-image {
    flex: 1;
    display: flex;
}
.cardkmiplus.full-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.text-sectionkmiplus {
    padding: 1rem;
    text-align: center;
}
.read-more-modalkmiplus  h1,
.text-sectionkmiplus h1 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--Carte--titre-colorH1);
    text-align: var(--Carte--titre-textalign-H1);
}
.text-sectionkmiplus h2 {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    color: var(--Carte--titre-colorH2);
    text-align: var(--Carte--titre-textalign-H2);
}
.read-more-modalkmiplus  h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--Carte--titre-colorH2);
    text-align: var(--Carte--titre-textalign-H2);
}
.read-more-modalkmiplus  p,
.text-sectionkmiplus p {
    font-size: 0.8rem;
    color: var(--Carte--texte-color);
    text-align: var(--Carte--textalign-p);
    margin-bottom: 1rem;
}
 .btnkmiplus {
    display: inline-block;
  /*  padding: 0.5rem 1rem;
    background: #0070ba;*/
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
    transition: background 0.3s ease;
}
.hidden {
    display: none;
}
.text-sectionkmiplus .btnkmiplus:hover {
    background: #005f9e;
}
/* Modal Styles */
.modalkmiplus,
.read-more-modalkmiplus {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modalkmiplus {
    background: rgba(0, 0, 0, 0.7);
}
.read-more-modalkmiplus {
    background: transparent;
}
.modalkmiplus.show,
.read-more-modalkmiplus.show {
    display: flex;
}
.modalkmiplus-content,
.read-more-content  {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    width: 90%;
    max-width: 600px;
    position: relative;
    text-align: center;
    height: 97vh;
}
.read-more-modalkmiplus  h3,
.modalkmiplus-content h2,
.read-more-content h2 {
    color: var(--Carte--titre-colorH2);
    text-align: var(--Carte--titre-textalign-H2);
}
.read-more-content {
    overflow-y: auto;
}
.modalkmiplus img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 1rem;
    cursor: pointer;
    height: 100%;
}
.modalkmiplus.full-image {
    flex: 1;
    display: flex;
}
.modalkmiplus.full-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.modalkmiplus h3 {
    font-size: 1rem;
    color: var(--Carte--titre-colorH2);
    text-align: var(--Carte--titre-textalign-H2);
    margin-bottom: 0.5rem;
    width: 70%;
    text-align: left;
}
.modalkmiplus p {
    font-size: 0.8rem;rem;
    color: var(--Carte--texte-color);
    text-align: var(--Carte--textalign-p);
    margin-bottom: 1rem;
}
.close-btnkmiplus {
    position: absolute;
    top: -7px;
    right: 10px;
    background: none;
    border: none;
    font-size: 2.5rem;
    cursor: pointer;
    color: #f70505;
}
.nav-btnkmiplus {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: var(--Mh-icon-color);
    border: none;
    font-size: 5rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    z-index: 1001;
}
.nav-btnkmiplus.left {
    left: 10px;
}
.nav-btnkmiplus.right {
    right: 10px;
}


.readMoreContent{
display: flex;
justify-content: flex-start;
flex-direction: column;
text-align: left;
align-items: flex-start;
}
.readMoreContent p {
font-size: 0.9em;
color: var(--Carte--texte-color);
text-align: var(--Carte--textalign-p);
line-height: 1.6;
margin-bottom: 16px; /* Double espace entre les paragraphes */
}
.description {
font-size: 14px;
text-align: var(--Carte--textalign-p);
line-height: 1.6;
margin-bottom: 2px;
position: relative;
}
.read-more {
font-size: 14px;
color: #007BFF;
text-decoration: none;
}
.read-more:hover {
text-decoration: underline;
}
.prixTitle{
display: flex;
justify-content:space-between;
flex-direction: row;   
}
.modalkmiplusprix{
font-size: 1.5rem;
color: var(--Carte--fontPrix-color);
font-weight: 900;
}
    /* Style pour les select */
    .select-container {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 0.5rem;
}
select {
    padding: 1px 15px;
    font-size: 1rem;
    border: 3px solid #0070ba;
    border-radius: 5px;
    outline: none;
    color: #333;
    transition: border-color 0.3s ease;
    background-color: #fff;
}
select:hover,
select:focus {
    border-color: #005f9e;
}
.btnkmipluspanier {
    padding: 3px 15px;
    font-size: 1rem;
    border: 0px solid #0070ba;
    border-radius: 5px;
    outline: none;
    transition: border-color 0.3s ease;
}
.btnkmipluspanier:hover {
    border-color: #005f9e;
}
.btnkmipluspanier,
.modalkmiplusprix,
.description span,
select.taille,
select.coleur {
    display: none; /* Par défaut, masqué */
}
select.taille:valid,
select.coleur:valid {
    display: block; /* Afficher uniquement avec contenu valide */
}
/* Appliquer full-image UNIQUEMENT si aucune donnée */
.modalkmiplus.full-image {
    background: none;
    padding: 0;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modalkmiplus.full-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}        

select.taille,
select.coleur {
width: 100px;
}
.select-container{
        width: 400px;
}
.select-containercol{
    display: flex;
    gap: 1rem;
    width: 100%;
    margin-bottom: 1rem;
}
.select-containercol .coleur,
.select-containercol .taille{
    width: 90px;
}
.selectmode {
width: 100px;
}
.btnkmipluspanier {
    padding: 3px 3px;
    font-size: 1rem;
    width: 50px;
}
/* Responsive pour petits écrans */
@media (max-width: 1200px) {
.cardkmiplus-container {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    padding: 0 1rem;
}
 .modalkmiplus-content, .read-more-content {
   padding: 0.5rem;
   width: 100%;
   height: auto;;
  }
 .modalkmiplus-content {
        display: flex;
        justify-content:center;
        flex-direction: column; 
        align-items: center;
        height: auto;
        width: 100%;
        font-size: 1rem;
        text-align:center;
    }
 .btnkmiplus img {
        width: 100%;
        max-width: 100%;
    }
    .modal2KMI .fa-cart-shopping,
    .modalkmiplus  .fa-cart-shopping{
        font-size: 3.5rem;
    }
.modal2KMI-carousel {
   height: 100vh;
   width: 100vw;
  }
.cardkmiplus img {
    height: auto;
}
.close-btnmireseau1,
.close-btn2KMI,
.close-btnkmiplus {
    font-size: 6.5rem;
}
.modalkmiplus p {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--Carte--texte-color);
}
.description {
line-height: 1.6;
margin-bottom: 2px;
}
.modalkmiplus h3 {
    font-size: 30px;
}
    .modal2KMI-content p,
    .text-section2KMI p {
        font-size: 2.4rem;
    }
    .nav-btnkmiplus, 
    .nav-btn2KMI {
     display: none;
    }
.prixTitle2KMI h3, 
   .read-more2KMI-content  h3 {
    font-size: 50px;
   }
   .readMoreContent p {
    font-size: 45px;
   }
}
   .presentation h1{
      color: #b4b0ad;
      font-size: 24px;
      margin-bottom: 5px;
        color: var(--Carte--titre-colorH1);
        text-align: var(--Carte--titre-textalign-H1);
    }
    .subtitle {
      font-size: 14px;
      color: #666;
      margin-bottom: 20px;
    }
    .Inscrip-form,
    .MPperdu-form {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 15px;
      margin-bottom: 20px;
    }
    .login-form {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 15px;
      margin-top: 20px;
    }
    .login-form input {
      padding: 10px;
      border: 1px solid #4d4747;
      border-radius: 5px;
      font-size: 14px;
      text-align: center;
      width: 80%;
      max-width: 300px;
      margin-bottom: 20px;
    }
    .login-form button {
      background-color: #ff7300;
      color: #fff;
      border: none;
      border-radius: 5px;
      padding: 10px;
      font-size: 14px;
      cursor: pointer;
    }
    .login-form button:hover {
      background-color: #ff5700;
    }
    .containerIdent {
      text-align: center;
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      max-width: 400px;
      width: 90%;
      margin-bottom: 20px;
    }
    .action-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      justify-content: center;
    }
    .action-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: #fff;
      background-color: #ff7300;
      width: 100px;
      height: 100px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
.lien1overlayHor a{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
.lien1overlayHor a {
    font-size: 14px;
    transition: 0.3s;
    color: var(--Fenetre-lien-color);
    color:#fff;
}
    .action-btn a{
      font-size: 14px;
      color: #fff;
    }
    .action-btn img {
      width: 30px;
      height: 30px;
      margin-bottom: 10px;
    }
    .action-btn:hover {
      background-color: #ff5700;
    }
    .Inscription button ,
    .modal-contentperdu button{
    background-color: #fff;
    border: 1px solid #ff6b6b;
    border-radius: 20px;
    color: #ff6b6b;
    font-size: 14px;
    padding: 10px 15px;
    margin: 5px;
    cursor: pointer;
    transition: 0.3s;
}
.containerCompte div:hover {
    background-color: #ff6b6b;
    color: #fff;
}
    .containerCompte{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap:20px
    }
    .containerCompte div{
    background-color: #fff;
    border: 1px solid #ff6b6b;
    border-radius: 20px;
    color: #ff6b6b;
    font-size: 14px;
    padding: 10px 15px;
    margin: 5px;
    cursor: pointer;
    transition: 0.3s;
    width: 120px;
    }
.containerCompte div {
    transition: transform 0.3s ease, background-color 0.3s ease;
}
.containerCompte div:hover {
    transform: scale(1.1);
    background-color: #ffeb3b; /* Exemple de changement de couleur */
}
.service-menu {
    text-align: center;
    margin-bottom: 20px;
    /*border-bottom: 2px solid red;*/
    padding-bottom: 10px;
    width: 80%;
    }
    .action-btn  .fa-solid, .action-btn  .fa-regular{
      font-size: 2em;
    }
    .action-btn  .fa-solid, .action-btn  .fa-regular {
      color: #fff;
    }
    .action-btn:hover, .fa-solid:hover, .fa-regular:hover{
      color: #f80404;
      color:  var(--Mh-lien-color-hover);
    }
  
  /* Add Zoom Animation */
  .animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
  }
  .alert {
      color: red;
      font-size: 14px;
      display: none;
    }
  
  @-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
  }
    
  @keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
  }
  
  /* Change styles for span and cancel button on extra small screens */
  @media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
       margin-bottom: 20px;
       z-index: 20;
    }
  }
  /* The Modal (background) */
  .modalalbum {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
  }
  
  /* Modal Content/Box */
  .modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
  }
  
  .modal-contentperdu {
      position: relative;
      background-color: #fff;
      margin: 15% auto;
      padding: 20px;
      width: 80%;
      max-width: 400px;
      border-radius: 10px;
    }
    .modal-contentperdu input[type=text]{
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    max-width: 250px;
    color: var(--Mh-icon-color);
  }
  /* The Close Button (x) */
  .close {
    position: absolute;
    right: 25px;
    top: 2px;
    color: #000;
    font-size: 35px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: red;
    cursor: pointer;
  }
   .Inscription .close {
    position: absolute;
    right: -219px;
    top: -17px;
    color: #000;
    font-size: 35px;
    font-weight: bold;
  }
  
   .Inscription .close:hover,
   .Inscription .close:focus {
    color: red;
    cursor: pointer;
  }
  .modal-contentinsc {
      position: relative;
      background-color: #fff;
      margin: 0% auto;
      padding: 20px;
      width: 80%;
      max-width: 400px;
      border-radius: 10px;
    }
  .Inscription h1 {
    text-align: center;  
        color: var(--Carte--titre-colorH1);
        text-align: var(--Carte--titre-textalign-H1);
  }
  
  .Inscription input {
    padding: 10px;
    width: 100%;
    font-size: 17px;
    font-family: Raleway;
    border: 1px solid #aaaaaa;
      color: #aaa;
    margin-bottom: 10px;
  }
  
  .Inscription select {
    padding: 10px;
    width: 100%;
    font-size: 17px;
    font-family: Raleway;
    border: 1px solid #aaaaaa;
  }
  .Inscription input.invalid {
    background-color: #ffdddd;
  }
input{
    color: var(--Mh-icon-color);
}
  /* Hide all steps by default: */
  .Inscription .tab {
    display: none;
    font-size: 12px;
  }
  .Inscription button:hover {
    opacity: 0.8;
  }
  
  #prevBtn {
    background-color: #bbbbbb;
  }
  
  /* Make circles that indicate the steps of the form: */
  .Inscription .step {
    height: 25px;
    width: 25px;
    margin: 0 2px;
  }
  .Inscription .step.active {
    opacity: 1;
  }
  
  /* Mark the steps that are finished and valid: */
  .Inscription .step.finish {
    background-color: #04AA6D;
  }
  .Inscription input {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
  .Inscription input:focus {
    border-color: #3f51b5;
    box-shadow: 0 0 5px #f54403;
}
  .Inscription .modal-content {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s forwards;
    animation-delay: 0.3s;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
   .btntest, .panier .menu a, .contentGe .menu a {
     padding-left: 7px; 
    }
   .imgBoxentete  img {
    margin-bottom: -24px;
   }
  @media screen and (max-width: 1200px) {
    .steps {
     gap: 5rem;
     }
  .creercomptstep {
    height: 40px;
    width: 40px;
    margin: 0 2px;
  }
    .top-menu div {
    font-size: 30px;
    width: 320px;
    }
.containerIdent {
    max-width: 800px;
    width: 90%;
}
.action-btn {
    width: 237px;
    height: 237;
}
    .login-form button, .action-btn a {
      font-size: 36px;
    }
    .lien1overlayHor a {
    font-size: 34px;
     }
    .login-form input {
      padding: 10px;
      border-radius: 5px;
      font-size: 34px;
      width: 80%;
      max-width: 400px;
    }
    .action-btn  .fa-solid, .action-btn  .fa-regular{
      font-size: 2em;
    }
.modalalbum {
    z-index: 100;
    /* left: 0; */
    top: 233px;
   }
   .modal-contentinsc {
    padding: 20px;
    width: 80%;
    height: 60%;
    max-width: 1200%;
   }
  .modalalbum .Inscription .close {
    right: 19px;
    top: -40px;
    font-size: 65px;
  }
  .modalalbum .inscription, .abonne {
    width: 100%;
   }
  .modalalbum .Inscription input {
    font-size: 45px;
    margin: 0 10px;
    margin-bottom: 10px;
  }
  .modalalbum .Inscription select {
    width: 100%;
    font-size: 42px;
  }
  .Inscription button, .modal-contentperdu button {
    font-size: 40px;
   }
  .modalalbum .servicetitre {
    font-size: 50px;
  }
  .Inscription .tab {
    font-size: 37px;
  }
  }
        .contenupage{
          height: auto;
        }
/* Responsive pour petits écrans */
@media (max-width: 1200px) {
.cardkmiplus-container {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
 .modalkmiplus-content, .read-more-content {
   padding: 0.5rem;
   width: 100%;
   height: auto;
  }
.modalkmiplus-content,
.read-more-content  {
    width: 100%;
    max-width: 1200px;
    height: 95vh;
}
 .btnkmiplus img {
        width: 100%;
        max-width: 100%;
    }
.cardkmiplus img {
    height: auto;
}
.kmiplusTitle,
.modalkmiplus h3 {
    font-size: 2.5rem;
}
.modalkmiplus p {
    font-size: 2.4rem;
    margin-bottom: 1rem;
}
.description {
font-size: 2.2rem;
line-height: 1.6;
margin-bottom: 2px;
}
}
select.taille,
select.coleur {
width: 100px;
}
.select-container{
        width: 400px;
}
.select-containercol{
    display: flex;
    gap: 1rem;
    width: 100%;
    margin-bottom: 1rem;
}
.select-containercol .coleur,
.select-containercol .taille{
    width: 90px;
}
.selectmode {
width: 100px;
}
.btnkmiplus,
.infocard2KMI input,
.infocard2KMI select, 
.modalkmiplus-content input,
.modalkmiplus-content select {
       /* padding: 3px 3px;*/
        font-size: 1rem;
        border: 2px solid #999;
        width: 90px;
        height: 30px;
        text-align:center;
        color: var(--Mh-lien-color);
//        background-color: var(--Mh-icon-color);
    }
.infocard2KMI input,
.infocard2KMI select, 
.modalkmiplus-content input,
.modalkmiplus-content select {
        font-size: 1rem;
        background-color: var(--Mh-lien-hover);
    }
.infocard2KMI input,
.modalkmiplus-content input {
      width: 60px;
    }
.btnkmipluspanier {
    padding: 3px 3px;
    font-size: 1rem;
    width: 50px;
}
/* Conteneur des cartes */
#card-containermireseau1 {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}
/* Styles des cartes */
.cardmireseau1 {
    width: 250px;
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    text-align: center;
}
.media {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.read-more {
    display: block;
    margin-top: 10px;
    background: blue;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
}
/* MODAL */
.modalmireseau1 {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}
.modalmireseau1-container {
    display: flex;
    background: white;
    width: 70%;
    border-radius: 10px;


    overflow: auto;
}
.modalmireseau1-text {
    width: 40%;
    padding: 20px;
    background: #fff;
}
.modalmireseau1-media {
    width: 60%;
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modalmireseau1-media img, .modalmireseau1-media iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Bouton fermer */
.close-btnmireseau1 {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2.5rem;
    color: white;
    cursor: pointer;
    background: none;
    border: none;
}
/* Navigation */
.nav-btnmireseau1 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    cursor: pointer;
    font-size: 40px;
    font-weight: bold;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
    border-radius: 5px;
}
.leftmireseau1 {
    left: 20px;
}
.leftreseau1 {
    right: 20px;
}
/* Si pas de texte, l'image prend toute la carte */
.full-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}




/* Par défaut, vidéos responsives */
.modalmireseau1-video {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 80vh;
}
/* Si pas de texte, vidéo en 900px × 700px */
.full-video {
    width: 900px !important;
    height: 700px !important;
    max-width: none;
    max-height: none;
}
@media (max-width: 1200px) { 
.cardkmiplus-container {
    grid-template-columns: repeat(auto-fit, minmax(900px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
}
.cardkmiplus {
    cursor: pointer;
}
.modal2KMIcarousel img, 
.modalkmiplus img {
  width: 100vw;
   max-height: 65vh;
}
.btnkmiplus,
.infocard2KMI input,
.infocard2KMI select, 
.modalkmiplus-content input,
.modalkmiplus-content select{
        font-size: 2.5rem;
        border: 2px solid #999;
        height: 60px;
  width: 210px;
{
.infocard2KMI select, 
.modalkmiplus-content select {
        width: 190px;
}
.btnkmiplus{
  width: 210px;
{
.infocard2KMI select, 
.modalkmiplus-content input {
        width: 120px;
}
.taille {
        width: 400px;
}
.prixTitle{
    width: 800px;
}
select.taille,
select.coleur {
width: 200px;
}
.kmiplusDescription{
        font-size: 3rem;
        border: 2px solid #999;
    }
.nav-btn2KMI {
        display: none;
}
.nav-btnkmiplus {
    font-size: 4rem;
}
 margin-bottom: 1rem;
}
    .btnkmiplus{
      font-size: 3rem;
      border: 2px solid #999;
    }
    .text-section2KMI h1,
    .text-sectionkmiplus h1 {
      font-size: 60px;
      margin-bottom: 0.5rem;
    }
    .text-section2KMI h2,
    .text-sectionkmiplus h2 {
       font-size: 40px;
       margin-bottom: 0.5rem;
     }
    .text-section2KMI p,
    .text-sectionkmiplus p {
       font-size: 30px;
       color: #555;
       margin-bottom: 1rem;
    }
}
/* Mode responsive sur petits écrans */
@media (max-width: 1200px) {
    .modalmireseau1-content {
        flex-direction: column;
        max-width: 95%;
        padding: 10px;
    }
    .modalmireseau1-text {
        width: 100%;
        text-align: center;
        padding: 10px;
    }
    .modalmireseau1-media {
        width: 100%;
    }
    .full-video {
        width: 100% !important;
        height: auto !important;
    }
}
.read-more2KMI-content,
.read-more-content,
.modalkmiplus-content,
.cardkmiplus,
.card2KMI,
.modal2KMI-content {
    background: linear-gradient(to bottom, var(--Bg-lineaire-degrade1), var(--Bg-lineaire-degrade2));
}
.read-more2KMI-content,
.read-more-content,
.modalkmiplus-content,
.modal2KMI-content {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.description p,
.kmiplusDescription,
#modal2KMIDescription{
        cursor: pointer;
}
.containervert {
z-index: 1;
}
.Interncolonnefre2,
.Interninffree2 { 
  height: calc(12em + var(--Carte--height-taile));
  width: calc(2em + var(--Carte--width-taile));
  padding: 0.5rem;
  border-radius: 20px;
}
footer{
    margin: 30px 0px;
}
      .contenerfooters{
        width: 100%;
      }
.qualiteplus{
    height: 90px;  
}
.qualiteplusa{
    height: auto;  
}
.qualiteplusb{
    height: 90px;  
}
.parametreoutil{
  padding-right: 40px;
  text-align: end;
}
.qualiteplu{
position:relative;
top: -120px;
min-height: 40vh;
z-index: -10;
}
    .ssfooterbas a.cgv {
        text-decoration: none;
        color: #fff;
        font-size: 10px;
    }
@media (max-width: 1200px) { 
.DEnodalpage {
    z-index: 60;
}
    .Interninfodiapo{
    position: relative;
    }
    .Interpresent,
   .diapodouble .InterninffreeKMI {
    top: 50%;
    left: 50%;
    width: 460px;
    height: 600px;
   }
      .containerZoomlinx {
        width: 100vw;
       }
}
.qualiteplus .qualiteplusa, .qualiteplusb{
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 20px;
      animation: fadeIn 1.5s ease-in-out;
      height: auto;
}
@media (max-width: 1200px) { 
.qualiteplus{
    height: 0px;  
}
.qualiteplusa{
    height: 150px;  
}
.qualiteplusb{
    height: 150px;  
}
.ssfooterbas .cgv {
   font-size: 1.8em;
}
    .ssfooterbas a.cgv {
        font-size: 30px;
    }
    .modal2KMI h3 {
        font-size: 3.0rem;
        margin-bottom: 0.2rem;
    }
    .modal2KMI p {
        font-size: 2.4rem;
        margin-bottom: 0.3rem;
    }
}
.btnkmipluspanier.show {
 opacity: 1;
 visibility: visible;
}
.fullscreenpage{ 
  width: 350px;
  height: 485px;  
  border-radius: 10px;
}
.fullscreenpagetyp2,
.fullscreenpagetyp1{ 
  width: 350px;
  height: 780px;  
  width: var(--Carte--width-taile);
  height: var(--Carte--height-taile);
}
.creenpage2{ 
  width: 353px;
  height: 485px;  
  border-radius: 10px;
}
.creenpage3{ 
    width: 373px;
    height: 404px;
    border-radius: 10px 10px 0 0;
}
.fullscreen-video{ 
  width: 100%;
  height: 750px;  
}
.Shortfullscreen-video{ 
  width: 350px;
  height: 750px;  
}
.full9001{ 
  width: 100%;
  height: 450px;  
}
.full900{ 
  width: auto;
  height: 96vh;
  border-radius: 10px;
}
.full900video{ 
  width: 78vw;
  height: 96vh;
  border-radius: 10px;
}
.full900plus{ 
  width: 78vw;
  height: 100vh;
  border-radius: 10px;
}
.full9002KMI{ 
  width: 550px;
  height: 500px;  
  border-radius: 10px;
}
.contententete{
    position: relative;
    top: -30px;
    left: 60px;
    display: flex;
    align-items: center;
    justify-content:space-between;
    width: 100%;
}
.contententete{
    left: 60px
}
@media (max-width: 1200px) { 
.modal2KMI, .modalGene,
    .text-sectionkmiplus h1 {
      font-size: 42px;
      margin-bottom: 0.5rem;
    }
    .text-sectionkmiplus h2 {
       font-size: 40px;
       margin-bottom: 0.5rem;
     }
    .text-sectionkmiplus p {
       font-size: 37px;
       margin-bottom: 1rem;
    }
    .text-section2KMI h1 {
      font-size: 40px;
      margin-bottom: 0.5rem;
    }
    .text-section2KMI h2{
       font-size: 48px;
       margin-bottom: 0.5rem;
     }
    .text-section2KMI h2{
       font-size: 40px;
       margin-bottom: 2.5rem;
     }
.read-more2KMI {
    font-size: 40px;
}
    .description2KMI, 
    .text-section2KMI p {
       font-size: 38px;
       margin-bottom: 0rem;
    }
    .modal2KMIprix {
       font-size: 50px;
       margin-bottom: 1rem;
    }
  .creenpage3 {
   width: 100vw;
   height: auto;
  }
.creenpage2{ 
  width: 100%;
  height: 700px;  
}
.creenpage3{ 
  width: 100%;
  height: 700px;
}
.modal2KMI-carousel img,
.modal2KMI img,
.full90065{ 
  width: 100vw;
  height: auto;  
  max-width: 100%; 
}
.full900plus{ 
  width: 100vw;
  height: auto; 
}
.cardkmiplus img,
.full90065plus{ 
  width: 100vw;
  height: auto;  
  max-width: 100%; 
}
.full900shot{ 
  width: 100vw;
  height: 90vh;  
}
.modal2KMIcarousel {
    flex-direction: column;
}
.fullscreenpage{ 
  width: 100vw;
  height: 1485px;  
  border-radius: 10px;
}
.fullscreenpagetyp1{ 
  width: 90vw;
  height: 480px;  
}
.fullscreenpagetyp2{ 
  width: 100%;
  height: 880px;  
}
.container11 ,
.container12 ,
.container13 ,
.container10 {
   width: 100vw;
   height: auto;
}
.container11 img ,
.container12 img ,
.container13 img ,
.container10 img {
   width: 100%;
   height: auto;
}
}
@media (max-width: 1200px) {
    .Interncolonnefre2, .Interninffree2 {
        width: 480px;
        height: 906px;
    }
    .Interncolonnefre2, .Interninffree2 {
        width: 100vw;
        height: auto;
        margin-top: 60px; 
    }
}
@media (max-width: 1200px) {
    .Interncolonnefre2 img, .Interninffree2 img {
        width: 100%;
        height: auto;
        padding: 0px;
        margin: 0;
    }
  width: 460px;
  height: 600px
}
/*---------------bandeservices-----------*/ 
@media (max-width: 1200px) {
.secentete{
   min-height: 77vh;
}
.diapoKMI {
    flex-direction: column;
}
.container4{ 
        width: 460px;
        height: 600px;
}
.contententete{
    left: 0px
}
}
    .icon-links {
      position: absolute;
      transform: translateY(-50%);
      background-color:#ffffff40;
      padding: 0.5rem;
      border-radius: 0 10px 10px 0;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      z-index: 1001;
    }
    .icon-links i {
      font-size: 1.5rem;
      cursor: pointer;
      color: #0070ba;
    }
    .icon-links .compteur {
      text-align: center;
      font-size: 0.7rem;
    }
    .icon-links {
                  left: 0%;       top: 50%;
             }
.modalkmiplus-content, .modal2KMI-content {
  position: relative;
}
    .modalFiche {
      position: absolute;
      bottom: 10px;
      right: 10px;
      background-color:#ffffff40;
      padding: 0.5rem 1rem;
      border-radius: 5px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
      cursor: pointer;
    }
    .modalFiche span {
      color: var(--Carte--texte-color);
      font-size: 0.7rem;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .modalFiche a:hover {
      text-decoration: underline;
    }
   .prixTitle {
      font-size: 0.7rem;
      padding: 0.5rem 1rem;
    }
.description p{
   padding: 0.1rem 0.5rem;
}
.modalkmiplus-content,
.read-more-content  {
    padding: 0.5rem;
    height: 98vh;
}
        .slide1haut .item1haut:nth-child(3) {
            left: 50%;
        }
        .slide1haut .item1haut:nth-child(4) {
            left: calc(50% + 220px);
        }
        .slide1haut .item1haut:nth-child(5) {
            left: calc(50% + 440px);
        }
        .slide1haut .item1haut:nth-child(n + 6) {
            left: calc(50% + 660px);
            opacity: 0;
        }

.cardkmiplus-container {
    gap: 3.5rem;
}
}
        .modelinfimg {
            width: 600px;
            height: 100vh;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .modelinfimg.zoomed {
            width: 1900px;
            height: 2220px;
        }
        .captioncontenuKMI {
            display: none;
            text-align: center;
        }
        .captioncontenuKMI.active {
            display: block;
        }
        .diapodouble {
            width: 100%;
            overflow: hidden;
        }
        .diapoKMI {
            position: relative;
        }
        .modenodalprev,
        .modenodalnext {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 2rem;
            cursor: pointer;
            color: #333;
            background: rgba(255, 255, 255, 0.7);
            padding: 0.5rem;
            border-radius: 50%;
        }
        .modenodalprev {
            left: 10px;
        }
        .modenodalnext {
            right: 10px;
        }
    @media screen and (max-width: 1200px) {
      .modenodalprev,
      .modenodalnext {
        font-size: 1.5rem;
        padding: 0.3rem;
      }
.diapoKMIsitekmis {
    padding: 0px;
    margin: 0px;
    width: 100vw;
    height: 100vh;
}
.captioncontenuKMI {
    min-height: 100vh;
}
.modelinfimg {
    width: 100vw;
    height: 100vh;
}
        .modelinfimg.zoomed {
    width: 100vw;
    height: 100vh;
        }
    }
@media (max-width: 1200px) {
    .nodalinfotext,
    .text-sectionkmiplus,
    .text-section2KMI {
        max-width: 100%;
        height: 350px;
        min-height: 300px;
    }
    .infocard2KMI {
        max-width: 100%;
        height: 600px;
        min-height: 400px;
    }
.icon-links .compteur {
    font-size: 1.7rem;
}
.icon-links i {
    font-size: 3.5rem;
}
modalFiche {
    font-size: 3.5rem;
}
.modalFiche span {
    font-size: 1.7rem;
    gap: 1rem;
}
.modalFiche {
    bottom: 30px;
    right: 30px;
 }
.cardkmiplus {
    bottom: 30px;
}
    .modal2KMI-content,
    .modal2KMI-carousel,
    .read-more2KMI-content  {
    width: 100%;
    height: 100%;
}
.select-containercol select {
    width: 10px;
    height: 60px;
    }
#modal2KMIImage{
   position: relative;
    }
.modalFiche{
  bottom: 25%;
  right: 5%;
}
}