/* BACKYARDRUN, feuille de style unique.
   Direction artistique du dossier de synthèse : noir obsidienne, cartes bitume,
   bordures fines, et le violet en accent seulement. Les titres sont blancs,
   la couleur sert la donnée, les boutons et les repères. Underground,
   brutaliste, futuriste, sans saturer l'écran de violet. */

@font-face {
  font-family: 'Unbounded';
  src: url('../fonts/unbounded-700.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans-400.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/chakra-petch-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/chakra-petch-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-italic.woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --nuit: #08080a;
  --carte: #111115;
  --carte-2: #16161c;
  --trait: #2a2a35;
  --encre: #ffffff;
  --gris: #8a8a93;
  --gris-2: #6b7280;
  --accent: #bdafdf;
  --accent-clair: #bdafdf;
  --accent-voile: rgba(189, 175, 223, .09);
  --sur-accent: #08080a;
  --rayon: 2px;
  --rayon-petit: 2px;
  --marge: clamp(20px, 5vw, 72px);
  --sortie: cubic-bezier(.16, 1, .3, 1);
  --display: 'Unbounded', system-ui, sans-serif;
  --corps: 'DM Sans', system-ui, -apple-system, sans-serif;
  --data: 'Chakra Petch', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--nuit);
  color: var(--encre);
  font-family: var(--corps);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure { margin: 0; }
:focus-visible { outline: 2px solid var(--accent-clair); outline-offset: 3px; }

/* ---------- Les trois voix : le titre, la donnée, le corps ---------- */

.display {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -.025em;
}
.data {
  font-family: var(--data);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.corps { color: var(--gris); font-size: clamp(14px, 1.1vw, 15.5px); max-width: 58ch; }

/* Le logotype : la marque écrite en toutes lettres, dans la police du logo. */
.logotype {
  font-family: 'Plus Jakarta Sans', var(--corps);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.logotype sup {
  font-size: max(.38em, 12px);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  vertical-align: super;
  margin-left: .12em;
  color: var(--accent-clair);
}

/* Le surtitre : du texte, sans trait devant. */
.surtitre {
  display: inline-block;
  font-family: var(--data);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-clair);
}

/* ---------- La lueur, unique et discrète ---------- */

.halo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(46% 42% at 14% 4%, var(--accent-voile), transparent 62%);
  z-index: 0;
}

/* ---------- Le rideau d'ouverture : le logo, seul, une seconde ---------- */

.rideau {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--nuit);
  display: grid;
  place-items: center;
  animation: rideauSort .8s 1.15s var(--sortie) forwards;
}
.rideau img {
  width: min(74vw, 640px);
  height: auto;
  animation: logoEntre 1.1s var(--sortie) both;
}
@keyframes rideauSort { to { opacity: 0; visibility: hidden; } }
/* Aucune mise à l'échelle sur le logo : un scale au millième près se voit,
   et une transition qui déforme la marque est pire que pas de transition.
   Il monte et il apparaît, rien d'autre. */
@keyframes logoEntre {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Le logo ne se déforme jamais, où qu'il soit ---------- */

.nav-marque img,
.rideau img,
.pied .marque {
  object-fit: contain;
  max-width: none;
  flex: 0 0 auto;
}
.nav-marque img { aspect-ratio: 579 / 44; }
.rideau img { aspect-ratio: 2367 / 180; }
.pied .marque { aspect-ratio: 2800 / 213; }

/* ---------- La navigation ---------- */

.nav {
  position: fixed;
  z-index: 50;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 28px);
  padding: 9px 9px 9px 18px;
  border-radius: 3px;
  background: rgba(12, 12, 15, .86);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--trait);
  max-width: calc(100vw - 24px);
  opacity: 0;
  animation: parait .9s .4s var(--sortie) forwards;
}
@keyframes parait { to { opacity: 1; } }

.nav-marque img { height: 19px; width: auto; }
.nav-liens { display: flex; gap: clamp(12px, 1.6vw, 24px); }
.nav-liens a {
  font-family: var(--data);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
  transition: color .3s;
  white-space: nowrap;
}
.nav-liens a:hover { color: var(--encre); }

/* ---------- Le bouton ---------- */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px 11px 20px;
  border-radius: 2px;
  background: var(--accent);
  color: var(--sur-accent);
  font-family: var(--data);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: transform .4s var(--sortie), background .3s;
  white-space: nowrap;
}
.cta:hover { transform: translateY(-2px); background: #cec3e8; }
.cta .pastille {
  width: 22px; height: 22px;
  border-radius: 2px;
  background: rgba(8, 8, 10, .14);
  display: grid;
  place-items: center;
  font-size: 12px;
  transition: transform .45s var(--sortie);
}
.cta:hover .pastille { transform: translateX(3px); }
.cta-grand { padding: 14px 14px 14px 28px; font-size: 12.5px; }
.cta-grand .pastille { width: 30px; height: 30px; }

/* ---------- Le hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 130px var(--marge) clamp(40px, 6vh, 76px);
  overflow: hidden;
}
.hero-fond { position: absolute; inset: 0; z-index: 0; }
.hero-fond img { width: 100%; height: 100%; object-fit: cover; opacity: .6; }
/* Une trace de couleur sur la photo, très en retrait. */
.teinte {
  position: absolute; inset: 0;
  background: var(--accent);
  mix-blend-mode: color;
  opacity: .16;
  pointer-events: none;
}
.voile {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--nuit) 3%, rgba(8, 8, 10, .6) 46%, rgba(8, 8, 10, .82));
  pointer-events: none;
}
.hero-corps { position: relative; z-index: 2; width: 100%; }
.hero h1 { font-size: clamp(30px, 5.6vw, 82px); max-width: 16ch; }
.hero-faits {
  font-family: var(--data);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gris);
  font-size: clamp(12px, 1.15vw, 13.5px);
  letter-spacing: .14em;
  margin-top: clamp(20px, 2.6vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.hero-faits span { display: inline-flex; align-items: center; }
.hero-faits span:first-child { color: var(--accent-clair); }
.hero-faits span:not(:last-child) { padding-right: 4px; }
.hero-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 60px);
  margin-top: clamp(26px, 3.4vw, 44px);
}
.hero .corps { margin-bottom: 24px; }

/* La télémétrie : un seul bloc, comme un tableau de bord de course.
   Elle ajoute, elle ne décompte jamais. */
.compteurs {
  background: linear-gradient(180deg, rgba(22, 22, 28, .96), rgba(11, 11, 14, .96));
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: clamp(16px, 1.6vw, 22px) clamp(20px, 2vw, 26px);
  min-width: min(100%, 320px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.compteurs-tete {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--data);
  font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gris-2);
  margin-bottom: 14px;
}
.pouls {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent-clair);
  box-shadow: 0 0 0 0 rgba(180, 151, 255, .6);
  animation: pouls 2.4s var(--sortie) infinite;
}
@keyframes pouls {
  0% { box-shadow: 0 0 0 0 rgba(180, 151, 255, .55); }
  70% { box-shadow: 0 0 0 9px rgba(180, 151, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(180, 151, 255, 0); }
}
.compteurs-corps { display: flex; align-items: flex-end; gap: clamp(20px, 2.6vw, 34px); }
.mesure { display: flex; flex-direction: column; }
.mesure b {
  font-family: var(--data);
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 58px);
  line-height: .92;
  color: var(--encre);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 4px;
}
.mesure b i {
  font-style: normal;
  font-size: max(.32em, 12px);
  color: var(--accent-clair);
  letter-spacing: .1em;
}
/* Le sélecteur direct : sans le chevron, cette règle rattrapait aussi le
   chiffre à l'intérieur du b et l'écrasait à 9,5 px. */
.mesure > span {
  font-family: var(--data);
  font-size: 12px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gris-2);
  margin-top: 8px;
}
.mesure b > span { font-size: inherit; color: inherit; letter-spacing: inherit; }
/* La barre avance avec l'heure, et repart. */
.jauge {
  margin-top: 16px; height: 2px; background: var(--trait);
  border-radius: 999px; overflow: hidden;
}
.jauge i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-clair));
}

/* ---------- Structure commune ---------- */

.section { position: relative; padding: clamp(80px, 11vh, 148px) var(--marge); }
.section-tete { max-width: 760px; margin-bottom: clamp(38px, 5vw, 60px); }
.section-tete h2 { font-size: clamp(26px, 3.9vw, 54px); margin: 14px 0 20px; }

/* ---------- Le format ---------- */

.format-grille {
  display: grid;
  grid-template-columns: minmax(280px, 34%) 1fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
.format-colle { position: sticky; top: clamp(90px, 14vh, 150px); }
.format-colle h2 { font-size: clamp(26px, 3.4vw, 46px); margin: 16px 0 20px; }
/* ---------- Le parcours : un plan de course ---------- */

.parcours {
  position: relative;
  margin: clamp(30px, 4vw, 46px) 0 0;
  width: min(100%, 400px);
}
.parcours svg { width: 100%; height: auto; overflow: visible; display: block; }
.parcours .fantome { fill: none; stroke: var(--trait); stroke-width: 2.5; }
.parcours .trace {
  fill: none; stroke: var(--accent-clair); stroke-width: 2.5; stroke-linecap: round;
}
.parcours .fleuve { fill: none; stroke: var(--accent); stroke-width: 26; stroke-linecap: round; opacity: .07; }
.parcours .coureur circle { fill: #fffbe8; filter: drop-shadow(0 0 4px rgba(255, 251, 232, .9)); }
.parcours .coureur { transition: opacity .4s; }
.parcours .coureur.tete circle { fill: var(--accent); filter: drop-shadow(0 0 6px rgba(189, 175, 223, .9)); }
.parcours .faisceau { mix-blend-mode: screen; }
.parcours .coureur.attend .faisceau { opacity: .25; }
.parcours .bornes circle { fill: var(--gris); opacity: .7; }
.parcours .bornes text,
.parcours .ligne-depart text {
  font-family: var(--data); font-size: 12px; font-weight: 600; fill: var(--gris);
  text-anchor: middle; letter-spacing: .06em;
}
.parcours .ligne-depart line { stroke: var(--encre); stroke-width: 3; stroke-linecap: square; }
.parcours .ligne-depart text { text-anchor: start; text-transform: uppercase; letter-spacing: .14em; fill: var(--encre); }
.parcours-lecture {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--trait); margin-top: 18px;
}
.parcours-lecture span {
  display: grid; gap: 4px; padding: 14px 0 0;
  font-family: var(--data); font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gris);
}
.parcours-lecture b {
  font-family: var(--data); font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: 0;
  color: var(--encre); font-variant-numeric: tabular-nums; line-height: 1;
}

/* En grand, sur la page du format */
.parcours-large {
  padding: clamp(40px, 6vw, 80px) var(--marge) 0;
  display: flex; justify-content: center;
}
.parcours-large .parcours { width: min(100%, 620px); margin-top: 0; }

.cartes { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); }
.carte {
  position: relative;
  border-radius: var(--rayon);
  overflow: hidden;
  min-height: clamp(320px, 42vw, 430px);
  display: flex;
  align-items: flex-end;
  padding: clamp(16px, 1.8vw, 22px);
  background: var(--carte);
  border: 1px solid var(--trait);
}
.carte > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .62;
  transition: transform 1.2s var(--sortie), opacity .8s;
}
.carte:hover > img { transform: scale(1.06); opacity: .8; }
.carte .panneau {
  position: relative;
  background: rgba(8, 8, 10, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  padding: clamp(20px, 2.2vw, 28px);
  width: min(100%, 380px);
}
.carte:nth-child(even) { justify-content: flex-end; }
.carte h3 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(17px, 1.7vw, 23px);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.carte .meta {
  font-family: var(--data);
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-clair); margin: 10px 0 12px;
}
.carte p { color: var(--gris); font-size: 14px; }

/* ---------- La nuit ---------- */

.nuit-bloc {
  position: relative;
  border-radius: var(--rayon);
  overflow: hidden;
  border: 1px solid var(--trait);
  min-height: clamp(460px, 74vh, 700px);
  display: flex;
  align-items: flex-end;
  padding: clamp(24px, 3.5vw, 52px);
}
.nuit-bloc > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* La nuit : la ville en noir et blanc, un dégradé violet qui tombe du ciel.
   Aucun cycle de couleur, la lumière reste la même du début à la fin. */
/* Toulouse au coucher du soleil, la Garonne et le dôme de la Grave (Unsplash, Thomas Despeyroux) */
.nuit-bloc > img { filter: saturate(.9) contrast(1.05); object-position: 30% 45%; }
.ciel-violet {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(110, 88, 182, .62) 0%, rgba(189, 175, 223, .26) 34%, rgba(189, 175, 223, 0) 66%);
  pointer-events: none;
}
.nuit-bloc .voile {
  background: linear-gradient(to top, rgba(8, 8, 10, .97) 2%, rgba(8, 8, 10, .86) 40%, rgba(8, 8, 10, .45) 62%, rgba(8, 8, 10, .05) 84%);
}
.nuit-corps { position: relative; z-index: 2; width: 100%; }
/* Sur le ciel clair, le corps passe en blanc : le gris s’y noie. */
.nuit-corps .corps { color: #e9e9ee; text-shadow: 0 1px 22px rgba(8,8,10,.9); }
.nuit-corps h2 { font-size: clamp(26px, 3.9vw, 54px); margin: 14px 0 18px; }
.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  margin-top: clamp(28px, 4vw, 44px);
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  overflow: hidden;
}
.etape { background: rgba(8, 8, 10, .9); padding: 18px 20px; }
.etape b {
  font-family: var(--data); font-weight: 700;
  font-size: clamp(20px, 2.1vw, 27px);
  color: var(--accent-clair); display: block; line-height: 1.1;
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.etape span { font-size: 12.5px; color: var(--gris); }

/* ---------- Le campement ---------- */

.campement-grille {
  display: grid;
  grid-template-columns: minmax(280px, 46%) 1fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}
.listes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.liste {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: clamp(20px, 2.4vw, 28px);
}
.liste h3 {
  font-family: var(--data);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--encre); font-weight: 700; margin-bottom: 18px;
}
/* Aucune puce, aucun trait : le texte se tient tout seul, séparé par un filet. */
.liste ul { list-style: none; margin: 0; padding: 0; }
.liste li {
  font-size: 14.5px;
  color: var(--encre);
  padding: 11px 0;
  border-top: 1px solid var(--trait);
}
.liste li:first-child { border-top: 0; padding-top: 0; }

/* ---------- La ville ---------- */

.ville-grille {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 42%);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.ville-grille h2 { font-size: clamp(26px, 3.6vw, 48px); margin: 14px 0 20px; }
.ville-image {
  position: relative; border-radius: var(--rayon); overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--carte); border: 1px solid var(--trait);
}
.ville-image img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.ville-image .teinte { opacity: .1; }
.points { list-style: none; margin: 26px 0 0; padding: 0; }
.points li {
  padding: 16px 0;
  border-top: 1px solid var(--trait);
  font-size: 14.5px;
  display: flex; gap: 18px; align-items: baseline;
}
.points li:last-child { border-bottom: 1px solid var(--trait); }
.points .n {
  font-family: var(--data); font-weight: 700; color: var(--accent-clair);
  font-size: 12px; letter-spacing: .1em;
}

/* ---------- La liste d'attente ---------- */

.attente { text-align: center; }
.attente .section-tete { margin-left: auto; margin-right: auto; }
.attente .corps { margin: 0 auto; }
.formulaire {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-top: clamp(30px, 4vw, 44px);
}
.formulaire input {
  flex: 1 1 300px;
  max-width: 420px;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 2px;
  padding: 15px 20px;
  color: var(--encre);
  font: inherit;
  font-size: 15px;
}
.formulaire input::placeholder { color: var(--gris-2); }
.formulaire input:focus { border-color: var(--accent); outline: none; }
.reponse {
  margin-top: 20px; font-family: var(--data); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-clair); min-height: 22px;
}
.reponse.rate { color: #ff8f8f; }

/* ---------- Le pied de page ---------- */

/* Le logo prend toute la largeur : c'est la dernière image qu'on emporte. */
.pied {
  padding: clamp(60px, 9vw, 110px) var(--marge) clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--trait);
}
.pied .marque { width: 100%; height: auto; }
.pied-bas {
  display: flex; flex-wrap: wrap; gap: 18px 26px;
  align-items: flex-end; justify-content: space-between;
  margin-top: clamp(20px, 2.6vw, 32px);
}
.pied .ligne {
  font-family: var(--data); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gris); margin-top: 18px;
}
.pied .mentions { font-size: 12px; color: var(--gris-2); max-width: 40ch; }

/* ---------- Le bas légal, tout en bas ---------- */

.legal {
  border-top: 1px solid var(--trait);
  padding: clamp(22px, 3vw, 30px) var(--marge) clamp(30px, 4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 26px;
  font-size: 12px;
  color: var(--gris-2);
}
.legal a { color: var(--gris-2); transition: color .3s; }
.legal a:hover { color: var(--encre); }
.legal .liens { display: flex; flex-wrap: wrap; gap: 10px 22px; }

/* ---------- Les pages de fond ---------- */

.entete {
  position: relative;
  min-height: clamp(420px, 62vh, 620px);
  display: flex;
  align-items: flex-end;
  padding: clamp(120px, 16vh, 180px) var(--marge) clamp(34px, 5vw, 60px);
  overflow: hidden;
  border-bottom: 1px solid var(--trait);
}
.entete-fond { position: absolute; inset: 0; z-index: 0; }
.entete-fond img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.entete-fond { animation: mise-au-point 2.6s var(--sortie) .2s both; }
.entete-corps { position: relative; z-index: 2; width: 100%; max-width: 900px; }
.entete h1 { font-size: clamp(30px, 5vw, 74px); margin: 14px 0 22px; }

/* La fiche : quatre mesures, comme un tableau de bord */
.fiche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
  margin: clamp(30px, 4vw, 44px) var(--marge) 0;
}
.fiche-item { background: var(--nuit); padding: clamp(18px, 2vw, 26px); }
.fiche-item b {
  font-family: var(--data); font-weight: 700;
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1;
  color: var(--encre); display: flex; align-items: baseline; gap: 3px;
  font-variant-numeric: tabular-nums;
}
.fiche-item b i { font-style: normal; font-size: max(.4em, 12px); color: var(--accent-clair); letter-spacing: .08em; }
.fiche-item span {
  display: block; margin-top: 10px;
  font-family: var(--data); font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gris-2);
}

/* Le corps de la page : une colonne, des blocs séparés par un filet */
.fond { max-width: 1180px; margin: 0 auto; padding: clamp(60px, 8vw, 100px) var(--marge); }
.fond section { --lecture: 0; position: relative; display: grid; grid-template-columns: minmax(220px, .74fr) minmax(0, 1.26fr); gap: clamp(28px, 6vw, 100px); padding: clamp(42px, 6vw, 72px) 0; border-top: 1px solid var(--trait); }
.fond section:first-child { border-top: 0; }
/* Le filet du haut se remplit en violet pendant la lecture, de gauche à droite.
   Horizontal depuis le 2026-10-09 : vertical, il traversait les titres. */
.fond section::before { content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--accent); transform: scaleX(var(--lecture)); transform-origin: left; pointer-events: none; }
.fond h2 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(18px, 2.1vw, 27px); letter-spacing: -.02em; line-height: 1.15;
  margin: 0; position: sticky; top: 118px; align-self: start;
}
.fond p { color: var(--gris); font-size: clamp(15px, 1.15vw, 16.5px); }

/* La suite : les autres pages, en bas de chaque page */
.suite { padding: 0 var(--marge) clamp(60px, 8vw, 96px); }
.suite-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.suite-carte {
  position: relative; isolation: isolate; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: clamp(20px, 2.2vw, 28px); transform-style: preserve-3d;
  transition: border-color .35s, transform .5s var(--sortie);
}
.suite-carte:hover { border-color: var(--accent); transform: translateY(-3px); }
.suite-carte > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .48; filter: contrast(1.15) brightness(.7); transition: transform .7s var(--sortie); }
.suite-carte:hover > img { transform: scale(1.04); }
.suite-voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8, 8, 10, .97) 10%, rgba(8, 8, 10, .35) 100%); }
.suite-carte span {
  font-family: var(--data); font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gris-2);
}
.suite-carte b {
  display: block; margin-top: 10px;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(15px, 1.5vw, 19px); letter-spacing: -.02em;
}
.frise-nuit { max-width: 1180px; margin: clamp(38px, 5vw, 70px) auto 0; padding: 0 var(--marge); }

/* Le lien qui mène au détail depuis la page d'accueil */
.detail {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 22px;
  font-family: var(--data); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-clair);
}
.detail i { font-style: normal; transition: transform .4s var(--sortie); }
.detail:hover i { transform: translateX(5px); }

/* ---------- Les pages de texte ---------- */

.page {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(120px, 16vh, 190px) var(--marge) clamp(60px, 8vw, 100px);
}
.page-entete { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.page h1 { font-size: clamp(30px, 4.4vw, 58px); margin-top: 14px; }
.page-lecture { max-width: 65ch; }
.page section { padding: clamp(22px, 3vw, 30px) 0; border-top: 1px solid var(--trait); }
.page h2 {
  font-family: var(--data);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--encre);
  margin-bottom: 12px;
}
.page p { color: var(--gris); font-size: clamp(15px, 1.15vw, 16px); }
.page strong { color: var(--encre); font-weight: 500; }
.page a { color: var(--accent-clair); }
.page .retour {
  display: inline-block;
  margin-top: clamp(30px, 4vw, 46px);
  font-family: var(--data);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-clair);
}
.page-sommaire {
  max-width: 65ch;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  padding: 18px 0 20px;
  margin-bottom: 24px;
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  font-family: var(--data);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.page-sommaire > span { grid-row: span 5; color: var(--gris-2); }
.page-sommaire a { color: var(--accent-clair); min-height: 24px; }

/* ---------- Les entrées au scroll ---------- */

.monte { opacity: 0; transform: translateY(24px); }

/* Le titre se révèle ligne par ligne, chacune montant de son propre masque. */
.ligne-titre { display: block; overflow: hidden; }
.ligne-titre i { display: block; font-style: normal; transform: translateY(110%); }

/* La barre de lecture : elle se remplit du début à la fin de la page. */
.progression {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-clair));
  z-index: 60;
  pointer-events: none;
}

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
  .format-grille, .campement-grille, .ville-grille { grid-template-columns: 1fr; }
  .format-colle { position: static; }
  .parcours { margin-left: auto; margin-right: auto; }
  .carte { min-height: 370px; }
  .carte .panneau { width: 100%; }
  .ville-grille { display: flex; flex-direction: column-reverse; }
  .ville-image { width: 100%; aspect-ratio: 3 / 2; }
  .hero-bas { flex-direction: column; align-items: stretch; }
  .compteurs { justify-content: flex-start; }
  .fond section { display: block; padding: clamp(30px, 7vw, 46px) 0; }
  .fond section::before { display: none; }
  .fond h2 { position: static; margin-bottom: 14px; }
  .entete-fond { animation: none; }
  .defile-piste { transform: none !important; }
}
@media (max-width: 880px) {
  .nav-liens { display: none; }
  .nav { left: var(--marge); right: var(--marge); transform: none; width: auto;
         justify-content: space-between; max-width: none; }
  .nav-marque img { height: 13px; }
  /* La barre doit tenir dans la largeur : le bouton se compacte avant de sortir. */
  .nav { gap: 8px; padding: 8px 8px 8px 14px; }
  .nav .cta { font-size: 12px; letter-spacing: .08em; padding: 9px 9px 9px 13px; gap: 9px; }
  .nav .cta .pastille { width: 22px; height: 22px; font-size: 12px; }
  .pied .marque { width: 100%; }
  .hero { padding-top: 104px; }
  .hero h1 { font-size: clamp(27px, 7.6vw, 42px); }
  .pied { flex-direction: column; align-items: flex-start; }
  .pied .marque { width: min(78vw, 340px); }
  .nav-marque,
  .nav .cta,
  .legal .liens a,
  .page .retour,
  .page-sommaire a,
  .page section a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .nav-marque,
  .nav .cta { justify-content: center; }
  .legal .liens a,
  .page-sommaire a,
  .page section a { padding-top: 0; padding-bottom: 0; }
}

/* Sous 420 px, le bouton de la barre garde sa flèche et lâche son texte. */
@media (max-width: 420px) {
  .nav .cta { font-size: 12px; color: transparent; padding: 11px; gap: 0; width: 44px; overflow: hidden; }
  .nav .cta .pastille { width: 22px; height: 22px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .monte { opacity: 1; transform: none; }
  .ciel { transition: none; }
  /* Le rideau disparaît sans jouer, la bande s'arrête net, les titres sont là. */
  .rideau { display: none; }
  .ligne-titre i { transform: none; }
  .progression { display: none; }
  .pouls { animation: none; }
}


/* ---------- Le grain : du béton, pas du velours ---------- */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23b)'/%3E%3C/svg%3E");
}

/* ---------- Le numéro de section, comme un marquage au sol ---------- */

.numero {
  position: absolute;
  top: clamp(74px, 9vh, 110px);
  right: var(--marge);
  font-family: var(--data);
  font-weight: 700;
  font-size: clamp(46px, 8vw, 120px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--trait);
  letter-spacing: -.02em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
@media (max-width: 720px) { .numero { font-size: 40px; top: 74px; opacity: .75; } }

/* ---------- Les surtitres deviennent des étiquettes de chantier ---------- */

.surtitre {
  line-height: 1.5;
}

/* Les traits se voient un peu plus : la ville a des arêtes */
.carte, .liste, .compteurs, .fiche, .etapes, .nuit-bloc, .ville-image, .suite-carte {
  border-color: #313140;
}

/* ================================================================
   Underground urbain : le chantier, la signalétique, la matière
   ================================================================ */

/* Le ruban de chantier, en séparateur de section. Statique : rien ne défile. */
.ruban {
  height: 7px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--accent) 0 10px,
    transparent 10px 20px
  );
  opacity: .5;
}

/* Le libellé technique, comme une plaque de rue ou un marquage de service */
.technique {
  position: absolute;
  bottom: clamp(16px, 2.4vw, 26px);
  right: var(--marge);
  font-family: var(--data);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #3a3a48;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
@media (max-width: 720px) { .technique { display: none; } }

/* Les photos deviennent dures : plus de contraste, moins de demi-teintes */
.carte > img, .hero-fond img, .ville-image img, .entete-fond img {
  filter: contrast(1.22) brightness(.92);
}

/* La nuit passe bord à bord : pas de carte flottante, un bloc qui coupe la page */
#nuit { padding-left: 0; padding-right: 0; }
#nuit .nuit-bloc { border-left: 0; border-right: 0; border-radius: 0; }
#nuit .nuit-corps { padding-left: var(--marge); padding-right: var(--marge); }

/* Le volet : l'image se découvre par le bas, comme un rideau de fer qui monte */
/* La transition est en CSS et pas dans le moteur : anime.js n'interpole pas
   les valeurs inset(), le volet restait ferme et l'image invisible. */
.volet { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--sortie); }
.volet.ouvert { clip-path: inset(0 0 0 0); }

/* Le halo du curseur : une lampe qu'on promène sur le béton */
.lampe {
  position: fixed;
  top: 0; left: 0;
  width: 380px; height: 380px;
  margin: -190px 0 0 -190px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  background: radial-gradient(circle, rgba(189, 175, 223, .1), transparent 62%);
  transition: opacity .5s;
}
@media (hover: none) { .lampe { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .volet { clip-path: none; }
  .lampe { display: none; }
}

/* ================================================================
   La barre de navigation sur ordinateur
   ================================================================ */

/* Aucun trait après la marque : l espace suffit à séparer. */
@media (min-width: 881px) {
  .nav-marque {
    padding-right: clamp(6px, 1vw, 14px);
    display: flex;
    align-items: center;
  }
}

/* Le lien porte son trait, qui se déploie au survol et reste sur la section lue */
.nav-liens a {
  position: relative;
  padding: 6px 0;
}
.nav-liens a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .42s var(--sortie);
}
.nav-liens a:hover::after,
.nav-liens a.ici::after { transform: scaleX(1); transform-origin: left; }
.nav-liens a.ici { color: var(--encre); }

/* Passé le premier écran, la barre se resserre et se ferme */
.nav {
  transition: padding .45s var(--sortie), background .45s, border-color .45s;
}
.nav.serree {
  padding-top: 6px;
  padding-bottom: 6px;
  background: rgba(8, 8, 10, .94);
  border-color: #3a3a48;
}
.nav.serree .nav-marque img { height: 16px; }
.nav.serree .cta { padding-top: 8px; padding-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  .nav, .nav-liens a::after { transition: none; }
}

/* ================================================================
   Le doigt et l'oeil : zones tactiles et tailles minimales
   ================================================================ */

/* Une cible se prend avec un doigt, pas avec un curseur : 44 px de haut
   au minimum sur tactile, même quand le texte est court. */
@media (hover: none), (max-width: 880px) {
  .detail {
    padding: 12px 0;
    min-height: 44px;
    align-items: center;
  }
  .legal .liens a {
    padding: 11px 0;
    display: inline-block;
  }
  .nav-marque {
    padding: 12px 0;
    display: flex;
    align-items: center;
  }
  .nav-liens a { padding: 12px 0; }
  .points li { padding: 18px 0; }
}

/* Rien ne descend sous 12px : en capitales espacées ça reste lisible,
   en dessous ça devient de la texture. */
.tuile span,
.mesure > span,
.compteurs-tete,
.fiche-item span,
.parcours-centre span,
.liste h3,
.carte .meta {
  font-size: 12px;
}

/* ================================================================
   La page des contenus : un document de travail, dans la DA
   ================================================================ */

.entete-contenus {
  position: relative;
  padding: clamp(120px, 16vh, 180px) var(--marge) clamp(30px, 4vw, 50px);
  border-bottom: 1px solid var(--trait);
}
.entete-contenus h1 { font-size: clamp(30px, 5vw, 66px); margin: 14px 0 20px; }

.contenus { max-width: 980px; margin: 0 auto; padding: 0 var(--marge); }
.livrable { padding: clamp(46px, 6vw, 76px) 0; border-bottom: 1px solid var(--trait); }
.livrable:last-child { border-bottom: 0; }
.livrable h2 { font-size: clamp(26px, 3.4vw, 46px); margin: 14px 0 20px; }
.livrable .corps { max-width: 68ch; }
.livrable .detail { margin-bottom: 6px; }

/* Le bloc à copier : chasse fixe, cadre net, pas de fioriture */
.copiable {
  margin: 26px 0 0;
  padding: clamp(18px, 2.2vw, 26px);
  background: var(--carte);
  border: 1px solid var(--trait);
  border-left: 2px solid var(--accent);
  font-family: var(--data);
  font-size: 13px;
  line-height: 1.7;
  color: #d6d6dd;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
  -webkit-user-select: all;
  user-select: all;
}

.lots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 26px; }
.lot { margin: 0; }
.lot img { width: 100%; height: auto; border: 1px solid var(--trait); }
.lot figcaption {
  margin-top: 10px;
  font-family: var(--data);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris-2); line-height: 1.6;
}

/* Le séquencier : un vrai tableau, qui défile seul s'il est trop large */
.tableau-large { overflow-x: auto; margin-top: 26px; border: 1px solid var(--trait); }
.sequencier { width: 100%; border-collapse: collapse; min-width: 720px; }
.sequencier th {
  text-align: left; padding: 14px 16px;
  background: var(--carte-2);
  font-family: var(--data); font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
  border-bottom: 1px solid var(--trait);
  white-space: nowrap;
}
.sequencier td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--trait);
  font-size: 13.5px; line-height: 1.6; color: var(--gris);
  vertical-align: top;
}
.sequencier td:first-child, .sequencier td:nth-child(2) {
  font-family: var(--data); color: var(--accent); white-space: nowrap; font-size: 12.5px;
}
.sequencier tr:last-child td { border-bottom: 0; }

.sous-bloc { margin-top: clamp(34px, 4vw, 50px); }
.sous-bloc h3 {
  font-family: var(--data); font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px;
}
.reserves .points li { align-items: flex-start; }
.reserves .points li span:last-child { color: var(--gris); }

.livrable code { font-family: var(--data); font-size: .92em; color: var(--accent);
  background: var(--carte); padding: 2px 7px; border: 1px solid var(--trait); }


/* ================================================================
   Le mouvement poussé, 2026-10-08
   ================================================================ */

/* Le défilé : la phrase du format qui passe en continu, plus vite quand on défile */
.defile {
  overflow: hidden; border-block: 1px solid var(--trait);
  padding: clamp(18px, 2.4vw, 30px) 0; background: var(--nuit);
}
.defile-piste { display: flex; width: max-content; will-change: transform; }
.defile-piste span {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(34px, 7vw, 104px); line-height: 1; letter-spacing: -.01em;
  padding-right: clamp(36px, 5vw, 80px); color: var(--encre); white-space: nowrap;
}
.defile-piste span:nth-child(4n) { color: var(--gris); }

/* Le hero s'ouvre comme un objectif qui fait le point */
@keyframes mise-au-point { from { transform: scale(1.16); filter: blur(6px); } to { transform: scale(1); filter: blur(0); } }
.hero-fond { animation: mise-au-point 2.6s var(--sortie) .2s both; }

/* Les cartes s'inclinent sous la main */
.carte { transform-style: preserve-3d; transition: transform .6s var(--sortie); }
.carte .panneau { transition: transform .6s var(--sortie); }
.carte:hover .panneau { transform: translate3d(0, -4px, 30px); }

/* Les heures de la nuit s'allument une à une */
.etape { position: relative; transition: background .6s; }
.etape::before {
  content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--sortie);
}
.etape.allumee::before { transform: scaleX(1); }
.etape.courante { background: rgba(189, 175, 223, .1); }
.etape.courante b { color: var(--encre); }

/* Les boutons aimantés suivent la main de quelques pixels */
.cta { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .hero-fond { animation: none; }
  .defile-piste { transform: none !important; }
  .etape::before { transform: scaleX(1); }
}

/* L'annonce de la date, au-dessus du titre */
.hero-annonce {
  font-family: var(--data); font-weight: 700; font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sur-accent); background: var(--accent);
  display: inline-block; padding: 8px 12px; margin: 0 0 22px; border-radius: var(--rayon-petit);
}

/* Le bandeau de l'accueil : le logo, la promesse, la ville. Demande d'Enzo du 2026-10-09 */
.defile-piste span.defile-logo { display: flex; align-items: center; }
.defile-piste .defile-logo img {
  height: clamp(26px, 5.4vw, 80px); width: auto; max-width: none;
  aspect-ratio: 2800 / 213; object-fit: contain; display: block;
}
.defile-piste span.defile-ville { color: var(--gris); }
.defile-piste span:nth-child(4n):not(.defile-ville) { color: var(--encre); }