/* Commentaire CSS */

/* Sélecteur */
/* Style pour toutes les pages */


/* Définition de la police Poppins */
@font-face {
   font-family: 'Poppins';
   src: url('/fonts/poppins-v22-latin-regular.woff2') format('woff2'),
        url('/fonts/poppins-v22-latin-regular.woff') format('woff');
   font-weight: 400; /* Poids normal */
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Poppins';
   src: url('/fonts/poppins-v22-latin-700.woff2') format('woff2'),
        url('/fonts/poppins-v22-latin-700.woff') format('woff');
   font-weight: 700; /* Poids gras */
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Poppins';
   src: url('/fonts/poppins-v22-latin-900.woff2') format('woff2'),
        url('/fonts/poppins-v22-latin-900.woff') format('woff');
   font-weight: 900; /* Poids très gras */
   font-style: normal;
   font-display: swap;
}

/* Définition de la police Finger Paint */
@font-face {


   
   font-family: 'Finger Paint';
   src: url('/fonts/finger-paint-v19-latin-regular.woff2') format('woff2'),
        url('/fonts/finger-paint-v19-latin-regular.woff') format('woff');
   font-weight: 400; /* Poids normal */
   font-style: normal;
   font-display: swap;
}






 .poppins-bold-titre-h1 {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-size: 24px;
   color: #103754;
   
}
@media (max-width: 768px) {
   .poppins-bold-titre-h1 {
     font-size: 24px; /* réduction par rapport à 1.5rem */
   }
 }

.poppins-bold-titre-h2 {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-style: normal;
   color: #103653;
   font-size: 24px; /* Taille de la police relative */
   margin-bottom: 20px;
}
@media (max-width: 768px) {
   .poppins-bold-titre-h2 {
     font-size: 24px; /* réduction par rapport à 1.5rem */
   }
 }





.poppins-regular-titre-h3 {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-style: normal;
   color: #103754;
   font-size: 16px;
 }
 @media (max-width: 768px) {
   .poppins-regular-titre-h3 {
     font-size: 16px; /* ou une autre taille plus adaptée au mobile */
   }
 }



/* Styles spécifiques pour "Modalité" et "Pictogrammes" */
.poppins-bold-titre-h3 {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-style: normal;
   color: #103754;
   font-size: 16px;
 }
 @media (max-width: 768px) {
   .poppins-bold-titre-h3 {
     font-size: 16px; /* ou une autre taille plus adaptée au mobile */
   }
 }


.poppins-regular-balise-p {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
   font-style: normal;
   color: #103754;
 }
@media (max-width: 768px) {
   .poppins-regular-balise-p {
     font-size: 14px; /* ou une autre taille plus adaptée au mobile */
   }
 }

 /* Styles spécifiques pour le texte en gras de la frise caché */
 .poppins-bold-balise-p {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-style: normal;
   color: #103754;
   font-size: 14px;
 }
@media (max-width: 768px) {
   .poppins-bold-balise-p {
     font-size: 14px; /* ou une autre taille plus adaptée au mobile */
   }
 }


.poppins-regular {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
   font-style: normal;
   color: #103754;
 }
@media (max-width: 768px) {
   .poppins-regular {
     font-size: 14px; /* ou une autre taille plus adaptée au mobile */
   }
 }




/* Styles spécifiques le titre h1 typo blanc" */
.poppins-bold-titre-blanc-h1 {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-style: normal;
   color: #F8F9F6;
   font-size: 24px; /* Taille de la police relative */
}

@media (max-width: 768px) {
   .poppins-bold-titre-blanc-h1 {
     font-size: 24px; /* ou une autre taille plus adaptée au mobile */
   }
 }


.poppins-bold-titre-blanc-h2 {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-style: normal;
   color: #F8F9F6;
   font-size: 24px; /* Taille de la police relative */
   margin-bottom: 20px;
 
}
@media (max-width: 768px) {
   .poppins-bold-titre-h2 {
     font-size: 24px; /* réduction par rapport à 1.5rem */
   }
 }

.poppins-regular-blanc-balise-p {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
   font-style: normal;
   color: #F8F9F6;
 }
@media (max-width: 768px) {
   .poppins-regular-blanc-balise-p {
     font-size: 14px; /* ou une autre taille plus adaptée au mobile */
   }
 }




/* Styles spécifiques pour le texte marron de la frise caché */
 .poppins-regular-marron-balise-p {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
   font-style: normal;
   color: #40413E;
 }
@media (max-width: 768px) {
   .poppins-regular-marron-balise-p {
     font-size: 14px; /* ou une autre taille plus adaptée au mobile */
   }
 }


/* Styles spécifiques pour le texte marron en gras de la frise caché */
 .poppins-bold-marron-balise-p {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-style: normal;
   color: #40413E;
   font-size: 14px;
   padding-top: 10px;
 }
@media (max-width: 768px) {
   .poppins-bold-marron-balise-p {
     font-size: 14px; /* ou une autre taille plus adaptée au mobile */
   }
 }



/* Styles pour les liens du site */

.style-liens {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #025a75; /* bleu vif plus distinct */
  font-size: 1rem;
  background: none;
  text-decoration: underline; /* souligné par défaut */
  padding: 2px 4px;
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s, outline 0.3s;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); /* léger relief */
}

.style-liens:hover,
.style-liens:active {
  color: #016d8b; /* bleu encore plus vif au hover */
  background-color: #c0e7e1; /* fond légèrement plus prononcé */
  text-decoration: underline;
}

.style-liens:focus {
 
  outline-offset: 3px;
  color: #013f4d;
  background-color: #d7f1ef;
  text-decoration: underline;
}

/* Adaptation responsive */
@media (max-width: 768px) {
  .style-liens {
    font-size: 16px;
  }
}











 /* Styles spécifiques pour l'espace entre deux contenus */
.espace-force {
   margin-bottom: 50px; /* Ajoutez de l'espace entre les éléments */
}














/* Appliquer Poppins (poids normal) */
body {
   font-family: 'Poppins', sans-serif;
   font-weight: 400; /* Poids normal */
}

/* Appliquer Poppins (poids gras) pour les titres */
h1, h2, h3, h4, h5, h6 {
   font-family: 'Poppins', sans-serif;
   font-weight: 700; /* Poids gras */
}

/* Appliquer Poppins (poids très gras) pour les titres importants */
h1 {
   font-family: 'Poppins', sans-serif;
   font-weight: 900; /* Poids très gras */
}

/* Appliquer Finger Paint pour les éléments spécifiques */
.special-text {
   font-family: 'Finger Paint', cursive;
   font-weight: 400;
}


/* Style général du body */

body {
   position: relative; /* Assure que le corps est positionné correctement */
   margin: 0;
   padding: 0;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
   font-family: "Poppins", Arial, sans-serif;
   box-sizing: border-box;
   min-height: 100vh; /* Assure que le corps a au moins la hauteur de la fenêtre du navigateur */
}

html, body {
   height: 100%; /* Assurez-vous que l'html et le body occupent toute la hauteur */
   margin: 0;
}



header {
   position: relative; /* Peut aider à éviter les conflits */
   z-index: 1000; /* Assurez-vous qu'il est au-dessus des autres éléments */
}

.navbar {
   background-color: #fff; /* Couleur de fond */
   position: fixed; /* Rendre le menu fixe */
   top: 0; /* En haut de la page */
   left: 0; /* Aligné à gauche */
   right: 0; /* Aligné à droite */
   width: 100%; /* S'étendre sur toute la largeur */
   z-index: 1000; /* Assurez-vous qu'il soit au-dessus des autres éléments */
}

main {
   flex-grow: 1; /* Le contenu principal prend tout l'espace restant */
   padding-top: 60px; /* Ajustez cette valeur à la hauteur de votre navbar */
}

.index-footer-section {
   margin-top: auto; /* Force le footer à rester en bas */
}



/* Utilisez la police Helvetica pour les titres */
h2, h3 {
   font-family: 'Helvetica Neue', Arial, sans-serif;
}



/* Style PIED DE PAGE */
.index-footer-section,
.projet-footer-section,
.faq-footer-section,
.contact-footer-section,
.legales-footer-section {
   padding: 20px; /* Remplissage interne de la section */
   position: relative; 
   width: 100%; 
   background: #143854; /* Couleur de fond du pied de page */
}

@media (max-width: 767px) {
   .index-footer-section {
       margin-left: 0;
       padding-left: 0;
       width: 100%;
       overflow-x: hidden;
   }
}




/* Style de la section bordure rayée au dessus du pied de page */
.striped-section {
   height: 5px; /* Ajustez la hauteur selon vos besoins */
   width: 100%; /* La section prend toute la largeur */
   background: repeating-linear-gradient(
       45deg, /* Angle des rayures */
       #143854, /* Couleur de la première rayure */
       #143854 10px, /* Largeur de la première rayure */
       #F8F9F6 10px, /* Couleur de l'espace entre les rayures */
       #F8F9F6 20px /* Largeur totale d'une répétition */
   ); /* Répétition pour créer le motif */
}

.striped-section p {
   visibility: hidden; /* Rendre le texte invisible */
}

/* Styles pour les éléments span "2024 Céline Hubert Conçu avec coeur" à l'intérieur de custom-footer-section */
.footer-text {
   font-family: 'Poppins', sans-serif; /* Change la police */
   font-size: 12px; /* Change la taille de la police */
   font-weight: 400; /* Change le poids de la police */
   color: #F8F9F6; /* Change la couleur du texte */
}




/* Style pour les horaires d'accueil*/
.liens-utiles-typo h3 {
   margin-bottom: 25px; /* Augmente l'espace sous le titre */
   font-size: 16px; /* typo horaires */
}

.pied-page-typo h3 {
   margin-bottom: 35px; /* Augmente l'espace sous le titre */
   font-size: 16px; /* typo liens utiles et reeseaux sociaux */
}

.pied-page-typo p {
   margin-top: -10px; /* Réduit l'espace entre les paragraphes */
}

/* Classe pour les horaires d'accueil */
.pied-page-typo {
   color: #F8F9F6; 
   text-align: center; /* Pour garder le texte centré */
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 12px;
   font-style: normal;
}


.acces-horaires {
   margin-top: 20px;   /* Ajuste la marge en haut */
   margin-bottom: 20px; /* Ajuste la marge en bas */
}



/* Styles pour l'icône et le texte des horaires */
.horaires-footer {
   display: flex;
   align-items: flex-start; /* Aligne l'icône avec la première ligne de texte */
   gap: 8px; /* Espacement entre l'icône et le texte */
   justify-content: flex-start; /* Aligne tout à gauche par défaut */
   margin-bottom: 30px;
}

/* Ajustement pour les petits écrans (mobile) */
@media (max-width: 767px) {
   .horaires-footer {
      justify-content: flex-start; /* Aligne le bloc à gauche sur mobile */
      align-items: flex-start; /* Garde l'icône et le texte alignés sur le haut du bloc */
      text-align: left; /* Aligne le texte à gauche */
   }
}


/* Style de l'icône svg des horaires */
.icone-horaires {
   flex-shrink: 0; /* Empêche l'icône de se réduire */
   width: 40px; /* Ajuste la taille de l'icône */
   height: auto;
}

.horaires-text {
   text-align: left; /* Aligne le texte à gauche */
   white-space: normal; /* Permet un retour à la ligne naturel */
}


/* Styles spécifiques pour l'espace entre les liens PIED DE PAGE */
.localisation-pied-page-spacer {
   margin-bottom: 30px; /* Ajoute de l'espace entre les éléments */
}

.localisation-footer {
   display: flex;
   align-items: center; /* Aligne verticalement l'icône et le texte */
   gap: 8px; /* Espacement entre l'icône et le texte */
   justify-content: flex-start; /* Aligne tout à gauche par défaut */
   margin-bottom: 30px;
}

/* Ajustement pour les petits écrans */
@media (max-width: 767px) { 
   .localisation-footer {
      justify-content: flex-start; /* Aligne le bloc à gauche sur mobile */
      align-items: flex-start; /* Garde l'icône et le texte alignés sur le haut du bloc */
      text-align: left; /* Aligne le texte à gauche */
   }
}

/* Style de l'icône svg */
.icone-localisation {
   flex-shrink: 0; /* Empêche l'icône de se réduire */
   width: 40px; /* Ajuste la taille de l'icône */
   height: auto;
}

.localisation-text {
   text-align: left; /* Aligne le texte à gauche */
   white-space: normal; /* Permet un retour à la ligne naturel */
}




.liens-utiles {
   margin-top: 20px;   /* Ajuste la marge en haut */
   margin-bottom: 20px; /* Ajuste la marge en bas */
}



/* Styles pour l'icône et le texte des liens utiles */
.liens-utiles-footer {
   display: flex;
   align-items: flex-start; /* Aligne l'icône avec la première ligne de texte */
   gap: 8px; /* Espacement entre l'icône et le texte */
   justify-content: flex-start; /* Aligne tout à gauche par défaut */
   margin-bottom: 30px;
}

/* Ajustement pour les petits écrans (mobile) */
@media (max-width: 767px) {
   .liens-utiles-footer {
      justify-content: flex-start; /* Aligne le bloc à gauche sur mobile */
      align-items: flex-start; /* Garde l'icône et le texte alignés sur le haut du bloc */
      text-align: left; /* Aligne le texte à gauche */
   }
}

/* Style de l'icône svg des liens utiles */
.icone-liens-utiles {
   flex-shrink: 0; /* Empêche l'icône de se réduire */
   width: 40px; /* Ajuste la taille de l'icône */
   height: auto;
}



/* Classe pour les liens utiles */
.liens-utiles-typo {
   color: #F8F9F6; /* Par exemple, un bleu plus foncé */
   text-align: center; /* Pour garder le texte centré */
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 12px;
   font-style: normal;
}

/* Alignement du SVG avec le texte des liens */
.liens-utiles-typo a span {
   vertical-align: middle; /* Aligne le SVG avec le texte */
   margin-right: 5px; /* Espace entre le SVG et le texte */
}

/* Style des liens pied de page*/
.liens-utiles-typo a {
   color: #F8F9F6; /* Couleur personnalisée pour les liens */
   text-decoration: none; /* Pas de soulignement */
}

.liens-utiles-typo a:hover {
   color: #9786BD; /* Couleur pour l'effet hover */
}

.me-contacter {
   margin-top: 20px;   /* Ajuste la marge en haut */
   margin-bottom: 20px; /* Ajuste la marge en bas */
}


/* Style des icônes svg des liens pied de page*/
.love-letter {
   max-height: 25px;
   vertical-align: middle;
   margin-right: 5px;
}



.suivez-chez-celine {
   margin-top: 20px;   /* Ajuste la marge en haut */
   margin-bottom: 20px; /* Ajuste la marge en bas */
}


/* Style des icônes svg des liens pied de page*/
.social-icons {
   width: 40px; /* Taille de l'icône */
   margin-right: 10px; /* Espacement entre l'icône et le texte */
   vertical-align: middle; /* Alignement vertical */
}

/* Styles spécifiques pour l'espace entre les liens PIED DE PAGE */
.pied-page-spacer {
   margin-bottom: 10px; /* Ajoutez de l'espace entre les éléments */
}


/* Style du logo rond chez celine */
.logo-pied-page {
   height: 170px;
   width: 170px;
   display: block; /* S'assurer que l'image prend toute la largeur dispo */
   margin-left: 0; /* S'assurer qu'il n'y a pas de marge gauche automatique */
   text-align: left; /* Alignement texte si jamais nécessaire */
   margin-top: 40px; /* Ajuste la marge en haut */
   margin-bottom: 40px; /* Ajuste la marge en bas */
}



 /* Styles pour la ligne horizontale de séparation de la faq */
.pied-page-separator {
   border: none; /* Remove the default border */
   border-top: 2px solid #F8F9F6; /* Add a top border with the desired color and thickness */
   margin: 20px 0; /* Optional: Add some margin for spacing */
 }

 .heart-icon {
   width: 0.8rem; /* Ajustez la taille du SVG */
   height: 0.8rem; 
   
 }


 
  /* Styles pour le menu déroulant */
 .custom-navbar {
   background-color: #F8F9F6;
   border-bottom: 5px solid transparent; /* Assurez-vous que la bordure inférieure est transparente */
   border-image: url('../images/navbar/bordure-main multicolor.svg') 30 repeat; /* Remplacez 'chemin/vers/votre/image.png' par le chemin de votre image */
   transition: border-image 0.5s ease-in-out; /* Ajoute une transition pour l'effet tremblant */
   padding-top: 15px; /* Augmente la hauteur en ajoutant du padding en haut */
   padding-bottom: 15px; /* Augmente la hauteur en ajoutant du padding en bas */
}

.custom-navbar:hover {
   border-image: url('../images/navbar/bordure-main multicolor.svg') 30 repeat; /* Image tremblante */
}

 

/* Styles pour le logo chez celine du menu déroulant */
 .navbar-logo {
   width: 150px; /* Ajustez la largeur de votre logo selon vos besoins */
   height: auto;
   margin-right: 0px; /* Ajoutez un espacement entre le logo et le texte */
}
 


/* Style de l'icône de flèche vers le haut */
.scroll-to-top {
   position: fixed;
   bottom: 20px; /* Ajustez la position verticale selon vos besoins */
   right: 20px; /* Ajustez la position horizontale selon vos besoins */
   font-size: 24px; /* Taille de l'icône */
   background-color: #F79927; /* Couleur de fond */
   color: #fff; /* Couleur de l'icône (blanc) */
   width: 50px; /* Largeur du cercle */
   height: 50px; /* Hauteur du cercle */
   border-radius: 50%; /* Forme arrondie */
   transition: background-color 0.3s, transform 0.3s; /* Effets de transition */
   z-index: 999; /* Assurez-vous que l'icône est au-dessus du contenu */
   text-align: center; /* Centre le texte horizontalement */
   line-height: 50px; /* Centre l'icône verticalement */

}

/* Au survol, changez la couleur de la flèche (blanche) */
.scroll-to-top:hover {
   background-color: #9786BD; /* Couleur de fond au survol */
  
}

.rocket-icon {
   width: 54px; /* Taille de l'icône */
   height: 54px; /* Taille de l'icône */
}

.scroll-to-top {
   position: fixed; /* Fixe l'icône pour qu'elle reste visible lors du défilement */
   bottom: 20px; /* Placez l'icône à 20px du bas de l'écran */
   left: 50%; /* Placez l'icône au centre horizontal */
   transform: translateX(-50%); /* Ajuste l'alignement pour centrer exactement */
   width: 54px; /* Largeur de l'icône */
   height: 54px; /* Hauteur de l'icône */
   line-height: 54px; /* Centre l'icône verticalement si nécessaire */
   z-index: 1000; /* Assure que l'icône reste au-dessus des autres éléments */
}


/* Style responsive */
@media (max-width: 480px) {
   .scroll-to-top {
       font-size: 20px;
       width: 40px;
       height: 40px;
       line-height: 40px;
   }



   .rocket-icon {
      width: 44px; /* Taille de l'icône */
      height: 44px; /* Taille de l'icône */
   }
}





/* Page contact.html */

#contact {
   background-color: #96D2CA; /* Couleur de fond */

   flex-grow: 1; /* Occupe toute la hauteur disponible */
   min-height: 100vh; /* Prend au moins la hauteur de la vue */
   display: flex;
   flex-direction: column;
   justify-content: center; /* Centrer le contenu verticalement si nécessaire */
   padding-top: 0;
   padding-bottom: 0;
 
}




.container-fluid-contact {
   padding: 0; /* Aucun remplissage */
   margin: 0; /* Aucune marge */
}

.row-contact {
   margin: 0; /* Aucune marge */
   padding: 0; /* Aucun remplissage */
}

.col-md-12-contact {
   margin: 0; /* Pas de marge supplémentaire */
   padding: 0; /* Pas de remplissage supplémentaire */
}


/* Style de la carte */
#map {
   filter: 
     hue-rotate(25deg)  /* Change la teinte */
}

   #map {
      width: 100%; 
      height: 400px;
      margin: 0; /* Pas de marge */
      padding: 0; /* Pas de padding */
    
   }


/* Media query pour écrans plus petits */
@media (max-width: 768px) {
   #map {
     height: 300px; /* Réduit la hauteur de la carte */
   }
 }
 
 /* Media query pour écrans encore plus petits */
 @media (max-width: 576px) {
   #map {
     height: 200px; /* Réduit davantage la hauteur de la carte */
   }
 }



/* Positionnement de l'image SVG en haut du contact-label */
.contact-curvy {
   display: block; /* Pour s'assurer qu'elle occupe une ligne entière */
   margin: 0 auto; /* Centrer horizontalement si nécessaire */
   padding: 0; /* Pas de padding */
   width: 100%; /* La rendre responsive en remplissant toute la largeur */
}

.leaflet-container {
   position: relative; /* Assurez-vous que le conteneur parent a une position relative */
}

.map-top-curvy {
   width: 100%; /* Prendre toute la largeur */
   height: auto; /* Assurer que le SVG garde ses proportions */
   margin: 0; /* Pas de marge supplémentaire */
   padding: 0; /* Pas de remplissage supplémentaire */
}


.map-curvy {
   position: absolute; /* Positionnement absolu par rapport au conteneur parent */
   bottom: 0; /* Positionner le SVG en bas du conteneur */
   left: 0; /* Alignement à gauche */
   width: 100%; /* Pour qu'il prenne toute la largeur */
   height: auto; /* Assurez-vous qu'il garde ses proportions */
   z-index: 1; /* Pour s'assurer que le SVG est devant les autres éléments */
   margin: 0; /* Pas de marge supplémentaire */
   padding: 0; /* Pas de remplissage supplémentaire */
}


/* Ombre pour tablettes et écrans plus grands (768px à 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
   .shadow-lg-tablet {
       box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Ombre personnalisée */
   }
}

/* Ombre pour les écrans larges (PC > 1024px) */
@media (min-width: 1024px) {
   .shadow-lg-tablet {
       box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Ombre personnalisée */
   }
}

/* Supprime l'ombre sur les écrans mobiles (moins de 768px) */
@media (max-width: 767px) {
   .shadow-lg-tablet {
       box-shadow: none; /* Pas d'ombre pour les écrans mobiles */
   }
}


.me-contacter-decor {
   margin-bottom: 20px; /* Espace en dessous de l'image */
}

.contact-form form {
   margin-top: 20px; /* Espace en haut du formulaire, si nécessaire */
}


.contact-form {
   background-color: #F8F9F6;
   border: none; /* Supprimez la bordure par défaut de l'iframe */
}

.label-form {
   padding: 20px;
   text-align: left; /* Alignement à gauche */
 
}


/* Conteneur du champ de formulaire avec position relative pour les labels flottants */
.form-group {
   position: relative; /* Nécessaire pour positionner le label flottant */
   margin-bottom: 20px; /* Espace entre les champs */
}


/* Style du label flottant */
.floating-label {
   position: absolute; /* Nécessaire pour flottement */
   top: 10px; /* Position initiale du label */
   left: 0; /* Alignement à gauche */
   font-size: 16px; /* Taille du texte du label */
   color: #103653; /* Couleur du label */
   transition: all 0.2s ease; /* Transition pour déplacer le label */
   pointer-events: none; /* Empêche l'interaction directe avec le label */
}

/* Styles de base pour les champs de formulaire */
.form-control {
   width: 100%; /* Remplit le conteneur */
   border: none;
   border-bottom: 2px solid #103653; /* Couleur par défaut */
   border-radius: 0; /* Pas de coins arrondis */
   outline: none; /* Pas de bordure au focus */
   padding: 10px 0; /* Espace intérieur du champ */
   font-family: "Poppins", sans-serif;
   background-color: #F8F9F6;
   color: #103653; /* Couleur du texte */
   transition: all 0.2s ease; /* Pour une transition fluide */
}

/* Quand le champ est en focus ou non vide, déplace le label vers le haut */
.form-control:focus + .floating-label,
.form-control:not(:placeholder-shown) + .floating-label {
   top: -20px; /* Position du label lorsqu'il flotte */
   font-size: 12px; /* Taille du texte réduite */
   color: #103653; /* Couleur du label */
}



/* Style pour le champ de saisie lorsqu'il est en focus */
.form-control:focus {
   border-bottom-color: #103653; /* Enlève la couleur de la ligne en focus */
   outline: none; /* Enlève également l'encadrement bleu du focus */
   box-shadow: none; /* Enlève également toute ombre portée (shadow) */
}

/* Effet pour le texte lorsqu'il y a du contenu (non vide) */
.form-control:not(:placeholder-shown) {
   color: #103653; /* Couleur du texte quand du contenu est saisi */
 }


/* Masquer le placeholder avec la même couleur que le fond */
.form-control::placeholder {
   color: #F8F9F6; /* Couleur du placeholder ton sur ton avec le fond */
}


      #prenom,
      #email, 
      #message {
         font-family: "Poppins", sans-serif;
         font-weight: 400;
         font-style: normal;
         background-color: #F8F9F6;
        
      }
      
/* Fade-in unique pour le H2 d’accueil */
@keyframes fadeInContact {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.fade-in-contact {
  animation: fadeInContact 1.5s ease-in forwards;
  color: #F79927;
  font-family: "Finger Paint", sans-serif;
  font-weight: 400;
  font-size: 1em;
  text-align: center;
  margin-bottom: 50px;
}

/* Floating label custom pour tous les champs */
.floating-label {
  position: absolute;
  pointer-events: none;
  left: 15px;
  top: 12px;
  transition: 0.2s ease all;
  color: #103653;
}

/* Quand le champ est focus ou rempli */
.form-control:focus + .floating-label,
.form-control:not(:placeholder-shown) + .floating-label {
  top: -10px;
  left: 12px;
  font-size: 0.85em;
  color: #333333;
}

/* Texte d’aide sous le champ message */
.form-text.text-muted {
  color: #6c757d;
  font-style: italic;
  font-size: 0.9rem;
  margin-top: 0.25rem;
}






/* Ajustez la taille de l'icône de voiture SVG */
.btn-custom svg {
   width: 50px; /* Ajustez la largeur de l'icône selon vos besoins */
   height: auto; /* Maintient le rapport hauteur-largeur */
   margin-right: 10px; /* Espace entre l'icône et le texte */
   margin-bottom: -20px; /* Espace entre l'icône et le texte */
}

/* Centrer l'icône SVG */
.car-send {
   width: 120px; /* Ajustez la largeur de l'icône selon vos besoins */
   height: 120px; /* Maintient le rapport hauteur-largeur */
   transition: all 0.3s ease; /* Transition pour le changement de couleur */
}
.car-send:hover {
   filter: hue-rotate(140deg); /* Change la teinte au survol */
 }

@media screen and (max-width: 768px) {
   .car-send {
   width: 100px; /* Ajustez la largeur de l'icône selon vos besoins */
   height: 100px; /* Maintient le rapport hauteur-largeur */
   }
 }




/* Style pour la section "portrait" page index */
#portrait {
   
   background-color: #F8F9F6;
   position: relative;
   padding-top: 300px; /* Ajustez l'espacement en haut de la section pour accueillir l'image SVG */
   overflow: hidden; /* Cachez le débordement de l'image SVG */
   padding-bottom: 80px; /* Hauteur de la bande de couleur */
   margin-bottom: 0; /* Assurez-vous qu'il n'y ait pas d'espace inutile sous cette section */
}



/* Définition du style pour la bande de couleur en bas de la section */
#portrait::after {
   content: ''; /* Ajout de contenu avec la pseudo-classe ::after */
   position: absolute; /* Position absolue */
   bottom: 0; /* Alignement en bas */
   left: 0; /* Alignement à gauche */
   width: 100%; /* Largeur maximale */
   height: 80px; /* Hauteur de la bande de couleur */
   background-color: #103653; /* Couleur de la bande de couleur */
   z-index: -2; /* Assurez-vous que l'image SVG est derrière le contenu */
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}




#portrait .col-md-12 img.fond-curvy {
   position: absolute;
   width: 100%;
   top: 100px;
   left: 0;
   right: 0;
   margin: 0;
   z-index: 1;
}


#portrait .fond-curvy {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   z-index: -1; /* Assurez-vous que l'image SVG est derrière le contenu */
}

.background-portrait {
   width: 100%;
   height: auto;
 }
 


#portrait {
   background-color: #F8F9F6;
   position: relative;
   padding-top: 300px; /* Ajustez l'espacement en haut de la section pour accueillir l'image SVG */
   overflow: hidden; /* Cachez le débordement de l'image SVG */
   padding-bottom: 80px; /* Hauteur de la bande de couleur */
}


/* Style de la photo animée et le style de la bordure autour photo portrait celine */
.bordered-content-presentation-image .presentation-image img {
   max-width: 300px; /* Définissez la largeur maximale souhaitée */
   max-height: 300px; /* Définissez la hauteur maximale souhaitée */
   border-radius: 50%; /* Pour garder la forme ronde */
   margin-top: 20px; /* Espace sur l'image */
   margin-bottom: -50px; /* Espace sous l'image */
   border: 0.5em solid #F8F9F6; /* Ajoute une bordure autour photo portrait celine */
   
 }


/* Styles pour positionner l'icône de position sur photo portrait celine */
.presentation-image {
   position: relative;
   display: inline-block; /* Pour empêcher le débordement de l'icône position */
   z-index: 1;
}


/* Style de la photo animée et le style de la bordure autour photo portrait celine */
@media (max-width: 768px) {
   .bordered-content-presentation-image .presentation-image img {
      max-width: 200px; /* Définissez la largeur maximale souhaitée */
      max-height: 200px; /* Définissez la hauteur maximale souhaitée */
      border-radius: 50%; /* Pour garder la forme ronde */
      margin-top: 20px; /* Espace sur l'image */
      margin-bottom: 0px; /* Espace sous l'image */
      border: 0.7em solid #F9FAF7; /* Ajoute une bordure autour photos animation projet-accueil */
      
    }

}


/* Styles pour la photo portrait de blog et des icônes */
.photo-img-portrait {
   width: 100%; /* Ajuster selon vos besoins */
   height: auto; /* Maintenir les proportions */
   display: block; /* Centre l'image */
   margin: 20px auto 0; /* Marge en haut et centre horizontalement */
}

@media screen and (max-width: 768px) {
   .photo-img-portrait {
       width: 100%; /* Ajustement pour les écrans plus petits */
       
   }
}


/* Style de l'icône position */
.position-icon-b {
   position: absolute;
   top: 30%; /* Position verticale centrée */
   left: 90%; /* Position horizontale centrée */
   transform: translate(-50%, -50%);
   z-index: 2; /* Pour que l'icône soit au-dessus de la photo de profil */
}

/* Styles pour rendre l'icône responsive */
@media (max-width: 768px) {
   .position-icon-b svg {
       width: 2.5em; /* Réduisez la taille de l'icône pour les écrans plus petits */
       height: 2.5em;
   }
}


@media (max-width: 768px) {

   /* Réduisez la taille de la photo de profil */
   .profile-image img {
      max-width: 200px; /* Définissez la largeur maximale souhaitée */
      max-height: 200px; /* Définissez la hauteur maximale souhaitée */
      border-radius: 50%; /* Pour garder la forme ronde */
    
   }
   
   .bordered-content-profil-image .profile-image img {
      max-width: 100%;
      height: auto; /* Pour conserver les proportions */
      border-radius: 50%; /* Pour garder la forme ronde */
      border: 0.8em solid #F8F9F6; /* Ajoute une bordure autour photo de profil */
   }
}






/* Styles pour eviter espace blanc sur mobile entre sections portrait et services-garde-enfants index.njk */
@media only screen and (max-width: 768px) {
   .mb-4{
       margin-top: -30px; /* Ajoutez l'espace nécessaire entre les éléments lorsque la largeur de l'écran est inférieure à 768px */
     
      }
   }


/* Styles pour la section presentation-celine */

#presentation-celine {
   background-color: #103754;
   padding-left: 20px;
   padding-right: 20px;
 }
 



/* Styles pour la section accompagnement-petite-enfance */

#accompagnement-petite-enfance {
   background-color: #103754;
   padding-left: 20px;
   padding-right: 20px;
 }
 
 
 .container-accompagnement {
   padding-left: 20px;
   padding-right: 20px;
 }
 

/* Styles pour la rubrique services-garde-enfants page index */

#services-garde-enfants {
   background-color: #103653;
   margin-bottom: 0; /* Corrige le margin-bottom négatif */
   padding: 0; /* contenu plein ecran sans marges */
  
}





.etoiles {
  color: #FFD700;       /* jaune doré */
  font-size: 18px;
  letter-spacing: 2px;
}

.btn-action-primary-d:hover .etoiles {
  color: #FFD700;
  text-shadow: 0 0 1px #103653, 0 0 2px #103653;
}

/* Centré par défaut (desktop) */
.cta-avis {
  display: inline-block;
  text-align: center;
  box-sizing: border-box; /* Ajouté ici aussi pour la sécurité */
}

/* Sur mobile : alignement à gauche avec marges internes */
@media (max-width: 767px) {
  .cta-avis {
    display: block;
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box; /* INDISPENSABLE */
  }
}

@media (max-width: 576px) {
  .btn-action-primary-g {
    width: 100%;
    box-sizing: border-box; /* INDISPENSABLE */
    
  }
}

 /* Styles pour le bouton appel à l'action cesu-entreprise page index */
 .btn-action-primary-g {
   color: #F8F9F6; /* Couleur du texte */
   border-color: #F8F9F6; /* Couleur de la bordure */
   font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    font-style: normal;
    margin-top: 10px;
    margin-bottom: 40px;
  }
 @media (max-width: 768px) {
   .btn-action-primary-g {
     font-size: 0.875rem; /* ou une autre taille plus adaptée au mobile */
   }
 }

 .btn-action-primary-g:hover {
   background-color: #F8F9F6; /* Couleur #F8F9F6 avec 40% de transparence */
   color: #103653; /* Couleur du texte au survol */
   outline: none; /* Supprime le contour par défaut */
   border: 1px solid #103653; /* Ajoute un contour personnalisé */
 
}



.custom-container {
   width: 100%;
   max-width: 1920px;
   margin-left: auto;
   margin-right: auto;
   padding-left: 0;
   padding-right: 0;
   box-sizing: border-box;
 }
 
 @media (min-width: 768px) {
   .custom-container {
     padding-left: 15px;
     padding-right: 15px;
   }
 }
 


@media (max-width: 768px) {
   #services-garde-enfants {
      padding: 0; /* contenu plein ecran sans marges */
   }
}


/* Styles pour le texte du titre à l'intérieur de la section services-garde-enfants */
#services-garde-enfants .profile-text h2 {
    text-align: center; /* Centré par défaut sur desktop */
    margin-top: -40px; /* Valeur par défaut pour les écrans de taille moyenne et plus grande */
}

/* Sur les écrans de taille mobile, aligner à gauche */
@media (max-width: 767px) {
    #services-garde-enfants .profile-text h2 {
        text-align: left; /* Alignement à gauche sur mobile */
        margin-top: -50px; /* Réduction de la marge typo sur les écrans plus petits */
        padding-left: 20px;
      padding-right: 20px;
    }
}






/* Styles pour la rubrique services-garde-enfants page index */

#services-garde-enfants {
   background-color: #103653;
   margin-bottom: 0; /* Corrige le margin-bottom négatif */
   padding: 0; /* contenu plein ecran sans marges */
  
}

.custom-container {
   width: 100%;
   max-width: 1920px;
   margin-left: auto;
   margin-right: auto;
   padding-left: 0;
   padding-right: 0;
   box-sizing: border-box;
 }
 
 @media (min-width: 768px) {
   .custom-container {
     padding-left: 15px;
     padding-right: 15px;
   }
 }
 


@media (max-width: 768px) {
   #services-garde-enfants {
      padding: 0; /* contenu plein ecran sans marges */
   }
}


/* Styles pour le texte du titre à l'intérieur de la section services-garde-enfants */
#services-garde-enfants .profile-text h2 {
    text-align: center; /* Centré par défaut sur desktop */
    margin-top: -40px; /* Valeur par défaut pour les écrans de taille moyenne et plus grande */
}

/* Sur les écrans de taille mobile, aligner à gauche */
@media (max-width: 767px) {
    #services-garde-enfants .profile-text h2 {
        text-align: left; /* Alignement à gauche sur mobile */
        margin-top: -50px; /* Réduction de la marge typo sur les écrans plus petits */
        padding-left: 20px;
      padding-right: 20px;
    }
}




/* Styles spécifiques le titre "CELINE ASSISTANTE MATERNELLE AGREEE" */

.header-container {
   display: flex;
   align-items: center; /* Aligner verticalement */
   justify-content: center; /* Centrer horizontalement */
   gap: 20px; /* Espacement entre le H1 et le bouton */
   flex-wrap: wrap; /* Permet le passage à la ligne sur mobile */
   text-align: center; /* Centrer le texte pour une bonne lisibilité */
   margin-bottom: 30px; /* Marge en bas du titre */
}





.description-atout-services {
   margin-top: 0px;
   margin-left: 2vw; /* Utilisation de vw pour une marge relative à la largeur de la vue */
   margin-right: 2vw;
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 12px;
   font-style: normal;
   color: #103653;
   text-align: left; /* le texte a gauche */
}
 



/* Styles spécifiques les titres presentation de services-garde-enfants */
.introduction-titre {
   color: #103653;
   font-family: "Finger Paint", sans-serif;
   font-weight: 400;
   font-size: 20px;
   font-style: normal;
   position: relative;
   z-index: 1;
   padding-left: 2vw; /* ajuste la valeur si besoin */
}



/* Styles spécifiques pour l'arrière plan oval des titres presentation de services-garde-enfants */
.introduction-titre::after {
   content: '';
   position: absolute;
   bottom: -5px;
   left: 60%;
   transform: translateX(-50%);
   width: 100%; /* Largeur de l'ovale horizontal */
   height: 100%; /* Hauteur de l'ovale horizontal */
   background-color: rgba(247, 153, 39, 0.3); /* La couleur #F79927 avec 50% de transparence */
   border-radius: 90px / 30px; /* Border radius pour créer la forme d'un ovale */
   z-index: -1;
   overflow: hidden; /* Cacher le contenu qui dépasse de l'ovale */
     
}

/* Styles pour rendre l'arrière plan oval responsive */
@media (max-width: 768px) {
   .introduction-titre::after {
      left: 50%;
   }
}


/* Styles pour le bouton appel à l'action rubriques presentation de services-garde-enfants */
 .btn-action-primary {
  color: #103653; /* Couleur du texte */
  border-color: #103653; /* Couleur de la bordure */
  font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 1rem;
   font-style: normal;
   padding: 5px 10px; /* Espacement interne */
 }
 @media (max-width: 768px) {
   .btn-action-primary {
     font-size: 0.875rem; /* ou une autre taille plus adaptée au mobile */
   }
 }
 
 .btn-action-primary:hover {
  background-color: rgba(150, 210, 202, 0.4); /* Couleur de fond au survol */
  color: #103653; /* Couleur du texte au survol */
  outline: none; /* Supprime le contour par défaut */
  border: 1px solid #103653; /* Ajoute un contour personnalisé */
 }

 @media (max-width: 576px) {
  
   .btn-action-primary {
       width: 100%; /* Les boutons occupent toute la largeur du conteneur */
   }
}


 



.image-frame-services {
   position: relative;
   
}

.image-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(20, 56, 84, 0.0); /* Color overlay */
   z-index: 1; /* Ensure it sits on top of the image */
   
   
}

.services-garde-enfants-text-space {
   background-color: #F8F9F6;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-start; /* aligne tout à gauche */
   justify-content: center;
   padding: 20px;
   box-sizing: border-box;
   text-align: left; /* texte aligné à gauche */
   padding-left: 2vw;
   padding-right: 2vw;
}


.services-garde-enfants-item {
   height: 100%; /* Assure que le contenu remplit toute la hauteur */
   margin: 0;
   padding: 0;
   position: relative;
}


.services-garde-enfants-image {
   height: 100%; /* S'assure que l'image prend toute la hauteur disponible */
   padding: 0px; /* espace entre l'image */
   text-align: center;
   padding: 0;
}


/* Supprimez la règle qui affecte toutes les images sous .services-garde-enfants-image */
.services-garde-enfants-image img {
   max-width: 100%;
   height: auto;
}





/* Styles pour la section garde-enfant-bretigny page projet-accueil */

#garde-enfant-bretigny {
   background-color: #F8F9F6;
   padding-left: 10px;
   padding-right: 10px;
 }
 
 
 
 
 .container-service {
   padding-left: 10px;
   padding-right: 10px;
 }
 


.icones-services-container .row {
  display: flex;
  flex-wrap: wrap; /* permet le retour à la ligne */
  justify-content: space-between;
  gap: 20px; /* espace homogène entre tous les blocs, horizontal et vertical */
}

.icone-service {
  flex: 1 1 calc(22% - 20px); /* largeur tenant compte du gap */
  background-color: rgba(234, 243, 240, 0.8);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: default;
  margin-bottom: 0; /* supprimé car le gap gère l’espace */

  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.icone-service:hover,
.icone-service:focus {
  transform: translateY(-6px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  outline: none;
}


/* Responsive : Passe en pleine largeur sur mobiles */
@media (max-width: 767px) {
  .icone-service {
    flex: 1 1 100%;
  }
}

.icone-service.visible {
  opacity: 1;
  transform: translateY(0);
}




 @media (max-width: 767px) {
.icone-service img {
   width: 60px;
   height: 60px;
   margin-bottom: 12px;
  object-fit: contain;
   }
 }


 .icone-service.visible {
   opacity: 1;
   transform: translateY(0);
 }
 
 

 

 .poppins-regular-icone-service {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 0.875rem;
   font-style: normal;
   color: #103653;
   margin-top: 10px; /* Ajoute un espace entre l'icône et le texte */
}
@media (max-width: 768px) {
   .poppins-regular-icone-service {
     font-size: 14px; /* ou une autre taille plus adaptée au mobile */
   }
 }


 

.icone-service a {
   text-decoration: none; /* Supprime le soulignement du lien */
   color: inherit; /* Garde la couleur du texte normale */
}


 
.icone-service h3 strong.titre {
   display: block;
   margin-bottom: 0.75rem; /* ajuste la valeur selon l’espace souhaité */
 }
 
 
 .titre-service {
   display: inline-block;
   vertical-align: middle;
 }
 







/* Styles pour la section avis */

#avis {
   background-color: #96D2CA;
   padding-left: 40px;
   padding-right: 40px;
 
}

.heading-avis {
   color: #96D2CA; /* Changez la couleur selon votre préférence */
   font-size: 1px;
}


#avis-container {
   opacity: 0;
   visibility: hidden;
   transition: opacity 8s;
 }
 
 #avis-container.avis-visible {
   opacity: 1;
   visibility: visible;
 }
 




.horizontal-line {
   border: none; /* Supprime la bordure par défaut */
   border-top: 2px solid #103653; /* Crée une ligne horizontale de 2px de hauteur avec la couleur désirée */
   margin: 20px 0; /* Ajoute de l'espace au-dessus et en dessous de la ligne */
   width: 100%; /* S'assure que la ligne prend toute la largeur disponible */
}



/* Section contenant le SVG nuage transition */

.svg-background {
   background-color: #96D2CA; /* Couleur de fond */
   padding: 0; /* Pas de padding pour que le SVG touche les bords */
   margin: 0; /* Pas de marge pour que la section s'étende entièrement */
   width: 100%; /* Prend toute la largeur de l'écran */
   overflow: hidden; /* Évite tout débordement */
}

/* Conteneur du SVG */
.svg-container {
   width: 100%; /* Prend toute la largeur du parent */
   padding: 0; /* Pas de padding pour ajuster le SVG en bas */
   margin: 0; /* Pas de marge pour que l'image touche les bords */
   display: flex;
   justify-content: center; /* Centrer le SVG horizontalement */
}

/* Assure que le SVG prend toute la largeur disponible */
.nuages-bleus-curvy {
   width: 100%;
   display: block; /* Assure qu'il n'y a pas d'espace sous l'image */
   margin: 0 auto; /* Centrer horizontalement si nécessaire */
   padding: 0;
}






/* Style section disponibilite assistante maternelle bretigny sur orge */

#disponibilite-assistante-maternelle-bretigny-sur-orge {
   background-color: #F8F9F6;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 20px;
   padding-bottom: 80px;
}


.content-wrapper-rencontre {
   padding-left: 20px;
   padding-right: 20px;
   box-sizing: border-box;
}

 
.container-rencontre {
   position: relative; /* Pour placer le contenu au-dessus du SVG */
   z-index: 1; /* Assure que le contenu est au-dessus de l'image */
   
}

.card-bleu-fonce {
    background-color: #103754;
    color: #F8F9F6;
}


 

/* Styles spécifiques pour les Icônes svg des titres de l'agrément */
.bloc-note {
width:2.2em; 
height:2.2em;
}
@media (max-width: 768px) {
.bloc-note {
width:1.5em; 
height:1.5em;
   }
 }



.disponibilite-container {
   display: flex;
   align-items: center;         /* Garde l'alignement vertical */
   justify-content: flex-start; /* Aligne horizontalement à gauche */
   gap: 10px;                   /* Espacement entre les éléments */
   flex-wrap: wrap;            /* Passe à la ligne sur mobile */
   text-align: left;           /* Aligne le texte à gauche */
   margin-bottom: 20px;        /* Marge en bas */
   
}
@media (max-width: 600px) {
  .disponibilite-container {
    row-gap: 5px; /* Réduction uniquement sur petit écran */
  }
}




.container-enveloppe {
   position: relative; /* Pour placer le contenu au-dessus du SVG */
   z-index: 1; /* Assure que le contenu est au-dessus de l'image */
   padding-top: 8rem; /* Ajustez la valeur pour donner un espace au-dessus du contenu si nécessaire */
   margin-top: 10px; /* Réduit l'espace au-dessus du contenu suivant */
}



/* Styles pour le bouton appel à l'action */
.btn-action-primary-c {
   color: #103653; /* Couleur du texte */
   border-color: #103653; /* Couleur de la bordure */
   font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    font-style: normal;
  }
   @media (max-width: 768px) {
   .btn-action-primary-c {
     font-size: 0.875rem; /* ou une autre taille plus adaptée au mobile */
   }
 }

  
  .btn-action-primary-c:hover {
   background-color: rgba(150, 210, 202, 0.4); /* Couleur de fond au survol */
   color: #103653; /* Couleur du texte au survol */
   outline: none; /* Supprime le contour par défaut */
   border: 1px solid #103653; /* Ajoute un contour personnalisé */
  }

  .left-aligned-btn {
   text-align: left;
 
 }
 

.checked {
   display: inline-block; /* Maintenir le SVG sur la même ligne */
   width: 2.5rem; /* Ajustez la taille du SVG */
   height: auto; /* Conserver les proportions */
   margin-right: 10px; /* Espace entre le SVG et le texte */
 }
 
 @media (max-width: 768px) {
   .checked {
      width: 2rem; /* Ajustez la taille du SVG */
   }
 }


.titre-rencontrons-nous {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-style: normal;
   color: #103653;
   font-size: 2.5em; /* Taille de la police relative */
   margin-top: 20px; /* Marge en haut du titre */
   margin-bottom: 20px; /* Marge en bas du titre */
   margin-left: 0px;


}
@media (max-width: 768px) {
   .titre-rencontrons-nous {
     font-size: 1.8em; /* ou une autre taille plus adaptée au mobile */
   }
 }
 
 .rencontre-icon {
   width: 24px; /* Ajuste la taille du SVG */
   height: auto; /* Conserver les proportions */
   margin-right: 15px; /* Augmente l'espace entre l'icône et le texte */
   vertical-align: middle; /* Assure un bon alignement de l'icône et du texte */
 }

 .rencontre-icon-nomade {
   width: 20px; /* Ajuste la taille du SVG */
   height: auto; /* Conserver les proportions */
   margin-right: 15px; /* Augmente l'espace entre l'icône et le texte */
   vertical-align: middle; /* Assure un bon alignement de l'icône et du texte */
 }


 .liste-avantages {
   list-style-type: none; /* Supprime les puces */
   padding: 0;
   margin-top: 20px; /* Augmente l'espace au-dessus de la liste */
   margin-bottom: 10px; /* Réduit l'espace sous la liste */
 }
 
 .liste-avantages li {
   display: flex;
   align-items: center; /* Aligne l'icône et le texte sur la même ligne */
   font-family: "Poppins", sans-serif;
   font-size: 14px;
   color: #103754;
   margin-bottom: 15px; /* Espacement entre les éléments de la liste */
 }

 
 .icon-avantage {
   width: 1.2rem;
   height: 1.2rem;
   margin-right: 10px;
   vertical-align: middle;
 }
 .liste-avantages li {
   display: flex;
   align-items: center;
   font-family: "Poppins", sans-serif;
   font-size: 14px;
   color: #103754;
   margin-bottom: 12px;
 }
 .liste-avantages svg {
   flex-shrink: 0;
 }
 


 .checked-localisation {
   margin-left: 10px; /* Ajoute de l'espace entre le texte et le SVG */
   width: 4.5rem; /* Ajustez la taille du SVG */
   
 }
 





/* Style pour la page projet-accueil.html */

/* Style pour la personnalisation widget chatbot */
.chatbot-launcher {
   position: fixed;
   bottom: 20px;
   right: 20px;
   font-size: 24px; /* Taille de l'icône */
   background-color: #F79927;
   border: none;
   border-radius: 50%;
   padding: 0;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
   cursor: pointer;
   z-index: 1000;
   transition: transform 0.3s ease, background-color 0.3s ease;
 
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: visible; /* Laisse le robot dépasser */
 }
 
 .chatbot-launcher:hover {
   background-color: #9786BD;
   transform: scale(1.05);
 }
 
 .robot-icon {
   width: 54px; /* Plus grand que le fond rond */
   height: 54px;
   transform: translateY(-10px); /* Décale le robot vers le haut pour le faire dépasser */
 }
 
 


/* Style de l'icône de flèche vers le haut */
.scroll-to-top {
   position: fixed;
   bottom: 20px; /* Ajustez la position verticale selon vos besoins */
   right: 20px; /* Ajustez la position horizontale selon vos besoins */
   font-size: 24px; /* Taille de l'icône */
   background-color: #F79927; /* Couleur de fond */
   color: #fff; /* Couleur de l'icône (blanc) */
   width: 50px; /* Largeur du cercle */
   height: 50px; /* Hauteur du cercle */
   border-radius: 50%; /* Forme arrondie */
   transition: background-color 0.3s, transform 0.3s; /* Effets de transition */
   z-index: 999; /* Assurez-vous que l'icône est au-dessus du contenu */
   text-align: center; /* Centre le texte horizontalement */
   line-height: 50px; /* Centre l'icône verticalement */

}

/* Au survol, changez la couleur de la flèche (blanche) */
.scroll-to-top:hover {
   background-color: #9786BD; /* Couleur de fond au survol */

  
}


/* Style pour la section "chezceline" */

#chezceline {
   background: #F8F9F6; /* Création du dégradé avec bande réglable */
   position: relative; /* Nécessaire pour l'alignement des pseudo-éléments */
   padding-top: 300px; /* Ajustez l'espacement en haut de la section pour accueillir l'image SVG */
   overflow: hidden; /* Cachez le débordement de l'image SVG */
   padding-bottom: 80px; /* Hauteur de la bande de couleur */

}

/* Définition du style pour la bande de couleur en bas de la section */
#chezceline::after {
   content: ''; /* Ajout de contenu avec la pseudo-classe ::after */
   position: absolute; /* Position absolue */
   bottom: 0; /* Alignement en bas */
   left: 0; /* Alignement à gauche */
   width: 100%; /* Largeur maximale */
   height: 80px; /* Hauteur de la bande de couleur */
   background-color: #98D1CA; /* Couleur de la bande de couleur */
 
}


#chezceline .col-md-12 img.fond-curvy {
   position: absolute;
   width: 100%;
   top: 100px;
   left: 0;
   right: 0;
   margin: 0;
   z-index: 1;
}


#chezceline .fond-curvy {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   z-index: -1; /* Assurez-vous que l'image SVG est derrière le contenu */
}



/* Ajoutez une marge intérieure à la sections de la page projet-accueil.html */

.team-section,
.planning-section,
.chat-enfant-accueil-section,
.bien-etre-securite-section,
.coeducation-enfant-famille-section,
.garde-enfant-bretigny-section,
.faq-projet-accueil,
.accueil-assistante-maternelle-section {
   padding-left: 20px; /* Ajoutez une marge de 20px à gauche */
   padding-right: 20px; /* Ajoutez une marge de 20px à droite */
   padding-bottom: 40px; /* Ajoutez une marge de 20px en bas */
}



/* Style de l'icône position */
.position-icon {
   position: absolute;
   top: 32%; /* Position verticale centrée */
   left: 67%; /* Position horizontale centrée */
   transform: translate(-50%, -50%);
   z-index: 2; /* Pour que l'icône soit au-dessus de la photo de profil */
}

/* Styles pour rendre l'icône responsive */
@media (max-width: 768px) {
   .position-icon svg {
       width: 2.5em; /* Réduisez la taille de l'icône pour les écrans plus petits */
       height: 2.5em;
   }
}

/* Pour que l'animation fonctionne */
.hidden {
   display: none;
}

/* Appliquez la largeur et la hauteur aux images dans un <picture> */
picture img {
   width: 100%;
   height: auto;
}

/* Classe spécifique pour des règles particulières */
.animation-frame {
   width: 100%;
   height: auto;
}




/* Style de la photo animée et le style de la bordure autour photos animation projet-accueil */
.bordered-content-lieu-accueil-image .lieu-accueil-image img {
   max-width: 600px; /* Définissez la largeur maximale souhaitée */
   max-height: 600px; /* Définissez la hauteur maximale souhaitée */
   border-radius: 50%; /* Pour garder la forme ronde */
   margin-top: 20px; /* Espace sur l'image */
   margin-bottom: -50px; /* Espace sous l'image */
   border: 1em solid #96D2CA; /* Ajoute une bordure autour photos animation projet-accueil */
   
 }


/* Styles pour positionner l'icône de position sur la photo animée */
.lieu-accueil-image {
   position: relative;
   display: inline-block; /* Pour empêcher le débordement de l'icône position */
   z-index: 1;
}


/* Style de la photo animée et le style de la bordure autour photos animation projet-accueil */
@media (max-width: 768px) {
   .bordered-content-lieu-accueil-image .lieu-accueil-image img {
      max-width: 250px; /* Définissez la largeur maximale souhaitée */
      max-height: 250px; /* Définissez la hauteur maximale souhaitée */
      border-radius: 50%; /* Pour garder la forme ronde */
      margin-top: 20px; /* Espace sur l'image */
      margin-bottom: -50px; /* Espace sous l'image */
      border: 0.7em solid #96D2CA; /* Ajoute une bordure autour photos animation projet-accueil */
      
    }

}







 
/* Styles pour la section coeducation-enfant-famille */
 
#coeducation-enfant-famille {
   background-color: #98D1CA;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 80px;
   padding-bottom: 80px;
    }
    





/* Styles spécifiques le titre "DOUDOU" */
.poppins-bold-doudou-title {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-style: normal;
   color: #103653;
   font-size: 1em; /* Taille de la police relative */
   margin-top: 20px; /* Marge en haut du titre */
   margin-bottom: 20px; /* Marge en bas du titre */

}
@media (max-width: 768px) {
   .poppins-bold-doudou-title {
     font-size: 0.875em; /* ou une autre taille plus adaptée au mobile */
   }
 }


 .doudou-icone {
   margin-right: 10px;
   vertical-align: middle;
 }
 
 .img-doudou {
   height: 120px;
   width: auto;
 }
 
 .doudou-texte {
   vertical-align: middle;
 }
 
/* Styles pour le bouton appel à l'action section coeducation-enfant-famille */
 .btn-action-primary-b {
   color: #103653; /* Couleur du texte */
   border-color: #103653; /* Couleur de la bordure */
   font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    font-style: normal;
    margin-top: 10px;
    margin-bottom: 20px;
  }
@media (max-width: 768px) {
   .btn-action-primary-b {
     font-size: 0.875rem; /* ou une autre taille plus adaptée au mobile */
   }
 }



 .btn-action-primary-b:hover {
   background-color: rgba(248, 249, 246, 0.4); /* Couleur #F8F9F6 avec 40% de transparence */
   color: #103653; /* Couleur du texte au survol */
   outline: none; /* Supprime le contour par défaut */
   border: 1px solid #103653; /* Ajoute un contour personnalisé */
 
}



/* Styles pour la section accueil-adaptation-enfant */

#accueil-adaptation-enfant {
   position: relative;
   padding: 50px 0;
   overflow: hidden; /* Évite le débordement horizontal causé par ::before et ::after */
 
}


/* Style pour l'image de fond */
#accueil-adaptation-enfant::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url('../images/projet-accueil/valeur/motricite-libre-nb.jpg');
   background-size: cover;        /* Remplit tout le conteneur sans déformation */
   background-repeat: no-repeat;  /* Évite que l'image se répète */
   background-position: center center; /* Centre l’image horizontalement et verticalement */
   background-attachment: scroll; /* Permet le scroll avec le contenu (modifiable selon ton effet désiré) */
   z-index: -1;
}

@media (max-width: 768px) {
   #accueil-adaptation-enfant::before {
     background-position: top center;
   }
 }
 

/* Style pour le voile noir */
#accueil-adaptation-enfant::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(20, 56, 84, 0.8); /* Couleur de fond noir avec une opacité de 80% (143854 en décimal correspond à 20, 56, 84 en valeurs de rouge, vert et bleu respectivement) */
   z-index: -1; /* Placez-le en dessous du contenu */
}




.timeline {
   list-style: none;
   padding: 0;
   margin: 0;
}



/* Styles spécifiques le titre "UNE ADAPTATION REUSSIE" */
.adaptation-title-container {
   display: flex;
   align-items: baseline; /* Aligner sur la ligne de base */
   justify-content: flex-start; /* Aligner à gauche */
   margin-bottom: 20px;
}



/* Styles spécifiques les titres de "jour 1, 2, 3 etc" */
.poppins-bold-jour-title {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-style: normal;
   color: #F8F9F6;
   font-size: 1rem; /* Taille de la police relative */
   margin-top: 20px; /* Marge en haut du titre */
   margin-bottom: 20px; /* Marge en bas du titre */

}

@media (max-width: 768px) {
   .poppins-bold-jour-title {
     font-size: 0.875rem; /* ou une autre taille plus adaptée au mobile */
   }
 }
 
/* Styles spécifiques pour les Icônes svg des jours d'adaptation */
.temps-adaptation {
   
   width:2.2em; 
   height:2.2em;
}

 .adaptation {
   display: flex;
}


 


/* Styles spécifiques de la ligne verticale en pointillé et de l'espacement du contenu */
.adaptation-info {
   flex: 1;
   padding: 20px;
   background-color: transparent; /* Fond transparent */
   border-left: 3px dotted #F8F9F6; /* Ligne verticale en pointillé */
  
 }
 
 /* Styles pour le positionnement des icônes SVG et les titres de jours sur la frise verticale */
 .adaptation-icone-horloge {
   position: absolute; /* Positionnement absolu pour fixer l'icône */
   left: -45px; /* Ajuste l'icône par rapport à la ligne verticale, modifie si nécessaire */
   top: 0; /* Aligne l'icône en haut de l'élément */
   transform: translateY(0); /* Ajuste l'icône de manière fluide, au besoin */
   font-size: 15px; /* Ajuste la taille de l'icône si nécessaire */
  
 }
 
 /* Assurez-vous que le titre du jour s'ajuste correctement */
 .adaptation-title {
   margin-left: 10px; /* Assure-toi qu'il y a assez d'espace pour le titre et l'icône */
   font-size: 16px;
   position: relative; /* Ajouté pour permettre à l'icône de se positionner par rapport à cet élément */
 }




 






















 /* Style de la flèche  */
.adaptation-icon {
   width: 15px;
   height: 15px;
   transition: transform 0.3s ease-in-out; /* Animation fluide */
}

/* Rotation de la flèche quand le bouton est activé */
.adaptation-btn-toggle.active .adaptation-icon {
   transform: rotate(90deg); /* Fait tourner la flèche de 90° */
}


/* Styles pour le fond du texte caché */
 .adaptation-description {
   background-color: rgba(248, 249, 246, 0.8); /* Couleur de fond #F8F9F6 avec 20% de transparence */
    padding: 10px;
    border-radius: 5px;
    display: none; /* Gardez la description cachée au chargement de la page */
 }
 
   
/* Cachez initialement la description texte caché */
.adaptation-description {
   display: none;
}


/* Styles pour les boutons "En savoir plus" + et - */
.adaptation-btn-toggle {
   background-color: transparent; /* Fond transparent */
   color: #F8F9F6;
   border: none;
   cursor: pointer;
}




/* Styles pour la section accueil-assistante-maternelle */

#accueil-assistante-maternelle {
   background-color: #98D1CA;

}

.accueil-assistante-maternelle-assmat img {
   display: block; /* Pour éviter l'espace réservé au texte sous l'image */
   width: 100%; /* Pour que l'image occupe toute la largeur de son conteneur */
 }





.bienvenue-container {
   display: flex;
   align-items: center; /* Aligner verticalement */
   justify-content: center; /* Centrer horizontalement */
   gap: 20px; /* Espacement entre le H1 et le bouton */
   flex-wrap: wrap; /* Permet le passage à la ligne sur mobile */
   text-align: center; /* Centrer le texte pour une bonne lisibilité */
   margin-bottom: 30px; /* Marge en bas du titre */
}






/* Sous-texte "chez Céline" */
.finger-paint-accueil-assistante-maternelle {
   animation: none;
   color: #F8F9F6;
   font-family: "Finger Paint", sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 1em;
   display: inline-block;
   position: relative;
   margin-top: 0;
   margin-bottom: 0;
}

/* Styles pour la section projet-accueil */

#projet-accueil-bretigny {
   background-color: #98D1CA;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 80px;
   padding-bottom: 80px;
    }
    
/* Styles spécifiques le titre "projet accueil assistante maternelle" */
.poppins-bold-projet-accueil-title {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-style: normal;
   color: #103653;
   font-size: 1.5rem; /* Taille de la police relative */
   margin-top: 20px; /* Marge en haut du titre */
   margin-bottom: 20px; /* Marge en bas du titre */
   margin-left: 0px;
}
@media (max-width: 768px) {
   .poppins-bold-coeducation-title {
     font-size: 1.2rem; /* réduction par rapport à 1.5rem */
   }
 }
 




/* Styles pour la section bien-etre-securite */

#bien-etre-securite {
   background-color: #F8F9F6;
   padding-left: 20px;
   padding-right: 20px;
 }

/* Styles spécifiques le titre "BIEN-ÊTRE ET SÉCURITÉ" */
.poppins-bold-securite-title {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-style: normal;
   color: #103653;
   font-size: 1.5em; /* Taille de la police relative */
   margin-top: 20px; /* Marge en haut du titre */
   margin-bottom: 0px; /* Marge en bas du titre */
}

@media (max-width: 768px) {
   .poppins-bold-securite-title {
     font-size: 1.2em; /* ou une autre taille plus adaptée au mobile */
   }
 }
 

 .securite-title-container {
   display: flex;
   align-items: baseline; /* Aligner les éléments sur la ligne de base */
   justify-content: flex-start; /* Aligner à gauche */
   margin-bottom: 40px;  /* Réduit la marge inférieure de 100px à 30px */
}

 
 .securite-icon-wrapper {
   display: inline-flex;
   align-items: center; /* Aligne verticalement l'icône et le texte */
   margin-right: 8px; /* Ajuste l'espace entre l'icône et le texte */
 }
 
 .bien-etre-icon {
   width: 50px; /* Taille contrôlée de l'icône */
   height: 50px;
   object-fit: contain; /* Assure que l'image conserve ses proportions */
 }


 .securite-card {
   background-color: #eaf3f0;
   padding: 20px;
   border-radius: 10px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   height: 100%; /* Permet à toutes les cartes de s'étirer sur la même hauteur */
 }
 
 .securite-card h3 {
   display: inline-flex;
   align-items: center;
 }
 
 
 .custom-font-size {
  font-size: 1rem;
}
@media (max-width: 768px) {
   .custom-font-size {
     font-size: 0.875em; /* ou une autre taille plus adaptée au mobile */
   }
 }

/* Styles pour la section chat-enfant-accueil */

#chat-enfant-accueil {
   background-color: #F8F9F6;
   padding-left: 20px;
   padding-right: 20px;
}

.align-items-center {
   align-items: center; /* Centre verticalement le contenu de la colonne texte */
}

 .card-chat {
   background-color: #eaf3f0;
   padding: 20px;
   border-radius: 10px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   height: 100%; /* Permet à toutes les cartes de s'étirer sur la même hauteur */
 }
 
 .card-chat h3 {
   display: inline-flex;
   align-items: center;
 }
 

 .chat-title-container {
   display: flex;
   align-items: center;
   justify-content: left; /* Centre horizontalement le contenu */
   gap: 10px;
   margin-bottom: 0px;
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
   font-style: normal;
   color: #103754;
  
}


/* Style pour l'image dans la section chat */
.image-chat img {
   max-width: 100%; /* L'image ne dépasse jamais la largeur de son parent */
   height: auto;
   display: block;
   margin: 0 auto; /* Centrer l'image */
   width: 250px; /* Taille fixe pour l'image, à ajuster selon la maquette */
   border-radius: 12px; /* Coins arrondis */
}

/* Adaptation de l'image sur les écrans mobiles */
@media (max-width: 768px) {
   .image-chat img {
      width: 100%; /* L'image s'ajuste à la largeur de l'écran sur mobile */
   }
}


 

/* Styles pour la rubrique ACTIVITES */

#activites {
   background-color: #F9FAF7;
   padding-left: 0px;
   padding-right: 0px;
 
}


/* Styles pour le bouton appel à l'action rubriques presentation de services-garde-enfants */
.btn-action-primary-e {
   color: #103653; /* Couleur du texte */
   border-color: #103653; /* Couleur de la bordure */
   font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    font-style: normal;
  }
  @media (max-width: 768px) {
   .btn-action-primary-e {
     font-size: 0.875rem; /* ou une autre taille plus adaptée au mobile */
   }
 }

  
  .btn-action-primary-e:hover {
   background-color: rgba(150, 210, 202, 0.4); /* Couleur de fond au survol */
   color: #103653; /* Couleur du texte au survol */
   outline: none; /* Supprime le contour par défaut */
   border: 1px solid #103653; /* Ajoute un contour personnalisé */
  }
 
  .ml-custom {
   margin-left: 10px;
 }
 



/* Styles spécifiques le titre "APPRENDRE EN S'AMUSANT" */
.activites-title-container {
   display: flex;
   align-items: baseline; /* Aligner sur la ligne de base */
   justify-content: flex-start;
   margin-bottom: 50px;
   margin-left: 10px;
}

/* Styles spécifiques le titre "MA JOURNEE DE MINISTRE" */
.poppins-bold-activites-title {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-style: normal;
   color: #103754;
   font-size: 1.5em; /* Taille de la police relative */
   margin-top: 20px; /* Marge en haut du titre */
   margin-bottom: 20px; /* Marge en bas du titre */
}

@media (max-width: 768px) {
   .poppins-bold-activites-title {
     font-size: 1.2em; /* ou une autre taille plus adaptée au mobile */
   }
 }
 


.next-button-e,
.next-button-d,
.next-button-c,
.next-button-b,
.next-button-a,
.uni-frame {

   width: 100%;
   
}

/* Styles pour le bouton */
.next-button-e,
.next-button-d,
.next-button-c,
.next-button-b,
.next-button-a {
   font-size: 1rem; /* Utilisation de vw pour une taille de police responsive */
   cursor: pointer;
   display: flex;
   align-items: center; /* Centrer verticalement */
   justify-content: center; /* Centrer horizontalement */
   background-color: transparent;
   border: none;
   z-index: 1;

}

/* Media query pour les écrans de petite taille */
@media screen and (max-width: 768px) {
   .next-button-e,
   .next-button-d,
   .next-button-c,
   .next-button-b,
   .next-button-a {
     font-size: 0.875rem; /* Taille de police plus grande pour les petits écrans */
  }
}

.next-button {
    position: absolute;
    bottom: -2%; /* Ajustez la position verticale en pourcentage selon vos besoins */
    left: 1%; /* Centrez horizontalement le bouton */
    margin-bottom: 5px;/* Réduisez la marge en bas pour rapprocher les boutons des images */
}



/* Styles pour le conteneur du bouton et du fond oval */
.button-container {
   position: relative;
   display: inline-block; /* Permet de contenir le bouton et le fond oval */
}



/* Centrer l'icône SVG */
.arrow {
   display: block;
   margin: auto; /* Centre horizontalement */
   width: 150px; /* Ajustez la taille de l'icône SVG selon vos besoins */
   height: auto;
   position: relative; /* Ajout de cette ligne */
   z-index: 1; /* Ajout de cette ligne */
}

/* CSS pour ajuster la mise en page sur les écrans plus petits */
@media (max-width: 767px) {
   .arrow {
      width: 100px; /* Ajustez la taille de l'icône SVG selon vos besoins */
   }
}


 /* Ajoutez ce CSS pour maintenir les images carrées */
.activites-image {
   padding: 10px;
   text-align: center;
}

/* Supprimez la règle qui affecte toutes les images sous activites-image */
.activites-image img {
   max-width: 100%;
   height: auto;
   border-radius: 5px;
   margin-bottom: 20px;
}

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


.activites-item {
   position: relative;
   border-radius: 5px; /* Assure que les coins sont arrondis */
   overflow: hidden; /* Assure que l'ombre ne dépasse pas le cadre */
   filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.0)); /* Ajoutez une ombre portée */
   margin-bottom: 20px; /* Espacement entre les éléments */
}



/* Nouvelle classe pour les images animées avec une taille fixe */
.fixed-size {
   max-width: 100%;
   height: auto;
   width: 100%; /* Ajustez la largeur selon vos besoins */
   height: auto; /* Ajustez la hauteur selon vos besoins */
}

/* CSS pour ajuster la mise en page sur les écrans plus petits */
@media (max-width: 767px) {
    .activites-item {
        text-align: center;
    }
}






/* Styles pour la section team */

#team {
   background-color: #98D1CA;
  
}


/* Styles spécifiques le titre "COLLABORATEURS" */
.poppins-bold-team-title {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-style: normal;
   color: #103754;
   font-size: 1.5rem; /* Taille de la police relative */
   margin-top: 20px; /* Marge en haut du titre */
   margin-bottom: 20px; /* Marge en bas du titre */
}

@media (max-width: 768px) {
   .poppins-bold-team-title {
     font-size: 1.2rem; /* ou une autre taille plus adaptée au mobile */
   }
 }
 





/* Styles spécifiques le titre "COLLABORATEURS mes partenaires pour un accueil de qualité" */
.team-title-container {
   display: flex;
   align-items: baseline; /* Aligner sur la ligne de base */
   margin-bottom: 50px;
}

/* Media Query pour les écrans mobiles (max-width: 767px) */
@media (max-width: 767px) {
   .team-title-container {
     justify-content: center; /* Centre horizontalement */
     align-items: center; /* Centre verticalement */
     text-align: center; /* Aligne le texte au centre */
     margin-bottom: 20px;  /* Optionnel : Ajuste la marge inférieure sur mobile */
   }
}



/* Styles spécifiques pour le texte descriptif collaborateurs */
.poppins-team-text {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-style: normal;
   color: #103754;
   font-size: 0.875rem; /* Taille de la police relative */
   margin-bottom: 50px; /* Marge en bas du titre */
}

@media screen and (max-width: 768px) {
.poppins-team-text {
font-size: 0.75rem; /* Taille de la police relative */
   } 
}


/* Styles spécifiques les sous titres des collaborateurs */
.poppins-bold-team {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-style: normal;
   color: #103754;
   font-size: 0.875rem; /* Taille de la police relative */
 }
 @media (max-width: 768px) {
   .poppins-bold-team {
     font-size: 0.75rem; /* ou une autre taille plus adaptée au mobile */
   }
 }


 
/* Styles spécifiques aux bordures des collaborateurs */
.team-item-4,
.team-item-5,
.team-item-6 {
   margin-bottom: 20px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   text-align: left;
   border: 0.3em solid #103754; /* Bordure noire de 5 pixels autour du contenu */
   border-radius: 5px; /* Coins arrondis */
   padding: 0; /* bordures epousent l'image */
   z-index: 2;
   
}

/* Styles spécifiques bordures des collaborateurs de la même taille */
.team-item-4,
.team-item-5,
.team-item-6 {
   height: 100%;
   
}

@media screen and (max-width: 768px) {
   
   .team-item-4 {
      margin-bottom: 20px;
      border: 0.2em solid #103754; /* Bordure noire de 5 pixels autour du contenu */
   }
   .team-item-5 {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0.2em solid #103754; /* Bordure noire de 5 pixels autour du contenu */
   }

   .team-item-6 {
      margin-bottom: 20px;
      margin-top: 40px;
      border: 0.2em solid #103754; /* Bordure noire de 5 pixels autour du contenu */
   }

}



 .team-member img {
   display: block; /* Pour éviter l'espace réservé au texte sous l'image */
   width: 100%; /* Pour que l'image occupe toute la largeur de son conteneur */
 }
 
 .team-member h3,
 .team-member p {
   margin: 10px 0 0; /* Ajuster les marges autour du texte */
   padding: 10px; /* Ajouter du rembourrage autour du texte */
   text-align: left;
 }
 
 .team-frame {
   background-color: #241F23;
   width: 100%;
   height: 100%;
   position: relative;
   text-align: center;
  
   font-family: 'VotrePolice', sans-serif;
  
   margin-bottom: 0px;
   display: flex;
   align-items: center;
   justify-content: center;
   
   overflow: hidden;
}

.team-text {
   margin-top: 10px;
   margin-left: 2vw; /* Utilisation de vw pour une marge relative à la largeur de la vue */
   margin-right: 2vw;
   white-space: normal;
   font-size: 0.875rem; /* Utilisation de vw pour la taille de la police relative à la largeur de la vue */
   min-width: 140px; /* Taille minimale pour le texte en pixels */
   color: #F9F4F0;
}
  @media (max-width: 768px) {
   .team-text {
     font-size: 0.75rem; /* ou une autre taille plus adaptée au mobile */
   }
 }

.team-item-1,
.team-item-2,
.team-image {

   height: 100%;
   
}

@media only screen and (max-width: 768px) {
   .team-item-1 {
       margin-bottom: 20px; /* Ajoutez l'espace nécessaire entre les éléments lorsque la largeur de l'écran est inférieure à 768px */
   }
}

 
@media only screen and (max-width: 768px) {
   .team-item-2 {
       margin-top: 20px; /* Ajoutez l'espace nécessaire entre les éléments lorsque la largeur de l'écran est inférieure à 768px */
   }
}

/* Styles pour le bouton appel à l'action rubriques presentation de services-garde-enfants */
.btn-action-primary-f {
   color: #103653; /* Couleur du texte */
   border-color: #103653; /* Couleur de la bordure */
   font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    font-style: normal;
  }
   @media (max-width: 768px) {
   .btn-action-primary-f {
     font-size: 0.875rem; /* ou une autre taille plus adaptée au mobile */
   }
 }
  
  .btn-action-primary-f:hover {
   background-color: rgba(248, 249, 246, 0.4); /* Couleur #F8F9F6 avec 40% de transparence */
   color: #103653; /* Couleur du texte au survol */
   outline: none; /* Supprime le contour par défaut */
   border: 1px solid #103653; /* Ajoute un contour personnalisé */
  }
 
  .ml-rpe {
   margin-left: 10px;
 }
 @media only screen and (max-width: 768px) {
   .ml-rpe {
       margin-left: 10px; /* Ajoutez l'espace nécessaire entre les éléments lorsque la largeur de l'écran est inférieure à 768px */
   }
}

@media only screen and (max-width: 240px) {
   .ml-rpe {
       margin-left: 0px; /* Ajoutez l'espace nécessaire entre les éléments lorsque la largeur de l'écran est inférieure à 768px */
   }
}



/* Styles pour la section routine */
 
#routine {
   background-color: #97D3CB;
}

/* CSS */
.timeline {
   list-style: none;
   padding: 0;
   margin: 0;
}

.legende-couleurs {
    .icone-legende {
        vertical-align: middle;
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }
} 

@media (max-width: 767.98px) {
    .legende-couleurs {
        .col-12 {
            margin-bottom: 0.75rem;
        }
    }
    }

/* Styles spécifiques de la ligne verticale en pointillé et de l'espacement du contenu */
.routine-info {
   flex: 1;
   padding: 20px;
   background-color: transparent; /* Fond transparent */
   border-left: 3px dotted #103754; /* Ligne verticale en pointillé */
  
 }
 
 /* Styles pour le positionnement des icônes SVG et les titres de jours sur la frise verticale */

.routine-icone-frise {
   position: absolute; /* Positionnement absolu pour fixer l'icône */
   left: -45px; /* Ajuste l'icône par rapport à la ligne verticale, modifie si nécessaire */
   top: 0; /* Aligne l'icône en haut de l'élément */
   transform: translateY(0); /* Ajuste l'icône de manière fluide, au besoin */
   font-size: 15px; /* Ajuste la taille de l'icône si nécessaire */
  
 }
 
 /* Assurez-vous que le titre du jour s'ajuste correctement */
.routine-title {
   margin-left: 10px; /* Assure-toi qu'il y a assez d'espace pour le titre et l'icône */
   font-size: 16px;
   position: relative; /* Ajouté pour permettre à l'icône de se positionner par rapport à cet élément */
 }

 



/* Styles spécifiques les titres "Routine" et "Dejeuner" */
.finger-paint-regular-routine-sous-title {
   color: #103653;
   font-family: "Finger Paint", sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 1rem;
   position: relative; /* Ajout de position relative */
   z-index: 1;
}


/* Styles spécifiques pour l'arrière plan oval des titres "Routine" et "Dejeuner" */
.finger-paint-regular-routine-sous-title::after {
   content: '';
   position: absolute;
   bottom: -5px;
   left: 50%;
   transform: translateX(-50%);
   width: 100%; /* Largeur de l'ovale horizontal */
   height: 100%; /* Hauteur de l'ovale horizontal */
   background-color: #F8F9F6;
   border-radius: 90px / 30px; /* Border radius pour créer la forme d'un ovale */
   z-index: -1;
   overflow: hidden; /* Cacher le contenu qui dépasse de l'ovale */
   
}




/* Styles spécifiques pour les Icônes svg des titres "Routine" et "Dejeuner" */
.temps-forts {
   
   width:2.5em; 
   height:2.5em;
}

/* Styles spécifiques pour les Icônes svg des titres "Routine" et "Dejeuner" */
.temps-fort-repas {
   
   width:2.2em; 
   height:2.2em;
}


.modalite {
   
   width:2.1em; 
   height:2.1em;
}

.vignette-routine {
   width:2.1em; 
   height:2.1em;
 
}
 
 /* Styles spécifiques pour les sous titres "Modalité" et "Pictogrammes" */
 .routine {
   display: flex;
}


 



 
 
 
 
/* Styles pour aligner horizontalement sur les écrans de bureau */
.routine-keywords {
   display: flex;
   flex-wrap: wrap; /* Pour permettre le retour à la ligne si nécessaire */
   justify-content: flex-start; /* Pour aligner les éléments à gauche */
   
}

/* Styles pour les titres des pictogrammes */
.routine-keyword {
   margin-bottom: 5px; /* Espacement entre le texte et l'icône */
   background-color: transparent;
   color: #103754;
   padding: 5px;
   font-size: 14px;
   cursor: pointer;
}


/* Styles pour les pictogrammes */
.routine-keyword-container {
   display: flex;
   flex-direction: column; /* Arrange le texte au-dessus de l'icône */
   align-items: center;
   margin-right: 5px;
   margin-bottom: 5px;
   font-weight: bold;
   width: 120px; /* Largeur fixe pour maintenir la forme carrée */
   height: 120px; /* Hauteur fixe pour maintenir la forme carrée */
   border: 3px solid var(--border-color, #103754); /* Fallback bleu */
   background-color: var(--bg-color, #F8F9F6); /* Fallback blanc */
   border-radius: 5px; /* Coins arrondis */
}

/* Variables couleurs par âge */
.routine-3mois { --border-color: #103754; --bg-color: #D9DADB; }
.routine-14mois   { --border-color: #103754; --bg-color: #F8DCBB; }
.routine-mite   { --border-color: #45B7D1; --bg-color: #F8F9F6; }

/* Styles pour centrer les icônes dans les pictogrammes */
.routine-keyword-wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 5px;
   flex: 1; /* Pour que le texte soit centré verticalement */
}



/* Ajoutez des styles spécifiques pour les écrans plus petits (par exemple, largeur inférieure à 768px) */
@media (max-width: 768px) {
   .routine-keyword {
      font-size: 14px;
   }

   .routine-keywords {
      flex-direction: column; /* Pour placer les routine-keyword les uns sous les autres */
      align-items: flex-start; /* Pour centrer les routine-keyword horizontalement */
  }
}

/* Styles pour la taille les icônes dans les pictogrammes */
.icon-container img {
   width: 50px; /* Largeur de l'icône */
   height: 50px; /* Hauteur de l'icône */
}





/* Styles pour le fond du texte caché */
 .routine-description {
   background-color: rgba(255, 255, 255, 0.5); /* Fond blanc transparent */
    padding: 10px;
    border-radius: 5px;
    display: none; /* Gardez la description cachée au chargement de la page */
 }
 
 
  
/* Cachez initialement la description texte caché */
.routine-description {
   display: none;
}



/* Styles pour les boutons "Modalité" + et - */
.routine-btn-toggle {
   background-color: #97D3CB;
   color: #103754;
   border: none;
   cursor: pointer;
}

/* Styles pour les boutons "pictogrammes" + et - */
.routine-picto-btn-toggle {
   background-color: #97D3CB;
   color: #103754;
   border: none;
   cursor: pointer;
}

.routine-icon {
   width: 15px;
   height: 15px;
   transition: transform 0.3s ease-in-out; /* Animation fluide */
}

/* Rotation de la flèche quand le bouton est activé */
.routine-btn-toggle.active .routine-icon,
.routine-picto-btn-toggle.active .routine-icon,
.agrement-btn-toggle.active .routine-icon, 
.faq-btn-toggle.active .routine-icon {
   transform: rotate(90deg); /* Fait tourner la flèche de 90° */
}


 


/* Rotation de la croix quand le bouton a la classe 'active' */
.btn-toggle.active .routine-icon {
   transform: rotate(180deg); /* Tourne l'icône de 180° */
}



 





/* Styles pour la section agrement */
 
#agrement {
   background-color: #F8F9F6;
}

/* CSS */
.timeline {
   list-style: none;
   padding: 0;
   margin: 0;
}


/* Styles spécifiques de la ligne verticale en pointillé et de l'espacement du contenu */
.agrement-info {
   flex: 1;
   padding: 20px;
   background-color: transparent; /* Fond transparent */
   border-left: 3px dotted #103754; /* Ligne verticale en pointillé */
  
 }
 
 /* Styles pour le positionnement des icônes SVG et les titres de jours sur la frise verticale */

.agrement-icone-frise {
   position: absolute; /* Positionnement absolu pour fixer l'icône */
   left: -45px; /* Ajuste l'icône par rapport à la ligne verticale, modifie si nécessaire */
   top: 0; /* Aligne l'icône en haut de l'élément */
   transform: translateY(0); /* Ajuste l'icône de manière fluide, au besoin */
   font-size: 15px; /* Ajuste la taille de l'icône si nécessaire */
  
 }
 
 /* Assurez-vous que le titre du jour s'ajuste correctement */
.agrement-title {
   margin-left: 10px; /* Assure-toi qu'il y a assez d'espace pour le titre et l'icône */
   font-size: 1rem;
   position: relative; /* Ajouté pour permettre à l'icône de se positionner par rapport à cet élément */
 }
@media (max-width: 768px) {
   .agrement-title {
     font-size: 0.875em; /* ou une autre taille plus adaptée au mobile */
   }
 }
 


 .agrement-icon {
   width: 15px;
   height: 15px;
   transition: transform 0.3s ease-in-out; /* Animation fluide */
}

/* Rotation de la flèche quand le bouton est activé */
.routine-btn-toggle.active .routine-icon,
.routine-picto-btn-toggle.active .routine-icon,
.agrement-btn-toggle.active .agrement-icon, 
.faq-btn-toggle.active .agrement-icon {
   transform: rotate(90deg); /* Fait tourner la flèche de 90° */
}





/* Styles spécifiques le titre "MON AGREMENT un accueil personnalisé" */
.title-container {
   display: flex;
   align-items: baseline; /* Aligner sur la ligne de base */
   margin-bottom: 50px;
}




/* Styles spécifiques les titres de l'agrément */
.finger-paint-regular-agrement-sous-title {
   color: #103653;
   font-family: "Finger Paint", sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 1em;
   position: relative; /* Ajout de position relative */
   z-index: 1;
}


/* Styles spécifiques pour l'arrière plan oval des titres de l'agrément */
.finger-paint-regular-agrement-sous-title::after {
   content: '';
   position: absolute;
   bottom: -5px;
   left: 50%;
   transform: translateX(-50%);
   width: 100%; /* Largeur de l'ovale horizontal */
   height: 100%; /* Hauteur de l'ovale horizontal */
   background-color: rgba(247, 153, 39, 0.3); /* La couleur #F79927 avec 50% de transparence */
   border-radius: 90px / 30px; /* Border radius pour créer la forme d'un ovale */
   z-index: -1;
   overflow: hidden; /* Cacher le contenu qui dépasse de l'ovale */
   
}




/* Styles spécifiques pour les Icônes svg des titres de l'agrément */
.day-agrement {
   
   width:2.2em; 
   height:2.2em;
}

/* Styles spécifiques pour les Icônes svg des titres de l'agrément */
.day-eat {
   
   width:2.2em; 
   height:2.2em;
}


 
 /* Styles spécifiques */
 .agrement {
   display: flex;
}




/* Styles spécifiques pour "En savoir plus" */
.poppins-bold-agrement {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-style: normal;
   color: #103754;
   font-size: 0.875rem;
 }
@media (max-width: 768px) {
   .poppins-bold-agrement {
     font-size: 0.75rem; /* ou une autre taille plus adaptée au mobile */
   }
 }



 
 

/* Styles pour la taille les icônes dans les pictogrammes */
.icon-container img {
   width: 50px; /* Largeur de l'icône */
   height: 50px; /* Hauteur de l'icône */
}



/* Styles pour le fond du texte caché */
 .agrement-description {
   background-color: #eaf3f0; 
    padding: 10px;
    border-radius: 5px;
    display: none; /* Gardez la description cachée au chargement de la page */
 }
 
 
  
/* Cachez initialement la description texte caché */
.agrement-description {
   display: none;
}



/* Styles pour les boutons "En savoir plus" + et - */
.agrement-btn-toggle {
   background-color: #F8F9F6;
   color: #103754;
   border: none;
   cursor: pointer;
}



.button-agrement-wrapper {
   display: flex;
   justify-content: flex-start; /* Aligne les boutons à gauche */
   align-items: center;
   flex-wrap: wrap;
   gap: 15px;
   padding-bottom: 15px; /* pour avoir un espace en bas du groupe */
   padding-top: 15px; /* pour avoir un espace en bas du groupe */
 }
 
/* Style pour le bouton liens des fichiers md article dans agrement*/
.btn-article-agrement {
   text-align: center;
   background-color: #40413E; /* Couleur de fond */
   color: #F8F9F6; /* Couleur du texte */
   border-radius: 5px; /* Coins arrondis */
   border: none; /* Retirer la bordure par défaut */
   padding: 5px 10px; /* Espacement interne */
   font-size: 1rem; /* Taille du texte */
   cursor: pointer; /* Changer le curseur au survol */
   transition: background-color 0.3s; /* Transition pour un effet au survol */
}
@media (max-width: 768px) {
   .btn-article-agrement {
     font-size: 0.875rem; /* ou une autre taille plus adaptée au mobile */
   }
 }


.btn-article-agrement:hover {
   background-color: #353937; /* Couleur au survol */
   color: #F8F9F6; /* Couleur du texte */
}

@media (max-width: 576px) {
   .btn-agrement-wrapper {
       flex-direction: column; /* Aligne les boutons verticalement */
       width: 100%; /* Assure que le conteneur occupe toute la largeur */
   }
   
   .btn-agrement {
       width: 100%; /* Les boutons occupent toute la largeur du conteneur */
   }
}


/* Styles pour la section coeducation-enfant-famille */
 
#faq-projet-accueil {
   background-color: #98D1CA;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 3rem; /* ou margin-bottom */
   padding-bottom: 3rem; /* ou margin-bottom */
    }
    


 
#faq-projet-accueil .accordion-button.collapsed {
  background-color: #AEDBD5; /* couleur de fond quand bouton fermé, jaune pastel */
  color: #103754; /* couleur du texte */
}

#faq-projet-accueil .accordion-button:not(.collapsed) {
  background-color: #AEDBD5; /* couleur de fond quand bouton ouvert, jaune plus vif */
  color: #103754;
}

#faq-projet-accueil .accordion-button:focus {
  background-color: #AEDBD5;
  outline: none;
  box-shadow: none;
}


.accordion-projet-accueil-body {
  background-color: #98D1CA;
  padding: 1rem;
}

.accordion-projet-accueil-item {
  margin-bottom: 0.5rem;
  border-radius: 0.5rem; /* possible si tu veux arrondir */
  overflow: hidden;
}
















/* Page mentions-legales.html */


#legal {
  
   background: linear-gradient(to bottom, #98D1CA 5%, #F8F9F6 95%); /* Création du dégradé avec bande réglable */
   margin-bottom: 0; /* Corrige le margin-bottom négatif */
}











/* Page FAQ.html */

/* Style pour la section "faq" */
#faq {
   background: linear-gradient(to bottom, #98D1CA 5%, #F8F9F6 95%); /* Création du dégradé avec bande réglable */
   margin-bottom: 0; /* Corrige le margin-bottom négatif */
}


.faq-section {
   padding: 100px;
}

/* Media query pour écrans plus petits */
@media (max-width: 768px) {
   .faq-section {
      padding: 20px;
   }
 }


 .faq-bottom-curvy {
   width: 100%; /* Utiliser 100% pour couvrir toute la largeur du conteneur parent */
   height: auto; /* Assurer que le SVG garde ses proportions */
   margin: 0; /* Pas de marge supplémentaire */
   padding: 0; /* Pas de remplissage supplémentaire */
   display: block; /* S'assurer que le SVG s'affiche comme un bloc */
}


/* Assure que le SVG s'étend sur toute la largeur et reste en arrière-plan */
.fond-curvy-faq {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: auto;
   z-index: -1;
}


/* Cacher l'image mobile par défaut */
.mobile-image {
   display: none;
}

/* Afficher l'image de bureau par défaut */
.desktop-image {
   display: block;
}

/* Cacher l'image de bureau sur les écrans mobiles */
@media (max-width: 768px) {
   .desktop-image {
       display: none;
   }

   .mobile-image {
       display: block;
       
   }
}




/* Cachez initialement la description faq */
.faq-description {
   display: none;
}

 .faq-icon {
   width: 15px;
   height: 15px;
   transition: transform 0.3s ease; /* Douce transition pour la rotation */
 }



/* Styles pour les boutons découvrir rubrique faq + et - */
.btn-toggle {
   background-color: transparent; /* Assure un arrière-plan transparent */
   color: #103754;
   border: none;
   cursor: pointer;
}

.btn-toggle:hover {
   background-color: transparent; /* Assure un arrière-plan transparent */
}


/* Style spécifique pour les images les émotions dans la section faq" */
.faq-list {
   list-style-type: none;
   padding: 0;
}

/* Style spécifique pour les marges des images les émotions dans la section faq" */
.faq-image {
   margin-bottom: 5px; /* Réduire l'espacement vertical entre les images */
}

.row.text-center.my-4 {
   margin-right: -30px;
   margin-left: -30px;
}

.row.text-center.my-4 > [class*='col-'] {
   padding-right: 5px;
   padding-left: 5px;
}

/* Marges spécifiques pour les écrans plus petits */
@media (max-width: 767px) { /* Taille d'écran mobile */
   .row.text-center.my-4 {
       margin-right: 0;
       margin-left: 0;
   }
   
   .row.text-center.my-4 > [class*='col-'] {
       padding-right: 10px;
       padding-left: 10px;
   }
   
   .faq-image {
       margin-bottom: 10px; /* Augmenter l'espacement vertical entre les images pour les petits écrans */
   }
}



/* Styles pour le fond des rubriques questions de la faq */
.faq-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: transparent; /* Assure un arrière-plan transparent */
  
}

/* Applique les styles actuels de .poppins-regular-faq à h2 */
.faq-header h2.poppins-regular-faq {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 0.875rem;
   font-style: normal;
   color: #103754;
   margin: 0; /* Supprime les marges par défaut des balises h2 */
   padding: 0; /* Supprime les marges internes si nécessaire */
   margin-top: 20px;  /* Ajoute de l'espace au-dessus du texte */
   margin-bottom: 20px;  /* Ajoute de l'espace en dessous du texte */
 }
 @media (max-width: 768px) {
   .faq-header h2.poppins-regular-faq {
      font-size: 14px;
   }
}




/* Styles pour le fond du texte caché de la faq */
.faq-description {
   display: none;
   background-color: rgba(255, 255, 255, 0.3); /* Fond blanc transparent */
   color: #40413E;
   padding: 10px;
   border-radius: 5px;
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 0.875rem;
}
 @media (max-width: 768px) {
   .faq-description {
      font-size: 14px;
   }
}




.poppins-faq-hidden.espace-h3 {
   margin-top: 40px;
   margin-bottom: 40px;
 }
 
 




/* Styles pour la typo du texte caché de la faq */
.add-space-bottom-faq {
   margin-bottom: 40px; /* Ajustez cette valeur selon vos besoins */
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-style: normal;
   color: #40413E;
   font-size: 14px;
}

.poppins-faq-hidden {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-style: normal;
   color: #40413E;
   font-size: 14px;
 }

/* Ajoutez des styles spécifiques pour les écrans plus petits (par exemple, largeur inférieure à 768px) */
@media (max-width: 768px) {
   .add-space-bottom-faq,
   .poppins-faq-hidden {
      font-size: 12px;
   }
}



/* Styles pour la taille les icônes dans les pictogrammes */
.icon-container img {
   width: 50px; /* Largeur de l'icône */
   height: 50px; /* Hauteur de l'icône */
}



/* Styles pour les titres des pictogrammes */
.faq-keyword {
   margin-bottom: 5px; /* Espacement entre le texte et l'icône */
   background-color: transparent;
   color: #103754;
   padding: 5px;
   font-size: 12px;
   cursor: pointer;
}


/* Styles pour les pictogrammes */
.faq-keyword-container {
   display: flex;
   flex-direction: column; /* Arrange le texte au-dessus de l'icône */
   align-items: center;
   margin-right: 5px;
   margin-bottom: 5px;
   font-weight: bold;
   width: 120px; /* Largeur fixe pour maintenir la forme carrée */
   height: 120px; /* Hauteur fixe pour maintenir la forme carrée */
   border: 3px solid #103754; /* Bordure autour du conteneur */
   background-color: #F8F9F6; /* Fond blanc */
   border-radius: 5px; /* Coins arrondis */
}

/* Styles pour centrer les icônes dans les pictogrammes */
.faq-keyword-wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 5px;
   flex: 1; /* Pour que le texte soit centré verticalement */
}



/* Ajoutez des styles spécifiques pour les écrans plus petits (par exemple, largeur inférieure à 768px) */
@media (max-width: 768px) {
   .faq-keyword {
      font-size: 10px;
   }

   .faq-keywords {
      flex-direction: column; /* Pour placer les routine-keyword les uns sous les autres */
      align-items: flex-start; /* Pour centrer les routine-keyword horizontalement */
  }
}



.checked-demarches {
   display: inline-block; /* Maintenir le SVG sur la même ligne */
   width: 1.5rem; /* Ajustez la taille du SVG */
   height: auto; /* Conserver les proportions */
   margin-right: 5px; /* Espace entre le SVG et le texte */
 }

 .checked-legislation {
   display: inline-block; /* Maintenir le SVG sur la même ligne */
   width: 2rem; /* Ajustez la taille du SVG */
   height: auto; /* Conserver les proportions */
   margin-right: 5px; /* Espace entre le SVG et le texte */
 }

 .checked-salaire {
   display: inline-block; /* Maintenir le SVG sur la même ligne */
   width: 2rem; /* Ajustez la taille du SVG */
   height: auto; /* Conserver les proportions */
   margin-right: 5px; /* Espace entre le SVG et le texte */
 }

 .checked-ampoule {
   display: inline-block; /* Maintenir le SVG sur la même ligne */
   width: 2rem; /* Ajustez la taille du SVG */
   height: auto; /* Conserver les proportions */
   margin-right: 5px; /* Espace entre le SVG et le texte */
 }

 .checked-stop {
   display: inline-block; /* Maintenir le SVG sur la même ligne */
   width: 3rem; /* Ajustez la taille du SVG */
   height: auto; /* Conserver les proportions */
   margin-right: 5px; /* Espace entre le SVG et le texte */
 }

 .checked-important {
   display: inline-block; /* Maintenir le SVG sur la même ligne */
   width: 1.5rem; /* Ajustez la taille du SVG */
   height: auto; /* Conserver les proportions */
   margin-right: 5px; /* Espace entre le SVG et le texte */
 }

 .checked-money {
   display: inline-block; /* Maintenir le SVG sur la même ligne */
   width: 1.5rem; /* Ajustez la taille du SVG */
   height: auto; /* Conserver les proportions */
   margin-right: 5px; /* Espace entre le SVG et le texte */
 }


 .enter-salaires {
   display: inline-block; /* Maintenir le SVG sur la même ligne */
   width: 1.5rem; /* Ajustez la taille du SVG */
   height: auto; /* Conserver les proportions */
   margin-right: 5px; /* Espace entre le SVG et le texte */
 }


/* Styles pour la ligne horizontale de séparation de la faq */
.faq-separator {
  border: none; /* Remove the default border */
  border-top: 2px solid #103754; /* Add a top border with the desired color and thickness */
  margin: 20px 0; /* Optional: Add some margin for spacing */
}

/* Styles pour l'espace entre le texte de présentation et le reste du contenu de la faq */
.faq-text {
  margin-top: 20px;  /* Adjust the value as needed */
  margin-bottom: 80px;  /* Adjust the value as needed */
}





/* Styles pour aligner horizontalement sur les écrans de bureau */
.faq-keywords {
   display: flex;
   flex-wrap: wrap; /* Pour permettre le retour à la ligne si nécessaire */
   justify-content: flex-start; /* Pour aligner les éléments à gauche */
   
}




/* Styles pour les liens de la faq */
.styled-link-sites {
   font-weight: bold;
   color: #103754;
   text-decoration: none;
   font-size: 14px;
}

.styled-link-sites:hover {
   text-decoration: underline;
}

/* Media query pour écrans plus petits */
@media (max-width: 768px) {
   .styled-link-sites  {
      font-size: 10px;
   }
 }


 .faq-image-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around; /* Ajustez la disposition horizontale */
 }
 
 .faq-image {
   width: 18%; /* Ajustez selon vos besoins */
   margin: 10px 0; /* Espacement autour de l'image */
 }
 
 @media (max-width: 768px) {
   .faq-image {
     width: 48%; /* Deux images par ligne sur les écrans de taille moyenne */
   }
 }
 
 @media (max-width: 480px) {
   .faq-image {
     width: 100%; /* Une image par ligne sur les petits écrans */
   }
 }
 

.calcul-details-hidden {
  display: none; /* Masquer les détails par défaut */
}

.faq-btn-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent; /* Couleur de fond du bouton */
  color: #103754;
  border: none; /* Suppression de la bordure */
  cursor: pointer; /* Curseur de pointeur sur survol */
  padding: 10px; /* Espacement interne du bouton */
  margin: 10px 0; /* Espacement externe du bouton */
}

.faq-btn-toggle i {
  margin-left: 5px; /* Espacement entre le texte et l'icône */
}













/* Styles pour la page blog*/



 /* Style pour la section "contenu du blog" */
#contenu-blog,
#contenu-activites-enfant,
#contenu-entreprises,
#contenu-petite-enfance-bretigny-91,
#contenu-actu-petite-enfance,
#contenu-hygiene-soins,
#contenu-collectivite-rpe,
#contenu-recettes-atelier-cuisine,
#contenu-selection-produits {
   background-color: #F8F9F6; /* Couleur de fond */
}



 /* Styles pour la BANNIERE DU BLOG */

 /* Styles pour le header avec l'image de fond */
 .page-header {
   position: relative;
   background-image: url('/images/blog/banniere-blog-pc.jpg'); /* Remplacer par votre URL d'image */
   background-size: cover;
   background-position: center;
   margin-bottom: 0; /* Supprime la marge en bas de l'en-tête */
   position: relative; /* Position relative pour la superposition */
   z-index: 1; /* Assurez-vous que l'en-tête est au-dessus de l'image */
 }
 
/* Version mobile */
@media (max-width: 768px) { /* Ajustez 768px si besoin */
   .page-header {
      background-image: url('/images/blog/banniere-blog-mobile.jpg'); /* Image spécifique pour le mobile */
   }
}

 .position-relative {
   position: relative;
 }
 
 /* Pour s'assurer que le texte reste au-dessus du voile */
 .page-header .container {
   z-index: 1;
   position: relative;
 }
 
 
 /* Effet voile */
 .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(20, 56, 84, 0.5); /* Couleur du voile avec opacité */
 }
 



 
 .header-banniere-container {
   display: flex;
   align-items: center; /* Aligner verticalement */
   justify-content: center; /* Centrer horizontalement */
   gap: 20px; /* Espacement entre le H1 et le bouton */
   flex-wrap: wrap; /* Permet le passage à la ligne sur mobile */
   text-align: center; /* Centrer le texte pour une bonne lisibilité */
   margin-bottom: 30px; /* Marge en bas du titre */
   padding-top: 5rem;
   padding-bottom: 5rem;
}



/* Styles pour le bouton appel à l'action rubriques presentation de services-garde-enfants */
.btn-action-primary-a {
   color: #F8F9F6; /* Couleur du texte */
   border-color: #F8F9F6; /* Couleur de la bordure */
   font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    font-style: normal;
  }
   @media (max-width: 768px) {
   .btn-action-primary-a {
     font-size: 0.875rem; /* ou une autre taille plus adaptée au mobile */
   }
 }

  .btn-action-primary-a:hover {
   background-color: #F8F9F6; /* Couleur #F8F9F6 avec 40% de transparence */
   color: #103653; /* Couleur du texte au survol */
   outline: none; /* Supprime le contour par défaut */
   border: 1px solid #103653; /* Ajoute un contour personnalisé */
 
}





 /* Styles spécifiques le titre "Le journal de Céline," */
 .poppins-bold-titre-banniere {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-style: normal;
   color: #F8F9F6;
   font-size: 1.5em; /* Taille de la police relative */
   margin: 0; /* Supprime les marges par défaut */
   z-index: 1;
 }
 
 .poppins-bold-sous-titre-banniere {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-style: normal;
   color: #F8F9F6;
   font-size: 1.1em; /* Taille de la police relative */
   margin-bottom: 30px; /* Marge en bas du titre */
   z-index: 1;
}





 
 /* Animation de fondu pour "assistante maternelle à Brétigny-sur-Orge" */
 @keyframes fadeInOutbanniere {
   0%, 100% {
       opacity: 0;
   }
   25%, 75% {
       opacity: 1;
   }
 }
 
 /* Appliquer l'animation "assistante maternelle à Brétigny-sur-Orge" avec une durée de 3 secondes, répétition infinie */
 .fade-in-out-banniere {
   animation: fadeInOutbanniere 8s infinite;
   color: #F8F9F6; /* Couleur du texte souhaitée */
   display: inline-block; /* Maintient sur la même ligne */
   font-family: "Finger Paint", sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 1.2em;
   position: relative; /* Ajout de position relative */
   margin-bottom: 50px; /* Marge en bas du titre */
 }
 
 @media screen and (max-width: 768px) {
   .fade-in-out-banniere {
      font-size: 0.9em;
    }
   
 }







 
 /* Styles pour le SVG NUAGE BANNIERE */
 
 .svg-banniere-background {
   position: relative; /* Position relative pour le conteneur de l'image SVG */
   z-index: 0; /* Assurez-vous que l'image est derrière le texte de l'en-tête */
 }
 
 .nuages-bleus-curvy {
   width: 100%; /* Ajustez la largeur à 100% pour occuper toute la largeur */
   height: auto; /* Conserve les proportions */
 }
 
 
 /* Par défaut, afficher le SVG pour les grands écrans (PC) */
 .pc-svg {
   display: block;
 }
 
 .mobile-svg {
   display: none;
 }
 
 /* Pour les petits écrans, on masque le SVG pour PC et on affiche celui pour mobile */
 @media only screen and (max-width: 767px) {
   .pc-svg {
       display: none;
   }
   
   .mobile-svg {
       display: block;
   }
 }
 
/* Quand tu remplaces class="container" par class="container-blog", tu perds toutes ces règles automatiques de Bootstrap */
 .container {
   position: relative; /* Pour placer le contenu au-dessus du SVG */
   z-index: 1; /* Assure que le contenu est au-dessus de l'image */
   padding-top: 4rem; /* Ajustez la valeur pour donner un espace au-dessus du contenu si nécessaire */
}








 /* Styles les cards blog */
 
 
 
 body.blog-page {
  background-color: #F8F9F6;
 }

 .card {
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.0);
   background-color: #FDFCF7;
   overflow: hidden; /* Cache le débordement du contenu */
   border: 1px solid transparent; /* Contour transparent */
   position: relative; /* Assure que tout élément positionné à l'intérieur de la carte reste relatif à elle */
 }

 .card-colonne {
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.0);
   background-color: #F8F9F6;
   overflow: hidden; /* Cache le débordement du contenu */
   border: 1px solid transparent; /* Contour transparent */
   position: relative; /* Assure que tout élément positionné à l'intérieur de la carte reste relatif à elle */
 }


 .card-articles {
   margin: 10px;
   background-color: #FDFCF7;
   border-radius: 8px;
   overflow: hidden;
   height: 700px; /* Hauteur fixe de la carte */
   margin-top: 25px;
   display: flex;
   flex-direction: column;  /* Aligner les éléments internes en colonne */
}

.card-body {
   flex-grow: 1; /* Fait en sorte que le contenu occupe tout l'espace restant */
   display: flex;
   flex-direction: column; /* Garde le contenu dans un flux normal (pas en ligne) */
   justify-content: space-between; /* Assure que le contenu est espacé uniformément */
   text-align: center; /* Centre tout le contenu texte (y compris le badge) */
}




.card-body .badge {
   align-self: center; /* Centrer le badge dans la carte */
   display: inline-block;  /* Permet de garder le badge en ligne et éviter l'étirement */
   margin-bottom: 10px; /* Ajuster l'espacement si nécessaire */
   margin-top: 20px; /* Ajuster l'espacement si nécessaire */
   border-radius: 50px;
   margin-bottom: 10px;
}

.btn-custom {
   margin-top: auto; /* Cela pousse le bouton au bas de la carte */
   display: inline-block; /* Garde le bouton en ligne, mais le pousse au bas */
   align-self: center; /* Centrer le bouton horizontalement */
}




 
 
 /* Styles pour la TYPO des cards blog */
 
 
/* Styles spécifiques pour le texte date de l'article page blog.njk */
.poppins-regular-blog-date {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-style: normal;
   color: #40413E;
   font-size: 0.875rem;
 }
 @media screen and (max-width: 768px) {
   .fade-in-out-banniere {
      font-size: 0.75rem;
    }
 }

/* Styles pour les titres des cards blog */

.poppins-bold-titre-blog-h2 {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-style: normal;
   color: #103653;
   font-size: 1.5rem; /* Taille de la police relative */
}
@media (max-width: 768px) {
   .poppins-bold-titre-blog-h2 {
     font-size: 1.2rem; /* réduction par rapport à 1.5rem */
   }
 }


 /* Styles pour les svg tétines */

 .bouton-tetine {
   width: 100px; /* Ajustez la largeur de l'icône selon vos besoins */
   height: 100px; /* Maintient le rapport hauteur-largeur */
   }
 @media screen and (max-width: 768px) {
   .bouton-tetine {
   width: 100px; /* Ajustez la largeur de l'icône selon vos besoins */
   height: 100px; /* Maintient le rapport hauteur-largeur */
   }
 }
 


 body.article-page {
   display: flex;
   flex-direction: column;
   min-height: 100vh; /* Minimum 100% de la hauteur de la vue */
   margin: 0; /* Supprime tout espace blanc autour */
}


#contenu-article {
   background-color: #F8F9F6; /* Couleur de fond */
   flex-grow: 1; /* Occupe toute la hauteur disponible */
   min-height: 100vh; /* Prend au moins la hauteur de la vue */
   display: flex;
   flex-direction: column;
   justify-content: center; /* Centrer le contenu verticalement si nécessaire */
   padding-top: 0;
   padding-bottom: 0;
}


.youtube_player iframe {
    width: 100%;
    height: 100%;
  }

 
.container-article {
   position: relative;
   z-index: 1;
   padding-top: 0rem;
   margin-inline: 20px; /* Ajoute la même marge à gauche et à droite */
}
@media screen and (max-width: 768px) {
   .container-article {
      margin-inline: 20px; /* Ajoute la même marge à gauche et à droite */
   }
 }



.meta-info {
   text-align: center; /* Centre le texte */
   margin-top: 20px;
}



 /* Style pour le titre categorie - date des articles.md dans post.njk*/
 .visuel-content {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
   font-style: normal;
   color: #103754;
   margin-top: 80px;
   margin-bottom: 80px;
}

 /* Style pour le contenu texte des articles.md dans post.njk*/
 .content-wrapper {
   max-width: 800px; /* Largeur maximale pour le texte et l'image */
   margin: 0 auto; /* Centre le conteneur */
}

.article-image {
   width: 100%; /* L'image prendra la largeur du conteneur */
   height: auto;
}





/* Style pour le bouton svg retour des articles.md dans post.njk*/
.back-button {
   display: flex;
   justify-content: center;
   margin-top: 20px;
}

.back-icon {
   width: 150px; /* Ajustez la taille de l'icône selon vos besoins */
   height: 150px;
}





/* Style pour le bouton liens des fichiers md article*/
.btn-article {
   text-align: center;
   background-color: #103754; /* Couleur de fond */
   color: #F8F9F6; /* Couleur du texte */
   border-radius: 5px; /* Coins arrondis */
   border: none; /* Retirer la bordure par défaut */
   padding: 5px 10px; /* Espacement interne */
   font-size: 0.875rem; /* Taille du texte */
   cursor: pointer; /* Changer le curseur au survol */
   transition: background-color 0.3s; /* Transition pour un effet au survol */
}
@media (max-width: 768px) {
   .btn-article {
     font-size: 0.75rem; /* ou une autre taille plus adaptée au mobile */
   }
 }


.btn-article:hover {
   background-color: #041427; /* Couleur au survol */
   color: #F8F9F6; /* Couleur du texte */
}

@media (max-width: 576px) {
   .btn-article-wrapper {
       flex-direction: column; /* Aligne les boutons verticalement */
       width: 100%; /* Assure que le conteneur occupe toute la largeur */
   }
   
   .btn-article {
       width: 100%; /* Les boutons occupent toute la largeur du conteneur */
   }
}

/* Styles pour une image dans la page article.md*/
.article-content img {
   display: block;       /* Assure que l'image se comporte comme un élément de bloc */
   margin: 20px auto;    /* Centre l'image horizontalement et ajoute un espacement vertical */
   max-width: 100%;      /* Empêche l'image de dépasser la largeur du conteneur */
   height: auto;         /* Maintient le ratio de l'image */
   border-radius: 10px;  /* Facultatif : ajoute des coins arrondis */
}



/* Styles pour les liens dans les articles.md*/
.styled-link-article {
   font-family: "Poppins", sans-serif;
   font-weight: bold;
   font-size: 14px;
   font-style: normal;
   color: #103754;
   text-decoration: none;
}
.styled-link-article:hover {
   text-decoration: underline;
}
/* Media query pour écrans plus petits */
@media (max-width: 768px) {
   .styled-link-article  {
      font-size: 14px;
   }
 }

 #sommaire {
   background-color: #f3f4f6;
   padding: 15px;
   border-radius: 8px;
   margin-bottom: 20px;
}

#sommaire a {
   display: block; /* Met chaque lien sur une nouvelle ligne */
   margin-bottom: 5px; /* Espacement entre les liens */
}

html {
   scroll-behavior: smooth;
}

/* Styles pour les liens dans les articles.md*/
.styled-link-sommaire {
   font-family: "Poppins", sans-serif;
   font-weight: normal;
   font-size: 14px;
   font-style: normal;
   color: #34556e;
   text-decoration: none;
}
.styled-link-sommaire:hover {
   text-decoration: underline;
}
/* Media query pour écrans plus petits */
@media (max-width: 768px) {
   .styled-link-sommaire  {
      font-size: 14px;
   }
 }

 #sommaire h2 {
   margin-bottom: 10px; /* Réduit l'espace sous le titre */
   font-size: 18px; /* Réduit la taille du titre */
   color: #34556e; /* Applique la couleur */
   font-weight: bold;
}




.highlighted-note {
   border-left: 4px solid #103754; /* couleur Bootstrap primary */
   padding-left: 1rem;
   margin: 1rem 0;
 }
 
 .source-box {
   border-left: 4px solid #103754;
   padding-left: 1rem;
   margin-top: 2rem;
   background-color: #f9f9f9;
   font-size: 1rem;
   line-height: 1.6;
 }
 
 /* Liens */
 .source-box a {
   color: #103754;
   text-decoration: underline;
   font-weight: 500;
   display: inline-block;
   margin-right: 0.5rem;
 }
 
 .source-box a:hover {
   color: #0c2a45;
   text-decoration: none;
 }
 
 /* Responsive pour petits écrans */
 @media (max-width: 576px) {
   .source-box {
     font-size: 0.9rem;
     padding-left: 0.75rem;
   }
 
   .source-box a {
     display: block;
     margin-bottom: 0.5rem;
   }
 }
 
 


 
 /* Styles pour la TYPO des cards cote droit blog */
 
 /* Styles spécifiques les titres du blog */
 .finger-paint-regular-titre-blog {
   color: #103653;
   font-family: "Finger Paint", sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 1em;
   position: relative; /* Ajout de position relative */
   z-index: 1;
 }
 
 
 /* Styles spécifiques pour l'arrière plan oval des titres du blog */
 .finger-paint-regular-titre-blog::after {
   content: '';
   position: absolute;
   bottom: -5px;
   left: 50%;
   transform: translateX(-50%);
   width: 100%; /* Largeur de l'ovale horizontal */
   height: 100%; /* Hauteur de l'ovale horizontal */
   background-color: rgba(247, 153, 39, 0.2); /* La couleur #F79927 avec 50% de transparence */
   border-radius: 90px / 30px; /* Border radius pour créer la forme d'un ovale */
   z-index: -1;
   overflow: hidden; /* Cacher le contenu qui dépasse de l'ovale */
   
 }
 
 
 
 /* Styles pour positionner l'icône de position sur la photo animée */
.portrait-blog {
   position: relative; /* Assure que les icônes sont positionnées par rapport à ce conteneur */
   display: inline-block; /* Pour empêcher le débordement de l'icône position */
   z-index: 1;
   width: 100%; /* Assure que le conteneur de l'image prend toute la largeur */
   text-align: center; /* Centre l'image si elle est en ligne */
}

/* Styles pour la photo portrait de blog et des icônes */
.card-img-portrait {
   width: 80%; /* Ajuster selon vos besoins */
   height: auto; /* Maintenir les proportions */
   display: block; /* Centre l'image */
   margin: 20px auto 0; /* Marge en haut et centre horizontalement */
}

@media screen and (max-width: 768px) {
   .card-img-portrait {
       width: 90%; /* Ajustement pour les écrans plus petits */
       
   }
}

/* Styles pour garder la photo de profil ronde et centrée */
.bordered-content-portrait-blog .portrait-blog img {
   max-width: 100%;
   height: auto;
   border-radius: 50%;
   display: block;
   margin: 0 auto; /* Centrage */
}

@media (max-width: 768px) {
   .bordered-content-portrait-blog .portrait-blog img {
       max-width: 80%; /* Réduire la taille sur les petits écrans */
       max-height: 80%;
       
   }
}


/* Ajustement pour éviter le débordement en mode paysage sur mobiles */
@media screen and (orientation: landscape) and (max-width: 768px) {
  .portrait-blog {
      width: 100%; /* Limite la largeur du conteneur */
      margin: 0 auto;
  }
  .card-img-portrait {
      width: 70%; /* Ajustement supplémentaire pour le paysage */
      margin: 0 auto;
  }
}






/* Ajustements généraux pour les icônes en fonction de l'image de profil */
.position-icon-portrait,
.position-icon-domicile {
    position: absolute;
    width: 3.5em; /* Ajuster la taille de l'icône si nécessaire */
    height: 3.5em;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* Positionnement spécifique pour chaque icône */
.position-icon-portrait {
    top: 15%;
    left: 80%; /* Ajustement horizontal pour réduire le décalage */
}

.position-icon-domicile {
    top: 40%;
    left: 15%;
}

/* Réglages pour écrans moyens */
@media (max-width: 992px) {
    .position-icon-portrait {
        top: 15%;
        left: 80%;
        width: 3em;
        height: 3em;
    }
    .position-icon-domicile {
        top: 40%;
        left: 15%;
        width: 3em;
        height: 3em;
    }
}

/* Réglages pour écrans étroits (petites colonnes) */
@media (max-width: 768px) {
    .position-icon-portrait,
    .position-icon-domicile {
        width: 2.5em;
        height: 2.5em;
    }

    .position-icon-portrait {
        top: 25%; /* Ajustement de la position en haut pour petits écrans */
        left: 75%; /* Position plus proche de l'image */
    }

    .position-icon-domicile {
        top: 10%;
        left: 15%;
    }
}





.text-portrait {
   margin-top: 0px; /* ou une valeur de votre choix */
}
@media (max-width: 768px) {
   .text-portrait {
      margin-top: 10px; /* ou une valeur de votre choix */
   }
 }


/* Style pour la rubrique CATEGORIE */
.category-item {
   border-bottom: 5px dotted #bec9cd; /* Ligne horizontale pointillée */
   padding-bottom: 8px; /* Espace entre le texte et la ligne */
   margin-bottom: 8px; /* Espace entre les éléments */
}

.category-item:last-child {
   border-bottom: none; /* Supprime la ligne pour le dernier élément */
}

 
 .category-link {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-style: normal;
   color: #103754;
   font-size: 1rem; /* Ajuste la taille de la police */
   text-decoration: none; /* Retire le soulignement des liens */
   display: block; /* Fait que les liens prennent toute la largeur pour un bon centrage */
   text-align: center; /* Centre le texte des liens */
 }
 
 
 /* Style pour la section NEWSLETTER */
 
 .newsletter-section {
   background-color: #96D2CA; /* Couleur de fond */
   padding: 60px 0; /* Espace autour de la section */
   
 }
 
 @media (max-width: 768px) {
   .newsletter-section {
     padding: 30px 0; /* Réduit le padding sur les petits écrans */
   }
 }
 
 .newsletter-titre {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 25px;
   font-style: normal;
   color: #103653;
   margin-bottom: 20px; /* Espace entre le titre et le texte */
   margin-top: 0px; /* Espace entre le titre et le texte */
   text-align: center;
 }
 .horizontal-line {
   border: none; /* Supprime la bordure par défaut */
   border-top: 2px solid #103653; /* Crée une ligne horizontale de 2px de hauteur avec la couleur désirée */
   margin: 20px 0; /* Ajoute de l'espace au-dessus et en dessous de la ligne */
   width: 100%; /* S'assure que la ligne prend toute la largeur disponible */
 }
 
 
 /* Style pour la PAGINATION */

 
 /* Style pour l'alignement des icônes de la PAGINATION */
.pagination-container {
   display: flex;
   justify-content: center;
   gap: 20px; /* Espace entre les deux boutons */
   margin-top: 20px;
}


.pagination-btn {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px; /* Espace entre le numéro de page et les icônes */
}

.pagination-btn img {
   width: 150px; /* Ajustez la taille selon vos besoins */
   height: 150px;
}

.pagination-nav {
   display: flex;
   justify-content: center;
   margin-top: 20px;
}

.pagination-nav ul {
   display: flex;
   gap: 20px; /* Espace entre les éléments de la liste */
   list-style: none;
   padding: 0;
}



 /* Styles pour le SVG NUAGE NEWSLETTER */
 

 /* Style pour la section NEWSLETTER */

.newsletter-section {
   background-color: #96D2CA; /* Couleur de fond */
   padding: 60px 0; /* Espace autour de la section */
   
 }
 
 @media (max-width: 768px) {
   .newsletter-section {
     padding: 30px 0; /* Réduit le padding sur les petits écrans */
   }
 }
 
 .newsletter-titre {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 25px;
   font-style: normal;
   color: #103653;
   margin-bottom: 20px; /* Espace entre le titre et le texte */
   margin-top: 0px; /* Espace entre le titre et le texte */
   text-align: center;
 }
 .horizontal-line {
   border: none; /* Supprime la bordure par défaut */
   border-top: 2px solid #103653; /* Crée une ligne horizontale de 2px de hauteur avec la couleur désirée */
   margin: 20px 0; /* Ajoute de l'espace au-dessus et en dessous de la ligne */
   width: 100%; /* S'assure que la ligne prend toute la largeur disponible */
 }
 
 
 /* Bouton Like */
/* Bouton "J'aime" */
/* Style de base pour le bouton "J'aime" */
.like-button {
   background-color: #f3f4f6; /* Couleur de fond */
   color: #103653; /* Couleur du texte */
   border: none; /* Pas de bordure */
   border-radius: 5px; /* Coins arrondis */
   padding: 8px 16px; /* Espacement interne */
   display: flex;
   align-items: center;
   gap: 8px; /* Espacement entre l'icône, le texte et le nombre de likes */
   box-shadow: none; /* Pas d'ombre */
}

/* Icône du bouton */
.like-button img {
   width: 20px; /* Taille de l'icône */
   height: 20px; /* Taille de l'icône */
}

/* Style pour le nombre de likes */
#like-count {
   font-weight: bold; /* Mettre en gras le nombre de likes */
}

/* Changement de style après le like */
.like-button.liked {
   background-color: #f7e6cd; /* Changer la couleur de fond après le like */
   color: #103653; /* Couleur du texte après le like */
}



/* Bouton principal "Partager" */
.share-dropdown .dropdown-toggle {
   background-color: #f3f4f6; /* Couleur de fond */
   color: #103653; /* Couleur du texte */
   border: none; /* Supprimer la bordure */
   border-radius: 5px; /* Coins arrondis */
   padding: 8px 16px; /* Espacement interne */
   display: flex;
   align-items: center;
   gap: 8px; /* Espacement entre l'icône et le texte */
   box-shadow: none; /* Pas d'effet d'ombre */
}

/* Désactiver l'effet hover pour le bouton */
.share-dropdown .dropdown-toggle:hover,
.share-dropdown .dropdown-toggle:focus {
   background-color: #f3f4f6; /* Conserver la couleur initiale */
   color: #103653; /* Conserver la couleur du texte */
   box-shadow: none; /* Pas d'effet au focus */
}

/* Menu déroulant */
.share-dropdown .dropdown-menu {
   background-color: #F8F9F6; /* Couleur de fond */
   border: none; /* Supprimer les bordures */
   border-radius: 5px; /* Coins arrondis */
   padding: 8px 0; /* Espacement interne */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre subtile */
}

/* Dropdown items */
.share-dropdown .dropdown-item {
   display: flex;
   align-items: center;
   gap: 10px; /* Espacement entre l'icône et le texte */
   padding: 8px 16px; /* Espacement interne */
   color: #103653; /* Couleur du texte */
   background-color: transparent; /* Fond transparent */
   transition: background-color 0.2s ease; /* Transition pour effet visuel */
}

/* Effet hover sur les items */
.share-dropdown .dropdown-item:hover {
   background-color: #f3f4f6; /* Couleur au survol */
}

/* Icônes dans le menu "Partager" */
.share-dropdown img {
   width: 20px;
   height: 20px;
}






 

 /* Style des icônes svg des liens des articles*/
 .vedette-partage-reseaux {
   width: 40px; /* Taille de l'icône */
   margin-right: 10px; /* Espacement entre l'icône et le texte */
   vertical-align: middle; /* Alignement vertical */
}

/* Style des icônes svg des liens des articles*/
.icone-partage-reseaux {
   width: 20px; /* Taille de l'icône */
   margin-right: 10px; /* Espacement entre l'icône et le texte */
   vertical-align: middle; /* Alignement vertical */
}



/* Style des icônes svg liens des articles page blog.njk*/
.icone-partage-lien {
   width: 25px; /* Taille de l'icône */
   margin-right: 10px; /* Espacement entre l'icône et le texte */
   position: relative; /* Permet de déplacer l'icône */
   top: 0px; /* Ajuste la position vers le haut */
}

.share-buttons {
   display: flex; /* Utilise Flexbox pour aligner les éléments */
   justify-content: center; /* Centre les icônes horizontalement */
   gap: 0px; /* Espace entre chaque icône */
   flex-wrap: wrap; /* Optionnel : permet de passer sur une nouvelle ligne si l'espace est limité */
   align-items: center; /* Aligne verticalement les icônes */
}
 
 
@media (max-width: 768px) {
   .vedette-partage-reseaux {
      width: 10px; /* Taille de l'icône */
   }
   
    /* Style des icônes svg des liens pied de page*/
   .icone-partage-reseaux {
      width: 15px; /* Taille de l'icône */
   }
   .icone-partage-lien {
      width: 20px; /* Taille de l'icône */
      top: 0px; /* Ajuste la position vers le haut */
   }
 }
 




 /* Style pour la 404 - Page Non Trouvée dans 404.md*/ 
 
 body.introuvable-page {
   background-color: #96D2CA;
   flex-grow: 1; /* Occupe toute la hauteur disponible */
   min-height: 100vh; /* Prend au moins la hauteur de la vue */
  }

  #page-non-trouvee {
   background-color: #F8F9F6; /* Couleur de fond */
   flex-grow: 1; /* Occupe toute la hauteur disponible */
   min-height: 100vh; /* Prend au moins la hauteur de la vue */
   display: flex;
   flex-direction: column;
   justify-content: center; /* Centrer le contenu verticalement si nécessaire */
   position: relative;
   margin: 0; /* Supprime les marges externes */
   padding: 0; /* Supprime les espaces internes */
   overflow: hidden; /* Évite les débordements */
}


/* Style pour le contenu du titre 404 - Page Non Trouvée dans 404.md*/
.poppins-regular-titre-page-non-trouvee {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 35px;
   font-style: normal;
   color: #103754;
   margin-top: 20px;
   margin-bottom: 20px;
}
/* Styles spécifiques pour le titre de l'article page blog.njk */
.poppins-regular-texte-page-non-trouvee {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
   font-style: normal;
   color: #103754;
 }

/* Styles pour le lien de 404 - Page Non Trouvée dans 404.md*/
.styled-link-home {
   font-family: "Poppins", sans-serif;
   font-weight: bold;
   font-size: 14px;
   font-style: normal;
   color: #103754;
   text-decoration: none;
}
.styled-link-home:hover {
   text-decoration: underline;
}
/* Media query pour écrans plus petits */
@media (max-width: 768px) {
   .styled-link-home  {
      font-size: 14px;
   }
 }


 .voiture-stop {
   width: 60%;
   max-width: 300px;
   height: auto;
   margin-top: 40px; /* Ajoute de l'espace au-dessus */
   margin-bottom: 140px; /* Ajuste l'espace pour les écrans moyens */
}

@media (max-width: 768px) {
   .voiture-stop {
       width: 80%;
       margin-top: 25px; /* Ajuste l'espace pour les écrans moyens */
       margin-bottom: 100px; /* Ajuste l'espace pour les écrans moyens */
   }
}

@media (max-width: 480px) {
   .voiture-stop {
       width: 100%;
       margin-top: 20px; /* Ajuste l'espace pour les petits écrans */
       margin-bottom: 100px; /* Ajuste l'espace pour les écrans moyens */
   }
}


/* Pour le SVG en haut */
.ciel-nuages-decor {
   display: block;
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
}



/* Pour les SVG en bas */
.sol-nuages-decor {
   width: 100%; /* Ajustez la largeur à 100% pour occuper toute la largeur */
   height: auto; /* Conserve les proportions */
 }
 
 
 /* Par défaut, afficher le SVG pour les grands écrans (PC) */
 .pc-svg {
   display: block;
 }
 
 .mobile-svg {
   display: none;
 }
 
 /* Pour les petits écrans, on masque le SVG pour PC et on affiche celui pour mobile */
 @media only screen and (max-width: 767px) {
   .pc-svg {
       display: none;
   }
   
   .mobile-svg {
       display: block;
   }
 }
 
/* Pour les SVG en bas */
.oups-container {
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
   text-align: center;
}

 






/* Style pour la page d'information flux RSS rss-info.njk*/ 
 
body.rss-info-page {
   background-color: #96D2CA;
  }

#page-flux-rss {
  
   background: linear-gradient(to bottom, #98D1CA 5%, #F8F9F6 95%); /* Création du dégradé avec bande réglable */
   margin-bottom: 0; /* Corrige le margin-bottom négatif */
}


.ciel-nuages-flux {
   width: 100%; /* Prendre toute la largeur */
   height: auto; /* Assurer que le SVG garde ses proportions */
   margin: 0; /* Pas de marge supplémentaire */
   padding: 0; /* Pas de remplissage supplémentaire */
}




 .button-wrapper {
   display: flex;
   justify-content: flex-start; /* Aligne les boutons à gauche */
   align-items: center;
   flex-wrap: wrap;
   gap: 15px;
 }
 

.custom-button {
   background-color: #103754; /* Couleur de fond */
   color: #F8F9F6; /* Couleur du texte */
   border-radius: 8px; /* Coins arrondis */
   border: none; /* Retirer la bordure par défaut */
   padding: 10px 20px; /* Espacement interne */
   font-size: 16px; /* Taille du texte */
   cursor: pointer; /* Changer le curseur au survol */
   transition: background-color 0.3s; /* Transition pour un effet au survol */
 }

 .custom-button:hover {
   background-color: #041427; /* Couleur au survol */
   color: #F8F9F6; /* Couleur du texte */
 }
 @media (max-width: 576px) {
   .button-wrapper {
       flex-direction: column; /* Aligne les boutons verticalement */
       width: 100%; /* Assure que le conteneur occupe toute la largeur */
   }
   
   .custom-button {
       width: 100%; /* Les boutons occupent toute la largeur du conteneur */
   }
}
 




.rss-icon {
   width: 50px;
   height: 50px;
}




/* Styles pour la section cesu-entreprise */

#cesu-entreprise {
  background-color: #103754;
  padding: 20px;
  color: white;
  box-sizing: border-box;
}

.icones-cesu-container {
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

.icone-cesu {
  background: rgba(255 255 255 / 0.05);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
  margin-bottom: 20px;
}

.icone-cesu:hover,
.icone-cesu:focus {
  transform: translateY(-6px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  outline: none;
}

.icone-cesu img {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  object-fit: contain;
}

.icone-cesu h3 {
  font-weight: 400;
  font-size: 1.2rem;
  margin-bottom: 8px;
  color: #fff;
}

.titre-salarie,
.titre-entreprise {
  font-size: 0.9rem;
  line-height: 1.3;
  margin-bottom: 6px;
  color: #d0e4f7;
}

.cta-container {
  margin-top: 28px;
  text-align: left;
}

.btn.btn-action-primary-h {
  background-color: #f7b96f;
  color: #103754;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.btn.btn-action-primary-h:hover,
.btn.btn-action-primary-h:focus {
  background-color: #fca779;
  outline: none;
}

/* Responsive : un peu plus d'aération sur mobile */
@media (max-width: 480px) {
  #cesu-entreprise {
    padding: 16px 12px;
  }

  .btn.btn-action-primary-h {
    width: 100%;
    text-align: center;
  }
}


/* Styles spécifiques le titre "UNE ADAPTATION REUSSIE" */
.poppins-bold-cesu-title {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-style: normal;
   color: #F8F9F6;
   font-size: 2.5em; /* Taille de la police relative */
   margin-top: 20px; /* Marge en haut du titre */
   margin-bottom: 20px; /* Marge en bas du titre */
}

@media (max-width: 768px) {
   .poppins-bold-cesu-title {
     font-size: 1.8em; /* ou une autre taille plus adaptée au mobile */
   }
 }
 
 .titre-entreprise {
   display: block;
   margin-top: 0.5rem;
 }
 

 .icone-cesu {
   display: flex;
   flex-direction: column;
   align-items: flex-start; /* Aligne tout à gauche */
   text-align: left;
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
   margin: 1rem;
   width: 22%;
 }
 
 .icone-cesu.visible {
   opacity: 1;
   transform: translateY(0);
 }
 
 .icone-cesu-img {
   width: 80px;
   height: auto;
   margin-bottom: 0.75rem; 
 }
 @media (max-width: 767px) {
   .icone-cesu img {
     margin-bottom: 1rem; /* ou plus si besoin */
   }
 }
 
 
 .titre-icone-cesu {
   font-weight: bold;
   font-size: 1.1rem;
   margin-bottom: 0.5rem;
   display: block;
 }
 

 .poppins-regular-icone-cesu {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
   font-style: normal;
   color: #F8F9F6;
   margin-top: 10px; /* Ajoute un espace entre l'icône et le texte */
}
.icone-cesu a {
   text-decoration: none; /* Supprime le soulignement du lien */
   color: inherit; /* Garde la couleur du texte normale */
}

 
 /* Pour les petits écrans, chaque icône prendra toute la largeur */
@media (max-width: 767px) {
   .icones-cesu-container .col-12 {
     flex: 0 0 100%;
     max-width: 100%;
   }
 
   .icone-cesu {
     width: 100%;
     margin-left: auto;
     margin-right: auto;
     padding-left: 1.5rem; /* marge gauche homogène */
     padding-right: 1.5rem;
     align-items: flex-start; /* aligne à gauche */
     text-align: left; /* texte aligné à gauche */
   }
 
   .icone-cesu-img {
     width: 80px;
     height: auto;
     margin-bottom: 0.4rem;
   }
 
   .poppins-regular-icone-cesu {
     margin: 0;
   }
 }
 
 
.icone-cesu h3 strong.titre {
   display: block;
   margin-bottom: 0.75rem; /* ajuste la valeur selon l’espace souhaité */
 }
 

 
 .titre {
   display: inline-block;
   vertical-align: middle;
 }
 

 /* Styles pour le bouton appel à l'action cesu-entreprise page index */
 .btn-action-primary-d {
   color: #F8F9F6; /* Couleur du texte */
   border-color: #F8F9F6; /* Couleur de la bordure */
   font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    font-style: normal;
    margin-top: 10px;
    margin-bottom: 20px;
  }
 @media (max-width: 768px) {
   .btn-action-primary-d {
     font-size: 0.875rem; /* ou une autre taille plus adaptée au mobile */
   }
 }


 .btn-action-primary-d:hover {
   background-color: #F8F9F6; /* Couleur #F8F9F6 avec 40% de transparence */
   color: #103653; /* Couleur du texte au survol */
   outline: none; /* Supprime le contour par défaut */
   border: 1px solid #103653; /* Ajoute un contour personnalisé */
 
}




/* Styles pour la page simulateur-cout-creche-assistante-maternelle */


/* Styles pour la section simulateur-reforme-cmg-assmat-creche */
 #simulateur-reforme-cmg-assmat-creche {
   background: #98D1CA; /* Création du dégradé avec bande réglable */
   position: relative; /* Nécessaire pour l'alignement des pseudo-éléments */
  
   overflow: hidden; /* Cachez le débordement de l'image SVG */
   padding-left: 20px; /* Ajoutez une marge de 20px à gauche */
   padding-right: 20px; /* Ajoutez une marge de 20px à droite */
   padding-bottom: 40px; /* Ajoutez une marge de 20px en bas */
}

#simulateur-reforme-cmg-assmat-creche .col-md-12 img.fond-curvy {
   position: absolute;
   width: 100%;
   top: 100px;
   left: 0;
   right: 0;
   margin: 0;
   z-index: 1;
}

#simulateur-reforme-cmg-assmat-creche .fond-curvy {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   z-index: -1; /* Assurez-vous que l'image SVG est derrière le contenu */
}


.reforme-cmg-container {
   display: flex;
   align-items: center; /* Aligner verticalement */
   justify-content: center; /* Centrer horizontalement */
   gap: 20px; /* Espacement entre le H1 et le bouton */
   flex-wrap: wrap; /* Permet le passage à la ligne sur mobile */
   text-align: center; /* Centrer le texte pour une bonne lisibilité */
   margin-bottom: 30px; /* Marge en bas du titre */
}




/* Styles pour la section conseil-expert-cmg */
 #conseil-expert-cmg {
   background: #F8F9F6; 
   padding-left: 20px; /* Ajoutez une marge de 20px à gauche */
   padding-right: 20px; /* Ajoutez une marge de 20px à droite */
   padding-bottom: 40px; /* Ajoutez une marge de 20px en bas */
   padding-top: 80px; /* Ajoutez une marge de 20px en haut */
}

.astuce-cmg-card {
   border-left: 5px solid #F79927;
   background-color: #fffaf5;
   border-radius: 12px; /* Coins arrondis */
   padding-left: 20px; /* Ajoutez une marge de 20px à gauche */
   padding-right: 20px; /* Ajoutez une marge de 20px à droite */
   padding-top: 60px; /* Ajoutez une marge de 20px en haut */
}

.card-strategie {
    background-color: #F8F9F6;
}

.alert-custom-info {
    background-color: #eaf3f0;
    height: 100%; /* Permet à toutes les cartes de s'étirer sur la même hauteur */
}

.cards-equal-height {
    align-items: stretch;
}

.card-mini-equal {
    height: 100%;
   
}

/* Styles pour la section reforme-cmg-2026 */
 
#reforme-cmg-2026 {
   background-color: #98D1CA;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 80px;
   padding-bottom: 80px;
    }
    

 .card-reforme {
   background-color: #AEDBD5; /* Votre couleur spécifique */
   padding: 20px;
   border-radius: 8px;
   margin-bottom: 20px;
   height: 100%; /* Permet à toutes les cartes de s'étirer sur la même hauteur */
}



/* Styles pour la section comparer-creche-assistante-maternelle */
#comparer-creche-assistante-maternelle {
   background-color: #F8F9F6;
   padding-left: 10px;
   padding-right: 10px;
 }

 .comparatif-card {
   background-color: #eaf3f0;
   padding: 20px;
   border-radius: 10px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   height: 100%; /* Permet à toutes les cartes de s'étirer sur la même hauteur */
 }
 
 .comparatif-card h3 {
   display: inline-flex;
   align-items: center;
 }
 
 
 .comparatif-icon-wrapper {
   display: inline-flex;
   align-items: center; /* Aligne verticalement l'icône et le texte */
   margin-right: 8px; /* Ajuste l'espace entre l'icône et le texte */
 }
 
 



#barometre {
  height: 80px;
  position: relative;
}

#curseur {
  position: absolute;
  top: -15px; /* position au-dessus des blocs */
  font-size: 1.5rem;
  transition: left 0.5s ease;
  z-index: 5;
}






 .idee-icon {
   width: 80px; /* Taille contrôlée de l'icône */
   height: 80px;
   object-fit: contain; /* Assure que l'image conserve ses proportions */
 }

.poppins-regular-comparatif li:first-child {
    padding-bottom: 1em;
    border-bottom: 1px solid #ccc;
    margin-bottom: 1.5em;
  }



/* Styles de base pour les champs du simulateur */
.simu-control {
   width: 100%; /* Remplit le conteneur */
   border: none;
   border-bottom: 2px solid #103653; /* Couleur par défaut */
   border-radius: 0; /* Pas de coins arrondis */
   outline: none; /* Pas de bordure au focus */
   padding: 10px 0; /* Espace intérieur du champ */
   font-family: "Poppins", sans-serif;
   background-color: #F8F9F6;
   color: #103653; /* Couleur du texte */
   transition: all 0.2s ease; /* Pour une transition fluide */
}

/* Quand le champ est en focus ou non vide, déplace le label vers le haut */
.simu-control:focus + .floating-label,
.simu-control:not(:placeholder-shown) + .floating-label {
   top: -20px; /* Position du label lorsqu'il flotte */
   font-size: 12px; /* Taille du texte réduite */
   color: #103653; /* Couleur du label */
}



/* Style pour le champ de saisie lorsqu'il est en focus */
.simu-control:focus {
   border-bottom-color: #103653; /* Enlève la couleur de la ligne en focus */
   outline: none; /* Enlève également l'encadrement bleu du focus */
   box-shadow: none; /* Enlève également toute ombre portée (shadow) */
}

/* Effet pour le texte lorsqu'il y a du contenu (non vide) */
.simu-control:not(:placeholder-shown) {
   color: #103653; /* Couleur du texte quand du contenu est saisi */
 }






/* Styles de base pour les champs AUTOMATIQUES du simulateur */
.simu-auto-control {
   width: 100%; /* Remplit le conteneur */
   border: none;
   border-bottom: 2px solid #3b5c6e; /* Couleur par défaut */
   border-radius: 0; /* Pas de coins arrondis */
   outline: none; /* Pas de bordure au focus */
   padding: 10px 0; /* Espace intérieur du champ */
   font-family: "Poppins", sans-serif;
   background-color: #eaf3f0;
   color: #3b5c6e; /* Couleur du texte */
   transition: all 0.2s ease; /* Pour une transition fluide */
}

/* Quand le champ est en focus ou non vide, déplace le label vers le haut */
.simu-auto-control:focus + .floating-label,
.simu-auto-control:not(:placeholder-shown) + .floating-label {
   top: -20px; /* Position du label lorsqu'il flotte */
   font-size: 12px; /* Taille du texte réduite */
   color: #3b5c6e; /* Couleur du label */
}

/* Style pour le champ de saisie lorsqu'il est en focus */
.simu-auto-control:focus {
   border-bottom-color: #3b5c6e; /* Enlève la couleur de la ligne en focus */
   outline: none; /* Enlève également l'encadrement bleu du focus */
   box-shadow: none; /* Enlève également toute ombre portée (shadow) */
}

/* Effet pour le texte lorsqu'il y a du contenu (non vide) */
.simu-auto-control:not(:placeholder-shown) {
   color: #3b5c6e; /* Couleur du texte quand du contenu est saisi */
 }





 /* Styles personnalisés pour le background des champs lors de la saisie sur simulateur */
.styled-input {
  background-color: #FDFCF7; /* Couleur du fond normale */
  border: none;
  border-bottom: 2px solid #103653;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  padding: 10px 0;
  color: #103653;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.styled-input:focus {
  background-color: #FDFCF7 !important; /* Force la couleur même au focus */
  border-bottom: 2px solid #103653;
  outline: none;
  box-shadow: none;
}

/* Styles personnalisés pour le background du champs select lors du choix des âges sur simulateur */
.styled-select {
  background-color: #FDFCF7;
  color: #103653;
  border: none;
  border-bottom: 2px solid #103653;
  border-radius: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: 10px 0;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  box-shadow: none;
}

.styled-select:focus {
  background-color: #FDFCF7;
  border-bottom: 2px solid #103653;
  outline: none;
  box-shadow: none;
}


/* Bouton personnalisé */
.custom-btn {
  background-color: #103754;
  border: none;
  color: #F8F9F6;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.custom-btn:hover {
  background-color: #0b2a3d; /* Légère variation au hover */
  color: #F8F9F6;
}

/* Radios + labels en style cohérent */
.form-check-input:checked {
  background-color: #103754;
  border-color: #103754;
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.15rem rgba(16, 55, 84, 0.3);
}

.form-check-label {
  color: #103754;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
}


/* Centrer l'icône SVG */
.curseur-tetine {
   width: 110px; /* Ajustez la largeur de l'icône selon vos besoins */
   height: auto; /* Maintient le rapport hauteur-largeur */
   position: absolute;
   top: -25px;
   transform: translateX(-50%);

}
 /* Pour les petits écrans, chaque icône prendra toute la largeur */
@media (max-width: 767px) {
   .curseur-tetine {
   width: 80px; /* Ajustez la largeur de l'icône selon vos besoins */
   top: -10px;
   }
   }



 .bullet-dot {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 8px;
  background-color: #666; /* couleur par défaut */
}

.bullet-orange {
  background-color: #F79927; /* orange */
}

.bullet-green {
  background-color: #d8dd8e; /* vert pâle comme demandé */
}

 

.result-profil-1 {
  background-color: #eaf3f0;
  color: #103754;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 1rem;
}

.result-profil-2 {
  background-color: #efedf2;
  color: #103754;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 1rem;
}


.result-profil-3 {
  background-color: #fef4ea;
  color: #103754;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 1rem;
}

/* Styles correction fond colore des resultats ajuste sur mobile */
@media (max-width: 767px) {
  .result-profil-1,
  .result-profil-2,
  .result-profil-3 {
    padding: 2.75rem; /* ou même 0.5rem */
  }
  .recap-saisie {
    padding: 6px;
    margin-bottom: 8px;
  }
}




/* Styles personnalisés pour la section exemples-cout-reel-assistante-maternelle */
#exemples-cout-reel-assistante-maternelle {
   background-color: #96D2CA;
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 20px;
   padding-bottom: 80px;
 }

 .exemple-container {
   display: flex;
   align-items: flex-start;
   justify-content: left; /* Centrer horizontalement */
   gap: 20px; /* Espacement entre le H1 et le bouton */
   flex-wrap: wrap; /* Permet le passage à la ligne sur mobile */
   text-align: center; /* Centrer le texte pour une bonne lisibilité */
   margin-bottom: 30px; /* Marge en bas du titre */
}


/* Styles pour la section comparer-creche-assistante-maternelle */
#calculs-automatiques-assistante-maternelle {
   background-color: #F8F9F6;
   padding-left: 10px;
   padding-right: 10px;
 }

.recap-saisie {
  margin-bottom: 6px;
  padding: 4px 8px;
  page-break-inside: avoid; /* pour éviter un saut de page dans le bloc */
}
.recap-saisie h3 {
  margin-bottom: 2px;
  font-size: 1.1rem;
}
.recap-saisie li {
  margin-bottom: 2px;
  font-size: 0.95rem;
}

.recap-saisie {
  page-break-inside: avoid;
  break-inside: avoid;
  display: block;
}


.anti-coupure {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: block;
}




/* Style pour les boutons de la simulation*/
.btn-simu {
   text-align: center;
   background-color: #103754; /* Couleur de fond */
   color: #F8F9F6; /* Couleur du texte */
   border-radius: 5px; /* Coins arrondis */
   border: none; /* Retirer la bordure par défaut */
   padding: 5px 10px; /* Espacement interne */
   font-size: 16px; /* Taille du texte */
   cursor: pointer; /* Changer le curseur au survol */
   transition: background-color 0.3s; /* Transition pour un effet au survol */
  
}

.btn-simu:hover {
   background-color: #041427; /* Couleur au survol */
   color: #F8F9F6; /* Couleur du texte */
}

@media (max-width: 576px) {
   .btn-simu-wrapper {
       flex-direction: column; /* Aligne les boutons verticalement */
       width: 100%; /* Assure que le conteneur occupe toute la largeur */
   }
   
   .btn-simu {
       width: 100%; /* Les boutons occupent toute la largeur du conteneur */
   }
}

/* Styles pour la section FAQ simulateur */

#faq-simulateur-section {
   background-color: #F8F9F6;
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 3rem; /* ou margin-bottom */
   padding-bottom: 3rem; /* ou margin-bottom */
 }
 
 
.accordion-body {
  background-color: #F8F9F6;
}

/* Couleur de fond du bouton accordéon fermé */
.accordion-button.collapsed {
  background-color: #F8F9F6;
  color: #103754; /* texte */
}

/* Couleur de fond du bouton accordéon ouvert */
.accordion-button:not(.collapsed) {
  background-color: #eaf3f0;
  color: #103754;
}

/* Focus */
.accordion-button:focus {
  background-color: #eaf3f0;
  outline: none;
  box-shadow: none;
}


/* Enlève les bordures */
.accordion-flush .accordion-item {
  border: none;
  
}


/* Styles pour la rubrique services-garde-enfants page index */


.simulateur-garde-enfants-text-space {
   background-color: #98D1CA;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-start; /* aligne tout à gauche */
   justify-content: center;
   padding: 20px;
   box-sizing: border-box;
   text-align: left; /* texte aligné à gauche */

}




.simulateur-garde-enfants-item {
   height: 100%; /* Assure que le contenu remplit toute la hauteur */
   margin: 0;
   padding: 0;
   position: relative;
}


.simulateur-garde-enfants-image {
   height: 100%; /* S'assure que l'image prend toute la hauteur disponible */
   padding: 0px; /* espace entre l'image */
   text-align: center;
   padding: 0;
}

/* Styles pour la page assistante maternelle bretigny sur orge */
 
#assmat-bretigny {
   background-color: #98D1CA;
   padding-left: 20px;
   padding-right: 20px;
   
    }

.assmat-container {
   display: flex;
   align-items: center; /* Aligner verticalement */
   justify-content: flex-start; /* Aligne horizontalement à gauche */
   gap: 20px; /* Espacement entre le H1 et le bouton */
   flex-wrap: wrap; /* Permet le passage à la ligne sur mobile */
   text-align: left; /* Centrer le texte pour une bonne lisibilité */
   margin-bottom: 30px; /* Marge en bas du titre */
}

#ecoles-rer-bretigny {
   background-color: #F8F9F6;
   padding-left: 10px;
   padding-right: 10px;
 }



/* Styles pour la section assmat-quartier-accueil */
 
#assmat-quartier-accueil {
   background-color: #98D1CA;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 3rem; /* ou margin-bottom */
   padding-bottom: 3rem; /* ou margin-bottom */
    }
    


 
#assmat-quartier-accueil .accordion-button.collapsed {
  background-color: #AEDBD5; /* couleur de fond quand bouton fermé, jaune pastel */
  color: #103754; /* couleur du texte */
}

#assmat-quartier-accueil .accordion-button:not(.collapsed) {
  background-color: #AEDBD5; /* couleur de fond quand bouton ouvert, jaune plus vif */
  color: #103754;
}

#assmat-quartier-accueil .accordion-button:focus {
  background-color: #AEDBD5;
  outline: none;
  box-shadow: none;
}


.accordion-quartier-accueil-body {
  background-color: #98D1CA;
  padding: 1rem;
}



 #sommaire-quartier {
   background-color: #AEDBD5;
   padding: 15px;
   border-radius: 8px;
   margin-bottom: 20px;
}

#sommaire-quartier a {
   display: block; /* Met chaque lien sur une nouvelle ligne */
   margin-bottom: 5px; /* Espacement entre les liens */
}