body{
  font-family: Verdana, sans-serif; /* Remplacez 'NomDeVotrePolice' par le nom de la police que vous souhaitez utiliser */
  background-color: #ffffff;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

.checkbox {
  width: 20px !important; /* Ajustez la taille selon vos besoins */
  height: 20px !important; /* Ajustez la taille selon vos besoins */
  border: 2px solid rgb(33, 32, 32) !important; /* Bordure du carré */
  display: flex !important;
  align-items: center !important; /* Centre verticalement */
  justify-content: center !important; /* Centre horizontalement */
  font-size: 13px !important; /* Ajustez la taille du texte selon vos besoins */
  position: relative !important;
  background-color: transparent !important; /* Valeur par défaut */
  color: black !important; /* Valeur par défaut */
}

/* Par défaut, masquer la flèche */
.down-arrow-container {
  display: none;
}

@media (min-width: 1024px) {
  .down-arrow-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    z-index: 10;
    animation: moveDown 1.5s ease-in-out infinite alternate;
  }}

.down-arrow {
  font-size: 3rem;
  font-weight: bold;
  color: #23a5bf;
  text-decoration: none;
  cursor: pointer;
}

@media (min-width: 1024px) {
@keyframes moveDown {
  0% {
    top: 83%; /* Position initiale en haut */
  }
  100% {
    top: 95%; /* Position finale en bas (tu peux ajuster ce pourcentage) */
  }
}
}





/* Conteneur principal */
.breves-container {
  width: 100%; /* Prend toute la largeur disponible */
  overflow: hidden; /* Cache les éléments hors écran */
  position: relative;
}

/* Wrapper contenant le slider */
.breves-wrapper {
  width: 100%;
  overflow: hidden;
}

/* Slider contenant tous les items */
.breves-slider {
  display: flex; /* Aligne les éléments en ligne */
  width: max-content; /* Permet à tous les éléments de tenir sur une seule ligne */
  animation: scroll-infinite 15s linear infinite; /* Animation fluide */
}

/* Chaque élément du slider */
.breve-item {
  flex-shrink: 0;
  width: 1000px; /* Taille ajustable selon besoin */
  background-color: var(--color2);
  padding: 10px;
  margin-right: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* white-space: nowrap; Empêche le texte de passer à la ligne */
  min-height: 100px;
}

.breve-content {
  width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.breve-item img {
  max-width: 100px;
  height: auto;
  object-fit: cover;
}

/* Défilement fluide et infini */
@keyframes scroll-infinite {
  from {
      transform: translateX(0);
  }
  to {
      transform: translateX(-50%);
  }
}



.equal-height {
  display: flex;
  align-items: stretch;
}

.equal-height > div {
  display: flex;
  flex-direction: column;
}

.logout-container a:hover {
  background-color: var(--color12) !important; /* Couleur au survol */
}

.back-button a:hover {
  background-color: var(--color12) !important; /* Couleur légèrement plus sombre */
  transition: background-color 0.3s ease;
}


.social-icon {
  font-size: 30px;           /* Taille de l'icône */
  color: white;              /* Couleur par défaut (blanc) */
  transition: color 0.3s;    /* Transition douce pour le changement de couleur */
}

.social-icon:hover {
  color: yellow;             /* Couleur au survol (jaune) */
}

.visitor-count-frame {
  display: inline-block; /* Permet de donner une taille personnalisée */
  padding: 5px 10px; /* Espacement intérieur pour le cadre */
  border: 2px solid rgba(169, 169, 169, 0.8); /* Bordure blanche */
  border-radius: 4px; /* Coins arrondis */
  background-color: white; /* Fond légèrement transparent */
  color: rgb(61, 56, 56); /* Couleur du texte */
  font-weight: bold; /* Met le texte en gras si nécessaire */
  font-size: 14px; /* Taille de police ajustable */
}

/* début Bouton retour  */
.back-button-styled {
  background-color: #fdcc4e;  /* Couleur de fond bleue */
  color: white;  /* Texte blanc */
  border: none;  /* Pas de bordure */
  border-radius: 50px;  /* Coins arrondis */
  padding: 10px 20px;  /* Espace autour du texte */
  font-size: 16px;  /* Taille du texte */
  display: inline-flex;  /* Permet d'aligner l'icône et le texte */
  align-items: center;  /* Aligne l'icône et le texte au centre */
  cursor: pointer;  /* Change le curseur lorsque l'on survole le bouton */
  transition: background-color 0.3s ease, transform 0.3s ease;  /* Ajout d'une transition pour les effets */
}

.back-button-styled:hover {
  background-color: #b3d235;  /* Couleur de fond au survol */
  transform: translateY(-2px);  /* Légère élévation du bouton au survol */
}
/* fin Bouton retour  */

/* fin nombre comptage page d'accueil*/

/* bouton envoi lien création d'un mot de passe */


.btn-lien {
  /* animation: clignote 1s infinite; Animation de clignotement par défaut */
  /* Autres styles pour le bouton */
  display: inline-block;
  padding: 10px 20px; /* Ajustez selon vos besoins */
  text-align: center;
  border: none; /* Pas de bordure */
  border-radius: 5px; /* Coins arrondis */
  transition: background-color 0.3s, transform 0.2s; /* Transition douce pour la couleur de fond et la transformation */
}

.btn-lien:hover {
  /* animation: none; Stop l'animation au survol */
  transform: scale(1.1); /* Agrandit le bouton de 10% */
  background-color: var(--color11) !important; /* Change la couleur de fond à vert */
  color: white; /* Change la couleur du texte en blanc pour le contraste */
  border: 2px solid transparent; /* Ajoute une bordure transparente */
}



.profil-button {
  background-color: #007bff; /* Couleur de fond par défaut */
  color: white; /* Couleur du texte par défaut */
}
/* Fin bouton envoi lien création d'un mot de passe */

.contact-card {
  border: 2px solid #ccc; /* Bordure autour de chaque carte de contact */
  margin-bottom: 20px; /* Espace entre chaque carte */
  padding: 15px; /* Espacement intérieur de la carte */
  border-radius: 8px; /* Coins arrondis */
  background-color: #f9f9f9; /* Couleur de fond légère pour les cartes */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre subtile pour un effet d'élévation */
  text-align: center; /* Centre le texte à l'intérieur de la carte */
}

.custom-btn-admin {
  color: rgb(255, 255, 255); /* Couleur du texte */
  padding: 15px 40px; /* Taille du bouton */
  font-size: 18px; /* Taille de la police */
  border-radius: 8px; /* Bordure arrondie */
  transition: background-color 0.3s ease, color 0.3s ease; /* Animation fluide */
}

.custom-btn-admin:hover {
  background-color: var(--color11) !important; /* Force la couleur au survol */
  color: rgb(40, 40, 40); /* Couleur du texte au survol */
}

/* effet des titres */
.effetTitre {
  text-align: center;
  opacity: 0;
  animation: effetTitre 2s ease-in forwards;
  border: 2px solid var(--color12); /* Bordure de 2px avec une couleur bleue */
  padding: 20px; /* Espace intérieur du cadre */
  border-radius: 10px; /* Coins arrondis */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère pour l'effet de profondeur */
  /* background-color: #f8f9fa; Fond légèrement gris */
  color: var(--color4); /* Couleur du texte */
  /* font-weight: bold; Texte en gras */
  font-size: 2rem; /* Taille du texte plus grande */
}

@keyframes effetTitre {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}
/* fin effet titre */


/* debut des couleurs des tableaux */
table.table {
  border-radius: 10px; /* Coins arrondis pour la table */
  overflow: hidden; /* Masquer le débordement pour appliquer le border-radius */
}

/* Style pour le thead */
thead.list {
  background-color: var(--color12) !important; /* Couleur de fond personnalisée */
  color: rgb(9, 9, 9) !important; /* Couleur du texte */
  border-bottom: 20px solid transparent; /* Bordure inférieure */
}

.table-info > th, .table-info > td {
  background-color: #d2ccfd !important;
  color: rgb(0, 0, 0);
}

.table-success > th, .table-success > td {
  background-color: #b3acd8 !important;
  color: rgb(0, 0, 0);
}

/* Optionnel : Style pour les th */
thead.list th {
  background-color: inherit !important; /* Hérite de la couleur de fond */
  color: inherit !important; /* Hérite de la couleur du texte */
}

/* bouton des tableaux */
.btn_tableau{
  background-color: var(--color13);
  color: white;
}

.btn_tableau:hover{
  background-color: var(--color10);
  color:white;
  transform: scale(1.1); /* Grossit légèrement le bouton */
  transition: transform 0.3s ease; /* Ajoute une transition fluide */
}

/* fin des bouton des tableaux */

/* fin des couleurs des tableaux */

.container-fluid {
  padding: 0; /* Supprime le padding par défaut pour éviter les débordements */
  width: 100%; /* Assure que l'élément prend toute la largeur du viewport */
  box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
}


/* Photo profil */
.profile-image {
  max-width: 150px; /* Taille par défaut */
}
/* fin Photo profil */

/* .ckeditor-container, .ckeditor-container * {
  text-decoration: none !important;
} */



/* Début Actualités  */
#scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #fdcc4e;
  color: #fff; /* Couleur de l'icône */
  border: none;
  border-radius: 50%;
  font-size: 24px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  display: block; /* Afficher le bouton */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#scroll-to-top i {
  color: white; /* Assurez-vous que l'icône est bien blanche */
}

#scroll-to-top:hover {
  background-color: #bc88bd;
}




/* #large-card-container {
  /* position: fixe; Peut être fixe ou relative en fonction de votre besoin */
  /* margin: 0 auto; */
  /* max-width: 100%; */
  /* background-color: #28527c;  */
  /* padding: 10px; */
  /* box-sizing: border-box; */


.btn-show-more {
  background-color: #b3d235; /* Couleur verte d'origine */
  color: #fff;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-show-more:hover {
  background-color: #a3218f; /* Couleur violette au survol */
  color: #e6f2d8; /* Couleur vert clair au survol */
}

/* Fin Actualités  */


.scrollable-content {
  max-height: 300px; /* Vous pouvez ajuster cette hauteur selon vos besoins */
  overflow-y: auto;
  padding-right: 15px; /* Pour l'espacement du scroll */
}


/* Appliquer l'animation à la div avec une durée de 5 secondes */
.blinking {
  animation: blink 1s linear infinite;
}

/* Pour faire clignoter la div pendant seulement 5 secondes */
.blinking-timed {
  animation: blink 1s linear;
  animation-iteration-count: infinite; /* L'animation se répétera à l'infini */
}

/* Définir l'animation de clignotement */
@keyframes blink {
  0% { border-color: var(--color12)}
  40% { border-color: var(--color13) }
  60% { border-color: var(--color8); }
  80% { border-color: var(--color4); }
  100% { border-color: var(--color10); }
}


.button_metier { 
  color: var(--color4);
  text-decoration: none;
}

.arrow {
  color: var(--color4); /* Couleur de la flèche */
  font-size: 1.5rem; /* Taille de la flèche */
  top: 5px; /* Déplace vers le bas */
  margin-left: 10px; /* Ajoute un espace entre le texte et la flèche */
}

/* Définir l'animation de rebondissement le bouton pour les metiers*/
@keyframes bounce {
  0%, 100% {
    transform: translateY(0); /* Position initiale */
  }
  50% {
    transform: translateY(-10px); /* Déplacement vers le haut de 10 pixels */
  }
}

.bt-tabord .btn {
  transition: transform 0.3s ease; /* Animation fluide */
}

.bt-tabord:hover .btn {
  transform: scale(1.1); /* Agrandissement du bouton au survol */
}

/* bouton pour les metiers */
.bt-menu {
  border: 5px solid white;
  background: #b3d235;
  height: 180px;
  text-decoration: none;
  display: inline-block; /* Assure que les dimensions sont respectées */
  transition: transform 0.3s ease; /* Transition douce pour l'effet de grossissement */
}

.bt-menu:hover {
  transform: scale(1.05); /* Agrandit le bouton de 10% au survol */
}

.bt-menu h1 {
  font-size: 2.4em;
}


.hidden {
  display: none;
}

#newCarousel{
  color:red;
}

/* début contact */
.box-region {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

#contacts {
  width: 100%; /* Remplacez 300px par la largeur fixe souhaitée */
}

#contacts h2{
  font-size: 22px;
}
/* fin contact */

.custom-style {
  color: red; /* Couleur du texte */
  border-color: blue; /* Couleur de la bordure */
}

.cardinfo {
  display: flex;
}

.footer {
  background-color: #23a5bf;
  /* display: none;  width: 100%; */
  text-align: center;
  padding: 10px 0;
  margin-top: auto;
}

.footer a {
  color: #dedadc; /* Assurez-vous que les liens sont également en blanc */
  text-decoration: none; /* Enlevez la décoration de texte des liens */
}

.footer h3 {
  color: white; /* Définit la couleur des titres h3 en blanc */
}

.footer a:hover {
  color: #fdcc4e; /* Couleur des liens au survol, optionnel */
}

.admin-header {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
}

.admin-header h1 {
  font-size: 2em;
  margin-bottom: 10px;
  color: #333;
}

/* .admin-body {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
} */

.admin-button {
  padding: 10px 20px;
  font-size: 1em;
  /* width: 200px; */
  border: none;
  border-radius: 5px;
  background-color: #00a4c0;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.admin-button:hover {
  background-color: #fdcc4e;
  color: #ac2376  ;
}

.profil-button {
  padding: 10px 20px;
  font-size: 1em;
  /* width: 200px; */
  border: none;
  border-radius: 5px;
  background-color: var(--color8);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.profil-button:hover {
  background-color: var(--color9);
  color: #fff  ;
}

.visitor-count {
  font-size: 1.5em;
  color: #ac2376;
  text-align: center;
  padding: 10px;
  border: 1px solid #ac2376;
  border-radius: 5px;
  /* width: 100%; */
}

.first-page {
  display: flex;
  align-items: center; /* Centrer verticalement */
  justify-content: center; /* Centrer horizontalement */
  height: 100vh; /* 100% de la hauteur de la vue */
  /* background-color: var(--color5); */
}

.first-logo {
  text-align: center;
  opacity: 1; /* Définissez l'opacité à 1 pour qu'il soit visible à la fin de l'animation */
  transform: scale(5) rotate(0deg); /* Définissez l'échelle et la rotation initiales */
  animation: fadeInAndScale 4s ease forwards;
}

@keyframes fadeInAndScale {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }

  100% {
    opacity: 1;
    transform: scale(4) rotate(360deg); /* Ajoutez une rotation complète (360 degrés) */
  }
}

.bandeau {
  padding: 10px;
  text-align: center;
}

.carousel-container {
  z-index: 0;
  width: 100%;
  overflow: hidden;
}

.carousel {
  display: flex;
  flex-wrap: nowrap; /* Permet aux diapositives de ne pas passer à la ligne */
  transition: transform 0.s ease-in-out;
}

.carousel-item {
    transition: opacity 0s ease-in-out; /* Ajuste la durée et le type de transition */
}
.carousel-item.active {
    opacity: 1;
}
.carousel-item:not(.active) {
    opacity: 0;
}

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.card img {
  max-width: 100%;
  height: auto;
}

.card-date{
  background-color: #fdcc4e !important;
}


#cardCarousel .card-date {
  position: absolute;
  top: -15px;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  background-color:var(--color2);
  border-radius: 10px;
}

.card-action {
  border: 1px solid var(--color4);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
  border-radius: 10px; 
}

.carousel-inner .card{
  border: 1px solid var(--color2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
  border-radius: 10px; 
}

.slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  height: auto;
}


marquee {
  display: inline-block;
  white-space: nowrap;
}

/* Début Styles pour le bouton Modification */
.custom-btn{
  width: 80%;
  height: 80px;
}
/* Fin Styles pour le bouton Modification vers le haut */

/* Début Styles pour le bouton Retour */
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}

.scroll-to-top.show {
  display: block;
}

/* Fin Styles pour le bouton Retour vers le haut */

/* Début Styles Listing */
#cardCarousel .carousel-inner a:hover {
  color: var(--color4) !important; /* Couleur au survol */
}

.list .table td,
.table th{
  font-size: small;
  }

/* Utilisation d'un sélecteur plus spécifique */
.list > .table {
  border: 0.1rem solid var(--color2);
}

.card {
  margin-bottom: 20px; /* Ajustez la valeur selon vos besoins */
}

.doc {
  background-color: #fdcc4e;
  border: 2px solid #fdcc4e;
  border-radius: 5px;
  padding: 10px;
}

.docList {
  background-color: #00a4c0;
  border: 2px solid #00a4c0;
  border-radius: 5px;
  padding: 10px;
  margin-top: 5px;
}

.docList:hover {
  background-color: #bc88bd;
  border: 2px solid #bc88bd;
  border-radius: 5px;
  padding: 10px;
  margin-top: 5px;
}

.list{
  margin-left: 60px;
  margin-right: 60px;
}

.listMobile{
  display: none;
}

.sort-link {
  display: inline-block;
  font-size: 0.5em; 
  color: var(--color4);
}

.tt{
  font-size: small;
  font-weight: bold;
  
}

 /** Début Couleurs pour le site */
:root {
  /* début couleur border et background color*/
  --color4: #00a4c0;
  --color2: #d8e5f8;
    /* fin couleur border et background color*/
  
  /* début couleur Navbar et background color*/
  --color5: #ffa7da;
  --color6: #5c5c5c;
  /* fin couleur Navbar et background color*/

  /* début couleur color*/
  --color1: #b6b6b6;
  --color3: #fd60ac;
  --color7: #efeded;
  --color8: #b3d235;
  --color9: #ac2376;
  --color10:#d66e2b; 
  --color11:#bc88bd;
  --color12:#fdcc4e;
  --color13:#e74111;
  

  /* fin couleur color*/
}
 /** Fin Couleurs pour le site */

  /** Début Couleurs btn */
.btn_color{
  background-color: var(--color8);
  border-radius: 20px;
  color:#fff;
}

.btn_color:hover{
  background-color: var(--color9);
  border-radius: 20px;
  color:#fff;
}
 /** Fin Couleurs btn */

 /** début header btn */
.head{
  height: 100%;
  position: relative;
  z-index: 0;
  background-color: var(--color2);
  padding: 10px;
  margin-bottom: 20px;
}

.icone{
  width: 20%;
  margin-top: 2px;
}

.logo{
  width: 18%;
  margin-top: 2px;
}

.logoo{
  width: 60%;
}

.logo2{
  display:none;
}

.sociaux{
  display: none;
}

 /** Fin header btn */

/* début lien sociaux */
.facebook:hover{
  transform: scale(1.1);
  animation: 10s 1s slidein;
}

.instagram:hover{
  transform: scale(1.1);
  animation: 10s 1s slidein;
}

.youtube:hover{
  transform: scale(1.1);
  animation: 10s 1s slidein;
}
/* fin lien sociaux */


/* début card page d'acceuil */
.cardAccueil{
  background-color: #00bbbb;
  border-radius: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
}

.cardAccueil:hover{
  background-color: #00bbbb;
  transform: scale(1.1);
  font-size: 1em;
  margin: auto;
  border-radius: 20px;
}
/* fin card page d'acceuil */

/* Debut Metiers */
.cardAccueilMetiers{
  background: rgb(252, 125, 203);
  height: 245px;
  width: 245px;
  border-radius: 50%;
  margin: auto;
  color: #ffffff;
  font-weight: bold;
  font-size: 1em;
}

.cardAccueilMetiers:hover{
  background-color:var(--color4);
  transform: scale(1.05);
  height: 245px;
  width: 245px;
  border-radius: 50%;
  margin: auto;
  color:var(--color6);
  font-weight: bold;
}
/* Fin Metiers */

/* début user fonctionnalités */

/* Debut inscription users */
.register{
  background-color:var(--color2);
  border: 2px solid var(--color4); 
  border-radius: 40px;
  /* margin-bottom: 20px; */
  /* display: flex;
  align-items:center;
  width: 600px;
  margin-bottom: 20px; */
}
/* Fin inscription users */

/* Début modification users */
.edit {
  border-radius: 10px;
  background-color:var(--color2);
  border: 2px solid var(--color4); 
  display: flex;
  align-items: center;
  width: 800px;
  padding: 20px;
}
/* Fin modification users */

/* Début login users */
.login{
  background-color:var(--color2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: .1em solid;
  border-color: var(--color4);
  border-radius: 10px;
  width: 500px;
}
/* Fin login users */

/* Début espace adhérent */
.espace_adherent{
  border: .1em solid;
  border-color: var(--color1);
  border-radius: 10px;
  text-decoration: none;
  color: var(--color6);
}

.espace_adherent:hover{
  background-color:var(--color2);
  border: .1em solid;
  border-color: var(--color4);
  transform: scale(1.05);
  color: var(--color6);
  font-weight: bold;
}

.profile_adherent{
  border: .1em solid;
  border-color: var(--color2);
  border-radius: 10px;
  padding: 20px;
  font-size: large;
}
/* fin espace adhérent */


/* Début Reset du mot de passe adhérent */
.reset_mdp{
  display: flex;
  align-items: center;
  /* background-color:var(--color2); */
  border: .1em solid;
  border-color: var(--color4);
  border-radius: 10px;
  width: 500px;
  padding: 20px;
}
/* Fin Reset du mot de passe adhérent */

/* Début Page d'accueil */
.text_accueil{
  position: relative;
  text-align: justify;
  border: .1em solid;
  border-color: var(--color4);
  border-radius: 20px; 
  padding: 1%;
}

.cardInfo1{
  background-color: #05940e;
  color: #ffffff;
  font-weight: bolder;
  border-radius: 20px;
  height: 120px;
  width: 200px;
}

.cardInfo1:hover{
  background-color: #00bbbb;
}

.cardInfo2{
  background-color: #ebb551;
  color: #ffffff;
  font-weight: bolder;
  border-radius: 20px;
  height: 120px;
  width: 200px;
}

.cardInfo2:hover{
  background-color: #e33aa8;
}

.cardInfo3 {
  background-color: #e33aa8;
  color: #ffffff;
  font-weight: bolder;
  border-radius: 20px;
  height: 120px;
  width: 200px;
}

.cardInfo3:hover{
  background-color: #1fbb00;
}

.cardInfo4 {
  background-color: #433ae3;
  color: #ffffff;
  font-weight: bolder;
  border-radius: 20px;
  height: 120px;
  width: 200px;
}

.cardInfo4:hover{
  background-color: #bbbb00;
}
/* Fin Page d'accueil */

/* Version portable */

/* Début petit écran portable */
@media (max-width: 768px) {
  .custom-margin {
    margin: 2%;
      width:96%;
  }

  .head{
    padding: 25px;
  }

h3 {
    font-size: 20px; /* Ajustez la taille de la police pour les écrans plus petits */
}

h5 {
    font-size: 16px; /* Ajustez la taille de la police pour les écrans plus petits */
}

}
/* Fin petit écran portable */

/* Début écran portable LG */
@media only screen and (max-width:992px){

/* photo profil */
.profile-image {
    max-width: 150px; /* Taille pour les écrans mobiles */
}

.bt-menu h1 {
    font-size: 2em;
}

/* Styles de base pour le bouton pour les metiers */
.button_metier {
  height: 50px;
  width: 50px;
  font-size: 8px; /* Taille du texte */
}

/* Début Styles pour le bouton Modification */
.custom-btn{
  width: 100%;
}

/* Fin Styles pour le bouton Modification vers le haut */

.cardInfo1 {
  margin-left: auto;
  margin-right: auto;
  height: 180px;
  width: 180px;
}

.cardInfo2 {
  margin-left: auto;
  margin-right: auto;
  height: 150px;
  width: 150px;
}

.cardInfo3 {
  margin-left: auto;
  margin-right: auto;
  height: 150px;
  width: 150px;
}

.cardAccueilMetiers{
  height: 200px;
  width: 200px;
  margin-top: 20px;
  font-weight: bold;
  font-size: .8em;
}  

.cardAccueilMetiers:hover{
  background-color:var(--color4);
  color: #007bff;
  transform: scale(1);
  height: 250px;
  width: 250px;
}

.cardinfo{
  display: none;
}

.list{
  display: none;
}

.listMobile{
  display: block;
  margin-top: 5px;
}

.bor{
  border: 0.1rem solid;
  border-color: #d7d5d5;
}

.listMobileAdherent{
  border:.2rem solid var(--color2);
  border-radius: 10px;
  margin: 8px;
  padding: 5px;
  font-size: 1.1em;
  width: 100%;
}

.navVertical{
  position: absolute;
  margin-top: 25px;
}

.logo{
display: none;
}

.logoo{
  display: none;
  }

.logo2{
  display: block;
  width: 28%;
  margin-top: 2px;
}

.sociaux{
  display: flex;
  justify-content: flex-end;
}

.navbar-toggler {
  display: flex;
  align-items: center;
}

.head{
  padding: 25px;
}

.login{
  border-radius: 50px;
  width: 350px;
  display: flex;
  align-items:center;
  justify-content: center;
} 

/* .register{
  display: flex;
  align-items:center;
  width: 380px;
} */

/* .profile_adherent{
  width: 350px;
  padding: 20px;
} */

/* .profile_adherent .row .btn-primary{
  display: block;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  font-size:large;
  width: 300px;
  height: 50px;
} */

.edit{
  border-radius: 10px; 
  /* width: 370px; */
  /* padding: 20px; */
  font-size: large;
  border-radius: 10px;
}

.edit .row .btn-primary{
  display: block;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  font-size: 20px;
  width: 300px;
  height: 50px;
}

.reset_mdp{
  display: flex;
  align-items: center;
  border: .1em solid;
  border-color: var(--color4);
  border-radius: 10px;
  width: 300px;
  padding: 20px;
}

.reset_mdp_response{
  display: flex;
  align-items: center;
  border: .5em solid;
  border-color:var(--color4);
  border-radius: 50px;
  width: 700px;
  padding: 20px;
  font-size: xx-large;
}

.main-menu.navbar-collapse.collapse {
  width: 35vw;
  max-width: 100vw;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}

}
/* Fin version portable */

/* Menu vertical */

.navVertical{
  position: absolute;
  margin-top: -9px;
}

.navbar-toggler{
  margin-top: -50px;
  margin-left: 15px;
  margin-bottom: 5px;
}

.fa-lg {
  font-size: 2em;
  }

.fa {
  position: relative;
  display: table-cell;
  margin: 5px;
  width: 55px;
  height: 54px;
  margin-left: 10px;
  text-align:center;
  font-size:30px;
  }
  
  .main-menu:hover, nav.main-menu.expanded {
  width:255px;
  overflow:hidden;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  opacity:1;
  }
  
  .main-menu {
  background-color: var(--color5);
  position:relative;
  top:0px;
  bottom:8px;
  height:100%;
  right:0;
  width:55px;
  overflow:hidden;
  -webkit-transition:width .1s linear;
  transition:width .1s linear;
  box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07);
  opacity:1;
  z-index: 3;
  } 
  
  .main-menu>ul {
  position:relative;
  top: 0px;
  }
  
  .main-menu li {
  position:relative;
  display:block;
  width:15px;
  }
  
  .main-menu li>a {
  position:relative;
  width:255px;
  display:table;
  border-collapse:collapse;
  border-spacing:0;
  color:var(--color4);
  font-size: 13px;
  text-decoration:none;
  -webkit-transition:all .14s linear;
  transition:all .14s linear;
  font-family: 'Strait', sans-serif;
  border-top:1px solid #f2f2f2;
  text-shadow: 1px 1px 1px  #fff;  
  }
  
  .main-menu .nav-text  {
  position:relative;
  display:table-cell;
  vertical-align:middle;
  width:255px;
  color:var(--color6);
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: bold;
  }
  
  nav ul,nav li {
  outline:0;
  margin:0;
  padding:0;
  text-transform: uppercase;
  }
  
  .main-menu li:hover>a,nav.main-menu li.active>a {
  color:#fff;
  background-color:var(--btn);
  text-shadow: 0px 0px 0px; 
  } 
  
  /** Fin menu vertical **/