/* =========================================================
   IAGO ROSA OLIVEIRA — portfolio photo
   Tier 1 : valeurs brutes · Tier 2 : rôles
   ========================================================= */
:root {
  --raw-paper-50: #f6f7f5;
  --raw-paper-100: #eaecea;
  --raw-paper-200: #dde1df;
  --raw-steel-400: #b4bcbd;
  --raw-ink-950: #0a0b0b;
  --raw-ink-900: #0f1112;
  --raw-ink-800: #1c1f21;
  --raw-ink-700: #2b2f32;
  --raw-ink-alpha-35: rgb(10 11 11 / 0.38);
  --raw-slate-500: #5f6162;
  --raw-slate-600: #4b4d4e;
  --raw-slate-900: #1f2021;
  --raw-signal-500: #ff5a1f;
  --raw-signal-alpha-25: rgb(255 90 31 / 0.25);
  --raw-stone-600: #545553;
  --raw-white-alpha-10: rgb(255 255 255 / 0.1);
  --raw-white-alpha-20: rgb(255 255 255 / 0.2);
  --raw-white-alpha-40: rgb(255 255 255 / 0.4);
  --raw-ink-alpha-08: rgb(10 11 11 / 0.08);
  --raw-white: #ffffff;

  --background: var(--raw-paper-50);
  --foreground: var(--raw-ink-950);
  --foreground-muted: var(--raw-ink-alpha-35);
  --surface-dark: var(--raw-ink-900);
  --surface-black: var(--raw-ink-950);
  --surface-muted: var(--raw-paper-100);
  --surface-soft: var(--raw-paper-200);
  --foreground-on-dark: var(--raw-white);
  --foreground-on-dark-muted: var(--raw-steel-400);
  --foreground-on-dark-faint: var(--raw-white-alpha-40);
  --border-muted: var(--raw-paper-200);
  --map-dot: var(--raw-slate-500);
  --map-grid: var(--raw-slate-600);
  --map-grid-ghost: var(--raw-slate-900);
  --map-mark: var(--raw-paper-50);
  --timeline-outline: var(--raw-stone-600);
  --timeline-fill: var(--raw-white-alpha-10);
  --timeline-rail: var(--raw-white-alpha-20);
  --paddock-contour: var(--raw-ink-alpha-08);
  --footer-contour: var(--raw-white-alpha-10);
  --accent: var(--raw-signal-500);
  --accent-muted: var(--raw-signal-alpha-25);

  --type-impact: 6rem;
  --type-display-lg: 4.375rem;
  --type-display: 3.25rem;
  --type-heading: 2.375rem;
  --type-title: 1.25rem;
  --type-lead: 1.125rem;
  --type-label: 1rem;
  --type-body: 0.875rem;
  --type-eyebrow: 0.75rem;

  --ease-entrance: cubic-bezier(0.2, 0, 0, 1);
  --ease-plate: cubic-bezier(0.33, 0, 0, 1);
  --font-sans: "Space Grotesk", system-ui, sans-serif;
  --font-display: "Oswald", Impact, sans-serif;
}

/* La racine suit la largeur par paliers : 1rem = 1px de maquette */
html { font-size: 16px; }
@media (max-width: 1920px) { html { font-size: 0.833333vw; } }
@media (max-width: 1440px) { html { font-size: 1.111111vw; } }
@media (max-width: 1279px) { html { font-size: 16px; } }
@media (min-width: 1441px) and (max-width: 1920px) {
  [data-hero] {
    --b: calc(1920 / 1440);
    --type-impact: calc(6rem * var(--b));
    --type-display-lg: calc(4.375rem * var(--b));
    --type-heading: calc(2.375rem * var(--b));
    --type-title: calc(1.25rem * var(--b));
    --type-lead: calc(1.125rem * var(--b));
    --type-label: calc(1rem * var(--b));
    --type-body: calc(0.875rem * var(--b));
    --type-eyebrow: calc(0.75rem * var(--b));
  }
}

*, *::before, *::after { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  min-height: 100lvh;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol, dl, dd, figure, h1, h2, h3, p { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.up { text-transform: uppercase; }
.hover-accent { transition: color 150ms var(--ease-entrance); }
.hover-accent:hover { color: var(--accent); }

/* ---------- moteur de texte ---------- */
.tx { display: flex; flex-wrap: wrap; column-gap: 0.3em; }
.tx > span[aria-hidden] { display: inline-block; will-change: transform, opacity; }
.tx-letters { column-gap: 0; }
.tx-letters > span[aria-hidden] { white-space: pre; }
[data-rise] { opacity: 0; }
.no-js [data-rise] { opacity: 1; }

/* =========================================================
   VOILE DE CHARGEMENT
   ========================================================= */
.veil {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--background);
}
.veil-mark {
  position: relative; width: 8rem; height: 8rem;
  -webkit-mask: var(--aperture) center / contain no-repeat;
  mask: var(--aperture) center / contain no-repeat;
}
.veil-mark i { position: absolute; inset: 0; background: var(--foreground); }
.veil-mark i:first-child { opacity: 0.12; }
.veil-mark i:last-child { transform-origin: top; transform: scaleY(0); }
.veil-name {
  margin-top: 1.75rem; font-size: var(--type-lead); text-transform: uppercase;
  line-height: 0.9; letter-spacing: 0.18em; opacity: 0;
}
.veil-meter { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--border-muted); }
.veil-meter i { position: absolute; inset: 0; background: var(--foreground); transform-origin: left; transform: scaleX(0); }

/* =========================================================
   PILE COLLANTE
   ========================================================= */
.stack { position: relative; background: var(--surface-black); }
.layer { position: sticky; top: 0; }
.layer:nth-child(1) { z-index: 0; }
.layer:nth-child(2) { z-index: 10; }
.layer-last { position: relative; z-index: 20; }
.layer-inner { transform-origin: center; }
.layer-shade { position: absolute; inset: 0; background: var(--surface-black); opacity: 0; pointer-events: none; }

/* =========================================================
   1 — HERO
   ========================================================= */
.hero {
  position: relative; isolation: isolate; min-height: 100lvh; overflow: hidden;
  background: var(--background);
}
.hero-canvas {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  pointer-events: none; transform: translateZ(0);
}
.hero-fallback {
  position: absolute; inset: 0; z-index: 0; display: none;
  background: var(--background) url("../assets/images/web/sony-a6400.png") center 60% / auto 80% no-repeat;
}
.hero.no-gl .hero-fallback { display: block; }
.hero-ramp {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 10; pointer-events: none;
  background-image: linear-gradient(to bottom,
    color-mix(in srgb, var(--background) 0%, transparent) 0%,
    color-mix(in srgb, var(--background) 6%, transparent) 26%,
    color-mix(in srgb, var(--background) 20%, transparent) 46%,
    color-mix(in srgb, var(--background) 45%, transparent) 64%,
    color-mix(in srgb, var(--background) 74%, transparent) 80%,
    color-mix(in srgb, var(--background) 93%, transparent) 91%,
    var(--background) 100%);
}
@media (min-width: 1280px) { .hero-ramp { display: none; } }

.hero-col {
  position: relative; z-index: 20; min-height: 100lvh;
  display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem;
}
@media (min-width: 640px) { .hero-col { padding: 1.5rem 2rem; } }
@media (max-height: 500px) { .hero-col { padding-top: 0.75rem; padding-bottom: 0.75rem; } }

/* masthead */
.mast { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; }
.logo { display: inline-flex; align-items: center; gap: 0.5rem; height: 1.5rem; }
.logo svg { width: 1.5rem; height: 1.5rem; }
.logo span { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; }
.mast-nav { display: none; position: absolute; left: 50%; transform: translateX(-50%); }
.mast-nav ul { display: flex; gap: 4rem; }
.mast-nav a, .mast-cta { font-size: var(--type-label); text-transform: uppercase; line-height: 0.9; }
.mast-cta { display: none; font-weight: 700; }
.burger { padding: 0.5rem; margin-right: -0.5rem; display: grid; gap: 0.3125rem; }
.burger i { display: block; width: 1.5rem; height: 1px; background: var(--foreground); }
@media (min-width: 1280px) {
  .mast-nav, .mast-cta { display: block; }
  .burger { display: none; }
}

/* milieu */
.hero-mid { display: flex; flex-direction: column; gap: 2rem; flex: 1; justify-content: space-between; }
@media (min-width: 768px) { .hero-mid { flex-direction: row; align-items: flex-start; } }
@media (min-width: 1280px) { .hero-mid { align-items: center; } }

.ident { position: relative; max-width: 26.0625rem; display: flex; flex-direction: column; gap: 3rem; }
@media (min-width: 1280px) { .ident { gap: 6.0625rem; } }
.ident-id { font-size: var(--type-label); text-transform: uppercase; color: var(--foreground-muted); line-height: 0.9; margin-bottom: 1rem; }
@media (min-width: 1280px) { .ident-id { position: absolute; left: 21rem; top: 0.5625rem; margin: 0; } }
.ident h1 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 0.95; font-size: var(--type-display-lg); max-width: 6em;
}
@media (min-width: 768px) { .ident h1 { font-size: var(--type-impact); } }
@media (min-width: 1024px) and (max-width: 1279px) { .ident h1 { font-size: var(--type-display-lg); } }
@media (max-height: 500px) { .ident h1 { font-size: var(--type-heading); } }
.meta { display: flex; flex-direction: column; gap: 1rem; }
.meta li { display: flex; align-items: center; gap: 0.5rem; font-size: var(--type-lead); text-transform: uppercase; line-height: 0.9; }
.meta svg { width: 1rem; height: 1rem; flex: none; }

/* panneaux à crochets */
.panels { display: none; flex-direction: column; gap: 2rem; }
@media (min-width: 640px) { .panels { display: flex; flex-direction: row; flex-wrap: wrap; } }
@media (min-width: 768px) { .panels { flex-direction: column; width: 13.625rem; } }
@media (min-width: 1441px) and (max-width: 1920px) { .panels { width: calc(13.625rem * 1920 / 1440); } }
.bracket-panel { position: relative; padding: 1rem 1.375rem 1.1875rem; }
.bracket-panel > .bk { position: absolute; width: 0.625rem; height: 0.625rem; color: var(--foreground); }
.bk { fill: none; stroke: currentColor; overflow: visible; }
.bk-tr { top: 0; right: 0; }
.bk-tl { top: 0; left: 0; transform: scaleX(-1); }
.bk-bl { bottom: 0; left: 0; transform: scale(-1); }
.bk-br { bottom: 0; right: 0; transform: scaleY(-1); }
.eyebrow { font-size: var(--type-eyebrow); font-weight: 500; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.02em; color: var(--accent); }
.panel-dl { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.375rem; font-size: var(--type-body); text-transform: uppercase; line-height: 0.9; }
.panel-dl dt { font-weight: 700; }
.panel-pitch { margin-top: 1.25rem; width: 6rem; height: 3.6rem; color: var(--foreground); }
.stats { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: center; }
.stats dt { font-size: var(--type-eyebrow); text-transform: uppercase; letter-spacing: -0.04em; white-space: nowrap; }
.stats dd { margin-top: 0.75rem; font-family: var(--font-display); font-weight: 500; font-size: var(--type-heading); line-height: 0.72; letter-spacing: -0.08em; justify-content: center; }

/* pied du hero */
.actions { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.5rem; }
@media (min-width: 640px) { .actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 2rem; margin-top: 0; } }
.trailer { display: none; align-items: center; gap: 0.75rem; }
@media (min-width: 640px) { .trailer { display: flex; } }
.trailer svg { width: 2rem; height: 2rem; flex: none; }
.trailer span { display: flex; flex-direction: column; gap: 0.375rem; font-size: var(--type-body); text-transform: uppercase; line-height: 0.9; }
.trailer b { font-weight: 500; transition: color 150ms var(--ease-entrance); }
.trailer:hover b { color: var(--accent); }
.trailer small { font-size: inherit; color: var(--foreground-muted); }
.socials { display: none; justify-content: flex-end; gap: 2rem; font-size: var(--type-body); text-transform: uppercase; }
@media (min-width: 640px) { .socials { display: flex; } }
@media (min-width: 1280px) { .socials { gap: 3.6875rem; } }

/* bouton chanfreiné */
.cta {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 1.6em;
  font-size: var(--type-title); height: 3.5rem; width: 100%;
  text-transform: uppercase; line-height: 0.9; color: var(--accent);
}
@media (min-width: 640px) { .cta { height: 2.5em; width: 12.5em; } }
.cta .lbl { white-space: nowrap; }
.cta svg.frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cta .flood { fill: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform 250ms var(--ease-plate); }
.cta .ring { fill: none; stroke: var(--accent); stroke-opacity: 0.25; vector-effect: non-scaling-stroke; }
.cta .brk { fill: none; stroke: var(--accent); vector-effect: non-scaling-stroke; }
.cta .lbl { position: relative; transition: color 250ms; }
.cta .arrow { position: relative; width: 0.65em; height: 0.5em; overflow: visible; transition: transform 150ms var(--ease-entrance); }
.cta .arrow path { fill: none; stroke: currentColor; }
.cta:hover .flood, .cta:focus-visible .flood { transform: scaleX(1); }
.cta:hover, .cta:focus-visible { color: var(--surface-black); }
.cta:hover .arrow { transform: translateX(0.25rem); }

/* feuille de menu */
.sheet {
  position: fixed; inset: 0; z-index: 70; background: var(--background);
  padding: 1.5rem 2rem; display: flex; flex-direction: column; opacity: 0;
}
.sheet[hidden] { display: none; }
.sheet-top { display: flex; justify-content: space-between; align-items: center; }
.sheet-close { position: relative; width: 2.5rem; height: 2.5rem; margin-right: -0.5rem; }
.sheet-close i { position: absolute; left: 0.5rem; right: 0.5rem; top: 50%; height: 1px; background: var(--foreground); }
.sheet-close i:first-child { transform: rotate(45deg); }
.sheet-close i:last-child { transform: rotate(-45deg); }
.sheet nav { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.sheet nav a {
  font-family: var(--font-display); font-weight: 700; font-size: var(--type-heading);
  text-transform: uppercase; line-height: 0.95; opacity: 0;
}
@media (min-width: 640px) { .sheet nav { gap: 1.5rem; } .sheet nav a { font-size: var(--type-display); } }

/* =========================================================
   DAMIER QUI SE DÉFAIT (couture entre blocs)
   ========================================================= */
.flag { position: absolute; left: 0; right: 0; top: 0; height: 34svh; width: 100%; pointer-events: none; z-index: 30; }
@media (max-width: 639px) { .flag { z-index: 0; } }

/* =========================================================
   2 — LE TERRAIN
   ========================================================= */
.terrain {
  container-type: inline-size; position: relative; isolation: isolate;
  min-height: var(--season-h, 100lvh); overflow: hidden;
  background: var(--surface-black); color: var(--foreground-on-dark);
}
.terrain .flag { z-index: 10; }
@media (max-width: 1023px) { .terrain { --type-min: 13px; --head-min: 6.6667cqw; } }
@media (max-width: 639px) { .terrain { --head-min: 40px; --season-h: 720px; } }

.stage-frame {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.stage { position: absolute; left: 0; top: 0; width: 1440px; height: 800px; transform-origin: top left; }
.stage > * { position: absolute; inset: 0; width: 1440px; height: 800px; }
.stage svg { overflow: visible; }
.map-label { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.06em; fill: var(--foreground-on-dark-muted); text-transform: uppercase; }
.map-turn { fill: var(--accent); opacity: 0.3; transition: opacity 400ms; }
.map-turn.lit { opacity: 1; }

.terrain-shade {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(to right, var(--surface-black) 0%, rgb(10 11 11 / 0.75) 18%, rgb(10 11 11 / 0) 34%);
}
@media (max-width: 1023px) { .terrain-shade { background: linear-gradient(to bottom, var(--surface-black) 0%, rgb(10 11 11 / 0.6) 30%, rgb(10 11 11 / 0) 50%); } }
.terrain-col {
  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 1.5rem 2rem; pointer-events: none;
}
@media (min-width: 640px) { .terrain-col { padding-left: max(2.2222cqw, 32px); padding-right: max(2.2222cqw, 32px); padding-bottom: max(2.2222cqw, 32px); } }
.terrain-col a, .terrain-col button { pointer-events: auto; }
.blk-head {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: 0.95;
  color: var(--accent); font-size: max(3.8194cqw, var(--head-min, 0px));
}
.blk-head .tx { justify-content: flex-start; }
.blk-head .stop { color: var(--foreground-on-dark); display: inline-block; opacity: 0; }
.blk-head .line-last { display: flex; align-items: baseline; }
.rule { width: 1.6667cqw; min-width: 24px; height: 0.1389cqw; min-height: 2px; background: var(--accent); margin-top: max(1.9444cqw, 20px); transform-origin: left; transform: scaleX(0); }
.intro {
  margin-top: max(2.0833cqw, 20px); width: max(18cqw, 15rem);
  font-size: max(1.25cqw, 17px); text-transform: uppercase; line-height: 1.1; column-gap: 0.22em;
}
.plate {
  align-self: flex-end; position: relative;
  width: max(19.2361cqw, 277px); height: max(5.4167cqw, 78px);
  display: grid; grid-template-columns: max(5.7639cqw, 83px) 1fr;
}
.plate > svg.frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate > svg.frame path { fill: var(--surface-black); stroke: var(--accent); vector-effect: non-scaling-stroke; }
.plate > svg.frame line { stroke: var(--accent); vector-effect: non-scaling-stroke; }
.plate-badge { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: max(0.7639cqw, 11px); }
.plate-badge svg { width: max(2.5694cqw, 37px); height: max(1.5972cqw, 23px); }
.plate-badge svg * { fill: none; stroke: var(--accent); }
.plate-word { display: flex; gap: 0.3em; font-size: max(0.8333cqw, 12px); line-height: 0.72; letter-spacing: -0.02em; text-transform: uppercase; }
.plate-word .a { color: var(--accent); }
.plate-stats { position: relative; display: flex; flex-direction: column; justify-content: center; gap: max(0.5556cqw, 8px); padding-left: max(1.1111cqw, 16px); text-transform: uppercase; line-height: 0.72; font-size: max(0.9722cqw, 14px); }
.plate-stats div { display: flex; gap: 0.35em; white-space: nowrap; }
.plate-stats dt { color: var(--accent); }

/* =========================================================
   3 — PARCOURS (timeline)
   ========================================================= */
.parcours {
  container-type: inline-size; position: relative; isolation: isolate; width: 100%;
  background: var(--surface-black); color: var(--foreground-on-dark);
  --u: calc(100cqw / 1440);
  --gutter: max(calc(var(--u) * 32), var(--gutter-min, 0px));
  padding-bottom: calc(var(--u) * 150);
}
@media (max-width: 1023px) {
  .parcours { overflow-x: clip; --copy-min-size: 17px; --head-min: 6.6667cqw; --year-min: 30px; --copy-min-w: 200px; --top-extra: 16cqw; --head-top: calc(var(--u) * 150); }
}
@media (max-width: 639px) { .parcours { --head-min: 40px; --copy-min-w: 0px; --gutter-min: 24px; --top-extra: 0px; } }
.tl-wrap { position: relative; width: 100%; padding-top: calc(var(--u) * 169 + var(--top-extra, 0px)); }
.tl-head {
  position: absolute; z-index: 20; top: var(--head-top, var(--gutter)); right: var(--gutter);
  width: max(calc(var(--u) * 330), var(--head-w-min, 0px));
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: 0.95;
  color: var(--accent); font-size: max(calc(var(--u) * 55), var(--head-min, 0px));
  display: flex; flex-direction: column; align-items: flex-end; text-align: right;
}
.tl-head .tx { justify-content: flex-end; }
.tl-about {
  position: absolute; z-index: 20; left: var(--gutter); top: var(--gutter);
  width: max(calc(var(--u) * 300), 15rem); font-size: max(calc(var(--u) * 16), 15px);
  text-transform: uppercase; line-height: 1.15; color: var(--foreground-on-dark-muted);
}
.tl-about b { color: var(--foreground-on-dark); font-weight: 500; }
@media (max-width: 1023px) { .tl-about { display: none; } }
.tl-rail {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 10;
  width: calc(var(--u) * 16); top: 0; pointer-events: none;
}
.tl-rail svg { width: 100%; height: 100%; overflow: visible; display: block; }
@media (max-width: 1023px) { .tl-rail { top: calc(var(--u) * 169 + var(--top-extra, 0px)); } }
@media (max-width: 639px) { .tl-rail { display: none; } }

.tl-row { position: relative; width: 100%; height: calc(var(--u) * var(--h)); transition: opacity 700ms var(--ease-plate); }
.tl-layer { position: absolute; inset: 0; pointer-events: none; }
.tl-layer > * { pointer-events: auto; }
.tl-plate {
  position: absolute; top: 0; bottom: 0; width: calc(var(--u) * var(--w));
  cursor: zoom-in; display: block;
}
.tl-row.c .tl-plate { left: 50%; transform: translateX(-50%); }
.tl-row.s.right .tl-plate { right: var(--gutter); }
.tl-row.s.left .tl-plate { left: var(--gutter); }
.tl-fill {
  position: absolute; inset: 0; overflow: hidden; background: var(--timeline-fill);
  clip-path: url(#plate-clip); transition: inset 700ms var(--ease-plate);
}
.tl-plate:hover .tl-fill { inset: 5%; }
.tl-slot { position: absolute; left: 0; right: 0; top: -10%; height: 110%; }
.tl-slot img { width: 100%; height: 100%; object-fit: cover; }
.tl-outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tl-outline path { fill: none; stroke: var(--timeline-outline); vector-effect: non-scaling-stroke; }
.tl-year {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20; pointer-events: none;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: 0.95;
  color: var(--accent); font-size: max(calc(var(--u) * 36), var(--year-min, 0px)); white-space: nowrap;
}
.tl-year .tx { justify-content: center; }
.tl-copy {
  position: absolute; left: calc(var(--u) * 1020); top: 50%; transform: translateY(-50%); z-index: 20; pointer-events: none;
  width: min(max(calc(var(--u) * var(--cw)), var(--copy-min-w, 0px)), calc(var(--u) * 390));
  font-size: max(calc(var(--u) * 18), var(--copy-min-size, 0px)); line-height: 1.1; text-transform: uppercase;
}
.tl-copy b { font-weight: 700; }
@media (hover: hover) {
  .parcours.dim .tl-row { opacity: 0.3; }
  .parcours.dim .tl-row.on { opacity: 1; }
}
@media (max-width: 639px) {
  .tl-wrap { display: flex; flex-direction: column; gap: 2.5rem; padding: 0 var(--gutter); padding-top: 9rem; }
  .tl-head { left: var(--gutter); right: auto; top: 3rem; flex-direction: row; gap: 0.28em; align-items: baseline; }
  .tl-row { height: auto; display: flex; flex-direction: column; gap: 0.75rem; }
  .tl-layer { position: relative; inset: auto; }
  .tl-plate { position: relative; width: 82%; aspect-ratio: 710 / 462; left: auto !important; right: auto !important; transform: none !important; }
  .tl-row:nth-of-type(odd) .tl-plate { margin-right: auto; }
  .tl-row:nth-of-type(even) .tl-plate { margin-left: auto; }
  .tl-year { position: relative; left: auto; top: auto; transform: none; margin-top: 0.25rem; }
  .tl-year .tx { justify-content: flex-start; }
  .tl-copy { position: relative; left: auto; top: auto; transform: none; width: 100%; }
}

/* =========================================================
   4 — PROJETS (bloc clair)
   ========================================================= */
.projets {
  container-type: inline-size; position: relative; isolation: isolate;
  min-height: var(--block-h, 100lvh); width: 100%; overflow: hidden;
  background: var(--background); color: var(--foreground);
  --u: calc(100cqw / 1440);
  --band-h: calc(var(--u) * 169 * var(--band-scale, 1));
}
.contours { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.band { position: absolute; left: 0; right: 0; bottom: 0; height: var(--band-h); background: var(--surface-black); }
.projets .flag { z-index: 30; }

.pj-head {
  position: absolute; z-index: 20; left: max(calc(var(--u) * 32), 24px); top: max(calc(var(--u) * 32), 24px);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: 0.95;
  font-size: max(calc(var(--u) * 96), var(--head-min, 0px));
}
.pj-head .stop { color: var(--accent); display: inline-block; opacity: 0; }
.pj-head .line-last { display: flex; align-items: baseline; }
.pj-intro {
  position: absolute; z-index: 20; left: max(calc(var(--u) * 32), 24px);
  bottom: calc(var(--band-h) + calc(var(--u) * 32));
  width: max(calc(var(--u) * 338), 280px); display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 40);
}
.pj-intro .tx { font-size: max(calc(var(--u) * 18), 17px); text-transform: uppercase; line-height: 1.1; column-gap: 0.22em; }
.cta-dark { --cta-h: max(calc(var(--u) * 50), 50px); width: calc(var(--cta-h) * 4.34); height: var(--cta-h); font-size: calc(var(--cta-h) * 0.4); gap: calc(var(--cta-h) * 0.64); justify-content: flex-start; padding-left: calc(var(--cta-h) * 0.48); }
.cta-dark .body { fill: var(--surface-black); stroke: var(--accent); vector-effect: non-scaling-stroke; }

/* la figure : deux planches en 3D */
.pj-figure {
  position: absolute; z-index: 10; left: 55%; top: 0; bottom: var(--band-h);
  width: min(46cqw, 110vh); transform: translateX(-50%);
  perspective: 1400px; perspective-origin: 50% 40%;
}
.pj-figure-inner { position: absolute; inset: 0; }
.pj-cards { position: absolute; inset: 8% 0 6%; transform-style: preserve-3d; }
.pj-card {
  position: absolute; display: block; width: 74%; aspect-ratio: 710 / 462;
  transform-style: preserve-3d; transition: transform 700ms var(--ease-plate);
}
.pj-card .tl-fill { background: var(--surface-muted); }
.pj-card .tl-outline path { stroke: var(--foreground); stroke-opacity: 0.35; }
.pj-card img { width: 100%; height: 100%; object-fit: cover; }
.pj-card-a { right: 0; top: 4%; transform: translateZ(80px) rotateY(-14deg) rotateX(5deg); }
.pj-card-b { left: 0; bottom: 6%; transform: translateZ(-60px) rotateY(-10deg) rotateX(4deg); }
.pj-card-tag {
  position: absolute; left: 0; top: calc(100% + 0.75rem); display: flex; gap: 0.75rem; align-items: baseline;
  font-size: max(calc(var(--u) * 14), 12px); text-transform: uppercase; line-height: 0.9;
}
.pj-card-tag b { font-family: var(--font-display); font-weight: 700; font-size: max(calc(var(--u) * 22), 18px); }
.pj-card-tag span { color: var(--foreground-muted); }
.pj-card-a .pj-card-tag { top: auto; bottom: calc(100% + 0.75rem); }
.pj-cards:hover .pj-card-a { transform: translateZ(120px) translateX(4%) rotateY(-8deg) rotateX(3deg); }
.pj-cards:hover .pj-card-b { transform: translateZ(-90px) translateX(-4%) rotateY(-16deg) rotateX(5deg); }

/* panneaux droite */
.pj-panels { --pu: calc(100cqw / 1440); position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.pj-col { position: absolute; right: calc(max(calc(var(--u) * 32), 24px) + var(--pu) * 12); width: calc(var(--pu) * 193); }
.pj-frame { position: absolute; right: max(calc(var(--u) * 32), 24px); width: calc(var(--pu) * 218); color: var(--foreground); opacity: 0; }
.pj-frame .bk { position: absolute; width: calc(var(--pu) * 10); height: calc(var(--pu) * 10); }
.pj-meet { top: calc(var(--pu) * 43); display: flex; flex-direction: column; gap: calc(var(--pu) * 6); font-size: calc(var(--pu) * 14); text-transform: uppercase; line-height: 0.9; }
.pj-meet b { font-weight: 700; }
.pj-stats { top: calc(var(--pu) * 147); }
.pj-stat { display: flex; align-items: flex-end; gap: calc(var(--pu) * 24); height: calc(var(--pu) * 58); }
.pj-stat svg { width: calc(var(--pu) * 31); height: calc(var(--pu) * 31); flex: none; }
.pj-stat svg * { fill: none; stroke: var(--foreground); stroke-width: 1.2; }
.pj-stat div { display: flex; flex-direction: column; gap: calc(var(--pu) * 14); }
.pj-stat small { font-size: calc(var(--pu) * 12); text-transform: uppercase; letter-spacing: calc(var(--pu) * -0.48); color: var(--foreground-muted); }
.pj-stat strong { font-family: var(--font-display); font-weight: 500; font-size: calc(var(--pu) * 38); line-height: 0.72; letter-spacing: calc(var(--pu) * -3.04); }
.pj-stat-rule { height: 1px; background: var(--foreground-muted); margin: calc(var(--pu) * 24) 0 calc(var(--pu) * 23); transform-origin: left; transform: scaleX(0); }
@media (max-width: 1023px) and (min-width: 640px) { .pj-panels { --pu: 1px; } }

/* bande calendrier → compétences */
.strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; height: var(--band-h); color: var(--foreground-on-dark); --s: var(--cal-spread, 1); }
.strip-link {
  position: absolute; height: 1px; top: calc(var(--u) * 131.5);
  background: repeating-linear-gradient(to right, var(--foreground-on-dark-muted) 0 calc(var(--u) * 7), transparent calc(var(--u) * 7) calc(var(--u) * 11.45));
  transform-origin: left; transform: scaleX(0);
}
.strip-card {
  position: absolute; top: calc(var(--u) * 43); display: flex; flex-direction: column; align-items: center; gap: max(calc(var(--u) * 12), 8px);
  text-transform: uppercase; text-align: center; white-space: nowrap; opacity: 0;
}
.strip-card small { font-size: max(calc(var(--u) * 12), 11px); color: var(--foreground-on-dark-muted); letter-spacing: -0.02em; }
.strip-card b { font-family: var(--font-display); font-weight: 700; line-height: 0.95; font-size: max(calc(var(--u) * 18), 15px); }
.strip-card span { font-size: max(calc(var(--u) * 14), 12px); color: var(--foreground-on-dark-muted); }
.strip-card.live small, .strip-card.live span { color: var(--accent); }
.strip-mark { position: absolute; top: calc(var(--u) * 126); width: calc(var(--u) * 11); height: calc(var(--u) * 11); transform: translateX(-50%); opacity: 0; overflow: visible; }
.strip-mark circle { vector-effect: non-scaling-stroke; }
.strip-bk { position: absolute; color: var(--accent); opacity: 0; pointer-events: none; transition: left 700ms var(--ease-plate), top 700ms var(--ease-plate); }
.strip-bk .bk { position: absolute; width: calc(var(--u) * 10); height: calc(var(--u) * 10); transition: inherit; }
@media (max-width: 1023px) and (min-width: 640px) { .projets { --band-scale: 1.6; --cal-spread: 1.6; } .strip-link, .strip-mark { display: none; } }
@media (max-width: 1023px) { .pj-figure { left: 62%; width: 70cqw; } }
@media (max-width: 639px) {
  .projets { --block-h: 1100px; --head-min: 40px; }
  .pj-panels { display: none; }
  .pj-figure { left: 50%; top: 10rem; bottom: auto; height: 380px; width: 92cqw; }
  .pj-intro { bottom: calc(var(--band-h) + 24px); }
  .projets { --band-h: 260px; }
  .strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem 0.75rem; padding: 1.5rem 4%; border-top: 1px solid rgb(255 255 255 / 0.15); }
  .strip-card { position: relative; left: auto !important; top: auto; width: auto; }
  .strip-card:nth-of-type(n+4) { display: none; }
  .strip-link, .strip-mark, .strip-bk, .strip-pulse { display: none; }
}

/* =========================================================
   5 — CONTACT (pied de page)
   ========================================================= */
.foot {
  container-type: inline-size; position: relative; isolation: isolate;
  min-height: var(--foot-h, 100lvh); width: 100%; overflow: hidden; background: var(--accent);
  --u: calc(100cqw / 1440);
  --G: var(--foot-gutter, calc(var(--u) * 32));
}
.foot-panel { position: absolute; inset: calc(var(--u) * 16); overflow: hidden; background: var(--surface-black); color: var(--foreground-on-dark); }
.foot-fig { position: absolute; inset: 0; z-index: 10; transform-origin: bottom; scale: var(--fig-scale, 1); pointer-events: none; }
.foot-fig-layer { position: absolute; inset: 0; perspective: 1600px; }
.foot-fig img {
  position: absolute; left: 50%; bottom: -6%; height: 92%; width: auto; aspect-ratio: 1.25;
  transform: translateX(-50%) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
  filter: drop-shadow(0 40px 60px rgb(0 0 0 / 0.5));
  user-select: none;
}
@media (max-width: 639px) { .foot-fig { display: none; } }
.foot-logo { position: absolute; z-index: 20; left: var(--G); top: var(--G); color: var(--accent); opacity: 0; }
.foot-logo .logo span { font-size: max(calc(var(--u) * 24), 18px); }
.foot-head {
  position: absolute; z-index: 20; top: var(--G); right: var(--G); width: max(calc(var(--u) * 420), var(--head-w-min, 0px));
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: 0.95;
  color: var(--accent); font-size: max(calc(var(--u) * 55), var(--foot-head-min, 0px));
  display: flex; flex-direction: column; align-items: flex-end; text-align: right;
}
.foot-head .tx { justify-content: flex-end; }
.foot-head .stop { color: var(--foreground-on-dark); display: inline-block; opacity: 0; }
.foot-head .line-last { display: flex; align-items: baseline; justify-content: flex-end; }
.foot-nav {
  position: absolute; z-index: 20; left: var(--G); top: var(--nav-mid, 50%); transform: translateY(-50%);
  display: flex; flex-direction: column; gap: max(calc(var(--u) * 12), 10px);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: 0.95;
  font-size: max(calc(var(--u) * 36), 28px); color: var(--foreground-on-dark);
}
.foot-nav a { display: block; width: max-content; }
.foot-nav .tx { column-gap: 0; flex-wrap: nowrap; }
.foot-row > * { position: absolute; z-index: 20; bottom: max(calc(var(--u) * 32), var(--foot-bottom-min, 0px)); opacity: 0; }
.foot-copy { left: var(--G); width: max(calc(var(--u) * 240), 200px); font-size: max(calc(var(--u) * 14), 12px); text-transform: uppercase; line-height: 1.1; color: var(--foreground-on-dark-faint); }
.foot-cta { left: 50%; translate: -50% 0; --cta-h: max(calc(var(--u) * 50), 50px); width: calc(var(--cta-h) * 5.5); height: var(--cta-h); font-size: calc(var(--cta-h) * 0.4); gap: calc(var(--cta-h) * 0.64); justify-content: flex-start; padding-left: calc(var(--cta-h) * 0.48); }
.foot-cta .body { fill: none; stroke: var(--accent); vector-effect: non-scaling-stroke; }
.foot-social { right: var(--G); width: max(calc(var(--u) * 206), 160px); display: flex; justify-content: space-between; font-size: max(calc(var(--u) * 14), 12px); text-transform: uppercase; }
@media (max-width: 1023px) { .foot { --foot-h: 104cqw; --foot-head-min: 6.6667cqw; --head-w-min: 44cqw; --foot-bottom-min: 5cqw; } }
@media (max-width: 639px) {
  .foot { --foot-h: 720px; --foot-gutter: 24px; --nav-mid: 300px; }
  .foot-head { left: var(--G); right: auto; top: 78px; align-items: flex-start; text-align: left; --foot-head-min: 40px; }
  .foot-head .tx, .foot-head .line-last { justify-content: flex-start; }
  .foot-nav { right: var(--G); }
  .foot-nav a { width: 100%; padding-bottom: 0.5rem; border-bottom: 1px solid rgb(255 255 255 / 0.15); }
  .foot-cta { left: var(--G); translate: none; width: calc(100% - 2 * var(--G)); bottom: 73px; }
  .foot-social { left: var(--G); right: auto; bottom: 151px; }
}

/* =========================================================
   VISIONNEUSE
   ========================================================= */
.lightbox {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background: rgb(10 11 11 / 0.94); opacity: 0; pointer-events: none; transition: opacity 250ms var(--ease-entrance);
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 88vw; max-height: 82vh; object-fit: contain; }
.lightbox button { position: absolute; color: var(--foreground-on-dark); font-size: 1rem; text-transform: uppercase; padding: 1rem; }
.lightbox button:hover { color: var(--accent); }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; translate: 0 -50%; }
.lb-next { right: 1rem; top: 50%; translate: 0 -50%; }
.lb-count { position: absolute; bottom: 1.5rem; left: 50%; translate: -50% 0; color: var(--foreground-on-dark-muted); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; }

.load-error {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 90; padding: 0.75rem 1rem;
  background: var(--surface-black); color: var(--foreground-on-dark); border-left: 3px solid var(--accent);
  font-size: 0.8rem; text-transform: uppercase;
}