/* Assure que le corps prend toute la hauteur disponible */
body, html {
    height: 100%;
    margin: 0;
  }
  /* Wrapper pour le contenu et le footer */
  .wrapper {
    min-height: 83vh;
    display: flex;
    flex-direction: column;
  }
  .content {
    flex: 1; /* Ceci prend l'espace disponible, poussant le footer vers le bas */
  }
  footer {
    margin-top: auto; /* Pousse le footer vers le bas de la page si le contenu est insuffisant */
  }
  
  .min-vh-50 {
    min-height: 50vh; /* Hauteur minimale de 50% de la hauteur de l'écran */
  }
  
  .btn-primaire {
    background-color: #3737c8 !important; /* Couleur de fond du bouton */
    color: white !important; /* Couleur du texte du bouton */
    border-color: #3737c8 !important; /* Couleur de la bordure du bouton */
  }
  
  .btn-primaire:hover {
    background-color: #00d4aa !important; /* Couleur de fond au survol */
    border-color: #00d4aa !important; /* Couleur de la bordure au survol */
    color: black !important; /* Couleur du texte au survol */
  }
  
  .btn-primaire:active {
    background-color: #00d4aa !important; /* Couleur de fond lors du clic */
    border-color: #00d4aa !important; /* Couleur de la bordure lors du clic */
    color: black !important; /* Couleur du texte lors du clic */
    box-shadow: inset 0 0 0.2rem rgba(0, 0, 0, 0.2); /* Ombre pour effet de pression */
  }
  
  .btn-primaire:focus, .btn-primaire.focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2); /* Ombre de mise au point */
  }
  
  .btn-secondaire {
    background-color: #00d4aa !important; /* Couleur de fond du bouton */
    color: #060628 !important; /* Couleur du texte du bouton */
    border-color: #00d4aa !important; /* Couleur de la bordure du bouton */
  }
  
  .btn-secondaire:hover {
    color: #fff !important;
    background-color: #3737c8 !important;
    border-color: #3737c8 !important;
  }
  
  
  /* Texte */
  
  .display-1-bold {
    font-size: 60pt; /* Taille de police équivalente à display-1 */
    font-weight: 900; /* Poids de la police très épais */
  }
  
  .fw-black {
    font-weight: 900; /* Poids de police très épais */
  }
  
  .text-primaire {
    color:#3737c8;
  }
  .text-secondaire {
    color:#00d4aa;
  }
  .text-compv1 {
    color:#50ddc6; /* Complément vert #1 */
  } 
  .text-compv2 {
    color:#9fe6e3; /* Complément vert #2 */
  }
  .text-clair {
    color:#efefff;
  }
  .text-compb1 {
    color: #16165d; /* Complément bleu #1 */
  }
  .text-compb2 {
    color:#272793; /* Complément bleu #2 */
  }
  .text-accentb {
    color: #266bbe; /* Accent bleu */
  }
  .text-accentv {
    color:#12a0b4; /* Accent vert */
  }
  .text-fonce {
    color: #060628;
  }
  .text-neutre1 {
    color:#545470; /* Neutre foncé */
  }
  .text-neutre2 {
    color:#a1a1b7; /* Neutre clair */
  }
  .text-h1 {
    font-Size: 4rem;
  }
  .text-h4 {
    font-Size: 1.5rem;
  }
  .ml-05 { 
    margin-left:0.5rem;
  }
  .ml-1 { 
    margin-left:1rem;
  }
  .me-2 {
    margin: 0.5rem; /* Ajuste la valeur si nécessaire */
  }
  
  .bg-primaire {
    background-color:#3737c8 !important;
  }
  .bg-secondaire {
    background-color:#00d4aa !important;
  }
  .bg-compv1 {
    background-color:#50ddc6 !important; /* Complément vert #1 */
  } 
  .bg-compv2 {
    background-color:#9fe6e3 !important; /* Complément vert #2 */
  }
  .bg-clair {
    background-color:#efefff !important;
  }
  .bg-compb1 {
    background-color: #16165d !important; /* Complément bleu #1 */
  }
  .bg-compb2 {
    background-color:#272793 !important; /* Complément bleu #2 */
  }
  .bg-accentb {
    background-color: #266bbe !important; /* Accent bleu */
  }
  .bg-accentv {
    background-color:#12a0b4 !important; /* Accent vert */
  }
  .bg-fonce {
    background-color: #060628 !important;
  }
  .bg-neutre1 {
    background-color:#545470 !important; /* Neutre foncé */
  }
  .bg-neutre2 {
    background-color:#a1a1b7 !important; /* Neutre clair */
  }
  
  .bg-mobile {
    background: linear-gradient(to bottom, 
    #ffffff 0%,    /* Début du blanc en haut */
    #d5d5ff 20%,   /* Blanc jusqu'à 40% */
    #8787de 60%,   /* Transition vers le bleu foncé de 40% à 60% */
    #00d4aa 100%); /* Transition vers le cyan de 60% à 100% */
  padding: 20px; /* Ajouter un espacement interne si nécessaire */
  border-radius: 10px; /* Coins arrondis si souhaité */
  width: 100%; /* La largeur peut être ajustée selon vos besoins */
      min-height: 100vh;
  }
  
  /* Menu */
  
  .nav-link-primaire {
    display: block; /* Assure que le lien occupe tout l'espace disponible */
    color: #060628; /* Couleur du texte */
    border-radius: 0.25rem; /* Coins arrondis */
    padding: 0.5rem 1rem; /* Espacement intérieur */
    text-decoration: none; /* Enlève la décoration par défaut des liens */
    transition: background-color 0.2s ease-in-out; /* Transition douce pour le fond */
  }
  
  .nav-link-primaire:hover,
  .nav-link-primaire:focus {
    color: #3737c8; /* Couleur du texte au survol */
    font-weight:bold;
    text-decoration: none; /* Évite les soulignements au survol */
  }
  
  .nav-link-primaire.active,
  .nav-link-primaire:active {
    color: #00d4aa; /* Couleur du texte au survol */
    font-weight:bold;
    text-decoration: none; /* Évite les soulignements au survol */
  }
  
  
  .dropdown-menu-primaire {
    background-color: #00d4aa !important; /* Couleur primaire pour le fond */
    border-color: rgba(0, 0, 0, 0.15); /* Bordure avec transparence */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175); /* Ombre portée */
  }
  
  .dropdown-menu-primaire .dropdown-item {
    color: #060628; /* Couleur du texte */
  }
  
  .dropdown-menu-primaire .dropdown-item:hover,
  .dropdown-menu-primaire .dropdown-item:focus {
    background-color: #3737c8; /* Couleur primaire pour le fond */
    color: #e9ecef; /* Couleur du texte au survol */
  }
  
  .dropdown-menu-primaire .dropdown-item.active,
  .dropdown-menu-primaire .dropdown-item:active {
    background-color: #060628; /* Couleur primaire pour le fond */
    color: #fff; /* Couleur du texte actif */
  }
  
  .dropdown-menu-primaire .dropdown-divider {
    height: 1px;
    margin: 0.5rem 0;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.15); /* Couleur du séparateur */
  }
  
  /* Fonts */
  .roboto-thin {
      font-family: "Roboto", sans-serif;
      font-weight: 100;
      font-style: normal;
    }
    
    .roboto-light {
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      font-style: normal;
    }
    
    .roboto-regular {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-style: normal;
    }
    
    .roboto-medium {
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      font-style: normal;
    }
    
    .roboto-bold {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      font-style: normal;
    }
    
    .roboto-black {
      font-family: "Roboto", sans-serif;
      font-weight: 900;
      font-style: normal;
    }
    
    .roboto-thin-italic {
      font-family: "Roboto", sans-serif;
      font-weight: 100;
      font-style: italic;
    }
    
    .roboto-light-italic {
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      font-style: italic;
    }
    
    .roboto-regular-italic {
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-style: italic;
    }
    
    .roboto-medium-italic {
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      font-style: italic;
    }
    
    .roboto-bold-italic {
      font-family: "Roboto", sans-serif;
      font-weight: 700;
      font-style: italic;
    }
    
    .roboto-black-italic {
      font-family: "Roboto", sans-serif;
      font-weight: 900;
      font-style: italic;
    }