/* Polices servies par le site : aucun appel à un tiers, donc aucune
   adresse IP de visiteur transmise à Google. */
/* ═══ REPLIS AUX MÉTRIQUES CALÉES ══════════════════════════════════════
   Tant que la police web n'est pas arrivée, le texte s'affiche dans une
   police système — plus large ou plus étroite — puis saute quand la vraie
   police prend le relais. Décalage mesuré le 22.09.2026 : CLS 0,040 sur
   grand écran, la navigation glissant jusqu'à 50 px.
   Mesures faites sur une même chaîne à 100 px :
   Ratios pondérés par la SURFACE de texte réellement occupée par chaque
   graisse — une moyenne simple aurait surreprésenté les graisses rares :
     Manrope            = 103,3 % de la largeur d'Arial
     Familjen Grotesk   =  93,9 % de la largeur d'Arial
   Les métriques verticales viennent de la table hhea des fichiers :
     Familjen  asc 1230 / desc 270 sur 1200 unités par em
     Manrope   asc 2132 / desc 600 sur 2000 unités par em
   Les ascent/descent sont divisés par le size-adjust, comme l'exige la
   spécification (les pourcentages portent sur l'em APRÈS ajustement).
   ⚠️ Recalculer ces valeurs si l'on change de police. */
@font-face{font-family:"Familjen repli";src:local("Arial"),local("Helvetica"),local("Liberation Sans");
  size-adjust:93.9%;ascent-override:109.2%;descent-override:24.0%;line-gap-override:0%}
@font-face{font-family:"Manrope repli";src:local("Arial"),local("Helvetica"),local("Liberation Sans");
  size-adjust:103.3%;ascent-override:103.2%;descent-override:29.0%;line-gap-override:0%}

@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("familjen-grotesk-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("familjen-grotesk-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("familjen-grotesk-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("familjen-grotesk-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("manrope-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("manrope-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("manrope-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("manrope-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url("manrope-latin-800-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ════════════════════════════════════════════════════════════════
   1. SYSTÈME DE DESIGN — « Jaune Ruche »
   Le jaune du logo devient la couleur d'identité ; le noir et le
   bleu nuit servent de profondeur et de contraste.
   ════════════════════════════════════════════════════════════════ */
:root{
  /* — Couleurs de marque (relevées sur le logo officiel) — */
  --jaune:#FFE100;
  --jaune-2:#FFD400;        /* survols, ombres de jaune */
  --jaune-3:#FFF4B0;        /* aplats doux */
  --jaune-4:#FFFBE4;        /* voile de jaune */
  --encre:#111111;          /* le noir du logo */

  /* — Papier et profondeur — */
  --creme:#FFFAEC;
  --creme-2:#F7F0DA;
  --nuit:#0F1C3F;           /* hérité de l'illustration du quartier */
  --nuit-2:#0A1430;
  --blanc:#FFFFFF;

  /* — Rôles — */
  --fond:var(--creme);
  --texte:var(--encre);
  --texte-2:#4A463C;
  --texte-3:#736C59;
  --ligne:#E7DFC6;
  --ligne-2:#D8CEAE;
  --sur-nuit:#F6F3E8;
  --sur-nuit-2:#B9C2DA;
  --surface-nuit:rgba(255,255,255,.055);

  /* — Typographie — */
  --titre:"Familjen Grotesk","Familjen repli","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --corps:"Manrope","Manrope repli",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --t-xs:.78rem; --t-s:.93rem; --t-m:1.0625rem; --t-l:1.2rem;
  --t-h3:clamp(1.15rem,2.2vw,1.38rem);
  --t-h2:clamp(2rem,5.2vw,3.4rem);
  --t-h1:clamp(2.6rem,7vw,4.6rem);
  --t-geant:clamp(2.1rem,6.4vw,5.2rem);

  /* — Espacements — */
  --e1:.5rem; --e2:.875rem; --e3:1.25rem; --e4:2rem; --e5:3rem;
  --e6:clamp(3.25rem,7vw,5.25rem); --e7:clamp(4rem,8.5vw,7rem);

  /* — Formes et mouvement — */
  --r-s:8px; --r-m:14px; --r-l:22px; --r-pill:999px;
  --ombre-1:0 2px 10px rgba(30,24,0,.09);
  --ombre-2:0 16px 44px rgba(30,24,0,.14);
  --ombre-3:0 26px 70px rgba(5,10,28,.55);
  --vite:.18s; --moyen:.35s; --lent:.8s;
  --sortie:cubic-bezier(.22,.9,.24,1);

  /* — Trame d'alvéoles, déclinée selon le fond — */
  --hex-sombre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='124' viewBox='0 0 72 124'%3E%3Cpath d='M36 2 70 21v38L36 78 2 59V21z M36 64 70 83v38L36 140 2 121V83z' fill='none' stroke='%23111' stroke-width='1.4'/%3E%3C/svg%3E");
  --hex-jaune:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='124' viewBox='0 0 72 124'%3E%3Cpath d='M36 2 70 21v38L36 78 2 59V21z M36 64 70 83v38L36 140 2 121V83z' fill='none' stroke='%23FFE100' stroke-width='1.4'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fond);color:var(--texte);
  font-family:var(--corps);font-size:var(--t-m);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--titre);margin:0;line-height:1.02;letter-spacing:-.02em;text-wrap:balance;font-weight:700}
h1{font-size:var(--t-h1);font-weight:700;text-transform:uppercase;letter-spacing:-.035em}
h2{font-size:var(--t-h2);font-weight:600;letter-spacing:-.025em}
h3{font-size:var(--t-h3);font-weight:600;line-height:1.16;letter-spacing:-.015em}
p{margin:0 0 1em}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1.5px;text-decoration-color:var(--jaune-2)}
button{font:inherit;color:inherit}
::selection{background:var(--jaune);color:var(--encre)}
:focus-visible{outline:3px solid var(--encre);outline-offset:3px;border-radius:4px}
.nuit :focus-visible,.encre :focus-visible,.participer :focus-visible,
.hero :focus-visible,.lightbox :focus-visible,.menu :focus-visible,.nav :focus-visible,
.pied :focus-visible,.evt :focus-visible,.surface-nuit :focus-visible{outline-color:var(--jaune);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saut{position:fixed;top:-100px;left:12px;z-index:200;background:var(--encre);color:var(--jaune);padding:12px 18px;border-radius:0 0 10px 10px;font-weight:700;text-decoration:none}
.saut:focus{top:0}

/* — Trame — */
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:20px}
@media(min-width:880px){.wrap{padding-inline:44px}}
.sec{padding-block:var(--e7);position:relative}
.sec--court{padding-block:var(--e6)}
[id]{scroll-margin-top:100px}

/* — Fonds de section — */
.nuit{background:var(--nuit);color:var(--sur-nuit)}
.encre{background:var(--encre);color:var(--sur-nuit)}
.jaune{background:var(--jaune);color:var(--encre)}
.alveoles{position:relative;isolation:isolate}
.alveoles::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;pointer-events:none;background-image:var(--hex-sombre);opacity:.05}
.nuit.alveoles::before,.encre.alveoles::before{background-image:var(--hex-jaune);opacity:.07}
.jaune.alveoles::before{opacity:.085}

/* — Étiquettes, chapôs — */
.eyebrow{display:flex;align-items:center;gap:.7rem;font-family:var(--corps);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--texte-2);margin:0 0 var(--e2)}
.eyebrow::before{content:"";width:26px;height:4px;background:var(--jaune);flex:none}
.nuit .eyebrow,.encre .eyebrow,.participer .eyebrow{color:var(--jaune)}
.jaune .eyebrow{color:var(--encre)}
.jaune .eyebrow::before{background:var(--encre)}
.lede{max-width:46rem;font-size:var(--t-l);color:var(--texte-2);margin-bottom:var(--e4);line-height:1.5}
.nuit .lede,.encre .lede,.participer .lede{color:var(--sur-nuit-2)}
.jaune .lede{color:#3A3000}
.note{font-size:var(--t-s);color:var(--texte-3)}
.nuit .note,.encre .note{color:var(--sur-nuit-2)}

/* Surlignage jaune : la signature typographique du site */
.surligne{background:linear-gradient(to bottom,transparent 58%,var(--jaune) 58%,var(--jaune) 94%,transparent 94%);padding-inline:.08em}
.nuit .surligne,.encre .surligne{background:linear-gradient(to bottom,transparent 58%,rgba(255,225,0,.3) 58%,rgba(255,225,0,.3) 94%,transparent 94%)}

/* Information manquante — jamais inventée */
.acompleter{display:inline-block;font-weight:700;font-size:.92em;background:var(--jaune-3);border-bottom:2px solid var(--jaune);padding:0 .3em;color:#4A3B00}
.nuit .acompleter,.encre .acompleter{background:rgba(255,225,0,.16);color:var(--jaune)}

/* — Boutons — */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:0 26px;border-radius:var(--r-s);border:2px solid transparent;font-family:var(--corps);font-weight:800;font-size:var(--t-s);text-decoration:none;cursor:pointer;transition:transform var(--vite) var(--sortie),background var(--vite),color var(--vite),border-color var(--vite),box-shadow var(--vite)}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:none}
.btn--or{background:var(--jaune);color:var(--encre);box-shadow:var(--ombre-1)}
.btn--or:hover{background:var(--jaune-2);box-shadow:var(--ombre-2)}
.btn--encre{background:var(--encre);color:var(--jaune)}
.btn--encre:hover{background:#000}
.btn--ligne{border-color:currentColor}
.btn--ligne:hover{background:var(--encre);color:var(--jaune);border-color:var(--encre)}
.nuit .btn--ligne:hover,.encre .btn--ligne:hover{background:var(--jaune);color:var(--encre);border-color:var(--jaune)}
.btn--petit{min-height:40px;padding:0 15px;font-size:var(--t-xs);border-radius:6px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.flechu{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:var(--t-s);text-decoration:none;border-bottom:2px solid var(--jaune);padding-bottom:2px}
.flechu svg{width:17px;height:17px;transition:transform var(--vite) var(--sortie)}
.flechu:hover svg{transform:translateX(4px)}
.flechu:hover{border-bottom-color:currentColor}

/* ════════ 2. NAVIGATION ════════ */
.nav{
  position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);
  z-index:60;display:flex;align-items:center;gap:4px;padding:7px 8px 7px 7px;
  border-radius:var(--r-pill);max-width:calc(100% - 20px);
  background:rgba(10,20,48,.86);border:1px solid rgba(255,225,0,.28);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 12px 34px rgba(5,10,28,.32);
  transition:background var(--moyen),border-color var(--moyen),box-shadow var(--moyen);
  color:var(--sur-nuit)
}
.nav[data-scroll="true"]{background:rgba(10,20,48,.94);border-color:rgba(255,225,0,.45);box-shadow:0 12px 34px rgba(5,10,28,.45)}
.nav__logo{position:relative;display:flex;align-items:center;gap:10px;padding:2px 12px 2px 2px;border-radius:var(--r-pill);text-decoration:none;font-family:var(--titre);font-weight:700;font-size:1rem;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}
.nav__marque{width:48px;height:auto;flex:none;transition:transform var(--vite)}
.nav__logo:hover .nav__marque,.nav__logo:focus-visible .nav__marque{transform:translateY(-1px) scale(1.04)}
.nav__liens{display:none;list-style:none;margin:0;padding:0;gap:2px}
.nav__liens a{display:block;padding:9px 13px;border-radius:var(--r-pill);text-decoration:none;font-weight:700;font-size:.9rem;white-space:nowrap;transition:background var(--vite),color var(--vite)}
.nav__liens a:hover{background:rgba(255,225,0,.22)}
.nav__liens a[aria-current="true"]{background:var(--jaune);color:var(--encre)}
.nav__cta{padding:11px 18px;border-radius:var(--r-pill);background:var(--jaune);color:var(--encre);font-weight:800;text-decoration:none;font-size:.9rem;white-space:nowrap;transition:background var(--vite)}
.nav__cta:hover{background:var(--jaune-2)}
.nav__burger{width:44px;height:44px;border:0;border-radius:var(--r-pill);background:transparent;display:grid;place-items:center;cursor:pointer}
.nav__burger span{position:relative;display:block;width:19px;height:2.5px;background:currentColor;border-radius:2px;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;transition:box-shadow var(--vite),transform var(--vite)}
.nav__burger[aria-expanded="true"] span{box-shadow:none;transform:rotate(45deg)}
.nav__burger[aria-expanded="true"] span::after{content:"";position:absolute;left:0;top:0;width:19px;height:2.5px;background:currentColor;border-radius:2px;transform:rotate(-90deg)}
@media(min-width:1000px){.nav__liens{display:flex}.nav__burger{display:none}}

.menu{
  position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:59;background:var(--jaune);color:var(--encre);
  display:flex;flex-direction:column;justify-content:center;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:100px 28px calc(40px + env(safe-area-inset-bottom,0px));
  opacity:0;visibility:hidden;transition:opacity var(--moyen),visibility var(--moyen);
  background-image:var(--hex-sombre)
}
.menu[data-open="true"]{opacity:1;visibility:visible}
.menu a{font-family:var(--titre);font-size:clamp(1.9rem,8.5vw,2.7rem);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;text-decoration:none;padding:8px 0;border-bottom:2px solid rgba(17,17,17,.16);transform:translateY(14px);opacity:0;transition:transform .45s var(--sortie),opacity .45s var(--sortie),padding-left var(--vite)}
.menu[data-open="true"] a{transform:none;opacity:1}
.menu a:hover{padding-left:12px}
.menu__fermer{margin:var(--e3) auto 0;border:2px solid rgba(255,255,255,.35);background:transparent;color:var(--sur-nuit);font:inherit;font-weight:800;font-size:var(--t-s);padding:12px 24px;border-radius:var(--r-pill);cursor:pointer}
.menu__fermer:hover{background:var(--jaune);color:var(--encre);border-color:var(--jaune)}
.menu__pied{margin-top:var(--e4);font-size:var(--t-s);font-weight:700;color:#4A3B00}
/* Écran bas (paysage sur téléphone) : le menu tient sans défiler */
@media(max-height:640px){
  .menu{justify-content:flex-start;padding:74px 24px 24px;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:0 22px}
  .menu a{font-size:clamp(1.05rem,3.4vw,1.4rem);padding:7px 0}
  .menu__pied,.menu__fermer{grid-column:1/-1}
  .menu__fermer{margin-top:14px;padding:10px 20px}
}
@media(min-width:1000px){.menu{display:none}}

/* ════════ 3. HERO ════════ */
/* ═══ L'ILLUSTRATION EN ENTIER ═══════════════════════════════════════
   Règle unique du hero : on voit le ciel, la buvette ET le bas de l'herbe.
   Rien n'est recadré. La hauteur de la bande est donc DÉDUITE du format
   de l'image, jamais choisie :
     • téléphone  — image portrait 880×1871  → 1871/880 = 212,6 % de la largeur
     • ≥ 700 px   — image paysage 1916×1261  → 1261/1916 =  65,8 % de la largeur
   On déclare un cheveu de plus (212,8 / 66) pour qu'un arrondi ne laisse
   jamais de liseré sur les côtés. Sur grand écran la bande peut dépasser la
   hauteur naturelle : le complément est du ciel nocturne pur (#000919, la
   couleur exacte du bord haut de l'illustration), donc le raccord est
   invisible et le navire y gagne du ciel.
   ⚠️ Ne jamais revenir à object-fit:cover : ce serait rogner l'image. */
.hero{position:relative;overflow:hidden;background:var(--nuit-2);display:flex;align-items:flex-end;color:var(--sur-nuit);
  /* La taille du navire se deduit de la BANDE, pas de la largeur d'ecran :
     une tablette a une bande courte et une grande largeur, un navire cale sur
     la largeur y touchait les toits. 27 % de la bande, borne 96-300 px.
     Definie ici, et non sur le navire, pour que le bouton de pause puisse
     se placer juste sous la coque. */
  --nh:clamp(96px,calc(var(--bande)*0.27),300px);--nl:calc(var(--nh)/1.22)}
@media(max-width:699px){.hero{--bande:212.8vw}}
@media(min-width:700px){.hero{--bande:66vw}}
@media(min-width:1000px){.hero{--bande:max(66vw,86vh);--bande:max(66vw,86svh);min-height:var(--bande)}}
.hero__fond{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:0;overflow:hidden;overflow:clip;background:#000919}
.hero__fond img{width:100%;height:100%;object-fit:contain;object-position:50% 100%}
/* Le voile protège le texte à gauche et laisse respirer la buvette à droite.
   Réglé pour l'illustration au ciel prolongé (1.52:1) : le sujet est en bas
   au centre, il ne doit surtout pas être noyé. */
/* Une lueur chaude posée sur la buvette : le regard y va sans que le dessin
   soit retouché. Purement CSS, donc réversible. */
.hero__lueur{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(42% 46% at 58% 78%,rgba(255,196,0,.20) 0%,rgba(255,170,0,.09) 42%,rgba(255,170,0,0) 72%);
  mix-blend-mode:screen}
@media(min-width:1000px){.hero__lueur{background:radial-gradient(22% 24% at 52% 85%,rgba(255,196,0,.30) 0%,rgba(255,170,0,.12) 44%,rgba(255,170,0,0) 76%)}}
@media(prefers-reduced-motion:no-preference){.hero__lueur{animation:respire 7s ease-in-out infinite}}
@keyframes respire{0%,100%{opacity:.78}50%{opacity:1}}
/* Le voile assombrit la gauche (lisibilité du texte posé dessus) et le haut
   (lisibilité de la barre de navigation). ⚠️ Plus AUCUN fondu en bas : c'est
   lui qui noyait le bas de l'herbe. L'illustration se termine net. */
.hero__voile{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:1;background:
  linear-gradient(to right,rgba(10,20,48,.90) 0%,rgba(10,20,48,.74) 26%,rgba(10,20,48,.30) 50%,rgba(10,20,48,0) 72%),
  linear-gradient(to bottom,rgba(10,20,48,.55) 0,rgba(10,20,48,.08) 16%,rgba(10,20,48,0) 46%,rgba(10,20,48,0) 100%)}
.hero__inner{position:relative;z-index:3;width:100%;padding-block:148px var(--e5);pointer-events:none}
.hero__inner a,.hero__inner button,.hero__lead,.hero__base{pointer-events:auto}
@media(min-width:1000px){.hero__inner{padding-block:200px var(--e6)}}
.hero__marque{display:block;margin-bottom:var(--e3)}

.hero h1{color:var(--blanc);text-shadow:0 6px 34px rgba(0,0,0,.55)}
.hero__titre{margin:0;line-height:0}
.hero__titre img{display:block;width:clamp(96px,17vw,148px);height:auto;filter:drop-shadow(0 14px 34px rgba(0,0,0,.55))}
.hero__base{display:block;margin:14px 0 0;font-family:var(--titre);font-weight:500;font-size:clamp(1.35rem,3.6vw,2.1rem);color:var(--jaune);text-shadow:0 2px 16px rgba(0,0,0,.7);max-width:16ch;line-height:1.14;font-weight:600}
.hero__lead{font-size:clamp(1.02rem,2vw,1.2rem);max-width:34rem;color:#EFF1F8;margin:0 0 var(--e3);text-shadow:0 2px 16px rgba(0,0,0,.75);font-weight:500}
.hero__meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--jaune);margin:0 0 var(--e3);text-shadow:0 2px 12px rgba(0,0,0,.7)}
.hero__meta span{display:inline-flex;align-items:center;gap:.9rem}
.hero__meta span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.65}
.hero__descendre{padding:6px 10px;margin-bottom:-6px;position:absolute;left:50%;bottom:16px;z-index:3;transform:translateX(-50%);display:none;align-items:center;gap:.5rem;color:var(--sur-nuit-2);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;font-weight:800;text-decoration:none}
.hero__descendre svg{width:16px;height:16px;animation:plonge 2.6s ease-in-out infinite}
@media(min-width:1000px){.hero__descendre{display:flex}}
@keyframes plonge{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(5px);opacity:1}}
@media(max-width:999px){
  /* Sur mobile, le texte ne se pose plus PAR-DESSUS l'illustration : elle
     occupe une bande haute entière, nette, et le texte suit dessous sur la
     nuit. Les bâtiments et la buvette jaune sont enfin visibles en entier. */
  .hero{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    min-height:0;background:var(--nuit-2)}
  .hero__fond{position:relative;top:auto;right:auto;bottom:auto;left:auto;inset:auto;height:var(--bande);flex:none;z-index:0;overflow:hidden;overflow:clip}
  .hero__voile{background:linear-gradient(to bottom,
    rgba(10,20,48,.55) 0,rgba(10,20,48,.06) 15%,rgba(10,20,48,0) 40%,rgba(10,20,48,0) 100%)}
  .hero__lueur{background:radial-gradient(40% 20% at 55% 76%,rgba(255,196,0,.30) 0%,rgba(255,170,0,.12) 44%,rgba(255,170,0,0) 76%)}

  /* Le navire navigue dans la bande de ciel, pas par-dessus le texte */
  .navire-piste{top:0;right:0;bottom:auto;left:0;inset:0 0 auto 0;height:var(--bande)}
  /* position et taille du navire : réglées en fin de feuille (cascade) */

  .hero__inner{padding-block:var(--e2) var(--e4);display:flex;flex-direction:column;align-items:flex-start}
  .hero__meta{order:0}.hero__marque{order:1}.hero .btns{order:2}.hero__lead{order:3}
  .hero__inner::before{display:none}
  .hero__titre img{width:clamp(64px,16vw,84px)}
  .hero__base{margin-top:9px;font-size:clamp(1.18rem,5.2vw,1.5rem);max-width:21ch;line-height:1.1}
  .hero__meta{margin-bottom:var(--e2);font-size:10.5px;letter-spacing:.1em;gap:.25rem .7rem}
  .hero__lead{margin-top:var(--e3);margin-bottom:0;font-size:.9rem;line-height:1.4;max-width:44ch}
  .hero .btns{gap:9px;margin-top:var(--e3);width:100%}
  .hero .btns .btn{width:100%;justify-content:center;padding-inline:16px;font-size:.92rem}
  @media(min-width:430px){.hero .btns .btn{width:auto;flex:1 1 auto}}

  .hero__descendre{display:none}
}

/* Écrans courts (petits téléphones, navigateur avec barres) : la bande d'image
   cède un peu de hauteur pour que le bouton principal reste atteignable. */
@media(max-width:999px) and (max-height:770px){
  /* L'illustration garde sa hauteur : la rogner reviendrait à couper le ciel
     ou l'herbe. Seul le bloc de texte se resserre. */
  .hero__inner{padding-block:var(--e2) var(--e3)}
  .hero__lead{margin-top:.5rem}
}

/* — Le navire prend le large quand on descend —
   Animation liée au défilement (Scroll-driven animations). Décorative :
   pure amélioration progressive, aucun repli JavaScript. Le navire garde
   par ailleurs sa dérive dans le temps, les deux se composent car elles
   portent sur deux éléments distincts. */
.navire-piste{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:2;pointer-events:none}
.navire-piste>*{pointer-events:auto}
.hero__fond picture{display:block;height:100%}
/* ⚠️ v39 — la dérive liée au défilement (« cap_au_large ») a été SUPPRIMÉE.
   Mesurée avant retrait : en descendant de 800 px, elle tirait le navire de
   116 px vers la gauche et 27 px vers le haut sur un écran de 1440 px, en
   plus de son animation propre. Deux mouvements de directions différentes
   se superposaient, et c'est en grande partie ce qui donnait l'impression
   d'un navire parti dans tous les sens. Le navire est maintenant solidaire
   de la page : il ne bouge que de sa propre houle.
   Ne pas la réintroduire sans mesurer : si un soupçon de parallaxe est
   souhaité un jour, il doit rester sous ~2 vw sur toute la course. */

/* — Les deux navires — */
/* Le navire NE TRAVERSE PLUS l'écran. Il avait un défaut rédhibitoire :
   sur une traversée de 46 s il passait le plus clair de son temps hors
   champ, donc la plupart des visiteurs ne le voyaient jamais. Il est
   désormais ancré dans le ciel dégagé et s'y balance sur place : toujours
   visible, toujours cliquable.
   --nl = largeur de coque · la hauteur ajoute 30 px pour l'étiquette.
   Position verticale exprimée en fraction de la bande, donc solidaire de
   l'illustration quelle que soit la taille d'écran.
   Ciel dégagé mesuré sur l'illustration : jusqu'à 60 % de la hauteur sur
   le portrait, jusqu'à 63 % à droite sur le paysage. Le navire tient
   entre 13 % et 40 % : il ne touche jamais les toits. */
.navire{position:absolute;z-index:2;isolation:isolate;border:0;background:transparent;padding:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  /* La taille du navire se déduit de la BANDE, pas de la largeur d'écran :
     une tablette a une bande courte et une grande largeur, un navire calé sur
     la largeur y touchait les toits. 27 % de la bande, borné 96–300 px. */
  /* UNE SEULE HORLOGE pour tout ce qui bouge ici. Le pavillon en prend des
     sous-multiples exacts : les rythmes restent calés au lieu de battre
     l'un contre l'autre, ce qui est la vraie cause d'un mouvement qui
     « part dans tous les sens ».
     --amp   : demi-amplitude verticale, déduite de la taille du navire.
     --derive: le cavalement horizontal, volontairement dérisoire (30 % de
               l'amplitude verticale, soit ~3 px) — juste assez pour que la
               trajectoire soit une petite orbite et non un ascenseur.
     --gite  : le roulis. Moins d'un degré. */
  --houle:13s;
  --amp:clamp(4px,calc(var(--nh) * 0.034),10px);
  --derive:calc(var(--amp) * 0.30);
  --gite:0.9deg;
  /* jamais sous la barre de navigation, qui descend jusqu'à ~88 px */
  left:50%;top:max(calc(var(--bande)*0.13),104px);
  width:var(--nl);height:calc(var(--nh) + 30px);
  transform:translateX(-50%);
  /* le pivot du roulis est posé sous la coque, à la flottaison : un navire
     ne tourne pas autour de son centre géométrique mais autour de sa ligne
     d'eau, et c'est ce détail qui fait la différence entre « une image qui
     s'incline » et « une coque qui roule ». */
  transform-origin:50% 88%;
  animation:flottaison var(--houle) linear infinite;will-change:transform}
@media(min-width:1000px){.navire{left:66%;top:max(calc(var(--bande)*0.10),104px)}}
@media(hover:hover) and (pointer:fine){.navire:hover{animation-play-state:paused}}
.navire:focus-visible{animation-play-state:paused}
/* La flottaison — le seul mouvement d'ensemble du navire.
   Ce n'est pas une sinusoïde : le profil vertical est la somme d'une
   fondamentale et de son harmonique deux, ce qui donne des creux plats et
   des crêtes un peu plus marquées, comme une vraie houle. Le déplacement
   horizontal et le roulis sont en quadrature avec le pilonnement : c'est
   l'orbite que décrit un objet flottant, et c'est ce qui rend le mouvement
   crédible plutôt que mécanique.
   La courbe est échantillonnée en 20 appuis et jouée en `linear` : la forme
   est dans les valeurs, pas dans l'easing. Un `ease-in-out` global aurait
   ralenti puis relancé le navire à chaque appui — c'était exactement le
   défaut de la version précédente, qui inversait 31 fois sa direction
   verticale par cycle. Celle-ci en compte deux, les deux extrêmes.
   Mesuré : 6 px/s au plus vite, pour 20 px de débattement total.
   ⚠️ Chaque image clé DOIT reporter translateX(-50%) : transform remplace la
   valeur de base, il ne s'y ajoute pas. */
@keyframes flottaison{
  0%{transform:translateX(-50%) translate3d(calc(var(--derive) * +1.000),calc(var(--amp) * -0.304),0) rotate(calc(var(--gite) * +1.000))}
  5%{transform:translateX(-50%) translate3d(calc(var(--derive) * +0.951),calc(var(--amp) * -0.645),0) rotate(calc(var(--gite) * +0.951))}
  10%{transform:translateX(-50%) translate3d(calc(var(--derive) * +0.809),calc(var(--amp) * -0.876),0) rotate(calc(var(--gite) * +0.809))}
  15%{transform:translateX(-50%) translate3d(calc(var(--derive) * +0.588),calc(var(--amp) * -0.986),0) rotate(calc(var(--gite) * +0.588))}
  20%{transform:translateX(-50%) translate3d(calc(var(--derive) * +0.309),calc(var(--amp) * -0.992),0) rotate(calc(var(--gite) * +0.309))}
  25%{transform:translateX(-50%) translate3d(calc(var(--derive) * +0.000),calc(var(--amp) * -0.931),0) rotate(calc(var(--gite) * +0.000))}
  30%{transform:translateX(-50%) translate3d(calc(var(--derive) * -0.309),calc(var(--amp) * -0.839),0) rotate(calc(var(--gite) * -0.309))}
  35%{transform:translateX(-50%) translate3d(calc(var(--derive) * -0.588),calc(var(--amp) * -0.738),0) rotate(calc(var(--gite) * -0.588))}
  40%{transform:translateX(-50%) translate3d(calc(var(--derive) * -0.809),calc(var(--amp) * -0.628),0) rotate(calc(var(--gite) * -0.809))}
  45%{transform:translateX(-50%) translate3d(calc(var(--derive) * -0.951),calc(var(--amp) * -0.491),0) rotate(calc(var(--gite) * -0.951))}
  50%{transform:translateX(-50%) translate3d(calc(var(--derive) * -1.000),calc(var(--amp) * -0.304),0) rotate(calc(var(--gite) * -1.000))}
  55%{transform:translateX(-50%) translate3d(calc(var(--derive) * -0.951),calc(var(--amp) * -0.054),0) rotate(calc(var(--gite) * -0.951))}
  60%{transform:translateX(-50%) translate3d(calc(var(--derive) * -0.809),calc(var(--amp) * +0.247),0) rotate(calc(var(--gite) * -0.809))}
  65%{transform:translateX(-50%) translate3d(calc(var(--derive) * -0.588),calc(var(--amp) * +0.560),0) rotate(calc(var(--gite) * -0.588))}
  70%{transform:translateX(-50%) translate3d(calc(var(--derive) * -0.309),calc(var(--amp) * +0.825),0) rotate(calc(var(--gite) * -0.309))}
  75%{transform:translateX(-50%) translate3d(calc(var(--derive) * -0.000),calc(var(--amp) * +0.980),0) rotate(calc(var(--gite) * -0.000))}
  80%{transform:translateX(-50%) translate3d(calc(var(--derive) * +0.309),calc(var(--amp) * +0.978),0) rotate(calc(var(--gite) * +0.309))}
  85%{transform:translateX(-50%) translate3d(calc(var(--derive) * +0.588),calc(var(--amp) * +0.808),0) rotate(calc(var(--gite) * +0.588))}
  90%{transform:translateX(-50%) translate3d(calc(var(--derive) * +0.809),calc(var(--amp) * +0.495),0) rotate(calc(var(--gite) * +0.809))}
  95%{transform:translateX(-50%) translate3d(calc(var(--derive) * +0.951),calc(var(--amp) * +0.099),0) rotate(calc(var(--gite) * +0.951))}
  100%{transform:translateX(-50%) translate3d(calc(var(--derive) * +1.000),calc(var(--amp) * -0.304),0) rotate(calc(var(--gite) * +1.000))}
}

.navire__soleil{position:absolute;top:5%;right:11%;bottom:auto;left:11%;inset:5% 11% auto 11%;aspect-ratio:1;border-radius:50%;background:var(--jaune);box-shadow:0 0 60px rgba(255,225,0,.45),0 0 150px rgba(255,225,0,.22);opacity:0;transform:scale(.55);transition:opacity var(--lent) var(--sortie),transform var(--lent) var(--sortie)}
.navire[aria-pressed="true"] .navire__soleil{opacity:1;transform:scale(1)}
.navire__coque{position:absolute;top:0;right:0;bottom:30px;left:0;inset:0 0 30px 0;clip-path:inset(-70% -18% 0 -18%);display:grid;place-items:end center;perspective:600px;perspective-origin:50% 44%;transition:transform var(--lent) var(--sortie),opacity var(--lent) var(--sortie)}
/* Volume : la coque tangue sur trois axes, le pavillon vit sur un plan avancé */
.navire__relief{position:relative;width:96%;transform-style:preserve-3d}
/* ⚠️ v39 — le « tangage » 3D a été SUPPRIMÉ. Il faisait pivoter la coque de
   24° de lacet toutes les 5,5 s et la faisait avancer et reculer de 60 px en
   profondeur sous une perspective de 600 px : à l'écran, cela se traduisait
   par une variation de taille apparente de 9,6 %. C'est ce que l'œil lisait
   comme un tremblement, et cela se superposait à la dérive lente du navire.
   Le navire est désormais rigide ; c'est le roulis de la flottaison, sous
   son pivot à la ligne d'eau, qui donne la vie. La perspective et le
   preserve-3d sont conservés : ils donnent au pavillon sa profondeur, et ne
   coûtent rien puisque plus rien ne tourne. */
.navire__coque{--roulis:calc(var(--houle)/2)}
.navire__relief>img{width:100%;height:auto;display:block;filter:drop-shadow(0 16px 22px rgba(0,0,0,.5))}
/* Pavillon de l'Olympique de Tambourine — le logo officiel, jamais déformé */
.pavillon{position:absolute;left:var(--px);top:var(--py);width:var(--pw,20%);transform-origin:left center;transform:translateZ(30px);pointer-events:none}
/* Le pavillon bat sur la moitié exacte de l'horloge principale : un
   sous-multiple entier, donc les deux mouvements restent calés au lieu de
   se décaler lentement l'un par rapport à l'autre.
   v39 : période portée de 1,8 s à 6,5 s et amplitude réduite de moitié.
   À 1,8 s, ce battement était le scintillement le plus voyant du hero et
   attirait l'œil en haut du mât pendant que la coque, elle, dérivait. */
.navire__coque.flotte .pavillon{animation:pavoise var(--roulis) ease-in-out infinite}
/* la drisse : un guindant clair le long du mât, avec sa pomme en tête */
.pavillon::before{content:"";position:absolute;left:-2.5px;top:-26%;width:2.5px;height:158%;background:linear-gradient(to bottom,rgba(255,245,200,.95),rgba(255,235,160,.5) 55%,rgba(255,235,160,.15));border-radius:2px;box-shadow:0 0 5px rgba(255,225,0,.45)}
.pavillon__toile{display:block;position:relative;overflow:hidden;border-radius:2px;border:1px solid rgba(240,207,96,.95);box-shadow:0 5px 16px rgba(0,0,0,.6)}
.pavillon__toile img{width:100%;height:auto;display:block;filter:none}
/* la brise : une lueur qui traverse la toile, sans jamais toucher à la marque */
.pavillon__toile::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;pointer-events:none;background:linear-gradient(104deg,transparent 32%,rgba(255,255,255,.34) 50%,transparent 68%)}
.navire__coque.flotte .pavillon__toile::after{animation:brise var(--houle) ease-in-out infinite}
@keyframes pavoise{
  0%,100%{transform:translateZ(30px) rotate(-2deg) rotateY(-10deg)}
  50%{transform:translateZ(30px) rotate(2deg) rotateY(10deg)}}
@keyframes brise{0%,100%{transform:translateX(-135%)}50%{transform:translateX(135%)}}
@media(prefers-reduced-motion:reduce){.pavillon,.pavillon__toile::after{animation:none}
  .pavillon__toile::after{opacity:0}}
/* Mobile : relief plus sobre, ombres moins coûteuses à composer */
@media(max-width:699px){
  .navire__coque{perspective:440px}
  .navire__relief>img{filter:drop-shadow(0 8px 12px rgba(0,0,0,.5))}
  .pavillon{transform:translateZ(18px)}
  @keyframes pavoise{
    0%,100%{transform:translateZ(18px) rotate(-2deg) rotateY(-8deg)}
    50%{transform:translateZ(18px) rotate(2deg) rotateY(8deg)}}
}
.navire__coque.sous{transform:translateY(62%) rotate(7deg);opacity:0;visibility:hidden;pointer-events:none}

/* WCAG 2.2.2 : toute animation en boucle doit pouvoir être arrêtée, y compris au doigt */
.navire__pause{position:absolute;z-index:4;right:12px;top:auto;bottom:14px;border:1px solid rgba(255,255,255,.26);background:rgba(10,20,48,.7);color:var(--sur-nuit);font:inherit;font-size:9.5px;font-weight:700;letter-spacing:.03em;padding:5px 9px;border-radius:var(--r-pill);cursor:pointer;backdrop-filter:blur(4px);opacity:.45;transition:opacity var(--vite),background var(--vite)}
.navire__pause:hover,.navire__pause:focus-visible{opacity:1;background:var(--jaune);color:var(--encre);border-color:var(--jaune)}
/* WCAG 2.2.2 demande un moyen d'arreter l'animation ; encore faut-il le
   voir. Sur ordinateur le hero mesure ~950 px de haut et le bouton, cale en
   bas, tombait sous le bord de la fenetre : on ne pouvait l'atteindre qu'en
   faisant defiler, c'est-a-dire une fois le navire deja hors champ. Il se
   place desormais juste sous la coque, la ou l'animation a lieu. */
@media(min-width:1000px){.navire__pause{right:24px;bottom:auto;
  top:calc(max(var(--bande) * 0.10, 104px) + var(--nh) + 44px)}}
/* Les sélecteurs de pause doivent être au moins aussi précis que ceux qui
   posent l'animation, sinon ils perdent la cascade — c'est ce qui laissait
   le pavillon battre alors que le navire était arrêté. */
.ciel-fige .navire,
.ciel-fige .navire__coque.flotte .pavillon,
.ciel-fige .navire__coque.flotte .pavillon__toile::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.navire__pause{display:none}}
/* L'étiquette se pose sous la coque, centrée. La pastille ronde de 26 px
   qui la remplaçait sur téléphone passait inaperçue : personne ne devinait
   qu'on pouvait changer de navire. Elle redevient un vrai bouton lisible. */
.navire__etiquette{position:absolute;left:50%;top:auto;bottom:0;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--encre);background:var(--jaune);padding:7px 13px;border-radius:var(--r-pill);box-shadow:0 7px 20px rgba(0,0,0,.5)}
.navire__etiquette svg{width:13px;height:13px}
.navire:hover .navire__etiquette,.navire:focus-visible .navire__etiquette{background:var(--jaune-2);box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 3px rgba(255,225,0,.28)}

/* ════════ 4. VIDÉO DU FONDATEUR ════════ */
.video{position:relative;border-radius:var(--r-l);overflow:hidden;background:#000;box-shadow:var(--ombre-3);aspect-ratio:16/9;border:1px solid rgba(255,225,0,.22)}
/* On garde le 16:9 de la vidéo même sur téléphone : en 4/3, le recadrage
   ramenait l'enseigne du kiosque juste derrière le texte. Et sur une
   vignette de 200 px de haut, le résumé mangeait toute l'image : il passe
   au-dessus du lecteur, en pleine lisibilité, au lieu de s'y superposer. */
/* Sur l'accueil, le résumé est déjà juste au-dessus du lecteur : inutile de
   le répéter par-dessus l'image. */
.film--sobre .video__desc{display:none}

@media(max-width:640px){
  .video__contenu{padding-bottom:14px;gap:.3rem}
  .video__desc{display:none}
  .video__titre{font-size:1rem}
}
.video__media{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%}
.video__media img,.video__media video,.video__media iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.video__ombre{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:linear-gradient(to top,rgba(8,8,8,.92) 0,rgba(8,8,8,.62) 24%,rgba(8,8,8,.16) 52%,rgba(8,8,8,.34) 100%)}
/* ⚠️ Plus de white-space:nowrap ici : « Lire le communiqué de la Ville de
   Carouge » mesure 283 px et débordait de 37 px sur un écran de 320 px.
   Un libellé long doit pouvoir passer à la ligne. */
.lien-sortant{overflow-wrap:break-word}
.video__contenu{position:absolute;top:auto;right:0;bottom:0;left:0;inset:auto 0 0 0;padding:clamp(18px,4vw,38px);display:flex;flex-direction:column;gap:.45rem}
.video__lire{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--blanc)}
.video__rond{width:clamp(66px,13vw,96px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:var(--jaune);color:var(--encre);box-shadow:0 14px 44px rgba(0,0,0,.5);transition:transform var(--moyen) var(--sortie),background var(--vite)}
.video__rond svg{width:38%;height:38%;margin-left:8%}
.video__lire:hover .video__rond{transform:scale(1.09);background:var(--jaune-2)}
.video__titre{font-family:var(--titre);font-size:clamp(1.3rem,3vw,2rem);font-weight:700;color:var(--blanc);margin:0;letter-spacing:-.02em}
.video__desc{color:#CFCABC;font-size:var(--t-s);max-width:48ch;margin:0}
.video__duree{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--t-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--jaune)}
.video__duree svg{width:14px;height:14px}
/* état « pas encore de vidéo » — assumé, jamais trompeur */
.video--attente{aspect-ratio:auto;min-height:clamp(330px,52vw,460px);display:grid;place-items:center;text-align:center;padding:clamp(26px,5vw,56px);background:
  radial-gradient(120% 100% at 18% 0%,#221F12 0%,#0C0B06 62%)}
.video--attente .video__inner{max-width:40rem;display:flex;flex-direction:column;align-items:center;gap:var(--e2)}
.video__badge{display:inline-flex;align-items:center;gap:.55rem;padding:8px 16px;border-radius:var(--r-pill);background:var(--jaune);color:var(--encre);font-size:var(--t-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.video__badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--encre);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}

/* ════════ 5. BANDEAUX JAUNES — la ponctuation du récit ════════ */
.bandeau{padding-block:clamp(3rem,7vw,5.5rem)}
.bandeau__geant{font-family:var(--titre);font-size:var(--t-geant);font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:-.04em;margin:0;max-width:16ch;text-wrap:balance}
.bandeau__suite{font-family:var(--titre);font-size:clamp(1.3rem,3.6vw,2.4rem);font-weight:400;font-style:italic;letter-spacing:-.02em;margin:.3rem 0 0;color:#4A3B00}
.bandeau__pied{display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);margin-top:var(--e4);padding-top:var(--e3);border-top:2px solid rgba(17,17,17,.2)}
.bandeau__item{flex:1 1 200px;max-width:26rem}
.bandeau__item b{display:block;font-family:var(--titre);font-size:1.05rem;font-weight:700;margin-bottom:.15rem}
.bandeau__item span{font-size:var(--t-s);color:#4A3B00}
.citation{max-width:34ch;margin:0}
.citation blockquote{margin:0;font-family:var(--titre);font-size:clamp(1.6rem,4.4vw,3rem);font-weight:500;line-height:1.08;letter-spacing:-.025em}
.citation figcaption{margin-top:var(--e3);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#4A3B00}

/* L'encadré illustré (page « L'association »). ⚠️ Cette classe n'avait AUCUNE
   règle : le <figure> gardait la marge de 40 px du navigateur, et l'image
   gardait la hauteur de son attribut `height` pendant que `max-width:100%`
   lui rognait la largeur — une photo 16/10 rendue en 408 × 625, soit 59 %
   d'étirement vertical sur ordinateur et 73 % sur téléphone. Constaté par
   Arja le 22.09.2026.
   La parade est `height:auto` : les attributs width/height servent alors
   uniquement à réserver la place avant le chargement (pas de saut de mise en
   page), et le rapport d'origine est respecté. */
.cadre{margin:0}
.cadre img{width:100%;height:auto;border-radius:var(--r-s);background:var(--creme-2);
  box-shadow:0 18px 44px rgba(0,0,0,.13)}
.cadre figcaption{margin-top:.8rem;font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;font-weight:800;color:var(--texte-3)}

/* Colonne de lecture des pages tout en texte (mentions légales). ⚠️ Cette
   classe non plus n'avait aucune règle : la page se lisait sur 1112 px, soit
   126 caractères par ligne, quand le reste du site tient entre 61 et 74.
   Au-delà de ~80 caractères, l'œil perd le début de la ligne suivante. */
.prose{max-width:43rem}

/* Empêche une adresse ou un nom technique de se couper en deux lignes. */
.nowrap{white-space:nowrap}
.deux-col{display:grid;gap:var(--e4)}
@media(min-width:900px){.deux-col{grid-template-columns:1.05fr .95fr;gap:var(--e6);align-items:center}}

/* ════════ 6. RAISON D'ÊTRE + CHIFFRES ════════ */
.constat{display:grid;gap:var(--e4)}
@media(min-width:900px){.constat{grid-template-columns:1fr 1fr;gap:var(--e6)}}
.constat p:last-child{margin-bottom:0}
.chiffres{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin-top:var(--e6)}
@media(min-width:960px){.chiffres{grid-template-columns:repeat(4,1fr);gap:18px}}
.chiffre{position:relative;isolation:isolate;width:100%;max-width:250px;margin-inline:auto;aspect-ratio:1/.86;padding:var(--e3) 1rem;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem}
.chiffre::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;background:var(--jaune);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.chiffre:nth-child(even)::before{background:var(--encre)}
.chiffre:nth-child(even){color:var(--jaune)}
.chiffre b{font-family:var(--titre);font-size:clamp(2rem,5.2vw,2.9rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.chiffre span{font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;font-weight:800;max-width:15ch;line-height:1.25}
.chiffre:nth-child(odd) span{color:#4A3B00}

/* ════════ 7. CHRONOLOGIE ════════ */
.chrono{list-style:none;margin:var(--e5) 0 0;padding:0;position:relative;display:grid;gap:var(--e4)}
.chrono::before{content:"";position:absolute;left:19px;top:14px;bottom:14px;width:3px;background:linear-gradient(to bottom,var(--jaune),var(--jaune) 70%,rgba(255,225,0,.3))}
@media(min-width:820px){
  .chrono{grid-template-columns:repeat(4,1fr);gap:var(--e3)}
  .chrono::before{left:0;right:0;top:19px;bottom:auto;width:auto;height:3px;background:linear-gradient(to right,var(--jaune),var(--jaune) 70%,rgba(255,225,0,.3))}
}
.chrono li{position:relative;padding-left:58px}
@media(min-width:820px){.chrono li{padding-left:0;padding-top:60px}}
.chrono__noeud{position:absolute;left:0;top:0;width:40px;height:40px;display:grid;place-items:center;background:var(--creme)}
.chrono__noeud::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:var(--jaune);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.chrono__noeud b{position:relative;font-family:var(--titre);font-weight:700;font-size:1rem;color:var(--encre)}
.chrono li[data-actuel="true"] .chrono__noeud::before{background:var(--encre)}
.chrono li[data-actuel="true"] .chrono__noeud b{color:var(--jaune)}
.chrono__vue{display:block;margin:0 0 .85rem;border-radius:10px;overflow:hidden;background:var(--creme-2);aspect-ratio:16/10}
.chrono__vue img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--sortie)}
.chrono li:hover .chrono__vue img{transform:scale(1.04)}
.chrono__leg{display:block;margin:.5rem 0 0;font-size:var(--t-xs);color:var(--texte-2)}
.chrono__date{display:block;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin-bottom:.3rem}
.chrono h3{margin-bottom:.35rem}
.chrono p{margin:0;font-size:var(--t-s);color:var(--texte-2)}

/* ════════ 8. COMPARATEUR ════════ */
.compare{position:relative;height:0;padding-bottom:62.5%;aspect-ratio:16/10;border-radius:var(--r-m);overflow:hidden;background:#000;user-select:none;-webkit-user-select:none;touch-action:pan-y;box-shadow:var(--ombre-2)}
@media(min-width:700px){.compare{padding-bottom:56.25%;aspect-ratio:16/9}}
.compare img{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover}
.compare__dessus{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.compare__lbl{position:absolute;top:14px;padding:7px 13px;border-radius:var(--r-pill);font-weight:800;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;background:var(--jaune);color:var(--encre)}
.compare__lbl--g{left:14px}.compare__lbl--d{right:14px}
.compare__barre{position:absolute;top:0;bottom:0;left:var(--x,50%);width:3px;background:var(--jaune);transform:translateX(-50%);pointer-events:none;box-shadow:0 0 22px rgba(255,225,0,.6)}
.compare__poignee{position:absolute;top:50%;left:var(--x,50%);width:54px;height:54px;border-radius:50%;background:var(--jaune);color:var(--encre);transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.compare__poignee svg{width:22px;height:22px}
.compare input{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.compare input:focus-visible~.compare__poignee{outline:3px solid var(--blanc);outline-offset:3px}
.encart{display:flex;gap:.75rem;align-items:flex-start;margin-top:var(--e3);padding:15px 18px;border-left:4px solid var(--jaune);background:var(--jaune-4);font-size:var(--t-s)}
.encart svg{width:20px;height:20px;flex:none;margin-top:2px}
.nuit .encart,.encre .encart{background:rgba(255,225,0,.1);color:var(--sur-nuit)}

/* ════════ 8 bis. PROCHAIN RENDEZ-VOUS ════════ */
.prochain{background:var(--encre);color:var(--sur-nuit);border-bottom:4px solid var(--jaune)}
.prochain[hidden]{display:none}
.prochain__in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3);padding-block:clamp(18px,2.6vw,26px)}
.prochain__sur{flex:0 0 100%;margin:0;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.16em;font-weight:800;color:var(--jaune)}
.prochain__date{flex:none;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:74px;min-height:74px;border-radius:12px;background:var(--jaune);color:var(--encre);line-height:1;text-align:center}
.prochain__date b{font-family:var(--titre);font-size:1.75rem;font-weight:700;font-variant-numeric:tabular-nums}
.prochain__date span{font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;font-weight:800;margin-top:3px}
.prochain__corps{flex:1 1 16rem;min-width:0}
.prochain__corps h2{margin:0;font-size:clamp(1.15rem,2.6vw,1.6rem);font-weight:600;line-height:1.18;text-wrap:balance}
.prochain__corps p{margin:.3rem 0 0;font-size:var(--t-s);color:var(--sur-nuit-2)}
.prochain .btn{flex:none}
@media(max-width:600px){.prochain .btn{width:100%;justify-content:center}}

/* ════════ 9. ACTIONS ════════ */
.actions{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.actions{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){
  .actions{grid-template-columns:repeat(6,1fr)}
  .action{grid-column:span 2}
  .action:nth-last-child(2),.action:last-child{grid-column:span 3}
  .action--phare{grid-column:1/-1}
}
.action{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem;padding:var(--e3);background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-m);transition:border-color var(--vite),transform var(--vite) var(--sortie)}
.action h3{margin:0;line-height:1.2;text-wrap:balance}
.action:hover{border-color:var(--jaune);transform:translateY(-3px)}
.action__ico{position:relative;width:46px;height:46px;flex:none;display:grid;place-items:center;color:var(--encre)}
.action__ico::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:var(--jaune);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.action__ico svg{width:23px;height:23px;position:relative}
.action p{margin:0;color:var(--texte-2);font-size:var(--t-s)}
.action--phare{background:var(--encre);color:var(--sur-nuit);border-color:var(--encre);display:grid;gap:var(--e3);padding:clamp(22px,4vw,40px)}
.action--phare>div{display:flex;flex-direction:column;gap:.75rem;align-items:flex-start}
.action--phare>div h3{margin:0}
.action--phare>div p{margin:0}
@media(min-width:760px){.action--phare{grid-template-columns:1.15fr .85fr;align-items:center}}
.action--phare:hover{transform:none;border-color:var(--jaune)}
.action--phare h3{font-size:clamp(1.28rem,5.2vw,2.1rem);font-weight:600;line-height:1.12;text-wrap:balance;max-width:20ch}
.action--phare p{color:var(--sur-nuit-2);font-size:var(--t-m)}
.horaire{display:grid;gap:9px;width:100%;padding:var(--e3);border-radius:var(--r-m);background:rgba(255,225,0,.09);border:1px solid rgba(255,225,0,.3)}
.horaire__ligne{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:var(--t-s)}
.horaire__ligne dt{color:var(--sur-nuit-2);margin:0}
.horaire__ligne dd{margin:0;font-weight:800;color:var(--jaune);font-variant-numeric:tabular-nums;text-align:right;font-family:var(--titre);font-size:1.05rem}
.horaire__note{margin:9px 0 0;padding-top:9px;border-top:1px solid rgba(255,225,0,.22);font-size:var(--t-xs);color:var(--sur-nuit-2)}

/* ════════ 10. ÉVÉNEMENTS ════════ */
.filtres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--e4)}
.filtre{border:2px solid var(--ligne-2);background:transparent;color:inherit;border-radius:var(--r-pill);padding:8px 16px;font-weight:800;font-size:var(--t-s);cursor:pointer;transition:all var(--vite)}
.filtre:hover{border-color:var(--jaune)}
.filtre[aria-pressed="true"]{background:var(--jaune);color:var(--encre);border-color:var(--jaune)}
.nuit .filtre,.encre .filtre{border-color:rgba(255,255,255,.48)}
.evts{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:860px){.evts{grid-template-columns:repeat(2,1fr)}.evts:has(> .evt:only-child){grid-template-columns:1fr}}
.evt{display:flex;flex-direction:column;border-radius:var(--r-m);background:var(--surface-nuit);border:1px solid rgba(255,255,255,.1);overflow:hidden;transition:border-color var(--vite),transform var(--vite) var(--sortie)}
.evt:hover{border-color:var(--jaune);transform:translateY(-3px)}
.evt[data-statut="passe"]{opacity:.8}
.evt__haut{display:flex;gap:var(--e3);padding:var(--e3)}
.evt__date{flex:none;align-self:flex-start;width:78px;min-height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:11px 4px;border-radius:10px;background:var(--jaune);color:var(--encre);line-height:1;text-align:center}
.evt[data-statut="passe"] .evt__date{background:rgba(255,255,255,.1);color:var(--sur-nuit-2)}
.evt__date b{font-family:var(--titre);font-size:1.8rem;font-weight:700;font-variant-numeric:tabular-nums}
.evt__date span{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;font-weight:800;margin-top:3px}
.evt__date--flou{gap:4px}
.evt__date--flou svg{width:20px;height:20px}
.evt__date--flou b{font-size:1rem;letter-spacing:0;text-transform:uppercase}
.evt__corps{flex:1;min-width:0}
.evt__chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:.45rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:4px 10px;border-radius:var(--r-pill);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--jaune);color:var(--encre)}
.chip--passe{background:rgba(255,255,255,.12);color:var(--sur-nuit-2)}
.evt h3{margin-bottom:.35rem}
.evt__infos{display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:var(--t-s);color:var(--sur-nuit-2);margin-bottom:.45rem}
.evt__infos span{display:inline-flex;align-items:center;gap:.35rem}
.evt__infos svg{width:15px;height:15px;opacity:.75}
.evt p{margin:0;font-size:var(--t-s);color:var(--sur-nuit-2)}
.evt__actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--e3) var(--e3);margin-top:auto}
.evt__actions .btn--petit:not(.btn--or){border:1px solid rgba(255,255,255,.24);color:var(--sur-nuit);background:transparent}
.evt__actions .btn--petit:not(.btn--or):hover{border-color:var(--jaune);color:var(--jaune)}
.vide{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--e2);padding:clamp(32px,7vw,64px) var(--e3);border-radius:var(--r-m);border:2px dashed rgba(255,225,0,.35)}
.vide svg{width:42px;height:42px;color:var(--jaune)}
.vide p{margin:0;color:var(--sur-nuit-2);max-width:42ch;font-size:var(--t-s)}
.reguliers{display:grid;gap:12px;grid-template-columns:1fr;margin-top:var(--e4)}
@media(min-width:760px){.reguliers{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.reguliers{grid-template-columns:repeat(4,1fr)}}
.regulier{padding:var(--e3);border-radius:var(--r-m);background:var(--surface-nuit);border-top:3px solid var(--jaune)}
.regulier b{display:block;font-family:var(--titre);font-size:1.1rem;font-weight:700;margin-bottom:.2rem}
.regulier span{font-size:var(--t-s);color:var(--sur-nuit-2)}

/* ════════ 11. GALERIE — mosaïque éditoriale ════════ */
.galerie{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:860px){
  .galerie{grid-template-columns:repeat(6,1fr);grid-auto-rows:190px;gap:14px}
  .photo{grid-column:span 2}
  .photo:nth-child(1){grid-column:span 4;grid-row:span 2}
  .photo:nth-child(4){grid-column:span 4}
}
.photo{position:relative;margin:0;padding:0;border:0;width:100%;border-radius:var(--r-s);overflow:hidden;background:var(--creme-2);aspect-ratio:16/10;cursor:zoom-in;display:block}
@media(min-width:860px){.photo{aspect-ratio:auto;height:100%}}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--sortie)}
.photo:hover img,.photo:focus-visible img{transform:scale(1.05)}
.photo .legende{position:absolute;top:auto;right:0;bottom:0;left:0;inset:auto 0 0 0;padding:34px 14px 12px;font-size:var(--t-xs);font-weight:700;color:var(--blanc);text-align:left;background:linear-gradient(to top,rgba(10,15,30,.9),rgba(10,15,30,0))}
.photo::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;border:3px solid transparent;transition:border-color var(--vite);pointer-events:none;border-radius:var(--r-s)}
.photo:hover::after,.photo:focus-visible::after{border-color:var(--jaune)}
.photo[hidden]{display:none}
@media(max-width:560px){.photo .legende{font-size:10.5px;line-height:1.25;padding:24px 8px 8px}}

.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:100;background:rgba(8,8,8,.97);display:flex;flex-direction:column;padding:calc(14px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px));color:var(--sur-nuit)}
.lightbox[hidden]{display:none}
.lightbox__barre{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:var(--t-s);font-weight:700;font-variant-numeric:tabular-nums;color:var(--jaune)}
.lightbox__scene{flex:1;min-height:0;display:grid;place-items:center;position:relative;padding:10px 0}
.lightbox__scene img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px}
.lightbox__pied{text-align:center;font-size:var(--t-s);padding:6px 0 2px;min-height:2.4em}
.lightbox__pied small{display:block;color:#9A9384;font-size:var(--t-xs);margin-top:2px}
.lb-btn{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;border:2px solid rgba(255,255,255,.2);background:transparent;color:var(--blanc);cursor:pointer}
.lb-btn:hover{background:var(--jaune);color:var(--encre);border-color:var(--jaune)}
.lb-btn svg{width:22px;height:22px}
.lightbox__nav{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none;padding:0 4px}
.lightbox__nav .lb-btn{pointer-events:auto}

/* ════════ 12. PERSPECTIVES 2026 ════════ */
.perspectives{list-style:none;margin:var(--e4) 0 0;padding:0;display:grid;gap:2px;background:rgba(17,17,17,.16)}
@media(min-width:860px){.perspectives{grid-template-columns:repeat(2,1fr)}}
.perspectives li{background:var(--jaune);padding:var(--e3) var(--e3) var(--e3) 0;display:flex;gap:var(--e2);align-items:flex-start}
.perspectives b{font-family:var(--titre);font-weight:700;font-size:1.7rem;line-height:1;flex:none;width:56px;text-align:center;color:#6B5A00}
.perspectives p{margin:0;font-size:var(--t-s)}
.perspectives strong{font-weight:800}

/* ════════ 13. PONT VERS L'OLYMPIQUE ════════ */
.pont__fil{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pont__fil li{display:flex;gap:var(--e3);align-items:flex-start;padding:16px 18px;background:var(--surface-nuit);border-left:3px solid var(--jaune)}
.pont__fil b{font-family:var(--titre);font-size:1.45rem;font-weight:700;color:var(--jaune);line-height:1.08;flex:none;width:118px;font-variant-numeric:tabular-nums;overflow-wrap:normal;hyphens:none}
/* Les millésimes gardent leur taille — ce sont eux qui ancrent le regard.
   Seul un libellé en toutes lettres se réduit, juste assez pour tenir sur
   une ligne dans la même colonne, et l'alignement des trois lignes tient. */
.pont__fil b.mot{font-size:1.02rem;letter-spacing:-.005em;line-height:1.2}
.pont__fil p{margin:0;font-size:var(--t-s);color:var(--sur-nuit-2)}
.pont__fil strong{color:var(--sur-nuit);font-weight:700}

/* ════════ 14. PARTICIPER ════════ */
.participer{position:relative;isolation:isolate;color:var(--sur-nuit);overflow:hidden}
.participer__fond{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-2}
.participer__fond img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.participer::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;background:linear-gradient(to right,rgba(9,8,4,.93),rgba(9,8,4,.74))}
.voies{display:grid;gap:2px;grid-template-columns:1fr;background:rgba(255,255,255,.16)}
@media(min-width:720px){.voies{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.voies{grid-template-columns:repeat(4,1fr)}}
.voie{display:flex;flex-direction:column;gap:.5rem;padding:var(--e3);background:#141209;transition:background var(--vite)}
.voie:hover{background:#1E1A0C}
.voie__ico{width:40px;height:40px;display:grid;place-items:center;color:var(--jaune)}
.voie__ico svg{width:23px;height:23px}
.voie p{margin:0;font-size:var(--t-s);color:var(--sur-nuit-2);flex:1}
.voie .flechu{align-self:flex-start;color:var(--jaune)}
.partenaires{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--e3)}
.partenaire{padding:9px 16px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.22);font-size:var(--t-s);font-weight:600;color:var(--sur-nuit-2)}

/* ════════ 15. CONTACT ════════ */
.contact{display:grid;gap:var(--e5)}
@media(min-width:980px){.contact{grid-template-columns:.85fr 1.15fr;gap:var(--e6)}}
.coord{display:grid;gap:var(--e3);align-content:start}
.coord__bloc{display:flex;gap:var(--e2);align-items:flex-start}
.coord__ico{position:relative;width:40px;height:40px;flex:none;display:grid;place-items:center;color:var(--encre)}
.coord__ico::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:var(--jaune);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.coord__ico svg{width:19px;height:19px;position:relative}
.coord h3{font-size:1rem;margin-bottom:.15rem;font-weight:700}
.coord p{margin:0;color:var(--texte-2);font-size:var(--t-s)}
.form{display:grid;gap:14px;padding:clamp(20px,4vw,34px);background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-l)}
.champ{display:grid;gap:6px}
.champ label{font-size:var(--t-s);font-weight:800}
.champ .indice{font-size:var(--t-xs);color:var(--texte-3);font-weight:500}
.champ input,.champ select,.champ textarea{font:inherit;font-size:var(--t-s);color:var(--encre);background:var(--creme);border:2px solid var(--ligne);border-radius:var(--r-s);padding:12px 14px;width:100%;transition:border-color var(--vite),background var(--vite)}
.champ textarea{min-height:130px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--jaune);outline:none;background:var(--blanc)}
.champ [aria-invalid="true"]{border-color:#C1121F}
.erreur{font-size:var(--t-xs);color:#A00E1A;font-weight:700;min-height:1em}
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__deux{display:grid;gap:14px}
@media(min-width:640px){.form__deux{grid-template-columns:1fr 1fr}}
.form__etat{font-size:var(--t-s);padding:12px 14px;border-left:4px solid var(--jaune);background:var(--jaune-4)}

/* ════════ 16. PIED DE PAGE ════════ */
.pied{background:var(--encre);color:var(--sur-nuit);padding-block:var(--e6) var(--e4)}
.pied__haut{display:grid;gap:var(--e4)}
@media(min-width:900px){.pied__haut{grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:var(--e4)}}
.pied__marque{display:flex;align-items:center;gap:14px;margin-bottom:var(--e2)}
.pied__marque img{width:62px;height:auto}
.pied__marque b{font-family:var(--titre);font-size:1.3rem;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05}
.pied__marque b span{display:block;font-family:var(--corps);font-size:.66rem;letter-spacing:.22em;font-weight:700;color:var(--jaune)}
.pied p{color:var(--sur-nuit-2);font-size:var(--t-s);max-width:34ch}
.pied h3{font-family:var(--corps);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;font-weight:800;color:var(--jaune);margin-bottom:var(--e2)}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pied ul li{min-height:26px;display:flex;align-items:center}
.pied ul a{display:inline-flex;align-items:center;min-height:26px;padding:3px 0}
.pied ul a,.pied ul li{color:var(--sur-nuit-2);text-decoration:none;font-size:var(--t-s)}
.pied ul a:hover{color:var(--jaune)}
.reseaux{display:flex;gap:10px;margin-top:var(--e2)}
.reseau{width:46px;height:46px;display:grid;place-items:center;border:2px solid rgba(255,255,255,.18);color:var(--sur-nuit);text-decoration:none;transition:all var(--vite)}
.reseau:hover{border-color:var(--jaune);color:var(--encre);background:var(--jaune)}
.reseau svg{width:20px;height:20px}
.pied__bas{margin-top:var(--e5);padding-top:var(--e3);border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;align-items:center;font-size:var(--t-xs);color:#8C8574}
.legal summary{cursor:pointer;font-weight:700;color:var(--sur-nuit-2);font-size:var(--t-s)}
.legal summary::marker{color:var(--jaune)}
.legal p{font-size:var(--t-xs);color:#8C8574;margin-top:.6rem}

/* ════════ 17. MOUVEMENT ════════ */
.js [data-reveal].pre{opacity:0;transform:translateY(18px)}
.js [data-reveal].vu{opacity:1;transform:none;transition:opacity .7s var(--sortie),transform .7s var(--sortie)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  /* ⚠️ le « left:5vw » qui traînait ici déplaçait le navire à l'autre bout
     du ciel dès que le visiteur demandait moins d'animations — vestige de
     l'époque où il traversait l'écran. Le navire reste désormais exactement
     là où il est composé, simplement immobile. */
  .navire{animation:none}
  .js [data-reveal].pre{opacity:1;transform:none}
}
/* ════════ 20. SITE MULTI-PAGES ════════ */

/* Bandeau d'ouverture des pages internes */
.tete{position:relative;overflow:hidden;background:var(--nuit-2);color:var(--sur-nuit);isolation:isolate}
.tete__fond{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-2}
.tete__fond img{width:100%;height:100%;object-fit:cover;opacity:.42}
.tete::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(10,20,48,.82) 0,rgba(10,20,48,.6) 55%,var(--nuit-2) 100%)}
.tete__in{padding-block:clamp(120px,15vw,190px) clamp(34px,5vw,58px)}
.tete h1{margin:.2rem 0 0;font-size:clamp(2rem,6vw,3.6rem);line-height:1.04;letter-spacing:-.025em;
  color:var(--blanc);text-wrap:balance;max-width:19ch}
.tete__lead{margin:var(--e3) 0 0;font-size:var(--t-l);line-height:1.45;color:var(--sur-nuit-2);max-width:56ch}
.tete .eyebrow{color:var(--jaune)}
.tete .eyebrow::before{background:var(--jaune)}

/* Fil d'Ariane */
.fil{background:var(--creme-2);border-bottom:1px solid var(--ligne)}
.fil ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:0;padding:11px 0;
  font-size:var(--t-xs);color:var(--texte-2)}
.fil li+li::before{content:"›";margin-right:.45rem;opacity:.5}
.fil a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
.fil a:hover{color:var(--encre);border-bottom-color:var(--jaune)}
.fil [aria-current]{font-weight:700;color:var(--encre)}

/* Aperçus de l'accueil : cartes cliquables vers les pages internes */
.apercu{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.apercu{grid-template-columns:repeat(3,1fr)}}
.apercu__c{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem;padding:var(--e3);
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-m);text-decoration:none;color:inherit;
  transition:border-color var(--vite),transform var(--vite) var(--sortie)}
.apercu__c:hover{border-color:var(--jaune);transform:translateY(-3px)}
.apercu__c h3{margin:0;line-height:1.2;text-wrap:balance}
.apercu__c p{margin:0;color:var(--texte-2);font-size:var(--t-s)}

/* Bande d'images de l'accueil */
.bande{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:860px){.bande{grid-template-columns:repeat(4,1fr);grid-auto-rows:186px}
  .bande__c--large{grid-column:span 2;grid-row:span 2}}
.bande__c{position:relative;display:block;border-radius:var(--r-s);overflow:hidden;background:var(--creme-2);
  aspect-ratio:16/10;text-decoration:none}
@media(min-width:860px){.bande__c{aspect-ratio:auto;height:100%}}
.bande__c img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--sortie)}
.bande__c:hover img,.bande__c:focus-visible img{transform:scale(1.05)}
.bande__l{position:absolute;top:auto;right:0;bottom:0;left:0;inset:auto 0 0 0;padding:30px 13px 11px;font-size:var(--t-xs);font-weight:700;
  color:var(--blanc);background:linear-gradient(to top,rgba(10,15,30,.9),rgba(10,15,30,0))}
.bande__c::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;border:3px solid transparent;border-radius:var(--r-s);
  transition:border-color var(--vite);pointer-events:none}
.bande__c:hover::after,.bande__c:focus-visible::after{border-color:var(--jaune)}

.apres-chiffres{margin:var(--e4) 0 0}

/* Bande d'appel à l'action entre deux sections */
.cta-bande__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e3)}
.cta-bande h2{margin:0;font-size:clamp(1.3rem,3vw,1.9rem);max-width:24ch;text-wrap:balance}
.cta-bande p{margin:.4rem 0 0;max-width:58ch;font-size:var(--t-s)}
.cta-bande.jaune p{color:#4A3B00}
.cta-bande.encre{background:var(--encre);color:var(--sur-nuit)}
.cta-bande.encre p{color:var(--sur-nuit-2)}
.btn--encre{background:var(--encre);color:var(--sur-nuit);border:2px solid var(--encre)}
.btn--encre:hover{background:transparent;color:var(--encre)}
.encre .btn--encre{background:var(--jaune);color:var(--encre);border-color:var(--jaune)}
.encre .btn--encre:hover{background:transparent;color:var(--jaune)}

/* Maillage interne en bas de page */
.suite{background:var(--creme-2)}
.suite__titre{font-size:clamp(1.1rem,2.4vw,1.4rem);margin-bottom:var(--e3);
  font-family:var(--corps);text-transform:uppercase;letter-spacing:.12em;font-size:var(--t-xs);font-weight:800;color:var(--texte-2)}
.suite__g{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:760px){.suite__g{grid-template-columns:repeat(3,1fr)}}
.suite__c{position:relative;display:flex;flex-direction:column;gap:.35rem;padding:var(--e3) calc(var(--e3) + 30px) var(--e3) var(--e3);
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-m);text-decoration:none;color:inherit;
  transition:border-color var(--vite),transform var(--vite) var(--sortie)}
.suite__c:hover{border-color:var(--jaune);transform:translateY(-3px)}
.suite__t{font-family:var(--titre);font-weight:600;font-size:1.08rem}
.suite__d{font-size:var(--t-s);color:var(--texte-2)}
.suite__f{position:absolute;right:var(--e3);top:50%;transform:translateY(-50%);color:var(--encre);opacity:.4;
  transition:opacity var(--vite),transform var(--vite)}
.suite__f svg{width:20px;height:20px}
.suite__c:hover .suite__f{opacity:1;transform:translate(3px,-50%)}

/* Comité */
.noms{list-style:none;margin:var(--e3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.noms li{padding:11px 18px;border:1px solid var(--ligne-2);border-radius:var(--r-pill);
  font-family:var(--titre);font-weight:600;background:var(--blanc)}

.deux-col--texte{align-items:start}
.reguliers--clair .regulier{background:var(--blanc);border-color:var(--ligne)}
.reguliers--clair .regulier b{color:var(--encre)}
.reguliers--clair .regulier span{color:var(--texte-2)}

/* ═══ FIN DE FEUILLE — réglages du navire qui doivent l'emporter ═══════
   v35 : les deux blocs qui vivaient ici ont été SUPPRIMÉS.
     ① la pastille ronde de 26 px qui remplaçait l'étiquette sur téléphone —
        invisible en pratique, personne ne devinait le bouton ;
     ② le calcul de position « --toits », qui plaçait le navire juste au-dessus
        de la ligne de faîtage déduite du cadrage 92 %. Ce cadrage n'existe
        plus : l'illustration est désormais affichée en entier, donc la ligne
        de faîtage est simplement une fraction fixe de la bande.
   Le navire et son étiquette se règlent maintenant au même endroit que le
   reste, dans la section « Les deux navires ». Ne rien rajouter ici sans
   nécessité : c'est la dernière cascade, elle masque tout le reste. */
/* Sur téléphone le hero contient AUSSI le bloc de texte : « bas du hero »
   n'est donc pas « bas de l'illustration ». On repositionne le bouton au bas
   de la bande d'image, où il ne recouvre ni la barre du haut ni le texte. */
/* Sur telephone le bouton se cale au bas de l'illustration — sauf quand
   l'illustration descend plus bas que l'ecran : a 430 px de large la bande
   fait 915 px et le bouton tombait hors de vue. Le min() le retient au
   bord inferieur de la fenetre. Ligne en vh d'abord, pour les navigateurs
   qui ignorent svh. */
@media(max-width:999px){.navire__pause{bottom:auto;
  top:min(calc(var(--bande) - 40px),calc(100vh - 62px));
  top:min(calc(var(--bande) - 40px),calc(100svh - 62px))}}
}

/* ═══ HAUTEUR DE CIBLE DES LIENS EN LIGNE ═════════════════════════════
   Mesuré le 22.09.2026 : le fil d'Ariane, le lien des mentions légales et
   « Ouvrir sur YouTube » faisaient 19 à 23 px de haut. La règle WCAG 2.5.8
   tolère les liens insérés dans une phrase, mais rien n'oblige à s'en
   contenter : quelques pixels de marge intérieure suffisent à atteindre
   24 px sans bouger la mise en page (padding vertical absorbé par la
   hauteur de ligne existante). */
.fil a,
.legal a,
.lien-sortant{display:inline-block;padding-block:3px;min-height:24px}
.fil a{padding-inline:2px;margin-inline:-2px}