/* =========================================================
   Patro Don Bosco Verviers ASBL — feuille de style unique
   Site statique — HTML5 / CSS3 / JS vanilla
   ---------------------------------------------------------
   Sommaire
   1.  Variables & theme
   2.  Reset & bases
   3.  Utilitaires & mise en page
   4.  Boutons
   5.  En-tete / navigation
   6.  Images flottantes (pivert)
   7.  Hero (bandeau)
   8.  Cartes generiques
   9.  Sous-navigation a ancres
   10. Page Info (signes d'appartenance, citation, encarts)
   11. Page Federation
   12. Page Les sections (ligne de croissance / lierre)
   13. Page Contact
   14. Pied de page
   15. Animations & prefers-reduced-motion
   ========================================================= */

/* ---------------------------------------------------------
   1. Variables & theme
   --------------------------------------------------------- */
:root {
  /* Palette officielle du Patro — a modifier ici uniquement */
  --vert: #6DB300;
  --vert-fonce: #4E8A00;
  --vert-tres-fonce: #35600A;
  --jaune: #FCC200;
  --jaune-clair: #FFE58A;
  --anthracite: #2B2B2B;
  --creme: #FAFAF5;

  /* Derives */
  --blanc: #FFFFFF;
  --gris: #6B6B66;
  --gris-clair: #E6E6DE;
  --vert-pale: #F1F8E4;
  --jaune-pale: #FFF8E1;

  /* Typographie */
  --font-titre: "Fredoka", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Formes */
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-xl: 40px;

  /* Ombres douces */
  --ombre-s: 0 2px 8px rgba(43, 43, 43, .08);
  --ombre-m: 0 8px 24px rgba(43, 43, 43, .10);
  --ombre-l: 0 16px 40px rgba(43, 43, 43, .12);

  /* Rythme */
  --wrap: 1140px;
  /* Espace libre de chaque cote du contenu. C'est la que vivent les
     illustrations decoratives : tant qu'elles n'excedent pas cette
     largeur, elles ne peuvent pas recouvrir le texte. */
  --gouttiere: calc((100vw - var(--wrap)) / 2 - .75rem);
  --gap: 1.5rem;
  --section-y: clamp(3rem, 7vw, 5.5rem);
}

/* ---------------------------------------------------------
   2. Reset & bases
   --------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* decalage pour les ancres, l'en-tete etant collant */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
  /* Filet de securite : un pivert decoratif mal place ne pourra jamais
     provoquer de defilement horizontal. « clip » (et non « hidden »)
     preserve le position: sticky de l'en-tete. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--anthracite);
  font-family: var(--font-texte);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .6em;
  color: var(--vert-tres-fonce);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.3rem + 3.4vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--vert-fonce); text-underline-offset: .18em; }
a:hover { color: var(--vert-tres-fonce); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: .35em; }

strong { font-weight: 700; }

hr {
  border: 0;
  border-top: 2px dashed var(--gris-clair);
  margin: 2.5rem 0;
}

/* Focus visible partout (accessibilite clavier) */
:focus-visible {
  outline: 3px solid var(--vert-fonce);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Lien d'evitement */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--vert-fonce);
  color: var(--blanc);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius-s) 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
  color: var(--blanc);
}

/* ---------------------------------------------------------
   3. Utilitaires & mise en page
   --------------------------------------------------------- */
.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.section { padding-block: var(--section-y); position: relative; }
.section--creme { background: var(--creme); }
.section--blanc { background: var(--blanc); }
.section--vert-pale { background: var(--vert-pale); }
.section--jaune-pale { background: var(--jaune-pale); }

.section__head {
  max-width: 62ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section__head--centre {
  margin-inline: auto;
  text-align: center;
}

.surtitre {
  display: inline-block;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vert-fonce);
  background: var(--jaune-clair);
  padding: .4rem .9rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.chapeau {
  font-size: 1.12em;
  color: var(--gris);
}

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

/* ---------------------------------------------------------
   4. Boutons
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  padding: .8rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--vert {
  background: var(--vert);
  color: var(--blanc);
  box-shadow: var(--ombre-s);
}
.btn--vert:hover { background: var(--vert-fonce); color: var(--blanc); box-shadow: var(--ombre-m); }

.btn--jaune {
  background: var(--jaune);
  color: var(--anthracite);
  box-shadow: var(--ombre-s);
}
.btn--jaune:hover { background: #E8B300; color: var(--anthracite); box-shadow: var(--ombre-m); }

.btn--ligne {
  background: transparent;
  color: var(--vert-fonce);
  border-color: var(--vert);
}
.btn--ligne:hover { background: var(--vert); color: var(--blanc); }

.btn--blanc {
  background: var(--blanc);
  color: var(--vert-tres-fonce);
  box-shadow: var(--ombre-s);
}
.btn--blanc:hover { background: var(--jaune-clair); color: var(--vert-tres-fonce); }

.btn--grand { font-size: 1.1rem; padding: 1rem 2rem; }

.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}

/* ---------------------------------------------------------
   5. En-tete / navigation
   --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  border-bottom: 3px solid var(--jaune);
  box-shadow: var(--ombre-s);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 74px;
  padding-block: .6rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--vert-tres-fonce);
  flex-shrink: 0;
}
.brand__logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--jaune-clair);
  object-fit: contain;
  flex-shrink: 0;
}
.brand__text {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.15;
  max-width: 11ch;
}
.brand__text strong {
  display: block;
  font-size: 1.2em;
  font-weight: 700;
  color: var(--vert);
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 10px;
  background: var(--vert);
  border: 0;
  border-radius: var(--radius-s);
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--blanc);
  border-radius: 3px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.main-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: .25rem;
}
.main-nav__list li { margin: 0; }

.main-nav__link {
  display: block;
  font-family: var(--font-titre);
  font-weight: 500;
  font-size: .98rem;
  color: var(--anthracite);
  text-decoration: none;
  padding: .55rem .8rem;
  border-radius: 999px;
  transition: background-color .18s ease, color .18s ease;
}
.main-nav__link:hover {
  background: var(--vert-pale);
  color: var(--vert-tres-fonce);
}
/* etat actif pose par assets/js/main.js */
.main-nav__link.is-active {
  background: var(--vert);
  color: var(--blanc);
}
.main-nav__cta { margin-left: .5rem; }

/* --- Menu mobile --- */
@media (max-width: 900px) {
  .main-nav {
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--blanc);
    border-bottom: 3px solid var(--jaune);
    box-shadow: var(--ombre-m);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .3s ease, visibility .3s;
  }
  .main-nav.is-open {
    max-height: 32rem;
    visibility: visible;
  }
  .main-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    padding: 1rem 1.25rem 1.5rem;
  }
  .main-nav__link {
    padding: .85rem 1rem;
    font-size: 1.05rem;
    border-radius: var(--radius-s);
  }
  .main-nav__cta { margin: .6rem 0 0; }
  .main-nav__cta .btn { width: 100%; }
  .brand__text { max-width: none; }
}
@media (min-width: 901px) {
  .nav-toggle { display: none; }
  .main-nav { display: block !important; }
}

/* ---------------------------------------------------------
   6. Images flottantes (mascotte pivert)
   Decoratives : alt="", aria-hidden, pointer-events: none.
   Toujours placees dans un parent en position: relative.
   --------------------------------------------------------- */
/* --- Regle commune aux deux niveaux --- */
.illu,
.flottant {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  /* width/height en auto + une BOITE max : l'image s'inscrit dedans
     sans jamais se deformer, qu'elle soit portrait (717x1000) ou
     paysage (1000x661). C'est ce qui permet de melanger des ratios
     allant de 0,57 a 1,62 sans traitement au cas par cas. */
  width: auto;
  height: auto;
  filter: drop-shadow(0 12px 22px rgba(43, 43, 43, .13));
  animation: flotter 7s ease-in-out infinite;
}

/* ===========================================================
   NIVEAU 1 — .illu : l'illustration d'ambiance
   Une seule par page, la scene la plus parlante. Elle vit dans
   la GOUTTIERE : le contenu est limite a --wrap (1140px), donc
   sur un ecran large il reste (100vw - 1140px) / 2 de chaque
   cote. C'est cet espace qu'on occupe, jamais celui du texte.
   =========================================================== */
.illu {
  max-width: clamp(240px, 26vw, 440px);
  /* la contrainte de hauteur evite qu'une image portrait ne depasse
     du bandeau et ne se fasse rogner par l'en-tete collant */
  max-height: clamp(220px, 30vw, 460px);
  animation-duration: 8.5s;
}
.illu--hero-droite { right: 1%; bottom: 4%; }
.illu--hero-gauche { left: 1%; bottom: 4%; }

/* Images fournies en basse definition : plafonnees pour rester
   nettes (accueil-pivert-1, sections-pivert-2). */
.illu--petite,
.flottant--petit {
  max-width: min(clamp(84px, 9vw, 130px), var(--gouttiere));
  max-height: 200px;
}

/* ===========================================================
   NIVEAU 2 — .flottant : les accents decoratifs
   Un ou deux par page, personnages seuls, dans les coins.
   =========================================================== */
/* Les accents sont CONFINES A LA GOUTTIERE (voir --gouttiere) : leur
   largeur ne peut jamais depasser l'espace libre a cote du contenu,
   donc ils ne recouvrent jamais le texte, quelle que soit la largeur
   de l'ecran. C'est la regle qui remplace les anciens pourcentages. */
.flottant {
  max-width: min(clamp(110px, 13vw, 200px), var(--gouttiere));
  max-height: 320px;
}
.flottant--large {
  max-width: min(clamp(150px, 19vw, 300px), var(--gouttiere));
  max-height: 380px;
}
.flottant--lent { animation-duration: 10s; }
.flottant--rapide { animation-duration: 5.5s; }

/* Positions : ancrees au bord de l'ecran, dans la gouttiere.
   NB : jamais de valeur negative sur « right », cela creerait un
   debordement horizontal de toute la page. */
.flottant--haut-droite { right: 0; top: 0; }
.flottant--haut-gauche { left: 0; top: 0; }
.flottant--bas-gauche { left: 0; bottom: 0; }
.flottant--bas-droite { right: 0; bottom: 0; }
.flottant--milieu-gauche { left: 0; top: 38%; }
.flottant--milieu-droite { right: 0; top: 38%; }

/* ===========================================================
   NIVEAU 3 — .illu-contenu : illustration DANS le flux
   Pas decorative : elle illustre reellement le propos (les
   tranches d'age, le CRACS). Elle porte donc un vrai « alt »
   et reste visible sur mobile.
   =========================================================== */
.illu-contenu {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 12px 22px rgba(43, 43, 43, .13));
}

/* ===========================================================
   PALIERS RESPONSIVES
   L'enjeu : la gouttiere se referme quand l'ecran retrecit.
   On reduit donc les images AVANT qu'elles n'atteignent le
   texte, puis on les retire, puis on remet l'illustration
   principale dans le flux sur mobile.
   =========================================================== */

/* Palier 2 : 1301-1400px — la gouttiere se referme, tout retrecit */
@media (max-width: 1400px) {
  .illu {
    max-width: clamp(240px, 25vw, 350px);
    max-height: clamp(220px, 28vw, 380px);
  }
}

/* Palier 3 : sous 1300px, la gouttiere devient trop etroite pour
   loger un accent lisible : on les retire tous. Seule reste
   l'illustration d'ambiance. */
@media (max-width: 1300px) {
  .flottant { display: none; }
}

/* Palier 4 : 761-1100px — plus de gouttiere du tout. On retrecit
   la colonne de texte du bandeau pour qu'elle ne passe jamais
   sous l'illustration. */
@media (max-width: 1100px) {
  .illu { max-width: min(30vw, 260px); max-height: min(34vw, 300px); }
  .hero__contenu { max-width: 62%; }
}

/* Palier 4 : mobile — l'illustration quitte le positionnement
   absolu et redevient une image normale, centree sous le texte.
   Elle est enfin visible sur telephone (elle ne l'etait pas).
   Cela suppose que le <img class="illu"> soit place APRES le
   bloc .wrap dans le HTML du bandeau. */
@media (max-width: 760px) {
  .illu {
    position: static;
    /* largeur EXPLICITE ici (et non max-width) : l'image etant dans le
       flux, la boite doit etre reservee avant chargement, sinon la page
       sursaute quand l'image arrive. La hauteur suit toute seule grace
       aux attributs width/height du HTML. */
    width: min(64vw, 240px);
    max-width: none;
    max-height: none;
    margin: 2rem auto 0;
    animation: none;
  }
  .illu--petite { display: none; }
  .hero__contenu { max-width: none; }
  .hero { text-align: center; }
  .hero .boutons { justify-content: center; }
  .illu-contenu { max-width: 300px; }
}

/* Palier 5 : tres petits telephones seulement (<=360px).
   Le seuil est volontairement bas : a 375px (iPhone SE/13 mini et
   la plupart des Android), l'illustration merite ses 240px. */
@media (max-width: 360px) {
  .illu { width: min(56vw, 170px); margin-top: 1.5rem; }
  .illu-contenu { max-width: 240px; }
}

@keyframes flotter {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-14px) rotate(1.5deg); }
}

/* Le contenu passe toujours au-dessus des illustrations */
.section > .wrap,
.hero > .wrap { position: relative; z-index: 1; }

/* ---------------------------------------------------------
   7. Hero (bandeau)
   --------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 8vw, 6rem);
  background:
    radial-gradient(1200px 420px at 12% -10%, var(--jaune-clair) 0%, transparent 60%),
    radial-gradient(900px 400px at 95% 110%, #DCF0B4 0%, transparent 62%),
    var(--vert-pale);
  border-bottom: 4px solid var(--jaune);
}
.hero__contenu { max-width: 40rem; }
.hero h1 { margin-bottom: .5em; }
.hero__intro {
  font-size: 1.15em;
  color: #4A4A44;
  max-width: 34rem;
  margin-bottom: 2rem;
}
.hero .boutons { margin-top: 1.75rem; }

/* Petites pastilles decoratives dans le hero */
.hero__deco {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.hero__deco--1 { width: 18px; height: 18px; background: var(--jaune); top: 18%; left: 48%; }
.hero__deco--2 { width: 12px; height: 12px; background: var(--vert); top: 64%; left: 40%; }
.hero__deco--3 { width: 24px; height: 24px; background: var(--jaune-clair); bottom: 14%; right: 34%; }
@media (max-width: 760px) { .hero__deco { display: none; } }

/* ---------------------------------------------------------
   8. Cartes generiques
   --------------------------------------------------------- */
.grille {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

.carte {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 2px solid var(--gris-clair);
  border-radius: var(--radius-l);
  padding: 1.75rem;
  box-shadow: var(--ombre-s);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.carte:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-l);
  border-color: var(--jaune);
}
.carte__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-m);
  background: var(--jaune-clair);
  font-size: 1.6rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.carte__icone--vert { background: var(--vert-pale); }
.carte h3 { margin-bottom: .5em; }
.carte p { color: var(--gris); }
.carte__texte { margin-bottom: 1.5rem; }
.carte .btn { margin-top: auto; align-self: flex-start; }

/* Carte compacte (signes d'appartenance) */
.carte--compacte {
  padding: 1.4rem;
  border-radius: var(--radius-m);
}
.carte--compacte h3 { font-size: 1.1rem; }
.carte--compacte p { font-size: .96rem; margin-bottom: 0; }
/* Carte occupant toute la largeur de la grille
   (utilisee pour le chant federal, qui contient un bloc citation) */
.carte--large { grid-column: 1 / -1; }

.carte__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--vert);
  color: var(--blanc);
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: .8rem;
}

/* ---------------------------------------------------------
   9. Sous-navigation a ancres
   --------------------------------------------------------- */
.ancres {
  background: var(--blanc);
  border-bottom: 2px solid var(--gris-clair);
  padding-block: .9rem;
}
.ancres__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.ancres__liste li { margin: 0; }
.ancres__liste a {
  display: inline-block;
  font-family: var(--font-titre);
  font-weight: 500;
  font-size: .92rem;
  text-decoration: none;
  color: var(--vert-tres-fonce);
  background: var(--vert-pale);
  padding: .45rem 1rem;
  border-radius: 999px;
  transition: background-color .18s ease, color .18s ease;
}
.ancres__liste a:hover { background: var(--vert); color: var(--blanc); }

/* ---------------------------------------------------------
   10. Page Info
   --------------------------------------------------------- */
.bloc-info {
  display: grid;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 820px) {
  .bloc-info--2col { grid-template-columns: 1.1fr .9fr; gap: 3rem; }
}

.encadre {
  background: var(--blanc);
  border: 2px solid var(--gris-clair);
  border-left: 8px solid var(--vert);
  border-radius: var(--radius-m);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--ombre-s);
}
.encadre--jaune { border-left-color: var(--jaune); background: var(--jaune-pale); }

/* Liste des tranches d'age */
.ages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .8rem;
}
.ages li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .8rem;
  margin: 0;
  background: var(--blanc);
  border: 2px solid var(--gris-clair);
  border-radius: var(--radius-m);
  padding: .9rem 1.2rem;
}
.ages__nom {
  font-family: var(--font-titre);
  font-weight: 600;
  color: var(--vert-tres-fonce);
}
.ages__age {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: .85rem;
  background: var(--jaune-clair);
  color: var(--anthracite);
  padding: .2rem .7rem;
  border-radius: 999px;
}

/* Horaires */
.horaire {
  display: grid;
  gap: 1rem;
}
@media (min-width: 700px) { .horaire { grid-template-columns: 1fr 1fr; } }
.horaire__item {
  background: var(--blanc);
  border: 2px dashed var(--vert);
  border-radius: var(--radius-m);
  padding: 1.4rem 1.6rem;
  text-align: center;
}
.horaire__heure {
  display: block;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--vert-fonce);
  margin-top: .2rem;
}

/* Cordelieres : petites pastilles de couleur */
.cordelieres {
  list-style: none;
  margin: .8rem 0 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}
.cordelieres li {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-size: .94rem;
}
.pastille {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(43, 43, 43, .18);
  flex-shrink: 0;
}
.pastille--rouge { background: #D63A2F; }
.pastille--jaune { background: var(--jaune); }
.pastille--jaune-rouge { background: repeating-linear-gradient(45deg, var(--jaune) 0 4px, #D63A2F 4px 8px); }
.pastille--grise { background: #9A9A93; }
.pastille--bleue { background: #2F6FD6; }

/* Bloc citation (chant federal) */
.citation {
  margin: 1.5rem 0 0;
  background: var(--vert-pale);
  border: 2px dashed var(--vert);
  border-radius: var(--radius-m);
  padding: 1.6rem 1.8rem;
}
.citation p { font-style: italic; color: var(--vert-tres-fonce); }
.citation footer {
  margin-top: .8rem;
  font-size: .9rem;
  font-style: normal;
  color: var(--gris);
}
.citation--placeholder p { color: var(--gris); }

/* Encart boutique */
.encart-boutique {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2.5rem;
  background: linear-gradient(120deg, var(--jaune-clair), var(--jaune-pale));
  border: 2px solid var(--jaune);
  border-radius: var(--radius-l);
  padding: 1.8rem 2rem;
}
.encart-boutique h3 { margin-bottom: .3em; }
.encart-boutique p { margin: 0; color: #5A5A50; max-width: 46ch; }

/* ---------------------------------------------------------
   11. Page Federation
   --------------------------------------------------------- */
.chiffres {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.chiffres li {
  margin: 0;
  background: var(--blanc);
  border: 2px solid var(--gris-clair);
  border-radius: var(--radius-m);
  padding: 1.5rem 1.25rem;
  text-align: center;
  box-shadow: var(--ombre-s);
}
.chiffres__valeur {
  display: block;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
  color: var(--vert);
  line-height: 1.1;
}
.chiffres__libelle {
  display: block;
  font-size: .92rem;
  color: var(--gris);
  margin-top: .3rem;
}

.appel {
  text-align: center;
  background: linear-gradient(135deg, var(--vert) 0%, var(--vert-fonce) 100%);
  color: var(--blanc);
  border-radius: var(--radius-xl);
  padding: clamp(2.2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--ombre-l);
}
.appel h2 { color: var(--blanc); }
.appel p {
  color: rgba(255, 255, 255, .92);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 1.8rem;
}
.appel .boutons { justify-content: center; }

/* Le CRACS, en 4 mots */
.cracs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.cracs li {
  margin: 0;
  background: var(--blanc);
  border: 2px solid var(--gris-clair);
  border-top: 6px solid var(--jaune);
  border-radius: var(--radius-m);
  padding: 1.3rem;
}
.cracs__lettre {
  display: inline-block;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 2rem;
  color: var(--vert);
  line-height: 1;
  margin-bottom: .4rem;
}
.cracs strong { display: block; color: var(--vert-tres-fonce); font-family: var(--font-titre); }
.cracs p { font-size: .94rem; color: var(--gris); margin: .35rem 0 0; }

/* ---------------------------------------------------------
   12. Page Les sections — la ligne de croissance (le lierre)
   --------------------------------------------------------- */
.lierre {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-left: 3.25rem;
}
/* Le « chemin » qui relie toutes les sections */
.lierre::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: .5rem;
  bottom: .5rem;
  width: 4px;
  border-radius: 4px;
  background: repeating-linear-gradient(
    to bottom,
    var(--vert) 0 14px,
    transparent 14px 24px
  );
}

.etape {
  position: relative;
  background: var(--blanc);
  border: 2px solid var(--gris-clair);
  border-radius: var(--radius-l);
  padding: 1.75rem 1.9rem;
  box-shadow: var(--ombre-s);
  transition: transform .2s ease, box-shadow .2s ease;
}
.etape:hover { transform: translateY(-3px); box-shadow: var(--ombre-m); }

/* Pastille sur le chemin */
.etape::before,
.lierre__note::before,
.lierre__fin::before {
  content: "";
  position: absolute;
  left: -2.72rem;
  top: 2rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--couleur-section, var(--vert));
  border: 4px solid var(--creme);
  box-shadow: 0 0 0 3px var(--couleur-section, var(--vert));
}

.etape__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  margin-bottom: .9rem;
}
.etape__entete h3 { margin: 0; }
.etape__age {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: .85rem;
  /* --couleur-badge permet d'assombrir LE BADGE seul quand la couleur
     officielle de section n'atteint pas 4.5:1 ; la pastille du chemin,
     elle, garde la teinte officielle exacte. */
  background: var(--couleur-badge, var(--couleur-section, var(--vert)));
  /* --texte-section passe en anthracite sur les fonds clairs */
  color: var(--texte-section, var(--blanc));
  padding: .25rem .8rem;
  border-radius: 999px;
}
.etape__mot {
  display: inline-block;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vert-tres-fonce);
  background: var(--jaune-clair);
  padding: .3rem .85rem;
  border-radius: 999px;
  margin-bottom: .9rem;
}
.etape p { color: var(--gris); margin: 0; }

/* Couleurs OFFICIELLES des sections du Patro (les six confirmees).

   CHOIX CLIENT : le texte des badges d'age est en BLANC sur toutes les
   sections, pour un rendu homogene. C'est un choix esthetique assume :
   sur les fonds clairs le contraste descend sous le seuil WCAG AA
   (Benjamins 1.51:1, Poussins 2.68:1, Chevaliers 2.86:1, Animateurs
   1.63:1). Pour revenir a un texte lisible sur ces sections, il suffit
   de leur rajouter : --texte-section: var(--anthracite);

   --couleur-badge assombrit LE BADGE seul (la pastille du chemin garde
   la teinte officielle exacte) la ou le blanc etait vraiment illisible. */
.etape--poussins { --couleur-section: #5DB141; }
.etape--benjamins { --couleur-section: #FFCC03; }
.etape--chevaliers { --couleur-section: #EE781E; }
.etape--conquerants { --couleur-section: #E83E5D; --couleur-badge: #E52145; }
.etape--aventuriers { --couleur-section: #BF5A9C; --couleur-badge: #BA4E95; }
.etape--explorateurs { --couleur-section: #0490B4; --couleur-badge: #0481A1; }

/* Encart d'information glisse dans le chemin (ex. le regroupement +12) */
.lierre__note {
  position: relative;
  /* pastille du chemin en gris moyen : ce n'est pas une section */
  --couleur-section: var(--gris);
  background: var(--jaune-pale);
  border: 2px dashed var(--jaune);
  border-radius: var(--radius-m);
  padding: 1.4rem 1.6rem;
}
.lierre__note h3 { font-size: 1.1rem; margin-bottom: .4em; }
.lierre__note p { margin: 0; color: #5A5A50; font-size: .97rem; }
.lierre__note p + p { margin-top: .6em; }

/* Bout du chemin : devenir animateur */
.lierre__fin {
  position: relative;
  /* pastille du chemin ET badge « Au bout du chemin » en gris moyen
     (badge lisible en blanc : 5.36:1) */
  --couleur-section: var(--gris);
  background: linear-gradient(135deg, var(--jaune-clair), var(--jaune-pale));
  border: 2px dashed var(--jaune);
  border-radius: var(--radius-l);
  padding: 1.75rem 1.9rem;
}
.lierre__fin h3 { margin-bottom: 0; }
.lierre__fin p { margin: 0; color: var(--gris); }
.lierre__fin p + p { margin-top: .8em; }

@media (max-width: 560px) {
  .lierre { padding-left: 2.4rem; }
  .lierre::before { left: .7rem; }
  .etape::before,
  .lierre__fin::before { left: -2.05rem; width: 18px; height: 18px; top: 1.7rem; }
  .etape, .lierre__fin { padding: 1.4rem 1.3rem; }
}

/* ---------------------------------------------------------
   13. Page Contact
   --------------------------------------------------------- */
.contact-grille {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.fiche {
  background: var(--blanc);
  border: 2px solid var(--gris-clair);
  border-radius: var(--radius-l);
  padding: 1.75rem;
  box-shadow: var(--ombre-s);
  text-align: center;
}
.fiche__avatar {
  width: 68px;
  height: 68px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--vert-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--vert-fonce);
}
.fiche__role {
  display: block;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: .8rem;
}
.fiche h3 { margin-bottom: .3em; }
.lien-contact {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--vert-fonce);
  background: var(--vert-pale);
  padding: .6rem 1.2rem;
  border-radius: 999px;
  margin-top: .5rem;
}
.lien-contact:hover { background: var(--vert); color: var(--blanc); }

.contact-mail {
  text-align: center;
  background: linear-gradient(135deg, var(--vert) 0%, var(--vert-fonce) 100%);
  color: var(--blanc);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 5vw, 3rem);
  box-shadow: var(--ombre-l);
}
.contact-mail h2 { color: var(--blanc); }
.contact-mail p { color: rgba(255, 255, 255, .92); }
.contact-mail .btn--blanc { margin-top: .5rem; }

.adresse {
  font-style: normal;
  font-size: 1.05rem;
}
.adresse strong { display: block; font-family: var(--font-titre); font-size: 1.15rem; color: var(--vert-tres-fonce); }

/* ---------------------------------------------------------
   14. Pied de page
   --------------------------------------------------------- */
.site-footer {
  background: var(--anthracite);
  color: #D9D9D2;
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem;
  border-top: 5px solid var(--jaune);
}
.footer-grille {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .footer-grille { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
}

.footer-marque {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--blanc);
  margin-bottom: 1rem;
}
.footer-marque img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--jaune-clair);
  object-fit: contain;
}
.footer-marque span {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.2;
}
.site-footer p { color: #B9B9B1; max-width: 40ch; font-size: .96rem; }

.site-footer h2 {
  font-size: 1.05rem;
  color: var(--jaune);
  margin-bottom: .9rem;
  letter-spacing: .02em;
}
.footer-liens {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-liens li { margin-bottom: .5rem; }
.footer-liens a {
  color: #D9D9D2;
  text-decoration: none;
  font-size: .96rem;
}
.footer-liens a:hover { color: var(--jaune); text-decoration: underline; }

.reseaux {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  gap: .7rem;
}
.reseaux li { margin: 0; }
.reseaux a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--blanc);
  transition: background-color .18s ease, transform .18s ease;
}
.reseaux a:hover {
  background: var(--vert);
  color: var(--blanc);
  transform: translateY(-2px);
}
.reseaux svg { width: 22px; height: 22px; fill: currentColor; }

.footer-bas {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .88rem;
  text-align: center;
}
.footer-bas p { color: #9C9C95; max-width: none; margin: 0; }

/* ---------------------------------------------------------
   15. Animations & prefers-reduced-motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .illu,
  .flottant { animation: none; }
  .btn:hover,
  .carte:hover,
  .etape:hover,
  .reseaux a:hover { transform: none; }
}

/* Impression : on retire le decor */
@media print {
  .site-header, .site-footer, .flottant, .ancres { display: none !important; }
  body { background: #fff; }
}