/* Mégadanse v2 : structure commune (jetons, fond, en-tête, menu, héros, bandeau, pied).
   Identité d'origine : rouge #d0111f, noir, blanc, bandeau tampon, couple, rayons rouges. */

/* Polices auto-hébergées (OFL, sous-ensemble latin) : aucune requête vers Google. */
@font-face { font-family: 'Archivo B'; font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('../fonts/archivo-italique.woff2') format('woff2'); }
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/anton-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/work-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --noir: #0d0b0b;
  --rouge: #d0111f;
  --rouge-vif: #ff2a38;
  --rouge-sombre: #7a0a12;
  --encre: #0d0b0b;
  --encre-2: #1a1515;
  --blanc: #ffffff;
  --gris: #6f6a66;
  --gris-clair: #d3d3d3;
  --f-titre: 'Archivo B', 'Arial Black', sans-serif;
  --f-heros: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --f-texte: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --gout: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --r: 20px;
  --r-grand: clamp(24px, 4vw, 44px);
  --ombre: 0 1px 2px rgb(0 0 0 / 0.08), 0 12px 32px -12px rgb(0 0 0 / 0.35);
  --ombre-forte: 0 2px 4px rgb(0 0 0 / 0.12), 0 30px 60px -20px rgb(0 0 0 / 0.55);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Portables (Windows à 125 ou 150 % : la page n'a que 1100 à 1600 px de large) : tout le site réduit de 15 %, pour
   retrouver l'aisance d'un grand écran (Alex, 2026-10-31 : « tout est gros » sur son portable 1920x1080). */
@media (min-width: 1100px) and (max-width: 1600px) { html { zoom: 0.85; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--f-texte);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  color: var(--encre);
  background: var(--encre);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--rouge-vif); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--rouge); color: var(--blanc); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lien-evitement {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  background: var(--rouge); color: var(--blanc); padding: 10px 16px; border-radius: 10px;
  font-weight: 700; text-decoration: none; transition: top 0.2s;
}
.lien-evitement:focus { top: 12px; }
.conteneur { width: min(100% - 2 * var(--gout), var(--max)); margin-inline: auto; }

/* ---------- Fond : boucle des rayons (Blender), fixe derrière tout ---------- */
.fond { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: #b80d18 center / cover no-repeat; }
.fond-video, .fond-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fond-video { opacity: 0; transition: opacity 1.2s var(--ease); }
.fond-video.pret { opacity: 1; }
/* Porte de départ (boot.js, motion.js) : avec carte graphique, rien ne bouge tant que la carte prépare ses dessins. */
html.md-avant-depart *, html.md-avant-depart *::before, html.md-avant-depart *::after { animation-play-state: paused !important; }
/* Préchauffage (motion.js) : copie presque invisible de ce qui n'est pas encore dessiné (blocs en attente d'entrée,
   en-tête « défilé »), le temps que la carte graphique prépare ses programmes, puis retirée. */
.prechauffe { position: fixed; inset: 0; overflow: hidden; opacity: 0.01; pointer-events: none; z-index: 2147483000; }
.prechauffe [style], .prechauffe [data-v1-entree] { opacity: 1 !important; visibility: visible !important; }
/* Fond par défaut, sans vidéo : 9 images clés cuites comme la vidéo (bake_cles.py), affichées par motion.js
   (data-fond="images"). 16 relais aller-retour 1..9..2 en 12 s, comme la vidéo en ping-pong (build_pages.py,
   0,75 s par relais) : chaque relais apparaît en fondu sur le précédent, plein, puis s'éteint caché sous le suivant ;
   le relais 1 reste dessous au début et à la fin du cycle, le dernier s'efface sur lui. Jamais de trou, au plus
   2 couches visibles. Opacity seulement, cadrage identique à la vidéo (aucune rotation : elle doublait les traits).
   steps(15) cale les fondus sur 50 ms (20 images/s) : en rendu logiciel, coût divisé par 2. */
.fond-images { position: absolute; inset: 0; display: none; opacity: 0; transition: opacity 1.2s var(--ease); }
html[data-fond="images"] .fond-images { display: block; }
.fond-images.pret { opacity: 1; }
.fond-couche { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.fond-relais-debut { animation: fond-relais-debut 12s infinite; }
.fond-relais-milieu { animation: fond-relais-milieu 12s infinite; }
.fond-relais-fin { animation: fond-relais-fin 12s infinite; }
@keyframes fond-relais-debut {
  0% { opacity: 1; animation-timing-function: step-end; } 6.25% { opacity: 0; animation-timing-function: step-end; }
  93.75%, 100% { opacity: 1; }
}
@keyframes fond-relais-milieu {
  0% { opacity: 0; animation-timing-function: steps(15); } 6.25% { opacity: 1; animation-timing-function: step-end; }
  12.5%, 100% { opacity: 0; }
}
@keyframes fond-relais-fin {
  0% { opacity: 0; animation-timing-function: steps(15); } 6.25% { opacity: 1; animation-timing-function: steps(15); }
  12.5%, 100% { opacity: 0; }
}
html.leger .fond-images, html[data-sans~="video"] .fond-images { display: none !important; }
@media (prefers-reduced-motion: reduce) { .fond-images { display: none !important; } }
/* Le voile choisi (28 %) est cuit dans la vidéo et les posters : rien de plus ici. */
.fond-voile { display: none; }
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  background: url('../media/grain.webp') repeat; opacity: 0.07; mix-blend-mode: overlay;
}
/* Diagnostic (?sans=) : interrupteurs posés par boot.js, sans effet pour un visiteur normal. */
html[data-sans~="grain"] .grain { display: none !important; }
html[data-sans~="flou"] * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-sans~="video"] .fond-video { display: none !important; }
html.anime .grain { animation: grain 0.9s steps(4) infinite; }
@keyframes grain {
  0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(1%, 3%); }
}
.progression {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 120; pointer-events: none;
  background: linear-gradient(90deg, var(--rouge-sombre), var(--rouge), var(--rouge-vif));
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}

/* ---------- En-tête flottant (pilule verre) ---------- */
.entete {
  position: fixed; z-index: 100; top: 12px; left: 50%;
  width: min(100% - 24px, 1520px);
  display: flex; align-items: center; gap: 14px;
  padding: 8px 10px 8px 14px;
  color: var(--blanc);
  background: rgb(13 11 11 / 0.62);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 999px;
  box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.6);
  transform: translate(-50%, 0);
  transition: transform 0.5s var(--ease), background 0.3s;
}
.entete.cache { transform: translate(-50%, calc(-100% - 20px)); }
.entete-marque { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.entete-marque img { height: 44px; width: auto; filter: drop-shadow(0 0 10px rgb(255 255 255 / 0.25)); }
.entete-mot { display: flex; gap: 0.06em; height: 18px; color: var(--blanc); }
.entete-mot svg { height: 100%; width: auto; fill: currentColor; }
.nav-ligne { display: none; margin-left: auto; gap: 2px; }
.nav-ligne a {
  position: relative; padding: 8px 9px; border-radius: 999px;
  font-size: 0.84rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
  text-decoration: none; color: rgb(255 255 255 / 0.86); transition: color 0.2s, background 0.2s;
}
.nav-ligne a:hover { color: var(--blanc); background: rgb(255 255 255 / 0.08); }
.nav-ligne a[aria-current='page'] { color: var(--blanc); background: var(--rouge); }
.entete-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.reseau {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--blanc); text-decoration: none; transition: background 0.2s, transform 0.2s;
}
.reseau:hover { background: rgb(255 255 255 / 0.12); }
.reseau svg { width: 20px; height: 20px; }
.btn-menu {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 18px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--rouge); color: var(--blanc); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.btn-menu:hover { background: var(--rouge-vif); }
.burger { position: relative; width: 20px; height: 12px; }
.burger::before, .burger::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform 0.4s var(--ease), top 0.4s var(--ease);
}
.burger::before { top: 0; } .burger::after { top: 10px; }
.menu-ouvert .burger::before { top: 5px; transform: rotate(45deg); }
.menu-ouvert .burger::after { top: 5px; transform: rotate(-45deg); }

@media (min-width: 1320px) {
  .nav-ligne { display: flex; }
  .nav-ligne + .entete-actions { margin-left: 6px; }
  .btn-menu { display: none; }
}
@media (max-width: 520px) {
  .entete { top: 8px; width: calc(100% - 16px); padding: 6px 6px 6px 10px; gap: 8px; }
  .entete-marque img { height: 38px; }
  .entete-mot { height: 14px; }
  .reseau { display: none; }
  .btn-menu { height: 40px; padding: 0 14px; }
}

/* ---------- Menu plein écran ---------- */
.menu-plein {
  position: fixed; inset: 0; z-index: 95; display: grid; grid-template-columns: minmax(0, 1fr); align-content: safe center;
  padding: max(96px, 12vh) var(--gout) 32px; overflow-y: auto; overscroll-behavior: contain;
  color: var(--blanc); background: var(--encre);
  clip-path: circle(0 at var(--mx, 95%) var(--my, 5%)); visibility: hidden;
  transition: clip-path 0.8s var(--ease), visibility 0s 0.8s;
}
.menu-plein::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.32; background: center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000); mask-image: linear-gradient(90deg, transparent 20%, #000);
}
/* Image chargée seulement à l'ouverture du menu, et dans la bonne orientation. */
.menu-ouvert .menu-plein::before { background-image: url('../media/fond/fond-land.webp'); }
@media (orientation: portrait) { .menu-ouvert .menu-plein::before { background-image: url('../media/fond/fond-port.webp'); } }
.menu-ouvert .menu-plein { clip-path: circle(150% at var(--mx, 95%) var(--my, 5%)); visibility: visible; transition: clip-path 0.8s var(--ease), visibility 0s; }
.menu-liste { list-style: none; margin: 0; padding: 0; counter-reset: m; width: min(100%, 1100px); margin-inline: auto; }
.menu-liste li { overflow: hidden; }
.menu-liste a {
  display: flex; align-items: baseline; gap: 0.5em; padding: 0.04em 0;
  font-family: var(--f-titre); font-style: italic; font-weight: 800; font-size: clamp(1.1rem, min(5.6vh, 6.2vw), 4.6rem); line-height: 1.1; text-transform: uppercase; white-space: nowrap;
  text-decoration: none; color: var(--blanc);
  transform: translateY(105%); transition: transform 0.7s var(--ease), color 0.25s;
}
.menu-liste a::before {
  counter-increment: m; content: counter(m, decimal-leading-zero);
  font-family: var(--f-texte); font-size: 0.8rem; font-weight: 700; color: var(--rouge-vif); transform: translateY(-1.6em);
}
.menu-liste a:hover, .menu-liste a[aria-current='page'] { color: var(--rouge-vif); }
.menu-ouvert .menu-liste a { transform: none; }
.menu-ouvert .menu-liste li:nth-child(n) a { transition-delay: calc(0.12s + var(--i, 0) * 0.04s); }
.menu-pied { display: flex; flex-wrap: wrap; gap: 12px 28px; width: min(100%, 1100px); margin: 32px auto 0; font-weight: 600; opacity: 0.85; }
.menu-pied a { text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / 0.3); }
html.menu-ouvert { overflow: hidden; }

/* ---------- Héros : le bandeau d'origine recomposé et vivant ---------- */
.heros { position: relative; height: 100svh; min-height: 520px; }
html.anime .heros { height: 210svh; }
.heros-scene {
  position: sticky; top: 0; height: 100svh; min-height: 520px;
  display: grid; place-items: center; align-content: center; gap: clamp(18px, 3.5vh, 40px);
  padding: 90px 0 120px; overflow: hidden;
}
.bandeau-vivant {
  position: relative; width: min(94vw, 1500px); aspect-ratio: 1588 / 334;
  perspective: 900px; will-change: transform;
}
.lettre {
  position: absolute; left: calc(var(--x) / 1588 * 100%); top: calc(var(--y) / 334 * 100%);
  width: calc(var(--w) / 1588 * 100%); height: calc(var(--h) / 334 * 100%);
  fill: #0b0909; overflow: visible; filter: drop-shadow(0 6px 14px rgb(0 0 0 / 0.28));
  transform-origin: 50% 100%;
}
.couple3d {
  position: absolute; z-index: 2; left: calc(721 / 1588 * 100%); top: -5.2%; height: 109.3%;
  aspect-ratio: 2 / 3; transform: translateX(-50%); transform-origin: 50% 60%;
  pointer-events: none; will-change: transform;
}
.couple3d canvas, .couple3d img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.couple3d canvas { opacity: 0; }
.couple3d.pret canvas { opacity: 1; }
.couple3d.pret img { opacity: 0; }
.heros-accroche {
  margin: 0; text-align: center; color: var(--blanc);
  font-family: var(--f-titre); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: clamp(1.05rem, 0.8rem + 1.6vw, 2rem); line-height: 1.1;
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.45);
}
.heros-accroche span { display: inline-block; padding: 0.15em 0.2em; background: none; text-shadow: var(--halo-rouge); }
.heros-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-inline: 16px; }

/* Intro (première visite de la session) */
.intro { position: fixed; inset: 0; z-index: 150; display: none; pointer-events: none; }
html.intro-active .intro { display: block; pointer-events: auto; }
.intro-volet { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--encre); }
.intro-volet.haut { top: 0; } .intro-volet.bas { bottom: 0; }
.intro-couple { position: absolute; left: 50%; top: 50%; height: min(46vh, 380px); transform: translate(-50%, -50%); }
.intro-couple img { height: 100%; width: auto; }
.intro-trait { position: absolute; left: 50%; top: 50%; width: min(60vw, 520px); height: 2px; background: var(--rouge); transform: translate(-50%, 0) scaleX(0); }
html.intro-active .intro-couple { animation: intro-couple 2.1s var(--ease) both; }
html.intro-active .intro-trait { animation: intro-trait 2.1s var(--ease) both; }
html.intro-active .intro-volet.haut { animation: volet-haut 0.95s cubic-bezier(0.76, 0, 0.24, 1) 1.15s both; }
html.intro-active .intro-volet.bas { animation: volet-bas 0.95s cubic-bezier(0.76, 0, 0.24, 1) 1.15s both; }
@keyframes intro-couple {
  0% { opacity: 0.01; transform: translate(-50%, -46%) scale(0.9); }
  40%, 52% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  78%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.14); }
}
@keyframes intro-trait {
  0%, 16% { opacity: 1; transform: translate(-50%, 0) scaleX(0); }
  46% { opacity: 1; transform: translate(-50%, 0) scaleX(1); }
  62%, 100% { opacity: 0; transform: translate(-50%, 0) scaleX(1); }
}
@keyframes volet-haut { to { transform: translateY(-101%); } }
@keyframes volet-bas { to { transform: translateY(101%); } }

/* ---------- Boutons ---------- */
.btn {
  --bg: var(--rouge); --fg: var(--blanc);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 2px solid var(--bg);
  background: var(--bg); color: var(--fg); text-decoration: none; cursor: pointer;
  font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.92rem;
  overflow: hidden; isolation: isolate; transition: color 0.35s var(--ease), border-color 0.35s;
}
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--encre);
  transform: translateY(101%); transition: transform 0.45s var(--ease);
}
.btn:hover::after { transform: none; }
.btn:hover { border-color: var(--encre); }
.btn-ligne { --bg: rgb(13 11 11 / 0.35); --fg: var(--blanc); border-color: rgb(255 255 255 / 0.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-ligne::after { background: var(--blanc); }
.btn-ligne:hover { color: var(--encre); border-color: var(--blanc); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- Bandeaux défilants des disciplines (croisés) ---------- */
/* ---------- Bande des disciplines : une seule, droite, noms détourés, projecteur au centre ---------- */
.bande-disciplines {
  position: relative; z-index: 3; overflow: hidden; padding: clamp(18px, 3vw, 36px) 0; margin: clamp(8px, 2vw, 24px) 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.bande-disciplines::after {
  content: ''; position: absolute; left: 50%; top: -30%; width: min(46vw, 560px); height: 160%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 100%); pointer-events: none;
}
.bande-piste { position: relative; display: flex; width: max-content; will-change: transform; }
.bande-lot { display: flex; }
.discipline-pill {
  position: relative; display: inline-block; padding: 0 0.42em;
  font-family: var(--f-titre); font-style: italic; font-weight: 800; text-transform: uppercase; white-space: nowrap; text-decoration: none;
  font-size: clamp(2.6rem, 1.4rem + 5.4vw, 6.6rem); line-height: 1.05; letter-spacing: 0.01em;
  color: transparent; -webkit-text-stroke: clamp(1.5px, 0.18vw, 2.5px) rgb(255 255 255 / 0.92);
  text-shadow: 0 3px 16px rgb(0 0 0 / 0.32);
}
.discipline-pill::before {
  content: attr(data-t); position: absolute; inset: 0 0.42em; color: var(--rouge); -webkit-text-stroke: 0;
  text-shadow: 0 0 22px rgb(255 42 56 / 0.85), 0 0 60px rgb(208 17 31 / 0.6), 0 4px 0 var(--rouge-sombre);
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.discipline-pill.allume::before, .discipline-pill:hover::before, .discipline-pill:focus-visible::before { opacity: 1; }
html[data-bande='aucune'] .bande-disciplines { display: none; }
html:not(.anime) .bande-piste { animation: none; }
html.leger .bande-piste { animation: defil 60s linear infinite; }
@keyframes defil { to { transform: translateX(calc(-100% / 6)); } }
@media (prefers-reduced-motion: reduce) { html.leger .bande-piste { animation: none; } }

/* ---------- Panneaux de contenu ---------- */
.panneau {
  position: relative; z-index: 2; background: var(--blanc);
  border-radius: var(--r-grand) var(--r-grand) 0 0; padding: clamp(48px, 8vw, 110px) 0 clamp(60px, 8vw, 120px);
  box-shadow: 0 -30px 60px -30px rgb(0 0 0 / 0.5);
}
.panneau-encre { background: var(--encre); color: var(--blanc); }
.panneau + .panneau { border-radius: 0; box-shadow: none; }
.surtitre {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rouge);
}
.surtitre::before { content: ''; width: 28px; height: 2px; background: currentColor; }
.titre-section {
  margin: 0 0 clamp(24px, 4vw, 48px); font-family: var(--f-titre); font-style: italic; font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.4rem, 1.6rem + 4vw, 5.6rem); line-height: 0.95; letter-spacing: 0.005em;
}
.tampon { -webkit-mask: url('../media/tampon.png') 0 0 / 260px repeat; mask: url('../media/tampon.png') 0 0 / 260px repeat; }

/* ---------- Tête des pages intérieures : le titre n'est lu que par les lecteurs d'écran (gros titre
   dans un grand vide refusé par Alex). Langage V1 de la tête du planning (planning-v1.css, accueil-v1.css :
   v1-carte-rouge, v1-penche-g, v1-trait, v1-btn-ligne) : carte rouge penchée, intro blanche en Archivo italique,
   trait blanc, bouton en pilule bordée de blanc ; survol : fond noir, texte blanc, bord rouge.
   La carte : .page-carte (intro et bouton, événements et historique, build_pages.py) ou l'intro seule (équipe,
   galerie, partenaires, si l'admin la remplit). Entrée par la gauche en CSS (transform et opacity seulement). ---------- */
/* Seul le dégagement sous la barre fixe reste (marge, pas de bloc) ; sans intro ni bouton la tête mesure 0. */
.page-tete { --penche: 0deg; --tete-air: 0px; position: relative; margin: clamp(72px, 5.5vw, 80px) 0 0; padding: 0; }
/* Penchée à partir de 900 px, comme la carte du planning ; le coin relevé garde un peu d'air sous la barre. */
@media (min-width: 900px) { .page-tete { --penche: 1.2deg; --tete-air: 14px; } }
.page-tete .conteneur { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 24px; }
/* Sous la bande des disciplines, même respiration que le haut du panneau du planning. */
.page-tete > .ticker-wrap ~ .conteneur > .page-carte, .page-tete > .ticker-wrap ~ .conteneur > .page-lead { margin-top: clamp(48px, 8vw, 110px); }
.page-tete .page-carte, .page-tete .conteneur > .page-lead {
  max-width: 100%; margin: var(--tete-air) 0 clamp(16px, 2.4vw, 28px); padding: clamp(20px, 3vw, 36px) clamp(22px, 3.4vw, 44px);
  border-radius: 18px; background: var(--rouge); color: var(--blanc); box-shadow: 0 30px 70px rgb(0 0 0 / 0.5);
  rotate: calc(var(--penche) * -1);
}
.page-tete .page-carte { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px clamp(28px, 4vw, 56px); }
.page-tete .page-lead {
  min-width: 0; margin: 0; color: var(--blanc); overflow-wrap: anywhere;
  font-family: var(--f-titre); font-style: italic; font-weight: 800; font-stretch: 104%;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem); line-height: 1.22;
}
.page-tete .page-carte > .page-lead { flex: 0 1 34ch; }
.page-tete .conteneur > .page-lead { max-width: min(100%, 40ch); }
.page-tete .page-lead::after { content: ''; display: block; width: 96px; height: 6px; margin-top: 16px; border-radius: 3px; background: var(--blanc); }
.page-tete .page-lead[style*='none'], .page-tete .page-lead:empty { display: none; }
html.anime .page-tete .page-carte, html.anime .page-tete .conteneur > .page-lead { animation: tete-entree 0.9s var(--ease) 0.1s backwards; }
@keyframes tete-entree { from { opacity: 0.01; transform: translateX(-36px); } }
@media (prefers-reduced-motion: reduce) {
  html.anime .page-tete .page-carte, html.anime .page-tete .conteneur > .page-lead { animation: none; }
}
/* Bouton « Historique » / « Événements à venir » : pilule V1 bordée de blanc sur la carte rouge. */
.page-tete .btn-history {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.9em 1.5em; border-radius: 999px;
  background: transparent; color: var(--blanc); box-shadow: inset 0 0 0 2px var(--blanc);
  font: 700 1rem/1.15 var(--f-texte); text-align: center; text-decoration: none;
  transition: background-color 0.25s, color 0.25s, transform 0.2s var(--ease);
}
.page-tete .btn-history:hover, .page-tete .btn-history:focus-visible { background: var(--noir); color: var(--blanc); box-shadow: inset 0 0 0 2px var(--rouge); }
.page-tete .btn-history:focus-visible { outline-color: var(--blanc); }
.page-tete .btn-history:active { transform: scale(0.97); }

/* ---------- Pied de page ---------- */
.pied { position: relative; z-index: 2; background: var(--encre); color: var(--blanc); padding: clamp(56px, 8vw, 100px) 0 28px; overflow: hidden; }
.pied-grille { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pied h2 { margin: 0 0 14px; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rouge-vif); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied a { color: rgb(255 255 255 / 0.85); text-decoration: none; transition: color 0.2s; }
.pied a:hover { color: var(--rouge-vif); }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 24px; font-size: 0.85rem; color: rgb(255 255 255 / 0.6); }
.pied-bas a { color: rgb(255 255 255 / 0.75); text-decoration: underline; text-underline-offset: 3px; }

/* Curseur personnalisé retiré (refusé par Alex) : la souris normale reste. */
.curseur { display: none; }

/* ---------- Pas de transition entre pages ----------
   Retirée le 2026-10-31 : Edge et Chrome photographiaient tout l'écran (3440x1440 chez Alex) et animaient les photos
   pendant le démarrage de la page suivante : lag au retour sur une rubrique. Firefox (2500U d'Alex) ne la jouait pas
   et ne laguait pas : tous les navigateurs changent maintenant de page comme lui. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Impression : uniquement la fiche d'inscription (comportement d'origine) ---------- */
#print-recap { display: none; }
@media print {
  body { background: #fff; }
  body > *:not(#print-recap) { display: none !important; }
  #print-recap { display: block !important; color: #000; background: #fff; padding: 10px; font-family: Arial, sans-serif; }
  #print-recap h1 { font-size: 1.4rem; margin: 0 0 16px; }
  #print-recap h2 { font-size: 1.05rem; margin: 20px 0 8px; border-bottom: 1px solid #000; padding-bottom: 4px; }
  #print-recap p { margin: 0 0 6px; }
  #print-recap ul { margin: 0 0 6px; padding-left: 1.2em; }
  #print-recap .print-signature { margin-top: 50px; }
}

/* ---------- Phrase finale du héros (révélée en fin de chorégraphie) ---------- */
.heros-phrase {
  position: absolute; inset: 0; z-index: 1; margin: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(16px, 4vw, 64px);
  font-family: var(--f-titre); text-transform: uppercase; color: var(--blanc);
  font-size: clamp(2.4rem, 1rem + 6vw, 8rem); line-height: 0.9;
  text-shadow: 0 6px 30px rgb(0 0 0 / 0.35);
}
/* Masque de la montée : assez grand pour contenir toute l'ombre floue du texte (6px + 30px), marges négatives pour ne pas
   déplacer les lettres. Plus serré, il coupait l'ombre net et dessinait un cadre sombre autour des mots (Alex, 2026-10-31). */
.heros-phrase .hp {
  --hp-v: max(64px, 0.5em); --hp-h: max(64px, 0.5em);
  display: block; overflow: hidden; padding: var(--hp-v) var(--hp-h) calc(var(--hp-v) + 0.04em);
  margin: calc(-1 * var(--hp-v)) calc(-1 * var(--hp-h));
}
.heros-phrase .hp > span { display: block; }
html:not(.anime) .heros-phrase { display: none; }
@media (max-width: 760px), (orientation: portrait) {
  .heros-phrase { flex-direction: column; justify-content: space-between; align-items: center; padding: 96px 16px 56px; text-align: center; font-size: clamp(2.6rem, 13vw, 5rem); }
}

/* Héros de l'accueil validé tel quel : il garde sa police d'origine. */
section.heros { --f-titre: var(--f-heros); }