/* Trail de Pignan — feuille de styles unique.
   Monde : l'affiche 2027. Nuit violine, champ « aube » magenta → corail,
   trame de points en demi-teinte, pastilles hexagonales, Jost fin pour le
   nom et Jost 800 pour les kilomètres. */

@font-face {
  font-family: 'Jost';
  src: url('/assets/fonts/Jost.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --nuit: #0f0d24;
  --nuit-2: #17143a;
  --nuit-3: #231d50;
  --filet: rgb(255 255 255 / 0.12);
  --filet-fort: rgb(255 255 255 / 0.24);
  --texte: #f5f2fb;
  --doux: #bdb6d6;
  --magenta: #d42a75;
  --magenta-vif: #ff5ba1;
  --corail: #f4907a;
  --violet: #6a3fa0;
  --indigo: #3e4f99;
  --aube: linear-gradient(115deg, #3b2c80 0%, #8a2c86 38%, #d42a75 64%, #f4907a 100%);
  --aube-sombre: linear-gradient(115deg, #261c5e 0%, #5f2370 48%, #a5235d 100%);
  --trame: radial-gradient(circle at center, rgb(255 255 255 / 0.16) 0 1.1px, transparent 1.6px) 0 0 / 7px 7px;
  --hexa: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --police: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --gouttiere: clamp(16px, 4vw, 40px);
  --rayon: 14px;
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --en-mouvement: cubic-bezier(0.77, 0, 0.175, 1);
  color-scheme: dark;
}

/* ------------------------------------------------------------- Socle */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; font-weight: 600; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-decoration-color: rgb(255 91 161 / 0.6); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--magenta-vif); }
strong { font-weight: 600; color: #fff; }
::selection { background: var(--magenta); color: #fff; }
:focus-visible { outline: 2px solid var(--magenta-vif); outline-offset: 3px; border-radius: 4px; }
html { scrollbar-color: var(--nuit-3) var(--nuit); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--nuit); }
::-webkit-scrollbar-thumb { background: var(--nuit-3); border-radius: 8px; border: 3px solid var(--nuit); }
svg[aria-hidden] { width: 1.25em; height: 1.25em; flex: none; }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saut {
  position: absolute; left: var(--gouttiere); top: -4rem; z-index: 100;
  background: #fff; color: var(--nuit); padding: 0.6rem 1rem; border-radius: 8px; font-weight: 600;
}
.saut:focus { top: 0.75rem; }

.enveloppe { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gouttiere); }

/* ----------------------------------------------------------- Boutons */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 3rem; padding: 0.7rem 1.4rem; border-radius: 999px;
  font: 600 1rem/1.1 var(--police); letter-spacing: 0.01em; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background-color 0.25s var(--sortie), color 0.25s var(--sortie), border-color 0.25s var(--sortie), transform 0.25s var(--sortie), box-shadow 0.25s var(--sortie);
}
.bouton svg { width: 1.1em; height: 1.1em; transition: transform 0.3s var(--sortie); }
.bouton:hover svg { transform: translateX(3px); }
.bouton:active { transform: translateY(1px); }
.bouton--plein { background: var(--magenta); color: #fff; box-shadow: 0 8px 24px -10px rgb(212 42 117 / 0.8); }
.bouton--plein:hover { background: #e2337f; box-shadow: 0 12px 28px -10px rgb(212 42 117 / 0.95); }
.bouton--blanc { background: #fff; color: #3a1846; }
.bouton--blanc:hover { background: #ffe9f2; }
.bouton--trait { border-color: var(--filet-fort); color: var(--texte); background: rgb(255 255 255 / 0.04); }
.bouton--trait:hover { border-color: #fff; background: rgb(255 255 255 / 0.1); }
.bouton--petit { min-height: 2.5rem; padding: 0.5rem 1.05rem; font-size: 0.95rem; }
.bouton--grand { min-height: 3.4rem; padding: 0.85rem 1.7rem; font-size: 1.06rem; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 0.45em; font-weight: 600; color: #fff;
  text-decoration: none; border-bottom: 1px solid var(--magenta-vif); padding-bottom: 2px;
}
.lien-fleche svg { width: 1.05em; height: 1.05em; transition: transform 0.3s var(--sortie); }
.lien-fleche:hover svg { transform: translateX(4px); }

/* ---------------------------------------------------------- Logotype */

.logotype {
  display: inline-grid; grid-template-columns: max-content 1fr; align-items: baseline; column-gap: 0.1em; justify-content: start;
  text-transform: uppercase; font-weight: 300; line-height: 0.92; letter-spacing: 0.06em; color: #fff;
}
.logotype__de { text-transform: none; font-size: 0.46em; letter-spacing: 0.02em; font-weight: 400; }
.logotype__pignan { grid-column: 1 / -1; font-weight: 500; letter-spacing: 0.04em; }
.marque { display: inline-flex; text-decoration: none; font-size: 1.32rem; }
.marque .logotype__de { font-size: max(0.46em, 0.75rem); }
.logotype--hero { font-size: clamp(3rem, 9.4vw, 6rem); font-weight: 200; }
.logotype--pied { font-size: 1.9rem; }

/* ---------------------------------------------------- Hexagones */

.hexa {
  --taille: 5.4rem;
  display: inline-grid; place-content: center; text-align: center;
  width: var(--taille); height: calc(var(--taille) * 1.12);
  clip-path: var(--hexa); background: var(--magenta); color: #fff;
  line-height: 1; flex: none;
}
.hexa__grand { font-weight: 800; font-size: calc(var(--taille) * 0.42); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hexa__petit { font-weight: 600; font-size: calc(var(--taille) * 0.13); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 0.3em; }
.hexa--mini { --taille: 2.6rem; }
.hexa--mini .hexa__petit { display: none; }

/* -------------------------------------------------------------- En-tête */

.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgb(15 13 36 / 0.82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--filet);
}
.entete__rang { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.6rem; }
.entete__nav { display: flex; align-items: center; gap: 2rem; }
.entete__nav ul { display: flex; align-items: center; gap: 1.6rem; list-style: none; }
.entete__nav > ul > li > a { display: inline-block; line-height: 1.6; }
.entete__nav ul a { text-decoration: none; font-weight: 500; color: var(--doux); padding: 0.4rem 0; position: relative; transition: color 0.2s; }
.entete__nav ul a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px;
  background: var(--magenta-vif); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--sortie);
}
.entete__nav ul a:hover, .entete__nav ul a[aria-current] { color: #fff; }
.entete__nav ul a:hover::after, .entete__nav ul a[aria-current]::after { transform: scaleX(1); }
.entete__bascule {
  display: none; background: none; border: 1px solid var(--filet-fort); color: #fff;
  width: 2.9rem; height: 2.9rem; border-radius: 50%; align-items: center; justify-content: center; cursor: pointer;
}
.entete__bascule svg { width: 1.35rem; height: 1.35rem; }
.entete__bascule svg + svg, .entete__bascule[aria-expanded='true'] svg:first-child { display: none; }
.entete__bascule[aria-expanded='true'] svg + svg { display: block; }

/* Sous-menu Archives */
.sous-menu { position: relative; }
.sous-menu__bascule {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0; background: none; border: 0; cursor: pointer;
  font: 500 1.0625rem/1.6 var(--police); color: var(--doux); transition: color 0.2s;
}
.sous-menu__bascule:hover, .sous-menu__bascule[aria-expanded='true'], .sous-menu__bascule[data-courant] { color: #fff; }
.sous-menu__bascule svg { width: 1rem; height: 1rem; transition: transform 200ms var(--sortie); }
.sous-menu__bascule[aria-expanded='true'] svg { transform: rotate(180deg); }
.sous-menu__liste {
  position: absolute; top: calc(100% + 0.6rem); left: -1rem; min-width: 12rem; z-index: 60;
  display: grid !important; gap: 0 !important; list-style: none; padding: 0.5rem;
  background: var(--nuit-2); border: 1px solid var(--filet); border-radius: 12px;
  box-shadow: 0 24px 40px -20px rgb(0 0 0 / 0.8);
  transform-origin: top left; opacity: 0; transform: scale(0.96) translateY(-4px); visibility: hidden;
  transition: opacity 180ms var(--sortie), transform 180ms var(--sortie), visibility 0s 180ms;
}
.sous-menu__bascule[aria-expanded='true'] + .sous-menu__liste { opacity: 1; transform: none; visibility: visible; transition: opacity 180ms var(--sortie), transform 180ms var(--sortie); }
.entete__nav .sous-menu__liste a { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.8rem; border-radius: 8px; color: var(--texte); }
.entete__nav .sous-menu__liste a::after { display: none; }
.entete__nav .sous-menu__liste a:hover { background: rgb(255 255 255 / 0.06); }
.sous-menu__liste svg { width: 0.9rem; height: 0.9rem; opacity: 0.7; }
@media (prefers-reduced-motion: reduce) { .sous-menu__liste { transform: none !important; } }

@media (max-width: 900px) {
  .entete__bascule { display: inline-flex; }
  .sous-menu__bascule { display: none; }
  .sous-menu__liste { position: static; opacity: 1; transform: none; visibility: visible; background: none; border: 0; box-shadow: none; padding: 0; min-width: 0; }
  .entete__nav .sous-menu__liste a { padding: 0.85rem 0; font-size: 1.25rem; border-radius: 0; border-bottom: 1px solid var(--filet); color: var(--doux); }
  .entete__nav {
    position: fixed; inset: 4.6rem 0 auto 0; flex-direction: column; align-items: stretch; gap: 1.5rem;
    padding: 1.5rem var(--gouttiere) 2rem; background: var(--nuit-2); border-bottom: 1px solid var(--filet);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 0.3s var(--sortie), transform 0.3s var(--sortie), visibility 0s 0.3s;
  }
  .entete__nav.est-ouvert { visibility: visible; opacity: 1; transform: none; transition: opacity 0.3s var(--sortie), transform 0.3s var(--sortie); }
  .entete__nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .entete__nav ul a, .entete__nav > ul > li > a { display: block; padding: 0.85rem 0; font-size: 1.25rem; border-bottom: 1px solid var(--filet); }
  .entete__nav ul a::after { display: none; }
  .entete__nav .bouton { align-self: flex-start; }
}

/* ----------------------------------------------------------------- Hero */

.hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem); }
.hero__aube {
  position: absolute; inset: -20% -10% auto auto; width: 85%; height: 120%; z-index: -2;
  background:
    radial-gradient(40% 45% at 72% 30%, rgb(244 144 122 / 0.55), transparent 70%),
    radial-gradient(45% 50% at 58% 48%, rgb(212 42 117 / 0.6), transparent 72%),
    radial-gradient(50% 55% at 40% 70%, rgb(106 63 160 / 0.6), transparent 75%);
  filter: blur(10px);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__aube { animation: derive 22s ease-in-out infinite alternate; }
}
@keyframes derive { to { transform: translate3d(-4%, 3%, 0) scale(1.06); } }
.hero__trame, .tete-page__trame, .appel__trame {
  position: absolute; inset: 0; z-index: -1; background: var(--trame);
  -webkit-mask-image: linear-gradient(105deg, transparent 30%, #000 75%);
  mask-image: linear-gradient(105deg, transparent 30%, #000 75%);
  opacity: 0.7; pointer-events: none;
}
/* Les coureurs de l'affiche, en trame claire derrière le texte de gauche. */
.hero__coureurs {
  position: absolute; z-index: -1; pointer-events: none;
  left: max(0rem, calc(50% - 44rem)); bottom: 0; width: min(46rem, 62%); height: 100%;
  background: url("/assets/img/coureurs-affiche.webp") no-repeat left bottom / contain;
  opacity: 0.13;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 18%);
  mask-image: linear-gradient(to top, transparent 0, #000 18%);
}
@media (max-width: 900px) { .hero__coureurs { top: 4rem; bottom: auto; left: auto; right: -12%; width: 95%; height: 38rem; background-position: right top; opacity: 0.1; } }
.hero__rang { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero__dates { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; }
@media (max-width: 480px) { .hero__dates .hexa { --taille: 4.2rem; } .hero__annee { font-size: 2rem; margin-left: 0.6rem; } .hero__annee small { font-size: 0.72rem; } }
.hexa--decale { margin-top: 2.4rem; margin-left: -0.6rem; background: #b52468; }
.hero__annee { margin-left: 1rem; font-size: 2.6rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1; display: grid; gap: 0.5rem; }
.hero__annee small { font-size: 0.9rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--doux); }
.hero__titre { margin-bottom: 1.6rem; }
.hero__accroche { max-width: 34rem; font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--doux); line-height: 1.55; }
.hero__accroche strong { display: block; margin-top: 0.4em; color: #fff; font-weight: 500; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.hero__formats { display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; list-style: none; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--filet); color: var(--doux); }
.hero__formats b { font-size: 1.7rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.hero__formats span { color: var(--magenta-vif); font-weight: 500; }
.hero__affiche { margin: 0; justify-self: center; width: min(100%, 25rem); }
.hero__affiche img {
  border-radius: 10px; transform: rotate(2.5deg);
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.75), 0 10px 25px -10px rgb(212 42 117 / 0.35);
  /* Même courbe à l'aller et au retour : l'affiche se redresse et revient sans à-coup. */
  transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 700ms cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .hero__affiche:hover img {
    transform: translateY(-6px) rotate(0deg) scale(1.01);
    box-shadow: 0 44px 70px -26px rgb(0 0 0 / 0.8), 0 18px 36px -14px rgb(212 42 117 / 0.45);
  }
}
.hero__affiche figcaption { margin-top: 1rem; text-align: center; font-size: 0.85rem; color: var(--doux); letter-spacing: 0.08em; text-transform: uppercase; }

/* Le seul moment chorégraphié : l'arrivée de l'affiche et du nom. */
@media (prefers-reduced-motion: no-preference) {
  .hero__affiche { animation: affiche 1.4s var(--sortie) backwards 0.15s; }
  .logotype--hero > span { animation: lettres 1.1s var(--sortie) both; }
  .logotype--hero .logotype__de { animation-delay: 0.12s; }
  .logotype--hero .logotype__pignan { animation-delay: 0.2s; }
  .hero__dates .hexa { animation: hexa 0.9s var(--sortie) both; }
  .hero__dates .hexa--decale { animation-delay: 0.1s; }
}
@keyframes affiche { from { transform: translateY(30px) rotate(4.5deg); filter: blur(6px); } }
@keyframes lettres { from { letter-spacing: 0.3em; filter: blur(8px); } }
@keyframes hexa { from { transform: scale(0.6) rotate(-30deg); } }

@media (max-width: 860px) {
  .hero__rang { grid-template-columns: 1fr; }
  .hero__affiche { width: min(78%, 21rem); }
  .hero__aube { width: 130%; inset: -10% -40% auto auto; }
}

/* ---------------------------------------------------------- Sections */

.section { padding-block: clamp(4rem, 8vw, 7rem); position: relative; }
.section--serre { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section__tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__chapeau { max-width: 30rem; color: var(--doux); margin: 0; }
.titre-section { font-size: clamp(2rem, 4.4vw, 3.3rem); font-weight: 300; letter-spacing: -0.01em; line-height: 1.05; margin-bottom: 0.5em; }
.section__tete .titre-section { margin-bottom: 0; }
.titre-bloc { font-size: 1.55rem; font-weight: 500; margin: 2.6rem 0 1rem; }
.meta { color: var(--magenta-vif); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.92rem; margin: 1rem 0 0; }
.note { font-size: 0.95rem; color: var(--doux); }

/* ------------------------------------------------- Grille des départs */

.grille-departs { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.jour__tete { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1rem; }
.jour__tete .hexa { --taille: 4.2rem; }
.jour__titre { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 500; display: grid; gap: 0.2rem; }
.jour__titre span { font-size: 0.95rem; font-weight: 400; color: var(--doux); }
.departs { list-style: none; border-top: 1px solid var(--filet); }
.depart { border-bottom: 1px solid var(--filet); }
.depart a {
  position: relative; isolation: isolate; display: grid; align-items: center; gap: 1.2rem;
  grid-template-columns: 4.5rem 8.5rem minmax(0, 1fr) 8rem 6.5rem 2rem;
  padding: 1.15rem 1rem; text-decoration: none; overflow: hidden; border-radius: 6px;
}
.depart a::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--aube-sombre);
  clip-path: inset(0 100% 0 0); transition: clip-path 0.55s var(--sortie);
}
.depart a:hover::before, .depart a:focus-visible::before { clip-path: inset(0 0 0 0); }
.depart__heure { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--doux); }
.depart__km { font-size: 1rem; font-weight: 500; color: var(--doux); white-space: nowrap; }
.depart__km b { font-size: 3rem; font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 0.9; margin-right: 0.15em; }
.depart__km i { font-style: normal; font-weight: 300; }
.depart__nom { font-size: 1.35rem; font-weight: 500; display: grid; line-height: 1.2; }
.depart__nom small { font-size: 0.92rem; font-weight: 400; color: var(--doux); margin-top: 0.2rem; }
.depart__dplus, .depart__prix { color: var(--doux); font-variant-numeric: tabular-nums; }
.depart__prix { text-align: right; font-weight: 600; color: #fff; }
.depart__fleche { justify-self: end; transition: transform 0.35s var(--sortie); }
.depart a:hover .depart__fleche { transform: translateX(4px); }
.depart a:hover .depart__heure, .depart a:hover .depart__dplus, .depart a:hover small, .depart a:hover .depart__km { color: #fff; }
.depart--nuit .depart__heure::after { content: ''; display: inline-block; width: 0.5rem; height: 0.5rem; margin-left: 0.4rem; border-radius: 50%; background: var(--magenta-vif); vertical-align: middle; box-shadow: 0 0 0 3px rgb(255 91 161 / 0.2); }

.defi {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.5rem 2rem;
  padding: 1.4rem 1.8rem; border-radius: 26px; text-decoration: none;
  background: var(--magenta); color: #fff; box-shadow: 0 20px 40px -24px rgb(212 42 117 / 0.9);
  transition: transform 0.4s var(--sortie), background-color 0.3s;
}
.defi:hover { background: #e2337f; }
@media (hover: hover) and (pointer: fine) { .defi:hover { transform: translateY(-2px); } }
.defi__titre { font-size: 1.35rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.defi__calcul b { font-size: 1.7rem; font-weight: 800; }
.defi__prix { font-weight: 500; }
.defi svg { width: 1.4rem; height: 1.4rem; }

@media (max-width: 860px) {
  .depart a { grid-template-columns: 6.6rem minmax(0, 1fr) auto; grid-template-areas: 'km nom prix' 'km infos fleche'; gap: 0.15rem 1rem; padding: 1rem 0.5rem; }
  .depart__km { grid-area: km; }
  .depart__km b { font-size: 2.5rem; }
  .depart__nom { grid-area: nom; font-size: 1.2rem; }
  .depart__fleche { grid-area: fleche; }
  .depart__heure, .depart__dplus { grid-area: infos; font-size: 0.92rem; }
  .depart__heure { justify-self: start; }
  .depart__dplus { justify-self: start; margin-left: 4.2rem; }
  .depart__prix { grid-area: prix; justify-self: end; font-size: 0.92rem; white-space: nowrap; }
  .defi { grid-template-columns: 1fr auto; padding: 1.3rem 1.4rem; }
  .defi__calcul, .defi__prix { grid-column: 1; }
  .defi svg { grid-row: 1 / span 3; grid-column: 2; }
}
@media (max-width: 400px) {
  .depart a { grid-template-columns: 5.4rem minmax(0, 1fr) auto; }
  .depart__km b { font-size: 2.1rem; }
}

/* ------------------------------------------------------ Compte à rebours */

.rebours { position: relative; isolation: isolate; background: var(--aube-sombre); padding-block: clamp(3rem, 6vw, 4.5rem); overflow: hidden; }
.rebours::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--trame); opacity: 0.55; -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%); mask-image: linear-gradient(90deg, #000, transparent 70%); }
.rebours__rang { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; }
.rebours__titre { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 300; max-width: 22ch; margin-bottom: 0.6rem; }
.rebours__texte { color: #f0dcea; margin: 0; max-width: 32rem; }
.rebours__cases { display: flex; gap: 0.6rem; list-style: none; }
.hexa--rebours { --taille: clamp(4.2rem, 9vw, 6.2rem); background: var(--nuit); }
.rebours__case:nth-child(even) { margin-top: 1.6rem; }

/* ----------------------------------------------------------- Chiffres */

.chiffres { padding-block: clamp(3rem, 6vw, 4.5rem); border-bottom: 1px solid var(--filet); }
.chiffres__liste {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 0.6rem 0; font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 300; text-align: center;
}
.chiffres__liste li { display: inline-flex; align-items: baseline; gap: 0.35em; }
.chiffres__liste li + li::before { content: ''; width: 0.5em; height: 0.56em; margin-inline: 1.1em; background: var(--magenta); clip-path: var(--hexa); align-self: center; }
.chiffres__liste b { font-size: 2em; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.chiffres__liste span { color: var(--doux); }
@media (max-width: 600px) {
  .chiffres__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; text-align: left; font-size: 1.05rem; }
  .chiffres__liste li { display: grid; gap: 0.1rem; }
  .chiffres__liste li + li::before { display: none; }
}

/* ---------------------------------------------------------- Solidaire */

.solidaire { background: linear-gradient(180deg, var(--nuit) 0%, var(--nuit-2) 100%); }
.solidaire__rang { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.solidaire__texte p { color: var(--doux); max-width: 36rem; }
.solidaire__texte strong { color: #fff; }
.solidaire__assos { display: grid; border-top: 1px solid var(--filet); }
.asso { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.2rem 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--filet); }
.asso svg { grid-row: span 2; width: 1.7rem; height: 1.7rem; color: var(--magenta-vif); margin-top: 0.15rem; }
.asso h3, .asso h4 { font-size: 1.35rem; font-weight: 500; }
.asso p { margin: 0; color: var(--doux); }
@media (max-width: 860px) { .solidaire__rang { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- Terrain */

.terrain { border-top: 1px solid var(--filet); }
.terrain__rang { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1.5rem 4rem; align-items: start; }
.terrain__texte p { color: var(--doux); max-width: 40rem; }
.terrain__texte p:first-child { color: var(--texte); font-size: 1.15rem; }
@media (max-width: 860px) { .terrain__rang { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ Pointage (QR) */

.pointage { border-top: 1px solid var(--filet); }
.pointage__rang { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2rem 4rem; align-items: start; }
.pointage__chapeau { color: var(--doux); max-width: 32rem; }
.pointage__etapes h3 { font-size: 1.15rem; font-weight: 500; margin: 0.15rem 0 0.3rem; }
.pointage__etapes p { margin: 0; color: var(--doux); }
.pointage__cas { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 2.5rem; margin: 2.5rem 0 0; }
.pointage__cas > div { padding: 1.2rem 0 0.4rem; border-top: 1px solid var(--filet-fort); }
.pointage__cas dt { font-weight: 500; font-size: 1.1rem; margin-bottom: 0.4rem; }
.pointage__cas dd { margin: 0; color: var(--doux); }
@media (max-width: 860px) { .pointage__rang { grid-template-columns: 1fr; } }

/* ----------------------------------------------- Listes à filets */

.pratique__liste, .missions, .infos { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 2.5rem; }
.pratique__liste li, .missions li, .info { padding: 1.6rem 0 0.6rem; border-top: 1px solid var(--filet-fort); }
.pratique__liste svg, .missions svg, .info svg { width: 1.8rem; height: 1.8rem; color: var(--magenta-vif); margin-bottom: 1rem; }
.pratique__liste h3, .missions h3, .info h3 { font-size: 1.25rem; font-weight: 500; margin-bottom: 0.5rem; }
.pratique__liste p, .missions p, .info p { color: var(--doux); font-size: 1rem; }

/* -------------------------------------------------------- Partenaires */

.partenaires { border-top: 1px solid var(--filet); }
.partenaires__rang { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; }
.partenaires__rang .titre-section { margin: 0; }
.partenaires__texte { color: var(--doux); margin: 0; }
.partenaires__rang .lien-fleche { margin-top: 1rem; }
.partenaires__attente { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; margin-top: 3rem; }
.partenaires__attente li { display: grid; place-items: center; aspect-ratio: 2; border: 1px dashed var(--filet-fort); border-radius: 10px; color: var(--doux); font-size: 0.85rem; text-align: center; padding: 0.5rem; }
.partenaires__logos { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem; margin-top: 3rem; }
.partenaires__logos li { display: grid; place-items: center; background: #fff; border-radius: 10px; padding: 1rem; aspect-ratio: 2; }
.partenaires__logos a { display: grid; place-items: center; width: 100%; height: 100%; }
.partenaires__logos img { max-height: 3.5rem; width: auto; object-fit: contain; }
@media (max-width: 760px) { .partenaires__rang { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Contact */

.contact { background: var(--nuit-2); }
.contact__rang { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem 4rem; align-items: start; }
.contact__rang > div p { color: var(--doux); max-width: 30rem; }
.contact__liste { list-style: none; display: grid; border-top: 1px solid var(--filet); }
.contact__liste a { display: flex; align-items: center; gap: 1.1rem; padding: 1.15rem 0.25rem; border-bottom: 1px solid var(--filet); text-decoration: none; transition: transform 0.35s var(--sortie), color 0.2s; }
@media (hover: hover) and (pointer: fine) { .contact__liste a:hover { transform: translateX(0.6rem); } }
.contact__liste svg { width: 1.6rem; height: 1.6rem; color: var(--magenta-vif); }
.contact__liste span { display: grid; font-size: 1.1rem; overflow-wrap: anywhere; }
.contact__liste small { font-size: 0.82rem; color: var(--doux); text-transform: uppercase; letter-spacing: 0.1em; }
@media (max-width: 860px) { .contact__rang { grid-template-columns: 1fr; } }

/* -------------------------------------------------- Appel à s'inscrire */

.appel { position: relative; isolation: isolate; overflow: hidden; background: var(--aube-sombre); padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.appel__trame { -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 90%); mask-image: linear-gradient(90deg, transparent 20%, #000 90%); }
.appel__rang { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; }
.appel__titre { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 300; margin-bottom: 0.6rem; }
.appel__texte { margin: 0; max-width: 36rem; color: #f0dcea; }
.appel__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* ------------------------------------------------------- Tête de page */

.tete-page, .tete-course { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--filet); }
.tete-page::before, .tete-course::before {
  content: ''; position: absolute; inset: -40% -20% auto 35%; height: 160%; z-index: -2;
  background: radial-gradient(45% 45% at 60% 40%, rgb(212 42 117 / 0.45), transparent 70%), radial-gradient(40% 40% at 80% 25%, rgb(244 144 122 / 0.3), transparent 70%), radial-gradient(50% 50% at 40% 60%, rgb(106 63 160 / 0.5), transparent 75%);
}
.titre-page { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 300; letter-spacing: -0.01em; line-height: 1; max-width: 18ch; }
.titre-page__suite { display: block; font-size: 0.45em; font-weight: 500; color: var(--doux); margin-top: 0.5rem; letter-spacing: 0; }
.tete-page__chapeau { margin: 1.2rem 0 0; max-width: 40rem; font-size: 1.15rem; color: var(--doux); }
.ariane ol { display: flex; flex-wrap: wrap; gap: 0.3rem 0; list-style: none; font-size: 0.9rem; color: var(--doux); margin-bottom: 1.6rem; }
.ariane li + li::before { content: '/'; margin-inline: 0.6rem; opacity: 0.5; }
.ariane a { text-decoration: none; }
.ariane a:hover { color: #fff; text-decoration: underline; }
.tete-course__rang { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; }
.tete-course__km { margin: 0; display: grid; justify-items: end; line-height: 0.8; }
.tete-course__km b { font-size: clamp(7rem, 17vw, 13rem); font-weight: 800; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 2px rgb(255 255 255 / 0.55); }
.tete-course__km span { font-size: 2rem; font-weight: 300; text-transform: uppercase; letter-spacing: 0.3em; color: var(--magenta-vif); margin-top: 0.6rem; }
.tete-course--nuit::before { background: radial-gradient(45% 45% at 70% 40%, rgb(62 79 153 / 0.6), transparent 70%), radial-gradient(35% 35% at 80% 20%, rgb(212 42 117 / 0.35), transparent 70%); }
@media (max-width: 760px) {
  .tete-course__rang { grid-template-columns: 1fr; }
  .tete-course__km { position: absolute; right: var(--gouttiere); top: 4.5rem; opacity: 0.3; z-index: -1; }
  .tete-course__km span { display: none; }
}
@media (max-width: 480px) {
  .tete-course__km { display: none; }
}

/* ---------------------------------------------------------- Fiche course */

.fiche { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.fiche__corps { max-width: 44rem; }
.fiche__corps p, .fiche__corps li { color: #ddd7ec; }
.fiche__corps--seul { margin-top: 2.5rem; }
.faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 2rem; margin: 0 0 1rem; }
.fait { display: grid; align-content: start; grid-template-columns: 1.6rem 1fr; gap: 0.1rem 0.8rem; padding: 1rem 0; border-top: 1px solid var(--filet); }
.fait svg { grid-row: span 2; width: 1.4rem; height: 1.4rem; color: var(--magenta-vif); margin-top: 0.15rem; }
.fait dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--doux); }
.fait dd { margin: 0; font-weight: 500; }
.fiche__cote { position: sticky; top: 6.5rem; }
.carte-resume {
  display: grid; justify-items: start; gap: 0.3rem; padding: 1.8rem; border-radius: var(--rayon);
  background: var(--nuit-2); border: 1px solid var(--filet);
  box-shadow: 0 30px 50px -30px rgb(0 0 0 / 0.8);
}
.carte-resume .hexa { --taille: 3.6rem; margin-bottom: 0.8rem; }
.carte-resume__km { margin: 0; font-size: 1.3rem; color: var(--doux); }
.carte-resume__km b { font-size: 3.6rem; font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1; }
.carte-resume__nom { margin: 0; font-size: 1.4rem; font-weight: 500; }
.carte-resume__depart { color: var(--doux); margin: 0; }
.carte-resume__prix { margin: 0.8rem 0 1.2rem; color: var(--doux); }
.carte-resume__prix b { color: #fff; font-size: 1.6rem; font-weight: 700; }
.carte-resume .bouton { width: 100%; }
.carte-resume__lien { margin-top: 0.9rem; font-size: 0.95rem; color: var(--doux); }
@media (max-width: 960px) {
  .fiche { grid-template-columns: 1fr; }
  .fiche__cote { position: static; order: -1; display: none; }
}

.encart { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.3rem; align-items: start; padding: 1.4rem 1.5rem; border-radius: var(--rayon); background: var(--nuit-2); border: 1px dashed var(--filet-fort); margin: 1.8rem 0; }
.encart svg { width: 1.8rem; height: 1.8rem; color: var(--magenta-vif); }
.encart h3, .encart h2 { font-size: 1.2rem; font-weight: 500; margin-bottom: 0.3rem; }
.encart p { margin: 0; color: var(--doux); }
.encart--appel { grid-template-columns: auto 1fr auto; align-items: center; border-style: solid; margin-top: 3rem; background: var(--nuit-2); }
.encart--appel h2 { font-size: 1.5rem; }
@media (max-width: 760px) { .encart--appel { grid-template-columns: auto 1fr; } .encart--appel .bouton { grid-column: 1 / -1; justify-self: start; } }

.tarifs { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tarifs th, .tarifs td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--filet); text-align: left; vertical-align: bottom; }
.tarifs thead th { font-size: 0.85rem; font-weight: 500; color: var(--doux); line-height: 1.35; }
.tarifs td { font-size: 1.5rem; font-weight: 700; }
.tarifs__meilleur { color: var(--magenta-vif); }
.tarifs--complet td { font-size: 1.15rem; font-weight: 600; }
.tarifs--complet tbody th { font-weight: 500; white-space: nowrap; }
.tarifs--complet tbody th span { color: var(--doux); font-weight: 400; margin-left: 0.3rem; }
.tarifs--complet tbody th a { text-decoration: none; }
.tarifs--complet tbody th a:hover { text-decoration: underline; }
.tarifs--complet td:nth-child(2) { color: var(--magenta-vif); }
.tableau-defile { overflow-x: auto; }
.tableau-defile .tarifs { min-width: 40rem; }
@media (max-width: 560px) { .tarifs th, .tarifs td { padding: 0.75rem 0.5rem; } .tarifs td { font-size: 1.25rem; } }

.liste-coches, .liste-puces, .liste-etapes { list-style: none; display: grid; gap: 0.7rem; margin-bottom: 1rem; }
.liste-coches li, .liste-puces li { position: relative; padding-left: 1.8rem; }
.liste-coches li::before, .liste-puces li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 0.7rem; height: 0.78rem; background: var(--magenta); clip-path: var(--hexa); }
.liste-puces li::before { background: var(--doux); width: 0.5rem; height: 0.56rem; top: 0.6em; }
.liste-etapes { counter-reset: etape; }
.liste-etapes li { counter-increment: etape; display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--filet); }
.liste-etapes li::before { content: counter(etape); display: grid; place-items: center; width: 2.4rem; height: 2.7rem; clip-path: var(--hexa); background: var(--magenta); font-weight: 800; color: #fff; }

.voisines { border-top: 1px solid var(--filet); }
.voisines__rang { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.voisine { display: grid; gap: 0.2rem; padding: 1.2rem 1.4rem; border-radius: var(--rayon); border: 1px solid var(--filet); text-decoration: none; transition: border-color 0.3s, background-color 0.3s; }
.voisine:hover { border-color: var(--magenta-vif); background: var(--nuit-2); }
.voisine small { color: var(--doux); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; }
.voisine span { font-size: 1.2rem; font-weight: 500; }
.voisine--suiv { text-align: right; }

/* --------------------------------------------------------- Picholines */

.picholines { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; }
.picholine { padding-top: 1.4rem; border-top: 3px solid var(--couleur); }
.picholine--verte { --couleur: #6fcf8e; }
.picholine--bleue { --couleur: #6ea8ff; }
.picholine--rouge { --couleur: #ff6b6b; }
.picholine__heure { font-weight: 600; color: var(--couleur); margin: 0 0 0.3rem; }
.picholine h2 { font-size: 1.5rem; font-weight: 500; }
.picholine__distance { font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; margin: 0.4rem 0; line-height: 1; }
.picholine p { color: var(--doux); }
.picholine p span { white-space: nowrap; }
.picholine__format { font-size: 0.95rem; }
@media (max-width: 760px) { .picholines { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ----------------------------------------------------------------- Défi */

.defi-etapes { list-style: none; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.defi-etapes a { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1.2rem; align-items: center; padding: 1.4rem 1.6rem 1.4rem 1.4rem; border-radius: var(--rayon); background: var(--nuit-2); border: 1px solid var(--filet); text-decoration: none; transition: border-color 0.3s; }
.defi-etapes a:hover { border-color: var(--magenta-vif); }
.defi-etapes .hexa { grid-row: span 2; --taille: 4rem; }
.defi-etapes__km b { font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; }
.defi-etapes a > span:last-child { color: var(--doux); }
.defi-etapes__plus { font-size: 3rem; font-weight: 200; color: var(--magenta-vif); }

/* ------------------------------------------------------------ Programme */

.programme { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 4rem; }
.horaire { list-style: none; margin-top: 1.2rem; }
.horaire__ligne { position: relative; display: grid; grid-template-columns: 4.2rem 1fr; gap: 1.2rem; padding: 0 0 1.5rem; }
.horaire__ligne::before { content: ''; position: absolute; left: 5.05rem; top: 0.55rem; bottom: -0.4rem; width: 1px; background: var(--filet-fort); }
.horaire__ligne:last-child::before { display: none; }
.horaire__ligne::after { content: ''; position: absolute; left: calc(5.05rem - 4px); top: 0.4rem; width: 9px; height: 10px; clip-path: var(--hexa); background: var(--doux); }
.horaire__ligne--depart::after { background: var(--magenta-vif); width: 13px; height: 14px; left: calc(5.05rem - 6px); top: 0.3rem; }
.horaire time { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; padding-right: 1.4rem; }
.horaire > li > div { padding-left: 1.4rem; }
.horaire__quoi { margin: 0; font-weight: 500; font-size: 1.1rem; }
.horaire__quoi a { text-decoration-color: var(--magenta-vif); }
.horaire__detail { margin: 0.2rem 0 0; color: var(--doux); font-size: 0.97rem; }
@media (max-width: 860px) { .programme { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ FAQ */

.faq { background: var(--nuit-2); }
.faq__rang { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem 4rem; align-items: start; }
.faq__rang > div p { color: var(--doux); }
.faq__liste { border-top: 1px solid var(--filet); }
.question { border-bottom: 1px solid var(--filet); }
.question summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 1.2rem 0; font-size: 1.15rem; font-weight: 500;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after { content: '+'; font-size: 1.6rem; font-weight: 300; color: var(--magenta-vif); transition: transform 0.35s var(--sortie); flex: none; }
.question[open] summary::after { transform: rotate(45deg); }
.question p { color: var(--doux); padding-bottom: 1.2rem; margin: 0; max-width: 60ch; }
@media (max-width: 860px) { .faq__rang { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Règlement */

.reglement { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.reglement__sommaire { position: sticky; top: 6.5rem; max-height: calc(100vh - 8rem); overflow-y: auto; padding-right: 0.5rem; }
.reglement__etiquette { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--doux); margin-bottom: 0.8rem; }
.reglement__sommaire ol { list-style: none; counter-reset: art; display: grid; gap: 0.15rem; margin-bottom: 1.5rem; font-size: 0.95rem; }
.reglement__sommaire li { counter-increment: art; }
.reglement__sommaire ol a { display: grid; grid-template-columns: 1.8rem 1fr; text-decoration: none; color: var(--doux); padding: 0.25rem 0; }
.reglement__sommaire ol a::before { content: counter(art); font-variant-numeric: tabular-nums; color: var(--magenta-vif); font-weight: 600; }
.reglement__sommaire ol a:hover { color: #fff; }
.reglement__texte { max-width: 46rem; }
.article { padding-block: 2rem; border-top: 1px solid var(--filet); }
.article:first-child { border-top: 0; padding-top: 0; }
.article h2 { font-size: 1.6rem; font-weight: 500; margin-bottom: 1rem; }
.article h2 span { color: var(--magenta-vif); font-weight: 800; margin-right: 0.5em; font-variant-numeric: tabular-nums; }
.article h3 { font-size: 1.15rem; font-weight: 600; margin: 1.4rem 0 0.6rem; }
.article p, .article li { color: #ddd7ec; }
.article ul { list-style: none; display: grid; gap: 0.6rem; margin-bottom: 1rem; }
.article ul li { position: relative; padding-left: 1.5rem; }
.article ul li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 0.5rem; height: 0.56rem; background: var(--magenta); clip-path: var(--hexa); }
.article .tableau-defile { margin-bottom: 1rem; }
@media (max-width: 900px) {
  .reglement { grid-template-columns: 1fr; }
  .reglement__sommaire { position: static; max-height: none; border-bottom: 1px solid var(--filet); padding-bottom: 1.5rem; }
  .reglement__sommaire ol { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
}

/* ------------------------------------------------------------- Agenda */

.hero__actions--seul { margin: 0 0 2rem; }
.carte-resume__agenda { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.9rem; font-size: 0.95rem; font-weight: 600; text-decoration: none; color: #fff; }
.carte-resume__agenda svg { width: 1.1rem; height: 1.1rem; color: var(--magenta-vif); }
.carte-resume__agenda:hover { text-decoration: underline; }

/* ------------------------------------------------------------ Archives */

.archives { list-style: none; border-top: 1px solid var(--filet); margin-bottom: 1.5rem; }
.archive { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: 1rem 1.5rem; align-items: center; padding: 1.8rem 0; border-bottom: 1px solid var(--filet); }
.archive > svg { width: 2rem; height: 2rem; color: var(--magenta-vif); }
.archive h2 { font-size: 1.6rem; font-weight: 500; margin-bottom: 0.3rem; }
.archive p { margin: 0; color: var(--doux); }
.archive__attente { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.5rem 1rem; border: 1px dashed var(--filet-fort); border-radius: 999px; white-space: nowrap; }
.titre-section--archives { margin-top: 3.5rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.editions { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.edition { display: grid; gap: 0.3rem; text-decoration: none; }
.edition img { border-radius: 8px; box-shadow: 0 20px 40px -24px rgb(0 0 0 / 0.8); transition: transform 450ms var(--sortie); margin-bottom: 0.6rem; }
@media (hover: hover) and (pointer: fine) { .edition:hover img { transform: translateY(-4px); } }
.edition__annee { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em; }
.edition__dates { color: var(--doux); font-size: 0.95rem; }
.edition-archive { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.edition-archive__affiche { margin: 0; }
.edition-archive__affiche img { border-radius: 10px; box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.8); }
.edition-archive .titre-bloc:first-child { margin-top: 0; }
@media (max-width: 760px) { .edition-archive { grid-template-columns: 1fr; } .edition-archive__affiche { max-width: 18rem; } }
@media (max-width: 640px) { .archive { grid-template-columns: 2.6rem 1fr; } .archive > :last-child { grid-column: 2; justify-self: start; } }

/* --------------------------------------------------------------- Légal */

.texte-legal h2 { font-size: 1.4rem; font-weight: 500; margin: 2.2rem 0 0.7rem; }
.texte-legal h2:first-child { margin-top: 0; }
.a-completer { background: rgb(255 91 161 / 0.18); color: #ffd1e5; padding: 0.05em 0.35em; border-radius: 4px; }

/* ---------------------------------------------------------------- Pied */

.pied { background: #0a0819; border-top: 1px solid var(--filet); padding-top: clamp(3.5rem, 7vw, 5rem); }
.pied__haut { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding-bottom: 3rem; }
.pied__marque > p:first-of-type { display: flex; align-items: center; gap: 0.3rem; margin: 1.5rem 0 1rem; }
.pied__marque > p:first-of-type > span:last-child { margin-left: 0.7rem; color: var(--doux); }
.pied__asso { color: var(--doux); font-size: 0.95rem; max-width: 26rem; }
.pied__col h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--doux); font-weight: 600; margin-bottom: 1rem; }
.pied__col ul { list-style: none; display: grid; gap: 0.45rem; margin-bottom: 1.4rem; }
.pied__col a { text-decoration: none; }
.pied__col a:hover { text-decoration: underline; }
.pied__col ul span { color: var(--doux); font-size: 0.9rem; }
.pied__reseaux a { display: inline-flex; align-items: center; gap: 0.6rem; }
.pied__reseaux svg { color: var(--magenta-vif); }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; border-top: 1px solid var(--filet); font-size: 0.9rem; color: var(--doux); }
.pied__bas p { margin: 0; }
.pied__bas ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; }
.pied__bas a { text-decoration: none; }
.pied__bas a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 960px) { .pied__haut { grid-template-columns: 1fr 1fr; } .pied__marque { grid-column: 1 / -1; } }
@media (max-width: 560px) { .pied__haut { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Mouvement
   Tout est visible sans JS et pour qui préfère moins d'animations : le
   script ne pose data-anim que sur les blocs encore sous la ligne de
   flottaison, puis data-visible quand ils entrent à l'écran (une fois). */

@media (prefers-reduced-motion: no-preference) {
  /* Titres : dévoilés de haut en bas, comme une affiche qu'on déroule. */
  [data-anim='titre'] { clip-path: inset(0 0 100% 0); }
  [data-anim='titre'][data-visible] { clip-path: inset(0 0 0 0); transition: clip-path 700ms var(--en-mouvement); }

  /* Listes : les éléments arrivent l'un après l'autre (60 ms, plafonné). */
  [data-anim='liste'] > * { opacity: 0; transform: translateY(12px); }
  [data-anim='liste'][data-visible] > * {
    opacity: 1; transform: none;
    transition: opacity 400ms var(--sortie), transform 500ms var(--sortie);
    transition-delay: calc(min(var(--i, 0), 8) * 60ms);
  }

  /* Frise du programme : le fil se trace, les jalons hexagonaux éclosent. */
  [data-anim='frise'] .horaire__ligne::before { transform: scaleY(0); transform-origin: top; }
  [data-anim='frise'] .horaire__ligne::after { transform: scale(0.4); opacity: 0; }
  [data-anim='frise'] .horaire__ligne > * { opacity: 0; transform: translateX(-8px); }
  [data-anim='frise'][data-visible] .horaire__ligne::before { transform: none; transition: transform 500ms var(--sortie); transition-delay: calc(var(--i, 0) * 90ms + 120ms); }
  [data-anim='frise'][data-visible] .horaire__ligne::after { transform: none; opacity: 1; transition: transform 400ms var(--sortie), opacity 200ms ease; transition-delay: calc(var(--i, 0) * 90ms); }
  [data-anim='frise'][data-visible] .horaire__ligne > * { opacity: 1; transform: none; transition: opacity 400ms var(--sortie), transform 450ms var(--sortie); transition-delay: calc(var(--i, 0) * 90ms); }

  /* Défi : la pastille glisse en place après la grille. */
  [data-anim='defi'] { opacity: 0; transform: translateY(16px) scale(0.98); }
  [data-anim='defi'][data-visible] { opacity: 1; transform: none; transition: opacity 450ms var(--sortie) 150ms, transform 550ms var(--sortie) 150ms, background-color 0.3s; }
}

@media print {
  .entete, .pied, .appel, .hero__aube, .hero__trame, .bouton { display: none !important; }
  body { background: #fff; color: #000; }
}