/* ============================================================
   Blocs 2 à 5 : saison (rouge), timeline (noir), paddock (blanc),
   sign-off (bord rouge, panneau noir). Mesures en cqw sur 1440.
   ============================================================ */

.line { display: block; }
.dot { display: inline-block; }

/* ───────── 2 · The season so far — le bloc rouge ───────── */
[data-season] {
  container-type: inline-size; position: relative; isolation: isolate; min-height: var(--season-h, 100lvh);
  overflow: hidden; background: var(--surface-red); color: var(--foreground);
  --season-gutter: 1.5rem;
}
@media (min-width: 640px) { [data-season] { --season-gutter: max(2.2222cqw, var(--gutter-min, 0px)); } }
@media (max-width: 1023px) { [data-season] { --gutter-min: 32px; --type-min: 13px; --copy-min-size: 17px; --copy-min-w: 15rem; --head-min: 6.6667cqw; --plate-w: 277px; --plate-h: 78px; --plate-cell: 83px; --plate-eyebrow: 12px; --plate-body: 14px; } }
@media (max-width: 639px) { [data-season] { --head-min: 40px; --head-air: 20px; --season-h: 680px; } }
.season__stage { position: absolute; inset: 0; z-index: 0; overflow: visible; mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%); }
@media (max-width: 1023px) { .season__stage { mask-image: none; } }
.season__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.28; mix-blend-mode: multiply; filter: saturate(0.5) contrast(1.1) blur(1px); }
.season__art { position: absolute; left: 0; top: 0; width: 1440px; height: 800px; transform-origin: top left; }
.season__halftone, .season__map, .season__trace { position: absolute; left: 0; top: 0; width: 1440px; height: 800px; }
.season__halftone, .season__trace { pointer-events: none; }
.season__map { pointer-events: none; }
.season__map .turn, .season__map .turn-hit, .season__map .turn-label { pointer-events: all; }
.season__map { overflow: visible; }
.season__map .grid { stroke: var(--map-grid); stroke-width: 1; fill: none; }
.season__map .grid--ghost { stroke: var(--map-grid-ghost); stroke-dasharray: 4 6; }
.season__map .track { fill: none; stroke: rgb(0 0 0 / 0.55); }
.season__map .track-edge { fill: none; stroke: rgb(0 0 0 / 0.7); stroke-width: 1; }
.season__map .hub { fill: none; stroke: rgb(0 0 0 / 0.5); stroke-width: 1; }
.season__map .hub--inner { stroke: rgb(0 0 0 / 0.8); }
.season__map .turn { fill: var(--surface-red); stroke: var(--foreground); stroke-width: 1.5; cursor: pointer; transition: fill 300ms; }
.season__map .turn--lit { fill: var(--foreground); }
.season__map .turn-hit { fill: transparent; cursor: pointer; }
.season__map .turn-label { fill: var(--foreground); font-size: 11px; font-weight: 500; letter-spacing: 0.083em; opacity: 0.45; font-family: var(--font-display); transition: opacity 400ms; cursor: pointer; pointer-events: all; }
.season__map .turn-label--lit { opacity: 0.9; }
.season__map .place { fill: rgb(0 0 0 / 0.75); font-size: 10px; letter-spacing: 0.091em; font-family: var(--font-display); }
.season__copy {
  pointer-events: none;
  position: relative; z-index: 20; min-height: var(--season-h, 100lvh); display: flex; flex-direction: column; justify-content: space-between; gap: 4rem;
  padding: 4.8611cqw var(--season-gutter) var(--season-gutter);
}
.season__title { font-size: max(3.8194cqw, var(--head-min, 0px)); font-weight: var(--weight-display); letter-spacing: var(--tracking-heading); line-height: var(--leading-headline); color: var(--foreground); }
.season__title .dot { color: var(--surface-black); }
.season__rule { display: block; width: 1.6667cqw; height: 0.1389cqw; min-height: 2px; background: var(--surface-black); margin-top: max(1.9444cqw, var(--head-air, 0px)); transform-origin: left; opacity: 0; transform: scaleX(0); }
.season__intro { font-family: var(--font-text); margin-top: max(2.0833cqw, var(--head-air, 0px)); width: max(16.1111cqw, var(--copy-min-w, 0px)); font-size: max(1.25cqw, var(--copy-min-size, 0px)); letter-spacing: var(--tracking-label); line-height: var(--leading-display); }
.plate { pointer-events: auto; position: relative; align-self: flex-end; width: var(--plate-w, 19.2361cqw); height: var(--plate-h, 5.4167cqw); display: grid; grid-template-columns: var(--plate-cell, 5.7639cqw) 1fr; opacity: 0; }
.plate__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate__frame path { fill: var(--surface-black); stroke: var(--foreground); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plate__frame path + path { fill: none; }
.plate__badge { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--plate-badge-gap, 0.7639cqw); }
.plate__globe { width: var(--plate-globe-w, 2.5694cqw); height: var(--plate-globe-h, 1.5972cqw); stroke: var(--accent); stroke-width: 1; fill: none; }
.plate__badge p { font-family: var(--font-display); font-weight: var(--weight-medium); display: flex; gap: 0.3em; font-size: var(--plate-eyebrow, max(0.8333cqw, var(--type-min, 0px))); line-height: var(--leading-cap); letter-spacing: 0.02em; }
.plate__stats { font-family: var(--font-display); font-weight: var(--weight-medium); position: relative; display: flex; flex-direction: column; justify-content: center; gap: var(--plate-stats-gap, 0.5556cqw); padding-left: var(--plate-stats-left, 1.1111cqw); font-size: var(--plate-body, max(0.9722cqw, var(--type-min, 0px))); line-height: var(--leading-cap); letter-spacing: 0.02em; }
.plate__stats div { display: flex; gap: 0.35em; white-space: nowrap; }
.plate__stats dt { color: var(--accent); font-weight: var(--weight-medium); }

/* ───────── 3 · From karts to F1 ───────── */
.timeline {
  container-type: inline-size; position: relative; isolation: isolate; width: 100%; background: var(--surface-black); color: var(--foreground);
  --gutter: max(2.2222cqw, var(--gutter-min, 0px)); --bottom-pad: 10.4167cqw; --top-pad: 11.7361cqw;
  padding-bottom: var(--bottom-pad);
}
@media (max-width: 1023px) { .timeline { overflow-x: clip; --copy-min-size: 17px; --head-min: 6.6667cqw; --head-w-min: 82cqw; --year-min: 30px; --copy-min-w: 200px; } }
@media (min-width: 640px) and (max-width: 1023px) { .timeline { --top-pad-extra: 16cqw; --head-top: var(--bottom-pad); } }
@media (max-width: 639px) { .timeline { --head-min: 40px; --top-pad-extra: 15cqw; --copy-min-w: 320px; --gutter-min: 24px; } }
@media (min-width: 640px) { .timeline { --copy-max-w: 26.9444cqw; } }
.timeline__wrap { position: relative; width: 100%; padding-top: calc(var(--top-pad) + var(--top-pad-extra, 0px)); }
.timeline__title { position: absolute; z-index: 20; top: var(--head-top, var(--gutter)); right: var(--gutter); width: max(20.3472cqw, var(--head-w-min, 0px)); font-size: max(3.8194cqw, var(--head-min, 0px)); font-weight: var(--weight-display); letter-spacing: var(--tracking-heading); line-height: var(--leading-headline); text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.timeline__title .dot { color: var(--accent); }
.timeline__rail { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 10; width: 1.1111cqw; top: var(--rail-top, 0); }
.timeline__rail svg { width: 100%; height: 100%; overflow: visible; }
@media (max-width: 1023px) { .timeline__rail { --rail-top: calc(11.7361cqw + var(--top-pad-extra, 0px)); } }
@media (max-width: 639px) { .timeline__rail { display: none; } .timeline__wrap { display: flex; flex-direction: column; gap: 2.5rem; padding-left: var(--gutter); padding-right: var(--gutter); } .timeline__title { position: relative; top: auto; right: auto; width: auto; flex-direction: row; gap: 0.28em; align-items: baseline; text-align: left; } }
.row { position: relative; width: 100%; }
.row--centre { height: 32.0833cqw; }
.row--side { height: 15.0694cqw; }
.row__plate-layer, .row__copy-layer { position: absolute; inset: 0; }
.row__plate-layer { z-index: 1; }
.row__copy-layer { z-index: 20; pointer-events: none; }
.plate-photo { position: absolute; top: 0; bottom: 0; }
.row--centre .plate-photo { left: 50%; width: 49.3056cqw; transform: translateX(-50%); }
.row--side .plate-photo { width: 23.125cqw; }
.row--side[data-align="right"] .plate-photo { right: var(--gutter); }
.row--side[data-align="left"] .plate-photo { left: var(--gutter); }
.plate-photo__fill { position: absolute; inset: 0; overflow: hidden; background: var(--timeline-fill); clip-path: polygon(0 0, 96.6% 0, 96.6% 5.2%, 100% 5.2%, 100% 100%, 3.4% 100%, 3.4% 94.8%, 0 94.8%); transition: inset var(--duration-plate) var(--ease-plate); }
.plate-photo:hover .plate-photo__fill { inset: 5%; }
.plate-photo__slot { position: absolute; inset: 0; }
.plate-photo__slot img { width: 100%; height: 110%; object-fit: cover; object-position: center top; }
.plate-photo__outline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.plate-photo__outline path { fill: none; stroke: var(--timeline-outline); stroke-width: 1; vector-effect: non-scaling-stroke; }
.row__year { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20; pointer-events: none; font-size: max(2.5cqw, var(--year-min, 0px)); font-weight: var(--weight-display); letter-spacing: var(--tracking-heading); line-height: var(--leading-headline); color: var(--accent); white-space: nowrap; }
.row__copy { font-family: var(--font-text); position: absolute; left: 70.8333cqw; top: 50%; transform: translateY(-50%); width: min(max(calc(var(--copy-w) / 1440 * 100cqw), var(--copy-min-w, 0px)), var(--copy-max-w, 100vw)); font-size: max(1.25cqw, var(--copy-min-size, 0px)); letter-spacing: var(--tracking-label); line-height: var(--leading-display); color: var(--foreground); opacity: 0; }
.row__copy strong { font-weight: var(--weight-medium); }
@media (hover: hover) { .timeline.is-hovering .row { opacity: 0.3; transition: opacity var(--duration-plate) var(--ease-plate); } .timeline.is-hovering .row.is-hovered { opacity: 1; } .row { transition: opacity var(--duration-plate) var(--ease-plate); } }
@media (max-width: 639px) {
  .row, .row--centre, .row--side { height: auto; display: flex; flex-direction: column; gap: 0.75rem; }
  .row__plate-layer, .row__copy-layer { position: relative; inset: auto; }
  .plate-photo, .row--centre .plate-photo, .row--side .plate-photo { position: relative; left: auto; right: auto; transform: none; width: 82%; aspect-ratio: 710 / 462; }
  .row:nth-child(odd) .plate-photo { margin-left: auto; } .row:nth-child(even) .plate-photo { margin-right: auto; }
  .row__year { position: relative; left: auto; top: -28.8cqw; transform: none; height: 0; width: 82%; text-align: center; }
  .row__copy { position: relative; left: auto; top: auto; transform: none; width: 100%; }
}

/* ───────── 4 · From the paddock — le bloc blanc ───────── */
.paddock {
  container-type: inline-size; position: relative; isolation: isolate; min-height: var(--block-h, 100lvh); width: 100%; overflow: hidden;
  background: var(--surface-white); color: var(--foreground-on-light);
  --band-h: calc(11.7361cqw * var(--band-scale, 1)); --G: 2.2222cqw; --U: calc(100cqw / 1440);
}
.paddock__contours { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.paddock__band { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: var(--band-h); background: var(--surface-black); }
.paddock__figure-layer { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.paddock__portrait { position: absolute; bottom: var(--fig-lift, 0px); left: var(--fig-x-override, 63%); transform: translateX(-50%); height: min(calc(102.0363% * var(--fig-fit, 0.94)), var(--fig-cap, 100000px)); width: auto; aspect-ratio: 1; object-fit: cover; user-select: none; }
.paddock__melt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; height: var(--band-h); background: linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, var(--surface-black) var(--band-fade, 38.685%)); pointer-events: none; }
.seam--dark { z-index: 30; }
.paddock__title { position: absolute; z-index: 20; left: var(--head-left, var(--G)); top: var(--head-top, var(--G)); font-size: max(max(6.6667cqw, var(--type-min, 0px)), var(--head-min, 0px)); font-weight: var(--weight-display); letter-spacing: var(--tracking-heading); line-height: var(--leading-headline); color: var(--foreground-on-light); }
.paddock__title .dot { color: var(--accent); }
.paddock__intro { position: absolute; z-index: 20; left: var(--intro-left, var(--G)); bottom: var(--intro-bottom, calc(var(--band-h) + var(--G))); width: max(23.4722cqw, var(--intro-min-w, 0px)); display: flex; flex-direction: column; gap: var(--intro-gap, 2.7778cqw); }
.paddock__report { font-family: var(--font-text); font-size: max(1.25cqw, var(--copy-min-size, 0px)); letter-spacing: var(--tracking-label); line-height: var(--leading-display); }
.paddock__cta { --cta-h: 3.4722cqw; height: var(--cta-h); width: auto; align-self: flex-start; font-size: calc(var(--cta-h) * 20 / 50); gap: calc(var(--cta-h) * 14 / 50); padding-right: calc(var(--cta-h) * 26 / 50); justify-content: flex-start; padding-left: calc(var(--cta-h) * 24 / 50); opacity: 0; }
.paddock__cta .cta__arrow { width: calc(var(--cta-h) * 13.71 / 50); height: calc(var(--cta-h) * 10.71 / 50); }
.paddock__panels { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.pbracket { position: absolute; opacity: 0; pointer-events: none; padding: calc(11 * var(--U)) calc(14 * var(--U)); }
.pbracket i { position: absolute; width: calc(10 * var(--U)); height: calc(10 * var(--U)); border: 1px solid var(--foreground-on-light); will-change: transform; }
.pbracket .tl { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.pbracket .tr { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.pbracket .bl { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.pbracket .br { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.pbracket--meet { right: var(--G); top: calc(32 * var(--U)); }
.pbracket--stats { right: var(--G); top: calc(137 * var(--U)); }
.paddock__meet { font-family: var(--font-text); position: relative; width: calc(172 * var(--U)); display: flex; flex-direction: column; gap: calc(6 * var(--U)); font-size: calc(14 * var(--U)); letter-spacing: var(--tracking-label); line-height: var(--leading-flat); opacity: 0; }
.paddock__meet dt { font-weight: var(--weight-medium); }
.paddock__stats { position: relative; width: calc(172 * var(--U)); }
.prow { position: relative; display: flex; align-items: flex-end; gap: calc(24 * var(--U)); height: calc(58 * var(--U)); opacity: 0; }
.prow svg { width: calc(30 * var(--U)); height: calc(30 * var(--U)); flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.prow dt { font-family: var(--font-text); font-size: calc(12 * var(--U)); letter-spacing: var(--tracking-label); color: var(--foreground-on-light-muted); }
.prow dd { font-size: calc(38 * var(--U)); font-weight: var(--weight-display); line-height: var(--leading-cap); letter-spacing: var(--tracking-stat); margin-top: calc(8 * var(--U)); }
.prow + .prow { margin-top: calc(47 * var(--U)); }
.prow + .prow::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-24 * var(--U)); height: 1px; background: var(--foreground-on-light-muted); transform-origin: left; transform: scaleX(0); }
.paddock__cta .cta__label { color: var(--accent); }

/* La bande calendrier */
.calendar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; height: var(--band-h); color: var(--foreground); }
.calendar__link { position: absolute; top: calc(131.5 / 1440 * 100cqw + var(--cal-mark-drop, 0px)); left: calc(50% + (var(--x) - 720) / 1440 * 100cqw * var(--cal-spread, 1)); width: calc(var(--w) / 1440 * 100cqw * var(--cal-spread, 1)); height: 1px; transform-origin: left; transform: scaleX(0); background: repeating-linear-gradient(to right, var(--foreground-muted) 0 calc(7 / 1440 * 100cqw), transparent calc(7 / 1440 * 100cqw) calc(11.45 / 1440 * 100cqw)); }
.calendar__card { position: absolute; top: calc(43 / 1440 * 100cqw + var(--cal-card-drop, 0px)); left: calc(50% + (var(--x) + var(--w) / 2 - 720) / 1440 * 100cqw * var(--cal-spread, 1) - var(--w) / 1440 * 100cqw / 2); width: calc(var(--w) / 1440 * 100cqw); display: flex; flex-direction: column; align-items: center; gap: calc(12 / 1440 * 100cqw); text-align: center; opacity: 0; }
.calendar__round { font-family: var(--font-text); font-size: calc(12 / 1440 * 100cqw); letter-spacing: var(--tracking-wide); color: var(--foreground-muted); }
.calendar__name { font-size: max(calc(16 / 1440 * 100cqw), var(--copy-min-size, 0px)); font-weight: var(--weight-medium); letter-spacing: var(--tracking-heading); line-height: var(--leading-headline); white-space: nowrap; }
.calendar__name > span[aria-hidden] { flex-wrap: nowrap !important; }
.calendar__date { font-family: var(--font-text); font-size: calc(14 / 1440 * 100cqw); letter-spacing: var(--tracking-label); color: var(--foreground-muted); }
.calendar__card--live .calendar__round, .calendar__card--live .calendar__date { color: var(--accent); }
.calendar__mark { position: absolute; top: calc(83 / 1440 * 100cqw + var(--cal-mark-drop, 0px)); left: 50%; transform: translateX(-50%); font-size: calc(12 / 1440 * 100cqw); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); line-height: 1; opacity: 0; white-space: nowrap; }
.calendar__mark svg { width: calc(11 / 1440 * 100cqw); height: calc(11 / 1440 * 100cqw); overflow: visible; display: block; }
.calendar__mark--live { color: var(--accent); }
.calendar__bracket { position: absolute; top: calc(30 / 1440 * 100cqw + var(--cal-card-drop, 0px)); left: calc(50% + (725 - 720) / 1440 * 100cqw * var(--cal-spread, 1) - 62 / 1440 * 100cqw); width: calc(124 / 1440 * 100cqw); height: calc(84 / 1440 * 100cqw); opacity: 0; pointer-events: none; --spread: 0px; }
.calendar__bracket i { position: absolute; width: calc(10 / 1440 * 100cqw); height: calc(10 / 1440 * 100cqw); border: 1px solid var(--accent); transition: inset var(--duration-plate) var(--ease-plate); }
.calendar__bracket .tl { left: calc(-1 * var(--spread)); top: calc(-1 * var(--spread)); border-right: 0; border-bottom: 0; }
.calendar__bracket .tr { right: calc(-1 * var(--spread)); top: calc(-1 * var(--spread)); border-left: 0; border-bottom: 0; }
.calendar__bracket .bl { left: calc(-1 * var(--spread)); bottom: calc(-1 * var(--spread)); border-right: 0; border-top: 0; }
.calendar__bracket .br { right: calc(-1 * var(--spread)); bottom: calc(-1 * var(--spread)); border-left: 0; border-top: 0; }
.calendar.is-live-hover .calendar__bracket { --spread: calc(5 / 1440 * 100cqw); }
@media (max-width: 1023px) { .paddock { --type-min: 13px; --copy-min-size: 17px; --fig-cap: 118.75cqw; --band-scale: 1.75; --cal-spread: 1.75; --cal-mark-drop: 8cqw; --cal-card-drop: 1.3cqw; --U: 1px; --intro-min-w: 280px; } .paddock__cta { --cta-h: 50px; } .paddock__title { --head-min: 6.6667cqw; } }
@media (max-width: 639px) {
  .paddock { --block-h: 1062px; --band-scale: 1; --head-min: 40px; --G: 24px; }
  .paddock__panels { display: none; }
  .paddock__portrait { left: 50%; height: auto; width: 120%; bottom: 300px; }
  .paddock__intro { bottom: 320px; width: calc(100% - 48px); color: var(--foreground-on-light); }
  .paddock__band { height: 300px; }
  .paddock__melt { height: 300px; }
  .calendar { height: 300px; display: grid; grid-template-columns: repeat(3, 1fr); align-content: center; gap: 1.25rem 0.75rem; padding: 1.5rem 4%; border-top: 1px solid rgb(255 255 255 / 0.15); }
  .calendar__link, .calendar__bracket, .calendar__mark { display: none; }
  .calendar__card { position: relative; left: auto; top: auto; width: auto; }
  .calendar__card:nth-child(-n+6) { display: none; }
  .calendar__round { font-size: 11px; } .calendar__name { font-size: 15px; } .calendar__date { font-size: 12px; }
}

/* ───────── 5 · Onto the next one ───────── */
.footer {
  container-type: inline-size; position: relative; isolation: isolate; min-height: var(--foot-h, 100lvh); width: 100%; overflow: hidden;
  background: var(--accent); color: var(--foreground); --G: var(--foot-gutter, 2.2222cqw); --T: calc(100cqw / 1440);
}
.footer__panel { position: absolute; inset: 1.1111cqw; overflow: hidden; background: var(--surface-black); }
.footer__contours { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.footer__figure { position: absolute; inset: 0; z-index: 10; transform-origin: bottom; scale: var(--fig-scale, 1); translate: var(--fig-shift, 0); pointer-events: none; }
.footer__figure-layer { position: absolute; inset: 0; }
.footer__helmet { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; aspect-ratio: 1; transform: translateX(-50%); object-fit: cover; object-position: center bottom; }
.footer__logo { position: absolute; z-index: 20; left: var(--G); top: var(--G); display: flex; align-items: center; gap: 0.5rem; color: var(--accent); font-size: calc(16 * var(--T)); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider); opacity: 0; }
.footer__logo .shield { width: auto; height: calc(28 * var(--T)); display: block; }
.footer__title { position: absolute; z-index: 20; top: var(--foot-head-top, var(--G)); right: var(--foot-head-right, var(--G)); width: max(25.6944cqw, var(--head-w-min, 0px)); font-size: max(3.8194cqw, var(--foot-head-min, 0px)); font-weight: var(--weight-display); letter-spacing: var(--tracking-heading); line-height: var(--leading-headline); color: var(--accent); display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.footer__title .dot { color: var(--foreground); }
.footer__nav { position: absolute; z-index: 20; left: 0; margin-left: var(--G); top: var(--nav-mid, 50%); transform: translateY(-50%); width: var(--nav-w, 10.9722cqw); display: flex; flex-direction: column; gap: var(--nav-gap, calc(12 * var(--T))); font-size: var(--nav-size, calc(36 * var(--T))); font-weight: var(--weight-display); letter-spacing: var(--tracking-heading); line-height: var(--leading-headline); }
.footer__nav a { display: block; width: max-content; height: var(--nav-row, calc(34 * var(--T))); white-space: nowrap; transition: color var(--duration-fast); }
.footer__nav a:hover { color: var(--accent); }
.footer__copy { font-family: var(--font-text); position: absolute; z-index: 20; left: var(--G); bottom: max(2.2222cqw, var(--foot-bottom-min, 0px)); width: max(calc(220 * var(--T)), var(--foot-copy-min, 0px)); font-size: calc(14 * var(--T)); letter-spacing: var(--tracking-label); line-height: var(--leading-display); color: var(--foreground-faint); opacity: 0; }
.footer__cta { position: absolute; z-index: 20; left: var(--cta-left, 40.4861cqw); bottom: max(2.2222cqw, var(--foot-bottom-min, 0px)); --cta-h: 3.4722cqw; height: var(--cta-h); width: auto; font-size: calc(var(--cta-h) * 20 / 50); gap: calc(var(--cta-h) * 14 / 50); justify-content: flex-start; padding: 0 calc(var(--cta-h) * 26 / 50) 0 calc(var(--cta-h) * 24 / 50); opacity: 0; }
.footer__cta .cta__arrow { width: calc(var(--cta-h) * 13.71 / 50); height: calc(var(--cta-h) * 10.71 / 50); }
.footer__socials { position: absolute; z-index: 20; right: var(--social-right, var(--G)); bottom: max(2.2222cqw, var(--foot-bottom-min, 0px)); width: max(calc(206 * var(--T)), var(--social-min-w, 0px)); display: flex; justify-content: space-between; font-size: calc(14 * var(--T)); letter-spacing: var(--tracking-wide); opacity: 0; }
.footer__socials a:hover { color: var(--accent); }
@media (max-width: 1023px) { .footer { --foot-bottom-min: 5cqw; --head-w-min: 44cqw; --foot-head-min: 6.6667cqw; } }
@media (min-width: 640px) and (max-width: 1023px) { .footer { --foot-h: 104cqw; --fig-scale: 0.87; --fig-shift: 3%; --nav-size: 36px; --nav-gap: 12px; --nav-row: 34px; --cta-left: 50%; --foot-copy-min: 200px; } .footer__cta { --cta-h: 50px; transform: translateX(-50%); } }
@media (max-width: 639px) {
  .footer { --foot-gutter: 24px; --foot-h: 680px; --nav-mid: 312px; --nav-size: 30px; --nav-gap: 12px; --nav-row: auto; --nav-w: calc(100cqw - 48px); --foot-head-top: 78px; --foot-head-min: 40px; --head-w-min: 240px; --foot-copy-min: 212px; }
  .footer__figure { display: none; }
  .footer__title { left: 24px; right: auto; align-items: flex-start; text-align: left; }
  .footer__nav a { width: 100%; border-bottom: 1px solid rgb(255 255 255 / 0.15); padding-bottom: 0.5rem; }
  .footer__cta { --cta-h: 50px; left: 24px; width: calc(100cqw - 48px); bottom: 73px; }
  .footer__socials { right: auto; left: 24px; bottom: 151px; width: auto; gap: 2rem; }
  .footer__copy { bottom: 24px; }
}

/* Carte photo des virages : en bas à gauche, au niveau de l'encadré, reliée au virage par un fil */
.turn-card { position: absolute; z-index: 40; left: 0; top: 0; width: 16.5rem; background: var(--surface-black); color: var(--foreground); border: 1px solid rgb(255 255 255 / 0.25); pointer-events: none; opacity: 0; transform: translateY(14px); transition: opacity 260ms var(--ease-entrance), transform 420ms var(--ease-plate); }
.turn-card.is-on { opacity: 1; transform: translateY(0); }
.turn-card__pic { overflow: hidden; }
.turn-card img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; clip-path: inset(0 100% 0 0); transform: scale(1.08); transition: clip-path 520ms var(--ease-plate) 120ms, transform 900ms var(--ease-plate) 120ms; }
.turn-card.is-on img { clip-path: inset(0); transform: scale(1); }
.turn-card__body { padding: 0.75rem 0.875rem 0.875rem; }
.turn-card__name, .turn-card__meta, .turn-card__credit { opacity: 0; transform: translateY(6px); transition: opacity 320ms var(--ease-entrance), transform 320ms var(--ease-entrance); }
.turn-card.is-on .turn-card__name { opacity: 1; transform: none; transition-delay: 260ms; }
.turn-card.is-on .turn-card__meta { opacity: 1; transform: none; transition-delay: 340ms; }
.turn-card.is-on .turn-card__credit { opacity: 1; transform: none; transition-delay: 420ms; }
.turn-card__name { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 1rem; letter-spacing: var(--tracking-heading); line-height: 1; }
.turn-card__meta { margin-top: 0.4rem; font-family: var(--font-text); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--foreground-muted); line-height: 1.3; }
.turn-card__credit { margin-top: 0.4rem; font-family: var(--font-text); font-size: 0.6rem; letter-spacing: 0.04em; color: var(--foreground-faint); text-transform: none; line-height: 1.3; }
.turn-thread { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 41; pointer-events: none; overflow: visible; }
@media (hover: none) { .turn-card, .turn-thread { display: none; } }