/* ==========================================================================
   Armand Marchant · « Carte de piste » · site.css (Dev B · Styles)
   Spec v2, 26.10.2026. Mono-theme, tonal. Never reads prefers-color-scheme.

   00  Registered tone variables (@property)
   01  Tokens: palette, fonts, type scale, spacing, radii, easing
   02  Tones: live mode, fallback mode, locked components, moments
   03  Base, layers, stacking, utilities
   04  Loader « Ça marche ! » (CSS only)
   05  Header, plaque, menu pill, menu, rail, progress, skip
   06  Buttons, links, mode plan, focus
   07  Shared patterns: mixed titles, tags, chips, facts, rigs, pictos, notes, tips
   08  Hero « Départ »
   09  Manifeste + marquees
   10  Story: intro, chapters, gates, P01–P09 specifics
   11  Season
   12  Split « Sur la piste / Hors piste »
   13  Palmarès
   14  Partenaires + audiences
   15  Contact + footer
   16  Cursor (#am-cursor, #am-fx)
   17  Responsive (S < 768 · M 768–1099 · L ≥ 1100 · XL ≥ 1440)
   18  Touch / no-hover equivalents
   19  Reduced motion plan (§8)
   ========================================================================== */


/* ==========================================================================
   00 · Registered tone variables (19, <color>, inherits)
   Initial values are the neige tone.
   ========================================================================== */

@property --bg          { syntax: '<color>'; inherits: true; initial-value: #EEF2F0; }
@property --fg          { syntax: '<color>'; inherits: true; initial-value: #0B1116; }
@property --fg-2        { syntax: '<color>'; inherits: true; initial-value: #46545C; }
@property --line        { syntax: '<color>'; inherits: true; initial-value: #B4C2C8; }
@property --topo        { syntax: '<color>'; inherits: true; initial-value: #B4C2C8; }
@property --topo-idx    { syntax: '<color>'; inherits: true; initial-value: #93A4AC; }
@property --accent-text { syntax: '<color>'; inherits: true; initial-value: #0B1116; }
@property --accent-fill { syntax: '<color>'; inherits: true; initial-value: #FFD60A; }
@property --on-accent   { syntax: '<color>'; inherits: true; initial-value: #0B1116; }
@property --mark        { syntax: '<color>'; inherits: true; initial-value: rgba(255,214,10,.85); }
@property --card        { syntax: '<color>'; inherits: true; initial-value: #F9FBFA; }
@property --card-fg     { syntax: '<color>'; inherits: true; initial-value: #0B1116; }
@property --ghost       { syntax: '<color>'; inherits: true; initial-value: #93A4AC; }
@property --trace       { syntax: '<color>'; inherits: true; initial-value: #FFD60A; }
@property --trace-case  { syntax: '<color>'; inherits: true; initial-value: #0B1116; }
@property --lit         { syntax: '<color>'; inherits: true; initial-value: #FFD60A; }
@property --lit-case    { syntax: '<color>'; inherits: true; initial-value: #0B1116; }
@property --cursor      { syntax: '<color>'; inherits: true; initial-value: #0B1116; }
@property --focus       { syntax: '<color>'; inherits: true; initial-value: #0B1116; }

/* Loader chrono counters (§4) */
@property --am-s { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --am-c { syntax: '<integer>'; inherits: false; initial-value: 0; }


/* ==========================================================================
   01 · Tokens
   ========================================================================== */

:root {
  /* Palette (§2.1) */
  --c-nuit: #0B1116;
  --c-nuit-2: #141D24;
  --c-ardoise: #22313A;
  --c-ligne-nuit: #2C3B45;
  --c-brume: #9FB0B9;
  --c-neige: #EEF2F0;
  --c-neige-2: #F9FBFA;
  --c-glace: #CBD9DE;
  --c-ligne-neige: #B4C2C8;
  --c-gris: #46545C;
  --c-jaune: #FFD60A;
  --c-jaune-2: #E6BC00;
  --c-olive: #413C13;
  --c-rouge: #E3262E;
  --c-bleu: #1F5BD8;
  --c-vert-piste: #1F9D55;

  /* Neige tone defaults (§2.4.1) */
  color-scheme: dark;
  --bg: #EEF2F0;
  --fg: #0B1116;
  --fg-2: #46545C;
  --line: #B4C2C8;
  --topo: #B4C2C8;
  --topo-idx: #93A4AC;
  --accent-text: #0B1116;
  --accent-fill: #FFD60A;
  --on-accent: #0B1116;
  --mark: rgba(255,214,10,.85);
  --card: #F9FBFA;
  --card-fg: #0B1116;
  --ghost: #93A4AC;
  --trace: #FFD60A;
  --trace-case: #0B1116;
  --lit: #FFD60A;
  --lit-case: #0B1116;
  --cursor: #0B1116;
  --focus: #0B1116;

  /* Plain (unregistered) variables (§2.2) */
  --picto-cut: var(--bg);
  --pa: var(--accent-fill);
  --mk-r: #E3262E;
  --mk-y: #FFD60A;
  --mk-k: #0B1116;
  --mk-b: #1F5BD8;
  --dot-edge: #0B1116;            /* cursor dot outline, light tones only */

  /* Generated by art.js (§7.5); plain yellow hover until then */
  --plan-tile-ink: none;
  --plan-tile-jaune: none;

  /* Fonts (§2.5) */
  --f-grot: 'Archivo', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --f-serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --f-mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --f-hand: 'Caveat Brush', 'Marker Felt', 'Comic Sans MS', cursive;

  /* Type scale (§2.6) */
  --fs-first: clamp(64px, 11vw, 190px);
  --fs-last: clamp(46px, 12.4vw, 216px);
  --fs-display: clamp(40px, 8.6vw, 148px);
  --fs-h3: clamp(34px, 4.4vw, 72px);
  --fs-num: clamp(140px, 26vw, 400px);
  --fs-fig: clamp(40px, 4.6vw, 72px);
  --fs-marquee: clamp(52px, 9vw, 150px);
  --fs-lead: clamp(19px, 1.55vw, 24px);
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-micro: 11px;
  --fs-hand: clamp(36px, 4.4vw, 64px);

  /* Spacing (§2.7) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 144px;
  --pad-sec: clamp(96px, 14vw, 200px);
  --pad-chap: clamp(80px, 12vw, 180px);
  --gut: clamp(16px, 3.6vw, 56px);
  --gut-l: max(var(--gut), env(safe-area-inset-left, 0px));
  --gut-r: max(var(--gut), env(safe-area-inset-right, 0px));
  --col-gap: clamp(12px, 2vw, 32px);
  --hdr-h: 76px;

  /* Radii */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Easing and durations (§2.8) */
  --carve: cubic-bezier(.7, 0, .2, 1);
  --glide: cubic-bezier(.16, 1, .3, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --t-micro: .24s;
  --t-comp: .38s;
  --t-comp-l: .45s;
  --t-tone: .6s;
  --t-block: .7s;

  /* Inline SVG masks */
  --zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6'%3E%3Cpath d='M0 5 L4 1 L8 5 L12 1 L16 5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}


/* ==========================================================================
   02 · Tones (§2.2–2.4)
   One rule per tone. Live mode: applies to html (fx.js sets data-tone).
   Fallback mode: applies to each block. [data-lock] always declares locally.
   ========================================================================== */

:is(html.tones-live[data-tone="neige"], html:not(.tones-live) [data-tone="neige"]),
[data-lock="neige"] {
  --bg: #EEF2F0; --fg: #0B1116; --fg-2: #46545C; --line: #B4C2C8;
  --topo: #B4C2C8; --topo-idx: #93A4AC;
  --accent-text: #0B1116; --accent-fill: #FFD60A; --on-accent: #0B1116;
  --mark: rgba(255,214,10,.85); --card: #F9FBFA; --card-fg: #0B1116;
  --ghost: #93A4AC; --trace: #FFD60A; --trace-case: #0B1116;
  --lit: #FFD60A; --lit-case: #0B1116; --cursor: #0B1116; --focus: #0B1116;
  --picto-cut: var(--bg); --pa: var(--accent-fill); --dot-edge: #0B1116;
}

:is(html.tones-live[data-tone="glace"], html:not(.tones-live) [data-tone="glace"]),
[data-lock="glace"] {
  --bg: #CBD9DE; --fg: #0B1116; --fg-2: #46545C; --line: #9DB1BA;
  --topo: #9DB1BA; --topo-idx: #7D939D;
  --accent-text: #0B1116; --accent-fill: #FFD60A; --on-accent: #0B1116;
  --mark: rgba(255,214,10,.9); --card: #EEF2F0; --card-fg: #0B1116;
  --ghost: #7D939D; --trace: #FFD60A; --trace-case: #0B1116;
  --lit: #FFD60A; --lit-case: #0B1116; --cursor: #0B1116; --focus: #0B1116;
  --picto-cut: var(--bg); --pa: var(--accent-fill); --dot-edge: #0B1116;
}

:is(html.tones-live[data-tone="nuit"], html:not(.tones-live) [data-tone="nuit"]),
[data-lock="nuit"] {
  --bg: #0B1116; --fg: #EEF2F0; --fg-2: #9FB0B9; --line: #2C3B45;
  --topo: #26343D; --topo-idx: #3A4C57;
  --accent-text: #FFD60A; --accent-fill: #FFD60A; --on-accent: #0B1116;
  --mark: rgba(255,214,10,.22); --card: #141D24; --card-fg: #EEF2F0;
  --ghost: #3A4C57; --trace: #FFD60A; --trace-case: transparent;
  --lit: #FFD60A; --lit-case: transparent; --cursor: #EEF2F0; --focus: #FFD60A;
  --picto-cut: var(--bg); --pa: var(--accent-fill); --dot-edge: transparent;
}

:is(html.tones-live[data-tone="ardoise"], html:not(.tones-live) [data-tone="ardoise"]),
[data-lock="ardoise"] {
  --bg: #22313A; --fg: #EEF2F0; --fg-2: #9FB0B9; --line: #3A4C57;
  --topo: #34464F; --topo-idx: #4A5F6A;
  --accent-text: #FFD60A; --accent-fill: #FFD60A; --on-accent: #0B1116;
  --mark: rgba(255,214,10,.22); --card: #2B3C46; --card-fg: #EEF2F0;
  --ghost: #4A5F6A; --trace: #FFD60A; --trace-case: transparent;
  --lit: #FFD60A; --lit-case: transparent; --cursor: #EEF2F0; --focus: #FFD60A;
  --picto-cut: var(--bg); --pa: var(--accent-fill); --dot-edge: transparent;
}

:is(html.tones-live[data-tone="jaune"], html:not(.tones-live) [data-tone="jaune"]),
[data-lock="jaune"] {
  --bg: #FFD60A; --fg: #0B1116; --fg-2: #413C13; --line: rgba(11,17,22,.28);
  --topo: rgba(11,17,22,.18); --topo-idx: rgba(11,17,22,.32);
  --accent-text: #0B1116; --accent-fill: #0B1116; --on-accent: #FFD60A;
  --mark: rgba(11,17,22,.12); --card: #141D24; --card-fg: #EEF2F0;
  --ghost: rgba(11,17,22,.35); --trace: #0B1116; --trace-case: transparent;
  --lit: rgba(11,17,22,.6); --lit-case: transparent; --cursor: #0B1116; --focus: #0B1116;
  --picto-cut: var(--bg); --pa: var(--accent-fill); --dot-edge: #0B1116;
}

/* Moment « jeux » (§2.3): blue relief. Effective tone is nuit. */
html.tones-live[data-moment="jeux"] {
  --topo: rgba(31,91,216,.5);
  --topo-idx: rgba(31,91,216,.75);
}

/* Live mode: the whole viewport cross-fades in 600 ms */
html {
  transition:
    --bg .6s var(--carve), --fg .6s var(--carve), --fg-2 .6s var(--carve),
    --line .6s var(--carve), --topo .6s var(--carve), --topo-idx .6s var(--carve),
    --accent-text .6s var(--carve), --accent-fill .6s var(--carve), --on-accent .6s var(--carve),
    --mark .6s var(--carve), --card .6s var(--carve), --card-fg .6s var(--carve),
    --ghost .6s var(--carve), --trace .6s var(--carve), --trace-case .6s var(--carve),
    --lit .6s var(--carve), --lit-case .6s var(--carve);
}

/* Fallback (fx.js absent): each block paints its own tone */
html:not(.tones-live) [data-tone] {
  position: relative;
  color: var(--fg);
}
html:not(.tones-live) [data-tone]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--bg);
  pointer-events: none;
}
html:not(.tones-live) .hdr {
  background: rgba(238,242,240,.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Locked components paint their own tone */
[data-lock] {
  background: var(--bg);
  color: var(--fg);
}


/* ==========================================================================
   03 · Base, layers, stacking, utilities
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.menu-open { overflow: hidden; }

body {
  position: relative;
  z-index: 0;                       /* body is the stacking context (§2.9) */
  margin: 0;
  min-height: 100%;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--f-grot);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  font-stretch: 100%;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
h1, h2, h3, h4 { font-weight: inherit; font-size: inherit; text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
ol, ul { padding: 0; }
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
b, strong { font-weight: 700; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
table { border-collapse: collapse; }
abbr { text-decoration: none; }
[hidden] { display: none !important; }

::selection { background: #FFD60A; color: #0B1116; }

/* Inline SVG defs (§6.2) */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Fixed relief canvas (§2.9, z −1) */
#am-topo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Section decor (z 0) and content (z 1) */
.decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-left: max(clamp(16px, 3.6vw, 56px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(16px, 3.6vw, 56px), env(safe-area-inset-right, 0px));
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.grid > *,
.wrap > * { min-width: 0; }

/* Sections. A [data-tone] block never creates a stacking context:
   no transform, filter, opacity, isolation, will-change, contain,
   mix-blend-mode or z-index on the block itself. */
.sec,
.chap,
.story,
.split {
  position: relative;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  .sec, .chap, .story, .split { overflow-x: hidden; }
}
.sec { padding-block: var(--pad-sec); }

#depart, #manifeste, #histoire, #p01, #p02, #p03, #p04, #p05, #p06, #p07, #p08, #p09,
#saison, #piste, #palmares, #partenaires, #contact {
  scroll-margin-top: 80px;
}

/* Typographic utilities */
.micro,
.fig__l {
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: var(--fs-micro);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: var(--fs-micro);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: currentColor;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  font-weight: 400;
  max-width: 34em;
  color: var(--fg);
}

.prose {
  max-width: 38em;
  font-size: var(--fs-body);
  line-height: 1.6;
}
.prose p + p { margin-top: 1em; }

.hl {
  color: inherit;
  background: linear-gradient(transparent 58%, var(--mark) 58% 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: .06em;
}

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[data-roll] { white-space: nowrap; }
[data-roll].is-rolling { -webkit-user-select: none; user-select: none; }


/* ==========================================================================
   04 · Loader « Ça marche ! » (§4) · CSS only, gone at 2.3 s
   ========================================================================== */

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  color: #EEF2F0;
  overflow: hidden;
  cursor: pointer;
  animation: am-loader-out .01s linear 2.09s forwards;
}
.loader.is-skipped {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s linear, visibility 0s linear .2s;
}

.loader__curtain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.loader__cut {
  fill: none;
  stroke: #000;
  stroke-linecap: round;
  animation: am-cut .43s var(--carve) 1.62s forwards;
}

.loader__topo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation:
    am-fade-in .15s linear 0s forwards,
    am-fade-out .12s linear 1.6s forwards;
}

.loader__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  pointer-events: none;
  animation: am-fade-out .12s linear 1.6s forwards;
}

/* Client monogram: the yellow contour is carved both ways from each summit, the snow fill rises, then the trace bows out */
.loader__mark {
  width: min(220px, 56vw);
  height: auto;
  aspect-ratio: 316 / 227.19;
  overflow: visible;
}
.loader__trace {
  fill: none;
  stroke: #FFD60A;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.loader__trace use {
  stroke-dasharray: 0 1;             /* each subpath starts at its apex: the dash grows both ways from it */
  stroke-dashoffset: 0;
  stroke-opacity: 0;                 /* no round-cap dot before the carve starts */
  animation:
    am-ink .01s linear .1s forwards,
    am-draw-both .7s var(--carve) .1s forwards,
    am-fade-out .3s linear 1.12s forwards;
}
.loader__trace use:nth-child(3) { animation-delay: .16s, .16s, 1.12s; }
.loader__trace use:nth-child(4) {
  animation-duration: .01s, .4s, .3s;
  animation-delay: .4s, .4s, 1.12s;
  animation-timing-function: linear, var(--glide), linear;
}
.loader__rise {
  fill: #EEF2F0;
  transform: translateY(253px);      /* user units: WebKit drops animated % translates on SVG */
  animation: am-fill-rise .55s var(--carve) .58s forwards;
}
@keyframes am-fill-rise { to { transform: translateY(0); } }
/* Slalom poles in their flag colour, so they read as gates planted on the summits, not as part of the mark */
.loader__gates line {
  stroke-width: 3;
  stroke-linecap: round;
  fill: none;
}
.loader__gates polygon { stroke: none; }
.loader__gates .g:nth-child(odd) line { stroke: #E3262E; }
.loader__gates .g:nth-child(odd) polygon { fill: #E3262E; }
.loader__gates .g:nth-child(even) line { stroke: #1F5BD8; }
.loader__gates .g:nth-child(even) polygon { fill: #1F5BD8; }
.loader__gates .g {
  transform-box: fill-box;
  transform-origin: 0 100%;          /* bottom of the pole */
  transform: scale(0);
  animation: am-gate .16s var(--pop) .98s forwards;   /* once the snow has reached each summit */
}
.loader__gates .g:nth-child(2) { animation-delay: 1.02s; }
.loader__gates .g:nth-child(3) { animation-delay: 1.06s; }

.loader__pun {
  font-family: var(--f-hand);
  font-size: 44px;
  line-height: 1;
  color: #FFD60A;
  transform: rotate(-4deg);
  clip-path: inset(0 100% 0 0);
  animation: am-reveal .25s var(--carve) .95s forwards;
  white-space: nowrap;
  padding: 0 .1em;
}
.loader__underline {
  width: 168px;
  height: 14px;
  margin-top: -14px;
  transform: rotate(-4deg) translateX(6px);
  overflow: visible;
}
.loader__underline path {
  fill: none;
  stroke: #FFD60A;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.001;
  stroke-opacity: 0;
  animation:
    am-ink .01s linear 1.05s forwards,
    am-draw .25s var(--carve) 1.05s forwards;
}

.loader__chrono {
  position: absolute;
  left: max(24px, env(safe-area-inset-left, 0px));
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 13px;
  line-height: 1.2;
  color: #9FB0B9;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  animation: am-fade-out .12s linear 1.6s forwards;
}
.loader__time { font-weight: 600; letter-spacing: .02em; }
.loader__s {
  counter-reset: s var(--am-s);
  animation: am-s .85s var(--carve) .15s both;
}
.loader__s::before { content: counter(s, decimal-leading-zero); }
.loader__c {
  counter-reset: c var(--am-c);
  animation:
    am-c .12s linear .15s 7,
    am-final-c .01s linear 1s forwards;
}
.loader__c::before { content: counter(c, decimal-leading-zero); }
.loader__cap {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
}

.loader__lights {
  position: absolute;
  right: max(24px, env(safe-area-inset-right, 0px));
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  animation: am-fade-out .12s linear 1.6s forwards;
}
.loader__lights i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2C3B45;
  animation: am-light .01s linear .35s forwards;
}
.loader__lights i:nth-child(2) { animation-delay: .6s; }
.loader__lights i:nth-child(3) { animation-delay: .85s; }
.loader__lights span {
  margin-left: 6px;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9FB0B9;
}

/* Phones: the start lights move up to the time row so they clear the caption */
@media (max-width: 479.98px) {
  .loader__lights { bottom: calc(max(24px, env(safe-area-inset-bottom, 0px)) + 19px); }
}

/* Hero entry (§4) */
.hero__title .line {
  display: block;
  overflow: clip;
  padding: 0 .12em .08em;
  margin: 0 -.12em -.08em;
}
.hero__title .line > span {
  display: block;
  animation: am-rise .6s var(--carve) 1.75s both;
}
.hero__title .line:nth-child(2) > span { animation-delay: 1.81s; }

/* Second visit (html.loader-short) · 0.6 s */
.loader-short .loader { animation-delay: .6s; }
.loader-short .loader__trace use { animation: none; opacity: 0; }
.loader-short .loader__rise { animation: none; transform: none; }
.loader-short .loader__gates .g { animation: none; transform: none; }
.loader-short .loader__pun,
.loader-short .loader__underline { display: none; }
.loader-short .loader__s { --am-s: 51; animation: none; }
.loader-short .loader__c { --am-c: 85; animation: none; }
.loader-short .loader__lights i { animation: none; background: #FFD60A; }
.loader-short .loader__topo { opacity: 1; animation: am-fade-out .15s linear .15s forwards; }
.loader-short .loader__center,
.loader-short .loader__chrono,
.loader-short .loader__lights { animation: am-fade-out .15s linear .15s forwards; }
.loader-short .loader__cut { animation: am-cut .4s var(--carve) .18s forwards; }
.loader-short .hero__title .line > span { animation-delay: .35s; }
.loader-short .hero__title .line:nth-child(2) > span { animation-delay: .41s; }

/* Skip (fx.js): the hero rises at once */
.loader-done .hero__title .line > span { animation-delay: 0s; }
.loader-done .hero__title .line:nth-child(2) > span { animation-delay: .06s; }

/* from + to: a float rounding at the end of a 10 ms run must never leave it visible */
@keyframes am-loader-out { from, to { visibility: hidden; pointer-events: none; } }
@keyframes am-cut { from { stroke-width: 6; } to { stroke-width: 3400; } }
@keyframes am-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes am-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes am-draw { to { stroke-dashoffset: 0; } }
@keyframes am-draw-both { to { stroke-dasharray: 1 0; stroke-dashoffset: .5; } }
@keyframes am-ink { from, to { stroke-opacity: 1; } }
@keyframes am-gate { from { transform: scale(0) rotate(-12deg); } to { transform: scale(1) rotate(0deg); } }
@keyframes am-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes am-s { from { --am-s: 0; } to { --am-s: 51; } }
@keyframes am-c { from { --am-c: 0; } to { --am-c: 99; } }
@keyframes am-final-c { from, to { --am-c: 85; } }
@keyframes am-light { to { background: #FFD60A; } }
@keyframes am-rise { from { transform: translateY(42%); } }


/* ==========================================================================
   05 · Header, plaque, menu pill, menu, rail, progress, skip
   ========================================================================== */

.skip {
  position: fixed;
  top: 12px;
  left: max(12px, env(safe-area-inset-left, 0px));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-sm);
  background: #FFD60A;
  color: #0B1116;
  font-family: var(--f-grot);
  font-stretch: 112%;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(calc(-100% - 24px));
  transition: transform var(--t-comp) var(--carve);
}
.skip:focus,
.skip:focus-visible {
  transform: none;
  outline: 2px solid #0B1116;
  outline-offset: 3px;
}

/* Header */
.hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(var(--gut-l), calc((100% - 1440px) / 2 + var(--gut)));
  padding-right: max(var(--gut-r), calc((100% - 1440px) / 2 + var(--gut)));
  color: var(--fg);
  background: transparent;
  transition: transform var(--t-comp) var(--carve), background-color var(--t-tone) var(--carve);
}
.hdr.is-hidden { transform: translateY(-110%); }
.hdr.is-hidden:focus-within,
.menu-open .hdr,
.menu-open .hdr.is-hidden { transform: none; }

.hdr__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  min-width: 44px;
  color: var(--fg);
  text-decoration: none;
  flex: none;
}
.hdr__mark {
  width: 39px;
  height: 28px;
  flex: none;
  overflow: visible;
  transition: transform var(--t-comp) var(--glide);
}
.hdr__logo:hover .hdr__mark { transform: translateY(-2px); }
.hdr__name {
  font-family: var(--f-grot);
  font-stretch: 112%;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hdr__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}

/* Menu pill */
.hdr__menu,
.menu__close {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  min-width: 44px;
  padding: 0 16px 0 20px;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  transition: border-color var(--t-comp) var(--glide), background-color var(--t-comp) var(--glide), color var(--t-comp) var(--glide);
}
.hdr__menu:hover,
.menu__close:hover { border-color: var(--fg); }

.hdr__menu-icon {
  position: relative;
  display: block;
  width: 26px;
  height: 14px;
  flex: none;
}
.hdr__menu-icon i {
  position: absolute;
  top: 6px;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--t-comp) var(--carve), opacity var(--t-micro) linear;
}
.hdr__menu-icon i:nth-child(1) { left: 0;    transform: rotate(35deg); }
.hdr__menu-icon i:nth-child(2) { left: 8px;  transform: rotate(-35deg); }
.hdr__menu-icon i:nth-child(3) { left: 16px; transform: rotate(35deg); }
.hdr__menu:hover .hdr__menu-icon i:nth-child(2) { transform: rotate(-35deg) translateY(-1px); }
.hdr__menu[aria-expanded="true"] .hdr__menu-icon i:nth-child(1) { transform: translateX(8px) rotate(45deg) scaleX(1.5); }
.hdr__menu[aria-expanded="true"] .hdr__menu-icon i:nth-child(2) { transform: scaleX(0); opacity: 0; }
.hdr__menu[aria-expanded="true"] .hdr__menu-icon i:nth-child(3) { transform: translateX(-8px) rotate(-45deg) scaleX(1.5); }

/* Menu (data-lock="nuit") */
.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-nuit-2);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .6s var(--carve), visibility 0s linear .6s;
}
.menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path .6s var(--carve), visibility 0s linear 0s;
}
.menu::before {
  /* faint contour plate behind the list */
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--plan-tile-jaune);
  background-size: 240px 240px;
  opacity: .06;
  pointer-events: none;
}
.menu__in {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: max(32px, env(safe-area-inset-bottom, 0px));
}
.menu__top {
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.menu__close::before,
.menu__close::after {
  content: "";
  order: 2;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: rotate(45deg);
}
.menu__close::after {
  margin-left: -26px;
  transform: rotate(-45deg);
}
.menu__close { padding-right: 18px; }

.menu__list {
  list-style: none;
  margin: clamp(24px, 5vh, 80px) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--col-gap);
}
.menu__list > li { min-width: 0; }
.menu__link {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 28px);
  min-height: 44px;
  padding: clamp(6px, 1.2vh, 14px) 0;
  border-top: 1px solid var(--line);
  color: var(--fg);
  text-decoration: none;
}
.menu__num {
  flex: none;
  width: 2.6em;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-comp) var(--glide);
}
.menu__title {
  position: relative;
  min-width: 0;
  font-family: var(--f-grot);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(28px, min(4.6vw, 5.8vh), 64px);
  line-height: 1.02;
  letter-spacing: -.012em;
  transition: transform var(--t-comp) var(--glide);
}
.menu__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.14em;
  height: 6px;
  background: var(--accent-text);
  -webkit-mask: var(--zigzag) repeat-x 0 0 / 16px 6px;
  mask: var(--zigzag) repeat-x 0 0 / 16px 6px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--t-comp) var(--carve);
}
.menu__link:hover .menu__title,
.menu__link:focus-visible .menu__title { transform: translateX(12px); }
.menu__link:hover .menu__title::after,
.menu__link:focus-visible .menu__title::after { clip-path: inset(0 0 0 0); }
.menu__link:hover .menu__num,
.menu__link:focus-visible .menu__num { color: var(--accent-text); }

.menu__foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.menu__foot .micro { margin-left: auto; }

/* Rail (L only, built by fx.js) */
.rail {
  position: fixed;
  right: max(10px, env(safe-area-inset-right, 0px));
  top: 20vh;
  z-index: 40;
  width: 36px;
  height: 60vh;
  opacity: 0;
  pointer-events: none;              /* stays focusable: .rail:focus-within reveals it (R10) */
  transform: translateX(8px);
  transition: opacity var(--t-comp) var(--glide), transform var(--t-comp) var(--glide);
}
.rail.is-visible,
.rail:focus-within {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.rail__list {
  position: relative;
  list-style: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.rail__line {
  /* 1px hairline zigzagging between the gates, drawn by fx.js */
  color: var(--fg-2);
  opacity: .65;
}
.rail__list > li {
  position: relative;
  height: 24px;
}
.rail__gate {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg);
  text-decoration: none;
  transition: background-color var(--t-comp) var(--glide), border-color var(--t-comp) var(--glide), color var(--t-comp) var(--glide), transform var(--t-micro) var(--glide);
}
.rail__gate[data-side="r"] { left: 12px; }
.rail__flag {
  display: block;
  width: 7px;
  height: 14px;
  overflow: visible;
}
.rail__gate:hover { transform: scale(1.12); border-color: var(--fg); }
.rail__gate.is-current {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-accent);
  box-shadow: 0 0 0 1px var(--lit-case);
}
.rail__label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  translate: 0 -50%;
  display: flex;
  gap: 8px;
  padding: 6px 9px;
  border-radius: var(--r-xs);
  background: var(--c-nuit-2);
  color: #EEF2F0;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity var(--t-micro) var(--glide), transform var(--t-micro) var(--glide);
  pointer-events: none;
}
.rail__num { color: #9FB0B9; }
.rail__name { color: #EEF2F0; }
.rail__gate:hover .rail__label,
.rail__gate:focus-visible .rail__label {
  opacity: 1;
  transform: none;
}

/* Progress (S and M) */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: 3px;
  pointer-events: none;
}
.progress i {
  display: block;
  height: 100%;
  background: var(--accent-fill);
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
}


/* ==========================================================================
   06 · Buttons, links, mode plan, focus
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-sm);
  font-family: var(--f-grot);
  font-stretch: 112%;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--t-comp) var(--glide),
    border-color var(--t-comp) var(--glide),
    color var(--t-comp) var(--glide),
    background-position .6s var(--glide);
}

/* Text roll (§5.4) */
.btn__in {
  display: inline-flex;
  flex-direction: column;
  height: 1.2em;
  overflow: clip;
}
.btn__t {
  display: block;
  line-height: 1.2;
  transition: transform var(--t-comp) var(--carve);
}
.btn:hover .btn__t,
.btn:focus-visible .btn__t { transform: translateY(-100%); }

/* Piste-sign plaque */
.btn--plaque {
  height: 44px;
  padding: 0 18px 0 16px;
  margin-right: 12px;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  background-color: var(--accent-fill);
  color: var(--on-accent);
}
.btn--plaque::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(100% - .5px);
  width: 12px;
  height: 100%;
  background-color: inherit;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: width var(--t-comp) var(--glide);
}
.btn--plaque:hover::after,
.btn--plaque:focus-visible::after { width: 16px; }
.btn--sm { font-size: 12px; }

.btn--ghost {
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--line);
  background-color: transparent;
  color: var(--fg);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background-color: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-accent);
}
.btn--ghost:active { background-color: var(--c-jaune-2); border-color: var(--c-jaune-2); }

/* Zigzag underline links */
.link {
  position: relative;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
  text-underline-offset: .28em;
  transition: text-decoration-color var(--t-micro) linear;
}
.link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.5em;
  height: 6px;
  background: var(--accent-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6'%3E%3Cpath d='M0 5 L4 1 L8 5 L12 1 L16 5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 0/16px 6px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6'%3E%3Cpath d='M0 5 L4 1 L8 5 L12 1 L16 5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 0/16px 6px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--t-comp) var(--carve);
  pointer-events: none;
}
.link:hover,
.link:focus-visible { text-decoration-color: transparent; }
.link:hover::after,
.link:focus-visible::after { clip-path: inset(0 0 0 0); }

/* Mode plan (§5.3): identical on :hover and :focus-visible */
.plan {
  background-size: 240px 240px;
  background-position: 0 0;
  transition:
    background-color var(--t-comp) var(--glide),
    border-color var(--t-comp) var(--glide),
    color var(--t-comp) var(--glide),
    background-position .6s var(--glide),
    --fg var(--t-comp) var(--glide),
    --fg-2 var(--t-comp) var(--glide),
    --accent-text var(--t-comp) var(--glide),
    --line var(--t-comp) var(--glide),
    --ghost var(--t-comp) var(--glide);
}
.plan:hover,
.plan:focus-visible {
  background-color: #FFD60A;
  color: #0B1116;
  --picto-cut: #FFD60A;
  --pa: #0B1116;
  background-image: var(--plan-tile-ink);
  background-position: 40px 0;
  border-color: #FFD60A;
  /* everything inside reads as ink on yellow */
  --fg: #0B1116;
  --fg-2: #413C13;
  --accent-text: #0B1116;
  --accent-fill: #0B1116;
  --on-accent: #FFD60A;
  --line: rgba(11,17,22,.28);
  --ghost: rgba(11,17,22,.35);
  --mark: rgba(11,17,22,.12);
  --trace: #0B1116;
  --trace-case: transparent;
  --card-fg: #0B1116;
}
.btn--plaque.plan:hover,
.btn--plaque.plan:focus-visible { color: #0B1116; }
.btn--plaque:active,
.btn--plaque.plan:active { background-color: var(--c-jaune-2); }

/* Focus (§10): 2px --focus, offset 3px */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
.hdr :focus-visible { outline-offset: 4px; }


/* ==========================================================================
   07 · Shared patterns
   ========================================================================== */

/* Mixed titles */
.mix {
  font-size: var(--fs-h3);
  line-height: .9;
  font-weight: 400;
  color: var(--fg);
}
.mix--display { font-size: var(--fs-display); }
.mix__s,
.mix__g { display: block; }
.mix__s {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: 1.04em;
  line-height: .94;
  letter-spacing: -.015em;
  color: var(--accent-text);
}
.mix__g {
  font-family: var(--f-grot);
  font-stretch: 125%;
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--fg);
}
.mix__s + .mix__g,
.mix__g + .mix__s { margin-top: .04em; }

/* Giant numerals */
.num {
  display: block;
  margin: 0;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums proportional-nums;
  line-height: .8;
  letter-spacing: -.03em;
  color: var(--accent-text);
}

/* Tag */
.tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 8px;
}
.tag__num,
.tag__meta {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  white-space: nowrap;
}
.tag__num {
  background: var(--accent-fill);
  color: var(--on-accent);
  font-family: var(--f-grot);
  font-stretch: 112%;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--r-xs) 0 0 var(--r-xs);
}
.tag__meta {
  background: #141D24;
  color: #EEF2F0;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  margin-right: 12px;
}

/* Chips (piste difficulty) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
}
.chip__ico {
  flex: none;
  width: 12px;
  height: 12px;
  color: var(--fg);
  overflow: visible;
}
.chip[data-diff="noire"] .chip__ico { width: 18px; }

/* Facts */
.facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s5) var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  max-width: 880px;
}
.fig {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.fig__n {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: var(--fs-fig);
  line-height: .92;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
  color: var(--accent-text);
  white-space: nowrap;
}

/* Rigs and pictos */
.rig {
  flex: none;
  width: 120px;
  height: 120px;
  color: var(--fg);
  overflow: visible;
}
.rig--l { width: 160px; height: 160px; }
.rig--xl { width: clamp(168px, 16vw, 240px); height: clamp(168px, 16vw, 240px); }
.rig--other {
  --mk-r: transparent;
  --mk-y: transparent;
  --mk-k: transparent;
  color: var(--fg-2);
}
.picto {
  flex: none;
  width: 48px;
  height: 48px;
  color: var(--fg);
  overflow: visible;
}

/* Handwritten marks (§7.6) */
.note {
  position: absolute;
  margin: 0;
  font-family: var(--f-hand);
  font-size: var(--fs-hand);
  font-weight: 400;
  line-height: 1;
  color: var(--accent-text);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
.note__w { display: block; }
.note__s {
  display: block;
  overflow: visible;
}
.note__s path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
}
.note.will-draw .note__s path { stroke-dashoffset: 1.001; }
.note.is-drawn .note__s path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--t-block) var(--carve);
}

/* Tooltips (data-lock="nuit") */
.tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  background: var(--c-nuit-2);
  color: #EEF2F0;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(11,17,22,.28), 0 0 0 1px rgba(238,242,240,.06);
}

/* Photo crops (§7.7) · duotone at rest, colour on hover or focus */
.crop {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  flex: none;
}
.crop__win {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xs);
  background: #0B1116;
}
.crop__win img {
  position: absolute;
  max-width: none;
  width: 480px;
  height: 480px;
  filter: url(#am-duotone);
}
.crop__win::after {
  /* full-colour copy, cross-faded over the duotone in 400 ms */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/portrait.jpg");
  background-size: 480px 480px;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .4s var(--glide);
  pointer-events: none;
}
.crop--a .crop__win { width: 132px; height: 156px; }
.crop--a .crop__win img { left: -235.2px; top: -127.2px; }
.crop--a .crop__win::after { background-position: -235.2px -127.2px; }
.crop--b .crop__win { width: 108px; height: 300px; }
.crop--b .crop__win img { left: -36px; top: -180px; }
.crop--b .crop__win::after { background-position: -36px -180px; }
.crop:hover .crop__win::after,
.crop:focus-within .crop__win::after,
.split__half:is(:hover, :focus-within) .crop__win::after { opacity: 1; }
.crop figcaption { max-width: 16em; }


/* ==========================================================================
   08 · Hero « Départ » (§6.2)
   ========================================================================== */

.hero {
  --cart-w: min(42vw, 560px);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--hdr-h) + clamp(24px, 4vw, 56px));
  padding-bottom: clamp(24px, 3vw, 40px);
}
.hero__piste {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hero__grid {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(16px, 1.8vw, 28px);
}

.hero__eyebrow { align-self: end; }

.hero__title {
  position: relative;
  z-index: 2;
  container-type: inline-size;
  margin: 0;
  color: var(--fg);
}
.hero__first {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: var(--fs-first);
  line-height: .9;
  letter-spacing: -.025em;
  color: var(--fg);
  padding-left: .02em;
}
.hero__last {
  font-family: var(--f-grot);
  font-stretch: 125%;
  font-weight: 900;
  font-size: min(var(--fs-last), 12.6cqw);
  line-height: .86;
  letter-spacing: -.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg);
}

.hero__hook {
  font-size: var(--fs-lead);
  line-height: 1.45;
  font-weight: 500;
  max-width: 30em;
  align-self: start;
}

/* Cartouche */
.cartouche {
  position: relative;
  width: var(--cart-w);
  aspect-ratio: 1;
  margin: 0;
}
html.cursor-live #am-portrait { cursor: none; }
.cartouche__rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--topo-idx);
  stroke-width: 1;
  pointer-events: none;
}
.cartouche__rings path { vector-effect: non-scaling-stroke; }
.cartouche__rings path:nth-child(2) { opacity: .7; }
.cartouche__rings path:nth-child(3) { opacity: .45; }
.cartouche__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0B1116;
  -webkit-clip-path: url(#am-cartouche);
  clip-path: url(#am-cartouche);
}
@supports not ((clip-path: inset(0)) or (-webkit-clip-path: inset(0))) {
  .cartouche__clip { border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%; }
}
.cartouche__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: url(#am-duotone);
}
.cartouche__iso {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cartouche__grain,
.jo__grain {
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: .08;
  pointer-events: none;
}
.cartouche__tag {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  padding: 4px 7px 3px;
  border-radius: var(--r-xs);
  background: #FFD60A;
  color: #0B1116;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
.cartouche__cap {
  position: absolute;
  left: 0;
  top: calc(100% + 14px);
  display: flex;
  gap: 10px;
  align-items: center;
  white-space: nowrap;
}
.cartouche__cap::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
}

/* Next start card (data-lock="nuit") */
.next {
  position: relative;
  width: 300px;
  max-width: 100%;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--c-nuit-2);
  color: #EEF2F0;
  box-shadow: 0 1px 0 rgba(238,242,240,.04) inset;
}
.next__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--fg-2);
}
.next__label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFD60A;
}
.next__list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.next__race {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name date" "what what";
  column-gap: 12px;
  row-gap: 2px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}
.next__race > * { min-width: 0; }
.next__race.is-active {
  order: -1;
  grid-template-areas: "trace trace" "name count" "date count" "what what";
  padding-top: 0;
  padding-bottom: 12px;
  border-top: 0;
}
.next__race--after { grid-template-areas: "name" "what"; grid-template-columns: minmax(0, 1fr); }
.next__trace {
  grid-area: trace;
  width: 100%;
  height: auto;
  aspect-ratio: 240 / 64;
  margin-bottom: 10px;
  color: var(--fg);
  overflow: visible;
}
.next__race:not(.is-active) .next__trace,
.next__race:not(.is-active) .next__count { display: none; }
.next__name {
  grid-area: name;
  font-family: var(--f-grot);
  font-stretch: 112%;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.next__race.is-active .next__name { font-size: 19px; line-height: 1.15; }
.next__nat {
  margin-left: 4px;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--fg-2);
  vertical-align: .12em;
}
.next__date {
  grid-area: date;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.next__race.is-active .next__date { text-align: left; }
.next__what {
  grid-area: what;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--fg-2);
}
.next__race.is-active .next__what { color: var(--fg); font-size: 13px; }
.next__count {
  grid-area: count;
  align-self: center;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: #FFD60A;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.next__count:empty { display: none; }
.next__race.is-past { opacity: .5; }
.next__race.is-live .next__count::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #E3262E;
  vertical-align: .2em;
  animation: am-blink 1s steps(2, jump-none) infinite;
}
.next__note {
  margin-top: 6px;
  font-size: 9.5px;
  color: var(--fg-2);
}

/* Legend (map key) */
.legend {
  position: relative;
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: .03em;
  color: var(--fg-2);
}
.legend__tab {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-100%);
  padding: 3px 8px 2px;
  border-radius: var(--r-xs) var(--r-xs) 0 0;
  background: var(--accent-fill);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.3;
}
.legend__id b { color: var(--fg); font-weight: 600; }
.legend__sample path { fill: none; stroke: var(--topo-idx); stroke-width: 2; }
.legend__key {
  display: flex;
  align-items: center;
  gap: 12px;
}
.legend__sample {
  flex: none;
  width: 64px;
  height: 16px;
  fill: none;
  stroke: var(--topo-idx);
  stroke-width: 1.35;
  stroke-linecap: round;
  overflow: visible;
}

/* Cue « Descendre » */
.cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 44px;
  padding: 4px 6px;
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--t-micro) linear;
}
.cue:hover { color: var(--fg); }
.cue__piste {
  position: relative;
  display: block;
  width: 2px;
  height: 48px;
  background: repeating-linear-gradient(to bottom, var(--ghost) 0 3px, transparent 3px 7px);
}
.cue__piste i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--accent-fill);
  box-shadow: 0 0 0 1px var(--lit-case);
  animation: am-cue 2.4s var(--carve) infinite;
}
.cue__t { color: inherit; }

@keyframes am-cue {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  78% { transform: translateY(42px); opacity: 1; }
  100% { transform: translateY(42px); opacity: 0; }
}
@keyframes am-blink { 50% { opacity: 0; } }


/* ==========================================================================
   09 · Manifeste + marquees (§6.3)
   ========================================================================== */

.manif { padding-top: clamp(48px, 6vw, 96px); }

.marquee {
  position: relative;
  overflow: clip;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
.wrap > .marquee { margin-inline: calc(50% - 50vw); }
.marquee__track {
  display: flex;
  width: max-content;
  animation: am-marquee 40s linear infinite;
}
.marquee[data-marquee-dir="-1"] .marquee__track { animation-direction: reverse; }
.marquee__item {
  display: flex;
  align-items: center;
  gap: .3em;
  flex: none;
  margin: 0;
  padding-right: .3em;
  font-family: var(--f-grot);
  font-stretch: 125%;
  font-weight: 900;
  font-size: var(--fs-marquee);
  line-height: 1.04;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--fg);
  transform: skewX(var(--skew, 0deg));
}
.marquee__gate {
  flex: none;
  width: .25em;
  height: .5em;
  color: var(--fg);
  overflow: visible;
}
.marquee--outline .marquee__item {
  color: transparent;
  -webkit-text-stroke: 1px var(--accent-text);
}
.marquee + .marquee { margin-top: clamp(4px, .6vw, 10px); }

@keyframes am-marquee { to { transform: translateX(-50%); } }

.manif__grid {
  margin-top: clamp(64px, 9vw, 140px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(32px, 4vw, 56px);
}
.manif__title { grid-column: 1 / 9; }
/* « Huit opérations » (≈12em) must hold on one line inside columns 1–8 */
.manif__title.mix--display { font-size: clamp(38px, 5vw, 72px); line-height: .92; }
.manif__title .mix__s { padding-left: 1.1em; }
.manif__title .mix__g + .mix__s { margin-top: .02em; }
.manif__title .mix__s + .mix__g { margin-top: .22em; }
.manif__lead { grid-column: 1 / 7; }
.manif__side {
  grid-column: 9 / 13;
  grid-row: 1 / span 2;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.kf-list {
  list-style: none;
  border-top: 1px solid var(--line);
}
.kf-list > li { border-bottom: 1px solid var(--line); }
.kf {
  display: grid;
  grid-template-columns: calc(var(--fs-fig) * 1.7) minmax(0, 1fr);
  align-items: baseline;
  column-gap: 16px;
  width: calc(100% + 24px);
  margin-inline: -12px;
  padding: 10px 12px;
  text-align: left;
  background: transparent;
  color: var(--fg);
  border-radius: var(--r-xs);
  transition: transform var(--t-micro) var(--glide), box-shadow var(--t-micro) linear;
}
.kf > * { min-width: 0; }
.kf__n {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: var(--fs-fig);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
  color: var(--accent-text);
  justify-self: start;
  padding: 0 .08em;
  background: linear-gradient(transparent 58%, transparent 58% 92%, transparent 92%);
  transition: background var(--t-micro) linear;
}
.kf__l {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-2);
}
button.kf:hover,
button.kf:focus-visible,
.kf[aria-pressed="true"] { transform: translateX(6px); }
button.kf:hover .kf__n,
button.kf:focus-visible .kf__n,
.kf[aria-pressed="true"] .kf__n {
  background: linear-gradient(transparent 58%, var(--mark) 58% 92%, transparent 92%);
}
.kf[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--accent-text); }
.kf--static { cursor: default; }
.kf-hint { color: var(--fg-2); }


/* ==========================================================================
   10 · Story « La carte de sa course » (§6.4)
   ========================================================================== */

.story__piste {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.chap { padding-block: var(--pad-chap); }
.chap--big {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.chap__grid {
  display: grid;
  grid-template-columns: clamp(120px, 22vw, 300px) minmax(0, 1fr);
}
.chap__rail {
  position: relative;
  min-width: 0;
}
.chap__body {
  position: relative;
  min-width: 0;
}
.chap__body > * + * { margin-top: var(--s6); }
.chap__body > .tag + * { margin-top: var(--s5); }
.chap__body > :is(.facts, .chap__media, figure, .board-wrap, .passes, .route, .record, .chips) { margin-top: var(--s7); }

.chap__title { max-width: 18ch; }
.chap__title.mix { font-size: var(--fs-h3); }

.story__intro .chap__body > .eyebrow + * { margin-top: var(--s5); }
.story__intro .lead { max-width: 30em; }

/* Gates (anchors for the story piste) */
.gate {
  position: absolute;
  top: 4px;
  left: 30%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  pointer-events: none;
}
.gate[data-side="r"] { left: 70%; }

.piste-tag {
  position: absolute;
  top: 34px;
  left: 30%;
  max-width: calc(70% - 8px);
  padding: 4px 7px 3px;
  border-radius: var(--r-xs);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: normal;
}
.gate[data-side="r"] ~ .piste-tag { left: auto; right: 30%; }
.piste-tag--abandon { background: #E3262E; color: #FFFFFF; }
.piste-tag--reprise { background: #FFD60A; color: #0B1116; }

/* Start and finish glyphs */
.story__start,
.story__finish {
  position: absolute;
  left: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  color: var(--fg);
}
.story__start { top: 0; }
.story__finish { bottom: 0; }
.story__start .picto,
.story__finish .picto { width: 48px; height: 48px; }

/* Media row */
.chap__media {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s6) var(--s7);
}
.chap__media:has(> .ridge) {
  position: relative;
  padding-top: 40px;
}
.chap__media > :not(.ridge, .crack) { position: relative; z-index: 1; }
.chap__media .rig { width: 140px; height: 140px; }
.chap__media > .cal { flex: 1 1 100%; }
#p07 .chap__media { align-items: flex-end; gap: var(--s6) var(--s7); }
#p07 .chap__media > .podium { flex: 0 1 300px; }
#p07 .chap__media > .quote { flex: 1 1 320px; }
.chap__media .rig.rig--l { width: 160px; height: 160px; }
.chap__media > .picto,
.chap__media > svg.picto { width: 96px; height: 96px; }

/* P03 crack across the top of the body */
.crack {
  position: absolute;
  top: -56px;
  left: 0;
  width: 100%;
  height: 40px;
  max-width: none;
  overflow: visible;
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.crack path { vector-effect: non-scaling-stroke; }

/* P05 ridge (behind the media) */
.ridge {
  left: -24px;
  right: -24px;
  bottom: 0;
  width: calc(100% + 48px);
  max-width: none;
  height: 160px;
  color: var(--topo-idx);
  fill: currentColor;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 30%, transparent 96%),
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #000 30%, transparent 96%),
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}

/* P04 · 947 */
.chap__title--947 {
  display: flex;
  flex-direction: column;
  max-width: none;
}
.num--947 {
  font-size: var(--fs-num);
  margin-left: -.04em;
}
.chap__title--947 .mix__g {
  font-size: var(--fs-h3);
  max-width: 14ch;
  margin-top: .1em;
}

.cal {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0;
  container-type: inline-size;
}
.cal__svg {
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 430;
  overflow: visible;
  color: var(--fg-2);
}
.cal__readout {
  margin-top: 10px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 14px;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.cal__key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cal__key::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg-2);
  background: color-mix(in srgb, var(--fg-2) 55%, transparent);
}
.cal__key--chute::before { width: 8px; height: 8px; background: #E3262E; }
.cal__key--reprise::before {
  width: 9px;
  height: 9px;
  border-radius: 0;
  background: #FFD60A;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.cal__key--tv::before {
  width: 12px;
  height: 5px;
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--fg-2);
  border-bottom: 0;
}
#am-season-tip,
#am-cal947-tip { max-width: 100%; white-space: normal; }

/* « jour 947 »: the arrow tip lands on the last dot (col 31, row 10) */
.note--jour {
  left: 93.1cqw;
  top: 38.75cqw;
  width: 0;
  height: 0;
}
.note--jour .note__s {
  position: absolute;
  left: -12px;
  top: -48px;
  width: 120px;
  height: 60px;
  transform: scaleX(-1);
}
.note--jour .note__w {
  position: absolute;
  left: 92px;
  top: -96px;
  transform: rotate(-5deg);
}

/* P06 · ranking */
.ranking { max-width: 420px; }
.ranking svg,
.climb svg,
.splits svg,
.route__svg {
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--fg);
}
.ranking svg { aspect-ratio: 320 / 160; }
.ranking figcaption,
.route figcaption { margin-top: 10px; }
.climb,
.splits { width: 100%; }
.climb figcaption,
.splits figcaption { display: block; margin-top: 8px; }

/* P07 · Gurgl */
.num--2 {
  font-weight: 800;
  font-size: min(62vh, 48vw);
  line-height: .78;
  letter-spacing: -.04em;
}
#p07 .chap__title .mix__g,
#p08 .chap__title .mix__g {
  font-size: .56em;
  line-height: .92;
  margin-top: .22em;
}
#p07 .chap__title,
#p08 .chap__title { max-width: 22ch; }

.board-wrap {
  position: relative;
  max-width: 560px;
  padding-bottom: 72px;
}
.board {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--r-md);
  background: var(--c-nuit-2);
  color: #EEF2F0;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  table-layout: auto;
}
.board caption {
  caption-side: bottom;
  padding-top: 12px;
  text-align: left;
  color: var(--fg-2);
}
#p07 .board caption { color: #413C13; }
.board th {
  height: 40px;
  padding: 0 16px;
  text-align: left;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9FB0B9;
  vertical-align: middle;
}
.board td {
  height: 56px;
  padding: 0 16px;
  border-top: 1px solid #2C3B45;
  vertical-align: middle;
  white-space: nowrap;
}
.board th:first-child,
.board td:first-child { width: 3.6em; text-align: center; padding-left: 18px; }
.board th:last-child,
.board td:last-child { text-align: right; }
.board td:nth-child(2) { font-weight: 600; letter-spacing: .02em; }
.board td span { margin-left: 6px; font-weight: 400; color: #9FB0B9; }
.board tr.is-me td {
  background: #FFD60A;
  color: #0B1116;
  border-top-color: #FFD60A;
  font-weight: 700;
}
.board tr.is-me td span { color: #413C13; }
.board tr.is-me td:first-child {
  background-image: linear-gradient(90deg, #0B1116 0 3px, #FFD60A 3px 6px, #E3262E 6px 9px, transparent 9px);
}
.board tr.is-me + tr td { border-top-color: #FFD60A; }
.board thead th:first-child { border-top-left-radius: var(--r-md); }
.board thead th:last-child { border-top-right-radius: var(--r-md); }
.board tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r-md); }
.board tbody tr:last-child td:last-child { border-bottom-right-radius: var(--r-md); }

/* « +0.07 » circle around row 2, écart cell */
.note--ecart {
  top: 89px;
  right: -34px;
  width: 160px;
  height: 70px;
}
.note--ecart .note__s {
  width: 160px;
  height: 70px;
}
.note--ecart .note__w {
  position: absolute;
  right: 34px;
  top: 178px;
  transform: rotate(-6deg);
}

.climb svg { aspect-ratio: 320 / 140; }
.splits svg { aspect-ratio: 400 / 110; }

.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 4px;
  max-width: 320px;
  margin: 0;
}
.podium > *,
.podium__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.podium .rig {
  width: 100%;
  max-width: 104px;
  height: auto;
  aspect-ratio: 1;
  margin-bottom: -2px;
}
.podium__block {
  display: grid;
  place-items: start center;
  width: 100%;
  padding-top: 8px;
  border-radius: 2px 2px 0 0;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.podium > :nth-child(1) .podium__block,
.podium__step--2 .podium__block { height: 64px; }
.podium > :nth-child(2) .podium__block,
.podium__step--1 .podium__block { height: 92px; }
.podium > :nth-child(3) .podium__block,
.podium__step--3 .podium__block { height: 44px; }

.quote { margin: 0; max-width: 22em; }
.chap__foot { max-width: 40em; color: var(--fg-2); }
.quote p {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.1;
  letter-spacing: -.015em;
  text-indent: -.45em;
  text-wrap: balance;
  hanging-punctuation: first;
}
.quote cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
}

/* P08 · Bormio */
.jo {
  margin: 0;
  max-width: 960px;
}
.jo__frame {
  position: relative;
  aspect-ratio: 798 / 200;
  border-radius: var(--r-md);
  overflow: hidden;
  overflow: clip;
  background: #0B1116;
}
.jo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#am-snow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.jo__cones {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    conic-gradient(from 128deg at 0% -8%, transparent 0deg, rgba(255,244,214,.16) 16deg, rgba(255,244,214,.07) 36deg, transparent 50deg),
    conic-gradient(from 182deg at 100% -8%, transparent 0deg, rgba(255,244,214,.07) 14deg, rgba(255,244,214,.16) 34deg, transparent 50deg);
}
.jo__grain { opacity: .1; }

.num--5e { font-size: var(--fs-num); }
.num--5e > span:not([aria-hidden]) {
  font-size: .34em;
  vertical-align: 1.5em;
  margin-left: .04em;
  letter-spacing: 0;
}

.chap__data {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}

.record {
  display: grid;
  gap: 14px;
  max-width: 640px;
  margin: 0;
}
.record > figcaption { order: 0; margin-bottom: 4px; }
.record__lane {
  order: 1;
  position: relative;
  display: grid;
  grid-template-columns: 4.2em minmax(0, 1fr) 2.6em;
  grid-template-areas: "year who rank" "year axis rank";
  column-gap: 16px;
  row-gap: 8px;
  align-items: center;
}
.record__lane--now { order: 3; }
.record__year {
  grid-area: year;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}
.record__lane--now .record__year { color: var(--fg); }
.record__who { grid-area: who; font-size: var(--fs-small); line-height: 1.4; }
.record__axis {
  grid-area: axis;
  position: relative;
  display: block;
  height: 14px;
  background:
    linear-gradient(90deg, var(--ghost) 0 1.5px, transparent 1.5px) 0 50% / calc((100% - 1.5px) / 9) 10px repeat-x,
    linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat;
}
.record__axis::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc((var(--rank) - 1) / 9 * 100%);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -5.25px;
  border-radius: 50%;
  background: var(--fg-2);
  box-shadow: 0 0 0 3px var(--bg);
}
.record__lane--now .record__axis::after {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -6.25px;
  background: #FFD60A;
}
.record__rank {
  grid-area: rank;
  justify-self: end;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--fg-2);
}
.record__lane--now .record__rank { color: var(--accent-text); }
.record__gap {
  order: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: calc(2.1em - 1px);
  min-height: 28px;
  position: relative;
}
.record__gap::before {
  content: "";
  position: absolute;
  left: calc(2.1em - 1px);
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: repeating-linear-gradient(to bottom, var(--fg-2) 0 2px, transparent 2px 5px);
}
.record__gap { text-indent: 18px; }

/* P09 · passes */
.passes {
  --hole: var(--bg);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: var(--s5);
  max-width: 1040px;
}
.passes > li { min-width: 0; }
.pass {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "name count"
    "trace trace"
    "date barcode"
    "what note";
  column-gap: 14px;
  row-gap: 4px;
  aspect-ratio: 1.6;
  padding: 16px 18px 14px 34px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background-color: var(--card);
  color: var(--card-fg);
  --fg: var(--card-fg);
  --picto-cut: var(--card);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition:
    transform var(--t-comp-l) var(--glide),
    background-color var(--t-comp) var(--glide),
    border-color var(--t-comp) var(--glide),
    color var(--t-comp) var(--glide),
    background-position .6s var(--glide),
    --fg var(--t-comp) var(--glide),
    --fg-2 var(--t-comp) var(--glide),
    --accent-text var(--t-comp) var(--glide),
    --line var(--t-comp) var(--glide),
    --ghost var(--t-comp) var(--glide);
}
.pass > * { min-width: 0; }
.pass.is-next {
  --card: #FFD60A;
  --card-fg: #0B1116;
  --fg: #0B1116;
  --fg-2: #413C13;
  --accent-text: #0B1116;
  --accent-fill: #0B1116;
  --on-accent: #FFD60A;
  --line: rgba(11,17,22,.28);
  --ghost: rgba(11,17,22,.35);
  --trace: #0B1116;
  --trace-case: transparent;
  --mark: rgba(11,17,22,.12);
  --picto-cut: #FFD60A;
  --pa: #0B1116;
  background-color: #FFD60A;
  color: #0B1116;
  border-color: #FFD60A;
}
.pass.is-past { opacity: .6; }
.pass__perf {
  position: absolute;
  left: 11px;
  top: 14px;
  bottom: 14px;
  width: 9px;
  background: radial-gradient(circle at 4.5px 4.5px, var(--hole) 3.2px, transparent 3.7px) 0 0 / 9px 15px repeat-y;
  pointer-events: none;
}
.pass__perf::after {
  /* the tear line next to the holes */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  width: 1px;
  background: repeating-linear-gradient(to bottom, var(--line) 0 3px, transparent 3px 7px);
}
.pass__name {
  grid-area: name;
  align-self: start;
  font-family: var(--f-grot);
  font-stretch: 112%;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.pass__nat {
  margin-left: 4px;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--fg-2);
  vertical-align: .15em;
}
.pass__date {
  grid-area: date;
  align-self: end;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.pass__what {
  grid-area: what;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--fg-2);
}
.pass__count {
  grid-area: count;
  align-self: start;
  justify-self: end;
  font-family: var(--f-grot);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 40px;
  line-height: .86;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pass__count:empty { display: none; }
.pass.is-live .pass__count { color: #E3262E; }
.pass.is-next.is-live .pass__count { color: #0B1116; }
.pass__trace {
  grid-area: trace;
  width: 100%;
  height: 100%;
  min-height: 34px;
  align-self: center;
  color: var(--fg);
  overflow: visible;
}
.pass__barcode {
  grid-area: barcode;
  justify-self: end;
  align-self: end;
  width: 96px;
  height: 22px;
  color: var(--card-fg);
  fill: currentColor;
}
.pass__note {
  grid-area: note;
  justify-self: end;
  align-self: start;
  font-size: 8.5px;
  letter-spacing: .14em;
}
.pass__sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,214,10,.18), rgba(31,91,216,.18), rgba(227,38,46,.18), transparent 70%);
  background-size: 220% 220%;
  background-position: var(--mx, 50%) var(--my, 50%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity var(--t-comp) var(--glide);
  pointer-events: none;
}

/* P09 · route */
.route {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-areas: "svg list" "cap cap";
  column-gap: var(--s7);
  row-gap: var(--s4);
  align-items: center;
  margin: 0;
}
.route__svg {
  grid-area: svg;
  aspect-ratio: 600 / 220;
}
.route__list {
  grid-area: list;
  list-style: none;
  counter-reset: stop;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.route__list li {
  counter-increment: stop;
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.4;
}
.route__list li::before {
  content: counter(stop, decimal-leading-zero);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 1.9;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.route > figcaption { grid-area: cap; margin-top: 0; }


/* ==========================================================================
   11 · Season 2025-2026 (§6.5)
   ========================================================================== */

#saison.season-sec > .wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}
#saison.season-sec > .wrap > * { grid-column: 1 / -1; }
#saison.season-sec > .wrap > .eyebrow + * { margin-top: var(--s5); }
#saison.season-sec > .wrap > .mix + * { margin-top: var(--s6); }
#saison.season-sec > .wrap > .lead { grid-column: 1 / 8; }

.season {
  position: relative;
  margin: clamp(48px, 6vw, 88px) 0 0;
}
.season__chart {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 420;
  color: var(--fg);
}
.season__chart > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* art.js injects and positions the hit buttons and draws the yellow band in SVG */
.season__hits {
  position: absolute;
  inset: 0;
}
.season__hit {
  border-radius: var(--r-sm);
  -webkit-tap-highlight-color: transparent;
}
.season__hit:focus-visible { outline-offset: -2px; }
.season > figcaption { margin-top: 12px; }

.season__table {
  width: 100%;
  margin-top: clamp(40px, 5vw, 72px);
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
#saison.season-sec > .wrap > .season__table { grid-column: 1 / 8; }
.season__table caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 14px;
}
.season__table th {
  padding: 0 12px 10px 0;
  text-align: left;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-2);
  border-bottom: 1px solid var(--fg);
}
.season__table td {
  height: 48px;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-size: 15px;
  line-height: 1.35;
  transition: background-color var(--t-micro) linear;
}
.season__table td:first-child,
.season__table td:last-child {
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 13px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.season__table th:last-child,
.season__table td:last-child { text-align: right; padding-right: 4px; }
.season__table tbody tr.is-hover td { background-color: var(--mark); }
.season__table tbody tr[data-code="GUR"] td { font-weight: 700; }
.season__table tbody tr[data-code="GUR"] td:first-child { box-shadow: inset 3px 0 0 var(--accent-fill); padding-left: 10px; }
.season__table tbody tr:is([data-status="dnf1"], [data-status="dnf2"]) td:nth-child(3)::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  background: #E3262E;
  transform: rotate(45deg);
  vertical-align: .1em;
}
.season__table tbody tr[data-status="nq"] td:nth-child(3) { color: var(--fg-2); }
.season__table tfoot :is(td, th) {
  padding-top: 14px;
  padding-bottom: 0;
  border-bottom: 0;
  border-top: 1.5px solid var(--fg);
  font-weight: 700;
  font-size: 15px;
  text-align: left;
  color: var(--fg);
  font-family: var(--f-grot);
  letter-spacing: 0;
  text-transform: none;
}
.season__table tfoot td { text-align: right; padding-right: 4px; white-space: nowrap; }
.season__table time { font: inherit; }

.stats {
  list-style: none;
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
  align-content: start;
}
#saison.season-sec > .wrap > .stats { grid-column: 9 / 13; grid-template-columns: minmax(0, 1fr); }
.stats li {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.4;
  color: var(--fg-2);
}
.stats li { line-height: 1.25; }
.stats li:not(.stats__ec) {
  display: grid;
  grid-template-columns: calc(var(--stat-fs) * .62) minmax(0, 1fr);
  column-gap: 14px;
  align-items: baseline;
}
.stats { --stat-fs: clamp(36px, 3.4vw, 52px); }
.stats b {
  margin: 0;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: var(--stat-fs);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
  color: var(--accent-text);
  vertical-align: baseline;
}
.stats li > span { min-width: 0; }
.stats li.stats__ec {
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-wrap: balance;
}


/* ==========================================================================
   12 · Split « Sur la piste / Hors piste » (§6.6)
   ========================================================================== */

.split {
  display: flex;
  flex-direction: column;
}
.split__half {
  position: relative;
  min-width: 0;
  background: var(--bg);
  color: var(--fg);
}
.split__in {
  --split-pad: max(var(--gut), env(safe-area-inset-left, 0px));
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  height: 100%;
  padding: clamp(80px, 10vw, 150px) var(--split-pad);
}
.split .mix { font-size: clamp(44px, 6.2vw, 112px); }
.split .btn { align-self: flex-start; margin-top: var(--s2); }

.facts-list {
  display: grid;
  max-width: 560px;
}
.facts-list > div {
  display: grid;
  grid-template-columns: minmax(7.5rem, 34%) minmax(0, 1fr);
  gap: 4px 20px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.facts-list > div:last-child { border-bottom: 1px solid var(--line); }
.facts-list dt {
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 10.5px;
  line-height: 1.9;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.facts-list dd {
  font-size: 16px;
  line-height: 1.45;
}

/* « hors » across the seam */
.mix__h {
  position: absolute;
  left: calc(-1 * var(--split-pad));
  top: -.3em;
  z-index: 3;
  display: block;
  font-family: var(--f-hand);
  font-weight: 400;
  font-style: normal;
  font-size: 1.9em;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent-fill);
  white-space: nowrap;
  transform: translateX(-42%) rotate(-8deg);
  transform-origin: 50% 60%;
  -webkit-text-stroke: .06em #0B1116;
  paint-order: stroke fill;
  text-shadow: 0 0 1px #0B1116;
}
.mix__h .note__s {
  display: block;
  width: 100%;
  height: .13em;
  margin-top: -.06em;
  color: var(--accent-fill);
  filter: drop-shadow(1px 0 0 #0B1116) drop-shadow(-1px 0 0 #0B1116) drop-shadow(0 1px 0 #0B1116) drop-shadow(0 -1px 0 #0B1116);
}
.split__half--off .mix { position: relative; padding-top: .78em; }

/* Hobbies */
.hobbies {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5) var(--s6);
}
.hobby {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.hobby svg {
  width: 64px;
  height: 64px;
  color: var(--fg);
  overflow: visible;
}
/* The loops run on <use x y> elements. fill-box origins on <use> resolve
   before the x/y offset in Chrome, so the wheels orbited the bike instead
   of spinning. Origins are pinned in the 48-unit viewBox instead:
   wheel centre = (x + 8, y + 8), fanion pole = (x + 3, y + 18). */
.hobby .spin,
.hobby .wave,
.hobby .throw { transform-box: view-box; }
.hobby:nth-child(1) .spin:nth-of-type(2) { transform-origin: 12px 36px; }
.hobby:nth-child(1) .spin:nth-of-type(3) { transform-origin: 38px 36px; }
.hobby:nth-child(2) .spin:nth-of-type(2) { transform-origin: 12px 34px; }
.hobby:nth-child(2) .spin:nth-of-type(3) { transform-origin: 36px 34px; }
.hobby .wave { transform-origin: 29px 20px; }

.nick {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 34em;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-2);
}
.nick .picto { width: 44px; height: 44px; }

@keyframes am-spin { to { transform: rotate(360deg); } }
@keyframes am-wave { from { transform: skewY(-8deg); } to { transform: skewY(8deg); } }
@keyframes am-throw { from { transform: translate(-14px, -8px); } to { transform: translate(0, 0); } }


/* ==========================================================================
   13 · Palmarès « Les portes qui comptent » (§6.7)
   ========================================================================== */

.palm .lead { margin-top: var(--s6); max-width: 30em; }

.hof {
  list-style: none;
  margin-top: clamp(48px, 6vw, 88px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
}
.hof > li { min-width: 0; display: flex; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 260px;
  padding: 20px 20px 52px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background-color: transparent;
  color: var(--fg);
  text-decoration: none;
  overflow: hidden;
}
.card > * { min-width: 0; }
.card__picto {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 92px;
  height: 92px;
}
.card__picto.picto { width: 56px; height: 56px; top: 20px; right: 20px; }
.card__idx { color: var(--fg-2); }
.card__rank {
  margin-top: auto;
  padding-top: 56px;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: var(--fs-fig);
  line-height: .95;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
  color: var(--accent-text);
}
.card__title {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;
}
.card__meta {
  display: block;
  margin-top: 10px;
}
.card__more {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  transform: translateY(calc(100% + 20px));
  transition: transform var(--t-comp) var(--carve);
}
.card__more::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.card:hover .card__more,
.card:focus-visible .card__more { transform: none; }


/* ==========================================================================
   14 · Partenaires and audiences (§6.8)
   ========================================================================== */

.partners-sec .mix + .lead { margin-top: var(--s6); }
.partners-sec .eyebrow + .mix { margin-top: var(--s5); }

.marquee--names { margin-top: clamp(48px, 6vw, 88px); }
.marquee--names .marquee__item { font-size: clamp(44px, 7vw, 112px); }
.marquee__name { color: var(--fg); }
.marquee__name--outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--fg);
}

.partners {
  list-style: none;
  margin-top: clamp(48px, 6vw, 88px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
}
.partner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 280px;
  padding: 22px 22px 24px;
  background-color: var(--card);
  color: var(--card-fg);
  --picto-cut: var(--card);
}
.partner__picto { width: 88px; height: 88px; }
.partner__name {
  margin-top: var(--s6);
  font-family: var(--f-grot);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(32px, 3vw, 48px);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.partner__role { margin-top: 10px; }
.partner__text {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-2);
}

.aud {
  margin-top: clamp(96px, 12vw, 180px);
}
.aud__list {
  list-style: none;
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s7) var(--col-gap);
}
.aud__item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--fg);
  min-width: 0;
}
.aud__n {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: clamp(56px, 7vw, 112px);
  line-height: .9;
  letter-spacing: -.03em;
  font-variant-numeric: lining-nums;
  color: var(--accent-text);
  white-space: nowrap;
}
.aud__l {
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 26em;
}
.aud__note { margin-top: var(--s6); max-width: 60em; }


/* ==========================================================================
   15 · Contact and footer (§6.9)
   ========================================================================== */

.contact { padding-bottom: 0; }
.contact .mix + .lead { margin-top: var(--s6); }
.contact__slot {
  margin-top: var(--s6);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.contact__slot::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFD60A;
  animation: am-pulse 2s ease-in-out infinite;
}
.contact__slot:has(a)::before { display: none; }
@keyframes am-pulse { 50% { opacity: .25; } }
.socials li:first-child .btn {
  background-color: var(--accent-fill);
  color: var(--on-accent);
  border-color: transparent;
}
.socials li:first-child .btn:hover,
.socials li:first-child .btn:focus-visible { background-color: var(--c-jaune-2); }
.contact__slot .link { color: var(--fg); }
.contact__copy { font-size: 12px; min-height: 44px; }
.contact__copy.is-copied {
  background-color: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-accent);
}

.socials {
  list-style: none;
  margin-top: var(--s7);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.contact .btn { min-height: 48px; }

.foot {
  position: relative;
  container-type: inline-size;
  margin-top: clamp(80px, 10vw, 160px);
}
.foot__word {
  display: block;
  max-width: 1440px;
  height: .68em;
  margin: 0 auto;
  padding-left: var(--gut-l);
  padding-right: var(--gut-r);
  overflow: hidden;
  overflow: clip;
  font-family: var(--f-grot);
  font-stretch: 125%;
  font-weight: 900;
  font-size: min(205px, calc((min(100cqw, 1440px) - var(--gut-l) - var(--gut-r)) / 7.9));
  line-height: .8;
  letter-spacing: -.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,214,10,.6);
  background-image: var(--plan-tile-jaune), linear-gradient(#18232A, #18232A);
  background-size: 240px 240px, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  -webkit-user-select: none;
}
.note--allez {
  right: max(8%, var(--gut-r));
  top: -1.45em;
  transform: rotate(-6deg);
}
.note--allez .note__s { width: 160px; height: 14px; margin-top: -2px; }

.foot__tricolore {
  display: flex;
  height: 3px;
}
.foot__tricolore i { flex: 1 1 0; display: block; }
.foot__tricolore i:nth-child(1) { background: #0B1116; box-shadow: inset 0 0 0 1px var(--fg-2); }
.foot__tricolore i:nth-child(2) { background: #FFD60A; }
.foot__tricolore i:nth-child(3) { background: #E3262E; }

.foot__meta {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto auto;
  align-items: center;
  gap: var(--s5) var(--s6);
  padding-top: var(--s6);
  padding-bottom: max(var(--s6), env(safe-area-inset-bottom, 0px));
}
.foot__meta > * { min-width: 0; }
.foot__sources { text-transform: none; letter-spacing: .04em; line-height: 1.5; }
.foot__id {
  display: flex;
  align-items: center;
  gap: 16px;
}
.foot__mark {
  width: 50px;
  height: 36px;
  flex: none;
  color: var(--fg);
}
.foot__top { justify-self: end; }
/* 4-column footer on narrower desktops: the signature sits above the identity line so it is not squeezed */
@media (min-width: 1100px) and (max-width: 1299.98px) {
  .foot__id { flex-direction: column; align-items: flex-start; gap: 12px; }
}


/* ==========================================================================
   16 · Cursor (§5.4) · only with html.cursor-live
   Parts are centred with negative margins; fx.js owns their transform.
   ========================================================================== */

#am-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 90;
  width: 0;
  height: 0;
  pointer-events: none;
}
html:not(.cursor-live) #am-cursor { display: none; }
.cur { -webkit-user-select: none; user-select: none; }
#am-cursor svg,
.cur__gate { max-width: none; max-height: none; }

.cur__dot,
.cur__ring,
.cur__gate,
.cur__label {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  pointer-events: none;
}
.cur__dot {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #FFD60A;
  box-shadow: 0 0 0 1px var(--dot-edge);
  transition: width var(--t-micro) var(--glide), height var(--t-micro) var(--glide), margin var(--t-micro) var(--glide), opacity var(--t-micro) linear;
}
.cur__ring {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  border: 1.5px solid var(--cursor);
  background: transparent;
  transition:
    width var(--t-comp) var(--glide), height var(--t-comp) var(--glide), margin var(--t-comp) var(--glide),
    opacity var(--t-micro) linear, background-color var(--t-comp) var(--glide), border-color var(--t-comp) var(--glide);
}
.cur__gate {
  width: 18px;
  height: 36px;
  color: var(--cursor);
  overflow: visible;
  opacity: 0;
  transform-origin: 3px 100%;
  transition: opacity .12s linear;
}
.cur__label {
  width: 92px;
  margin: -6px 0 0 -46px;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 10px;
  line-height: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  color: #FFD60A;
  opacity: 0;
  transition: opacity var(--t-micro) linear;
}
#am-cursor[data-state="link"] .cur__ring {
  width: 0;
  height: 0;
  margin: 0;
  opacity: 0;
}
#am-cursor[data-state="link"] .cur__gate {
  opacity: 1;
  animation: am-cur-gate var(--t-micro) var(--pop) both;
}
@keyframes am-cur-gate {
  from { rotate: -20deg; scale: .4; }
  to { rotate: 0deg; scale: 1; }
}
#am-cursor[data-state="card"] .cur__ring,
#am-cursor[data-state="card"] .cur__label { translate: 30px 30px; }
#am-cursor[data-state="card"] .cur__ring {
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  background: rgba(11,17,22,.92);
  border-color: #0B1116;
}
#am-cursor[data-state="card"] .cur__label { opacity: 1; }
#am-cursor[data-state="card"] .cur__dot { opacity: 0; }
#am-cursor[data-state="none"] .cur__dot,
#am-cursor[data-state="none"] .cur__ring { opacity: 0; }
#am-cursor[data-state="chart"] .cur__ring {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
}
#am-cursor[data-state="text"] .cur__ring { opacity: 0; }
#am-cursor[data-state="text"] .cur__dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
}

#am-fx {
  position: fixed;
  inset: 0;
  z-index: 90;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


/* ==========================================================================
   17 · Responsive
   ========================================================================== */

/* ---------- ≥ M (768) ---------- */
@media (min-width: 768px) {
  .cue { position: static; }
}

/* ---------- M only (768–1099) ---------- */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .hero { --cart-w: min(58vw, 460px); }
  .hero__grid { grid-template-rows: auto auto auto auto auto; }
  .hero__eyebrow { grid-column: 1 / 6; grid-row: 1; align-self: start; }
  .cartouche { grid-column: 5 / 13; grid-row: 1; justify-self: end; }
  .hero__title { grid-column: 1 / -1; grid-row: 2; margin-top: calc(var(--cart-w) * -.16); }
  .hero__hook { grid-column: 1 / 10; grid-row: 3; }
  .next { grid-column: 1 / 7; grid-row: 4; align-self: start; }
  .legend { grid-column: 7 / 13; grid-row: 4; align-self: end; }
  .cue { grid-column: 1 / -1; grid-row: 5; justify-self: center; margin-top: 8px; }
  .cartouche__cap { left: auto; right: 0; }

  .manif__title { grid-column: 1 / -1; }
  .manif__title.mix--display { font-size: clamp(38px, 7.4vw, 80px); }
  .manif__lead { grid-column: 1 / 10; }
  .manif__side {
    grid-column: 1 / -1;
    grid-row: auto;
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    column-gap: var(--s6);
    align-items: start;
  }
  .manif__side .rig { width: 140px; height: 140px; }
  .kf-list { grid-column: 2; }
  .kf-hint { grid-column: 2; }

  .hof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  #p07 .chap__body,
  #p08 .chap__body { display: block; }

  .route { grid-template-columns: minmax(0, 1fr); grid-template-areas: "svg" "list" "cap"; }

  #saison.season-sec > .wrap > .season__table { grid-column: 1 / -1; }
  #saison.season-sec > .wrap > .stats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .foot__meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__top { justify-self: start; }

  .note--ecart { right: 0; width: 150px; height: 66px; }
  .note--ecart .note__s { width: 100%; height: 100%; }
}

/* ---------- L (≥ 1100) ---------- */
@media (min-width: 1100px) {
  /* Hero */
  .hero__grid { grid-template-rows: auto auto auto 1fr; }
  .hero__eyebrow { grid-column: 1 / 7; grid-row: 1; }
  .hero__title {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    width: calc(100% - var(--cart-w) * .92);
  }
  .hero__hook { grid-column: 1 / 7; grid-row: 3; }
  .cartouche {
    grid-column: 8 / 13;
    grid-row: 1 / 5;
    justify-self: end;
    align-self: start;
  }
  .next { grid-column: 1 / 5; grid-row: 4; align-self: end; margin-top: var(--s5); }
  .legend {
    grid-column: 7 / 13;
    grid-row: 4;
    justify-self: end;
    align-self: end;
    width: 100%;
    max-width: 440px;
  }
  .cue {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }

  /* Progress is S and M only */
  .progress { display: none; }

  /* P04: calendar beside the crutches rig */
  #p04 :is(.chap__body, .chap__media):has(> .cal) {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    column-gap: var(--s7);
    align-items: end;
  }
  #p04 :is(.chap__body, .chap__media):has(> .cal) > * { grid-column: 1 / -1; }
  #p04 :is(.chap__body, .chap__media):has(> .cal) > .cal { grid-column: 1; }
  #p04 :is(.chap__body, .chap__media):has(> .cal) > .rig { grid-column: 2; justify-self: center; align-self: end; }
  #p04 :is(.chap__body, .chap__media):has(> .cal) > .rig + p { grid-column: 2; justify-self: center; text-align: center; margin-top: var(--s3); }

  /* P07: the « 2 » at columns 1–5, everything else at 6–12 */
  #p07 .chap__body {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-content: start;
  }
  #p07 .chap__body > * { grid-column: 6 / 13; }
  /* The « 2 » rides along the narrative inside its own lane (rows 1–6), so
     the sticky stops above the podium row instead of at the end of the body. */
  #p07 .chap__body > .num-lane {
    grid-column: 1 / 6;
    grid-row: 1 / span 6;
    align-self: stretch;
    margin-top: 0;
  }
  #p07 .num-lane > .num--2 {
    position: sticky;
    top: 14vh;
    margin-top: -.04em;
  }
  #p07 .chap__body > .climb,
  #p07 .chap__body > .splits {
    grid-column: 6 / 13;
    width: 100%;
    max-width: 520px;
  }
  #p07 .chap__body > .climb + .splits { margin-top: var(--s7); }
  #p07 .chap__body > .chap__media {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
  }
  #p07 .chap__media > .podium { grid-column: 1 / 6; justify-self: start; width: 100%; max-width: 340px; }
  #p07 .chap__media > .quote { grid-column: 6 / 13; }

  /* P08: mirror of P07, the « 5e » on the right */
  #p08 .chap__body {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-content: start;
  }
  #p08 .chap__body > * { grid-column: 1 / 9; }
  #p08 .chap__body > :is(.tag, .jo) { grid-column: 1 / -1; }
  #p08 .chap__body > .num--5e {
    grid-column: 9 / 13;
    grid-row: 3 / span 6;
    justify-self: end;
    align-self: start;
    position: sticky;
    top: 14vh;
  }

  /* Split */
  .split { flex-direction: row; }
  .split__half {
    flex: 1 1 0;
    min-width: 0;
    min-height: 90vh;
    min-height: 90svh;
    transition: flex-grow var(--t-block) var(--carve);
  }
  .split__half:hover,
  .split__half:focus-within { flex-grow: 1.6; }
  .split__in { --split-pad: clamp(40px, 4.4vw, 72px); }
  .split__half--on .split__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--s6);
    row-gap: var(--s6);
    align-content: start;
  }
  /* The rig stands above the title, on the outer side: beside the title it
     collided with « hors » at the seam, and with « PISTE » itself when the
     other half expands (the half shrinks to ~38%). */
  .split__half--on .split__in > * { grid-column: 1 / -1; }
  .split__half--on .split__in > .rig { grid-column: 1; grid-row: 1; justify-self: start; align-self: end; width: clamp(140px, 12vw, 200px); height: clamp(140px, 12vw, 200px); margin-bottom: calc(-1 * var(--s5)); }
  .split__half--on .split__in > .mix { grid-column: 1 / -1; grid-row: 2; }
  .split__half--on .split__in > .facts-list { grid-column: 1 / -1; grid-row: 3; }
  .split__half--on .split__in > .crop { grid-column: 2; grid-row: 4; justify-self: end; }
  .split__half--on .split__in > .btn { grid-column: 1; grid-row: 4; align-self: end; }
  .split__half--off .split__in > .btn { margin-top: auto; }

  /* Hover loops, active half only */
  .split__half--off:is(:hover, :focus-within) .spin { animation: am-spin .6s linear infinite; }
  .split__half--off:is(:hover, :focus-within) .wave { animation: am-wave 1.2s ease-in-out infinite alternate; }
  .split__half--off:is(:hover, :focus-within) .throw { animation: am-throw .5s var(--carve) both; }

  /* Rail is L only */
  .rail { display: block; }

  /* Rail lane: content never runs under the fixed rail (VC-02) */
  #manifeste .wrap,
  #histoire .wrap,
  #saison .wrap { padding-right: calc(var(--gut-r) + 56px); }

  /* Split: titles aligned, text set at the narrow width so nothing re-wraps
     while a half grows or shrinks, fuller off half (VC-08 / MQA-11) */
  .split__half--off .split__in {
    padding-top: calc(clamp(80px, 10vw, 150px) + clamp(140px, 12vw, 200px) - var(--s5) + var(--s6) + .24 * clamp(44px, 6.2vw, 112px));
  }
  .split__half .facts-list,
  .split__half .nick { width: min(560px, calc(38vw - 2 * var(--split-pad))); }
  .split__half--off .hobbies {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s6) var(--s7);
  }
  .split__half--off .hobby svg { width: 92px; height: 92px; }

  /* Hero « Prochain départ » (VC-07): the active race keeps its trace in the
     left column, the other races stack as compact rows on the right, so the
     card stays under 300 px and the first screen closes. */
  .next { grid-column: 1 / 7; width: min(100%, 560px, calc(50vw - var(--gut-l) - 64px)); }
  /* the 1fr row keeps the legend clear of the cartouche caption on short viewports */
  .hero__grid { min-height: calc(var(--cart-w) + 150px); }
  .next__list {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: 20px;
    align-content: start;
  }
  .next__race.is-active { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .next__race:not(.is-active) .next__trace { display: none; }
  .next__race:not(.is-active) {
    grid-column: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "date" "what";
    row-gap: 0;
    align-items: baseline;
    padding-block: 7px;
    border-top: 1px solid #2C3B45;
  }
  .next__race:not(.is-active):nth-child(1 of :not(.is-active)) { border-top: 0; padding-top: 0; }
  .next__race:not(.is-active) .next__name { font-size: 13px; line-height: 1.3; }
  .next__race:not(.is-active) .next__date { text-align: left; line-height: 1.4; }
  .next__race:not(.is-active) .next__what { font-size: 12px; line-height: 1.35; }
  .next__race:not(.is-active) .next__count { font-size: 13px; }
}

/* Rail is L only. Under L the « jour 947 » mark moves below the calendar. */
@media (max-width: 1099.98px) {
  .rail { display: none !important; }

  /* Split stacked (S and M): « hors » sits above the off half's « PISTE » */
  .split__in { padding-block: clamp(72px, 20vw, 96px); }
  .split .mix { font-size: clamp(44px, 14vw, 64px); }
  .mix__h {
    left: -4px;
    top: calc(-1 * clamp(72px, 20vw, 96px) - .42em);
    transform: rotate(-8deg);
  }
  .split__half--off .mix { padding-top: 0; }

  .note--jour {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-top: 14px;
  }
  .note--jour .note__s {
    position: static;
    width: 64px;
    height: 32px;
    transform: scale(-1, -1);
  }
  .note--jour .note__w { position: static; transform: rotate(-4deg); }
}

/* Season chart reserved space switches at 700 (art.js matchMedia) */
@media (max-width: 699.98px) {
  .season__chart { aspect-ratio: 343 / 640; }
}

/* ---------- XL (≥ 1440) ---------- */
@media (min-width: 1440px) {
  .hof { gap: 20px; }
  .partners { gap: 20px; }
  .menu__list { margin-block: clamp(24px, 5vh, 80px); }
}

/* ---------- Menu columns ---------- */
@media (min-width: 900px) {
  .menu__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-template-rows: repeat(6, auto);
  }
}

/* ---------- S (< 768) ---------- */
@media (max-width: 767.98px) {
  :root { --hdr-h: 60px; }

  .sec { padding-block: clamp(80px, 22vw, 112px); }

  /* Header */
  .hdr { gap: 10px; }
  .menu__title { font-size: clamp(22px, min(6.6vw, 4vh), 28px); }
  .hdr__actions { gap: 18px; }
  .btn--plaque { padding: 0 12px 0 12px; font-size: 12px; }

  /* Hero */
  .hero { padding-top: calc(var(--hdr-h) + 16px); padding-bottom: 32px; }
  .hero__piste { display: none; }
  .hero__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .cartouche {
    order: 0;
    width: 88vw;
    max-width: 440px;
    align-self: center;
    margin-bottom: 34px;
  }
  .cartouche .cartouche__cap { left: 0; right: 0; justify-content: center; white-space: nowrap; text-wrap: nowrap; }
  .hero__eyebrow { order: 1; }
  .hero__title { order: 2; }
  .hero__hook { order: 3; }
  .next { order: 4; width: 100%; }
  .legend { order: 5; margin-top: 24px; }
  .cue { order: 6; position: static; align-self: center; }
  .hero__first { font-size: 17vw; }
  .hero__last { font-stretch: 112%; font-size: min(var(--fs-last), 17.2cqw); }

  /* Manifeste */
  .marquee__item { font-size: 14vw; }
  .marquee--names .marquee__item { font-size: 14vw; }
  .manif__grid { display: flex; flex-direction: column; gap: var(--s7); }
  .manif__title.mix--display { font-size: clamp(30px, 10.4vw, 52px); }
  .manif__title .mix__s { padding-left: .5em; }
  .manif__side .rig { width: 120px; height: 120px; }
  .kf-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 0;
    gap: 0 var(--s4);
  }
  .kf-list > li { border-top: 1px solid var(--line); border-bottom: 0; }
  .kf {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
    height: 100%;
    align-content: start;
    width: calc(100% + 20px);
    margin-inline: -10px;
    padding: 12px 10px;
  }
  button.kf:hover,
  button.kf:focus-visible,
  .kf[aria-pressed="true"] { transform: translateY(-2px); }

  /* Story: 28 px rail in the left gutter, body full width */
  .chap__grid {
    position: relative;
    display: block;
    padding-left: max(36px, env(safe-area-inset-left, 0px));
  }
  .chap__rail {
    position: absolute;
    left: max(4px, env(safe-area-inset-left, 0px));
    top: 0;
    bottom: 0;
    width: 28px;
  }
  .gate { left: 4px; margin-left: 0; }
  .gate[data-side="r"] { left: 16px; }
  .piste-tag {
    top: 32px;
    left: 4px;
    max-width: none;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    padding: 7px 3px;
  }
  .gate[data-side="r"] ~ .piste-tag { left: 4px; right: auto; }
  .story__start,
  .story__finish { left: 14px; }
  .story__start .picto,
  .story__finish .picto { width: 28px; height: 28px; }
  .story__start .micro,
  .story__finish .micro { writing-mode: vertical-rl; transform: rotate(180deg); }

  .chap__media { gap: var(--s5); }
  .chap__media .rig { width: 112px; height: 112px; }
  .chap__media .rig.rig--l,
  .rig--l { width: 120px; height: 120px; }
  .chap__media > .picto,
  .chap__media > svg.picto { width: 72px; height: 72px; }
  .crack { top: -44px; }

  .num--2 { font-size: 56vw; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig__n { font-size: min(var(--fs-fig), 9.6vw); white-space: normal; }

  /* Calendar: no inner scroll (art.js pins the tooltip below the grid) */
  .cal { max-width: none; }


  .board-wrap { max-width: none; }
  .board { font-size: 13px; table-layout: fixed; }
  .board th,
  .board td { padding: 0 8px; }
  .board th:first-child,
  .board td:first-child { width: 44px; padding-left: 12px; }
  .board th:nth-child(3),
  .board td:nth-child(3) { width: 52px; }
  .board th:last-child,
  .board td:last-child { width: 96px; padding-right: 12px; }
  .board td:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .board td span { display: none; }
  .note--ecart { right: 0; width: 92px; height: 40px; top: 104px; }
  .note--ecart .note__s { width: 92px; height: 40px; }
  .note--ecart .note__w { right: 10px; top: 170px; }

  .jo__frame { border-radius: var(--r-sm); }
  .num--5e { font-size: 44vw; }

  .record__lane { grid-template-columns: 3.4em minmax(0, 1fr) 2.2em; column-gap: 12px; }
  .record__rank { font-size: 26px; }
  .record__gap,
  .record__gap::before { padding-left: calc(1.7em - 1px); left: calc(1.7em - 1px); }
  .record__gap { max-width: 100%; right: 0; }

  .passes { grid-template-columns: minmax(0, 1fr); }
  .pass { aspect-ratio: auto; }
  .pass__trace { height: clamp(56px, 18vw, 72px); min-height: 56px; }
  .pass__name { font-size: clamp(18px, 5.6vw, 24px); }
  .pass__note,
  .next__note,
  .cartouche__tag,
  .legend__tab,
  .next__nat,
  .pass__nat,
  .piste-tag,
  .board th,
  .season__table th { font-size: 10.5px; }
  #am-cal947 .cal947__mi,
  #am-cal947 .cal947__tvl { display: none; }
  #am-cal947 .cal947__yr { font-size: 13px; }
  .route { grid-template-columns: minmax(0, 1fr); grid-template-areas: "list" "cap"; }
  .route__svg { display: none; }

  /* Season */
  #saison.season-sec > .wrap { display: block; }
  #saison.season-sec > .wrap > * + * { margin-top: var(--s5); }
  #saison.season-sec > .wrap > .season { margin-top: var(--s7); }
  .season__table { margin-top: var(--s7); }
  .season__table td { font-size: 14px; }
  .season__table td:first-child,
  .season__table td:last-child { font-size: 12px; }
  .stats { margin-top: var(--s7); }
  #saison.season-sec > .wrap > .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Split: stacked, no expansion (shared S/M rules sit in the < 1100 block) */
  .facts-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .hobbies {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s5);
  }
  .split__half--on .split__in { align-items: flex-start; }

  /* Palmarès: compact horizontal cards */
  .hof { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-auto-rows: auto;
    column-gap: 16px;
    row-gap: 4px;
    min-height: 0;
    padding: 16px;
  }
  .card > :not(.card__picto) { grid-column: 2; }
  .card__picto,
  .card__picto.picto {
    position: static;
    grid-column: 1;
    grid-row: 1 / span 5;
    width: 40px;
    height: 40px;
    align-self: start;
  }
  .card__rank { padding-top: 6px; margin-top: 0; font-size: 34px; }
  .card__title { margin-top: 4px; }
  .card__meta { margin-top: 4px; }
  .card__more {
    position: static;
    transform: none;
    margin-top: 10px;
  }

  /* Partners and audiences */
  .partners { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .partner { min-height: 0; }
  .partner__name { margin-top: 24px; }
  .aud__list { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }

  /* Footer */
  .foot__word {
    font-stretch: 112%;
    font-size: min(160px, calc((min(100cqw, 1440px) - var(--gut-l) - var(--gut-r)) / 7.2));
    height: .72em;
    -webkit-text-stroke-width: 1px;
  }
  .note--allez { right: var(--gut-r); top: -1.5em; font-size: 40px; }
  .note--allez .note__s { width: 120px; }
  .foot__meta { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .foot__top { justify-self: start; }
  .socials .btn { max-width: 100%; font-size: 12px; padding: 0 16px; }
}

/* Logo name and menu label under 480 */
@media (max-width: 479.98px) {
  .hdr__name { display: none; }
  .hdr__menu { padding: 0 13px; }
  .menu__close { padding: 0 16px 0 14px; }
  .hdr__menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .hdr__actions { gap: 16px; }
}


/* ==========================================================================
   18 · Hover-capable vs touch
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  .pass:hover .pass__sheen { opacity: 1; }
}

@media (hover: none) {
  /* Mode plan: the « more » line is always there */
  .card__more { transform: none; }
  /* Crops are always in colour */
  .crop__win::after { opacity: 1; }
  /* No tilt, no sheen */
  .pass { transform: none; }
  .pass__sheen { display: none; }
}

/* Hobbies loop once on entry (S and touch), scroll-driven when supported */
@supports (animation-timeline: view()) {
  @media (max-width: 767.98px), (hover: none) {
    .hobby .spin {
      animation: am-spin linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
    .hobby .wave {
      animation: am-wave ease-in-out both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
    .hobby .throw {
      animation: am-throw var(--carve) both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }
  }
}


/* ==========================================================================
   19 · Reduced motion (§8) · applied live by the media query
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { transition: none; }

  /* Loader off, hero static */
  .loader { display: none; }
  .hero__title .line > span { animation: none; }

  /* Marquees: static, wrapping text, duplicate hidden */
  .marquee { white-space: normal; }
  .marquee__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    transform: none;
  }
  .marquee__item {
    flex: 1 1 auto;
    flex-wrap: wrap;
    white-space: normal;
    transform: none;
  }
  .marquee__track > .marquee__item:nth-child(2):last-child { display: none; }

  /* Cursor, trails and spray */
  #am-cursor,
  #am-fx { display: none !important; }
  html.cursor-live #am-portrait { cursor: auto; }

  /* Notes drawn complete */
  .note .note__s path,
  .note.will-draw .note__s path {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }

  /* Menu: instant */
  .menu,
  .menu.is-open { transition: none; }
  .hdr__menu-icon i,
  .menu__title,
  .menu__title::after { transition: none; }

  /* Header hides without sliding */
  .hdr { transition: none; }

  /* Decor loops */
  .cue__piste i { animation: none; top: 21px; }
  .next__race.is-live .next__count::before { animation: none; }
  .hobby .spin,
  .hobby .wave,
  .hobby .throw,
  .split__half--off:is(:hover, :focus-within) :is(.spin, .wave, .throw) { animation: none !important; }

  /* Passes: no tilt, no sheen */
  .pass { transform: none; transition: background-color var(--t-comp) linear, color var(--t-comp) linear; }
  .pass__sheen { display: none; }

  /* Split: no expansion animation */
  .split__half { transition: none; }

  /* Movement on hover becomes colour only */
  .btn__t { transition: none; }
  .btn:hover .btn__t,
  .btn:focus-visible .btn__t { transform: none; }
  .kf,
  button.kf:hover,
  button.kf:focus-visible,
  .kf[aria-pressed="true"] { transform: none; transition: none; }
  .card__more { transition: none; }
  .plan,
  .plan:hover,
  .plan:focus-visible { background-position: 0 0; transition: background-color var(--t-micro) linear, color var(--t-micro) linear; }
  .rail,
  .rail__gate,
  .rail__label,
  .cur__gate { transition: none; }
  .link::after { transition: none; }
}


/* ==========================================================================
   Print: keep it legible
   ========================================================================== */

@media print {
  .loader, #am-topo, .hdr, .menu, .rail, .progress, #am-cursor, #am-fx, .decor, .marquee, .note { display: none !important; }
  html:not(.tones-live) [data-tone]::before { display: none; }
  body { background: #FFFFFF; color: #0B1116; }
}


/* ==========================================================================
   20 · Fixes v2.1 (markup-css) · legibility, typography, states
   ========================================================================== */

/* Display words sized to their box (VC-01): « l’accompagnent » ≈ 12.1em at 125% */
#part-t { container-type: inline-size; }
#part-t .mix__g { font-size: min(1em, 8cqi); }

/* Bodoni numerals under 80 px keep their hairlines (VC-04): text cut, not display cut */
.fig__n,
.stats b,
.card__rank,
.kf__n,
.record__rank {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 11;
  font-weight: 600;
}
.aud__n {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 18;
  font-weight: 500;
}

/* French typography (VC-18) */
.nw { white-space: nowrap; }
.ord {
  text-transform: none;
  font-size: .72em;
  vertical-align: .32em;
  letter-spacing: 0;
  line-height: 0;
}
.micro,
figcaption,
.stats li,
.foot__meta p { text-wrap: balance; }

/* Header floats on a translucent bar when it comes back mid-page (MOB-12) */
html.tones-live .hdr.is-floating {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--line);
  transition: transform var(--t-comp) var(--carve), background-color var(--t-comp) var(--glide);
}

/* Tap targets (MOB-14) */
.menu__foot .link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 6px;
}
.next .link { padding-block: 15px; margin-block: -15px; }

/* Ski passes: the last odd pass spans the row, at the height of the two above (VC-12) */
.passes { container: passes / inline-size; }
@container passes (min-width: 704px) {
  .passes > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .passes > li:last-child:nth-child(odd) .pass {
    aspect-ratio: auto;
    height: calc((100cqi - 24px) / 2 / 1.6);
  }
}

/* kf: no residual highlight after a tap on touch screens (MOB-17) */
@media (hover: none) {
  button.kf[aria-pressed="false"]:hover:not(:focus-visible) { transform: none; }
  .kf[aria-pressed="false"]:not(:focus-visible) .kf__n { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .contact__slot::before { animation: none; }
}