/* =========================================================
   HELP ON TIME
   Feuille de styles principale
   Priorité absolue : lisibilité et accessibilité.
   Le public du site est en situation de handicap moteur,
   de handicap sensoriel, ou âgé.
   ========================================================= */

/* ---------- Polices, hébergées sur le site ----------
   Servies depuis /fonts/ et non plus depuis Google Fonts : chargées chez
   Google, elles lui transmettaient l'adresse IP de chaque visiteur.
   Fichiers de Google Fonts réduits aux caractères latins, qui couvrent
   tout le français (œ, «  », €, apostrophe courbe). Inter est variable :
   un seul fichier pour les graisses 400 à 700.
   Licence SIL Open Font License 1.1, inscrite dans les fichiers.
   Inter : The Inter Project Authors. Oswald : The Oswald Project Authors. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/oswald-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --nuit: #152733;
  --nuit-clair: #1E3746;
  --cyan: #00C3CC;
  --cyan-sombre: #006D75;   /* version foncée, utilisable en texte sur fond clair */
  --blanc: #FFFFFF;
  --creme: #F1F6F7;
  --creme-bord: #D6E3E6;
  --ciel: #D2E7F2;       /* fond des sections de logos, plus marqué que le crème */
  --texte: #152733;
  --texte-doux: #3E535F;
  --alerte-fond: #FFF4E5;
  --alerte-bord: #C8781A;

  --rayon: 14px;
  --largeur: 1180px;
  --largeur-etroite: 760px;
  --transition: 160ms ease;
}

/* ---------- Réinitialisation légère ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.1875rem;          /* ~19px, volontairement grand */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  line-height: 1.2;
  margin: 0 0 0.6em;
  font-weight: 700;
  letter-spacing: -0.01em;
}

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

a { color: var(--cyan-sombre); }
a:hover { color: var(--nuit); }

/* Un anneau de focus visible partout, jamais supprimé. */
:focus-visible {
  outline: 3px solid var(--cyan-sombre);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Décalage pour l'en-tête collant quand on suit une ancre. */
:target { scroll-margin-top: 6rem; }
section[id] { scroll-margin-top: 6rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   Apparition au défilement

   Volontairement minimale : opacité et 14 px de translation
   verticale, 450 ms, une seule fois par élément.

   Ce qui est banni sur ce site et pourquoi :
   - parallaxe, zoom, rotation, mouvement horizontal : ce sont
     les déclencheurs de troubles vestibulaires (vertiges,
     nausées) chez une partie du public visé ;
   - défilement détourné ou épinglage de section : cela casse
     la navigation au clavier et désoriente ;
   - toute animation sur l'en-tête, le bouton d'appel et le
     hero : ce sont les éléments dont l'utilisateur a besoin
     immédiatement, ils ne clignotent jamais.

   Triple sécurité pour que le contenu ne disparaisse jamais :
   1. la classe `anim-ok` n'est posée que par le script d'en-tête,
      donc sans JavaScript aucun élément n'est masqué ;
   2. le script d'en-tête ne la pose pas si le système demande
      un mouvement réduit ;
   3. la requête média ci-dessous annule l'effet même si la
      classe était posée malgré tout.
   ========================================================= */
.anim-ok .apparait {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 450ms ease-out, transform 450ms ease-out;
  will-change: opacity, transform;
}
.anim-ok .apparait.est-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Léger décalage entre les éléments d'une même grille, plafonné
   à 240 ms pour que le dernier n'arrive jamais en retard. */
.anim-ok .cartes .carte:nth-child(2),
.anim-ok .etapes .etape:nth-child(2) { transition-delay: 80ms; }
.anim-ok .cartes .carte:nth-child(3),
.anim-ok .etapes .etape:nth-child(3) { transition-delay: 160ms; }
.anim-ok .cartes .carte:nth-child(4),
.anim-ok .etapes .etape:nth-child(4) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .anim-ok .apparait {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- Utilitaires ---------- */
.conteneur {
  width: min(100% - 2.5rem, var(--largeur));
  margin-inline: auto;
}
.conteneur--etroit { width: min(100% - 2.5rem, var(--largeur-etroite)); }

.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lien-evitement {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  background: var(--nuit);
  color: var(--blanc);
  padding: 1rem 1.5rem;
  border-radius: 0 0 var(--rayon) var(--rayon);
  font-weight: 600;
  transition: top var(--transition);
}
.lien-evitement:focus { top: 0; color: var(--blanc); }

.externe { font-size: 0.85em; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.7rem 1.25rem;
  border-radius: var(--rayon);
  border: 2px solid transparent;
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.bouton--grand { min-height: 3.75rem; font-size: 1.125rem; padding: 0.9rem 1.8rem; }

.bouton--principal { background: var(--cyan); color: var(--nuit); }
.bouton--principal:hover { background: var(--nuit); color: var(--blanc); }

.bouton--secondaire { background: transparent; color: var(--nuit); border-color: var(--nuit); }
.bouton--secondaire:hover { background: var(--nuit); color: var(--blanc); }

.bouton--tel {
  background: var(--cyan);
  color: var(--nuit);
  white-space: nowrap;
  font-size: 1rem;
  padding: 0.6rem 1rem;
  min-height: 3rem;
}
.bouton--tel svg { width: 1.15em; height: 1.15em; flex: none; }
.bouton--tel:hover { background: var(--blanc); color: var(--nuit); }

.bouton--don {
  background: transparent;
  color: var(--blanc);
  border-color: rgba(255,255,255,0.55);
  font-size: 1rem;
  padding: 0.6rem 1rem;
  min-height: 3rem;
}
.bouton--don:hover { background: var(--blanc); color: var(--nuit); border-color: var(--blanc); }

/* Le bouton de don est dessiné pour les fonds sombres : texte blanc sur
   transparent, bordure blanche. Posé dans une section claire il disparaît,
   contraste relevé à 1,09 sur fond blanc et 1,28 sur le bleu ciel, très
   loin du minimum de 4,5. On lui donne donc un habillage clair, qui reste
   en retrait du bouton principal en cyan plein placé à côté. */
.section:not(.section--sombre) .bouton--don {
  background: var(--blanc);
  color: var(--nuit);
  border-color: var(--nuit);
}
.section:not(.section--sombre) .bouton--don:hover {
  background: var(--nuit);
  color: var(--blanc);
  border-color: var(--nuit);
}

.bloc-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

/* ---------- En-tête ---------- */
/* L'en-tête porte sept entrées de menu plus deux boutons : 1180 px ne
   suffisent plus. On lui donne son propre conteneur, plus large que celui
   du contenu, sinon la barre passe sur deux lignes alors qu'elle est collante. */
.entete .conteneur { width: min(100% - 2.5rem, 1400px); }

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nuit);
  color: var(--blanc);
  border-bottom: 3px solid var(--cyan);
}
.entete a:not(.bouton) { color: var(--blanc); }

.entete__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.7rem 0;
  flex-wrap: wrap;
}

.marque {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  margin-right: auto;
}
.marque__icone { width: 42px; height: auto; }
.marque__texte { display: flex; flex-direction: column; line-height: 1.15; }
.marque__nom {
  font-family: "Oswald", "Inter", sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.marque__baseline {
  font-size: 0.85rem;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* ---------- Navigation ---------- */
.nav { display: flex; align-items: center; gap: 1rem; }

.nav__liste {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__liste a {
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  display: inline-block;
}
.nav__liste a:hover { border-bottom-color: var(--cyan); color: var(--cyan); }

/* Section en cours de lecture, ou page en cours de consultation.
   Le soulignement seul ne suffit pas pour un visiteur qui distingue mal
   les traits fins : la couleur et la graisse changent aussi. */
.entete .nav__liste a[aria-current] {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
  font-weight: 700;
}

.nav__actions { display: flex; gap: 0.5rem; align-items: center; }

.burger { display: none; }

/* Bouton d'appel visible en permanence sur mobile : le téléphone est
   le canal principal, il ne doit jamais être caché derrière le menu. */
.entete__tel-mobile { display: none; }
.tel-numero { display: none; }

/* ---------- Hero ---------- */
.hero {
  background: var(--nuit);
  color: var(--blanc);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.hero a:not(.porte):not(.bouton) { color: var(--cyan); }
.hero a:not(.porte):not(.bouton):hover { color: var(--blanc); }

.hero__titre {
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  max-width: 20ch;
  margin-bottom: 1.2rem;
}
/* Cyan sur le bleu nuit : contraste de 7,1, au-dessus du seuil AAA. */
.hero__accroche {
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--cyan);
  max-width: 40ch;
  margin-bottom: 1.5rem;
}
.hero__texte {
  font-size: clamp(1.15rem, 2.2vw, 1.375rem);
  max-width: 60ch;
  color: #DCE7EB;
}
.hero__texte p { margin-bottom: 0.9em; }
.hero__texte ul { margin: 0; padding-left: 1.4rem; }
.hero__texte li { margin-bottom: 0.4em; }
.hero__texte li:last-child { margin-bottom: 0; }
.hero__texte li::marker { color: var(--cyan); }

.hero__portes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin: 2.5rem 0 2rem;
  max-width: 860px;
}
.porte {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.5rem 1.6rem;
  border-radius: var(--rayon);
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform var(--transition), background-color var(--transition);
}
.hero .porte--aide { background: var(--cyan); color: var(--nuit); }
.porte--aide:hover { background: var(--blanc); color: var(--nuit); transform: translateY(-3px); }
.hero .porte--benevole { background: transparent; border-color: rgba(255,255,255,0.5); color: var(--blanc); }
.porte--benevole:hover { background: var(--nuit-clair); border-color: var(--cyan); color: var(--blanc); transform: translateY(-3px); }
.porte__titre { font-size: 1.25rem; font-weight: 700; }
.porte__detail { font-size: 1rem; opacity: 0.9; }

.hero__infos { font-size: 1.0625rem; color: #DCE7EB; }

/* ---------- Bandeau de chiffres ---------- */
.chiffres {
  background: var(--creme);
  border-bottom: 1px solid var(--creme-bord);
  padding: 2.5rem 0;
}
.chiffres__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.75rem;
  text-align: center;
}
.chiffres__nombre {
  display: block;
  font-family: "Oswald", "Inter", sans-serif;
  font-size: 2.75rem;
  font-weight: 600;
  color: var(--nuit);
  line-height: 1.1;
}
.chiffres__label {
  display: block;
  font-size: 1rem;
  color: var(--texte-doux);
  margin-top: 0.35rem;
}

/* ---------- Sections ---------- */
.section { padding: clamp(3rem, 6vw, 5rem) 0; }
.section--creme { background: var(--creme); }
.section--sombre { background: var(--nuit); color: var(--blanc); }

/* Fond bleu ciel des sections de logos. Les logos des partenaires sont sur
   fond transparent : posés sur du blanc ils flottent sans limite visible,
   alors qu'un fond teinté leur donne une assise. Teinte choisie pour que
   les liens en cyan foncé y gardent un contraste de 4,78. */
.section--ciel { background: var(--ciel); }
.section--ciel .carte { border-color: #B9D6E6; }

/* Cinq des six logos fournis ont un fond blanc opaque, pas transparent.
   Posés directement sur le bleu, ils formeraient des rectangles blancs
   irréguliers. On les place donc tous dans un pavé blanc de même facture :
   le fond teinté fait ressortir les pavés, et le seul logo réellement
   détouré s'aligne sur les autres au lieu de flotter. */
.section--ciel .logos { gap: 1.25rem; }
.section--ciel .logos li {
  flex-basis: 200px;
  /* Hauteur commune : les logos n'ont pas le même rapport, sans elle la
     rangée de pavés monte et descend d'un logo à l'autre. */
  height: 140px;
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 1.1rem 1.25rem;
  box-shadow: 0 1px 3px rgba(21, 39, 51, 0.12);
}
/* La règle générale impose une largeur de 100 % : ici c'est la hauteur du
   pavé qui commande, l'image s'y inscrit sans se déformer ni déborder. */
.section--ciel .logos img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.section--sombre a:not(.bouton) { color: var(--cyan); }
.section--sombre a:not(.bouton):hover { color: var(--blanc); }

.section__titre { font-size: clamp(1.75rem, 3.4vw, 2.5rem); max-width: 24ch; }
.section__intro {
  font-size: 1.1875rem;
  max-width: 62ch;
  color: var(--texte-doux);
  margin-bottom: 2.5rem;
}
.section--sombre .section__intro { color: #DCE7EB; }

.sous-titre { font-size: 1.25rem; margin-bottom: 0.75rem; }
.texte-fort { font-size: 1.25rem; font-weight: 600; }

/* ---------- Cartes d'actions ---------- */
.cartes {
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
  display: grid;
  /* auto-fill et non auto-fit : une carte seule garde la largeur d'une
     colonne au lieu de s'étirer sur toute la page (« À venir » n'en a
     parfois qu'une). Sans effet quand les cartes remplissent la grille. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 1.5rem;
}
/* La carte fixe sa couleur de texte en même temps que son fond blanc :
   posée dans une section sombre, elle hériterait sinon du texte blanc
   de la section, blanc sur blanc (signalé par Cécile, page Partenaires). */
.carte {
  background: var(--blanc);
  color: var(--texte);
  border: 2px solid var(--creme-bord);
  border-radius: var(--rayon);
  padding: 1.75rem;
}
.carte__titre {
  font-size: 1.3rem;
  color: var(--nuit);
  padding-bottom: 0.6rem;
  border-bottom: 3px solid var(--cyan);
  display: inline-block;
}
.carte__note {
  font-size: 1rem;
  color: var(--texte-doux);
  font-style: italic;
  margin-bottom: 0;
}

/* ---------- Ce que nos bénévoles ne font pas ---------- */
.limites {
  background: var(--creme);
  border-left: 6px solid var(--nuit);
  border-radius: var(--rayon);
  padding: 2rem 2rem 1.75rem;
}
.limites__titre { font-size: 1.4rem; }
.limites__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}
.limites__liste li {
  background: var(--blanc);
  border: 2px solid var(--creme-bord);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  font-weight: 500;
  font-size: 1rem;
}

/* ---------- Étapes ---------- */
.etapes {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.75rem;
  counter-reset: etape;
}
.etape {
  background: var(--nuit-clair);
  border-radius: var(--rayon);
  padding: 1.75rem;
}
.etape__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--nuit);
  font-family: "Oswald", "Inter", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.etape__titre { font-size: 1.2rem; }
.etape p { margin-bottom: 0; color: #DCE7EB; }

/* ---------- Encadré urgence ---------- */
.encadre-urgence {
  background: var(--alerte-fond);
  color: var(--texte);
  border-left: 6px solid var(--alerte-bord);
  border-radius: var(--rayon);
  padding: 1.25rem 1.5rem;
  font-size: 1.0625rem;
  margin-bottom: 0;
}

/* ---------- Listes ---------- */
.liste-etapes-simples,
.liste-numerotee { padding-left: 1.4rem; margin: 0 0 1.5rem; }
.liste-etapes-simples li,
.liste-numerotee li,
.liste-puces li { margin-bottom: 0.75rem; }
.liste-puces { padding-left: 1.4rem; margin: 0 0 1.5rem; }

.deux-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 2.5rem;
}

/* ---------- Partenaires ---------- */
.partenaires {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 0 0 2rem;
  padding: 0;
}
.partenaires li {
  background: var(--creme);
  border: 2px solid var(--creme-bord);
  border-radius: var(--rayon);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  font-size: 1.0625rem;
}

/* ---------- Contact ---------- */
.contact-liste {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.contact-liste li {
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding-bottom: 1.25rem;
}
.contact-liste__label {
  display: block;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cyan);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.contact-liste__valeur { font-size: 1.35rem; font-weight: 600; }

/* ---------- Pied de page ---------- */
.pied {
  background: var(--nuit);
  color: var(--blanc);
  padding: 3.5rem 0 2rem;
}
.pied a:not(.bouton) { color: var(--cyan); }
.pied a:not(.bouton):hover { color: var(--blanc); }

.pied__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.5rem;
  align-items: start;
}
.pied__logo { width: 120px; border-radius: var(--rayon); }
.pied__titre { font-size: 1.2rem; }
.pied__liens { list-style: none; margin: 0; padding: 0; }
.pied__liens li { margin-bottom: 0.6rem; }

.pied__bas {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.18);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 1rem;
  color: #B7C7CE;
}
.pied__bas p { margin: 0; }

/* =========================================================
   Mobile
   Le menu se déplie SOUS l'en-tête, il n'est jamais en
   position fixed et n'utilise aucun backdrop-filter :
   c'est ce qui casse l'affichage sur iOS.
   ========================================================= */
@media (max-width: 1420px) {
  .entete__inner { padding: 0.75rem 0; }

  .entete__tel-mobile { display: inline-flex; }

  .burger {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 3rem;
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--blanc);
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: var(--rayon);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
  }
  .burger__barres { display: inline-flex; flex-direction: column; gap: 4px; }
  .burger__barres span {
    display: block;
    width: 22px;
    height: 3px;
    background: var(--blanc);
    border-radius: 2px;
  }

  .nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    width: 100%;
    padding: 1.25rem 0 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.18);
    margin-top: 0.75rem;
  }
  /* Le menu déplié compte sept entrées et deux boutons. Sur un écran court
     (360 x 640, encore courant), il dépasse la hauteur de la fenêtre : le
     dernier bouton devient inatteignable, l'en-tête étant collant et la page
     ne défilant pas tant que le menu est ouvert. On plafonne donc sa hauteur
     et on le rend défilable. Le calcul retire la ligne du logo, plus la barre
     d'appel fixe du bas sur les petits écrans. */
  .nav.est-ouvert {
    display: flex;
    max-height: calc(100vh - 6rem);
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__liste a {
    display: block;
    padding: 0.9rem 0.25rem;
    font-size: 1.15rem;
    border-bottom: 1px solid rgba(255,255,255,0.14);
  }
  .nav__liste a:hover { border-bottom-color: var(--cyan); }

  /* La bordure basse sert ici de séparateur entre les entrées : la teinter
     ne marquerait rien de lisible. On passe par un fond et un liseré à gauche. */
  .entete .nav__liste a[aria-current] {
    border-bottom-color: rgba(255,255,255,0.14);
    background: rgba(0,195,204,0.14);
    box-shadow: inset 4px 0 0 var(--cyan);
    padding-left: 0.9rem;
  }

  .nav__actions { flex-direction: column; align-items: stretch; }
  /* Cibler uniquement les boutons DANS le menu déplié : sinon le bouton
     d'appel de l'en-tête passe en pleine largeur et casse la ligne. */
  .nav__actions .bouton--tel,
  .nav__actions .bouton--don { width: 100%; }
}

/* Sur petit écran, le bouton d'appel devient une barre fixe en bas :
   toujours visible, atteignable au pouce, jamais cachée par le menu. */
@media (max-width: 760px) {
  body { padding-bottom: 4.75rem; }

  .nav.est-ouvert {
    max-height: calc(100vh - 11rem);
    max-height: calc(100dvh - 11rem);
  }

  .entete__tel-mobile {
    position: fixed;
    inset: auto 0 0 0;
    border-radius: 0;
    border: 0;
    border-top: 3px solid var(--nuit);
    min-height: 4.25rem;
    font-size: 1.2rem;
    font-weight: 700;
    justify-content: center;
  }
  .entete__tel-mobile svg { width: 1.3em; height: 1.3em; }
  .tel-numero { display: inline; }
}

@media (max-width: 560px) {
  body { font-size: 1.125rem; }

  /* L'en-tête doit tenir sur une seule ligne, sinon il mange
     un cinquième de l'écran alors qu'il est collant. */
  .entete__inner { gap: 0.75rem; }
  .marque { gap: 0.55rem; }
  .marque__icone { width: 36px; }
  .marque__nom { font-size: 1.05rem; }
  .marque__baseline { font-size: 0.72rem; letter-spacing: 0.05em; }
  .burger { padding: 0.5rem 0.8rem; }
  .bloc-cta .bouton { width: 100%; }
  .limites { padding: 1.5rem 1.25rem; }
}

/* =========================================================
   Taille des zones cliquables (WCAG 2.5.8)

   Relevé le 2026-08-31 : sept liens de texte tombaient à 21 ou 22 px
   de haut. La norme tolère les liens placés au milieu d'une phrase,
   mais le public de ce site cumule souvent une déficience visuelle et
   des difficultés motrices : viser une cible de 21 px avec un doigt
   tremblant ou une souris imprécise, c'est rater et recommencer.
   On élargit donc la zone sans changer l'apparence du texte.
   ========================================================= */
.pied__liens a,
.pied__bloc p a {
  display: inline-block;
  padding: 0.45rem 0;
}
.hero__infos a,
.contact-liste__valeur {
  display: inline-block;
  padding: 0.25rem 0;
}

/* =========================================================
   Anneau de focus sur les fonds sombres

   Le cyan foncé utilisé par défaut est presque invisible sur
   le bleu nuit. Sur ces zones on passe au cyan vif.
   ========================================================= */
.entete :focus-visible,
.hero :focus-visible,
.section--sombre :focus-visible,
.pied :focus-visible,
.entete__tel-mobile:focus-visible {
  outline-color: var(--cyan);
}

/* ---------- Chiffres, deux éléments seulement ---------- */
.chiffres__liste {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Logos des partenaires ----------
   Les fichiers sont calibrés sur une largeur commune, pas sur une
   hauteur : chaque logo occupe la même largeur et sa hauteur suit
   son propre rapport. Chaque case est centrée pour que la rangée
   reste alignée malgré les hauteurs différentes. */
.logos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem 2.5rem;
  margin: 0 0 2.5rem;
  padding: 0;
}
.logos li {
  flex: 0 0 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
}
.logos img {
  width: 100%;
  height: auto;
}

/* ---------- Formulaire de contact ---------- */
.contact-rapide {
  background: var(--nuit-clair);
  border-left: 6px solid var(--cyan);
  border-radius: var(--rayon);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
  font-size: 1.0625rem;
}

/* Piège à robots : jamais affiché, jamais annoncé. */
.champ-piege { display: none; }

.formulaire {
  display: grid;
  gap: 1.75rem;
  margin-bottom: 2.5rem;
}

.champ { display: grid; gap: 0.5rem; }
.champ > label { font-weight: 600; font-size: 1.0625rem; }
.champ__mention { font-weight: 400; color: #B7C7CE; font-size: 0.95rem; }

.champ input,
.champ textarea {
  font: inherit;
  font-size: 1.0625rem;
  padding: 0.85rem 1rem;
  min-height: 3.25rem;
  width: 100%;
  border: 2px solid var(--creme-bord);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--texte);
}
.champ textarea { min-height: 9rem; line-height: 1.6; resize: vertical; }
.champ input:focus-visible,
.champ textarea:focus-visible { border-color: var(--cyan); }

.champ--groupe {
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--rayon);
  padding: 1.25rem 1.5rem 1.5rem;
  margin: 0;
}
.champ--groupe legend {
  padding: 0 0.5rem;
  font-weight: 600;
  font-size: 1.0625rem;
}
.choix {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.5rem 0;
}
.choix input[type="radio"] {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.2rem 0 0;
  flex: none;
  accent-color: var(--cyan);
}
.choix label { font-weight: 400; }

.formulaire__mention {
  font-size: 1rem;
  color: #DCE7EB;
  margin: 0;
}

.formulaire button { justify-self: start; }

@media (max-width: 560px) {
  .logos { gap: 1.25rem 1.75rem; justify-content: center; }
  .logos li { flex-basis: 140px; min-height: 80px; }
  .formulaire button { justify-self: stretch; width: 100%; }
  .champ--groupe { padding: 1rem 1rem 1.25rem; }
}

/* =========================================================
   Pages secondaires : événements et partenaires
   ========================================================= */

/* ---------- En-tête de page ----------
   Même fond que le hero de l'accueil, mais sans les portes d'entrée :
   ces pages ne sont pas des points de départ, elles se lisent. */
.page-tete {
  background: var(--nuit);
  color: var(--blanc);
  padding: clamp(2.25rem, 5vw, 3.5rem) 0 clamp(2.5rem, 5vw, 3.75rem);
}
.page-tete a:not(.bouton) { color: var(--cyan); }
.page-tete a:not(.bouton):hover { color: var(--blanc); }
.page-tete__titre {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 1rem;
}
.page-tete__texte {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: #DCE7EB;
  margin-bottom: 0;
}

/* Fil d'Ariane. La zone cliquable est élargie sans changer l'apparence,
   pour la même raison que les autres liens de texte du site. */
.fil {
  font-size: 1rem;
  color: #B7C7CE;
  margin-bottom: 0.75rem;
}
.fil a { display: inline-block; padding: 0.3rem 0; }

/* ---------- Pages légales ----------
   Texte long à lire d'une traite : intertitres plus petits que ceux des
   sections de l'accueil, sinon chaque rubrique de trois lignes prend
   l'allure d'une nouvelle page. */
.texte-legal h2 { font-size: 1.5rem; margin: 2.75rem 0 0.75rem; }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal ul { padding-left: 1.4rem; margin: 0 0 1.1em; }
.texte-legal li { margin-bottom: 0.6rem; }
.texte-legal__maj { margin-top: 3rem; font-size: 1rem; color: var(--texte-doux); }

/* ---------- Liste des événements ----------
   Une seule colonne, affiche à gauche. L'affiche est un repère visuel,
   pas le porteur de l'information : tout ce qu'elle annonce est écrit
   à côté, en texte sélectionnable et agrandissable. */
.evenements {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
.evenement {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.75rem;
  align-items: start;
  background: var(--blanc);
  border: 2px solid var(--creme-bord);
  border-radius: var(--rayon);
  padding: 1.5rem;
}
.evenement__affiche {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--creme-bord);
}
.evenement__titre {
  font-size: 1.3rem;
  color: var(--nuit);
  margin-bottom: 0.5rem;
}
.evenement__date {
  font-weight: 700;
  color: var(--cyan-sombre);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1rem;
  margin-bottom: 0.35rem;
}
.evenement__lieu {
  color: var(--texte-doux);
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.section--sombre .evenement__date { color: var(--cyan); }
.section--sombre .evenement__lieu { color: #DCE7EB; }

/* Événement passé sans affiche : dans la grille à deux colonnes, le texte
   tomberait dans les 220 px réservés à l'image. Il prend toute la largeur,
   avec une longueur de ligne plafonnée pour rester lisible. */
.evenement--sans-affiche { grid-template-columns: 1fr; }
.evenement--sans-affiche .evenement__corps { max-width: 68ch; }
.evenement__intervenants-titre { margin-bottom: 0.5rem; }
.evenement__intervenants { margin-bottom: 0; list-style: disc; }  /* imbriquée, elle prendrait des cercles vides */
.evenement__intervenants li:last-child { margin-bottom: 0; }

/* Dans les cartes « à venir », les mêmes libellés servent sans affiche. */
.carte .evenement__date { margin-bottom: 0.5rem; }
.carte .evenement__lieu { margin-top: 0.6rem; }

@media (max-width: 760px) {
  .evenement {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    justify-items: start;
  }
  .evenement__affiche { max-width: 320px; }
}