/* ============================================================
   Relief : système visuel
   Papier de carte, encre, courbes de niveau. Une seule famille,
   Archivo, dont on fait varier la largeur (62 à 125 %).
   ============================================================ */
:root {
  --paper: #EEF0EB;
  --paper-2: #E2E5DE;
  --ink: #121417;
  --ink-2: #3A3F47;
  --mute: #5C626B;
  --line: rgb(18 20 23 / .14);
  --accent: #D2602A;
  --accent-ink: #AD4C1D; /* 4,8:1 sur le papier */
  --water: #2F5BEA;
  --night: #121417;
  --night-2: #1C1F24;
  --on-night: #E9EBE6;
  --on-night-2: #A3A9B2;

  /* jetons du moteur Scrollcraft (css/scrollcraft.css), accordés à Relief */
  --sc-canvas: #EEF0EB; --sc-surface: #E2E5DE; --sc-ink: #121417; --sc-ink-soft: #3A3F47;
  --sc-accent: #D2602A; --sc-accent-ink: #121417; --sc-shadow-color: 90 10% 18%;
  --sc-font-display: "Archivo", system-ui, sans-serif; --sc-font-text: "Archivo", system-ui, sans-serif;

  --f: "Archivo", system-ui, sans-serif;
  --g: clamp(20px, 4vw, 56px);
  --head: 76px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink-2) var(--paper-2); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--f); font-stretch: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--paper); }
.wrap { padding-inline: var(--g); }
.skip { position: fixed; left: 12px; top: -80px; z-index: 300; background: var(--ink); color: var(--paper); padding: 12px 16px; }
.skip:focus { top: 12px; }

/* ---------- Typographie ---------- */
/* Les masques de SplitText coupent les accents des capitales : on leur donne de l'air. */
[data-hero] > div, [data-split] > div, .foot-title > div { padding-block: .14em .04em; margin-block: -.14em -.04em; }
.display {
  font-weight: 760; font-stretch: 125%; text-transform: uppercase;
  font-size: clamp(3.4rem, 13.5vw, 13rem); line-height: .84; letter-spacing: -.025em;
}
.h2 { font-weight: 700; font-stretch: 118%; font-size: clamp(2rem, 4.6vw, 4.2rem); line-height: .95; letter-spacing: -.02em; }
.statement { font-weight: 400; font-stretch: 100%; font-size: clamp(1.55rem, 3.2vw, 2.9rem); line-height: 1.16; letter-spacing: -.015em; max-width: 30ch; }
.page-lede { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.45; max-width: 44ch; color: var(--ink-2); }

.arrow-link { display: inline-flex; align-items: center; gap: .6em; font-weight: 600; font-stretch: 110%; padding-block: .3em; background: linear-gradient(currentColor 0 0) left bottom / 100% 1px no-repeat; transition: background-size .5s var(--ease); }
.arrow-link::after { content: ""; width: .9em; height: .9em; background: currentColor; clip-path: polygon(0 45%, 70% 45%, 45% 18%, 55% 8%, 100% 50%, 55% 92%, 45% 82%, 70% 55%, 0 55%); transition: transform .5s var(--ease); }
.arrow-link:hover { background-size: 0 1px; background-position: right bottom; }
.arrow-link:hover::after { transform: translateX(.35em); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: 1.05em 1.7em; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; font-stretch: 110%; transition: background .3s, color .3s, transform .5s var(--ease); }
.btn:hover { background: var(--accent); color: var(--ink); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }

/* ---------- En-tête ---------- */
.site-head {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--head);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-inline: var(--g);
  color: #fff; mix-blend-mode: difference; transition: height .4s var(--ease);
  font-stretch: 108%; font-size: .9375rem;
}
.site-head.is-stuck { transition: background .4s, box-shadow .4s, height .4s var(--ease); height: 62px; mix-blend-mode: normal; color: var(--ink); background: rgb(238 240 235 / .88); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 var(--line); }
.menu-open .site-head.is-stuck { background: none; box-shadow: none; color: #fff; mix-blend-mode: difference; }
.brand { font-weight: 700; justify-self: start; letter-spacing: -.01em; }
.nav { display: flex; gap: clamp(14px, 2vw, 30px); }
.nav a, .head-cta, .brand { position: relative; padding-block: 6px; }
.nav a::before, .head-cta::before, .brand::before { content: ""; position: absolute; inset: -14px -9px; }
.nav a::after, .head-cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after, .head-cta:hover::after { transform: scaleX(1); transform-origin: left; }
.nav sup { font-size: .65em; margin-left: 2px; opacity: .7; }
.head-cta { grid-column: 3; grid-row: 1; justify-self: end; font-weight: 600; }
.menu-btn { display: none; }
.menu-panel { display: none; }

@media (max-width: 960px) {
  .site-head { grid-template-columns: 1fr auto; }
  .nav, .head-cta { display: none; }
  .menu-btn { display: block; grid-column: 2; font-weight: 600; padding: 10px 0; }
  .menu-panel {
    display: flex; flex-direction: column; justify-content: space-between; position: fixed; inset: 0; z-index: 55;
    background: var(--ink); color: var(--on-night); padding: calc(var(--head) + 20px) var(--g) 32px;
    clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease); visibility: hidden;
  }
  .menu-open .menu-panel { clip-path: inset(0 0 0 0); visibility: visible; }
  .menu-panel nav { display: flex; flex-direction: column; }
  .menu-panel nav a { overflow: hidden; display: block; font-weight: 740; font-stretch: 125%; text-transform: uppercase; font-size: clamp(1.9rem, 8.2vw, 4rem); line-height: 1.12; letter-spacing: -.02em; }
  .menu-panel nav a[aria-current="page"] { color: var(--accent); }
  .menu-foot { color: var(--on-night-2); }
}

/* ---------- Voile (chargement et transitions) ---------- */
.veil { position: fixed; inset: 0; z-index: 100; pointer-events: none; visibility: visible; background: var(--ink); }
html:not(.js) .veil { display: none; }
.veil canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.no-gl-veil .veil { background: var(--ink); }
.veil-text { position: absolute; left: var(--g); bottom: 18vh; color: var(--on-night); font-weight: 740; font-stretch: 125%; text-transform: uppercase; font-size: clamp(2rem, 6vw, 5.5rem); line-height: .9; letter-spacing: -.02em; max-width: 14ch; }
.veil-text span { display: block; margin-top: .6em; font-size: .22em; font-stretch: 110%; letter-spacing: .02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.veil-count { position: absolute; right: var(--g); bottom: 6vh; color: var(--on-night); font-weight: 300; font-stretch: 62%; font-size: clamp(4rem, 14vw, 12rem); line-height: .8; font-variant-numeric: tabular-nums; }

/* ---------- Aperçu qui suit le curseur ---------- */
.peek { position: fixed; left: 0; top: 0; z-index: 50; width: 340px; pointer-events: none; visibility: hidden; opacity: 0; transform: scale(.85); }
.peek canvas, .peek img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: top; background: var(--paper); box-shadow: 0 30px 60px -25px rgb(18 20 23 / .45), 0 0 0 1px var(--line); }
.peek [hidden] { display: none; }
.peek-title { margin-top: 8px; font-size: .8rem; font-weight: 600; font-stretch: 110%; }

/* ---------- Héros de l'accueil : plans superposés ----------
   Du plus loin au plus proche : terrain, « Ziyad », visage, « Chaabi », texte. Chaque plan lit --sc-p
   (progression du héros épinglé) à sa propre vitesse : c'est l'écart entre les vitesses qui donne la profondeur. */
.hero { position: relative; }
.hero-canvas, .band-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-canvas.no-gl, .band-canvas.no-gl { background: repeating-radial-gradient(circle at 70% 40%, transparent 0 22px, var(--line) 22px 23px); }
.hh-stage { --p: var(--sc-p, 0); height: 100svh; }
.hh-terrain { transform: translate3d(0, calc(var(--p) * -4vh), 0) scale(calc(1 + var(--p) * .16)); transform-origin: 60% 40%; }
.hh-name { position: absolute; left: var(--g); top: calc(var(--head) + 2vh); margin: 0; font-size: min(16vw, 24svh); pointer-events: none; } /* pas de z-index : chaque ligne se range entre les plans */
.hh-back, .hh-front { position: relative; display: block; will-change: transform, opacity; }
.hh-back { z-index: 2; transform: translate3d(0, calc(var(--p) * -12vh), 0); opacity: calc(1 - var(--p) * 1.9); }
.hh-front { z-index: 4; transform: translate3d(0, calc(var(--p) * -26vh), 0); opacity: calc(1 - var(--p) * 2.2); }
.hh-face { position: absolute; z-index: 3; right: calc(var(--g) * .6); bottom: 0; height: min(90svh, 60vw * 1.25); aspect-ratio: 4 / 5; margin: 0;
  transform: translate3d(0, calc(var(--p) * -7vh), 0) scale(calc(1 + var(--p) * .07)); transform-origin: 50% 100%; }
.hh-face canvas, .hh-face img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hh-face img { display: none; object-fit: cover; filter: grayscale(1); -webkit-mask-image: linear-gradient(0deg, transparent, #000 18%); mask-image: linear-gradient(0deg, transparent, #000 18%); }
.hh-face.no-gl img { display: block; }
/* le nom passe devant/derrière le visage : un plan papier sous le texte du bas le garde lisible sur les courbes */
.hh-copy { position: absolute; z-index: 5; left: var(--g); bottom: clamp(28px, 7svh, 72px); max-width: min(46ch, 44vw); padding: 18px 22px 20px 0; background: linear-gradient(90deg, var(--paper) 70%, rgb(238 240 235 / 0)); }
.hero-lede { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.5; color: var(--ink-2); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hh-turn { position: absolute; z-index: 5; left: var(--g); top: 50%; translate: 0 -50%; max-width: 15ch; font-weight: 500; font-stretch: 104%; font-size: clamp(2.3rem, 6vw, 6.4rem); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.device-canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 960px) {
  /* téléphone : le visage en haut, le nom passe devant lui (les deux lignes), le texte en bas, rien ne se recouvre */
  .hh-name { top: auto; bottom: calc(clamp(28px, 7svh, 72px) + 250px); font-size: 17vw; }
  .hh-back { z-index: 4; }
  .hh-face { right: 50%; translate: 50% 0; bottom: auto; top: calc(var(--head) - 6px); height: min(46svh, 92vw * 1.25); }
  .hh-copy { right: var(--g); max-width: none; padding: 20px 0 0; background: linear-gradient(0deg, var(--paper) 75%, rgb(238 240 235 / 0)); }
  .hh-copy .btn { padding: .9em 1.25em; }
  .hero-cta { margin-top: 18px; gap: 10px; }
  .hh-turn { font-size: clamp(2rem, 9.5vw, 3.4rem); }
}
/* mouvement réduit : une composition fixe, la phrase passe sous le héros */
.hero-home.is-static .hh-stage { --p: 0; }
.hero-home.is-static .hh-turn { position: relative; inset: auto; translate: none; padding: clamp(70px, 10vw, 140px) var(--g) 0; max-width: none; }

/* ---------- Sections communes ---------- */
section { position: relative; }
.intro, .work, .off, .now { padding-block: clamp(90px, 13vw, 190px) 0; }
.intro { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.intro-b { grid-column: 7 / -1; margin-top: clamp(16px, 3vw, 48px); display: grid; gap: 28px; justify-items: start; }
.intro-b p { font-size: clamp(1.2rem, 1.9vw, 1.75rem); line-height: 1.3; color: var(--ink-2); max-width: 30ch; }
.hero-home + .intro { padding-top: clamp(24px, 4vw, 60px); } /* juste après un héros épinglé : pas un écran vide de plus */
@media (max-width: 860px) { .intro-b { grid-column: 1 / -1; } }
.sec-note { color: var(--mute); max-width: 44ch; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }

/* Lignes de projets (index type « work ») */
.rows { border-bottom: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 1fr minmax(160px, 22%) 4rem; align-items: baseline; gap: 20px; padding: 26px 0; border-top: 1px solid var(--line); position: relative; }
.row-year { font-size: .875rem; color: var(--mute); font-variant-numeric: tabular-nums; font-stretch: 110%; }
.row-year { text-align: right; }
.row-title { min-width: 0; overflow-wrap: break-word; hyphens: auto; font-weight: 720; font-stretch: 125%; text-transform: uppercase; font-size: clamp(1.7rem, 4.6vw, 4.4rem); line-height: .95; letter-spacing: -.02em; transition: transform .7s var(--ease), color .4s; }
.row-meta { color: var(--ink-2); font-size: .95rem; }
.row-cover { display: none; }
.row:hover .row-title { transform: translateX(18px); color: var(--accent); }
.row::before { content: ""; position: absolute; inset: -1px 0 auto; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.row:hover::before { transform: scaleX(1); }
@media (max-width: 720px) {
  .row { grid-template-columns: 1fr auto; }
  .row-meta { grid-column: 1 / -1; grid-row: 2; }
  /* « Gestionnaire », « Web-documentaire » : un seul mot plus large que la colonne à 1,7rem */
  .row-title { font-size: clamp(1.35rem, 6.6vw, 1.7rem); }
}

/* Hors de l'écran */
.off-list { border-bottom: 1px solid var(--line); }
.off-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(150px, .7fr); gap: 12px clamp(20px, 3vw, 48px); align-items: baseline; padding: clamp(22px, 3vw, 34px) 0; border-top: 1px solid var(--line); }
.off-what { font-weight: 720; font-stretch: 125%; text-transform: uppercase; font-size: clamp(1.4rem, 2.5vw, 2.6rem); line-height: .95; letter-spacing: -.02em; overflow-wrap: break-word; hyphens: auto; transition: color .4s; }
.off-item:hover .off-what { color: var(--c); }
.off-text { color: var(--ink-2); max-width: 46ch; }
.off-links { display: flex; flex-direction: column; align-items: start; gap: 4px; }
@media (max-width: 860px) { .off-item { grid-template-columns: 1fr; } }

/* Bande sombre */
.band { margin-top: clamp(90px, 13vw, 190px); min-height: 82vh; background: var(--night); color: var(--on-night); display: flex; align-items: center; overflow: hidden; }
.band::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--night) 10%, rgb(18 20 23 / .7) 45%, transparent 75%); }
.band-inner { position: relative; z-index: 2; max-width: 760px; pointer-events: none; }
.band-inner a { pointer-events: auto; }
.band p { font-size: clamp(1.15rem, 1.6vw, 1.4rem); margin: 20px 0 32px; color: var(--on-night-2); max-width: 40ch; }
.band .btn { background: var(--on-night); color: var(--ink); }
.band .btn:hover { background: var(--accent); }
.now { padding-bottom: clamp(90px, 13vw, 190px); }
/* fin de l'accueil : la plus petite typo de la page, après tout ce volume */
.now-line { max-width: 52ch; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.now-line a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.now-line a:hover { color: var(--accent-ink); }

/* ---------- Relief en fond de page de titre ---------- */
.page-relief { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%); opacity: .75; }

/* ---------- Projets : galerie ----------
   Un rail horizontal épinglé (Scrollcraft pan). Chaque objet porte la même étiquette, sans argument de vente. */
.gal-stage { height: 100svh; background: var(--paper); } /* hauteur posée avant le montage : le sol se mesure dès sa création */
.gal-floor { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; -webkit-mask-image: linear-gradient(180deg, transparent 52%, #000 88%); mask-image: linear-gradient(180deg, transparent 52%, #000 88%); }
.gal-index { position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: calc(var(--g) + 15rem); padding: calc(var(--head) + 28px) 24px 24px var(--g); background: linear-gradient(90deg, var(--paper) 82%, rgb(238 240 235 / 0)); overflow: auto; scrollbar-width: none; }
.gal-h { font-weight: 760; font-stretch: 125%; text-transform: uppercase; font-size: 2rem; line-height: .9; letter-spacing: -.02em; margin-bottom: 26px; }
.gal-h span { display: block; margin-top: 8px; text-transform: none; font-weight: 400; font-stretch: 100%; font-size: .8125rem; letter-spacing: 0; color: var(--mute); }
.gal-index h2 { font-size: .75rem; font-weight: 600; font-stretch: 110%; color: var(--mute); margin: 18px 0 4px; }
.gal-index a { display: inline-block; padding: 4px 0; font-size: .9375rem; font-weight: 550; font-stretch: 106%; transition: color .2s, transform .3s var(--ease); }
.gal-index a:hover { color: var(--accent-ink); transform: translateX(4px); }
.gal-rail { position: absolute; z-index: 2; left: 0; top: calc(var(--head) + 8svh); gap: clamp(28px, 4vw, 72px); align-items: start; padding: 0 12vw 0 calc(var(--g) + 15rem + 3vw); }
.gal-obj { flex: none; width: clamp(17rem, 24vw, 25rem); }
.gal-pic { display: block; overflow: hidden; background: var(--paper-2); box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 24px 40px -26px rgb(18 20 23 / .45); }
.gal-pic img, .gal-pic canvas { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: top; transition: transform .8s var(--ease); }
.gal-pic.is-phone img { object-fit: contain; padding: 14px 0; }
@media (hover: hover) and (pointer: fine) { .gal-pic:hover img, .gal-pic:hover canvas { transform: scale(1.04); } }
.gal-title { margin-top: 18px; font-weight: 720; font-stretch: 122%; text-transform: uppercase; font-size: clamp(1.35rem, 1.9vw, 1.9rem); line-height: .95; letter-spacing: -.02em; }
.gal-meta { margin-top: 8px; font-size: .875rem; line-height: 1.45; color: var(--ink-2); }
.gal-meta + .gal-meta { margin-top: 2px; }
.gal-tools { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--mute); }
.gal-obj:focus-within .gal-title, .gal-obj:hover .gal-title { color: var(--accent-ink); }
.gal-end { align-self: center; padding-top: 4svh; }
.gal-end .gal-title { font-size: clamp(1.6rem, 2.6vw, 2.6rem); }
.gal-end .arrow-link { font-size: 1rem; color: var(--ink); }
@media (max-width: 860px) {
  .gal-index { right: 0; bottom: auto; width: auto; padding: calc(var(--head) + 4px) var(--g) 10px; display: flex; align-items: baseline; gap: 6px 16px; overflow-x: auto; white-space: nowrap; background: var(--paper); }
  .gal-h { font-size: 1.4rem; margin: 0 8px 0 0; }
  .gal-h span, .gal-index h2 { display: none; }
  .gal-index ul { display: contents; }
  .gal-rail { top: calc(var(--head) + 70px); padding-left: var(--g); }
  .gal-obj { width: 74vw; }
}
/* mouvement réduit : la collection posée en grille, tout reste atteignable sans mouvement */
@media (prefers-reduced-motion: reduce) {
  .gal { height: auto !important; }
  .gal .gal-stage { position: static; height: auto; overflow: visible; }
  .gal-floor { display: none; }
  .gal-index { position: static; width: auto; background: none; padding-bottom: 0; }
  .gal-rail { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 48px 28px; padding: 40px var(--g) 120px; }
  .gal-obj { width: auto; }
}

/* ---------- Autres dépôts (synchronisés) ---------- */

/* ---------- Fiche projet : éditorial en chapitres ----------
   Pas de barre fixe : l'en-tête part avec la page et le folio de la marge prend le relais.
   Page de titre sans image ; chaque chapitre sur son propre fond, coupe franche entre deux. */
body:is([data-page="projet"], [data-page="depot"]) .site-head { position: absolute; }
.back { color: var(--ink); font-weight: 600; }
.back::before { content: "← "; }
.p-context { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: .9375rem; color: var(--ink-2); }
.tag { padding: .25em .75em; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--ink); font-weight: 600; font-size: .8125rem; }
.ed-title { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding-block: calc(var(--head) + 24px) clamp(28px, 4vw, 48px); }
.ed-title > :not(.page-relief) { position: relative; z-index: 1; }
.ed-title .page-relief { opacity: .5; }
.p-title { font-size: clamp(2.8rem, 9vw, 10rem); overflow-wrap: break-word; hyphens: auto; }
.p-title.is-long { font-size: clamp(2.2rem, 6.2vw, 6.8rem); }
.p-kicker { margin-top: 28px; font-size: clamp(1.25rem, 2.2vw, 2rem); line-height: 1.25; max-width: 32ch; letter-spacing: -.01em; }
.p-light-title { font-size: clamp(2.4rem, 6vw, 5.6rem); max-width: 16ch; }
.p-auto .ed-title { min-height: 72svh; }
.ed-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; }
.ed-meta div { border-top: 1px solid var(--ink); padding-top: 10px; }
.ed-meta dt { font-size: .8125rem; color: var(--mute); font-stretch: 108%; }
.ed-meta dd { margin-top: 2px; font-size: .9375rem; font-weight: 500; line-height: 1.4; }
@media (max-width: 860px) { .ed-meta { grid-template-columns: 1fr 1fr; } }

.ed-ch { background: var(--paper); padding-block: clamp(70px, 9vw, 130px); }
.ed-ch.is-alt { background: var(--paper-2); }
.ed-inter { padding-block: 8px 6px; margin-bottom: clamp(36px, 5vw, 64px); }
.ed-ch-title { font-weight: 740; font-stretch: 122%; font-size: clamp(2rem, 4.8vw, 4.6rem); line-height: .98; letter-spacing: -.025em; max-width: 18ch; }
.ed-spread { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px clamp(20px, 3vw, 48px); align-items: start; }
.ed-text { grid-column: 3 / span 6; display: grid; gap: 20px; font-size: 1.125rem; line-height: 1.65; color: var(--ink-2); }
.ed-side { grid-column: 10 / -1; }
.ed-lead { grid-column: 1 / span 7; }
.ed-lead > p:first-child { font-size: clamp(1.3rem, 2vw, 1.85rem); line-height: 1.34; letter-spacing: -.01em; color: var(--ink); }
.ed-figures b { font-weight: 720; font-stretch: 115%; color: var(--ink); font-variant-numeric: tabular-nums; }
.ed-plate { grid-column: 8 / -1; aspect-ratio: 1.1; display: grid; grid-template-rows: 1fr auto; }
.ed-plate figcaption, .fig figcaption { margin-top: 12px; font-size: .875rem; color: var(--mute); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: .2em .65em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: .8125rem; font-weight: 500; }
.p-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.note { color: var(--mute); font-size: .9375rem; }
.p-list { display: grid; }
.p-list div { display: grid; grid-template-columns: minmax(130px, 30%) 1fr; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); }
.p-list dt { font-weight: 650; color: var(--ink); font-stretch: 110%; }
.p-quote p { font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1.35; color: var(--ink); }
.p-quote footer { margin-top: 14px; font-size: .9375rem; color: var(--mute); }
.p-figs { padding-top: clamp(60px, 8vw, 110px); display: grid; gap: clamp(24px, 3vw, 40px); }
.ed-inter + .p-figs { padding-top: 0; }
.p-gallery { grid-template-columns: 1fr 1fr; }
.fig img, .fig video { width: 100%; height: auto; background: var(--paper-2); }
.fig-wide { grid-column: 1 / -1; }
.phones { display: flex; justify-content: center; gap: clamp(14px, 3vw, 40px); padding: clamp(28px, 5vw, 64px) 16px; background: var(--paper-2); }
.is-alt .phones { background: var(--paper); }
.phones img { width: min(30%, 280px); height: auto; border-radius: 26px; border: 7px solid var(--ink); box-shadow: 0 30px 60px -30px rgb(18 20 23 / .5); }
.fig-phone img { max-width: 360px; margin: 0 auto; border-radius: 22px; border: 6px solid var(--ink); }
.p-bullets { display: grid; gap: 8px; color: var(--ink-2); }
.p-bullets li { padding-left: 1.2em; position: relative; }
.p-bullets li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (max-width: 960px) {
  .ed-text, .ed-lead, .ed-side, .ed-plate { grid-column: 1 / -1; }
  .ed-plate { max-width: 560px; width: 100%; justify-self: center; }
  .p-gallery { grid-template-columns: 1fr; }
  .p-list div { grid-template-columns: 1fr; gap: 4px; }
}

/* Schéma d'architecture : les flèches portent l'ordre, pas de numéros */
.diagram { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 28px; padding: clamp(28px, 4vw, 56px); background: var(--night); color: var(--on-night); }
.diagram > li { position: relative; }
.diagram > li:not(:last-child)::after { content: ""; position: absolute; top: 12px; right: -24px; width: 20px; height: 1px; background: var(--accent); }
.diagram h3 { font-weight: 650; font-stretch: 112%; font-size: .9375rem; color: #E58A5C; margin-bottom: 14px; }
.diagram ul { display: grid; gap: 8px; }
.diagram ul li { padding: 10px 12px; border: 1px solid rgb(233 235 230 / .16); font-size: .9rem; line-height: 1.3; }
@media (max-width: 860px) { .diagram { grid-auto-flow: row; } .diagram > li::after { display: none; } }

/* Colophon : la fin en petite typo, les liens écrits dans la phrase */
.ed-colophon { padding-block: clamp(70px, 9vw, 120px); display: grid; gap: 10px; max-width: calc(62ch + 2 * var(--g)); font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }
.ed-colo-mark { font-size: .75rem; font-weight: 600; font-stretch: 110%; color: var(--mute); margin-bottom: 6px; }
.ed-colophon a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.ed-colophon a:hover { color: var(--accent-ink); }

/* Folio : dans la marge, le chapitre en cours et la carte du projet qui se complète */
.folio { position: fixed; z-index: 40; left: var(--g); bottom: 22px; display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; background: rgb(238 240 235 / .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line), 0 10px 24px -14px rgb(18 20 23 / .35); opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; }
.folio.is-on:not(.is-away) { opacity: 1; transform: none; }
.folio-map { width: 64px; height: 44px; }
.folio p { display: grid; line-height: 1.25; }
.folio-n { font-size: .75rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.folio-t { font-size: .875rem; font-weight: 650; font-stretch: 108%; max-width: 22ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) { .folio { left: 12px; right: 12px; bottom: 12px; } }

/* ---------- Parcours : monde continu ----------
   La carte (.pc-world) est fixe pour toute la page ; seul l'espaceur est dans le flux. Le texte arrive dans le calque fixe. */
.pc-world { position: fixed; inset: 0; background: var(--paper); } /* posé avant que Scrollcraft monte : la toile se mesure dès sa création */
.pc-world.no-gl { background: repeating-radial-gradient(circle at 66% 50%, transparent 0 26px, var(--line) 26px 27px), var(--paper); }
.pc-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.pc-world [data-sc-segment] { pointer-events: none; }
.pc-route { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 130; overflow: visible; pointer-events: none; }
.pc-route path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pc-route-all { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 6; opacity: .35; }
.pc-route-done { stroke: var(--accent); stroke-width: 3; }
.pc-pins { position: absolute; inset: 0; z-index: 131; pointer-events: none; }
.pc-pin { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: .8125rem; font-weight: 650; font-stretch: 110%; color: var(--ink); transition: opacity .3s; }
.pc-pin i { width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); transition: background .3s, box-shadow .3s; }
.pc-pin.is-on { color: var(--accent-ink); }
.pc-pin.is-on i { background: var(--accent); box-shadow: 0 0 0 6px rgb(210 96 42 / .2); }
.pc-pin.is-hidden { opacity: 0; }
/* le texte tient dans une colonne de papier : un dégradé sous la colonne, la carte reste entière à droite */
.pc-scrim { background: linear-gradient(90deg, var(--paper) 0%, var(--paper) 30%, rgb(238 240 235 / .82) 40%, rgb(238 240 235 / 0) 52%); }
.pc-copy { position: absolute; left: var(--g); top: 50%; width: min(36rem, 40vw); translate: 0 -50%; }
.pc-hero .ph-title { font-weight: 760; font-stretch: 122%; font-size: clamp(2.4rem, 5.2vw, 5.4rem); line-height: .94; letter-spacing: -.025em; }
.pc-hero .page-lede { margin-top: 28px; }
.pc-when { display: flex; align-items: end; gap: 18px; margin-bottom: 14px; }
.ch-year { font-weight: 300; font-stretch: 62%; font-size: clamp(3.4rem, 6vw, 5.6rem); line-height: .82; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ch-place { display: grid; font-weight: 650; font-stretch: 112%; }
.ch-place small { font-weight: 400; font-size: .8125rem; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.pc-step h2 { font-weight: 720; font-stretch: 120%; font-size: clamp(1.6rem, 2.6vw, 2.5rem); line-height: 1; letter-spacing: -.02em; margin-bottom: 14px; }
.pc-step > p { color: var(--ink-2); max-width: 46ch; }
.pc-step .arrow-link { margin-top: 16px; }
.pc-img { margin-top: 20px; overflow: hidden; background: var(--paper-2); }
.pc-img img { width: 100%; height: auto; max-height: 24svh; object-fit: cover; object-position: top; }
.pc-quote { margin-top: 22px; padding-left: 18px; box-shadow: inset 1px 0 0 var(--accent); }
.pc-quote p { font-size: 1.0625rem; line-height: 1.45; color: var(--ink); }
.pc-quote footer { display: flex; align-items: center; gap: 12px; margin-top: 12px; color: var(--mute); font-size: .8125rem; line-height: 1.35; }
.pc-quote footer b { display: block; color: var(--ink); font-weight: 650; font-size: .9375rem; }
.avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-weight: 700; font-stretch: 118%; font-size: .875rem; }
.pc-finale .pc-img img { max-height: 18svh; }
.pc-finale .statement { margin-top: 18px; font-size: clamp(1.4rem, 2.4vw, 2.2rem); }
.pc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 22px; }
.pc-actions .arrow-link { margin-top: 0; }
/* la navigation est la carte : chaque étape est un bouton qui y emmène */
.pc-rail { position: fixed; z-index: 25; left: var(--g); right: var(--g); bottom: 18px; transition: opacity .3s; }
.pc-rail ol { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: flex-end; }
.pc-rail button { padding: 8px 0; font-size: .8125rem; font-stretch: 108%; color: var(--mute); transition: color .2s; }
.pc-rail button b { font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pc-rail button:hover, .pc-rail button[aria-current] { color: var(--accent-ink); }
.pc-rail button[aria-current] b { color: var(--accent-ink); }
.pc-coords { position: fixed; z-index: 25; right: var(--g); top: calc(var(--head) + 6px); font-size: .875rem; font-weight: 600; font-stretch: 110%; font-variant-numeric: tabular-nums; color: var(--ink-2); transition: opacity .3s; }
.pc-rail.is-off, .pc-coords.is-off { opacity: 0; pointer-events: none; }
.pc .is-off [data-sc-copy] { opacity: 0 !important; pointer-events: none !important; } /* le pied de page recouvre l'arrivée */
.site-foot { position: relative; z-index: 30; }
@media (max-width: 860px) {
  .pc-scrim { background: linear-gradient(0deg, var(--paper) 0%, var(--paper) 42%, rgb(238 240 235 / .85) 54%, rgb(238 240 235 / 0) 64%); }
  .pc-copy { top: auto; bottom: 64px; right: var(--g); width: auto; translate: none; max-height: 62svh; }
  .pc-hero { bottom: 80px; }
  .pc-img, .pc-quote footer .avatar { display: none; }
  .pc-quote p { font-size: .9375rem; }
  .pc-step > p { font-size: .9375rem; }
  .ch-year { font-size: 2.8rem; }
  .pc-rail { bottom: 8px; overflow-x: auto; scrollbar-width: none; }
  .pc-rail ol { flex-wrap: nowrap; justify-content: start; }
  .pc-rail button { white-space: nowrap; }
}

/* ---------- Compétences : scène partagée ----------
   Deux fonds qui tiennent toute la page : le papier pour les outils, la nuit pour les projets. */
.legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px; font-size: .9375rem; }
.legend li, .skill em { display: inline-flex; align-items: center; gap: 8px; }
.legend li::before, .skill em::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.lv-prod::before, .lv-prod em::before { background: var(--accent); }
.lv-projet::before, .lv-projet em::before { box-shadow: inset 0 0 0 1.5px var(--ink); }
.split { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.split-l { padding-block: calc(var(--head) + clamp(50px, 9vw, 130px)) 30svh; padding-right: clamp(32px, 4vw, 64px); }
.split-head .display, .split-r-h { font-weight: 760; font-stretch: 125%; text-transform: uppercase; font-size: clamp(2.2rem, 4.6vw, 5rem); line-height: .88; letter-spacing: -.025em; }
.split-head .page-lede { margin-top: 28px; }
.sg { margin-top: clamp(56px, 7vw, 96px); }
.sg-title { font-weight: 700; font-stretch: 118%; font-size: clamp(1.4rem, 2.2vw, 2rem); margin-bottom: 14px; letter-spacing: -.015em; }
.skill { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); text-align: left; transition: color .2s; }
.skill span { font-weight: 500; font-size: 1.0625rem; transition: transform .4s var(--ease); }
.skill em { font-style: normal; font-size: .8125rem; color: var(--mute); }
.skill:hover, .skill:focus-visible, .skill.is-active { color: var(--accent-ink); }
.skill:hover span, .skill:focus-visible span, .skill.is-active span { transform: translateX(12px); }
.split-r { background: var(--night); color: var(--on-night); }
.split-r-in { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; padding: calc(var(--head) + clamp(50px, 9vw, 130px)) var(--g) 40px clamp(32px, 4vw, 64px); }
.side-skill { margin-top: clamp(28px, 4vw, 56px); font-weight: 700; font-stretch: 118%; font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.1; color: #E58A5C; }
.side-list { margin-top: 24px; display: grid; gap: 14px; }
.side-list a { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; font-weight: 650; font-stretch: 110%; font-size: 1.125rem; }
.side-list a:hover span { color: #E58A5C; }
.side-list canvas { width: 112px; aspect-ratio: 4 / 3; height: auto; }
.side-list .empty { color: var(--on-night-2); font-size: .9375rem; max-width: 36ch; }
/* le séparateur porte les deux libellés et reste à hauteur d'œil */
.split-div { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin: 0; background: var(--accent); pointer-events: none; }
.split-div span { position: sticky; top: calc(var(--head) + 18px); display: block; width: max-content; font-size: .8125rem; font-weight: 600; font-stretch: 110%; }
.split-div span:first-child { translate: calc(-100% - 12px) 0; color: var(--ink-2); }
.split-div span:last-child { translate: 12px -1.6em; color: var(--on-night-2); }
.threads { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; overflow: visible; }
.threads path { fill: none; stroke: var(--accent); stroke-width: 1.25; }
.threads circle { fill: var(--accent); }
/* l'effondrement : le séparateur part sur le bord, la nuit (les projets) prend toute la largeur */
.cl-stage { background: var(--paper); }
.cl-left { position: absolute; left: var(--g); top: 50%; translate: 0 -50%; width: calc(50% - 2 * var(--g)); font-size: clamp(1.4rem, 2.4vw, 2.3rem); line-height: 1.2; letter-spacing: -.015em; color: var(--ink-2); opacity: calc(1 - var(--sc-p, 0) * 2.6); }
.cl-right { position: absolute; inset: 0; background: var(--night); color: var(--on-night); clip-path: inset(0 0 0 calc(max(0, 1 - var(--sc-p, 0) * 1.4) * 50%)); } /* la nuit couvre tout à 70 %, le texte arrive ensuite */
.cl-in { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 3vw, 40px); padding-top: var(--head); }
.cl-title { font-weight: 740; font-stretch: 122%; font-size: clamp(2rem, 4.4vw, 4.4rem); line-height: .98; letter-spacing: -.025em; max-width: 20ch; }
.cl-wall { display: flex; flex-wrap: wrap; gap: 6px 26px; max-width: 70rem; }
.cl-wall a { font-weight: 700; font-stretch: 122%; text-transform: uppercase; font-size: clamp(1.05rem, 1.7vw, 1.6rem); letter-spacing: -.01em; color: var(--on-night-2); transition: color .2s; }
.cl-wall a:hover, .cl-wall a:focus-visible { color: var(--on-night); text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.cl-cta .btn { background: var(--on-night); color: var(--ink); }
.cl-cta .btn:hover { background: var(--accent); }
.cl-divider { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--accent); transform: translateX(calc(max(0, 1 - var(--sc-p, 0) * 1.4) * 50vw)); opacity: calc(1 - var(--sc-p, 0) * 1.4); }
@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; }
  .split-l { padding-right: var(--g); padding-bottom: 60px; }
  .split-r { position: sticky; bottom: 0; z-index: 5; }
  .split-r-in { position: static; height: auto; padding: 14px var(--g) 16px; }
  .split-r-h { display: none; }
  .side-skill { margin-top: 0; font-size: 1.1rem; }
  .side-list { margin-top: 10px; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; gap: 10px; }
  .side-list a { grid-template-columns: 56px auto; gap: 10px; font-size: .9375rem; }
  .side-list canvas { width: 56px; }
  .split-div, .threads { display: none; }
  .cl-left { width: calc(50% - var(--g) - 10px); font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .collapse { height: auto !important; }
  .collapse .cl-stage { position: static; height: auto; }
  .cl-left, .cl-divider { display: none; }
  .cl-right { position: static; clip-path: none; padding-block: 90px; }
  .collapse [data-sc-cue] { opacity: 1 !important; transform: none !important; }
}

/* ---------- Labo : la coupe ----------
   Le terrain tranché : une couche par année, du plus récent (surface) au plus ancien (socle sombre).
   Chaque couche a sa teinte et son motif de carte géologique (points, tirets, briques, vagues). */
body[data-page="labo"] { --yc: clamp(96px, 11vw, 170px); --cc: clamp(0px, 7vw, 104px); --g0: #EEF0EB; }
.lab-surface { position: relative; min-height: 82svh; display: flex; align-items: flex-end; padding-bottom: clamp(70px, 9vw, 120px); isolation: isolate; }
.lab-surface .hero-canvas { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.lab-intro { position: relative; z-index: 1; max-width: 46rem; }
.lab-intro .display { font-size: clamp(3.2rem, 11vw, 10rem); }
.lab-intro .page-lede { margin-top: 24px; }
.lab-live { margin-top: 14px; font-size: .875rem; color: var(--ink-2); }
/* la ligne de sol et de couche : un profil de terrain, rempli de la teinte de la couche qui commence */
.st-edge { position: absolute; left: 0; right: 0; top: -45px; width: 100%; height: 90px; z-index: 1; pointer-events: none; overflow: visible; }
.st-edge-first { top: auto; bottom: 0; z-index: 2; }
.st-fill { fill: var(--ground, var(--g0)); }
.st-line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 1 1; } /* pas de non-scaling-stroke : il fausse le tiret qui dessine la ligne */
.st-edge-first .st-fill { fill: var(--g0); }
.st-edge-first .st-line { stroke: var(--accent); stroke-width: 2.2; }

/* en-têtes de colonne : les domaines, qui servent aussi de filtre */
.lab-cols { position: sticky; top: 62px; z-index: 20; display: grid; grid-template-columns: var(--yc) var(--cols) var(--cc); padding-inline: var(--g); background: rgb(238 240 235 / .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.lab-cols button { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 6px; font-size: .8125rem; font-weight: 600; font-stretch: 106%; line-height: 1.2; color: var(--ink-2); transition: color .2s, background .2s; }
.lab-cols button::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.lab-cols button:hover { color: var(--ink); background: rgb(18 20 23 / .04); }
.lab-cols button[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--c); }

.st { --ground: #EEF0EB; position: relative; padding: 64px var(--g) 84px; background-color: var(--ground); }
.st:nth-child(2) { --ground: #E5E8DE; } .st:nth-child(3) { --ground: #DCE0D3; } .st:nth-child(4) { --ground: #D2D7C8; } .st:nth-child(5) { --ground: #C8CEBD; } .st:nth-child(6) { --ground: #BFC6B3; }
.st-0 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23121417' fill-opacity='.26'%3E%3Ccircle cx='4' cy='5' r='1'/%3E%3Ccircle cx='13' cy='13' r='1'/%3E%3C/g%3E%3C/svg%3E"); }
.st-1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M2 4h11M17 11h9' stroke='%23121417' stroke-opacity='.22'/%3E%3C/svg%3E"); }
.st-2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18'%3E%3Cpath d='M0 .5h36M0 9.5h36M9 0v9M27 9v9' stroke='%23121417' stroke-opacity='.16' fill='none'/%3E%3C/svg%3E"); }
.st-3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='16'%3E%3Cpath d='M0 8q11-6 22 0t22 0' stroke='%23121417' stroke-opacity='.2' fill='none'/%3E%3C/svg%3E"); }
.st-head { position: absolute; z-index: 2; left: var(--g); top: 44px; width: calc(var(--yc) - 16px); }
.st-year { font-weight: 300; font-stretch: 62%; font-size: clamp(3rem, 6vw, 5.6rem); line-height: .82; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.st-head p { margin-top: 8px; font-size: .8125rem; color: var(--ink-2); }
.st-grid { position: relative; z-index: 2; display: grid; grid-template-columns: var(--cols); margin: 0 var(--cc) 0 var(--yc); }
.st-cell { display: flex; flex-wrap: wrap; justify-content: center; align-content: start; gap: 14px 4px; padding: 8px 4px; min-height: 150px; border-left: 1px dashed rgb(18 20 23 / .12); transition: background .3s; }
.st-cell:last-child { border-right: 1px dashed rgb(18 20 23 / .12); }

/* un galet : des courbes de niveau dans la couleur du projet, qui respirent quand on le touche */
.sp { width: 104px; translate: var(--dx) var(--dy); transition: opacity .3s; }
.sp.is-big { width: 132px; }
.sp-btn { display: grid; justify-items: center; gap: 2px; width: 100%; text-align: center; }
.peb { width: 100%; height: auto; aspect-ratio: 1; overflow: visible; filter: drop-shadow(0 7px 6px rgb(18 20 23 / .14)); }
.peb > * { fill: none; stroke: var(--c); stroke-width: 1.3; vector-effect: non-scaling-stroke; transform-box: view-box; transform-origin: 50% 50%; transition: transform .45s var(--ease) calc(var(--i, 0) * 25ms); }
.peb > :first-child { fill: var(--ground); stroke-width: 1.8; }
.sp.is-big .peb > :first-child { stroke-width: 2.6; }
.sp-name { max-width: 100%; font-size: .8125rem; font-weight: 650; font-stretch: 106%; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; hyphens: auto; }
.sp.is-big .sp-name { font-size: .9375rem; text-transform: uppercase; font-weight: 720; font-stretch: 118%; }
.sp-btn:is(:hover, :focus-visible, .is-open) .peb > * { transform: scale(calc(1 + var(--i, 0) * .07)); }
.sp-btn:is(:hover, :focus-visible, .is-open) .sp-name { color: var(--accent-ink); }
.sp-btn.is-open .peb > :first-child { stroke-width: 3; }
.sp.is-priv .peb > * { stroke-dasharray: 3 4; }
.sp.is-priv .sp-name { color: var(--ink-2); }
.sp.is-new .sp-name::after { content: "Nouveau"; display: block; margin: 4px auto 0; width: max-content; padding: .05em .5em; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--accent); font-size: .6875rem; text-transform: none; }
.lab-cut[data-filter]:not([data-filter=""]) .sp { opacity: .16; }
.lab-cut[data-filter="pro"] .sp[data-zone="pro"], .lab-cut[data-filter="mobile"] .sp[data-zone="mobile"], .lab-cut[data-filter="xr"] .sp[data-zone="xr"],
.lab-cut[data-filter="web"] .sp[data-zone="web"], .lab-cut[data-filter="data"] .sp[data-zone="data"], .lab-cut[data-filter="jeux"] .sp[data-zone="jeux"] { opacity: 1; }
.lab-cut[data-filter="pro"] .st-cell[data-zone="pro"], .lab-cut[data-filter="mobile"] .st-cell[data-zone="mobile"], .lab-cut[data-filter="xr"] .st-cell[data-zone="xr"],
.lab-cut[data-filter="web"] .st-cell[data-zone="web"], .lab-cut[data-filter="data"] .st-cell[data-zone="data"], .lab-cut[data-filter="jeux"] .st-cell[data-zone="jeux"] { background: rgb(255 255 255 / .38); }

/* le socle : la roche sombre, qui rejoint le pied de page */
.st.st-rock { --ground: var(--night); color: var(--on-night); padding-block: clamp(90px, 11vw, 150px) clamp(60px, 8vw, 100px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M7 4v6M4 7h6M22 19v6M19 22h6' stroke='%23E9EBE6' stroke-opacity='.08'/%3E%3C/svg%3E"); }
.st-rock .st-line { stroke: var(--accent); stroke-width: 2.2; }
.rock-in { position: relative; z-index: 2; display: grid; gap: 10px; max-width: calc(52ch + 2 * var(--g)); padding-left: calc(var(--yc) - var(--g) + var(--g)); }
.rock-title { font-weight: 740; font-stretch: 122%; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -.02em; }
.rock-text { color: var(--on-night-2); }
.rock-text a { color: var(--on-night); text-decoration: underline; text-underline-offset: .22em; }
.rock-text a:hover { color: #E58A5C; }

/* la carotte : se remplit des couches traversées, un point par galet ; on y clique pour descendre */
.core { position: fixed; z-index: 15; right: 14px; top: 50%; translate: 0 -46%; height: min(60svh, 560px); display: flex; gap: 10px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.core.is-on { opacity: 1; pointer-events: auto; }
.core ol { position: relative; width: 52px; order: -1; }
.core li { position: absolute; right: 0; translate: 0 -2px; }
.core button { font-size: .75rem; font-weight: 600; font-stretch: 106%; color: var(--ink-2); font-variant-numeric: tabular-nums; padding: 2px 0; }
.core button:hover, .core button:focus-visible { color: var(--accent-ink); }
.core-tube { position: relative; width: 24px; height: 100%; border-radius: 12px; overflow: hidden; cursor: pointer; background: rgb(238 240 235 / .7); box-shadow: inset 0 0 0 1px rgb(18 20 23 / .3), 0 10px 22px -14px rgb(18 20 23 / .5); }
.core-fill { position: absolute; inset: 0; display: flex; flex-direction: column; clip-path: inset(0 0 calc((1 - var(--p, 0)) * 100%) 0); }
.core-fill > span { position: relative; display: block; flex: none; padding: 0; background-color: var(--ground); background-size: 50%; border-top: 1px solid rgb(18 20 23 / .35); }
.core-fill i { position: absolute; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--c); }
.core-bit { position: absolute; left: 0; right: 0; top: calc(var(--p, 0) * 100%); height: 2px; margin-top: -1px; background: var(--accent); }

/* la fiche de prélèvement */
.sample { position: fixed; z-index: 70; right: 16px; top: calc(62px + 12px); bottom: 16px; width: min(400px, calc(100% - 32px)); overflow: auto; background: #F6F7F3; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgb(18 20 23 / .55); border-top: 4px solid var(--c, var(--accent)); }
.sample-pic canvas, .sample-pic img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; object-position: top; background: var(--paper-2); }
.sample-body { padding: 20px 22px 24px; display: grid; gap: 12px; }
.sample-meta { font-size: .8125rem; color: var(--mute); }
.sample h2 { font-weight: 740; font-stretch: 125%; text-transform: uppercase; font-size: 1.8rem; line-height: .95; letter-spacing: -.02em; }
.sample p { color: var(--ink-2); }
.sample-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.sample-acts .btn { padding: .8em 1.2em; font-size: .9375rem; }
.sample-close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 1.2rem; }

@media (max-width: 860px) {
  body[data-page="labo"] { --yc: 0px; --cc: 0px; }
  .lab-cols { display: flex; overflow-x: auto; scrollbar-width: none; gap: 4px; }
  .lab-cols-pad { display: none; }
  .lab-cols button { flex: none; padding-inline: 10px; }
  .st { padding-top: 40px; }
  .st-head { position: relative; left: 0; top: 0; width: auto; display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
  .st-year { font-size: 3rem; }
  .st-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 6px; margin: 0; }
  .st-cell { display: contents; }
  .sp { width: 96px; translate: none; }
  .sp.is-big { width: 116px; }
  .core { right: 6px; height: 46svh; }
  .core ol { display: none; }
  .core-tube { width: 12px; }
  .rock-in { padding-left: 0; }
  .sample { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 78svh; }
}
@media (prefers-reduced-motion: reduce) { .peb > * { transition: none; } }

/* ---------- Veille : surface vivante ----------
   Pas de titre géant : une barre d'état, des panneaux, un sélecteur. La page parle la langue de l'outil. */
.vs { padding-top: calc(var(--head) + 20px); }
.vs-bar { position: sticky; top: 62px; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-block: 14px; background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.vs-h { font-weight: 760; font-stretch: 125%; text-transform: uppercase; font-size: 1.5rem; letter-spacing: -.01em; }
.vs-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: .875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; flex: 1; }
.vs-status > span:not(:empty) + span:not(:empty)::before { content: "·"; margin-right: 14px; color: var(--mute); }
.vs-dot { width: 8px; height: 8px; border-radius: 50%; background: #2E8B57; box-shadow: 0 0 0 4px rgb(46 139 87 / .18); }
.vs-new { color: var(--accent-ink); font-weight: 600; }
.vs-show { display: flex; gap: 4px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.vs-show button { padding: .4em .9em; border-radius: 999px; font-size: .875rem; font-stretch: 106%; transition: background .2s, color .2s; }
.vs-show button:hover { background: var(--paper-2); }
.vs-show button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.vs-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .9fr); gap: 16px; padding-block: 24px clamp(60px, 8vw, 110px); align-items: start; }
.vs-panels.is-one { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.vs-panel, .vs-notes { background: #F6F7F3; box-shadow: 0 0 0 1px var(--line), 0 12px 28px -22px rgb(18 20 23 / .4); }
.vs-panel[hidden] { display: none; }
.vs-panel header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.vs-panel h2, .vs-notes h2 { font-weight: 700; font-stretch: 112%; font-size: 1rem; }
.vs-panel header a { font-size: .8125rem; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; color: var(--ink-2); }
.vs-panel ol { counter-reset: f; }
.vs-panel li { counter-increment: f; border-bottom: 1px solid var(--line); }
.vs-panel li:last-child { border-bottom: 0; }
.vs-panel li a { display: grid; grid-template-columns: 1.8rem 1fr; gap: 2px 6px; padding: 12px 16px 12px 12px; transition: background .15s; }
.vs-panel li a:hover { background: var(--paper); }
.vs-panel li a::before { content: counter(f); grid-row: span 2; text-align: right; font-size: .8125rem; color: var(--mute); font-variant-numeric: tabular-nums; padding-top: 2px; }
.vs-panel b { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.vs-panel small { font-size: .8125rem; color: var(--mute); line-height: 1.4; }
.vs-panel li.is-new b::after { content: "Nouveau"; margin-left: 8px; padding: .1em .55em; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--accent); font-size: .6875rem; font-weight: 600; vertical-align: 2px; }
.feed-note { padding: 10px 16px 14px; font-size: .8125rem; color: var(--mute); }
.feed-note:empty { display: none; }
.vs-panel .wait, .vs-panel .err { padding: 14px 16px; color: var(--mute); font-size: .9375rem; }
.vs-notes { padding: 16px; }
.vs-notes article { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); }
.vs-notes h3 { font-weight: 650; font-stretch: 108%; font-size: .9375rem; line-height: 1.3; margin-bottom: 6px; }
.vs-notes p { font-size: .875rem; line-height: 1.55; color: var(--ink-2); }
/* la fin : un vrai champ, le curseur dedans */
.vs-ask { padding-block: clamp(50px, 7vw, 100px) clamp(80px, 11vw, 150px); border-top: 1px solid var(--line); }
.vs-ask-label { display: block; font-weight: 740; font-stretch: 122%; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -.02em; }
.vs-ask-row { display: flex; gap: 10px; margin-top: 22px; max-width: 46rem; }
.vs-ask input { flex: 1; min-width: 0; padding: .95em 1.2em; border: 0; border-radius: 999px; background: #F6F7F3; box-shadow: inset 0 0 0 1px var(--ink); font-size: 1.0625rem; }
.vs-ask input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vs-ask-hint { margin-top: 12px; font-size: .875rem; color: var(--mute); }
.vs-results { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.vs-results[hidden] { display: none; }
@media (max-width: 1100px) { .vs-panels { grid-template-columns: 1fr 1fr; } .vs-panels.is-one { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .vs-panels, .vs-results { grid-template-columns: 1fr; } .vs-bar { top: 62px; } .vs-show { width: 100%; justify-content: space-between; } }

/* ---------- Pied de page ---------- */
.site-foot { background: var(--night); color: var(--on-night); padding-block: clamp(90px, 13vw, 180px) 28px; }
.foot-kicker { margin-top: 18px; color: var(--on-night-2); font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
.foot-title { font-weight: 760; font-stretch: 125%; text-transform: uppercase; font-size: clamp(3rem, 11vw, 11rem); line-height: .86; letter-spacing: -.025em; }
.foot-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px clamp(32px, 6vw, 96px); align-items: start; margin-top: clamp(40px, 5vw, 80px); }
.foot-mail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 28px; }
.foot-mail a { font-size: clamp(1.4rem, 3.4vw, 3rem); font-weight: 500; font-stretch: 105%; letter-spacing: -.015em; background: linear-gradient(var(--accent) 0 0) left bottom / 0 2px no-repeat; transition: background-size .7s var(--ease); overflow-wrap: anywhere; }
.foot-mail a:hover { background-size: 100% 2px; }
.foot-mail button { padding: .55em 1.1em; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(233 235 230 / .3); font-size: .9375rem; transition: background .3s, color .3s; }
.foot-mail button:hover { background: var(--on-night); color: var(--ink); }
.copy-msg { color: var(--accent); font-size: .9375rem; }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.foot-cols h3 { font-size: .8125rem; font-weight: 500; color: var(--on-night-2); margin-bottom: 14px; }
.foot-cols a { display: inline-block; padding-block: 10px; }
.foot-cols a:hover { color: var(--accent); }
.foot-stats b { color: var(--on-night); font-weight: 600; }
.foot-stats span { margin-inline: 4px; color: var(--accent); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 70px; padding-top: 20px; border-top: 1px solid rgb(233 235 230 / .12); font-size: .8125rem; color: var(--on-night-2); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .foot-main { grid-template-columns: 1fr; } }

/* ---------- 404 ---------- */
.lost { min-height: 100svh; display: grid; place-items: center; background: var(--night); color: var(--on-night); text-align: center; padding: 20px; }
.lost-main { display: grid; gap: 24px; justify-items: center; }
.lost .btn { background: var(--on-night); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}