/* ==================================================================
   CRESSMA — site vitrine   ·   v1.4.3
   FICHIER : /assets/css/site.css
   RÔLE    : Feuille de style unique de tout le site
   ================================================================== */
/* ============================================================
   CRESSMA — site vitrine · site.css (fichier unique)
   Ordre : polices → reset → variables → base → composants
           → sections → utilitaires animation → replis → media queries
   ============================================================ */

/* ---------- 1. Polices auto-hébergées (variables, sous-jeu latin) ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/public-sans-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- 2. Reset ---------- */
* { box-sizing: border-box; }
html { background: var(--blanc); }
body { margin: 0; color: var(--profond); font-family: var(--font-texte); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { overflow-wrap: break-word; }

/* ---------- 3. Variables ---------- */
:root {
  /* Palette officielle (brief) */
  --blanc:   #FFFFFF;
  --ecume:   #E6F4F6;   /* fond clair */
  --lagon:   #2AA5B8;   /* décor uniquement, jamais porteur de texte courant */
  --moyen:   #147A8C;   /* liens ; sur écume : titres >= 24px seulement */
  --profond: #0B4F63;   /* encre principale */
  --corail:  #F4A259;   /* CTA principal + Espace membres uniquement */
  --brou:    #5C3505;   /* texte sur corail */

  /* Teintes dérivées entérinées (hovers, fonds, encres secondaires) */
  --encre-2:      #1B4C5B;   /* texte secondaire sur blanc */
  --encre-3:      #164E5F;   /* texte secondaire sur écume */
  --encre-hero:   #12495A;
  --lien-fonce:   #10697A;
  --corail-hover: #F0913A;
  --filet:        #C9E4E9;   /* bordures */
  --filet-2:      #D8ECEF;
  --ecume-2:      #DDF0F3;   /* texte clair sur profond */
  --abysse:       #073E4E;   /* fond du footer */

  --font-titre: 'Archivo', sans-serif;
  --font-texte: 'Public Sans', system-ui, sans-serif;

  --largeur: 1240px;
  --rayon: 8px;
  --rayon-carte: 14px;
}

/* ---------- 4. Base ---------- */
a { color: var(--moyen); }
a:hover { color: var(--profond); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--lagon); outline-offset: 3px; border-radius: 4px;
}
.conteneur { max-width: var(--largeur); margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* Badge de profondeur / d'entête */
.badge {
  margin: 0 0 16px; display: inline-flex; align-items: center; padding: 6px 14px;
  border-radius: 999px; background: var(--ecume); color: var(--profond);
  font-family: var(--font-titre); font-variation-settings: 'wght' 700;
  font-size: 0.9375rem; font-variant-numeric: tabular-nums;
}

/* Boutons */
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px;
  border-radius: 999px; text-decoration: none;
  font-family: var(--font-titre); font-variation-settings: 'wght' 720; font-size: 1.0625rem;
}
.btn-corail { background: var(--corail); color: var(--brou); }
.btn-corail:hover { background: var(--corail-hover); color: var(--brou); }
.btn-contour { border: 1.5px solid var(--profond); color: var(--profond); font-variation-settings: 'wght' 620; }
.btn-contour:hover { background: var(--blanc); color: var(--profond); }
.btn-blanc { background: var(--blanc); color: var(--profond); font-variation-settings: 'wght' 700; font-size: 1rem; padding: 0 20px; }
.btn-blanc:hover { background: var(--ecume); color: var(--profond); }

/* ---------- 5. Entête ---------- */
.entete {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  animation: descenteNav 340ms cubic-bezier(.2, .7, .2, 1) 120ms both;
}
/* Repli : sans backdrop-filter (anciens navigateurs), fond opaque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .entete { background: rgba(255, 255, 255, 0.97); }
}
.entete-int {
  max-width: var(--largeur); margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 24px; justify-content: space-between;
}
.logo { text-decoration: none; display: flex; align-items: baseline; gap: 8px; min-height: 48px; padding-top: 12px; }
.logo-nom {
  font-family: var(--font-titre); font-variation-settings: 'wdth' 118, 'wght' 820;
  font-size: 26px; letter-spacing: -0.02em; color: var(--profond);
}
.logo-lieu { font-size: 14px; color: var(--moyen); }
.nav-liens { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; white-space: nowrap; }
.lien-nav {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px;
  border-radius: 999px; text-decoration: none; color: var(--profond); font-size: 16px;
}
.lien-nav:hover { background: var(--ecume); color: var(--profond); }
.lien-nav.actif { background: var(--ecume); }
.entete-actions { display: flex; align-items: center; gap: 8px; }
.entete .btn-corail { min-height: 48px; padding: 0 20px; font-size: 16px; font-variation-settings: 'wght' 700; white-space: nowrap; }

/* Menu mobile (details/summary, utilisable au clavier) */
.menu-mobile { display: none; position: relative; }
.menu-mobile > summary {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--filet);
  cursor: pointer; list-style: none; color: var(--profond);
}
.menu-mobile > summary::-webkit-details-marker { display: none; }
.menu-mobile > summary:hover { background: var(--ecume); }
.burger { display: flex; flex-direction: column; gap: 5px; }
.burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--profond); }
.croix { display: none; font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 22px; line-height: 1; }
.menu-mobile[open] .croix { display: block; }
.menu-mobile[open] .burger { display: none; }
.menu-mobile > nav {
  position: absolute; right: -24px; left: auto; top: calc(100% + 10px);
  width: calc(100vw); max-width: 100vw;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 32px rgba(11, 79, 99, 0.14);
  padding: 8px 24px 20px; display: flex; flex-direction: column;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .menu-mobile > nav { background: #FFFFFF; }
}
.menu-mobile > nav a {
  display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--ecume);
  text-decoration: none; color: var(--profond);
  font-family: var(--font-titre); font-variation-settings: 'wdth' 106, 'wght' 700; font-size: 1.25rem;
}
.menu-mobile > nav a:last-child { border-bottom: 0; }
.menu-mobile > nav a:hover { color: var(--moyen); }

/* ---------- 6. Fond « descente » de l'accueil ---------- */
.fond-descente { animation: fondDescente linear both; animation-timeline: scroll(root block); }

/* ---------- 7. Hero (accueil) ---------- */
.hero { position: relative; min-height: 94dvh; margin-top: -76px; display: flex; align-items: flex-end; overflow: clip; }
.hero-photo { position: absolute; inset: -14dvh 0; animation: balayage 900ms cubic-bezier(.3, .8, .2, 1) 60ms both, paraPhoto linear both; animation-timeline: auto, scroll(root block); animation-range: normal, 0 94dvh; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-voile { position: absolute; inset: -8dvh 0; animation: paraVoile linear both; animation-timeline: scroll(root block); animation-range: 0 94dvh; }
.hero-voile > div {
  position: absolute; inset: -12%; opacity: 0.5; mix-blend-mode: screen;
  background: radial-gradient(40% 26% at 34% 14%, rgba(255,255,255,0.75), transparent 70%),
              radial-gradient(34% 22% at 72% 34%, rgba(230,244,246,0.6), transparent 72%);
  animation: surface 14s ease-in-out infinite; will-change: transform;
}
.hero-texte { position: relative; width: 100%; animation: paraTexte linear both; animation-timeline: scroll(root block); animation-range: 0 94dvh; }
.hero-texte > .conteneur { padding-bottom: 56px; }
.hero-panneau {
  max-width: 620px; background: rgba(230, 244, 246, 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: var(--rayon-carte); padding: clamp(24px, 3vw, 40px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-panneau { background: rgba(230, 244, 246, 0.97); }
}
.hero h1 {
  margin: 0; font-family: var(--font-titre);
  font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 0.94; letter-spacing: -0.025em;
  color: var(--profond); font-variation-settings: 'wdth' 114, 'wght' 800; text-wrap: balance;
}
.hero h1 span { display: block; animation: ligneHaut 620ms cubic-bezier(.2, .8, .2, 1) both; }
.hero h1 span:nth-child(1) { animation-delay: 120ms; }
.hero h1 span:nth-child(2) { animation-delay: 260ms; }
.hero h1 span:nth-child(3) { animation-delay: 400ms; }
.hero-phrase {
  margin: 22px 0 0; max-width: 52ch;
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem); line-height: 1.55;
  color: var(--encre-hero); text-wrap: pretty;
  animation: montee 520ms ease-out 560ms both;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; animation: montee 520ms ease-out 680ms both; }

/* ---------- 8. Sections communes ---------- */
.section { padding-top: clamp(56px, 8vw, 104px); }
.section--large { padding-top: clamp(72px, 10vw, 128px); }
.section--geante { padding-top: clamp(104px, 15vw, 208px); }
.titre-section {
  margin: 0 0 12px; transform-origin: left center; font-family: var(--font-titre);
  font-size: clamp(1.875rem, 4vw, 2.875rem); line-height: 1.04; letter-spacing: -0.018em;
  text-wrap: balance; font-variation-settings: 'wdth' 108, 'wght' 760;
  animation: poseTitre linear both;
  animation-timeline: view();
  animation-range: entry 4% entry 60%;
}
.intro-section {
  margin: 0 0 32px; max-width: 62ch; font-size: 1.0625rem; line-height: 1.6;
  color: var(--encre-2); text-wrap: pretty;
  animation: revele 1ms linear both; animation-timeline: view(); animation-range: entry 8% entry 62%;
}

/* Médias avec parallaxe interne */
.media { position: relative; overflow: clip; border-radius: var(--rayon); animation: sortieImage linear both; animation-timeline: view(); animation-range: cover 82% cover 100%; }
.media-para { position: absolute; inset: -9% 0; animation: paraSection linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
.media-para img { width: 100%; height: 100%; object-fit: cover; animation: poseImage linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }

/* ---------- 9. Bento (plongées de la semaine) ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); gap: 16px; }
.carte-bento { container-type: inline-size; animation: pose linear both; animation-timeline: view(); animation-range: entry 4% entry 46%; }
.carte-blanche { background: var(--blanc); border: 1px solid var(--filet-2); border-radius: var(--rayon); padding: 28px; }
.bento-planning { grid-column: 1 / 3; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 18px; }
.bento-planning h3 { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 104, 'wght' 720; font-size: 1.25rem; }
.bento-planning .repli { margin: 0; flex: 1; font-size: 1.0625rem; line-height: 1.6; color: var(--encre-3); text-wrap: pretty; }
.bento-planning .lien-planning { font-size: 1rem; align-self: flex-start; min-height: 48px; display: inline-flex; align-items: center; }
.bento-img-1 { grid-column: 3 / 4; grid-row: 1 / 3; min-height: 380px; }
.bento-turquoise {
  grid-column: 4 / 5; grid-row: 1 / 2; background: var(--lagon); border-radius: var(--rayon);
  padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  animation-range: entry 4% entry 52%;
}
.bento-turquoise h3 {
  margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 112, 'wght' 780;
  font-size: clamp(1.375rem, 1.8vw, 1.75rem); line-height: 1.02; color: var(--blanc); text-wrap: balance;
}
.bento-turquoise p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--blanc); text-wrap: pretty; }
.bento-img-2 { grid-column: 4 / 5; grid-row: 2 / 3; }
.bento-chiffres {
  grid-column: 1 / 3; grid-row: 3 / 4;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  animation-range: entry 4% entry 64%;
}
.chiffre {
  margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 116, 'wght' 820;
  font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.chiffre-libelle { margin: 8px 0 0; font-size: 0.9375rem; line-height: 1.4; color: var(--encre-2); }
.bento-carte-sites {
  grid-column: 3 / 5; grid-row: 3 / 4; border-radius: var(--rayon); overflow: clip;
  position: relative; background: var(--profond); min-height: 220px;
  animation-range: entry 4% entry 58%;
}
.carte-sites-fond { position: absolute; inset: 0; transition: transform 420ms cubic-bezier(.2, .7, .2, 1); }
.bento-carte-sites:hover .carte-sites-fond { transform: scale(1.045); }
.carte-sites-contenu { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; gap: 20px; }
.carte-sites-contenu h3 {
  margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 106, 'wght' 720;
  font-size: 1.25rem; color: var(--blanc); text-wrap: balance;
}
@container (min-width: 420px) {
  .carte-sites-contenu h3, .bento-planning h3 { font-size: 1.5rem; }
  .carte-sites-contenu { padding: 32px; }
}

/* ---------- 10. Portes (par où on commence) ---------- */
.portes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.porte { display: flex; flex-direction: column; text-decoration: none; color: var(--profond); border-radius: var(--rayon); transition: transform 300ms cubic-bezier(.2, .7, .2, 1); }
.porte:hover { transform: translateY(-4px); color: var(--profond); }
.porte .media { aspect-ratio: 4 / 3; }
.porte-libelle { display: flex; flex-direction: column; gap: 10px; padding: 22px 4px 0; }
.porte-titre { font-family: var(--font-titre); font-variation-settings: 'wdth' 110, 'wght' 760; font-size: 1.625rem; line-height: 1.05; }
.porte-texte { font-size: 1.0625rem; line-height: 1.55; color: var(--encre-2); text-wrap: pretty; }

/* ---------- 11. Encart mercredi ---------- */
.encart-mercredi { max-width: 68ch; border-left: 2px solid var(--lagon); padding-left: clamp(20px, 3vw, 36px); }
.encart-mercredi h2 {
  margin: 0 0 14px; transform-origin: left center; font-family: var(--font-titre);
  font-variation-settings: 'wdth' 106, 'wght' 720; font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.06; text-wrap: balance;
  animation: poseTitre linear both; animation-timeline: view(); animation-range: entry 4% entry 60%;
}
.encart-mercredi p {
  margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--encre-3); text-wrap: pretty;
  animation: revele 1ms linear both; animation-timeline: view(); animation-range: entry 8% entry 58%;
}

/* ---------- 12. Vidéo (façade sans iframe) ---------- */
.video-facade { border-radius: 10px; overflow: clip; position: relative; background: var(--profond); animation: sortieImage linear both; animation-timeline: view(); animation-range: cover 84% cover 100%; }
.video-bouton { display: block; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; position: relative; aspect-ratio: 16 / 9; text-decoration: none; }
.video-bouton img { width: 100%; height: 100%; object-fit: cover; animation: poseImage linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
.video-degrade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,79,99,0.62), rgba(11,79,99,0.08)); }
.video-lecture {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; border-radius: 999px; background: var(--corail); color: var(--brou);
  font-size: 30px; line-height: 1; padding-left: 6px;
}
.video-duree { position: absolute; left: 20px; bottom: 16px; color: var(--blanc); font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 1.0625rem; }
.video-cadre { position: relative; aspect-ratio: 16 / 9; }
.video-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.chapitres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.chapitre {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-height: 48px; padding: 16px 18px; border-radius: var(--rayon);
  border: 1px solid var(--filet); background: var(--blanc); color: var(--profond);
  text-align: left; cursor: pointer; font-family: var(--font-texte); text-decoration: none;
}
.chapitre:hover { border-color: var(--lagon); background: var(--ecume); color: var(--profond); }
.chapitre-titre { font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 1.0625rem; }
.chapitre-temps { font-size: 0.9375rem; color: var(--moyen); font-variant-numeric: tabular-nums; }

/* ---------- 13. Asso (un club, pas un prestataire) ---------- */
.asso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.asso .media { aspect-ratio: 4 / 3; animation-range: cover 84% cover 100%; }
.asso h2 {
  margin: 0 0 20px; transform-origin: left center; font-family: var(--font-titre);
  font-size: clamp(1.875rem, 4.4vw, 3.25rem); line-height: 1; letter-spacing: -0.02em;
  color: var(--profond); text-wrap: balance; font-variation-settings: 'wdth' 108, 'wght' 780;
  animation: poseTitre linear both;
  animation-timeline: view(); animation-range: entry 4% entry 60%;
}
.asso-texte { margin: 0; max-width: 60ch; font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem); line-height: 1.62; color: var(--encre-3); }
.asso-texte span { display: block; text-wrap: pretty; animation: revele 1ms linear both; animation-timeline: view(); }
.asso-texte span:nth-child(1) { animation-range: entry 10% entry 42%; }
.asso-texte span:nth-child(2) { animation-range: entry 16% entry 50%; }
.asso-texte span:nth-child(3) { animation-range: entry 22% entry 58%; }
.asso-lien { display: inline-flex; align-items: center; min-height: 48px; margin-top: 20px; font-size: 1.0625rem; }

/* ---------- 14. Bandeau membres ---------- */
.bandeau-membres {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center;
  background: var(--profond); border-radius: var(--rayon-carte);
  padding: clamp(28px, 4vw, 48px);
}
.bandeau-membres h2, .bandeau-membres .bandeau-titre {
  margin: 0 0 12px; font-family: var(--font-titre); font-variation-settings: 'wdth' 112, 'wght' 760;
  font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.04; color: var(--blanc); text-wrap: balance;
}
.bandeau-membres p { margin: 0; max-width: 56ch; font-size: 1.0625rem; line-height: 1.55; color: var(--ecume-2); text-wrap: pretty; }
.bandeau-membres .btn-corail { white-space: nowrap; }
.section-bandeau { padding-top: clamp(72px, 10vw, 120px); padding-bottom: clamp(64px, 9vw, 104px); }

/* ---------- 15. Respiration avant footer ---------- */
.respiration { position: relative; height: 45dvh; overflow: clip; animation: sortieImage linear both; animation-timeline: view(); animation-range: cover 90% cover 100%; }
.respiration .media-para { inset: -9% 0; }
.respiration-degrade { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 45%, rgba(7, 62, 78, 0.94) 100%); }

/* ---------- 16. Entête de page (pages intérieures) ---------- */
.bandeau-page {
  max-width: var(--largeur); margin: 0 auto; padding: clamp(32px, 5vw, 64px) 24px 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 56px); align-items: center; min-height: 46dvh;
}
.bandeau-page h1 {
  margin: 0; max-width: 20ch; font-family: var(--font-titre);
  font-size: clamp(2.25rem, 5.6vw, 4rem); line-height: 0.96; letter-spacing: -0.024em;
  color: var(--profond); font-variation-settings: 'wdth' 116, 'wght' 800; text-wrap: balance;
  animation: ligneHaut 560ms cubic-bezier(.2, .8, .2, 1) 80ms both;
}
.bandeau-page-phrase {
  margin: 22px 0 0; max-width: 56ch;
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem); line-height: 1.6;
  color: var(--encre-3); text-wrap: pretty;
  animation: montee 480ms ease-out 320ms both;
}
.bandeau-page-image {
  position: relative; min-height: 38dvh; border-radius: 16px; overflow: clip;
  background: var(--profond); animation: balayage 760ms cubic-bezier(.3, .8, .2, 1) 60ms both;
}
.bandeau-page-image img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* ---------- 17. Pied de page ---------- */
.pied { background: var(--abysse); color: var(--ecume); }
.pied-int {
  max-width: var(--largeur); margin: 0 auto; padding: clamp(48px, 6vw, 72px) 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px;
}
.pied-logo { margin: 0 0 12px; font-family: var(--font-titre); font-variation-settings: 'wdth' 118, 'wght' 820; font-size: 22px; color: var(--blanc); }
.pied-titre { margin: 0 0 12px; font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 1rem; color: var(--blanc); }
.pied-texte { margin: 0; font-size: 1rem; line-height: 1.6; }
.pied-tel { margin: 0 0 8px; }
.pied-tel a { color: var(--ecume); font-size: 1.0625rem; display: inline-flex; min-height: 48px; align-items: center; }
.pied-horaires { display: flex; flex-direction: column; gap: 8px; font-size: 1rem; line-height: 1.5; }
.pied-horaires p { margin: 0; }
.pied-horaires strong { font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-weight: normal; color: var(--blanc); }
.pied-plan { display: flex; flex-direction: column; }
.pied-plan a { color: var(--ecume); font-size: 1rem; min-height: 44px; display: inline-flex; align-items: center; }
.pied-plan a:hover, .pied-tel a:hover, .pied-credit a:hover { color: var(--blanc); }
.pied-credit { border-top: 1px solid rgba(230, 244, 246, 0.18); }
.pied-credit p { max-width: var(--largeur); margin: 0 auto; padding: 18px 24px; font-size: 0.9375rem; color: var(--ecume-2); text-align: center; text-wrap: balance; }
.pied-credit a { color: var(--ecume); }

/* ---------- 18. Curseur bulle (desktop pointeur fin uniquement) ---------- */
.bulle { display: none; }
@media (hover: hover) and (pointer: fine) {
  .bulle {
    display: block; position: fixed; left: 0; top: 0; width: 16px; height: 16px;
    margin: -8px 0 0 -8px; border-radius: 999px; border: 1.5px solid var(--lagon);
    background: rgba(42, 165, 184, 0.14); pointer-events: none; opacity: 0; z-index: 60;
    transition: width 220ms ease, height 220ms ease, opacity 200ms ease, margin 220ms ease;
  }
}

/* ---------- 19. Keyframes ---------- */
@keyframes fondDescente {
  0%   { background-color: #FFFFFF; }
  40%  { background-color: oklch(0.985 0.006 206); }
  74%  { background-color: oklch(0.955 0.016 206); }
  85%  { background-color: oklch(0.80 0.050 212); }
  93%  { background-color: oklch(0.40 0.080 224); }
  100% { background-color: oklch(0.30 0.075 228); }
}
@keyframes ligneHaut { from { clip-path: inset(0 0 105% 0); transform: translateY(0.14em); } to { clip-path: inset(0 0 -10% 0); transform: translateY(0); } }
@keyframes balayage { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes descenteNav { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes montee { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes surface { 0% { transform: translate3d(-4%, -2%, 0) scale(1.06); } 50% { transform: translate3d(4%, 2%, 0) scale(1.12); } 100% { transform: translate3d(-4%, -2%, 0) scale(1.06); } }
@keyframes paraPhoto { from { transform: translateY(0) scale(1.1); } to { transform: translateY(13dvh) scale(1.1); } }
@keyframes paraVoile { from { transform: translateY(0); } to { transform: translateY(6dvh); } }
@keyframes paraTexte { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-12dvh); opacity: 0; } }
@keyframes paraSection { from { transform: translateY(-8%); } to { transform: translateY(8%); } }
@keyframes poseImage { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes sortieImage { from { opacity: 1; } to { opacity: 0.1; } }
@keyframes poseTitre { from { opacity: 0.75; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes revele { from { clip-path: inset(0 0 100% 0); transform: translateY(10px); } to { clip-path: inset(0 0 -20% 0); transform: translateY(0); } }
@keyframes pose { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 20. Repli sans timelines de scroll ----------
   Safari < 26, Firefox : fond clair fixe, tout visible, encre sombre partout. */
@supports not (animation-timeline: scroll()) {
  .fond-descente { animation: none; background-color: oklch(0.975 0.010 206); }
  @supports not (background-color: oklch(0.975 0.010 206)) {
    .fond-descente { background-color: #F2F8F9; }
  }
  .titre-section, .intro-section, .encart-mercredi h2, .encart-mercredi p,
  .asso h2, .asso-texte span, .carte-bento, .media, .media-para, .media-para img,
  .video-facade, .video-bouton img, .respiration, .hero-photo, .hero-voile, .hero-texte {
    animation: none; clip-path: none; opacity: 1; transform: none;
  }
  .hero h1 span, .hero-phrase, .hero-cta, .bandeau-page h1, .bandeau-page-phrase,
  .bandeau-page-image, .entete {
    /* Les animations d'entrée (time-based) restent : elles ne dépendent pas du scroll. */
  }
}

/* ---------- 21. Reduced motion : tout est coupé ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important; transition: none !important;
    clip-path: none !important;
  }
  .hero-photo, .hero-voile, .hero-texte, .hero h1 span, .hero-phrase, .hero-cta,
  .titre-section, .intro-section, .carte-bento, .media, .media-para, .media-para img,
  .asso h2, .asso-texte span, .bandeau-page h1, .bandeau-page-phrase, .bandeau-page-image,
  .encart-mercredi h2, .encart-mercredi p, .video-facade, .respiration, .entete {
    opacity: 1 !important; transform: none !important;
  }
  .fond-descente { background-color: #F2F8F9 !important; }
  .bulle { display: none !important; }
}

/* ---------- 22. Media queries ---------- */
@media (max-width: 1080px) {
  .nav-liens { display: none; }
  .menu-mobile { display: block; }
}
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
  .bento > * { grid-column: auto; grid-row: auto; min-height: 240px; }
  .bento-chiffres { grid-template-columns: 1fr; }
  .portes, .asso, .chapitres { grid-template-columns: 1fr; }
  .bandeau-membres { grid-template-columns: 1fr; }
  .bandeau-page { grid-template-columns: 1fr; }
  .bandeau-page-image { aspect-ratio: 16 / 9; min-height: 0; }
  .bandeau-page-image img { position: static; }
}
@media (max-width: 480px) {
  .entete .btn-corail { padding: 0 14px; font-size: 15px; }
  .entete-int { gap: 12px; }
}

/* ============================================================
   23. PAGES INTÉRIEURES — ajouts v0.2.0
   ============================================================ */

/* Fond « douceur » des pages intérieures (plus léger que la descente de l'accueil) */
.fond-douceur { animation: fondDouceur linear both; animation-timeline: scroll(root block); }
@keyframes fondDouceur {
  0%   { background-color: #FFFFFF; }
  74%  { background-color: oklch(0.98 0.008 206); }
  100% { background-color: oklch(0.955 0.016 206); }
}
@keyframes traitTemps { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Barre d'ancres de section */
.ancres { border-bottom: 1px solid var(--filet-2); }
.ancres-int { max-width: var(--largeur); margin: 0 auto; padding: 6px 24px; display: flex; gap: 6px; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ancres-int a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 999px; text-decoration: none; color: var(--profond); font-size: 1rem; }
.ancres-int a:hover { background: var(--ecume); color: var(--profond); }

/* Titre de section, variante intérieure (plus petite que l'accueil) */
.titre-section--page {
  margin: 0 0 16px; transform-origin: left center; font-family: var(--font-titre);
  font-size: clamp(1.625rem, 3.4vw, 2.5rem); line-height: 1.05; letter-spacing: -0.016em;
  text-wrap: balance; font-variation-settings: 'wdth' 106, 'wght' 740;
  animation: poseTitre linear both;
  animation-timeline: view(); animation-range: entry 4% entry 60%;
}
.texte-page { margin: 0 0 14px; font-size: 1.0625rem; line-height: 1.65; color: var(--encre-3); text-wrap: pretty; }
.texte-page--anim { animation: revele 1ms linear both; animation-timeline: view(); animation-range: entry 8% entry 52%; }
.note-page { margin: 18px 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--encre-2); }

/* ---- Frise chronologique (Le Club) ---- */
.frise { position: relative; --col: clamp(104px, 11vw, 164px); --gouttiere: clamp(18px, 2.4vw, 30px); --retrait: clamp(30px, 4vw, 48px); }
.frise-trait {
  position: absolute; left: calc(var(--col) + var(--gouttiere) + 6px); top: 10px; bottom: 10px;
  width: 2px; background: var(--lagon); transform-origin: top center;
  animation: traitTemps linear both; animation-timeline: view(); animation-range: entry 20% exit 30%;
}
.frise ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: clamp(26px, 3.4vw, 44px); }
.frise li { display: grid; grid-template-columns: var(--col) 1fr; gap: var(--gouttiere); align-items: start; animation: pose linear both; animation-timeline: view(); animation-range: entry 6% entry 50%; }
.frise-date { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 96, 'wght' 800; font-size: clamp(1rem, 1.3vw, 1.375rem); line-height: 1.15; hyphens: none; letter-spacing: -0.015em; color: var(--profond); font-variant-numeric: tabular-nums; text-align: right; }
.frise-corps { position: relative; padding-left: var(--retrait); }
.frise-pastille { position: absolute; left: -1px; top: 6px; width: 14px; height: 14px; border-radius: 999px; border: 3px solid var(--blanc); background: var(--lagon); }
.frise-pastille--bateau { background: var(--corail); }
.frise-nature { margin: 0 0 4px; font-size: 0.9375rem; color: var(--lien-fonce); }
.frise-corps h3 { margin: 0 0 6px; font-family: var(--font-titre); font-variation-settings: 'wdth' 106, 'wght' 720; font-size: 1.125rem; line-height: 1.2; }
.frise-texte { margin: 0; max-width: 64ch; font-size: 1rem; line-height: 1.6; color: var(--encre-3); text-wrap: pretty; }

/* ---- Gestes (Esprit Asso) ---- */
.gestes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.gestes li { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--filet-2); overflow: clip; animation: pose linear both; animation-timeline: view(); animation-range: entry 2% entry 46%; }
.gestes li > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.geste-titre { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 110, 'wght' 800; font-size: 1.5rem; line-height: 1; letter-spacing: -0.02em; color: var(--profond); }
.geste-num { display: flex; align-items: center; justify-content: center; flex: none; width: 68px; height: 68px; border-radius: 12px; background: var(--ecume); color: var(--lien-fonce); font-family: var(--font-titre); font-variation-settings: 'wght' 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.geste-texte { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--encre-3); text-wrap: pretty; }
.geste--span2 { grid-column: span 2; }
.geste--span3 { grid-column: span 3; }
.geste--span4 { grid-column: span 4; }
.gestes li.geste--profond { background: var(--profond); border-color: var(--profond); padding: 30px; }
.gestes li.geste--profond .geste-titre { color: var(--blanc); font-size: 1.75rem; }
.gestes li.geste--profond .geste-texte { color: var(--ecume-2); }
.gestes li.geste--profond .geste-num { width: 84px; height: 84px; margin: -10px -14px 0 0; background: rgba(230, 244, 246, 0.18); color: var(--ecume-2); }
.gestes li.geste--lagon { background: var(--lagon); border-color: var(--lagon); padding: 30px; }
.gestes li.geste--lagon .geste-titre { color: var(--blanc); font-size: 1.75rem; }
.gestes li.geste--lagon .geste-texte { color: var(--blanc); }
.gestes li.geste--lagon .geste-num { width: 92px; height: 92px; margin: -12px -16px 0 0; background: rgba(255, 255, 255, 0.22); color: var(--blanc); }
.gestes li.geste--ecume { background: var(--ecume); border-color: #CFE7EB; }
.gestes li.geste--ecume .geste-num { background: var(--blanc); }
.gestes li.geste--petit .geste-titre { font-size: 1.375rem; }
.gestes li.geste--petit .geste-num { width: 60px; height: 60px; }

/* ---- Deux colonnes (encadrants, offre/matériel) ---- */
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.brevets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.brevet { display: flex; align-items: baseline; gap: 14px; padding: 22px 24px; border-radius: 12px; background: var(--blanc); border: 1px solid var(--filet-2); animation: pose linear both; animation-timeline: view(); animation-range: entry 4% entry 54%; }
.brevet-n { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 116, 'wght' 820; font-size: 2.5rem; line-height: 0.9; letter-spacing: -0.02em; color: var(--lien-fonce); font-variant-numeric: tabular-nums; }
.brevet-libelle { margin: 0; font-size: 1.0625rem; line-height: 1.35; }
.brevet-libelle span { display: block; font-size: 0.9375rem; color: var(--encre-2); }
.brevet--plein { background: var(--ecume); border-color: #CFE7EB; align-items: center; }
.brevet--plein p { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 1.0625rem; color: var(--profond); }

/* ---- Documents à télécharger ---- */
.documents { display: flex; flex-direction: column; gap: 10px; }
.document {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center;
  min-height: 48px; padding: 18px 22px; border-radius: 12px;
  background: var(--blanc); border: 1px solid var(--filet-2);
  text-decoration: none; color: var(--profond);
}
.document:hover { border-color: var(--lagon); background: var(--ecume); color: var(--profond); }
.document-titre { display: block; font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 1.0625rem; line-height: 1.3; }
.document-mention { display: block; margin-top: 4px; font-size: 0.9375rem; color: var(--encre-2); }
.document-format { font-size: 0.9375rem; color: var(--lien-fonce); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Partenaires ---- */
.partenaires { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.partenaire { display: flex; flex-direction: column; gap: 12px; }
.partenaire-logo { position: relative; aspect-ratio: 3 / 2; border-radius: 12px; background: var(--blanc); border: 1px solid var(--filet-2); filter: grayscale(1); opacity: 0.75; transition: filter 300ms ease, opacity 300ms ease; }
.partenaire-logo:hover { filter: grayscale(0); opacity: 1; }
.partenaire-logo p { position: absolute; right: 12px; bottom: 10px; margin: 0; font-size: 0.9375rem; color: var(--lien-fonce); }
.partenaire-nom { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 1.0625rem; }
.partenaire-texte { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--encre-3); text-wrap: pretty; }

/* ---- Rythme de la semaine (Plonger) ---- */
.rythme { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rythme-carte { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--filet-2); animation: pose linear both; animation-timeline: view(); animation-range: entry 2% entry 46%; }
.rythme-quand { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 110, 'wght' 800; font-size: 1.5rem; line-height: 1; letter-spacing: -0.02em; color: var(--profond); }
.rythme-detail { margin: 0; font-size: 0.9375rem; color: var(--lien-fonce); }
.rythme-texte { margin: 6px 0 0; font-size: 1rem; line-height: 1.55; color: var(--encre-3); text-wrap: pretty; }
.rythme-carte--profond { background: var(--profond); border-color: var(--profond); }
.rythme-carte--profond .rythme-quand { color: var(--blanc); }
.rythme-carte--profond .rythme-detail { color: #A9DCE5; }
.rythme-carte--profond .rythme-texte { color: var(--ecume-2); }

/* ---- Listes offre / matériel ---- */
.liste-lignes { display: flex; flex-direction: column; }
.liste-lignes p { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: baseline; margin: 0; padding: 14px 2px; border-top: 1px solid var(--filet-2); font-size: 1.0625rem; }
.liste-lignes p:first-child { border-top: 0; }
.liste-nom { font-family: var(--font-titre); font-variation-settings: 'wght' 700; }
.liste-detail { font-size: 0.9375rem; color: var(--encre-2); text-align: right; }
.materiel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.materiel p { margin: 0; padding: 18px 20px; border-radius: 12px; background: var(--blanc); border: 1px solid var(--filet-2); font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 1.0625rem; }
.materiel p span { display: block; margin-top: 4px; font-family: var(--font-texte); font-variation-settings: normal; font-size: 0.9375rem; color: var(--encre-3); }

/* ---- Sites de plongée ---- */
.filtres-sites { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.filtre-site {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px;
  border-radius: 999px; border: 1.5px solid var(--filet); background: var(--blanc); color: var(--profond);
  font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 1rem;
  cursor: pointer; text-decoration: none;
}
.filtre-site:hover { border-color: var(--lagon); color: var(--profond); }
.filtre-site[aria-pressed="true"] { background: var(--profond); border-color: var(--profond); color: var(--blanc); }
.compte-sites { margin: 0 0 24px; font-size: 0.9375rem; color: var(--lien-fonce); font-variant-numeric: tabular-nums; }
.sites-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.site-carte { display: flex; flex-direction: column; border-radius: 12px; background: var(--blanc); border: 1px solid var(--filet-2); overflow: clip; animation: pose linear both; animation-timeline: view(); animation-range: entry 2% entry 40%; }
.site-visuel { position: relative; aspect-ratio: 16 / 10; overflow: clip; background: var(--profond); }
.site-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms cubic-bezier(.2, .7, .2, 1); }
.site-carte:hover .site-visuel img { transform: scale(1.06); }
.site-zone { position: absolute; left: 12px; top: 12px; margin: 0; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--profond); font-size: 0.875rem; font-family: var(--font-titre); font-variation-settings: 'wght' 700; }
.site-corps { padding: 18px 20px 20px; }
.site-corps h3 { margin: 0 0 10px; font-family: var(--font-titre); font-variation-settings: 'wdth' 106, 'wght' 720; font-size: 1.1875rem; line-height: 1.2; }
.site-corps dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 0.9375rem; }
.site-corps dt { color: var(--encre-2); }
.site-corps dd { margin: 0; text-align: right; font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-variant-numeric: tabular-nums; }

/* Bandeau image pleine largeur (Où l'on plonge) */
.bande-image { position: relative; height: clamp(240px, 34dvh, 420px); border-radius: 14px; overflow: clip; animation: sortieImage linear both; animation-timeline: view(); animation-range: cover 86% cover 100%; }
.duo-liens { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* ---- Media queries des pages intérieures ---- */
@media (max-width: 900px) {
  .deux-colonnes, .brevets, .partenaires { grid-template-columns: 1fr; }
  .gestes { grid-template-columns: 1fr; }
  .gestes li { grid-column: auto; }
  .rythme { grid-template-columns: 1fr; }
  .materiel { grid-template-columns: 1fr; }
  .frise { --col: 62px; }
}
@media (max-width: 560px) {
  .partenaires { grid-template-columns: repeat(2, 1fr); }
  .document { grid-template-columns: 1fr; }
  .document-format { text-align: left; }
}

/* ============================================================
   24. COULEUR — v0.3.0
   Le site restait bleu sur bleu. On introduit trois accents chauds
   (sable, ambre, corail sourd) réservés aux fonds et aux filets,
   jamais au texte courant. Contrastes vérifiés au calcul.
   ============================================================ */
:root {
  --sable:      #FFF4E6;   /* fond chaud très clair */
  --sable-bord: #F6DFC0;
  --ambre:      #8C491A;   /* encre chaude, 6,3:1 sur --sable, 6,8:1 sur blanc */
  --menthe:     #E1F2E8;   /* fond frais alternatif */
  --menthe-bord:#BFDDCB;
  --vert:       #2F6B4A;   /* encre verte, 6,3:1 sur --menthe */
}

/* Alternance de fonds : une section sur deux respire dans une autre teinte */
.bloc-sable { background: var(--sable); padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.bloc-ecume { background: var(--ecume); padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }

/* Badges déclinés par teinte */
.badge--sable  { background: var(--sable); color: var(--ambre); }
.badge--menthe { background: var(--menthe); color: var(--vert); }

/* Gestes : deux variantes chaudes de plus, pour casser le monochrome */
.gestes li.geste--sable { background: var(--sable); border-color: var(--sable-bord); }
.gestes li.geste--sable .geste-num { background: var(--blanc); color: var(--ambre); }
.gestes li.geste--menthe { background: var(--menthe); border-color: var(--menthe-bord); }
.gestes li.geste--menthe .geste-num { background: var(--blanc); color: var(--vert); }

/* Rythme : la carte « Dimanche » passe en ambre, celle du mercredi reste profonde */
.rythme-carte--sable { background: var(--sable); border-color: var(--sable-bord); }
.rythme-carte--sable .rythme-detail { color: var(--ambre); }

/* Brevets : alternance des couleurs de chiffres */
.brevet:nth-child(2n) .brevet-n { color: var(--ambre); }
.brevet:nth-child(3n) .brevet-n { color: var(--vert); }

/* Frise : filet de séparation chaud sur les étapes « bateau » */
.frise li:has(.frise-pastille--bateau) .frise-nature { color: var(--ambre); }

/* Bande photo intercalaire, pleine largeur du conteneur */
.bande-photo { position: relative; height: clamp(220px, 32dvh, 380px); border-radius: 14px; overflow: clip; background: var(--profond); }
.bande-photo img { width: 100%; height: 100%; object-fit: cover; }
.bande-photo-legende {
  position: absolute; left: 18px; bottom: 16px; right: 18px; margin: 0;
  max-width: 46ch; color: var(--blanc); font-size: 1rem; line-height: 1.45;
  text-shadow: 0 1px 12px rgba(11, 79, 99, 0.85);
}

/* Documents : pastille de format colorée */
.document-format { padding: 4px 10px; border-radius: 999px; background: var(--sable); color: var(--ambre); }
.document:hover .document-format { background: var(--blanc); }

/* Sites : la puce de zone prend une couleur par zone */
.site-zone--Nord   { background: var(--menthe); color: var(--vert); }
.site-zone--Centre { background: rgba(255, 255, 255, 0.92); color: var(--profond); }
.site-zone--Sud    { background: var(--sable); color: var(--ambre); }

/* ============================================================
   25. SE FORMER · NOUS REJOINDRE — v0.4.0
   ============================================================ */

/* ---- Citation mise en exergue (mot de la présidente) ---- */
.exergue { margin: 0; max-width: 74ch; }
.exergue blockquote {
  margin: 0; font-size: clamp(1.1875rem, 0.6vw + 1rem, 1.5rem); line-height: 1.55;
  color: var(--profond); text-wrap: pretty;
  animation: revele 1ms linear both; animation-timeline: view(); animation-range: entry 8% entry 56%;
}
.exergue blockquote p { margin: 0 0 14px; }
.exergue blockquote p:last-child { margin: 0; }
.exergue figcaption { margin-top: 20px; padding-top: 16px; border-top: 2px solid var(--lagon); font-size: 1.0625rem; line-height: 1.5; }
.exergue figcaption b { font-family: var(--font-titre); font-variation-settings: 'wght' 720; font-weight: normal; }
.exergue figcaption span { display: block; color: var(--encre-3); }

/* ---- Niveaux FFESSM ---- */
.niveaux { display: flex; flex-direction: column; gap: 16px; }
.niveau {
  display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px);
  padding: 30px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--filet-2);
  animation: pose linear both; animation-timeline: view(); animation-range: entry 4% entry 52%;
}
.niveau h3 { margin: 0 0 6px; font-family: var(--font-titre); font-variation-settings: 'wdth' 114, 'wght' 800; font-size: 2rem; line-height: 1; letter-spacing: -0.02em; }
.niveau-profondeur { margin: 0 0 16px; font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; color: var(--lien-fonce); }
.niveau-jauge { height: 10px; border-radius: 999px; background: var(--ecume); overflow: clip; }
.niveau-jauge span { display: block; height: 100%; border-radius: 999px; background: var(--lagon); }
.niveau-echelle { margin: 8px 0 0; font-size: 0.875rem; color: var(--encre-2); font-variant-numeric: tabular-nums; display: flex; justify-content: space-between; }
.niveau-permet { margin: 0 0 16px; font-size: 1.125rem; line-height: 1.5; color: var(--profond); text-wrap: pretty; }
.niveau dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 1rem; }
.niveau dt { color: var(--encre-2); }
.niveau dd { margin: 0; color: var(--encre-3); }
.niveau--n2 { background: var(--sable); border-color: var(--sable-bord); }
.niveau--n2 .niveau-profondeur { color: var(--ambre); }
.niveau--n2 .niveau-jauge { background: var(--blanc); }
.niveau--n2 .niveau-jauge span { background: var(--ambre); }
.niveau--n3 { background: var(--profond); border-color: var(--profond); }
.niveau--n3 h3, .niveau--n3 .niveau-permet { color: var(--blanc); }
.niveau--n3 .niveau-profondeur { color: #A9DCE5; }
.niveau--n3 .niveau-jauge { background: rgba(230, 244, 246, 0.2); }
.niveau--n3 .niveau-jauge span { background: var(--corail); }
.niveau--n3 .niveau-echelle, .niveau--n3 dt, .niveau--n3 dd { color: var(--ecume-2); }

/* ---- Autres formations ---- */
.autres-formations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.autres-formations > div { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 12px; background: var(--blanc); border: 1px solid var(--filet-2); animation: pose linear both; animation-timeline: view(); animation-range: entry 2% entry 48%; }
.autres-formations p:first-child { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 106, 'wght' 740; font-size: 1.125rem; line-height: 1.2; }
.autres-formations p:last-child { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--encre-3); }
.autres-formations > div:nth-child(3n+2) { background: var(--menthe); border-color: var(--menthe-bord); }
.autres-formations > div:nth-child(3n+2) p:last-child { color: var(--vert); }

/* ---- Témoignages ---- */
.temoignages { display: grid; grid-template-columns: 1fr; gap: 12px; }
.temoignage { margin: 0; padding: 24px 26px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--filet-2); animation: pose linear both; animation-timeline: view(); animation-range: entry 4% entry 52%; }
.temoignage blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--profond); text-wrap: pretty; }
.temoignage figcaption { margin-top: 14px; font-size: 1rem; color: var(--encre-3); }
.temoignage figcaption b { font-family: var(--font-titre); font-variation-settings: 'wght' 720; font-weight: normal; color: var(--profond); }
.temoignage--profond { background: var(--profond); border-color: var(--profond); }
.temoignage--profond blockquote { color: var(--blanc); }
.temoignage--profond figcaption { color: var(--ecume-2); }
.temoignage--profond figcaption b { color: var(--blanc); }
.temoignage--sable { background: var(--sable); border-color: var(--sable-bord); }

/* ---- Cotisations ---- */
.cotisations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cotisation { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 30px 28px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--filet-2); animation: pose linear both; animation-timeline: view(); animation-range: entry 4% entry 52%; }
.cotisation--phare { background: var(--profond); border-color: var(--profond); }
.cotisation-marque { align-self: flex-start; margin: 0 0 4px; padding: 4px 12px; border-radius: 999px; background: var(--corail); color: var(--brou); font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 0.875rem; }
.cotisation-nom { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 110, 'wght' 760; font-size: 1.5rem; line-height: 1; }
.cotisation-prix { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 116, 'wght' 820; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; letter-spacing: -0.02em; color: var(--lien-fonce); font-variant-numeric: tabular-nums; }
.cotisation-qui { margin: 4px 0 0; font-size: 1rem; line-height: 1.5; color: var(--encre-3); text-wrap: pretty; }
.cotisation--phare .cotisation-nom { color: var(--blanc); }
.cotisation--phare .cotisation-prix { color: var(--corail); }
.cotisation--phare .cotisation-qui { color: var(--ecume-2); }
.inclus-titre { margin: 28px 0 12px; font-family: var(--font-titre); font-variation-settings: 'wght' 720; font-size: 1.0625rem; }
.inclus { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.inclus p {
  margin: 0; display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 20px; border-radius: 10px; background: var(--menthe);
  color: var(--profond); font-size: 1rem; line-height: 1.45; text-wrap: pretty;
}
.inclus p::before {
  content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.5em;
  border-radius: 999px; background: var(--vert);
}

/* ---- Étapes d'adhésion ---- */
.etapes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: etape; }
.etapes li { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--filet-2); animation: pose linear both; animation-timeline: view(); animation-range: entry 2% entry 46%; }
.etape-n { margin: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: var(--sable); color: var(--ambre); font-family: var(--font-titre); font-variation-settings: 'wght' 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.etape-titre { margin: 4px 0 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 106, 'wght' 740; font-size: 1.1875rem; line-height: 1.2; }
.etape-texte { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--encre-3); text-wrap: pretty; }
.etape-lien { align-self: flex-start; margin-top: auto; padding-top: 8px; min-height: 44px; display: inline-flex; align-items: center; font-size: 1rem; }

/* ---- Grille tarifaire (tables repliables) ---- */
.grille { display: flex; flex-direction: column; gap: 12px; }
.repli { border-radius: 14px; background: var(--blanc); border: 1px solid var(--filet-2); overflow: clip; }
.repli > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 16px 24px; cursor: pointer; list-style: none;
  font-family: var(--font-titre); font-variation-settings: 'wdth' 106, 'wght' 740; font-size: 1.1875rem;
}
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary:hover { background: var(--ecume); }
.chevron { flex: none; width: 12px; height: 12px; border-right: 2px solid var(--lien-fonce); border-bottom: 2px solid var(--lien-fonce); transform: rotate(45deg); transition: transform 220ms ease; }
.repli[open] .chevron { transform: rotate(225deg); }
.repli table { width: 100%; border-collapse: collapse; }
.repli caption { padding: 0 24px 12px; text-align: left; font-size: 0.9375rem; color: var(--encre-2); }
.repli th { text-align: left; font-weight: normal; padding: 14px 24px; border-top: 1px solid var(--ecume); font-size: 1.0625rem; color: var(--profond); }
.repli th span { display: block; font-size: 0.9375rem; color: var(--encre-2); }
.repli td { text-align: right; padding: 14px 24px; border-top: 1px solid var(--ecume); font-family: var(--font-titre); font-variation-settings: 'wght' 740; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- FAQ ---- */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq .repli > summary { font-size: 1.0625rem; font-variation-settings: 'wdth' 104, 'wght' 720; }
.faq .repli > p { margin: 0; padding: 0 24px 22px; max-width: 76ch; font-size: 1.0625rem; line-height: 1.6; color: var(--encre-3); text-wrap: pretty; }

/* ---- Media queries ---- */
@media (max-width: 900px) {
  .niveau { grid-template-columns: 1fr; padding: 24px; }
  .autres-formations, .cotisations, .etapes { grid-template-columns: 1fr; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .autres-formations, .etapes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .repli th, .repli td { padding-left: 18px; padding-right: 18px; }
  .repli > summary { padding-left: 18px; padding-right: 18px; }
}

/* ============================================================
   26. CONTACT · ESPACE MEMBRES — v0.4.0
   ============================================================ */

/* Grilles génériques */
.trois-colonnes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quatre-colonnes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* Cartes de contact */
.carte-contact { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--filet-2); animation: pose linear both; animation-timeline: view(); animation-range: entry 2% entry 46%; }
.carte-contact--sable { background: var(--sable); border-color: var(--sable-bord); }
.carte-contact--profond { background: var(--profond); border-color: var(--profond); }

.carte-contact-titre { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 110, 'wght' 780; font-size: 1.5rem; line-height: 1; color: var(--profond); }
.carte-contact p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--encre-3); text-wrap: pretty; }
.carte-contact-tel { font-family: var(--font-titre); font-variation-settings: 'wght' 780; font-size: 1.375rem; }
.carte-contact.carte-contact--profond .carte-contact-titre { color: var(--blanc); }
.carte-contact.carte-contact--profond p { color: var(--ecume-2); }
.carte-contact.carte-contact--profond a { color: var(--blanc); }
.carte-contact a { min-height: 44px; display: inline-flex; align-items: center; }

/* Formulaire */
.formulaire { display: flex; flex-direction: column; gap: 20px; }
.champs-duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ label { font-family: var(--font-titre); font-variation-settings: 'wght' 700; font-size: 1rem; color: var(--profond); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 48px; padding: 12px 16px;
  border-radius: 10px; border: 1.5px solid var(--filet); background: var(--blanc);
  color: var(--profond); font-family: var(--font-texte); font-size: 1.0625rem; line-height: 1.4;
  -webkit-appearance: none; appearance: none;
}
.champ select {
  background-image: linear-gradient(45deg, transparent 50%, var(--lien-fonce) 50%), linear-gradient(135deg, var(--lien-fonce) 50%, transparent 50%);
  background-position: calc(100% - 22px) 21px, calc(100% - 16px) 21px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 44px;
}
.champ textarea { min-height: 160px; resize: vertical; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 2px solid var(--lagon); outline-offset: 2px; border-color: var(--lagon); }
.champ-note { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--encre-2); }
.leurre { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Formulaire — retours du serveur (v1.1.0) */
.formulaire-alerte {
  margin: 0 0 20px; padding: 16px 20px; border-radius: 12px;
  background: var(--sable); border: 1.5px solid var(--sable-bord);
  border-left-width: 4px; border-left-color: var(--ambre); color: var(--ambre);
  font-size: 1rem; line-height: 1.55;
}
.formulaire-alerte p { margin: 0; font-family: var(--font-titre); font-variation-settings: 'wght' 700; }
.formulaire-alerte ul { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.formulaire-alerte a { color: var(--ambre); }
.champ-erreur { color: var(--ambre); font-variation-settings: 'wght' 600; }
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"] { border-color: var(--ambre); }

/* Compteur de caractères. Posé par formulaire.js, absent sans JavaScript. */
.champ-compteur { margin: 0; align-self: flex-end; font-size: 0.875rem; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.champ-compteur--limite { color: var(--ambre); font-variation-settings: 'wght' 600; }

/* Bouton d'envoi. La largeur ne suit pas la colonne sur ordinateur, mais
   la prend entièrement sous 600 px : une cible pleine largeur se vise mieux
   au pouce, et évite le tir manqué sur le bord. */
.bouton-envoi { align-self: flex-start; border: 0; cursor: pointer; }
.bouton-envoi[disabled] { opacity: .6; cursor: progress; }
.bouton-envoi[disabled]:hover { background: var(--corail); }

/* Colonne latérale : carte et horaires */
.carte-lieu {
  position: relative; display: block; border-radius: 14px; overflow: clip;
  background: var(--profond); aspect-ratio: 16 / 10; text-decoration: none;
}
.carte-lieu img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms cubic-bezier(.2, .7, .2, 1); }
.carte-lieu:hover img { transform: scale(1.04); }
.carte-lieu-etiquette {
  position: absolute; left: 14px; bottom: 14px; margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; background: var(--blanc);
  color: var(--profond); font-family: var(--font-titre);
  font-variation-settings: 'wght' 720; font-size: 1rem;
  box-shadow: 0 6px 20px rgba(11, 79, 99, 0.22);
}
.carte-lieu-etiquette::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--corail); }
.liens-plan { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.liens-plan a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px;
  border-radius: 999px; border: 1.5px solid var(--filet); background: var(--blanc);
  color: var(--profond); text-decoration: none; font-size: 1rem;
}
.liens-plan a:hover { border-color: var(--lagon); background: var(--ecume); color: var(--profond); }
.horaires-bloc { margin-top: 20px; padding: 24px; border-radius: 14px; background: var(--menthe); border: 1px solid var(--menthe-bord); }
.horaires-bloc > p:first-child { margin: 0 0 12px; font-family: var(--font-titre); font-variation-settings: 'wght' 720; font-size: 1.0625rem; color: var(--profond); }
.horaires-bloc p { margin: 0 0 10px; font-size: 1rem; line-height: 1.5; color: var(--encre-3); }
.horaires-bloc p:last-child { margin: 0; }
.horaires-bloc b { display: block; font-family: var(--font-titre); font-variation-settings: 'wght' 720; font-weight: normal; color: var(--profond); }

/* Encart plein largeur (mercredi soir, première connexion) */
.encart-plein { padding: clamp(28px, 4vw, 48px); border-radius: 14px; background: var(--profond); }
.encart-plein h2 { margin: 0 0 12px; font-family: var(--font-titre); font-variation-settings: 'wdth' 110, 'wght' 760; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.05; color: var(--blanc); text-wrap: balance; }
.encart-plein p { margin: 0; max-width: 66ch; font-size: 1.0625rem; line-height: 1.6; color: var(--ecume-2); text-wrap: pretty; }
.encart-plein a { color: var(--blanc); }

/* Espace membres : les quatre usages */
.usage { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--filet-2); animation: pose linear both; animation-timeline: view(); animation-range: entry 2% entry 46%; }
.usage-forme { width: 34px; height: 34px; background: var(--lagon); }
.usage-forme--corail { background: var(--corail); }
.usage-titre { margin: 4px 0 0; font-family: var(--font-titre); font-variation-settings: 'wdth' 106, 'wght' 740; font-size: 1.1875rem; }
.usage p:last-child { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--encre-3); text-wrap: pretty; }

/* Bloc d'ouverture du PAD */
.bloc-pad { text-align: center; padding: clamp(36px, 6vw, 64px) clamp(24px, 4vw, 48px); border-radius: 14px; background: var(--profond); }
.bloc-pad-titre { margin: 0 0 22px; font-family: var(--font-titre); font-variation-settings: 'wdth' 112, 'wght' 780; font-size: clamp(1.5rem, 3.2vw, 2.25rem); line-height: 1.05; color: var(--blanc); text-wrap: balance; }
.bloc-pad .btn { font-size: 1.1875rem; padding: 0 34px; min-height: 56px; }
.bloc-pad-note { margin: 22px auto 0; max-width: 62ch; font-size: 1rem; line-height: 1.55; color: var(--ecume-2); text-wrap: pretty; }

/* Modes d'emploi iOS / Android */
.repli ol { margin: 0; padding: 0 24px 22px 46px; display: flex; flex-direction: column; gap: 8px; font-size: 1.0625rem; line-height: 1.5; color: var(--encre-3); }

@media (max-width: 900px) {
  .trois-colonnes, .quatre-colonnes, .champs-duo { grid-template-columns: 1fr; }
  .bouton-envoi { align-self: stretch; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .quatre-colonnes { grid-template-columns: repeat(2, 1fr); }
}
.carte-lieu-source-hors { margin: 8px 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--encre-2); }
.carte-lieu-source-hors a { color: var(--encre-2); }

/* ==================================================================
   CARTE DES SITES — /plonger/  (v0.7.0)

   Bandeau pleine largeur, hors conteneur : la carte a besoin de place,
   l'ancien encart sticky de 420 px était trop étroit pour lire la côte.
   Pas de 100vw ici — le bandeau est simplement placé hors .conteneur,
   ce qui évite la barre de défilement comptée en trop sous Windows.
   ================================================================== */
.carte-bandeau {
  position: relative;
  margin: clamp(24px, 4vw, 40px) 0;
  min-height: 420px;
  background: var(--profond);
  overflow: clip;
  isolation: isolate;
}
@media (min-width: 761px) { .carte-bandeau { min-height: 62vh; max-height: 720px; } }

/* Façade : CSS pur, aucune image, aucune requête réseau. */
.carte-facade { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.carte-facade[hidden] { display: none; }
.carte-facade-fond {
  position: absolute; inset: -10%;
  background:
    radial-gradient(34% 30% at 24% 26%, rgba(230, 244, 246, 0.32), transparent 70%),
    radial-gradient(46% 34% at 70% 66%, rgba(42, 165, 184, 0.5), transparent 74%),
    linear-gradient(160deg, #0B4F63 0%, #08394A 100%);
}
.carte-facade-contenu {
  position: relative; text-align: center; padding: 32px 24px;
  max-width: 46ch; display: grid; gap: 12px; justify-items: center;
}
.carte-facade-titre {
  margin: 0; font-family: var(--font-titre);
  font-variation-settings: 'wdth' 106, 'wght' 740;
  font-size: clamp(1.5rem, 3.4vw, 2.125rem); line-height: 1.1; color: var(--blanc);
  font-variant-numeric: tabular-nums;
}
.carte-facade-texte { margin: 0; color: var(--ecume); font-size: 1.0625rem; line-height: 1.5; text-wrap: pretty; }
.carte-facade-note  { margin: 4px 0 0; color: rgba(230, 244, 246, 0.72); font-size: 0.8125rem; }
.carte-ouvrir[disabled] { opacity: 0.6; cursor: progress; }

.carte-bandeau.carte-chargement .carte-facade-note::after {
  content: ' Chargement…';
}
.carte-bandeau.carte-echec .carte-facade-note {
  color: var(--ecume);
}
.carte-bandeau.carte-echec .carte-facade-note::after {
  content: ' La carte n\2019a pas pu être chargée. La liste ci-dessous reste complète.';
}

/* Toile Leaflet : occupe le bandeau une fois la carte activée. */
.carte-toile { position: absolute; inset: 0; z-index: 1; }
.carte-bandeau:not(.carte-active) .carte-toile { visibility: hidden; }
.carte-bandeau.carte-active { min-height: 62vh; }
@media (max-width: 760px) { .carte-bandeau.carte-active { min-height: 70dvh; } }

/* Plein écran mobile : le bandeau prend tout, la toile suit. */
.carte-bandeau:fullscreen { margin: 0; max-height: none; }
.carte-bandeau:fullscreen .carte-toile { position: absolute; inset: 0; }
.carte-bandeau:-webkit-full-screen { margin: 0; }

/* Bulles Leaflet, aux couleurs du site. */
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 10px 30px rgba(11, 79, 99, 0.22); }
.leaflet-popup-content { margin: 14px 16px; font-family: var(--font-texte); }
.bulle-nom {
  margin: 0 0 2px; font-family: var(--font-titre);
  font-variation-settings: 'wdth' 104, 'wght' 720;
  font-size: 1.0625rem; line-height: 1.2; color: var(--profond);
}
.bulle-club {
  margin: 0 0 8px; display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--corail); color: var(--brou); font-size: 0.75rem;
  font-family: var(--font-titre); font-variation-settings: 'wght' 700;
}
.bulle-infos { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; font-size: 0.875rem; }
.bulle-infos dt { color: var(--encre-2); }
.bulle-infos dd { margin: 0; text-align: right; font-variation-settings: 'wght' 640; font-variant-numeric: tabular-nums; }

/* La liste passe pleine largeur : la carte n'occupe plus la colonne de gauche. */
.sites-liste--large { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* Lien d'une fiche vers son marqueur. */
.site-vers-carte {
  margin-top: 12px; padding: 0; border: 0; background: none;
  color: var(--moyen); font-family: var(--font-titre);
  font-variation-settings: 'wght' 680; font-size: 0.9375rem;
  cursor: pointer; text-align: left;
  border-bottom: 1px solid var(--filet); transition: color 160ms, border-color 160ms;
}
.site-vers-carte:hover { color: var(--profond); border-color: var(--moyen); }
.site-vers-carte:focus-visible { outline: 2px solid var(--moyen); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .carte-facade-fond { transition: none; }
}

/* ==================================================================
   PROCHAINES PLONGÉES — accueil  (v0.8.0)
   Alimenté par le flux planning_public du PAD.
   ================================================================== */
.planning-liste { margin: 0; padding: 0; list-style: none; flex: 1; display: grid; align-content: start; }
.planning-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'quand places' 'detail places';
  gap: 2px 14px;
  padding: 12px 0;
  border-top: 1px solid var(--filet-2);
}
.planning-ligne:first-child { border-top: 0; padding-top: 0; }

.planning-quand {
  grid-area: quand; margin: 0;
  font-family: var(--font-titre); font-variation-settings: 'wdth' 102, 'wght' 700;
  font-size: 1.0625rem; line-height: 1.25; color: var(--profond);
}
.planning-quand time::first-letter { text-transform: uppercase; }
.planning-heure { color: var(--encre-2); font-variation-settings: 'wght' 600; font-variant-numeric: tabular-nums; }
.planning-heure::before { content: '·'; margin: 0 6px; color: var(--filet); }

.planning-detail { grid-area: detail; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 0.9375rem; }
.planning-niveau { color: var(--encre-2); }
.planning-tag {
  padding: 1px 8px; border-radius: 999px; background: var(--ecume);
  color: var(--encre-3); font-size: 0.8125rem;
  font-family: var(--font-titre); font-variation-settings: 'wght' 640;
}

.planning-places {
  grid-area: places; margin: 0; align-self: center; white-space: nowrap;
  font-size: 0.9375rem; color: var(--encre-2); font-variant-numeric: tabular-nums;
}
.planning-places strong {
  font-family: var(--font-titre); font-variation-settings: 'wght' 740;
  font-size: 1.25rem; color: var(--moyen);
}
.planning-ligne--complet .planning-quand,
.planning-ligne--complet .planning-niveau { color: var(--encre-3); opacity: 0.72; }
.planning-ligne--complet .planning-places {
  font-family: var(--font-titre); font-variation-settings: 'wght' 700;
  color: var(--encre-3);
}

.planning-note { margin: 14px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--encre-2); text-wrap: pretty; }
.planning-liens { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.planning-liens .btn { min-height: 48px; }

/* Sous 420 px, les places passent sous la date : deux colonnes
   deviennent illisibles quand la date fait « mercredi 17 septembre ». */
@media (max-width: 420px) {
  .planning-ligne { grid-template-columns: 1fr; grid-template-areas: 'quand' 'detail' 'places'; }
  .planning-places { align-self: start; margin-top: 4px; }
}

/* ============================================================
   24. PROFONDIMÈTRE — ajout v0.9.0
   Instrument gradué fixe : 0 m en haut de page, 60 m en bas.
   100 % CSS, piloté par animation-timeline: scroll(root block).
   Aucun JS, aucun écouteur de scroll.

   Correspondance défilement → profondeur (identique pour l'aiguille,
   le trait de parcours et l'afficheur, donc désynchronisation impossible) :
     0 %  → 0 m      66 % → 30 m
    18 %  → 6 m      80 % → 40 m
    34 %  → 12 m     90 % → 50 m
    50 %  → 20 m     97 % → 60 m (tenu jusqu'au pied de page)

   L'afficheur n'est jamais « entre deux » : chaque palier tient sur toute
   sa plage puis saute net (steps(1, jump-end) posé dans les keyframes).
   ============================================================ */
.profondimetre {
  --prof-h: clamp(190px, 34dvh, 300px);   /* hauteur du rail gradué */
  --prof-pas: 22px;                        /* hauteur d'une ligne de la bobine */
  position: fixed; z-index: 30; right: 20px; top: 50%;
  transform: translateY(-50%);
  display: flex; justify-content: flex-end;
  padding: 14px 12px; border-radius: 18px;
  border: 1px solid rgba(11, 79, 99, 0.12);
  background: rgba(255, 255, 255, 0.58);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 8px 24px rgba(11, 79, 99, 0.10);
  color: var(--profond); font-family: var(--font-titre);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
/* Le bandeau reste lisible aussi bien sur le blanc du haut que sur
   l'abysse du pied de page : un seul traitement, aucun basculement. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .profondimetre { background: rgba(255, 255, 255, 0.88); }
}

.prof-cadre {
  position: relative; width: 2px; height: var(--prof-h); border-radius: 999px;
  background: rgba(11, 79, 99, 0.22);
  background: color-mix(in srgb, currentColor 22%, transparent);
}
.prof-parcouru {
  position: absolute; inset: 0; border-radius: 999px; background: currentColor;
  transform-origin: top center; transform: scaleY(0);
  animation: profParcouru linear both; animation-timeline: scroll(root block);
}

.prof-graduations { position: absolute; inset: 0; }
.prof-graduations span {
  position: absolute; right: -4px; width: 10px; height: 2px; margin-top: -1px;
  border-radius: 2px;
  background: rgba(11, 79, 99, 0.3);
  background: color-mix(in srgb, currentColor 30%, transparent);
}
.prof-graduations span:nth-child(1) { top: 0; }
.prof-graduations span:nth-child(2) { top: 16.6667%; }
.prof-graduations span:nth-child(3) { top: 33.3333%; }
.prof-graduations span:nth-child(4) { top: 50%; }
.prof-graduations span:nth-child(5) { top: 66.6667%; }
.prof-graduations span:nth-child(6) { top: 83.3333%; }
.prof-graduations span:nth-child(7) { top: 100%; }

.prof-curseur {
  position: absolute; top: 0; right: 0; width: 100%; height: 0;
  animation: profAiguille linear both; animation-timeline: scroll(root block);
}
.prof-curseur-int {
  position: absolute; right: 0; top: 0; transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.prof-valeur { display: flex; align-items: baseline; gap: 2px; }
.prof-fenetre {
  display: block; overflow: clip; min-width: 2.05em;
  height: var(--prof-pas); line-height: var(--prof-pas); font-size: 1.0625rem;
}
.prof-bobine { display: block; animation: profChiffres linear both; animation-timeline: scroll(root block); }
.prof-bobine b {
  display: block; height: var(--prof-pas); line-height: var(--prof-pas);
  font-weight: normal; font-variation-settings: 'wdth' 104, 'wght' 780; text-align: right;
}
.prof-unite { font-size: 0.8125rem; font-variation-settings: 'wght' 620; opacity: 0.72; }
.prof-aiguille { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; }

@keyframes profAiguille {
  0%        { transform: translateY(0); }
  18%       { transform: translateY(calc(var(--prof-h) * 0.1)); }
  34%       { transform: translateY(calc(var(--prof-h) * 0.2)); }
  50%       { transform: translateY(calc(var(--prof-h) * 0.3333)); }
  66%       { transform: translateY(calc(var(--prof-h) * 0.5)); }
  80%       { transform: translateY(calc(var(--prof-h) * 0.6667)); }
  90%       { transform: translateY(calc(var(--prof-h) * 0.8333)); }
  97%, 100% { transform: translateY(var(--prof-h)); }
}
@keyframes profParcouru {
  0%        { transform: scaleY(0); }
  18%       { transform: scaleY(0.1); }
  34%       { transform: scaleY(0.2); }
  50%       { transform: scaleY(0.3333); }
  66%       { transform: scaleY(0.5); }
  80%       { transform: scaleY(0.6667); }
  90%       { transform: scaleY(0.8333); }
  97%, 100% { transform: scaleY(1); }
}
/* Chaque palier tient puis saute : jamais de valeur à cheval sur deux chiffres. */
@keyframes profChiffres {
  0%        { transform: translateY(0);                           animation-timing-function: steps(1, jump-end); }
  18%       { transform: translateY(calc(var(--prof-pas) * -1));  animation-timing-function: steps(1, jump-end); }
  34%       { transform: translateY(calc(var(--prof-pas) * -2));  animation-timing-function: steps(1, jump-end); }
  50%       { transform: translateY(calc(var(--prof-pas) * -3));  animation-timing-function: steps(1, jump-end); }
  66%       { transform: translateY(calc(var(--prof-pas) * -4));  animation-timing-function: steps(1, jump-end); }
  80%       { transform: translateY(calc(var(--prof-pas) * -5));  animation-timing-function: steps(1, jump-end); }
  90%       { transform: translateY(calc(var(--prof-pas) * -6));  animation-timing-function: steps(1, jump-end); }
  97%, 100% { transform: translateY(calc(var(--prof-pas) * -7)); }
}

/* v0.9.8 — un seul et même instrument partout. La version réduite du
   téléphone (rail de 128 px, graduations et unité masquées, cadre étroit)
   a été retirée : sur mobile comme sur ordinateur, le profondimètre est
   complet. Seule la marge droite se resserre pour ne pas coller au bord. */
@media (max-width: 1080px) { .profondimetre { right: 12px; } }
@media (max-width: 480px)  { .profondimetre { right: 8px; } }
/* Écran couché ou très bas : l'instrument mangerait la moitié de la hauteur. */
@media (max-height: 520px) {
  .profondimetre { display: none; }
}

/* Repli sans timelines de scroll (Firefox, Safari < 26) : un profondimètre
   figé à 0 m pendant qu'on lit le pied de page mentirait. On le retire. */
@supports not (animation-timeline: scroll()) {
  .profondimetre { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .profondimetre { display: none !important; }
}

/* ============================================================
   26. VIVANT — v0.9.0
   Sprint cosmétique de l'accueil. Trois chantiers :
     26.1 révélation à l'entrée, pilotée par site.js, donc identique
          sur Chrome, Safari iOS, Firefox et Edge — les timelines de
          scroll natives (sections 8 à 15) ne couvrent que Chromium.
     26.2 hero à photographies tournantes.
     26.3 raccord entre le fond « descente » et le bloc sable.
   Tout est neutralisé en prefers-reduced-motion (voir 26.5).
   ============================================================ */

:root {
  --v-souple: cubic-bezier(.2, .7, .2, 1);
  --sable-0:  rgba(255, 244, 230, 0);   /* --sable transparent, écrit en toutes
                                           lettres : « transparent » s'interpole
                                           via le noir sur les anciens moteurs. */
}

/* ---------- 26.1 Révélation à l'entrée ----------
   L'état masqué n'existe que si JavaScript a répondu présent (classe posée
   en tête de <head>). Sans JS, sans IntersectionObserver ou en mouvement
   réduit, rien n'est jamais caché. */
html.js [data-vivant] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 720ms var(--v-souple), transform 720ms var(--v-souple);
}
html.js [data-vivant].est-visible { opacity: 1; transform: none; }

/* Les portes doivent retrouver leur survol court une fois révélées :
   sinon le translateY(-4px) du survol hériterait des 720 ms d'entrée. */
html.js .porte[data-vivant].est-visible {
  transition: transform 300ms var(--v-souple), opacity 300ms var(--v-souple);
}
html.js .porte[data-vivant].est-visible:hover { transform: translateY(-4px); }

/* Soulignement corail des portes, tracé au survol et au clavier. */
.porte-titre {
  align-self: flex-start; padding-bottom: 3px;
  background-image: linear-gradient(var(--corail), var(--corail));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 3px;
  transition: background-size 420ms var(--v-souple);
}
.porte:hover .porte-titre, .porte:focus-visible .porte-titre { background-size: 100% 3px; }

/* ---------- 26.2 Hero : photographies tournantes ----------
   Les diapositives se superposent en position absolue ; seule la diapositive
   active est opaque. Le lent zoom (« dérive ») tourne en boucle alternée et
   se met en pause au lieu de s'arrêter : la photographie sortante ne saute
   donc pas pendant le fondu. */
.hero-diapo { position: absolute; inset: 0; opacity: 0; transition: opacity 1200ms ease; }
.hero-diapo.est-actif { opacity: 1; }
.hero-diapo img {
  width: 100%; height: 100%; object-fit: cover;
  animation: derive 26s ease-in-out infinite alternate; animation-play-state: paused;
}
.hero-diapo.est-actif img { animation-play-state: running; }
@keyframes derive { from { transform: scale(1); } to { transform: scale(1.05); } }

/* ---------- 26.3 Raccord vers le bloc sable ----------
   La colonne d'eau intercalaire, puis un bloc qui s'ouvre et se ferme en
   fondu : plus aucune arête horizontale entre deux fonds. */
.transition-marine {
  position: relative; overflow: clip; pointer-events: none;
  height: clamp(120px, 16vw, 200px); margin-top: clamp(40px, 6vw, 76px);
}
/* Halo de lumière de surface. Volontairement froid et neutre : tout le
   virage vers le sable est porté par le dégradé de .bloc-fondu, seul, pour
   qu'il n'y ait ni palier ni creux de couleur au raccord. */
.transition-lueur {
  position: absolute; inset: -30% -6% 0;
  background: radial-gradient(50% 72% at 50% 0%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%);
  animation: souffle 12s ease-in-out infinite;
}
@keyframes souffle {
  0%, 100% { opacity: 0.5; transform: translate3d(-1.5%, 0, 0); }
  50%      { opacity: 0.9; transform: translate3d(1.5%, 0, 0); }
}
.transition-bulles { position: absolute; inset: 0; }
.transition-bulles span {
  position: absolute; bottom: -20px; left: var(--bg);
  width: var(--bt); height: var(--bt); border-radius: 999px;
  border: 1.5px solid rgba(20, 122, 140, 0.5);
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95), rgba(42, 165, 184, 0.22) 58%, rgba(42, 165, 184, 0.06));
  box-shadow: inset 0 -2px 5px rgba(42, 165, 184, 0.25);
  opacity: 0;
  animation: monteeBulle var(--bd) linear var(--br) infinite;
}
@keyframes monteeBulle {
  0%        { transform: translate3d(0, 0, 0) scale(0.62); opacity: 0; }
  14%       { opacity: 0.9; }
  72%       { opacity: 0.62; }
  100%      { transform: translate3d(var(--bx), calc(var(--bc) * -1), 0) scale(1); opacity: 0; }
}

.bloc-fondu {
  background: linear-gradient(180deg,
      var(--sable-0) 0%,
      rgba(255, 244, 230, 0.6) 7%,
      var(--sable) 20%,
      var(--sable) 80%,
      rgba(255, 244, 230, 0.6) 93%,
      var(--sable-0) 100%);
  padding-top: clamp(80px, 11vw, 148px);
  padding-bottom: clamp(80px, 11vw, 148px);
}

/* ---------- 26.4 Replis ----------
   Sans timelines de scroll (Firefox, Safari < 26), site.js prend le relais
   de la parallaxe en posant un transform en style en ligne. Il faut donc
   que la règle de repli de la section 20 cesse de le remettre à zéro : les
   styles en ligne l'emportent déjà, rien à faire — on se contente de rendre
   la transformation composée pour éviter les repeints. */
@supports not (animation-timeline: scroll()) {
  .hero-photo, .hero-texte, .media-para { will-change: transform; }
}

/* ---------- 26.5 Mouvement réduit ----------
   Le bloc de la section 21 coupe animations et transitions au marteau :
   sans ces trois lignes, les éléments à révéler resteraient à opacity 0. */
@media (prefers-reduced-motion: reduce) {
  html.js [data-vivant] { opacity: 1 !important; transform: none !important; }
  .transition-marine { display: none !important; }
  .hero-diapo { transition: none !important; }
}

/* ---------- 26.6 Mobile (Android Chrome, Safari iOS, Edge mobile) ----------
   Les pastilles passent sous l'entête collante : en bas à droite elles
   chevaucheraient le panneau du hero, qui occupe toute la largeur. */
@media (max-width: 900px) {
  .transition-marine { height: clamp(96px, 22vw, 150px); }
}

/* ============================================================
   27. TITRES QUI SE POSENT — correction v0.9.1
   Le geste existait déjà (poseTitre / revele, sections 8, 11 et 13) mais
   se jouait sur la plage « entry », dont la longueur vaut la hauteur de
   l'élément : pour un titre de 48 px, l'animation entière tenait dans
   27 px de défilement. Techniquement présente, humainement invisible.
   On la rejoue sur la plage « cover », qui vaut hauteur de fenêtre +
   hauteur de l'élément : environ 200 px de course, soit un vrai geste.
   ============================================================ */

.titre-section, .encart-mercredi h2, .asso h2 { animation-range: entry 0% cover 24%; }
.intro-section, .encart-mercredi p           { animation-range: entry 6% cover 26%; }
.asso-texte span:nth-child(1) { animation-range: entry 8% cover 24%; }
.asso-texte span:nth-child(2) { animation-range: entry 8% cover 28%; }
.asso-texte span:nth-child(3) { animation-range: entry 8% cover 32%; }

/* Même logique pour les cartes du bento et la carte des sites. */
.carte-bento          { animation-range: entry 0% cover 22%; }
.bento-turquoise      { animation-range: entry 0% cover 26%; }
.bento-chiffres       { animation-range: entry 0% cover 30%; }
.bento-carte-sites    { animation-range: entry 0% cover 28%; }

/* La course étant dix fois plus longue, le geste peut enfin être lu :
   0,90 au lieu de 0,94, et une opacité de départ plus basse. Redéfinition
   des keyframes d'origine, la dernière déclaration l'emporte. */
/* Opacité de départ remontée de 0.5 à 0.75.

   Ces titres sont animés sur une timeline de défilement en fill both :
   avant leur entrée dans le viewport, ils restent affichés à l'opacité
   de départ. À 0.5, --profond (#0B4F63) se mélange au blanc et donne
   #85A7B1, soit 2,57:1 — sous le seuil WCAG AA, y compris pour du
   grand texte (3:1). À 0.75 le mélange donne #487B8A, soit 4,69:1 :
   conforme même en texte normal, et le geste d'apparition reste lisible. */
@keyframes poseTitre {
  from { opacity: 0.75; transform: scale(0.9) translateY(8px); }
  to   { opacity: 1;    transform: scale(1) translateY(0); }
}

/* ============================================================
   28. ENTÊTE ET HERO MOBILE — v0.9.2
   Trois corrections liées, toutes des questions de place :
     28.1 « Martinique » passe sous « CRESSMA » et un emplacement carré est
          réservé pour le logo à venir. La ligne du logo perd la largeur de
          « Martinique » (~80 px) et gagne celle de la marque.
     28.2 sous 600 px, l'entête tenait 398 px de large dans 390 px : le
          bouton bouffait le burger. Tout est resserré et le libellé du
          bouton se raccourcit.
     28.3 le panneau du hero couvrait la photo presque entièrement sur
          téléphone. Il est ramené à un peu moins de la moitié de la hauteur.
   ============================================================ */

/* ---------- 28.1 Logo sur deux lignes, toutes tailles ---------- */
.entete-int { padding: 12px 24px; gap: 20px; }
.logo { display: flex; align-items: center; gap: 12px; min-height: 52px; padding-top: 0; }
.logo-marque {
  flex: 0 0 auto; display: block; width: 52px; height: 52px;
  border-radius: 12px; object-fit: contain;
}
/* Cadre repère tant que le fichier n'est pas déposé : la place est prise,
   donc la mise en page ne bougera pas le jour où le logo arrivera. */
.logo-marque--vide { border: 1px dashed var(--filet); background: var(--ecume); }
.logo-texte { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.logo-nom { font-size: 24px; line-height: 1.02; }
.logo-lieu {
  font-size: 11px; line-height: 1.2; margin-top: 3px;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ---------- 28.2 Téléphone : tout doit tenir sur une ligne ---------- */
@media (max-width: 600px) {
  .entete-int { padding: 10px 16px; gap: 10px; }
  .logo { gap: 9px; min-height: 46px; }
  .logo-marque { width: 44px; height: 44px; border-radius: 10px; }
  .logo-nom { font-size: 20px; }
  .logo-lieu { font-size: 10px; letter-spacing: 0.07em; }
  .entete-actions { gap: 6px; }
  .entete .btn-corail { min-height: 44px; padding: 0 13px; font-size: 14px; }
  .menu-mobile > summary { width: 44px; height: 44px; }
}
/* Très petits écrans : le bouton « Le PAD » tient partout, on ne resserre
   plus que les marges. */
@media (max-width: 380px) {
  .entete-int { padding: 10px 12px; gap: 8px; }
  .logo-nom { font-size: 18px; }
  .logo-marque { width: 40px; height: 40px; }
  .entete .btn-corail { padding: 0 12px; }
}

/* ---------- 28.3 Hero sur téléphone ----------
   Le panneau prenait ~85 % de la hauteur : la photographie ne servait plus
   à rien. Titre resserré, phrase et boutons plus compacts, les deux appels
   à l'action tiennent désormais sur une seule ligne. */
@media (max-width: 600px) {
  .hero-texte > .conteneur { padding-bottom: 46px; }
  .hero-panneau { padding: 20px; }
  .hero h1 { font-size: clamp(1.85rem, 8.4vw, 2.25rem); line-height: 0.98; }
  .hero-phrase { margin-top: 14px; font-size: 0.9375rem; line-height: 1.5; }
  .hero-cta { margin-top: 18px; gap: 10px; }
  .hero-cta .btn { min-height: 46px; padding: 0 15px; font-size: 0.9375rem; }
  .hero .badge { font-size: 12px; }

}

/* ============================================================
   29. NAVIGATION À SIX ENTRÉES — v0.9.3
   « Espace membres » rejoint le menu : la page n'était atteignable que par
   des boutons éparpillés dans les pages. La barre horizontale ne tient
   plus dans 1080 px, le basculement vers le menu déroulant est remonté.
   ============================================================ */
@media (max-width: 1180px) {
  .nav-liens { display: none; }
  .menu-mobile { display: block; }
}
@media (min-width: 1181px) {
  .lien-nav { padding: 0 10px; }
  .entete-int { gap: 16px; }
}

/* ============================================================
   30. PIED DE PAGE SUR TÉLÉPHONE — v0.9.4
   La grille auto-fit tombait à une seule colonne sous 490 px : adresse,
   horaires, sept liens de plan du site et fédération s'empilaient sur près
   de 1 100 px de haut. On passe à deux colonnes, les deux blocs larges
   (identité et fédération) prenant toute la ligne.

   Seuil à 519 px : c'est exactement là que la grille auto-fit d'origine
   passait de deux colonnes à une seule (2 × 220 px + 32 px de gouttière +
   48 px de marges = 520). Au-dessus, on ne touche à rien — forcer les blocs
   larges y rallongeait le pied de page au lieu de le raccourcir.
   ============================================================ */
@media (max-width: 519px) {
  .pied-int {
    grid-template-columns: 1fr 1fr;
    gap: 30px 20px;
    padding: clamp(36px, 8vw, 52px) 20px;
  }
  .pied-identite, .pied-federation { grid-column: 1 / -1; }
  .pied-logo { font-size: 20px; margin-bottom: 8px; }
  .pied-titre { margin-bottom: 8px; }
  .pied-texte, .pied-horaires { font-size: 0.9375rem; }
  .pied-plan a { min-height: 42px; font-size: 0.9375rem; }
  .pied-tel a { min-height: 44px; }
  .pied-credit p { padding: 16px 20px; }
}

/* Sous 340 px, deux colonnes ne tiennent plus sans casser les libellés
   (« Nous rejoindre », « Mercredi 18h-20h ») : retour à une colonne. */
@media (max-width: 340px) {
  .pied-int { grid-template-columns: 1fr; }
}

/* ============================================================
   31. LOGO DANS LE PIED DE PAGE — v0.9.5
   Le fond du pied est l'abysse : le bleu marine des poissons s'y noierait.
   Le logo est donc posé sur un médaillon écume, à la même dimension que
   son cercle, ce qui lui rend son contraste sans le retoucher.
   Sur ordinateur il se place sous l'adresse ; sur téléphone à droite du
   bloc texte, qui n'occupe pas toute la largeur de la colonne.
   ============================================================ */
.pied-marque {
  display: inline-flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; margin-top: 20px;
  border-radius: 50%; background: var(--ecume);
}
.pied-marque img { display: block; width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 519px) {
  .pied-identite { display: flex; align-items: center; gap: 16px; }
  .pied-identite-texte { flex: 1 1 auto; min-width: 0; }
  .pied-marque { flex: 0 0 auto; width: 68px; height: 68px; margin-top: 0; }
}
@media (max-width: 360px) {
  .pied-identite { gap: 12px; }
  .pied-marque { width: 56px; height: 56px; }
}

/* ============================================================
   32. MENU PLEIN ÉCRAN — v0.9.8
   Repris du drawer du PAD : le burger se plie en croix et un disque
   s'étend depuis son centre jusqu'à couvrir l'écran.

   Un disque mis à l'échelle plutôt qu'un clip-path animé : c'est la leçon
   du PAD, où clip-path s'était révélé capricieux sur mobile. transform est
   composé par le GPU et tenu par tous les moteurs.

   Aucun JavaScript n'est requis pour l'ouverture : c'est toujours le
   <details> natif qui commande, et une animation CSS — pas une transition —
   se déclenche bien à l'affichage de l'élément. site.js n'ajoute que le
   verrou de défilement et la sortie par Échap.
   ============================================================ */
@media (max-width: 1180px) {

  /* ---- Le bouton ---- */
  .menu-mobile > summary {
    position: relative; z-index: 2;
    transition: border-color 300ms ease, background-color 300ms ease;
  }
  .menu-mobile[open] > summary { border-color: rgba(230, 244, 246, 0.32); background: transparent; }

  /* width explicite : les barres passent en 100 %, sans quoi le conteneur
     flex n'aurait plus rien pour se dimensionner et s'effondrerait à zéro. */
  .burger { width: 20px; height: 14px; gap: 0; justify-content: space-between; }
  .burger span {
    width: 100%;
    transition: transform 420ms cubic-bezier(.77, 0, .175, 1),
                width 420ms cubic-bezier(.77, 0, .175, 1),
                opacity 240ms ease, background-color 300ms ease;
  }
  .burger span:nth-child(2) { width: 68%; align-self: flex-end; }

  /* La croix en caractère n'a plus lieu d'être : ce sont les trois barres
     qui se plient. */
  .menu-mobile[open] .croix  { display: none; }
  .menu-mobile[open] .burger { display: flex; }
  .menu-mobile[open] .burger span { background: var(--ecume); }
  .menu-mobile[open] .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-mobile[open] .burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .menu-mobile[open] .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* ---- Le panneau ----
     position:fixed alors que .entete porte un backdrop-filter et une
     animation : l'entête devient donc le bloc conteneur. Ça tombe juste,
     sa boîte est large comme la fenêtre et collée en haut. */
  .menu-mobile > nav {
    --menu-y: 12px; --menu-x: 24px; --menu-d: 48px;
    position: fixed; top: 0; left: 0; right: auto;
    width: 100vw; height: 100dvh; max-width: none; z-index: 1;
    padding: 0; gap: 0;
    display: flex; flex-direction: column; justify-content: center;
    background: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    overflow-y: auto; overscroll-behavior: contain;
  }
  /* Le disque abysse, posé pile sur le bouton, qui s'étend derrière. */
  .menu-mobile > nav::before {
    content: ''; position: absolute; z-index: -1;
    top: var(--menu-y); right: var(--menu-x);
    width: var(--menu-d); height: var(--menu-d);
    border-radius: 50%; background: var(--abysse);
    transform: scale(0);
  }
  .menu-mobile[open] > nav::before { animation: menuDisque 620ms cubic-bezier(.76, 0, .24, 1) both; }
  @keyframes menuDisque { from { transform: scale(0); } to { transform: scale(95); } }

  .menu-marque {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 22px; padding: 0 28px;
  }
  .menu-marque img { width: 44px; height: 44px; border-radius: 50%; background: var(--ecume); }
  .menu-marque span {
    font-family: var(--font-titre); font-variation-settings: 'wdth' 118, 'wght' 820;
    font-size: 22px; color: var(--blanc);
  }

  .menu-mobile > nav a {
    min-height: 0; padding: 13px 28px;
    border-bottom: 1px solid rgba(230, 244, 246, 0.12);
    color: var(--ecume);
    font-size: clamp(1.5rem, 6.4vw, 2.125rem); line-height: 1.1;
    font-variation-settings: 'wdth' 108, 'wght' 740;
  }
  .menu-mobile > nav a:first-of-type { border-top: 1px solid rgba(230, 244, 246, 0.12); }
  .menu-mobile > nav a:hover { color: var(--blanc); }
  .menu-mobile > nav a[aria-current] { color: var(--blanc); }

  /* Entrée en cascade, calée sur l'ouverture du disque. */
  .menu-mobile[open] > nav > * { animation: menuLigne 480ms cubic-bezier(.2, .7, .2, 1) both; }
  .menu-mobile[open] > nav > :nth-child(1) { animation-delay: 180ms; }
  .menu-mobile[open] > nav > :nth-child(2) { animation-delay: 250ms; }
  .menu-mobile[open] > nav > :nth-child(3) { animation-delay: 305ms; }
  .menu-mobile[open] > nav > :nth-child(4) { animation-delay: 360ms; }
  .menu-mobile[open] > nav > :nth-child(5) { animation-delay: 415ms; }
  .menu-mobile[open] > nav > :nth-child(6) { animation-delay: 470ms; }
  .menu-mobile[open] > nav > :nth-child(7) { animation-delay: 525ms; }
  @keyframes menuLigne {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Sous 600 px l'entête est plus serrée : le disque suit le bouton. */
@media (max-width: 600px) {
  .menu-mobile > nav { --menu-y: 10px; --menu-x: 16px; --menu-d: 44px; }
}
@media (max-width: 380px) {
  .menu-mobile > nav { --menu-y: 10px; --menu-x: 12px; }
}

/* Mouvement réduit : le menu s'ouvre d'un bloc, sans disque ni cascade. */
@media (prefers-reduced-motion: reduce) {
  .menu-mobile > nav::before { transform: scale(95) !important; }
  .menu-mobile[open] > nav > * { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   33. LOGOS DES FÉDÉRATIONS — v1.0.0
   Pied de page et page Le Club. Les fichiers officiels sont en couleurs
   sur fond clair : dans le pied, dont le fond est l'abysse, chaque logo
   est posé sur une pastille blanche, sinon il disparaîtrait.
   Tant qu'un fichier manque, l'emplacement affiche son sigle — la place
   est prise, la mise en page ne bougera pas quand le logo arrivera.
   ============================================================ */
.pied-feds { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.pied-fed {
  display: flex; align-items: center; justify-content: center;
  width: 78px; height: 54px; padding: 8px;
  border-radius: 10px; background: var(--blanc);
}
.pied-fed img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pied-fed--vide {
  background: var(--profond); border: 1px dashed rgba(230, 244, 246, 0.3);
  color: var(--ecume-2); font-size: 0.8125rem;
  font-family: var(--font-titre); font-variation-settings: 'wght' 700;
}
@media (max-width: 519px) {
  .pied-fed { width: 66px; height: 46px; padding: 7px; }
}

/* Page Le Club : le cadre garde son passage en niveaux de gris, qui reprend
   ses couleurs au survol — le logo remplace juste le nom de fichier. */
.partenaire-logo img {
  position: absolute; inset: 14px;
  width: calc(100% - 28px); height: calc(100% - 28px);
  object-fit: contain;
}

/* ---------- 30. Mentions légales : rubriques et opposition à la mesure ----------
   .encart-mercredi ne prévoyait qu'un h2 et un paragraphe unique (margin: 0).
   La page Mentions porte désormais plusieurs paragraphes et des sous-titres :
   on leur donne leur respiration ici, sans toucher au cas d'origine.
   Le bouton d'opposition est un <button> et non un <a> : .btn-contour ne pose
   qu'un contour, il reste donc le fond gris que le navigateur impose aux
   contrôles de formulaire. On l'annule sur ce seul bouton, par son attribut :
   une règle button.btn passerait devant .btn-corail et repeindrait en
   transparent les deux boutons corail de Plonger et de Contact. */
.encart-mercredi h3 {
  margin: 26px 0 10px; font-family: var(--font-titre);
  font-variation-settings: 'wdth' 104, 'wght' 700; font-size: 1.125rem;
  line-height: 1.2; color: var(--encre-2);
}
.encart-mercredi p + p,
.encart-mercredi noscript p { margin-top: 14px; }
.encart-mercredi [data-matomo-optout] p { margin: 0; }

[data-matomo-optout-bouton] {
  background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}