/* ========================
   Media Queries
   ======================== */

/* Styles par défaut pour les écrans plus grands que 992px */

@media (max-width: 575.98px) {
  main {
      grid-template-columns: 1fr; /* Une seule colonne pour les petits appareils mobiles */
      /* padding: 0 8px; Réduit le padding pour les petits écrans */
      column-gap: 8px; /* Ajuste l'espacement des colonnes pour mobile */
  }
}

@media (max-width: 767.98px) {
  main {
      grid-template-columns: 1fr; /* Toujours une seule colonne pour les smartphones moyens */
      /* padding: 0 12px; Ajuste le padding pour les écrans un peu plus grands */
      column-gap: 12px; /* Ajuste l'espacement des colonnes pour mobile */
  }

}
/* Tablettes (768px à 991px) */
@media (max-width: 991px) {
  main {
      grid-template-columns: 1fr; /* Garde une seule colonne pour les tablettes */
      /* padding: 0 16px; Ajuste le padding pour les tablettes */
  }

  .o-thin-container,
.o-large-container {
    max-width: 728px;

  
}
.o-large-container{
    margin-left: auto;
    margin-right: auto;
}
}



/* Media queries pour la responsivité ici */
@media (max-width: 768px) {
    :root{
    /* --base-size: 14px;
    --scale: 1.2;
    --base-line-height: 1.4;
    
    --h6: 16px;
    --h5: 20px;
    --h4: 24px;
    --h3: 28px;
    --h2: 34px;
    --h1: calc(var(--h2) * var(--scale));
  
    --h6-line-height: calc(var(--base-line-height) * 0.9);
    --h5-line-height: calc(var(--base-line-height) * 0.95);
    --h4-line-height: var(--base-line-height);
    --h3-line-height: calc(var(--base-line-height) * 1.05);
    --h2-line-height: calc(var(--base-line-height) * 1.1);
    --h1-line-height: calc(var(--base-line-height) * 1.15);
    --h-top:600;} */
    .header-grid-container {
      grid-template-columns: 1fr; /* Passe à une seule colonne sur les petits écrans */
      text-align: center; /* Centre le contenu pour une meilleure lisibilité */
      padding: 8px; /* Réduit le padding pour économiser de l'espace */
    }
    .grid-container{
        padding:8px 0;
    }
    .grid-section-main , .grid-section-plain{
      grid-template-columns: 1fr; /* Une seule colonne sur les petits écrans */
      grid-gap: 16px; /* Espacement entre les éléments */
      padding: 8px; /* Réduit le padding pour économiser de l'espace */
    }
 
    .grid-section-1-2 {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
        grid-gap: 8px; /* Réduire l'espacement si nécessaire */
        padding: 12px; /* Ajuster le padding pour économiser de l'espace */
    }

      /* Navbar */
    .logo-container {
      grid-column: 1; /* Assure que le logo occupe la première ligne */
      margin-bottom: 8px; /* Ajoute un petit espace sous le logo */
    }
  
    .navbar-container {
      grid-column: 1; /* Déplace la navigation sous le logo */
      justify-content: center; /* Centre le menu de navigation */
      flex-direction: column; /* Affiche les éléments du menu verticalement */
    }
  
    .user-menu-container {
      grid-column: 1; /* Déplace le menu utilisateur sous la navigation principale */
      justify-content: center; /* Centre le menu utilisateur */
      margin-top: 8px; /* Ajoute un espace au-dessus du menu utilisateur */
    }
  
    .navbar-toggler {
      display: block; /* Affiche le bouton de menu hamburger sur les petits écrans */
    
    }
  
    .collapse {
      width: 100%; /* Assure que le menu déroulant prend toute la largeur disponible */
    }
  
    .navbar-nav {
      flex-direction: column; /* Affiche les éléments de la navigation verticalement */
      align-items: center; /* Centre les éléments de la navigation */
    }
  
    .dropdown-menu {
      width: 100%; /* Assure que les menus déroulants prennent toute la largeur disponible */
    }
  .is-center{text-align:left!important}

   /* steps */
    /* Masquer Desktop et Afficher Mobile */
    .step-container-desktop {
        display: none;
      }
    
      .step-container-mobile {
        display: block;
        width: 100%;
        background-color: #cfe1ca;
        border-radius: 99em;
        padding: 16px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
      }
    
      .step-content {
        display: flex;
        align-items: center    ;
      }
    
      .progress-circle {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: conic-gradient(var(--black) calc(var(--progress) * 1%), var(--green-complementary) 0%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
        color: var(--black);
        margin-right: 16px;
        position: relative;
    }
    
    .progress-circle::before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        background: #fff; /* Couleur du fond central */
        z-index: 1; /* Place le fond blanc au-dessus */
    }
    
    .progress-circle span {
        position: relative;
        z-index: 2; /* Place le texte au-dessus du tout */
    }
      .step-text {
        display: flex;
        flex-direction: column;
        text-align: right;
      }
    
      .step-title {
        font-size: 14px;
        color: var(--black);
        margin: 0 0 5px;
        line-height: 1.2em;
      }
    
      .next-step {
        font-size: 12px;
        color: var(--white);
        font-weight: 300;
      }
      .no-mobile{
        display: none;
      }
      .custom-checkbox-container .column-checkbox {
        grid-template-columns: repeat(1, 1fr); /* Affiche en une seule colonne sur mobile */
        gap: 5px; /* Réduit l'espace entre les options */
      }
      #admin-ui ::-webkit-scrollbar{
        display:none;
      }

      .kyc-form-section__multiple {
        flex-direction: column;
      }
      .kyc-form-section__multiple > *{
        width:100%;
      }
      .kyc-form-section-description{
        margin-bottom:16px;
      }
/* CARROUSSEL */
      .carroussel__asset__box{
        bottom: -20px;
        right: -15px;

      }
      .header__left h2, .header__left p{
        text-align: left;
    }
    }