/* ------------------------------------------------------------------
   Omnisport BEC
   Mise en page : un tableau plein écran des douze sections, chaque nom
   dans ses propres axes de police, sur un fond WebGL ; puis des blocs
   qui alternent nuit, crème et bordeaux.
------------------------------------------------------------------- */

@font-face {
  font-family: 'Anybody';
  src: url('../../fonts/anybody/anybody-latin-standard-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-style: normal;
  font-display: swap;
  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+2197, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anybody';
  src: url('../../fonts/anybody/anybody-latin-ext-standard-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anybody';
  src: url('../../fonts/anybody/anybody-latin-standard-italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-style: italic;
  font-display: swap;
  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+2197, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anybody';
  src: url('../../fonts/anybody/anybody-latin-ext-standard-italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Epilogue';
  src: url('../../fonts/Epilogue/Epilogue-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Epilogue';
  src: url('../../fonts/Epilogue/Epilogue-Italic-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --encre: #212121;
  --nuit: #171414;
  --bordeaux: #53191C;
  --rouge: #A52726;
  --jaune: #F6CF6C;
  --creme: #F8F4E8;
  --creme-voile: rgba(248, 244, 232, 0.78);
  --creme-filet: rgba(248, 244, 232, 0.14);
  --encre-voile: rgba(33, 33, 33, 0.74);
  --encre-filet: rgba(33, 33, 33, 0.14);

  --display: 'Anybody', 'Arial Narrow', sans-serif;
  --texte: 'Epilogue', 'Helvetica Neue', Arial, sans-serif;

  --gouttiere: clamp(16px, 2.2vw, 32px);
  --pas--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --pas-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --pas-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --pas-2: clamp(1.8rem, 1.3rem + 2vw, 3.2rem);
  --pas-3: clamp(2.6rem, 1.6rem + 5vw, 6rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-rideau: cubic-bezier(0.76, 0, 0.18, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--nuit);
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--nuit);
  color: var(--creme);
  font-family: var(--texte);
  font-size: var(--pas-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: inherit; }
::selection { background: var(--jaune); color: var(--encre); }

/* Double anneau : le jaune ressort sur les fonds sombres, l'encre sur le crème. */
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 0; box-shadow: 0 0 0 6px var(--encre) !important; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.evitement {
  position: fixed; left: var(--gouttiere); top: -100px; z-index: 100;
  background: var(--jaune); color: var(--encre); padding: 10px 16px; font-weight: 700;
}
.evitement:focus { top: 12px; }

/* Transitions natives entre pages */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 260ms var(--ease-out) both sortie-page; }
::view-transition-new(root) { animation: 420ms var(--ease-out) both entree-page; }
@keyframes sortie-page { to { opacity: 0; } }
@keyframes entree-page { from { opacity: 0; transform: translateY(12px); } }

/* ---------- En-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--gouttiere) 14px;
  color: var(--creme);
  transition: color 300ms ease;
  pointer-events: none;
}
.entete > * { pointer-events: auto; }
.entete.sur-clair { color: var(--encre); }
.entete::before {
  content: ''; position: absolute; inset: 0 0 -24px 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(23, 20, 20, 0.82), rgba(23, 20, 20, 0));
  opacity: 0; transition: opacity 300ms ease;
}
.entete.sur-clair::before { background: linear-gradient(to bottom, rgba(248, 244, 232, 0.9), rgba(248, 244, 232, 0)); }
.entete.est-defile::before { opacity: 1; }
.entete-marque { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: var(--pas--1); letter-spacing: 0.02em; }
.entete-marque img { width: 36px; height: 36px; object-fit: contain; }
.entete-nav { margin-left: auto; display: flex; gap: clamp(14px, 2vw, 28px); font-size: var(--pas--1); font-weight: 500; }
.entete-nav a { position: relative; padding-block: 6px; }
.entete-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .entete-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
}
/* Raccourcis mis en valeur : boutique encadrée, appel aux partenaires en plein. */
.entete-nav { align-items: center; }
.entete-cta { padding: 7px 14px !important; border-radius: 999px; font-weight: 700; white-space: nowrap; transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.entete-cta::after { display: none; }
.entete-cta-boutique { box-shadow: inset 0 0 0 1.5px currentColor; }
.entete-cta-soutien { background: var(--jaune); color: var(--encre); box-shadow: 0 6px 18px rgba(246, 207, 108, 0.28); }
.entete-cta-court { display: none; }
@media (hover: hover) and (pointer: fine) {
  .entete-cta-boutique:hover { background: var(--jaune); color: var(--encre); box-shadow: none; }
  .entete-cta-soutien:hover { background: #FFDD8A; }
}
.entete-liens { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
/* Sous-menu « Le club » : s'ouvre au survol et avec son bouton ; au focus seulement sans JavaScript. */
.entete-sousmenu { position: relative; display: flex; align-items: center; gap: 2px; }
.entete-sousmenu-bouton { display: grid; place-items: center; min-width: 24px; min-height: 24px; padding: 4px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
.entete-sousmenu-bouton span { display: inline-block; font-size: 0.8em; transition: transform 200ms var(--ease-out); }
.entete-sousmenu-liste {
  position: absolute; top: 100%; left: -14px; z-index: 3; min-width: 210px;
  display: grid; gap: 2px; margin: 0; padding: 14px 8px 8px; list-style: none;
  border-radius: 16px; background: var(--nuit); color: var(--creme); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 180ms ease, transform 220ms var(--ease-out), visibility 0s linear 220ms;
}
.entete-sousmenu-liste a { display: block; padding: 9px 12px; border-radius: 10px; white-space: nowrap; }
.entete-sousmenu-liste a::after { display: none; }
.entete-sousmenu.est-ouvert .entete-sousmenu-liste,
.no-js .entete-sousmenu:focus-within .entete-sousmenu-liste {
  opacity: 1; visibility: visible; transform: none; transition: opacity 180ms ease, transform 220ms var(--ease-out);
}
.entete-sousmenu.est-ouvert .entete-sousmenu-bouton span { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .entete-sousmenu:hover .entete-sousmenu-liste { opacity: 1; visibility: visible; transform: none; transition: opacity 180ms ease, transform 220ms var(--ease-out); }
  .entete-sousmenu:hover .entete-sousmenu-bouton span { transform: rotate(180deg); }
  .entete-sousmenu-liste a:hover { background: rgba(248, 244, 232, 0.08); color: var(--jaune); }
}
.entete-menu { display: none; padding: 7px 4px; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
@media (max-width: 760px) {
  .entete-nav { gap: 10px; }
  .entete-menu { display: block; order: 3; }
  .entete-liens {
    position: absolute; top: 100%; right: var(--gouttiere); z-index: 2;
    display: none; flex-direction: column; gap: 4px; min-width: 200px; padding: 10px;
    border-radius: 16px; background: var(--nuit); color: var(--creme); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
  }
  .entete-liens { align-items: stretch; }
  .entete-liens a { padding: 10px 12px; text-align: left; }
  /* Dans le menu mobile, les pages du club sont listées directement : la flèche ne sert plus. */
  .entete-sousmenu { display: block; }
  .entete-sousmenu-lien { display: block; }
  .entete-sousmenu-bouton { display: none; }
  .entete-sousmenu-liste { position: static; min-width: 0; padding: 0 0 4px 12px; box-shadow: none; background: none; opacity: 1; visibility: visible; transform: none; }
  .entete-sousmenu-liste a { padding: 7px 12px; color: var(--creme-voile); }
  .entete.menu-ouvert .entete-liens { display: flex; }
  .entete-cta-long { display: none; }
  .entete-cta-court { display: inline; }
}
@media (max-width: 560px) {
  .entete-marque span { display: none; }
}

/* ---------- Devenir partenaire ---------- */
.soutien-ouverture {
  display: grid; justify-items: start; gap: 24px;
  padding: clamp(140px, 18vh, 200px) var(--gouttiere) clamp(64px, 9vw, 120px);
  background: var(--bordeaux); color: var(--creme);
}
.soutien-surtitre { font-size: var(--pas--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--jaune); }
.soutien-intro { max-width: 58ch; font-size: var(--pas-1); }
.soutien-formules {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(20px, 3vw, 40px);
  padding: clamp(56px, 8vw, 104px) var(--gouttiere); background: var(--creme); color: var(--encre);
}
.soutien-formule { display: grid; align-content: start; gap: 16px; padding: clamp(24px, 3vw, 40px); border-radius: 22px; box-shadow: inset 0 0 0 1px var(--encre-filet); }
.soutien-formule h2 { font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: var(--pas-2); text-transform: uppercase; color: var(--bordeaux); }
.soutien-formule ul { display: grid; gap: 8px; padding-left: 1.1em; }
.soutien-sections { display: grid; gap: 28px; padding: clamp(56px, 8vw, 104px) var(--gouttiere); background: var(--nuit); color: var(--creme); }
.soutien-lien a { color: var(--jaune); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Tableau des sections ---------- */
.tableau {
  position: relative;
  background: var(--nuit);
  padding-inline: var(--gouttiere);
  isolation: isolate;
  overflow: clip;
}
.tableau-fond {
  position: sticky; top: 0; z-index: -1;
  height: 100svh; margin-bottom: -100svh;
  margin-inline: calc(var(--gouttiere) * -1);
  overflow: hidden;
}
.tableau-gl, .tableau-repli, .tableau-repli img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.tableau-repli img {
  object-fit: cover; opacity: 0; transition: opacity 600ms var(--ease-out);
  filter: brightness(0.62);
}
.tableau-repli img.est-visible { opacity: 1; }
.avec-gl .tableau-repli { display: none; }

.tableau-tete {
  display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap;
  padding-top: calc(env(safe-area-inset-top, 0px) + 104px);
  padding-bottom: clamp(20px, 4vh, 48px);
  border-bottom: 1px solid var(--creme-filet);
  font-size: var(--pas--1); letter-spacing: 0.14em; text-transform: uppercase;
}
.tableau-titre { font-weight: 500; }
.tableau-compteur { font-variant-numeric: tabular-nums; color: var(--jaune); display: flex; }
.tableau-compteur [data-compteur] { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 1.6em; letter-spacing: 0; margin-right: 10px; }
.tableau-compteur-fin { align-self: center; color: var(--creme-voile); }

.tableau-liste ul { display: block; }
.tableau-lien {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-block: clamp(4px, 0.6vw, 10px);
  border-bottom: 1px solid var(--creme-filet);
  transition: opacity 320ms var(--ease-out), color 320ms var(--ease-out);
}
.tableau-masque { display: block; overflow: hidden; padding-right: 0.12em; margin-right: -0.12em; min-width: 0; }
.tableau-mot {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.2rem, 6.4vw, 6.6rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
@media (max-width: 560px) {
  /* Les sections larges réduisent leur corps pour tenir sur une ligne. */
  .tableau-liste .tableau-mot { font-size: calc(9vw * 100 / max(var(--l, 100), 100)); }
}
@media (min-width: 900px) {
  /* Deux colonnes : la liste des sections tient en un écran au lieu de deux. */
  .tableau-liste ul { columns: 2; column-gap: clamp(32px, 5vw, 96px); }
  .tableau-liste li { break-inside: avoid; }
  .tableau-liste .tableau-mot { font-size: min(4.6rem, calc(3.7vw * 100 / max(var(--l, 100), 100))); }
}
.tableau-num {
  flex: none; font-size: var(--pas--1); font-variant-numeric: tabular-nums;
  color: var(--creme-voile); letter-spacing: 0.08em;
}
.tableau.est-allume .tableau-lien { opacity: 0.26; }
.tableau.est-allume .tableau-lien.est-actif { opacity: 1; color: var(--jaune); }
.tableau.est-allume .tableau-lien.est-actif .tableau-num { color: var(--jaune); }

.js .tableau-liste li .tableau-mot {
  animation: monte 1000ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms + 120ms);
}
@keyframes monte { from { transform: translateY(105%); } }

.tableau-fiche {
  position: sticky; bottom: 0;
  margin-inline: calc(var(--gouttiere) * -1);
  padding: 40px var(--gouttiere) calc(env(safe-area-inset-bottom, 0px) + 18px);
  background: linear-gradient(to top, rgba(23, 20, 20, 0.92) 30%, rgba(23, 20, 20, 0));
  font-size: var(--pas--1); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--creme-voile);
}
.tableau.est-allume .tableau-fiche { color: var(--creme); }

/* ---------- Titres de bloc et éléments communs ---------- */
.bloc-titre {
  font-family: var(--display);
  font-stretch: 125%; font-weight: 800;
  font-size: var(--pas-3); line-height: 0.92;
  text-transform: uppercase; letter-spacing: -0.01em;
  text-wrap: balance;
}
@media (max-width: 420px) {
  /* Un mot long (CONFIDENTIALITÉ) se coupe plutôt que de déborder sur écran étroit ou zoom à 400 %. */
  .bloc-titre { font-size: clamp(1.9rem, 10vw, 2.6rem); hyphens: auto; overflow-wrap: break-word; }
}
/* Titres placés dans une colonne étroite : corps réduit pour que les mots tiennent entiers. */
.anciens-contenu .bloc-titre, .soutien-contact .bloc-titre { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.4rem); }
.puce {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--jaune); color: var(--encre);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.bouton {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  background: var(--jaune); color: var(--encre); font-weight: 700;
  transition: transform 140ms var(--ease-out), background-color 200ms ease;
}
.bouton:active { transform: scale(0.97); }
.bouton-clair { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
@media (hover: hover) and (pointer: fine) {
  .bouton:hover { background: #FFDD8A; }
  .bouton-clair:hover { background: var(--jaune); color: var(--encre); box-shadow: none; }
}

/* Révélations au défilement : seulement quand le script les arme */
.revele-arme { opacity: 0; transform: translateY(32px); }

/* ---------- À la une ---------- */
.une { position: relative; background: var(--creme); color: var(--encre); }
.une-tete { display: flex; justify-content: space-between; align-items: end; gap: 16px 40px; flex-wrap: wrap; padding-inline: var(--gouttiere); margin-bottom: 40px; }
.une-piste {
  display: flex; gap: clamp(16px, 2vw, 28px); align-items: start;
  padding-inline: var(--gouttiere);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-bottom: 8px;
}
.une-piste::-webkit-scrollbar { display: none; }

.carte { flex: 0 0 auto; width: clamp(260px, 30vw, 440px); scroll-snap-align: start; }
.carte a { display: grid; gap: 14px; }
.carte-image { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bordeaux); border-radius: 2px; }
.carte-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.carte-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: var(--pas--1); color: var(--encre-voile); }
.carte-titre { font-family: var(--display); font-stretch: 100%; font-weight: 700; font-size: var(--pas-1); line-height: 1.12; text-wrap: balance; }
@media (hover: hover) and (pointer: fine) {
  .carte a:hover .carte-image img { transform: scale(1.04); }
  .carte a:hover .carte-titre { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--rouge); }
}

.une-accueil { padding-block: clamp(96px, 12vw, 150px); }
.une-duo {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px);
  padding-inline: var(--gouttiere); align-items: start;
}
.une-principale a { display: grid; gap: 14px; }
.une-principale-image { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bordeaux); }
.une-principale-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.une-principale-titre { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 1.1rem + 2.2vw, 3.2rem); line-height: 1; text-wrap: balance; }
.une-principale-chapo { max-width: 60ch; color: var(--encre-voile); }
.une-liste { border-top: 1px solid var(--encre-filet); }
/* Le bouton suit la liste, dans la colonne de droite. */
.une-colonne { display: grid; justify-items: start; gap: 28px; }
.une-colonne .une-liste { justify-self: stretch; }
.une-liste a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center;
  padding-block: 18px; border-bottom: 1px solid var(--encre-filet);
}
.une-liste time { grid-column: 1 / -1; font-size: var(--pas--1); color: var(--encre-voile); font-variant-numeric: tabular-nums; }
.une-liste-titre { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.45rem); line-height: 1.1; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .une-principale a:hover .une-principale-image img { transform: scale(1.03); }
  .une-liste a:hover .une-liste-titre { color: var(--rouge); }
}
@media (max-width: 820px) {
  .une-duo { grid-template-columns: minmax(0, 1fr); }
}
.une-fiche { padding-block: clamp(72px, 10vw, 120px); }
.une-grille { flex-wrap: wrap; overflow: visible; }
.une-grille .carte { width: min(100%, 360px); }

/* ---------- Le club ---------- */
.club {
  --deborde: clamp(40px, 6vw, 110px);
  position: relative; z-index: 2;
  background: var(--bordeaux); color: var(--creme);
  padding: clamp(96px, 14vw, 180px) var(--gouttiere);
  display: grid; gap: clamp(32px, 5vw, 64px);
  /* Coupe à l'horizontale et en haut : le blason ne déborde que sur la section suivante. */
  overflow-x: clip; overflow-y: visible; clip-path: inset(0 0 -100vh 0);
}
.club > :not(.club-blason) { position: relative; z-index: 1; }
/* Blason en arrière-plan, à droite : il descend sur la section suivante sans gêner la lecture. */
.club-blason {
  position: absolute; z-index: 0; right: clamp(-40px, -2vw, 0px); bottom: calc(var(--deborde) * -1);
  width: clamp(220px, 30vw, 460px); height: auto;
  pointer-events: none;
}


.club-annee {
  position: relative;
  font-family: var(--display); font-stretch: 150%; font-weight: 900;
  font-size: clamp(5.5rem, 25vw, 24rem); line-height: 0.8; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.club-annee-trait { color: transparent; -webkit-text-stroke: 2px var(--jaune); }
.club-annee-plein {
  position: absolute; inset: 0; color: var(--jaune);
  clip-path: inset(0 calc(100% - var(--p, 1) * 100%) 0 0);
}
.club-texte { display: grid; gap: 24px; max-width: 62ch; }
.club-texte p { font-size: var(--pas-1); line-height: 1.4; color: var(--creme); }
.pilules { display: flex; flex-wrap: wrap; gap: 10px; }
.pilule {
  display: inline-flex; gap: 8px; align-items: baseline;
  padding: 9px 16px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px rgba(246, 207, 108, 0.45);
  color: var(--jaune); font-size: var(--pas--1); font-weight: 500;
}
.pilule small { opacity: 0.6; font-size: 0.85em; }

/* ---------- Agenda ---------- */
.agenda { background: var(--creme); color: var(--encre); padding: clamp(80px, 11vw, 140px) var(--gouttiere); display: grid; gap: 40px; }
.agenda-liste li {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline;
  padding-block: 18px; border-top: 1px solid var(--encre-filet);
}
.agenda-liste time { font-variant-numeric: tabular-nums; color: var(--encre-voile); }
.agenda-liste time b { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: var(--pas-2); color: var(--encre); margin-right: 6px; }
.agenda-titre { font-weight: 700; font-size: var(--pas-1); }
.agenda-lieu { grid-column: 2; color: var(--encre-voile); }

/* ---------- Fiche section ---------- */
.fiche-ouverture {
  position: relative; min-height: 92svh; overflow: hidden; isolation: isolate;
  display: grid; align-content: end; justify-items: start; gap: 28px;
  padding: 120px var(--gouttiere) clamp(40px, 7vh, 72px);
  background: var(--nuit);
}
.fiche-fond {
  position: absolute; inset: -8% 0; z-index: -1;
  background-size: cover; background-position: center;
  filter: brightness(0.55);
}
.fiche-surtitre { font-size: var(--pas--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--jaune); font-variant-numeric: tabular-nums; }
.fiche-nom .tableau-mot { font-size: clamp(3rem, 11vw, 11rem); }
.js .fiche-nom .tableau-mot { animation: monte 1100ms var(--ease-out) 120ms both; }

.fiche-infos {
  background: var(--creme); color: var(--encre);
  padding: clamp(72px, 10vw, 128px) var(--gouttiere);
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start;
}
.fiche-presentation { font-size: var(--pas-1); line-height: 1.45; max-width: 60ch; }
.fiche-attente { font-size: var(--pas-1); line-height: 1.4; max-width: 40ch; }
.fiche-infos .bouton-clair { justify-self: start; }
.fiche-infos .pied-coord dt { color: var(--encre-voile); }

.fiche-voisines {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--nuit); border-top: 1px solid var(--creme-filet);
}
.fiche-voisines a { display: grid; gap: 10px; padding: clamp(32px, 5vw, 64px) var(--gouttiere); min-width: 0; transition: background-color 300ms ease; }
.fiche-voisines a + a { border-left: 1px solid var(--creme-filet); text-align: right; justify-items: end; }
.fiche-voisines small { font-size: var(--pas--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--creme-voile); }
.fiche-voisines .tableau-mot { font-size: clamp(1.8rem, 4.4vw, 4rem); }
@media (hover: hover) and (pointer: fine) {
  .fiche-voisines a:hover { background: var(--bordeaux); }
}

/* ---------- 404 ---------- */
.introuvable { min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: 24px; padding: 120px var(--gouttiere) 80px; }
.introuvable-code { font-family: var(--display); font-stretch: 150%; font-weight: 900; font-size: clamp(6rem, 30vw, 26rem); line-height: 0.8; color: transparent; -webkit-text-stroke: 2px var(--jaune); }
.introuvable-liens { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Pied de page ---------- */
.pied { position: relative; background: var(--nuit); color: var(--creme); overflow: hidden; }
.pied-grille {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 40px;
  padding: clamp(80px, 11vw, 140px) var(--gouttiere) 40px;
}
.pied-titre { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: var(--pas-3); line-height: 0.92; text-transform: uppercase; }
.pied-coord { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
.pied-coord dt { font-size: var(--pas--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--creme-voile); margin-bottom: 8px; }
.pied-coord dd { font-size: var(--pas-1); line-height: 1.35; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.pied-coord > div:has(a[href^="mailto:"]) { grid-column: 1 / -1; }
.pied-coord a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pied-coord a:hover { background-size: 100% 1.5px; }
}
.pied-geant {
  font-family: var(--display); font-stretch: 150%; font-weight: 900;
  font-size: clamp(6rem, 34vw, 34rem); line-height: 0.78; letter-spacing: -0.04em;
  text-align: center; color: transparent; -webkit-text-stroke: 1.5px rgba(246, 207, 108, 0.5);
  user-select: none; margin-top: 24px;
}
.pied-bas {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px;
  padding: 24px var(--gouttiere) calc(env(safe-area-inset-bottom, 0px) + 24px);
  border-top: 1px solid var(--creme-filet);
  font-size: var(--pas--1); color: var(--creme-voile);
}
.pied-bas nav { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.pied-bas a { color: var(--creme); }

/* ---------- Organigramme ---------- */
.pilule-lien { color: var(--creme); box-shadow: inset 0 0 0 1.5px var(--jaune); transition: background-color 200ms ease, color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .pilule-lien:hover { background: var(--jaune); color: var(--encre); }
}

.page-orga .entete::before { opacity: 1; }
.orga { position: relative; min-height: 100svh; background: var(--nuit); color: var(--creme); }
.orga-fond, .orga-vue, .orga-outils, .orga-fiche { display: none; }
.orga-tete { padding: 120px var(--gouttiere) 0; display: grid; gap: 10px; }
.orga-titre { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: var(--pas-3); line-height: 0.92; text-transform: uppercase; }
.orga-aide { display: none; color: var(--creme-voile); font-size: var(--pas--1); max-width: 46ch; }
.orga-liste { padding: 40px var(--gouttiere) 96px; }
.orga-liste-contenu { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px 40px; }
.orga-liste-contenu > .bloc-titre { grid-column: 1 / -1; font-size: var(--pas-2); }
.orga-liste h3 { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: var(--pas-1); text-transform: uppercase; margin-bottom: 10px; color: var(--jaune); }
.orga-liste li { padding-block: 6px; border-top: 1px solid var(--creme-filet); font-size: var(--pas--1); }
.orga-liste p { color: var(--creme-voile); font-size: var(--pas--1); }

/* Carte active : le script a démarré */
.orga-pret, .orga-pret body { height: 100%; overflow: hidden; }
.orga-pret .orga { position: fixed; inset: 0; overflow: hidden; }
.orga-pret .orga-fond { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.orga-pret .orga-vue {
  display: block; position: absolute; inset: 0; overflow: hidden;
  touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.orga-vue.est-saisi { cursor: grabbing; }
.orga-monde { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.orga-liens { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.orga-pret .orga-tete { position: absolute; top: 0; left: 0; padding-top: calc(env(safe-area-inset-top, 0px) + 78px); pointer-events: none; }
.orga-pret .orga-titre { font-size: var(--pas-2); }
.orga-pret .orga-aide { display: block; }

.orga-anneaux circle {
  fill: none; stroke: rgba(248, 244, 232, 0.09); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 2 12; animation: anneau 40s linear infinite;
}
.orga-anneaux circle:nth-child(even) { animation-direction: reverse; animation-duration: 60s; }
@keyframes anneau { to { stroke-dashoffset: -280; } }

.lien { fill: none; stroke: rgba(248, 244, 232, 0.24); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: stroke 300ms ease, opacity 300ms ease; }
.lien-section { stroke: rgba(246, 207, 108, 0.5); stroke-width: 1.6; }
.lien-bureau { stroke: rgba(246, 207, 108, 0.36); }
.noeud-bureau, .noeud-membre { cursor: grab; }
.noeud.est-tenu { cursor: grabbing; z-index: 5; }
.avec-est-relie .lien:not(.est-relie), .avec-est-survole .lien:not(.est-survole) { opacity: 0.12; }
.lien.est-relie, .lien.est-survole { stroke: var(--jaune); opacity: 1; }

.noeud {
  position: absolute; left: 0; top: 0;
  width: 200px; margin-left: -100px; margin-top: calc(var(--d) / -2);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0; border: 0; background: none; color: var(--creme);
  font: inherit; text-align: center; cursor: pointer;
  transition: opacity 300ms ease;
}
.noeud:focus { outline: none; box-shadow: none !important; }
.noeud:focus-visible .noeud-tete { outline: 3px solid var(--jaune); outline-offset: 4px; }
.avec-est-relie .noeud:not(.est-relie), .avec-est-survole .noeud:not(.est-survole) { opacity: 0.28; }
.noeud > * { animation: apparition 900ms var(--ease-out) var(--delai, 0ms) both; }
@keyframes apparition { from { opacity: 0; transform: scale(0.7); } }

.noeud-tete {
  display: grid; place-items: center; flex: none;
  width: var(--d); height: var(--d); border-radius: 50%; overflow: hidden;
  background: var(--bordeaux); background-size: cover; background-position: center;
  box-shadow: 0 0 0 1.5px rgba(246, 207, 108, 0.6), 0 0 0 7px rgba(23, 20, 20, 0.55);
  font-family: var(--display); font-stretch: 125%; font-weight: 800;
  font-size: calc(var(--d) * 0.32); letter-spacing: 0.02em; color: var(--creme);
  transition: box-shadow 300ms var(--ease-out), scale 400ms var(--ease-out);
}
.noeud-tete img { width: 100%; height: 100%; object-fit: cover; }
.noeud-racine .noeud-tete { background: var(--creme); padding: 16px; }
.noeud-racine .noeud-tete img { object-fit: contain; }
.noeud-nom { font-weight: 700; font-size: 15px; line-height: 1.15; max-width: 190px; text-wrap: balance; }
.noeud-racine .noeud-nom, .noeud-section .noeud-nom { font-family: var(--display); text-transform: uppercase; font-size: 24px; line-height: 0.95; }
.noeud-racine .noeud-nom { font-stretch: 125%; font-weight: 800; }
.noeud-poste { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--creme-voile); max-width: 180px; transition: opacity 300ms ease; }
.orga.est-loin .noeud-poste { opacity: 0; }
.noeud.est-choisi .noeud-tete { box-shadow: 0 0 0 3px var(--jaune), 0 0 0 10px rgba(246, 207, 108, 0.16); scale: 1.08; }
@media (hover: hover) and (pointer: fine) {
  .noeud:hover .noeud-tete { box-shadow: 0 0 0 3px var(--jaune), 0 0 0 7px rgba(23, 20, 20, 0.55); }
}

.orga-pret .orga-outils {
  display: flex; position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  transform: translateX(-50%); gap: 4px; padding: 4px;
  background: rgba(23, 20, 20, 0.86); border: 1px solid var(--creme-filet); border-radius: 999px;
}
.orga-outils button {
  min-width: 44px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  background: transparent; color: var(--creme); font: inherit; font-size: var(--pas--1); font-weight: 500; cursor: pointer;
  white-space: nowrap; transition: background-color 200ms ease, color 200ms ease;
}
.orga-outils button[data-orga-zoom] { font-size: 1.3rem; padding: 0; }
.orga-outils button:active { scale: 0.96; }
@media (hover: hover) and (pointer: fine) {
  .orga-outils button:hover { background: var(--jaune); color: var(--encre); }
}

.orga-fiche:not([hidden]) {
  display: grid; gap: 6px; position: absolute; z-index: 2;
  right: var(--gouttiere); bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
  width: min(360px, calc(100% - 2 * var(--gouttiere)));
  padding: 22px 24px 24px; border-radius: 4px;
  background: var(--creme); color: var(--encre);
  animation: fiche 420ms var(--ease-out) both;
}
@keyframes fiche { from { opacity: 0; transform: translateY(16px); } }
.orga-fiche-fermer { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: none; font-size: 1.6rem; cursor: pointer; color: var(--encre); }
/* Photo détourée : toute la largeur de la fiche, proportions gardées ; une photo très haute est cadrée sur le visage. */
.orga-fiche-detoure {
  justify-self: stretch; width: calc(100% + 48px); max-width: none; height: auto; max-height: 42vh;
  margin: -22px -24px 8px; object-fit: cover; object-position: top center;
  border-radius: 4px 4px 0 0; background: var(--bordeaux);
}
.orga-fiche-fermer { z-index: 1; background: var(--creme); border-radius: 50%; }
.orga-fiche-detoure[hidden] { display: none; }
.orga-fiche-section { font-size: var(--pas--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rouge); font-weight: 700; padding-right: 40px; }
.orga-fiche-nom { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: var(--pas-1); line-height: 1.05; text-transform: uppercase; }
.orga-fiche-poste { font-weight: 500; }
.orga-fiche-aussi { color: var(--encre-voile); font-size: var(--pas--1); }
.orga-fiche-aussi:empty { display: none; }
.orga-fiche-lien { margin-top: 8px; font-weight: 700; color: var(--rouge); justify-self: start; }
.orga-fiche-lien[hidden] { display: none; }

.orga-pret .orga-liste.est-ouvert {
  position: absolute; inset: 0; z-index: 3; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top, 0px) + 120px) var(--gouttiere) 120px;
  background: rgba(23, 20, 20, 0.97);
  animation: panneau 300ms ease both;
}
.orga-pret .orga-outils { z-index: 4; }

@media (max-width: 560px) {
  .orga-pret .orga-aide { display: none; }
  .orga-outils button { padding: 0 12px; }
  .orga-fiche:not([hidden]) { right: 16px; left: 16px; width: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }
}

/* ---------- Palmarès ---------- */
.page-palmares .entete::before { opacity: 1; }
.palm { position: relative; min-height: 100svh; background: var(--nuit); color: var(--creme); }
.palm-piste, .palm-outils { display: none; }

/* La liste serveur est le repli sans JavaScript. */
.palm-liste { padding: 120px var(--gouttiere) 96px; }
.palm-liste-contenu { width: min(1180px, 100%); margin-inline: auto; }
.palm-liste-contenu > .bloc-titre { margin-bottom: 64px; font-size: var(--pas-3); }
.palm-liste-contenu > section { padding-block: 36px 56px; border-top: 1px solid var(--creme-filet); }
.palm-liste-contenu > section > h2 {
  margin-bottom: 28px; color: var(--jaune); font-family: var(--display); font-stretch: 125%;
  font-size: var(--pas-2); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.palm-liste-annee { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px 28px; padding-block: 20px; }
.palm-liste-annee h3 { font-family: var(--display); font-stretch: 112%; font-size: var(--pas-1); font-weight: 800; line-height: 1; }
.palm-liste-annee li {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
  padding: 10px 0; border-top: 1px solid var(--creme-filet); font-size: var(--pas--1);
}
.palm-liste-annee li > span:not(.puce) { color: var(--creme-voile); }
.palm-liste-annee .puce { margin-left: auto; }

/* Le tableau devient actif seulement après la construction de ses étapes. */
.palm-pret .palm-piste { display: block; min-height: 100svh; }
.palm-collante { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--nuit); transition: background-color 420ms var(--ease-out); }
.palm.est-legende .palm-collante { background: var(--bordeaux); }
.palm-scene {
  height: 100%; min-width: 0; display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) 64px;
  gap: clamp(8px, 1.4vh, 18px);
  padding: calc(env(safe-area-inset-top, 0px) + 76px) var(--gouttiere) calc(env(safe-area-inset-bottom, 0px) + 78px);
}
.palm-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.palm-titre {
  font-family: var(--display); font-stretch: 125%; font-size: var(--pas-2); font-weight: 800;
  line-height: 0.92; text-transform: uppercase;
}
.palm-compteur { color: var(--creme-voile); font-size: var(--pas--1); font-variant-numeric: tabular-nums; }

.palm-annee { display: flex; justify-content: center; gap: clamp(3px, 0.55vw, 8px); perspective: 1200px; }
.palm-chiffre {
  position: relative; display: block; flex: none;
  width: clamp(76px, min(11vw, 18vh), 154px); height: clamp(98px, min(15vw, 25vh), 196px);
  border-radius: 3px; overflow: hidden; background: var(--encre);
  box-shadow: 0 0 0 1px var(--creme-filet), 0 14px 34px rgba(23, 20, 20, 0.36);
  transform-style: preserve-3d;
}
.palm-chiffre::after {
  content: ''; position: absolute; z-index: 5; left: 0; right: 0; top: 50%; height: 1px;
  background: rgba(23, 20, 20, 0.9); box-shadow: 0 -1px rgba(248, 244, 232, 0.08); pointer-events: none;
}
.palm-volet { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: var(--encre); backface-visibility: hidden; }
.palm-volet-haut { top: 0; transform-origin: 50% 100%; }
.palm-volet-bas { bottom: 0; transform-origin: 50% 0; }
.palm-volet-fixe { z-index: 1; }
.palm-volet-arrive { z-index: 2; }
.palm-volet-tombe { z-index: 3; }
.palm-volet-chiffre {
  position: absolute; left: -6%; top: 0; width: 112%; height: 200%; display: grid; place-items: center;
  color: var(--creme); font-family: var(--display); font-size: clamp(88px, min(15vw, 26vh), 204px); font-stretch: 112%;
  font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
}
.palm-volet-bas .palm-volet-chiffre { top: -100%; }

.palm-titres { width: min(1080px, 100%); min-height: 0; margin-inline: auto; overflow: hidden; align-self: stretch; }
.palm-titre-ligne {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px 18px; align-items: center;
  padding: 9px 0; border-top: 1px solid var(--creme-filet);
  opacity: 0; transform: translateY(16px);
  transition: opacity 500ms var(--ease-out) var(--delai, 0ms), transform 500ms var(--ease-out) var(--delai, 0ms);
}
.palm-titre-ligne.est-visible { opacity: 1; transform: translateY(0); }
.palm-medaille { width: 18px; height: 18px; border-radius: 50%; }
.palm-medaille-or { background: var(--jaune); }
.palm-medaille-argent { background: #CFC8BC; }
.palm-medaille-bronze { background: #B5774A; }
.palm-medaille-titre { border: 2px solid var(--jaune); background: transparent; }
.palm-titre-texte { min-width: 0; display: grid; grid-template-columns: minmax(126px, 0.36fr) minmax(0, 1.1fr) minmax(130px, 0.55fr) auto; gap: 4px 18px; align-items: baseline; }
.palm-titre-niveau { color: var(--jaune); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; line-height: 1.25; text-transform: uppercase; }
.palm-titre-principal { min-width: 0; font-size: var(--pas--1); line-height: 1.35; }
.palm-titre-principal strong { font-weight: 750; }
.palm-titre-athletes, .palm-titre-lieu { color: var(--creme-voile); font-size: var(--pas--1); line-height: 1.35; }
.palm-titre-section {
  max-width: 180px; padding: 5px 10px 4px; border: 1px solid var(--creme-filet); border-radius: 999px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--display); font-size: 0.68rem; line-height: 1; text-transform: uppercase;
}
.palm-vide { height: 100%; display: grid; place-items: center; color: var(--creme-voile); }

.palm-legende { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; text-align: center; }
.palm-legende-nom {
  max-width: 1100px; font-family: var(--display); font-stretch: 125%; font-size: clamp(3.2rem, 9.5vw, 9rem);
  font-weight: 900; line-height: 0.82; text-transform: uppercase; text-wrap: balance;
}
.palm-legende-fait { max-width: 900px; font-weight: 650; }
.palm-legende-sommets { display: grid; gap: 4px; color: var(--creme-voile); font-size: var(--pas--1); }

.palm-frise { position: relative; width: min(1180px, 100%); height: 64px; margin-inline: auto; cursor: pointer; touch-action: manipulation; }
.palm-frise-ligne { position: absolute; inset: 0 5px; border-bottom: 1px solid var(--creme-filet); }
.palm-frise-graduation { position: absolute; bottom: -1px; width: 1px; height: 7px; background: var(--creme-voile); }
.palm-frise-libelle { position: absolute; left: 50%; top: 11px; translate: -50% 0; color: var(--creme-voile); font-size: 0.58rem; font-variant-numeric: tabular-nums; }
.palm-frise-titre { position: absolute; width: 2px; height: 10px; translate: -50% 0; background: var(--jaune); }
.palm-frise-argent { background: #CFC8BC; }
.palm-frise-bronze { background: #B5774A; }
.palm-frise-curseur { position: absolute; z-index: 2; bottom: -5px; width: 3px; height: 66px; translate: -50% 0; background: var(--jaune); box-shadow: 0 0 0 1px rgba(23, 20, 20, 0.18); transition: left 280ms var(--ease-out); }

.palm-pret .palm-outils {
  position: absolute; z-index: 4; left: var(--gouttiere); right: var(--gouttiere); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
  max-width: 1180px; margin-inline: auto;
}
.palm-filtres { min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.palm-filtres::-webkit-scrollbar { display: none; }
.palm-outils button, .palm-outils select {
  min-height: 42px; border: 1px solid var(--creme-filet); border-radius: 999px;
  background: rgba(23, 20, 20, 0.9); color: var(--creme); font-family: var(--texte); font-size: 0.75rem; font-weight: 600;
  white-space: nowrap; cursor: pointer; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.palm-outils button { padding: 0 14px; }
.palm-outils select { max-width: 220px; padding: 0 34px 0 14px; }
.palm-filtre[aria-pressed="true"] { border-color: var(--jaune); background: var(--jaune); color: var(--encre); }
@media (hover: hover) and (pointer: fine) {
  .palm-outils button:hover, .palm-outils select:hover { border-color: var(--jaune); }
}

/* Fermé, le panneau reste lu par les lecteurs d'écran : la scène, elle, leur est masquée. */
.palm-pret .palm-liste:not(.est-ouvert), .orga-pret .orga-liste:not(.est-ouvert) {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.palm-pret .palm-liste.est-ouvert {
  position: fixed; inset: 0; z-index: 40; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top, 0px) + 112px) var(--gouttiere) 120px;
  background: rgba(23, 20, 20, 0.98);
  animation: panneau 300ms ease both;
}
@keyframes panneau { from { opacity: 0; } }

@media (max-width: 760px) {
  .palm-titre-texte { grid-template-columns: minmax(0, 1fr) auto; }
  .palm-titre-niveau, .palm-titre-principal { grid-column: 1 / -1; }
  .palm-titre-athletes { grid-column: 1; }
  .palm-titre-lieu { grid-column: 2; }
}

@media (max-width: 560px) {
  .palm-scene {
    grid-template-rows: auto auto minmax(0, 1fr) 50px; gap: 7px;
    padding: calc(env(safe-area-inset-top, 0px) + 68px) var(--gouttiere) calc(env(safe-area-inset-bottom, 0px) + 112px);
  }
  .palm-titre { font-size: var(--pas-1); }
  .palm-chiffre { width: min(19vw, 96px); height: min(25vw, 126px); }
  .palm-volet-chiffre { font-size: min(25vw, 132px); }
  .palm-titres { overflow-y: auto; overscroll-behavior: contain; }
  .palm-titre-ligne { grid-template-columns: 18px minmax(0, 1fr); gap: 8px 12px; padding-block: 9px; }
  .palm-titre-section { grid-column: 2; justify-self: start; max-width: 100%; }
  .palm-titre-texte { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .palm-titre-athletes, .palm-titre-lieu { grid-column: 1; }
  .palm-legende { justify-content: flex-start; padding-top: 8px; gap: 12px; }
  .palm-legende-nom { font-size: clamp(2.5rem, 15vw, 4.5rem); }
  .palm-legende-fait, .palm-legende-sommets { font-size: 0.72rem; }
  .palm-frise { height: 50px; }
  .palm-frise-libelle { font-size: 0.5rem; }
  .palm-frise-curseur { height: 52px; }
  .palm-pret .palm-outils { grid-template-columns: minmax(0, 1fr) auto; }
  .palm-filtres { grid-column: 1 / -1; }
  .palm-outils select { min-width: 0; max-width: 58vw; width: 100%; }
  .palm-liste-contenu > .bloc-titre { margin-bottom: 40px; }
  .palm-liste-annee { grid-template-columns: minmax(0, 1fr); }
  .palm-liste-annee li { display: grid; grid-template-columns: minmax(0, 1fr); }
  .palm-liste-annee .puce { margin-left: 0; justify-self: start; }
}

/* ---------- Histoire ---------- */
.page-histoire .entete::before { opacity: 1; }

.hist-ouverture {
  min-height: 200svh;
  background: var(--nuit);
  color: var(--creme);
}
.hist-ouverture-interieur {
  position: sticky; top: 0;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: clamp(18px, 2.6vh, 32px);
  padding: calc(env(safe-area-inset-top, 0px) + 88px) var(--gouttiere) 64px;
  overflow: hidden;
}
.hist-ouverture-date {
  font-family: var(--display); font-size: clamp(7rem, 27vw, 25rem); font-style: italic;
  font-variation-settings: "wdth" 50, "wght" 250;
  font-synthesis: none; font-variant-numeric: tabular-nums;
  line-height: 0.72; letter-spacing: -0.04em; color: var(--creme);
  will-change: transform, font-variation-settings;
}
.hist-ouverture .bloc-titre { color: var(--jaune); }
.hist-chapeau { max-width: 60ch; font-size: var(--pas-1); line-height: 1.45; }

.hist-fil {
  position: relative; isolation: isolate;
  padding-top: clamp(100px, 14vh, 180px);
  background: var(--nuit); color: var(--creme);
}
.hist-trait {
  display: none; position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; overflow: visible; pointer-events: none;
}
.hist-fil-pret .hist-trait { display: block; }
.hist-trait path {
  fill: none; stroke: var(--jaune); stroke-width: 2; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.hist-trait circle {
  fill: var(--nuit); stroke: var(--jaune); stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.hist-trait circle.est-atteint { fill: var(--jaune); }

.hist-chapitre {
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 2vw, 32px); row-gap: 20px;
  width: min(1440px, 100%); margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.hist-chapitre + .hist-chapitre { margin-top: clamp(120px, 18vh, 220px); }
.hist-chapitre:nth-of-type(odd) > * { grid-column: 1 / 7; }
.hist-chapitre:nth-of-type(even) > * { grid-column: 8 / 13; }
.hist-chapitre > * { position: relative; z-index: 3; max-width: 60ch; }

.hist-date {
  --p: 1;
  position: relative;
  max-width: none;
  font-family: var(--display); font-size: clamp(4rem, calc(13vw * 100 / max(var(--hist-l), 100)), 15rem);
  font-style: var(--hist-i); font-variation-settings: "wdth" var(--hist-l), "wght" var(--hist-g);
  font-synthesis: none; font-variant-numeric: tabular-nums;
  line-height: 0.85; letter-spacing: -0.04em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px var(--jaune);
}
.js .hist-date { --p: 0; }
.hist-date-trait { display: block; }
.hist-date-plein {
  position: absolute; inset: 0;
  color: var(--jaune); -webkit-text-stroke-color: transparent;
  clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0);
}
.hist-chapitre h2 {
  font-family: var(--display); font-stretch: 118%; font-weight: 800;
  font-size: var(--pas-2); line-height: 1; text-transform: uppercase; text-wrap: balance;
}
.hist-chapitre > p:not(.hist-date) { font-size: var(--pas-1); line-height: 1.5; }

.hist-reperes {
  display: grid; gap: 0; margin-top: 16px;
  border-bottom: 1px solid var(--creme-filet);
}
.hist-reperes li {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 18px; align-items: baseline;
  padding-block: 14px; border-top: 1px solid var(--creme-filet);
  font-size: var(--pas--1);
}
.hist-reperes li span {
  color: var(--jaune); font-family: var(--display); font-stretch: 112%;
  font-size: var(--pas-1); font-weight: 750; font-variant-numeric: tabular-nums;
}

.hist-chapitre-final {
  width: 100%; max-width: none;
  padding: clamp(120px, 18vh, 220px) max(var(--gouttiere), calc((100vw - 1440px) / 2 + var(--gouttiere)));
  background: var(--bordeaux);
}
.hist-chapitre-final::before {
  content: ''; position: absolute; inset: 0; z-index: 0; background: var(--bordeaux);
}
.hist-liens { margin-top: 12px; }
.hist-sources {
  position: relative; z-index: 3;
  max-width: 82ch; margin: 0 auto;
  padding: clamp(64px, 9vw, 112px) var(--gouttiere);
  color: var(--creme-voile); font-size: var(--pas--1);
}
.hist-sources a {
  color: var(--creme); text-decoration: underline;
  text-decoration-color: var(--jaune); text-underline-offset: 3px;
}

@media (max-width: 560px) {
  .hist-ouverture { min-height: 180svh; }
  .hist-ouverture-date { font-size: min(24vw, 8rem); }
  .hist-fil { padding-top: 88px; }
  .hist-chapitre {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: calc(var(--gouttiere) + 28px) var(--gouttiere);
  }
  .hist-chapitre:nth-of-type(odd) > *, .hist-chapitre:nth-of-type(even) > * { grid-column: 1; }
  .hist-chapitre + .hist-chapitre { margin-top: 120px; }
  .hist-date { font-size: min(5rem, calc(24vw * 100 / max(var(--hist-l), 100))); }
  .hist-chapitre h2 { font-size: clamp(1.7rem, 9vw, 2.5rem); }
  .hist-reperes li { grid-template-columns: 4rem minmax(0, 1fr); gap: 12px; }
  .hist-chapitre-final { padding-block: 120px; }
}

/* ---------- Partenaires et mécénat ---------- */
.page-partenaires .entete::before { opacity: 1; }
.part-ouverture {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(20px, 3vh, 36px);
  padding: calc(env(safe-area-inset-top, 0px) + 120px) var(--gouttiere) clamp(56px, 9vh, 112px);
  background: radial-gradient(120% 80% at 85% 10%, var(--bordeaux), var(--nuit) 70%);
  overflow: hidden;
}
.part-surtitre { color: var(--jaune); font-size: var(--pas--1); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.part-titre {
  font-family: var(--display); font-stretch: 150%; font-weight: 900;
  font-size: clamp(3.4rem, 15vw, 15rem); line-height: 0.82; letter-spacing: -0.03em;
  text-transform: uppercase;
  animation: part-entree 1100ms var(--ease-out) both;
}
.part-titre em { font-stretch: 50%; font-weight: 250; font-style: italic; color: var(--jaune); text-transform: none; }
@keyframes part-entree { from { opacity: 0; font-stretch: 60%; transform: translateY(24px); } }
.part-chapeau { max-width: 58ch; font-size: var(--pas-1); line-height: 1.45; }
.part-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.part-chiffres, .part-gains, .part-etapes {
  background: var(--creme); color: var(--encre);
  padding: clamp(88px, 12vw, 160px) var(--gouttiere);
  display: grid; gap: clamp(40px, 6vw, 72px);
}
.part-chiffres-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px var(--gouttiere); }
.part-chiffres-liste div { display: grid; gap: 8px; padding-top: 16px; border-top: 2px solid var(--rouge); }
.part-chiffres-liste dt {
  font-family: var(--display); font-stretch: 140%; font-weight: 900;
  font-size: var(--pas-3); line-height: 0.9; font-variant-numeric: tabular-nums; color: var(--rouge);
}
.part-chiffres-liste dd { margin: 0; color: var(--encre-voile); max-width: 26ch; }
.part-sections { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; }
.part-sections a {
  font-family: var(--display); font-size: var(--pas-2); line-height: 1.05; text-transform: uppercase;
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .part-sections a:hover { color: var(--rouge); }
}

.part-formules { background: var(--nuit); color: var(--creme); padding: clamp(88px, 12vw, 160px) var(--gouttiere); display: grid; gap: clamp(40px, 6vw, 72px); }
.part-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--gouttiere); }
.part-carte {
  display: grid; align-content: start; gap: 20px;
  padding: clamp(28px, 4vw, 52px);
  border-radius: 4px; box-shadow: inset 0 0 0 1px var(--creme-filet);
}
.part-carte .puce { justify-self: start; }
.part-carte h3 { font-family: var(--display); font-stretch: 115%; font-weight: 800; font-size: var(--pas-2); line-height: 1; text-wrap: balance; }
.part-carte > p:not(.puce) { color: var(--creme-voile); max-width: 60ch; }
.part-carte-mecenat { background: var(--bordeaux); box-shadow: none; }
.part-points { display: grid; gap: 10px; }
.part-points li { position: relative; padding-left: 22px; }
.part-points li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 10px; height: 2px; background: var(--jaune); }

.part-gains-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 40px var(--gouttiere); counter-reset: gain; }
.part-gains-liste li { display: grid; gap: 10px; counter-increment: gain; }
.part-gains-liste li::before {
  content: counter(gain, decimal-leading-zero);
  font-family: var(--display); font-stretch: 50%; font-weight: 300; font-size: var(--pas-2); line-height: 1; color: var(--rouge);
}
.part-gains-liste h3 { font-family: var(--display); font-stretch: 110%; font-weight: 800; font-size: var(--pas-1); line-height: 1.1; }
.part-gains-liste p { color: var(--encre-voile); }

.part-130 {
  background: var(--bordeaux); color: var(--creme);
  padding: clamp(96px, 14vw, 180px) var(--gouttiere);
  display: grid; gap: 28px; justify-items: start;
  overflow: hidden;
}
.part-130-date {
  font-family: var(--display); font-stretch: 150%; font-weight: 900;
  font-size: clamp(2.2rem, 9.5vw, 11rem); line-height: 0.85; letter-spacing: -0.03em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px var(--jaune);
}
.part-130 > * { max-width: 100%; }
.part-130 > p:not(.part-130-date) { max-width: 60ch; font-size: var(--pas-1); line-height: 1.45; }

.part-etapes-liste { display: grid; gap: 0; max-width: 900px; }
.part-etapes-liste li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 16px; align-items: baseline; padding-block: 22px; border-top: 1px solid var(--encre-filet); font-size: var(--pas-1); line-height: 1.4; }
.part-etapes-liste b { font-family: var(--display); font-stretch: 140%; font-weight: 900; font-size: var(--pas-2); color: var(--rouge); line-height: 1; }
.part-appel { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.part-appel p { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: var(--pas-2); line-height: 1; text-transform: uppercase; }
.part-appel .bouton { overflow-wrap: anywhere; }

/* ---------- Actualités ---------- */
.actus {
  min-height: 100svh;
  padding: calc(env(safe-area-inset-top, 0px) + 120px) var(--gouttiere) clamp(80px, 10vw, 140px);
  background: var(--creme); color: var(--encre);
}
.actus-tete {
  display: flex; align-items: end; justify-content: space-between; gap: 20px;
  padding-bottom: clamp(32px, 5vw, 64px); border-bottom: 1px solid var(--encre-filet);
}
.actus-compte { color: var(--encre-voile); white-space: nowrap; }
.actus-filtres {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 32px; align-items: start;
  padding-block: 24px; border-bottom: 1px solid var(--encre-filet);
}
.actus-sections { display: flex; flex-wrap: wrap; gap: 8px; }
.actus-sections .puce {
  background: transparent; box-shadow: inset 0 0 0 1px var(--encre-filet);
  font-family: var(--display); font-synthesis: none;
}
.actus-sections .puce.est-active { background: var(--jaune); box-shadow: none; }
.actus-recherche { display: flex; min-width: min(100%, 360px); }
.actus-recherche input, .actus-recherche button {
  min-height: 44px; border: 1px solid var(--encre-filet); border-radius: 0;
  background: transparent; color: var(--encre); font: inherit;
}
.actus-recherche input { min-width: 0; width: 100%; padding: 8px 12px; border-right: 0; }
.actus-recherche button { padding: 8px 14px; font-size: var(--pas--1); font-weight: 700; cursor: pointer; }
.actus-site-section { padding: 18px 0; border-bottom: 1px solid var(--encre-filet); color: var(--encre-voile); }
.actus-site-section a, .actus-vide a { color: var(--rouge); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.actus-liste { border-bottom: 1px solid var(--encre-filet); }
.actus-ligne { border-top: 1px solid var(--encre-filet); transition: opacity 180ms ease; }
.actus-ligne:first-child { border-top: 0; }
.actus-ligne > a {
  display: grid; grid-template-columns: 72px 9rem minmax(0, 1fr) minmax(140px, 0.42fr) auto;
  gap: 14px 24px; align-items: center; min-width: 0; padding-block: clamp(20px, 3vw, 38px);
}
.actus-ligne time { color: var(--encre-voile); font-size: var(--pas--1); font-variant-numeric: tabular-nums; }
.actus-ligne-titre {
  min-width: 0; overflow-wrap: anywhere;
  font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2.6rem); line-height: 1.02;
}
.actus-ligne-sections { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
.actus-fleche { font-size: var(--pas-1); transition: transform 200ms var(--ease-out); }
.actus-vignette { display: block; width: 72px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bordeaux); }
.actus-vignette img { width: 100%; height: 100%; object-fit: cover; }
.actus-pagination { display: flex; justify-content: space-between; gap: 24px; padding-top: 32px; font-weight: 700; }
.actus-pagination a:last-child { margin-left: auto; text-align: right; }
.actus-recherche { flex-wrap: wrap; gap: 8px; }
.actus-recherche input { flex: 1 1 200px; border-right: 1px solid var(--encre-filet); }
.actus-recherche select {
  min-height: 44px; padding: 8px 10px; border: 1px solid var(--encre-filet); border-radius: 0;
  background: transparent; color: var(--encre); font: inherit; font-size: var(--pas--1);
}
.actus-vues { grid-column: 1 / -1; display: flex; gap: 4px; justify-self: end; }
.actus-vues a {
  padding: 6px 14px; border-radius: 999px; font-size: var(--pas--1); font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--encre-filet);
}
.actus-vues a[aria-current="true"] { background: var(--encre); color: var(--creme); box-shadow: none; }

/* Vue en grille : cartes avec image toujours visible. */
.actus-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(20px, 3vw, 36px); padding-top: clamp(24px, 4vw, 40px); border-bottom: 0;
}
.actus-grille .actus-ligne { border-top: 0; }
.actus-grille .actus-ligne > a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-block: 0; }
.actus-grille .actus-vignette { display: block; width: 100%; aspect-ratio: 4 / 3; grid-row: auto; }
.actus-grille .actus-vignette img { transition: transform 600ms var(--ease-out); }
.actus-grille .actus-ligne time, .actus-grille .actus-ligne-titre, .actus-grille .actus-ligne-sections { grid-column: 1; }
.actus-grille .actus-ligne-titre { font-size: clamp(1.2rem, 1.6vw, 1.6rem); }
.actus-grille .actus-fleche { display: none; }
@media (hover: hover) and (pointer: fine) {
  .actus-grille .actus-ligne > a:hover .actus-vignette img { transform: scale(1.04); }
}
.actus-vide { display: grid; justify-items: start; gap: 14px; padding-block: clamp(56px, 9vw, 112px); font-size: var(--pas-1); }
@media (hover: hover) and (pointer: fine) and (min-width: 821px) {
  .actus-ligne > a:hover .actus-fleche { transform: translateX(6px); }
}
@media (max-width: 820px) {
  .actus-filtres { grid-template-columns: minmax(0, 1fr); }
  .actus-recherche { width: 100%; }
  .actus-ligne > a { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 7px 14px; }
  .actus-vignette { width: 96px; grid-row: 1 / 4; }
  .actus-ligne time, .actus-ligne-titre, .actus-ligne-sections { grid-column: 2; }
  .actus-fleche { grid-column: 3; grid-row: 1 / 4; }
}
@media (max-width: 480px) {
  .actus-tete { align-items: start; flex-direction: column; }
  .actus-recherche { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; }
  .actus-ligne > a { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .actus-vignette { width: 76px; }
  .actus-ligne-sections .puce { font-size: 0.62rem; }
}

/* ---------- Article ---------- */
.page-article .entete::before { opacity: 1; }
.lecture-progression {
  position: fixed; z-index: 60; top: calc(env(safe-area-inset-top, 0px) + 64px); left: 0; right: 0;
  height: 3px; pointer-events: none;
}
.lecture-progression span { display: block; width: 100%; height: 100%; background: var(--jaune); transform: scaleX(0); transform-origin: left; }
.article-ouverture {
  position: relative; isolation: isolate; height: 82svh; min-height: 560px; overflow: hidden;
  display: grid; align-items: end; padding: 120px var(--gouttiere) clamp(40px, 7vh, 72px);
  background: var(--nuit); color: var(--creme);
}
.article-ouverture::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--nuit), transparent 72%);
}
.article-ouverture-image {
  position: absolute; inset: -8% 0; z-index: -2; width: 100%; height: 116%;
  max-width: none; object-fit: cover; filter: brightness(0.55); will-change: transform;
}
.article-ouverture-contenu { display: grid; gap: 20px; width: min(1320px, 100%); }
.article-ouverture-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: var(--pas--1); color: var(--creme-voile); }
.article-titre {
  max-width: 18ch; overflow-wrap: anywhere;
  font-family: var(--display); font-stretch: 100%; font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 5.6rem); line-height: 0.94; letter-spacing: -0.02em; text-wrap: balance;
}
.article-contenu { background: var(--creme); color: var(--encre); padding: clamp(72px, 10vw, 132px) var(--gouttiere); }
.article-texte, .article-reactions, .article-commentaires, .article-retour { width: min(64ch, 100%); margin-inline: auto; }
.article-texte { display: grid; gap: 28px; font-size: var(--pas-0); line-height: 1.75; overflow-wrap: anywhere; }
.article-texte a { color: var(--rouge); text-decoration: underline; text-underline-offset: 3px; }
.article-texte pre { max-width: 100%; overflow-x: auto; }
.article-chapo { font-size: var(--pas-1); line-height: 1.55; font-weight: 500; }
.article-accroche {
  margin: 10px 0; padding: 8px 0 8px clamp(18px, 3vw, 32px); border-left: 4px solid var(--jaune);
  font-family: var(--display); font-size: var(--pas-1); font-style: italic; font-weight: 650; line-height: 1.35;
}
.article-texte h2 {
  margin-top: 18px; font-family: var(--display); font-stretch: 112%; font-weight: 800;
  font-size: var(--pas-2); line-height: 1.05; text-wrap: balance;
}
.article-conclusion { margin-top: 18px; padding-top: 28px; border-top: 2px solid var(--jaune); font-weight: 650; }
.article-mots { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 10px; }
.article-mots .puce { background: transparent; box-shadow: inset 0 0 0 1px var(--encre-filet); }
.article-reactions, .article-commentaires { display: grid; gap: 22px; margin-top: clamp(64px, 9vw, 104px); padding-top: 28px; border-top: 1px solid var(--encre-filet); }
.article-reactions h2, .article-commentaires h2 {
  font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: var(--pas-2); line-height: 1;
}
.article-votes { display: flex; flex-wrap: wrap; gap: 10px; }
.article-votes form { margin: 0; }
.article-votes button, .article-vote-compteur {
  min-height: 46px; margin: 0; padding: 10px 16px; border: 1px solid var(--encre-filet); border-radius: 999px;
  background: transparent; color: var(--encre); font: inherit; font-weight: 700;
}
.article-votes button { cursor: pointer; }
.article-votes button[aria-pressed="true"] { background: var(--jaune); border-color: var(--jaune); }
.article-votes span { margin-left: 8px; font-variant-numeric: tabular-nums; }
.article-connexion { justify-self: start; color: var(--rouge); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.article-flash { padding: 12px 14px; border-left: 4px solid var(--jaune); background: var(--encre-filet); }
.article-commentaires-liste { display: grid; border-bottom: 1px solid var(--encre-filet); }
.article-commentaires-liste li { display: grid; gap: 10px; padding-block: 22px; border-top: 1px solid var(--encre-filet); }
.article-commentaire-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; font-size: var(--pas--1); }
.article-commentaire-meta time { color: var(--encre-voile); }
.article-commentaire-texte { white-space: pre-wrap; overflow-wrap: anywhere; }
.article-commentaire-formulaire { display: grid; gap: 10px; margin-top: 12px; }
.article-commentaire-formulaire label { font-weight: 700; }
.article-commentaire-formulaire textarea {
  width: 100%; min-height: 150px; resize: vertical; padding: 14px;
  border: 1px solid var(--encre-filet); border-radius: 0; background: transparent; color: var(--encre); font: inherit;
}
.article-commentaire-formulaire button {
  justify-self: start; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px;
  background: var(--jaune); color: var(--encre); font: inherit; font-weight: 700; cursor: pointer;
}
.article-retour { display: block; margin-top: clamp(64px, 9vw, 104px); color: var(--rouge); font-weight: 700; }
.article-a-lire { display: grid; gap: 44px; padding: clamp(80px, 11vw, 140px) var(--gouttiere); background: var(--creme); color: var(--encre); border-top: 1px solid var(--encre-filet); }
.article-a-lire-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); }
.article-a-lire .carte { width: auto; min-width: 0; }
@media (max-width: 820px) {
  .article-ouverture { min-height: 500px; }
  .article-a-lire-grille { grid-template-columns: minmax(0, 1fr); }
  .article-a-lire .carte { width: min(100%, 440px); }
}

/* ---------- Contact ---------- */
.contact-page {
  min-height: 100svh; padding: calc(env(safe-area-inset-top, 0px) + 120px) var(--gouttiere) clamp(80px, 11vw, 140px);
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(360px, 1.15fr); gap: clamp(48px, 8vw, 120px);
  background: var(--creme); color: var(--encre);
}
.contact-coordonnees { display: grid; align-content: start; gap: 30px; }
.contact-intro { max-width: 54ch; font-size: var(--pas-1); line-height: 1.55; }
.contact-coordonnees .pied-coord { grid-template-columns: minmax(0, 1fr); }
.contact-coordonnees .pied-coord dt { color: var(--encre-voile); }
.contact-lieux, .contact-confidentialite a { color: var(--rouge); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.contact-panneau { min-width: 0; }
.contact-mention { grid-column: 1 / -1; font-size: var(--pas--1); color: var(--encre-voile); }
.soutien-contact { min-height: 0; padding-top: clamp(72px, 9vw, 120px); border-top: 1px solid var(--encre-filet); }
.contact-formulaire, .contact-confirmation { display: grid; gap: 22px; }
.contact-champ { display: grid; gap: 7px; }
.contact-champ label { font-weight: 700; }
.contact-champ input, .contact-champ select, .contact-champ textarea {
  width: 100%; min-width: 0; border: 1px solid var(--encre-filet); border-radius: 0;
  padding: 13px 14px; background: rgba(255, 255, 255, 0.24); color: var(--encre); font: inherit;
}
.contact-champ textarea { resize: vertical; line-height: 1.55; }
.contact-champ [aria-invalid="true"] { border-color: var(--rouge); }
.contact-erreur { color: var(--rouge); font-size: var(--pas--1); font-weight: 650; }
.contact-erreur-generale { margin-bottom: 22px; padding: 16px; border-left: 4px solid var(--rouge); background: var(--encre-filet); }
.contact-formulaire .bouton { justify-self: start; border: 0; font: inherit; cursor: pointer; }
.contact-confidentialite { color: var(--encre-voile); font-size: var(--pas--1); }
.contact-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-confirmation { align-content: start; padding: clamp(28px, 5vw, 56px); border: 1px solid var(--encre-filet); }
.contact-confirmation h2 { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: var(--pas-2); text-transform: uppercase; }
.contact-confirmation .bouton { justify-self: start; }

/* ---------- Pages de texte ---------- */
.texte-page {
  min-height: 100svh; padding: calc(env(safe-area-inset-top, 0px) + 120px) var(--gouttiere) clamp(80px, 11vw, 140px);
  background: var(--creme); color: var(--encre);
}
.texte-page > * { width: min(68ch, 100%); margin-inline: auto; }
.texte-page header { display: grid; gap: 16px; }
.texte-page header > p { color: var(--encre-voile); font-size: var(--pas--1); }
.texte-sommaire { margin-block: 44px 72px; padding-block: 22px; border-block: 1px solid var(--encre-filet); }
.texte-sommaire ul { display: flex; flex-wrap: wrap; gap: 9px 22px; }
.texte-sommaire a, .texte-page section a { color: var(--rouge); text-decoration: underline; text-underline-offset: 3px; }
.texte-page section { display: grid; gap: 16px; scroll-margin-top: 90px; }
.texte-page section + section { margin-top: 56px; }
.texte-page section h2 {
  font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: var(--pas-2);
  line-height: 1.04; text-transform: uppercase; text-wrap: balance;
}
.texte-page section p, .texte-page section ul { line-height: 1.75; }
.texte-page section ul { list-style: disc; padding-left: 1.3em; }

/* ---------- Partenaires ---------- */
.partenaires-ouverture {
  min-height: 70svh; padding: calc(env(safe-area-inset-top, 0px) + 120px) 0 clamp(64px, 9vw, 112px);
  display: grid; align-content: end; gap: clamp(56px, 10vw, 120px); overflow: hidden;
  background: var(--nuit); color: var(--creme);
}
.partenaires-entete { display: grid; gap: 24px; padding-inline: var(--gouttiere); }
.partenaires-entete p { max-width: 58ch; font-size: var(--pas-1); }
.partenaires-defilement { display: flex; width: max-content; animation: partenaires-defile 32s linear infinite; }
.partenaires-defilement:hover { animation-play-state: paused; }
.partenaires-defilement p { display: flex; align-items: center; flex: none; font-family: var(--display); font-size: var(--pas-2); font-weight: 750; text-transform: uppercase; white-space: nowrap; }
.partenaires-defilement span { padding-inline: 0.4em; }
.partenaires-defilement i { color: var(--jaune); font-style: normal; }
@keyframes partenaires-defile { to { transform: translateX(-50%); } }
.partenaires-groupes, .fiche-partenaires { display: grid; gap: clamp(72px, 10vw, 120px); padding: clamp(80px, 11vw, 140px) var(--gouttiere); background: var(--creme); color: var(--encre); }
.partenaires-groupe { display: grid; gap: 32px; }
.partenaires-groupe > h2 {
  font-family: var(--display); font-size: var(--pas-2); line-height: 1; font-weight: 800; text-transform: uppercase;
}
.partenaires-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: clamp(24px, 4vw, 44px) clamp(16px, 3vw, 32px); }
.partenaire { display: grid; align-content: start; gap: 14px; min-width: 0; }
.partenaire-tuile { aspect-ratio: 1; display: grid; place-items: center; padding: 12%; background: color-mix(in srgb, var(--creme) 92%, var(--encre)); }
.partenaire-tuile img { width: 60%; height: 60%; object-fit: contain; }
.partenaire-tuile span { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: var(--pas-1); line-height: 1; text-align: center; text-transform: uppercase; }
.partenaire > p { display: grid; gap: 6px; overflow-wrap: anywhere; }
.partenaire > p a { justify-self: start; color: var(--rouge); font-size: var(--pas--1); text-decoration: underline; text-underline-offset: 3px; }
.partenaires-appel { padding: clamp(80px, 11vw, 140px) var(--gouttiere); display: grid; justify-items: start; gap: 24px; background: var(--bordeaux); color: var(--creme); }
.partenaires-appel p { max-width: 52ch; font-size: var(--pas-1); }
.fiche-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px 24px; }
.fiche-actions a { color: var(--rouge); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.fiche-partenaires { border-top: 1px solid var(--encre-filet); }

/* Bureau d'une section : photo au-dessus, puis nom et poste. */
.fiche-bureau { display: grid; gap: 40px; padding: clamp(72px, 10vw, 128px) var(--gouttiere); background: var(--creme); color: var(--encre); border-top: 1px solid var(--encre-filet); }
.bureau-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: clamp(28px, 4vw, 44px) clamp(16px, 3vw, 32px); }
.bureau-carte { display: grid; align-content: start; gap: 6px; min-width: 0; }
.bureau-photo { aspect-ratio: 3 / 4; margin-bottom: 8px; display: grid; place-items: end center; overflow: hidden; background: color-mix(in srgb, var(--creme) 90%, var(--encre)); }
.bureau-photo img { width: 100%; height: 100%; object-fit: cover; }
.bureau-photo svg { width: 62%; fill: color-mix(in srgb, var(--creme) 72%, var(--encre)); }
.bureau-nom { font-weight: 700; font-size: var(--pas-0); overflow-wrap: anywhere; }
.bureau-poste { color: var(--encre-voile); font-size: var(--pas--1); }

/* ---------- Anciens et amis ---------- */
.anciens-page { min-height: 100svh; position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; padding: calc(env(safe-area-inset-top, 0px) + 110px) var(--gouttiere) 80px; background: var(--nuit); color: var(--creme); }
.anciens-contenu {
  position: relative; z-index: 1; display: grid; justify-items: start; gap: 28px; max-width: 62ch;
  /* Panneau flouté : le texte reste lisible au-dessus des « BEC » qui défilent. */
  padding: clamp(24px, 4vw, 48px); border-radius: 24px;
  background: rgba(23, 20, 20, 0.55); box-shadow: inset 0 0 0 1px var(--creme-filet);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.anciens-contenu > p { font-size: var(--pas-1); line-height: 1.55; }
.anciens-contenu address { font-style: normal; font-size: var(--pas-1); line-height: 1.6; }
.anciens-contenu address a { text-decoration: underline; text-underline-offset: 3px; }
.anciens-decor {
  position: absolute; inset: 0; z-index: -1; display: grid; align-content: center; gap: 0.06em;
  font-family: var(--display); font-stretch: 150%; font-weight: 900; font-size: clamp(4rem, 13vw, 12rem); line-height: 0.85;
  color: transparent; -webkit-text-stroke: 1.5px var(--jaune); opacity: 0.35; pointer-events: none;
}
.anciens-decor p { white-space: nowrap; will-change: transform; }
.anciens-decor p:nth-child(even) { margin-left: -1.6em; }

/* ---------- Lieux sportifs ---------- */
.lieux-page { min-height: 100svh; padding: calc(env(safe-area-inset-top, 0px) + 120px) var(--gouttiere) clamp(80px, 10vw, 132px); background: var(--nuit); color: var(--creme); }
.lieux-entete { display: grid; gap: 22px; margin-bottom: clamp(52px, 8vw, 96px); }
.lieux-entete p { max-width: 60ch; font-size: var(--pas-1); color: var(--creme-voile); }
.lieux-corps { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.lieux-plan { position: sticky; top: 90px; min-width: 0; }
.lieux-plan svg { width: 100%; height: auto; max-height: calc(100svh - 120px); overflow: visible; }
.lieux-grille line { stroke: var(--creme-filet); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lieux-grille text { fill: var(--creme-voile); font: 10px var(--texte); text-anchor: middle; }
.lieux-grille text:first-of-type { text-anchor: start; }
.lieux-nord path { fill: var(--jaune); }
.lieux-nord text { fill: var(--jaune); font: 800 18px var(--display); text-anchor: middle; }
.lieux-echelle line, .lieux-echelle path { stroke: var(--creme); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }
.lieux-echelle text { fill: var(--creme-voile); font: 12px var(--texte); text-anchor: end; }
.lieux-point { cursor: default; }
.lieux-point line { stroke: var(--creme-filet); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lieux-point circle { fill: var(--jaune); stroke: var(--nuit); stroke-width: 3; transform-box: fill-box; transform-origin: center; transition: transform 220ms var(--ease-out); }
.lieux-point text { fill: var(--creme); font-family: var(--display); font-size: 13px; font-weight: 700; text-transform: uppercase; transition: fill 180ms ease; }
.lieux-point.est-siege circle { fill: var(--creme); stroke: var(--jaune); stroke-width: 4; }
.lieux-point.est-actif circle, .lieux-point:hover circle { transform: scale(1.6); }
.lieux-point.est-actif text, .lieux-point:hover text { fill: var(--jaune); }
.lieux-carte {
  height: min(72svh, 680px); border-radius: 18px; overflow: hidden;
  background: var(--nuit); box-shadow: inset 0 0 0 1px var(--creme-filet);
}
.lieux-carte .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9) saturate(0.4); }
.lieux-carte.leaflet-container .leaflet-control-attribution { background: rgba(23, 20, 20, 0.75); color: var(--creme-voile); font: 10px var(--texte); }
.lieux-carte.leaflet-container .leaflet-control-attribution a { color: var(--creme); }
.lieux-carte .leaflet-bar a { background: var(--nuit); color: var(--creme); border-color: var(--creme-filet); }
.lieux-marqueur { position: relative; }
.lieux-marqueur-point {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--jaune); box-shadow: 0 0 0 3px var(--nuit);
  transition: transform 220ms var(--ease-out);
}
.lieux-marqueur.est-siege .lieux-marqueur-point { background: var(--creme); box-shadow: 0 0 0 3px var(--jaune); }
.lieux-marqueur-nom {
  position: absolute; left: 20px; top: 50%; translate: 0 -50%; white-space: nowrap;
  font: 700 12px var(--display); text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--creme); text-shadow: 0 1px 3px var(--nuit), 0 0 8px var(--nuit);
  opacity: 0; transition: color 180ms ease, opacity 180ms ease;
}
.noms-visibles .lieux-marqueur-nom, .lieux-marqueur.est-actif .lieux-marqueur-nom, .lieux-marqueur:hover .lieux-marqueur-nom { opacity: 1; }
.lieux-marqueur.est-actif { z-index: 1000 !important; }
.lieux-marqueur.est-actif .lieux-marqueur-point { transform: scale(1.6); }
.lieux-marqueur.est-actif .lieux-marqueur-nom { color: var(--jaune); }
.lieux-liste { border-bottom: 1px solid var(--creme-filet); }
.lieux-liste > li { display: grid; gap: 8px; padding: 24px 18px; border-top: 1px solid var(--creme-filet); transition: background-color 180ms ease; }
.lieux-liste > li.est-actif { background: rgba(246, 207, 108, 0.1); }
.lieux-liste h2 { font-family: var(--display); font-size: var(--pas-1); line-height: 1.1; font-weight: 750; text-transform: uppercase; }
.lieux-liste h2 a:hover { color: var(--jaune); }
.lieux-liste p, .lieux-liste address { color: var(--creme-voile); font-style: normal; font-size: var(--pas--1); line-height: 1.5; }
.lieux-itineraire, .lieux-sans-coordonnees a { justify-self: start; color: var(--jaune); font-size: var(--pas--1); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 820px) {
  .contact-page { grid-template-columns: minmax(0, 1fr); }
  .contact-coordonnees { max-width: 62ch; }
  .partenaires-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anciens-decor { opacity: 0.25; }
  .lieux-corps { grid-template-columns: minmax(0, 1fr); }
  .lieux-plan { position: relative; top: auto; height: 58svh; min-height: 390px; }
  .lieux-plan svg { width: 100%; height: 100%; max-height: none; }
  .lieux-carte { height: 100%; }
}
@media (max-width: 480px) {
  .contact-page { padding-top: calc(env(safe-area-inset-top, 0px) + 100px); }
  .partenaires-grille { gap: 24px 12px; }
  .partenaire > p { font-size: var(--pas--1); }
  .lieux-page { padding-inline: 14px; }
  .lieux-plan { height: 420px; }
}
@media (max-width: 480px) {
  .article-ouverture { height: 82svh; min-height: 460px; padding-top: 96px; }
  .article-ouverture-meta { gap: 7px 10px; }
  .article-votes { align-items: stretch; flex-direction: column; }
  .article-votes button, .article-vote-compteur { width: 100%; text-align: left; }
}

/* ---------- Petits écrans ---------- */
@media (max-width: 820px) {
  .fiche-infos, .pied-grille { grid-template-columns: minmax(0, 1fr); }
  .agenda-liste li { grid-template-columns: 5rem minmax(0, 1fr); }
  .agenda-liste .puce { grid-column: 2; justify-self: start; }
  .fiche-voisines { grid-template-columns: minmax(0, 1fr); }
  .fiche-voisines a + a { border-left: 0; border-top: 1px solid var(--creme-filet); }
}

/* ---------- Version accessible (bouton de l'en-tête) ---------- */
.entete-a11y { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.entete-a11y svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.entete-a11y[aria-pressed="true"] { background: var(--jaune); color: var(--encre); }
@media (hover: hover) and (pointer: fine) {
  .entete-a11y:hover { background: rgba(246, 207, 108, 0.25); }
}
html.mode-accessible {
  font-size: 112.5%;
  --encre-voile: var(--encre); --creme-voile: var(--creme);
  --encre-filet: rgba(33, 33, 33, 0.5); --creme-filet: rgba(248, 244, 232, 0.5);
}
html.mode-accessible body { letter-spacing: 0.02em; word-spacing: 0.08em; }
html.mode-accessible :is(p, li, dd, address) { line-height: 1.7; }
html.mode-accessible :is(h1, h2, h3, .bloc-titre, .tableau-mot, .fiche-nom, .btq-nom, .une-principale-titre, .actus-ligne-titre, .noeud-nom, [style*="--l"]) {
  font-stretch: 100% !important; font-style: normal !important; font-weight: 700 !important; letter-spacing: 0.01em !important;
}
html.mode-accessible main a:not(.bouton, .pilule, .puce, .tableau-lien, .btq-boite, .carte a, .une-principale a, .une-liste a, .actus-ligne a) { text-decoration: underline; text-underline-offset: 3px; }
html.mode-accessible :focus-visible { outline: 4px solid var(--rouge) !important; outline-offset: 3px; box-shadow: 0 0 0 8px var(--jaune) !important; }
html.mode-accessible .entete::before { opacity: 1; }
html.mode-accessible :is(.btq-decor, .anciens-decor, .pied-geant, .club-blason, .club-annee, .tableau-fond, .orga-fond) { display: none !important; }
html.mode-accessible .tableau.est-allume .tableau-lien { opacity: 1; }
html.mode-accessible .tableau-liste .tableau-mot { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem) !important; }
html.mode-accessible .anciens-contenu { background: var(--nuit); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Animations coupées par le visiteur (bouton du pied de page) ---------- */
html.sans-animation *, html.sans-animation *::before, html.sans-animation *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
  transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
html.sans-animation .revele-arme { opacity: 1; transform: none; }
html.sans-animation::view-transition-old(root), html.sans-animation::view-transition-new(root) { animation: none; }
.pied-animations { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .tableau-liste li .tableau-mot, .js .fiche-nom .tableau-mot { animation: none; }
  .revele-arme { opacity: 1; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .carte-image img, .tableau-lien, .entete-nav a::after, .pied-coord a { transition: none; }
  .tableau-repli img { transition: opacity 200ms ease; }
  .orga-anneaux circle, .noeud > *, .orga-fiche:not([hidden]) { animation: none; }
  .palm-collante, .palm-titre-ligne, .palm-frise-curseur, .palm-outils button, .palm-outils select { transition: none; }
  .palm-liste.est-ouvert, .orga-liste.est-ouvert { animation: none; }
  .hist-ouverture-date { will-change: auto; }
  .hist-date { --p: 1; }
  .part-titre { animation: none; }
  .actus-ligne > a { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 7px 14px; }
  .actus-vignette { display: block; grid-row: 1 / 4; }
  .actus-ligne time, .actus-ligne-titre, .actus-ligne-sections { grid-column: 2; }
  .actus-fleche { grid-column: 3; grid-row: 1 / 4; }
  .article-ouverture-image { will-change: auto; }
}

/* ---------- Boutique ---------- */
.btq {
  --fond-btq: #E6E1D3;
  position: relative; overflow: clip; min-height: 100svh;
  padding: clamp(72px, 9vh, 104px) var(--gouttiere) 40px;
  background: var(--fond-btq); color: var(--encre);
  display: grid; justify-items: center; align-content: center; gap: 10px;
}
.btq :focus-visible { outline-color: var(--rouge); }
.btq-decor {
  position: absolute; inset: 50% 0 auto; translate: 0 -62%; margin: 0;
  display: flex; gap: 0.3em; width: max-content; pointer-events: none;
  font-family: var(--display); font-weight: 900; font-stretch: 150%;
  font-size: clamp(7rem, 26vw, 24rem); line-height: 0.8; text-transform: uppercase;
  color: rgba(83, 25, 28, 0.055);
  animation: btq-derive 60s linear infinite;
}
@keyframes btq-derive { to { transform: translateX(-50%); } }
.btq-surtitre {
  position: relative; margin: 0;
  font-size: var(--pas--1); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bordeaux);
}

.btq-scene {
  position: relative; width: min(100%, 1280px);
  /* Taille du visuel calée sur la hauteur restante pour garder les boîtes du bas à l'écran. */
  --v: max(260px, min(100svh - 330px, 860px, 56vw));
  display: grid; perspective: 1400px;
}
.btq-articles {
  display: grid; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 900ms var(--ease-out);
}
.btq-article {
  grid-area: 1 / 1; display: grid; align-items: center; gap: 12px clamp(16px, 3vw, 48px);
  grid-template-columns: minmax(0, 1fr) var(--v) minmax(0, 1fr);
}
.js .btq-article:not(.est-actif) { visibility: hidden; pointer-events: none; }
.no-js .btq-article + .btq-article { padding-top: 48px; border-top: 1px solid var(--encre-filet); }

.btq-visuel {
  grid-column: 2; position: relative; aspect-ratio: 1;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.btq-visuel.est-saisi { cursor: grabbing; }
.btq-visuel-fixe { cursor: default; }
.btq-visuel-fixe::after { display: none; }
.btq-visuel-fixe .btq-flotte { height: 100%; }
.btq-visuel-fixe .btq-flotte img { width: 100%; height: 100%; object-fit: contain; padding: 7% 12%; filter: drop-shadow(0 18px 30px rgba(33, 33, 33, 0.18)); }
.btq-boite img { aspect-ratio: 1; object-fit: contain; }
.btq-flotte {
  position: relative; z-index: 1;
  animation: btq-flotter 6.5s ease-in-out infinite;
}
/* Fond les bords du cadre dans la page. Dégradé posé dessus plutôt qu'un mask-image,
   qui empêche Chrome de peindre le canvas dans la scène 3D. */
.btq-visuel::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(closest-side, transparent 80%, var(--fond-btq) 100%);
}
.btq-flotte img, .btq-flotte canvas { display: block; width: 100%; height: auto; }
.btq-flotte canvas { position: absolute; inset: 0; }
.btq-flotte [hidden] { display: none; }
.btq-ombre {
  position: absolute; left: 30%; right: 30%; bottom: 3%; height: 5%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(33, 33, 33, 0.28), transparent);
  animation: btq-ombre 6.5s ease-in-out infinite;
}
@keyframes btq-flotter {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50% { transform: translateY(-16px) rotate(0.6deg); }
}
@keyframes btq-ombre {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(0.82); opacity: 0.6; }
}

.btq-infos { grid-column: 3; grid-row: 1; display: grid; justify-items: start; gap: 18px; }
.btq-nom {
  position: relative; z-index: 3; grid-column: 1 / -1; grid-row: 2; margin: -3vh 0 0; justify-self: center; text-align: center;
  font-family: var(--display); font-weight: 800; font-stretch: 125%;
  font-size: clamp(1.9rem, 1rem + 2.6vw, 3.8rem); line-height: 0.92; text-transform: uppercase; color: var(--bordeaux);
  text-wrap: balance;
}
.btq-tailles-menu { position: relative; font-size: var(--pas--1); }
.btq-tailles-menu summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  color: var(--encre-voile); font-weight: 600; text-decoration: underline; text-decoration-color: var(--encre-filet);
  text-underline-offset: 4px;
}
.btq-tailles-menu summary::-webkit-details-marker { display: none; }
.btq-tailles-menu summary::after { content: '▾'; font-size: 0.8em; transition: transform 200ms var(--ease-out); }
.btq-tailles-menu[open] summary::after { transform: rotate(180deg); }
.btq-tailles-menu[open] { display: grid; gap: 12px; }
.btq-tailles-menu[open] summary { color: var(--encre); }
.btq-tailles p { margin: 0 0 6px; font-size: var(--pas--1); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-voile); }
.btq-tailles ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.btq-tailles li {
  min-width: 2.6em; padding: 6px 10px; border-radius: 999px; text-align: center;
  box-shadow: inset 0 0 0 1.5px var(--encre-filet); font-size: var(--pas--1); font-weight: 600;
}
.btq-infos .bouton { padding: 12px 18px; background: var(--rouge); color: var(--creme); text-wrap: balance; }
@media (hover: hover) and (pointer: fine) {
  .btq-infos .bouton:hover { background: var(--bordeaux); }
}

.btq-fleche {
  position: absolute; z-index: 2; top: calc(var(--v) / 2); translate: 0 -50%;
  display: grid; place-items: center; padding: 12px; border: 0; cursor: pointer;
  background: none; color: rgba(83, 25, 28, 0.6);
  transition: transform 160ms var(--ease-out), color 200ms ease;
}
.btq-fleche svg {
  width: clamp(28px, 3.4vw, 46px); height: auto; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
}
.btq-fleche:active { transform: scale(0.92); }
.btq-fleche-prec { left: max(-10px, 50% - var(--v) / 2 - 24px); }
.btq-fleche-suiv { right: max(-10px, 50% - var(--v) / 2 - 24px); }
@media (hover: hover) and (pointer: fine) {
  .btq-fleche:hover { color: rgba(83, 25, 28, 0.9); }
}
.no-js .btq-fleche, .no-js .btq-aide, .no-js .btq-boites { display: none; }

.btq-aide {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--pas--1); color: var(--encre-voile);
}
.btq-aide[hidden] { display: none; }
.btq-commande {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 14px;
  border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600;
  background: none; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre-voile);
}
.btq-commande svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .btq-commande:hover { background: var(--encre); color: var(--creme); }
}

.btq-boites {
  position: relative; display: flex; align-items: center; gap: 10px;
  max-width: 100%; padding: 16px 6px 12px; overflow-x: auto; scrollbar-width: none;
}
.btq-boite {
  flex: none; display: block; width: 50px; padding: 4px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 6px 18px rgba(33, 33, 33, 0.07);
  animation: btq-flotter 5.5s ease-in-out infinite; animation-delay: calc(var(--i) * -0.7s);
  transition: width 400ms var(--ease-out), box-shadow 300ms ease, background-color 300ms ease;
}
.btq-boite img { display: block; width: 100%; height: auto; border-radius: 10px; mix-blend-mode: multiply; }
.btq-boite[aria-current="true"] {
  width: 68px; background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 0 1.5px rgba(165, 39, 38, 0.55), 0 10px 24px rgba(83, 25, 28, 0.16);
}
@media (hover: hover) and (pointer: fine) {
  .btq-boite:hover { box-shadow: 0 10px 24px rgba(33, 33, 33, 0.16); }
}
.btq-note { max-width: 46ch; margin: 0; text-align: center; font-size: var(--pas--1); color: var(--encre-voile); }

@media (max-width: 1180px) {
  .btq-article { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .btq-scene { --v: max(240px, min(100vw - 2 * var(--gouttiere), 100svh - 330px)); }
  .btq-visuel { grid-column: 1; grid-row: 1; width: var(--v); }
  .btq-nom { grid-column: 1; grid-row: 2; font-size: var(--pas-2); }
  .btq-infos { grid-column: 1; grid-row: 3; justify-items: center; }
  .btq-tailles { text-align: center; }
  .btq-tailles ul { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .btq-decor, .btq-flotte, .btq-ombre, .btq-boite { animation: none; }
  .btq-articles, .btq-boite { transition: none; }
}