/* ======================
   RESET MINIMAL
   ====================== */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html, body {
    height: 100%;
    font-family: Arial, sans-serif;
    background: #fff;
    scroll-behavior: smooth;
  }
  
  a {
    text-decoration: none;
    color: inherit;
  }
  
  ul {
    list-style: none;
  }
  
  .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  
  /* ==============================
     CLASSES “PARALLAXE” (GÉNÉRAL)
     ============================== */
  .parallax {
    position: relative;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* ==============================
     SECTION D’ACCUEIL (HEADER)
     ============================== */
  .header-parallax {
    background-image: url("../img/fond_du_haut.jpg");
    /* On centre verticalement et horizontalement (par défaut), 
       mais dans votre dernier message vous vouliez aligner le haut,
       donc on indiquera plus bas “background-position: top center;” */
    background-position: top center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
  
    /* Texte en noir sur le haut de l’image */
    color: #000;
    text-shadow: none; /* plus besoin d’ombre si le texte est noir sur fond clair */
  }
  
 
  
  /* ==============================
     TEXTE CENTRÉ DANS LE HEADER
     ============================== */
  .overlay-content {
    background-color: transparent; /* plus de fond blanc */
    padding: 0;
    max-width: 800px;
    text-align: center;
  }
  
  .header-text h1 {
    font-size: 3.5rem;
    margin-bottom: 12px;
    color: #000;
  }
  
  .header-text p {
    font-size: 1.25rem;
    color: #000;
  }
  
  /* RÉACTIVITÉ HEADER */
  @media (max-width: 1024px) {
    .header-text h1 {
      font-size: 2.5rem;
    }
    .header-text p {
      font-size: 1rem;
    }
  }
  @media (max-width: 768px) {
    .nav-list {
      display: none; /* Masquer le menu principal sur mobile */
    }
    .overlay-content {
      padding: 16px 20px;
    }
  }
  
  
  /* =============================
     SECTION “PRÉSENTATION” (ORANGE)
     ============================= */
  .section-presentation {
    background-color: #d9741e; /* orange foncé */
    color: #000;                /* texte noir */
    padding: 80px 20px;
    position: relative;
  }
  
  .presentation-content {
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 120px;
  }
  
  .presentation-content h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 8px;
    font-weight: bold;
    color: #000;
  }
  
  .presentation-subtitle {
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 32px;
    opacity: 0.9;
    color: #000;
  }
  
  .presentation-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #000;
    text-align: left;
  }
  
  .presentation-text p {
    margin-bottom: 24px;
  }
  
  .section-presentation .section-scroll-top {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    z-index: 0;
  }
  
  .section-presentation .section-scroll-top span {
    font-size: 1.25rem;
    color: #333;
  }
  
  .section-presentation .section-scroll-top:hover {
    background-color: #fff;
    transform: translateY(-4px);
  }
  
  /* RÉACTIVITÉ “PRÉSENTATION” */
  @media (max-width: 1024px) {
    .presentation-content h2 {
      font-size: 2rem;
    }
    .presentation-subtitle {
      font-size: 1rem;
    }
    .presentation-text {
      font-size: 0.95rem;
    }
  }
  @media (max-width: 768px) {
    .section-presentation {
      padding: 60px 12px;
    }
    .presentation-content h2 {
      font-size: 1.8rem;
    }
    .presentation-subtitle {
      font-size: 0.9rem;
      margin-bottom: 24px;
    }
    .presentation-text {
      font-size: 0.9rem;
    }
    .section-presentation .section-scroll-top {
      bottom: 12px;
      right: 12px;
      width: 40px;
      height: 40px;
    }
    .section-presentation .section-scroll-top span {
      font-size: 1rem;
    }
  }
  
  
  /* ======================================
     SECTION “SES ESPACES” (PARALLAXE)
     ====================================== */
  .section-espaces {
    background-image: url("../img/fond_du_haut.jpg");
    /* Aligner le haut de l’image sur le haut du conteneur */
    background-position: top center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: auto; /* Taille native */
    padding-bottom: 120px;
  
    /* On veut que la section prenne la hauteur de l’image à 100% (pas de min-height 100vh) */
    height: auto;
  
    display: flex;
    align-items: flex-start;   /* Ancrer le texte en haut */
    justify-content: center;
    position: relative;
    padding-top: 120px;        /* Pour écarter le texte du bord supérieur */
  }
  
  .overlay-espaces {
    background-color: transparent;
    padding: 40px 24px;
    border-radius: 6px;
    max-width: 600px;
    text-align: center;
    padding-bottom: 200px;
  }
  
  /* ==============================
   AÉRER LE TEXTE DANS “SES ESPACES”
   ============================== */

/* On augmente la marge sous chaque paragraphe */
.text-espaces p {
  margin-bottom: 24px;  /* au lieu de 16px précédemment */
}

/* On espace également la liste */
.text-espaces ul {
  margin: 24px 0;       /* marges haut/bas de 24px */
  padding-left: 20px;   /* conserver l’indentation des puces */
}

/* On met un peu d’espace sous chaque élément de liste */
.text-espaces ul li {
  margin-bottom: 12px;  /* 12px entre chaque puce */
}

/* Pour que le titre et le sous‐titre soient également espacés */
.overlay-espaces h2 {
  margin-bottom: 16px; 
  font-size: 2.5em;
}

.subtitle-espaces {
  margin-bottom: 24px;  /* espace entre le sous‐titre et le paragraphe qui suit */
}
  
  .subtitle-espaces {
    font-size: 1.2rem;
    margin-bottom: 24px;
    opacity: 0.9;
    color: #000;
  }
  
  .text-espaces {
    font-size: 1rem;
    line-height: 1.6;
    color: #000;
    margin-top: 16px;
    text-align: left;
  }
  
  .section-espaces .section-scroll-top {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    z-index: 10;
  }
  
  .section-espaces .section-scroll-top span {
    font-size: 1.25rem;
    color: #333;
  }
  
  .section-espaces .section-scroll-top:hover {
    background-color: #fff;
    transform: translateY(-4px);
  }
  
  /* RÉACTIVITÉ “SES ESPACES” */
  @media (max-width: 768px) {
    .section-espaces {
      padding-top: 80px;
    }
    .overlay-espaces {
      max-width: 100%;
      padding: 24px 16px;
    }
    .section-espaces .section-scroll-top {
      bottom: 12px;
      right: 12px;
      width: 40px;
      height: 40px;
    }
    .section-espaces .section-scroll-top span {
      font-size: 1rem;
    }
  }
  
  
  /* ======================================
     SECTION “SON DISPOSITIF” (PARALLAXE)
     ====================================== */
  .section-dispositif {
    background-image: url("../img/dispositif.jpg");
    /* Vérifiez bien que “son-dispositif.jpg” est le bon fichier dans img/ */
    background-position: top center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: auto; /* Taille native de l’image */
    padding-bottom: 120px;
  
    /* On retire toute min-height : la section prendra la hauteur de l’image */
    height: auto;
  
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    padding-top: 120px;
  }
  
  .overlay-dispositif {
    background-color: transparent;
    padding: 40px 24px;
    border-radius: 6px;
    max-width: 600px;
    text-align: center;
    padding-bottom: 120px;
  }
  
  .overlay-dispositif h2 {
    font-size: 2.5rem;
    margin-bottom: 12px;
    font-weight: bold;
    color: #000;
  }
  
  .subtitle-dispositif {
    font-size: 1.2rem;
    margin-bottom: 24px;
    opacity: 0.9;
    color: #000;
  }
  
  .text-dispositif {
    font-size: 1rem;
    line-height: 1.6;
    color: #000;
    margin-top: 16px;
    text-align: left;
  }
  
  .text-dispositif p {
    margin-bottom: 16px;
  }
  
  .section-dispositif .section-scroll-top {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    z-index: 10;
  }
  
  .section-dispositif .section-scroll-top span {
    font-size: 1.25rem;
    color: #333;
  }
  
  .section-dispositif .section-scroll-top:hover {
    background-color: #fff;
    transform: translateY(-4px);
  }
  
  /* RÉACTIVITÉ “SON DISPOSITIF” */
  @media (max-width: 1024px) {
    .overlay-dispositif {
      max-width: 500px;
    }
    .overlay-dispositif h2 {
      font-size: 2rem;
    }
    .subtitle-dispositif {
      font-size: 1rem;
    }
    .text-dispositif {
      font-size: 0.95rem;
    }
  }
  @media (max-width: 768px) {
    .section-dispositif {
      padding-top: 80px;
    }
    .overlay-dispositif {
      max-width: 100%;
      padding: 24px 16px;
    }
    .section-dispositif .section-scroll-top {
      bottom: 12px;
      right: 12px;
      width: 40px;
      height: 40px;
    }
    .section-dispositif .section-scroll-top span {
      font-size: 1rem;
    }
  }
  
  /* ======================================
   SECTION “SES RÈGLES” (PARALLAXE SUR IMAGE “objectif.jpg”)
   ====================================== */
.section-regles {
  /* On inscrit ici l’image “objectif.jpg” en background */
  background-image: url(../img/objectif.jpg);
  /* On veut afficher la partie grise (haut de l’image), donc on aligne en haut */
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* Taille native de l’image (pas de cover) */
  background-size: auto;

  /* Comme pour les autres sections : on laisse la section prendre
     la hauteur naturelle de l’image. */
  height: auto;

  display: flex;
  align-items: flex-start;   /* Ancrer le texte en haut */
  justify-content: center;
  position: relative;

  /* On met un padding-top pour que le texte ne colle pas au bord du haut */
  padding-top: 120px;
  /* On peut si besoin ajouter un padding-bottom pour espacer le bas */
  padding-bottom: 120px;
}

/* Boîte transparente contenant le titre + textes */
.overlay-regles {
  background-color: transparent; /* Pas de fond blanc */
  padding: 40px 24px;
  border-radius: 6px;
  max-width: 600px;     /* Même largeur qu’ailleurs */
  text-align: center;
}

/* Titre */
.overlay-regles h2 {
  font-size: 2.5rem;
  margin-bottom: 12px;
  font-weight: bold;
  color: #000;          /* Texte en noir sur la partie grise */
}

/* Sous-titre */
.subtitle-regles {
  font-size: 1.2rem;
  margin-bottom: 56px;
  opacity: 0.9;
  color: #000;
}

/* Paragraphe / liste */
.text-regles {
  font-size: 1rem;
  line-height: 1.6;
  color: #000;
  margin-top: 16px;
  text-align: left;
}

.text-regles p {
  margin-bottom: 16px;
}

/* Bouton “scroll to top” */
.section-regles .section-scroll-top {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  z-index: 10;
}

.section-regles .section-scroll-top span {
  font-size: 1.25rem;
  color: #333;
}

.section-regles .section-scroll-top:hover {
  background-color: #fff;
  transform: translateY(-4px);
}

/* RÉACTIVITÉ “SES RÈGLES” */
@media (max-width: 1024px) {
  .overlay-regles {
    max-width: 500px;
  }
  .overlay-regles h2 {
    font-size: 2rem;
  }
  .subtitle-regles {
    font-size: 1rem;
  }
  .text-regles {
    font-size: 0.95rem;
  }
}
@media (max-width: 768px) {
  .overlay-regles {
    max-width: 100%;
    padding: 24px 16px;
  }
  .section-regles {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .section-regles .section-scroll-top {
    bottom: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
  }
  .section-regles .section-scroll-top span {
    font-size: 1rem;
  }
}
/* ================================================
   SECTION “SON OBJECTIF” (PARALLAXE SUR OBJECTIF.JPG)
   ================================================ */
   .section-objectif {
    /* On indique ici le chemin vers l’image “objectif.jpg” */
    background-image: url("../img/savie.jpg");
    /* Aligner le haut de l’image sur le haut de la section */
    background-position: top center;
    background-repeat: no-repeat;
    /* Comportement “fixe” (parallaxe)background-attachment: fixed; */
    
    /* Conserver la taille native de l’image */
    background-size: auto;
  
    /* Pas de min-height à 100vh : la section s’ajuste à la hauteur de l’image */
    height: auto;
  
    display: flex;
    align-items: flex-start;   /* Ancrer le contenu en haut */
    justify-content: center;   /* Centrer horizontalement */
    position: relative;
    padding-top: 120px;
    padding-bottom: 120px;
  }
  
  /* Boîte transparente contenant titre + sous-titre + texte */
  .overlay-objectif {
    background-color: transparent; /* Pas de fond blanc */
    padding: 40px 24px;
    border-radius: 6px;
    max-width: 600px;     /* Même largeur que pour les autres “cartes” */
    text-align: center;
  }
  
  /* — Titre — */
  .overlay-objectif h2 {
    font-size: 2.5rem;
    margin-bottom: 12px;
    font-weight: bold;
    color: #000;        /* Texte en noir sur la partie colorée */
  }
  
  /* — Sous‐titre — */
  .subtitle-objectif {
    font-size: 1.2rem;
    margin-bottom: 24px;
    opacity: 0.9;
    color: #000;
  }
  
  /* — Texte (paragraphes) — */
  .text-objectif {
    font-size: 1rem;
    line-height: 1.6;
    color: #000;
    margin-top: 16px;
    text-align: left;
  }
  .text-objectif p {
    margin-bottom: 16px;
  }
  
  /* — Bouton “scroll to top” — */
  .section-objectif .section-scroll-top {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    z-index: 10;
  }
  .section-objectif .section-scroll-top span {
    font-size: 1.25rem;
    color: #333;
  }
  .section-objectif .section-scroll-top:hover {
    background-color: #fff;
    transform: translateY(-4px);
  }
  
  /* — Réactivité (responsive) — */
  @media (max-width: 1024px) {
    .overlay-objectif {
      max-width: 500px;
    }
    .overlay-objectif h2 {
      font-size: 2rem;
    }
    .subtitle-objectif {
      font-size: 1rem;
    }
    .text-objectif {
      font-size: 0.95rem;
    }
  }
  
  @media (max-width: 768px) {
    .section-objectif {
      padding-top: 80px;
      padding-bottom: 80px;
    }
    .overlay-objectif {
      max-width: 100%;
      padding: 24px 16px;
    }
    .section-objectif .section-scroll-top {
      bottom: 12px;
      right: 12px;
      width: 40px;
      height: 40px;
    }
    .section-objectif .section-scroll-top span {
      font-size: 1rem;
    }
  }
  /* ======================================
   SECTION “SA VIE” (PARALLAXE SUR SAVIE.JPG)
   ====================================== */
.section-vie {
  /* Chemin vers l’image “savie.jpg” :
     adapte le chemin si nécessaire (ici on part du principe que
     le CSS se trouve dans css/parallax.css et l’image dans img/savie.jpg) */
  background-color:#64829E ;
  background-position: top center;  /* Affiche le haut de l’image en premier */
  background-repeat: no-repeat;
  background-attachment: fixed;     /* Effet parallaxe */
  background-size: auto;            /* Taille native, pas de “cover” */

  /* On laisse la hauteur s’adapter automatiquement à l’image */
  height: auto;

  display: flex;
  align-items: flex-start;   /* Ancrer le texte en haut de la section */
  justify-content: center;   /* Centrer horizontalement */
  position: relative;
  padding-top: 120px;        /* Espace pour ne pas coller le texte au bord */
  padding-bottom: 120px;     /* Espace en bas (pour respirer) */
}

/* Boîte transparente qui contient le titre, sous-titre et textes */
.overlay-vie {
  background-color: transparent;  /* Pas de fond blanc */
  padding: 40px 24px;
  border-radius: 6px;
  max-width: 600px;               /* Même largeur que les autres “cartes” */
  text-align: center;
}

/* — Titre “Sa vie” — */
.overlay-vie h2 {
  font-size: 2.5rem;
  margin-bottom: 12px;
  font-weight: bold;
  color: #000;                    /* Texte en noir */
}

/* — Sous-titre — */
.subtitle-vie {
  font-size: 1.2rem;
  margin-bottom: 24px;
  opacity: 0.9;
  color: #000;
}

/* — Texte (paragraphes) — */
.text-vie {
  font-size: 1rem;
  line-height: 1.6;
  color: #000;
  margin-top: 16px;
  text-align: left;
}
.text-vie p {
  margin-bottom: 16px;
}

/* — Bouton “scroll to top” pour “Sa vie” — */
.section-vie .section-scroll-top {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  z-index: 10;
}
.section-vie .section-scroll-top span {
  font-size: 1.25rem;
  color: #333;
}
.section-vie .section-scroll-top:hover {
  background-color: #fff;
  transform: translateY(-4px);
}

/* — Responsive pour “Sa vie” — */
@media (max-width: 1024px) {
  .overlay-vie {
    max-width: 500px;
  }
  .overlay-vie h2 {
    font-size: 2rem;
  }
  .subtitle-vie {
    font-size: 1rem;
  }
  .text-vie {
    font-size: 0.95rem;
  }
}
@media (max-width: 768px) {
  .section-vie {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .overlay-vie {
    max-width: 100%;
    padding: 24px 16px;
  }
  .section-vie .section-scroll-top {
    bottom: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
  }
  .section-vie .section-scroll-top span {
    font-size: 1rem;
  }
}
/* ======================================
   SECTION “TÉMOIGNAGES” (IMAGE TOTALE EN HAUT)
   ====================================== */
   .section-temoignages {
    /* Chemin vers votre image (taille native),
       par exemple img/fond-1-sesregles.jpg */
    background-image: url("../img/ses-regles.jpg");
  
    /* Afficher l’image depuis son haut, taille native */
    background-position: top center;
    background-repeat: no-repeat;
    background-size: auto;
  
    /* Si vous ne voulez PAS l’effet parallaxe fixe,
       on commente (ou supprime) la ligne ci-dessous */
    /* background-attachment: fixed; */
  
    /* Couleur du texte (pour contraste sur ce BG) */
    color: #000;
  
    /* Espace interne : suffisamment de padding top
       pour qu’on voie l’image entière (hauteur native) */
    padding: 180px 20px;
  }
  
  .temoignages-content {
    max-width: 450px;     /* même largeur que les autres cartes */
    margin: 0 auto;       /* centrer horizontalement */
    text-align: center;   /* centrer le titre et la citation */
  }
  
  /* — Titre “Témoignages” — */
  .section-temoignages h2 {
    font-size: 2.5rem;
    margin-bottom: 12px;
    font-weight: bold;
    color: #000;
  }
  
  /* — Sous-titre (citation) — */
  .subtitle-temoignages {
    font-size: 1.2rem;
    margin-bottom: 32px;
    opacity: 0.9;
    color: #000;
    line-height: 1.4;
  }
  
  /* — Carte blanche contenant le témoignage — */
  .carte-temoignage {
    background-color: #fff;
    padding: 24px 32px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: left;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    text-align: center;
  }
  .petit{
    font-size: 12px;
  }
  
  /* — Responsive pour “Témoignages” — */
  @media (max-width: 1024px) {
    .section-temoignages h2 {
      font-size: 2rem;
    }
    .subtitle-temoignages {
      font-size: 1rem;
    }
    .carte-temoignage {
      padding: 20px;
      font-size: 0.95rem;
    }
  }
  @media (max-width: 768px) {
    .section-temoignages {
      padding: 140px 12px; /* on réduit un peu le padding top/bottom */
    }
    .carte-temoignage {
      padding: 16px;
    }
  }
  



  /* ======================================
   SECTION “L’ASSOCIATION” (PARALLAXE)
   ====================================== */
.section-association {
  background-image: url("../img/Creation.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: auto;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* — Boîte transparente contenant le titre + sous‐titre — */
.overlay-association {
  background-color: transparent; /* pas de fond blanc */
  padding: 10px 24px;
  border-radius: 6px;
  max-width: 600px;      /* même max‐width que vos autres cartes */
  text-align: center;
}

/* — Titre de la section — */
.overlay-association h1 {
  font-size: 5.5rem;
  margin-bottom: 12px;
  font-weight: bold;
  color: #000;           /* texte noir pour contraster sur le bleu-gris */
}

/* — Sous-titre de la section — */
.subtitle-association {
  font-size: 2.2rem;
  margin-bottom: 20px;
  opacity: 0.9;
  color: #000;
}

/* — Responsive “L’ASSOCIATION” — */
@media (max-width: 1024px) {
  .overlay-association h2 {
    font-size: 2rem;
  }
  .subtitle-association {
    font-size: 1rem;
  }
}
@media (max-width: 768px) {
  .section-association {
    min-height: 70vh; /* ou “80vh” si vous préférez moins de hauteur fixe */
  }
  .overlay-association {
    max-width: 100%;
    padding: 24px 16px;
  }
}
/* ======================================
   SECTION “HISTORIQUE” (AVEC IMAGE “historique.jpg”)
   ====================================== */
   .section-historique {
    /* 1) Image de fond (rouge + petite fille), à placer dans img/historique.jpg */
    background-image: url("../img/historique.jpg");
    /* 2) On veut afficher d’abord la partie rouge (haut de l’image) */
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* 3) Pour qu’elle couvre l’écran en conservant son ratio */
    background-size: cover;
    /* 4) On force la section à prendre 100 vh */
    min-height: 100vh;
  
    display: flex;
    align-items: flex-start;   /* texte ancré en haut */
    justify-content: center;
    position: relative;
  
    /* 5) Décalage du texte depuis le haut (pour ne pas être collé au bord) */
    padding-top: 120px;
    padding-bottom: 120px;
  }
  
  .overlay-historique {
    background-color: transparent;
    padding: 40px 24px;
    border-radius: 6px;
    max-width: 600px;
    text-align: center;
  }
  
  .overlay-historique h2 {
    font-size: 2.5rem;
    margin-bottom: 12px;
    font-weight: bold;
    color: #000;
  }
  
  .subtitle-historique {
    font-size: 1.2rem;
    margin-bottom: 24px;
    opacity: 0.9;
    color: #000;
  }
  
  .text-historique {
    font-size: 1rem;
    line-height: 1.6;
    color: #000;
    margin-top: 16px;
    text-align: left;
  }
  
  .text-historique p {
    margin-bottom: 16px;
  }
  
  /* Bouton “scroll to top” — même style que vos autres sections */
  .section-historique .section-scroll-top {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    z-index: 10;
  }
  
  .section-historique .section-scroll-top span {
    font-size: 1.25rem;
    color: #333;
  }
  
  .section-historique .section-scroll-top:hover {
    background-color: #fff;
    transform: translateY(-4px);
  }
  
  /* Responsive “HISTORIQUE” */
  @media (max-width: 1024px) {
    .overlay-historique {
      max-width: 500px;
    }
    .overlay-historique h2 {
      font-size: 2rem;
    }
    .subtitle-historique {
      font-size: 1rem;
    }
    .text-historique {
      font-size: 0.95rem;
    }
  }
  @media (max-width: 768px) {
    .section-historique {
      min-height: 70vh;  /* Réduit la hauteur pour éviter trop d’espace vide sur mobile */
      padding-top: 80px;
      padding-bottom: 80px;
    }
    .overlay-historique {
      max-width: 100%;
      padding: 24px 16px;
    }
    .section-historique .section-scroll-top {
      bottom: 12px;
      right: 12px;
      width: 40px;
      height: 40px;
    }
    .section-historique .section-scroll-top span {
      font-size: 1rem;
    }
  }
  
  
  
  /* ======================================
     SECTION “HISTORIQUE – SUITE” (AVEC IMAGE “objectif.jpg”)
     ====================================== */
  .section-historique-suite {
    /* 1) Image de fond (bleu + train), à placer dans img/objectif.jpg */
    background-image: url("../img/historique.jpg");
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: auto;
    min-height: 100vh;
  
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    padding-top: 120px;
    padding-bottom: 120px;
  }
  
  .overlay-historique-suite {
    background-color: transparent;
    padding: 40px 24px;
    border-radius: 6px;
    max-width: 600px;
    text-align: center;
  }
  
  .overlay-historique-suite h2 {
    font-size: 2.5rem;
    margin-bottom: 12px;
    font-weight: bold;
    color: #000;
  }
  
  .subtitle-historique-suite {
    font-size: 1.2rem;
    margin-bottom: 24px;
    opacity: 0.9;
    color: #000;
  }
  
  .text-historique-suite {
    font-size: 1rem;
    line-height: 1.6;
    color: #000;
    margin-top: 16px;
    text-align: left;
  }
  
  .text-historique-suite p {
    margin-bottom: 16px;
  }
  
  .section-historique-suite .section-scroll-top {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    z-index: 10;
  }
  
  .section-historique-suite .section-scroll-top span {
    font-size: 1.25rem;
    color: #333;
  }
  
  .section-historique-suite .section-scroll-top:hover {
    background-color: #fff;
    transform: translateY(-4px);
  }
  
  /* Responsive “HISTORIQUE – SUITE” */
  @media (max-width: 1024px) {
    .overlay-historique-suite {
      max-width: 500px;
    }
    .overlay-historique-suite h2 {
      font-size: 2rem;
    }
    .subtitle-historique-suite {
      font-size: 1rem;
    }
    .text-historique-suite {
      font-size: 0.95rem;
    }
  }
  @media (max-width: 768px) {
    .section-historique-suite {
      min-height: 70vh;
      padding-top: 80px;
      padding-bottom: 80px;
    }
    .overlay-historique-suite {
      max-width: 100%;
      padding: 24px 16px;
    }
    .section-historique-suite .section-scroll-top {
      bottom: 12px;
      right: 12px;
      width: 40px;
      height: 40px;
    }
    .section-historique-suite .section-scroll-top span {
      font-size: 1rem;
    }
  }
  
/* ==============================
   SECTION “HISTORIQUE”
   ============================== */
   .section-historique {
    /* ... vos autres règles ... */
  
    /* On augmente le padding-bottom pour laisser plus d’espace sous les boutons */
    padding-bottom: 140px; /* <-- passez de 60px à 140px (ou à la valeur qui vous convient) */
  
    position: relative; /* pour que .button-group s’appuie bien sur cette section */
  }
  
  /* ==============================
     BOUTONS “SES STATUTS” / “SON RAPPORT D’ACTIVITÉ”
     ============================== */
  .button-group {
    position: absolute;
    bottom: 24px;            /* on décale légèrement vers le haut si on augmente le padding-bottom */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 24px;
  }
  
  /* Si vous désirez un peu moins d’espace sur mobile, on ajuste aussi ici */
  @media (max-width: 768px) {
    .button-group {
      flex-direction: column;
      gap: 16px;
      bottom: 16px;         /* on réduit légèrement le bottom sur mobile */
    }
  
    .btn-outline {
      width: 100%;
      max-width: 400px;
      text-align: center;
      padding: 12px 0;
    }
  }

/* ==============================
   RÉACTIVITÉ pour SMALLER SCREENS
   ============================== */
@media (max-width: 768px) {
  .button-group {
    flex-direction: column;
    gap: 16px;
    bottom: 24px;           /* un peu moins d’espace sur mobile */
  }

  .btn-outline {
    width: 100%;            /* pleine largeur (ou presque) */
    max-width: 400px;       /* pour éviter que ça soit trop large */
    text-align: center;
    padding: 12px 0;
  }
}
/* ======================================
   SECTION “SON BUT” (PARALLAXE SUR “fond-1-dispositif.jpg”)
   ====================================== */
   .section-but {
    /* 1) Image de fond : on reprend “fond-1-dispositif.jpg” */
    background-image: url("../img/fond-1-dispositif.jpg");
    /* 2) On veut afficher d’abord la partie du haut de l’image */
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* 3) Pour que l’image couvre toujours l’écran 
          en conservant son ratio (comme “historique”) */
    background-size: cover;
    /* 4) Forcer la section à prendre au minimum 100 vh */
    min-height: 100vh;
  
    display: flex;
    align-items: flex-start;   /* ancre le texte en haut */
    justify-content: center;
    position: relative;
  
    /* 5) Décalage du texte depuis le haut pour ne pas être collé */
    padding-top: 120px;
    padding-bottom: 120px;
  }
  
  /* — Boîte transparente (overlay) contenant le titre + le texte — */
  .overlay-but {
    background-color: transparent; /* on veut le texte directement sur l’image */
    padding: 40px 24px;
    border-radius: 6px;
    max-width: 600px; /* même largeur que les autres cartes */
    text-align: center;
  }
  
  /* — Titre de la section — */
  .overlay-but h2 {
    font-size: 2.5rem;
    margin-bottom: 12px;
    font-weight: bold;
    color: #000; /* texte noir (lisibilité sur le fond coloré) */
  }
  
  /* — Sous-titre (phrase d’accroche) — */
  .subtitle-but {
    font-size: 1.2rem;
    margin-bottom: 24px;
    opacity: 0.9;
    color: #000;
  }
  
  /* — Contenu texte / liste — */
  .text-but {
    font-size: 1rem;
    line-height: 1.6;
    color: #000;
    margin-top: 16px;
    text-align: left;
  }
  
  /* — Espacer un peu chaque <li> — */
  .text-but ol {
    margin: 0;      /* on part de zéro pour contrôler proprement */
    padding-left: 20px; /* indentation standard pour une liste numérotée */
  }
  .text-but li {
    margin-bottom: 12px;
  }
  
  /* — Bouton “scroll to top” pour cette section (facultatif) — */
  .section-but .section-scroll-top {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    z-index: 10;
  }
  .section-but .section-scroll-top span {
    font-size: 1.25rem;
    color: #333;
  }
  .section-but .section-scroll-top:hover {
    background-color: #fff;
    transform: translateY(-4px);
  }
  
  /* ==============================
     RÉACTIVITÉ (responsive) 
     pour la section “Son but”
     ============================== */
  @media (max-width: 1024px) {
    .overlay-but {
      max-width: 500px;
    }
    .overlay-but h2 {
      font-size: 2rem;
    }
    .subtitle-but {
      font-size: 1rem;
    }
    .text-but {
      font-size: 0.95rem;
    }
  }
  @media (max-width: 768px) {
    .section-but {
      min-height: 70vh;   /* pour éviter de trop grandes zones vides sur mobile */
      padding-top: 80px;
      padding-bottom: 80px;
    }
    .overlay-but {
      max-width: 100%;
      padding: 24px 16px;
    }
    .section-but .section-scroll-top {
      bottom: 12px;
      right: 12px;
      width: 40px;
      height: 40px;
    }
    .section-but .section-scroll-top span {
      font-size: 1rem;
    }
  }
  /* ======================================
   SECTION “SA CONCEPTION” (PARALLAXE)
   — Utilise l’image “sa-conception.jpg” dans img/
   ====================================== */
.section-conception {
  /* Fond de carte (jaune clair – de type “petite enfance”) */
  background-image: url("../img/sa-conception.jpg");
  /* Afficher d’abord la partie du haut de l’image */
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* L’image couvre tout l’écran (cover) pour conserver le ratio */
  background-size: cover;
  /* Forcer à 100 vh (hauteur minimale égale à la hauteur de la fenêtre) */
  min-height: 100vh;

  display: flex;
  align-items: flex-start;   /* on ancre le texte en haut */
  justify-content: center;
  position: relative;

  /* Marges internes pour ne pas coller le texte au bord */
  padding-top: 120px;
  padding-bottom: 120px;
}

/* — Boîte transparente autour du contenu — */
.overlay-conception {
  background-color: transparent;
  padding: 40px 24px;
  border-radius: 6px;
  max-width: 600px;  /* même largeur que les autres cartes */
  text-align: center;
}

/* — Styles du titre — */
.overlay-conception h2 {
  font-size: 2.5rem;
  margin-bottom: 12px;
  font-weight: bold;
  color: #000;       /* texte en noir pour contraster sur le jaune */
}

/* — Styles du sous-titre (citation) — */
.subtitle-conception {
  font-size: 1.2rem;
  margin-bottom: 24px;
  opacity: 0.9;
  color: #000;
}
/* Si vous voulez distinguer l’auteur, utilisez ceci : */
.citation-author {
  display: block;
  margin-top: 8px;
  font-size: 1rem;
  font-style: italic;
  color: #333;
}

/* — Styles du paragraphe (contenu) — */
.text-conception {
  font-size: 1rem;
  line-height: 1.6;
  color: #000;
  margin-top: 16px;
  text-align: left;
}
.text-conception p {
  margin-bottom: 16px;
}

/* — Bouton “scroll to top” — */
.section-conception .section-scroll-top {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  z-index: 10;
}
.section-conception .section-scroll-top span {
  font-size: 1.25rem;
  color: #333;
}
.section-conception .section-scroll-top:hover {
  background-color: #fff;
  transform: translateY(-4px);
}

/* — Responsive (tablettes & mobiles) pour “Sa conception” — */
@media (max-width: 1024px) {
  .overlay-conception {
    max-width: 500px;
  }
  .overlay-conception h2 {
    font-size: 2rem;
  }
  .subtitle-conception {
    font-size: 1rem;
  }
  .text-conception {
    font-size: 0.95rem;
  }
}
@media (max-width: 768px) {
  .section-conception {
    min-height: 70vh; /* on réduit la hauteur pour éviter trop d’espace vide sur mobile */
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .overlay-conception {
    max-width: 100%;
    padding: 24px 16px;
  }
  .section-conception .section-scroll-top {
    bottom: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
  }
  .section-conception .section-scroll-top span {
    font-size: 1rem;
  }
}


/* ======================================
   SECTION “QUI” (PARALLAXE)
   — Utilise l’image “qui.jpg” dans img/
   ====================================== */
.section-qui {
  /* Fond de carte (marron clair + voiture) */
  background-image: url("../img/qui.jpg");
  /* On affiche d’abord la partie haute de l’image (marron) */
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* L’image cover pour conserver le ratio et garder un affichage plein écran */
  background-size: auto;
  /* Hauteur minimale = 100 vh */
  min-height: 100vh;

  display: flex;
  align-items: flex-start;   /* ancrer le texte en haut */
  justify-content: center;
  position: relative;

  padding-top: 120px;
  padding-bottom: 120px;
}

/* — Boîte transparente autour du contenu — */
.overlay-qui {
  background-color: transparent;
  padding: 40px 24px;
  border-radius: 6px;
  max-width: 600px;  /* même largeur que les autres cartes */
  text-align: center;
}

/* — Styles du titre — */
.overlay-qui h2 {
  font-size: 2.5rem;
  margin-bottom: 12px;
  font-weight: bold;
  color: #000;       /* texte noir pour contraster sur le marron clair */
}
.overlay-qui p{
  text-align: justify;
}

/* — Styles du sous-titre — */
.subtitle-qui {
  font-size: 1.2rem;
  margin-bottom: 24px;
  opacity: 0.9;
  color: #000;
}

/* — Styles du paragraphe (contenu) — */
.text-qui {
  font-size: 1rem;
  line-height: 1.6;
  color: #000;
  margin-top: 16px;
  text-align: left;
}
.text-qui p {
  margin-bottom: 16px;
}

/* — Bouton “scroll to top” — */
.section-qui .section-scroll-top {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  z-index: 10;
}
.section-qui .section-scroll-top span {
  font-size: 1.25rem;
  color: #333;
}
.section-qui .section-scroll-top:hover {
  background-color: #fff;
  transform: translateY(-4px);
}

/* — Responsive (tablettes & mobiles) pour “Qui” — */
@media (max-width: 1024px) {
  .overlay-qui {
    max-width: 500px;
  }
  .overlay-qui h2 {
    font-size: 2rem;
  }
  .subtitle-qui {
    font-size: 1rem;
  }
  .text-qui {
    font-size: 0.95rem;
  }
}
@media (max-width: 768px) {
  .section-qui {
    min-height: 70vh; /* on réduit la hauteur pour éviter trop d’espace vide sur mobile */
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .overlay-qui {
    max-width: 100%;
    padding: 24px 16px;
  }
  .section-qui .section-scroll-top {
    bottom: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
  }
  .section-qui .section-scroll-top span {
    font-size: 1rem;
  }
}

/* ======================================
   SECTION “SON COMITÉ” (PARALLAXE)
   — Utilise l’image “comite.jpg” dans img/
   ====================================== */
   .section-comite {
    /* 1) Image de fond (jaune + marron – “comite.jpg”) */
    background-image: url("../img/presse.jpg");
    /* 2) On affiche d’abord la partie supérieure de l’image */
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* 3) L’image couvre tout l’écran en conservant son ratio */
    background-size: cover;
    /* 4) On force la section à prendre la hauteur de la fenêtre */
    min-height: 100vh;
  
    display: flex;
    align-items: flex-start;   /* Texte ancré en haut */
    justify-content: center;
    position: relative;
  
    /* 5) Décalage du texte depuis le haut et du bas pour éviter qu’il colle aux bords */
    padding-top: 120px;
    padding-bottom: 120px;
  }
  
  /* — Boîte transparente contenant le titre + liste du comité — */
  .overlay-comite {
    background-color: transparent;
    padding: 40px 24px;
    border-radius: 6px;
    max-width: 600px;   /* mêmes dimensions que les autres cartes */
    text-align: left;
  }
  
  /* — Styles du titre — */
  .overlay-comite h2 {
    font-size: 2.5rem;
    margin-bottom: 16px;
    font-weight: bold;
    color: #000;        /* Texte en noir pour contraster sur le fond */
    text-align: center; /* Centrer le titre */
  }
  
  /* — Styles de la liste du comité — */
  .text-comite {
    margin-top: 24px;
  }
  .text-comite p {
    margin-bottom: 24px;       /* espace entre chaque membre */
    font-size: 1rem;
    line-height: 1.6;
    color: #000;
  }
  /* Le <strong> à l’intérieur de chaque <p> sera déjà en gras */
  
   /* — Bouton “scroll to top” — */
  .section-comite .section-scroll-top {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    z-index: 10;
  }
  .section-comite .section-scroll-top span {
    font-size: 1.25rem;
    color: #333;
  }
  .section-comite .section-scroll-top:hover {
    background-color: #fff;
    transform: translateY(-4px);
  }
  
  /* — Responsive (tablette & mobile) pour “Son comité” — */
  @media (max-width: 1024px) {
    .overlay-comite {
      max-width: 500px;
    }
    .overlay-comite h2 {
      font-size: 2rem;
    }
    .text-comite {
      font-size: 0.95rem;
    }
    .text-comite p {
      margin-bottom: 20px;
    }
  }
  @media (max-width: 768px) {
    .section-comite {
      min-height: 70vh;   /* pour éviter un trop grand espace vide sur petit écran */
      padding-top: 80px;
      padding-bottom: 80px;
    }
    .overlay-comite {
      max-width: 100%;
      padding: 24px 16px;
    }
    .section-comite .section-scroll-top {
      bottom: 12px;
      right: 12px;
      width: 40px;
      height: 40px;
    }
    .section-comite .section-scroll-top span {
      font-size: 1rem;
    }
  }
  /* ======================================
   SECTION “HEADER GALERIE” (PARALLAXE)
   ====================================== */
.header-galerie {
  /* 1) Image de fond pour “Galerie” */
  background-image: url("../img/image-haut.jpg");

  /* 2) On veut afficher le haut de l’image en priorité */
  background-position: top center;

  /* 3) Comportement fixe “parallaxe” */
  background-attachment: fixed;
  background-repeat: no-repeat;

  /* 4) On fait couvrir tout l’écran en conservant le ratio */
  background-size: cover;

  /* 5) La hauteur est de 100% de la fenêtre (vh) */
  min-height: 100vh;

  /* 6) Texte/éléments centrés en flex par la classe .parallax existante */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  /* (optionnel) s’il vous faut décaler l’overlay un peu vers le bas : */
  /* padding-top: 80px; */
}

/* ======================
   Vars Responsive pour HEADER GALERIE
   ====================== */
@media (max-width: 1024px) {
  .header-galerie .header-text h1 {
    font-size: 2.5rem;
  }
  .header-galerie .header-text p {
    font-size: 1rem;
  }
}
@media (max-width: 768px) {
  .header-galerie .header-text {
    padding: 16px 20px;
  }
  .header-galerie .header-text h1 {
    font-size: 2rem;
  }
  .header-galerie .header-text p {
    font-size: 0.9rem;
  }
}
/* ======================================
   SECTION “GALERIE” (fond violet uni)
   ====================================== */
   .section-galerie {
    background-color: #6f2e8b;  /* violet (à adapter si nécessaire) */
    color: #fff;                /* texte blanc (mais notre titre sera stylé au-dessus) */
    padding: 80px 20px;         /* espace vertical + horizontal */
    position: relative;
  }
  
  .overlay-galerie {
    max-width: 1000px;      /* ou la largeur souhaitée */
    margin: 0 auto;         /* centré horizontalement */
    text-align: center;
  }
  
  .overlay-galerie h2 {
    font-size: 2.5rem;
    margin-bottom: 32px;
    font-weight: 600;
    color: #fff;            /* titre en blanc */
  }
  
  /* ======================
     GRILLE D’IMAGES
     ====================== */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
  }
  
  .gallery-grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
    cursor: pointer;
    border-radius: 4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .gallery-grid img:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  
  /* ======================================
     LIGHTBOX (superposition plein écran)
     ====================================== */
  #lightbox-overlay {
    display: none;             /* caché par défaut */
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    align-items: center;       /* alignement vertical */
    justify-content: center;   /* alignement horizontal */
    z-index: 2000;             /* au-dessus de tout */
  }
  
  #lightbox-img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 4px;
  }
  
  #lightbox-close {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    transition: color 0.2s ease;
  }
  
  #lightbox-close:hover {
    color: #ddd;
  }
  
  /* ======================
     RÉACTIVITÉ
     ====================== */
  @media (max-width: 1024px) {
    .overlay-galerie h2 {
      font-size: 2rem;
    }
    .gallery-grid {
      gap: 8px;
    }
  }
  
  @media (max-width: 768px) {
    .overlay-galerie h2 {
      font-size: 1.8rem;
      margin-bottom: 24px;
    }
    .section-galerie {
      padding: 60px 12px;
    }
    .gallery-grid {
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 6px;
    }
    #lightbox-close {
      top: 16px;
      right: 16px;
      font-size: 1.5rem;
    }
  }
/* ======================================
   SECTION “GALERIE” (fond violet uni)
   ====================================== */
.section-galerie {
  background-color: #6f2e8b;  /* violet (à adapter si nécessaire) */
  color: #fff;                /* texte blanc (mais notre titre sera stylé au-dessus) */
  padding: 80px 20px;         /* espace vertical + horizontal */
  position: relative;
}

.overlay-galerie {
  max-width: 1000px;      /* ou la largeur souhaitée */
  margin: 0 auto;         /* centré horizontalement */
  text-align: center;
}

.overlay-galerie h2 {
  font-size: 2.5rem;
  margin-bottom: 32px;
  font-weight: 600;
  color: #fff;            /* titre en blanc */
}
/* ================================
   Seconde galerie (id="galerie2")
   – fond violet, texte noir
   ================================ */
   #galerie2.section-galerie {
    background-color: #6b3382;  /* votre violet de base */
    color: #000;                /* texte en noir */
  }
  
  /* pour s’assurer que tout le texte (titres, sous‐titres…) hérite bien de la couleur */
  #galerie2.section-galerie .overlay-galerie {
    color: #000;
  }

/* ======================
   GRILLE D’IMAGES
   ====================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.gallery-grid img {
  width: 100%;
  height: auto;
  object-fit: cover;
  cursor: pointer;
  border-radius: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-grid img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ======================================
   LIGHTBOX (superposition plein écran)
   ====================================== */
#lightbox-overlay {
  display: none;             /* caché par défaut */
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  align-items: center;       /* alignement vertical */
  justify-content: center;   /* alignement horizontal */
  z-index: 2000;             /* au-dessus de tout */
}

#lightbox-img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 4px;
}

#lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  transition: color 0.2s ease;
}

#lightbox-close:hover {
  color: #ddd;
}

/* ======================
   RÉACTIVITÉ
   ====================== */
@media (max-width: 1024px) {
  .overlay-galerie h2 {
    font-size: 2rem;
  }
  .gallery-grid {
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .overlay-galerie h2 {
    font-size: 1.8rem;
    margin-bottom: 24px;
  }
  .section-galerie {
    padding: 60px 12px;
  }
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
  }
  #lightbox-close {
    top: 16px;
    right: 16px;
    font-size: 1.5rem;
  }
}
/* ======================================
   SECTION “GALERIE” (fond violet uni)
   ====================================== */
.section-galerie {
  background-color: #f9f29b;  /* violet (à adapter si nécessaire) */
  color: #fff;                /* texte blanc (mais notre titre sera stylé au-dessus) */
  padding: 80px 20px;         /* espace vertical + horizontal */
  position: relative;
}

.overlay-galerie {
  max-width: 1000px;      /* ou la largeur souhaitée */
  margin: 0 auto;         /* centré horizontalement */
  text-align: center;
}

.overlay-galerie h2 {
  font-size: 2.5rem;
  margin-bottom: 32px;
  font-weight: 600;
  color: #020202;            /* titre en blanc */
}

/* ======================
   GRILLE D’IMAGES
   ====================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.gallery-grid img {
  width: 100%;
  height: auto;
  object-fit: cover;
  cursor: pointer;
  border-radius: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-grid img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ======================================
   LIGHTBOX (superposition plein écran)
   ====================================== */
#lightbox-overlay {
  display: none;             /* caché par défaut */
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  align-items: center;       /* alignement vertical */
  justify-content: center;   /* alignement horizontal */
  z-index: 2000;             /* au-dessus de tout */
}

#lightbox-img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 4px;
}

#lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  transition: color 0.2s ease;
}

#lightbox-close:hover {
  color: #ddd;
}
.blanc{
  color: #fff;
}
/* ======================
   RÉACTIVITÉ
   ====================== */
@media (max-width: 1024px) {
  .overlay-galerie h2 {
    font-size: 2rem;
  }
  .gallery-grid {
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .overlay-galerie h2 {
    font-size: 1.8rem;
    margin-bottom: 24px;
  }
  .section-galerie {
    padding: 60px 12px;
  }
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
  }
  #lightbox-close {
    top: 16px;
    right: 16px;
    font-size: 1.5rem;
  }
}
/* ======================================
   HEADER “Envie de nous soutenir ?”
   ====================================== */
   .header-soutenir {
    /* 1) Image de fond (ciel + canard), à placer dans img/image-haut.jpg */
    background-image: url("../img/1900_1900_new_logo-1.png");
    /* 2) On affiche la partie en haut */
    background-position: top left;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* 3) On affiche à taille native (pas de cover) */
    background-size: cover;
    /* 4) On lui donne au moins la hauteur de l’image ou 100vh si tu veux */
    min-height: 100vh;
  
    display: flex;
    align-items: center;    /* Texte centré verticalement */
    justify-content: center;/* et horizontalement */
    position: relative;
  }
  
  /* Texte */
  .header-soutenir .header-text h1 {
    font-size: 3.5rem;
    color: #000;           /* noir */
    margin-bottom: 8px;
  }
  
  .header-soutenir .header-text p {
    font-size: 1.25rem;
    color: #000;
  }
  
  /* Responsive */
  @media (max-width: 1024px) {
    .header-soutenir .header-text h1 { font-size: 2.5rem; }
    .header-soutenir .header-text p  { font-size: 1rem; }
  }
  @media (max-width: 768px) {
    .header-soutenir {
      padding: 40px 12px; /* si besoin de plus d’espace */
      min-height: 50vh;
    }
    .header-soutenir .header-text h1 { font-size: 2rem; }
    .header-soutenir .header-text p  { font-size: 0.9rem; }
  }

  /* ======================================
   SECTION “SOUTIEN” (FOND GRIS #B5B5A5)
   ====================================== */
.section-soutenir {
  background-color: #B5B5A5;
  color: #333;
  padding: 80px 20px;
}

.section-soutenir .container {
  display: flex;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

/* Colonne de gauche : 40% */
.soutien-propositions {
  flex: 0 0 40%;
  min-width: 280px;  /* garantit un minimum sur petit écran */
}

.soutien-propositions h2 {
  font-size: 3.5rem;
  margin-bottom: 16px;
}

.soutien-propositions p,
.soutien-propositions address {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 16px;
}

/* Colonne de droite (formulaire) : 60% */
.form-soutien {
  flex: 1;           /* prend tout l’espace restant */
  min-width: 280px;  /* pour que le formulaire ne soit pas trop étroit */
}

fieldset{
  border: none;
}
/* Responsive : une seule colonne sous 768px */
@media (max-width: 768px) {
  .section-soutenir .container {
    display: block;
  }
  .soutien-propositions,
  .form-soutien {
    flex: none;
    width: 100%;
    margin-bottom: 32px; /* espace entre les blocs */
  }
}
/* ======================================
   HEADER “CONTACT”
   ====================================== */
   .header-contact {
    background-image: url("../img/image-haut-vert.jpg");
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header-contact .overlay-content {
    color: #333;
    text-align: center;
  }
  .header-contact h1 {
    font-size: 4.5rem;
    margin-bottom: 8px;
  }
  .header-contact p {
    font-size: 2rem;
  }
  
  /* ======================================
     SECTION “CONTACT” (GRIS FONCÉ #4a4a4a)
     ====================================== */
  .section-contact {
    background-color: #4a4a4a;
    color: #fff;
    padding: 60px 20px;
  }
  .section-contact .container {
    display: flex;
    gap: 48px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
  }
  
  /* Colonne formulaire */
  .contact-form {
    flex: 1 1 45%;
    min-width: 280px;
  }
  .contact-form h2 {
    font-size: 1.8rem;
    margin-bottom: 16px;
  }
  .contact-form label {
    display: block;
    font-size: 0.95rem;
    margin: 12px 0 4px;
  }
  .contact-form input,
  .contact-form textarea {
    width: 100%;
    padding: 8px 10px;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    margin-bottom: 8px;
  }
  .contact-form input:focus,
  .contact-form textarea:focus {
    outline: 2px solid #ece9f1;
  }
  .contact-form .btn-outline {
    margin-top: 16px;
  }
  
  /* Colonne infos */
  .contact-info {
    flex: 1 1 45%;
    min-width: 280px;
  }
  .contact-info h2 {
    font-size: 1.8rem;
    margin-bottom: 16px;
    color: #fff;
  }
  .contact-info p,
  .contact-info .vacation-list li {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 16px;
    color: #eee;
  }
  .contact-info a {
    color: #f0f0f0;
    text-decoration: underline;
  }
  .vacation-list {
    list-style: none;
    padding-left: 0;
  }
  .vacation-list li::before {
    content: "• ";
    color: #ece9f1;
  }
  
  /* Petite flèche “remonter en haut” si besoin */
  .section-contact .scroll-top {
    position: absolute;
    bottom: 24px;
    right: 24px;
    border: 2px solid #fff;
    background-color: rgba(255,255,255,0.9);
  }
  .section-contact .scroll-top span {
    color: #333;
  }
  
  /* Responsive sous 768px : blocs full-width */
  @media (max-width: 768px) {
    .section-contact .container {
      display: block;
    }
    .contact-form,
    .contact-info {
      width: 100%;
      margin-bottom: 32px;
    }
  }
  
/* ======================================
   SECTION “NOS LIENS”
   ====================================== */
   .section-liens {
    background-color: #4a4a4a;  /* même gris foncé que Contact */
    color: #fff;
    padding: 80px 20px;
  }
  .section-liens .container {
    display: flex;
    gap: 48px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
  }
  
  /* Chaque colonne */
  .section-liens .liens-col {
    flex: 1 1 45%;
    min-width: 280px;
  }
  
  /* Titres */
  .section-liens h2 {
    font-size: 2rem;
    margin-bottom: 24px;
  }
  .section-liens h3 {
    font-size: 1.2rem;
    margin: 16px 0 8px;
    font-weight: bold;
  }
  .section-liens h4 {
    font-size: 1rem;
    margin: 12px 0 4px;
    font-weight: bold;
  }
  
  /* Listes */
  .section-liens ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 16px;
  }
  .section-liens li {
    margin-bottom: 8px;
    line-height: 1.4;
  }
  .section-liens li::before {
    content: "• ";
    color: #ece9f1;
  }
  .section-liens a {
    color: #ece9f1;
    text-decoration: underline;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .section-liens .container {
      display: block;
    }
    .section-liens .liens-col {
      width: 100%;
      margin-bottom: 32px;
    }
  }