/* ═══════════════════════════════════════════════════════════════════════════
   Portfolio — système de design du site public.

   Principes : graphite et blanc, aucune couleur d'interface hors des états
   fonctionnels ; la couleur appartient à la sculpture 3D et aux photos.
   Angles arrondis par paliers : champs < médias < panneaux, boutons et
   puces en pilule.
   Deux familles : Archivo (titres, largeur 112 %) et Schibsted Grotesk (texte).
   Mouvement : transform, opacity et clip-path uniquement ; tout est coupé
   avec prefers-reduced-motion.

   Organisation : 1 polices · 2 tokens · 3 base · 4 mise en page ·
   5 typographie · 6 composants · 7 sections · 8 mouvement · 9 impression.
   Points de rupture : 480 · 768 · 1024 · 1280 · 1600.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Polices ─────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Archivo";
  src: url("../../fonts/archivo-latin-wdth112.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../../fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../../fonts/schibsted-grotesk-latin-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* 2. Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --gutter: clamp(20px, 3.2vw, 48px);
  --col-gap: clamp(16px, 1.8vw, 24px);
  --max: 1680px;
  --section-y: clamp(112px, 14vw, 224px);
  --header-h: 76px;

  --fs-name: clamp(60px, 12.4vw, 204px);
  --fs-1: clamp(46px, 7vw, 116px);
  --fs-2: clamp(34px, 4.4vw, 68px);
  --fs-3: clamp(25px, 2.5vw, 38px);
  --fs-4: clamp(20px, 1.6vw, 25px);
  --fs-lead: clamp(19px, 1.42vw, 23px);
  --fs-body: 17px;
  --fs-small: 14.5px;
  --fs-micro: 13px;

  --radius-xs: 6px;
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;


  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-reveal: 1000ms;
  --dur-image: 1200ms;
  --stagger: 70ms;

  --bg: #f1f1ee;
  --bg-elev: #ffffff;
  --bg-sunk: #e6e6e2;
  --text: #0e0e10;
  --text-2: #55565b;
  --line: rgb(14 14 16 / 0.14);
  --line-strong: rgb(14 14 16 / 0.34);
  --solid: #0e0e10;
  --on-solid: #f1f1ee;
  --ok: #1a7a4c;
  --error: #b42318;
  --scrim: rgb(11 11 13 / 0.62);
  color-scheme: light;
}

/* Thème sombre : choix explicite, ou préférence système sans choix stocké. */
:root[data-theme="dark"],
.is-inverse,
.has-dark-top .site-header:not(.is-scrolled):not(.is-menu-open) {
  --bg: #0b0b0d;
  --bg-elev: #141417;
  --bg-sunk: #070708;
  --text: #ececea;
  --text-2: #a3a39f;
  --line: rgb(236 236 234 / 0.13);
  --line-strong: rgb(236 236 234 / 0.34);
  --solid: #ececea;
  --on-solid: #0b0b0d;
  --ok: #3fbf7f;
  --error: #ff7a6e;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0b0b0d;
    --bg-elev: #141417;
    --bg-sunk: #070708;
    --text: #ececea;
    --text-2: #a3a39f;
    --line: rgb(236 236 234 / 0.13);
    --line-strong: rgb(236 236 234 / 0.34);
    --solid: #ececea;
    --on-solid: #0b0b0d;
    --ok: #3fbf7f;
    --error: #ff7a6e;
    color-scheme: dark;
  }
}
/* En thème sombre, une bande « inversée » se distingue par sa surface. */
:root[data-theme="dark"] .is-inverse { --bg: #111114; }

/* 3. Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-kerning: normal;
  font-variant-numeric: proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
html[lang="ar"] body {
  --font-text: "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  --font-display: "Noto Kufi Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
}
img, svg, video, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
ul, ol { margin: 0; padding: 0; }
::selection { background: var(--text); color: var(--bg); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: var(--radius-xs); }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  inset-inline-start: var(--gutter);
  top: 12px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--solid);
  color: var(--on-solid);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: none; }

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

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 4. Mise en page ────────────────────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--bg);
  color: var(--text);
}
.section + .section:not(.is-inverse):not(.section--flush) { border-top: 1px solid var(--line); }
.is-inverse { background: var(--bg); color: var(--text); }

.section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 24px;
  align-items: end;
  margin-bottom: clamp(48px, 7vw, 104px);
}
.section-head__label {
  grid-column: 1 / -1;
  display: flex;
  gap: 14px;
  font-size: var(--fs-small);
  color: var(--text-2);
}
.section-head__title { grid-column: 1 / span 8; }
.section-head__intro {
  grid-column: 9 / span 4;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--text-2);
}
@media (max-width: 1023.98px) {
  .section-head__title, .section-head__intro { grid-column: 1 / -1; }
}

/* Cartes en grille : une ligne incomplète est centrée, pas collée à gauche. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 380px));
  justify-content: center;
  gap: clamp(28px, 3vw, 48px) var(--col-gap);
}

/* 5. Typographie ─────────────────────────────────────────────────────────── */
.display-name,
.t-1, .t-2, .t-3, .t-4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 112%;
  text-wrap: balance;
}
.display-name {
  font-size: var(--fs-name);
  line-height: 0.86;
  letter-spacing: -0.055em;
}
.t-1 { font-size: var(--fs-1); line-height: 0.88; letter-spacing: -0.052em; }
.t-2 { font-size: var(--fs-2); line-height: 0.95; letter-spacing: -0.045em; }
.t-3 { font-size: var(--fs-3); line-height: 1.02; letter-spacing: -0.038em; }
.t-4 { font-size: var(--fs-4); line-height: 1.15; letter-spacing: -0.025em; }
.lead { font-size: var(--fs-lead); line-height: 1.45; letter-spacing: -0.01em; text-wrap: pretty; }
.muted { color: var(--text-2); }
.small { font-size: var(--fs-small); }
.micro { font-size: var(--fs-micro); }
.tabular { font-variant-numeric: tabular-nums; }
.tags { color: var(--text-2); }
.tags span + span::before { content: " / "; color: var(--line-strong); }

/* Contenu riche (Markdown assaini). */
.prose { font-size: 18px; line-height: 1.75; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-size: var(--fs-3);
  line-height: 1.05;
  letter-spacing: -0.038em;
  margin-top: 2.2em;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.prose h3 { font-size: 22px; line-height: 1.25; margin-top: 1.8em; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h4 { font-size: 18px; margin-top: 1.5em; }
.prose a { text-decoration: underline; }
.prose ul, .prose ol { padding-inline-start: 1.2em; }
.prose li + li { margin-top: 0.4em; }
.prose blockquote {
  margin-inline: 0;
  padding-inline-start: 1.2em;
  border-inline-start: 2px solid var(--text);
  font-size: 1.1em;
}
.prose img { border-radius: var(--radius); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.4em; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: start; }
.prose :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 0.12em 0.36em;
  background: var(--bg-sunk);
  border-radius: var(--radius-xs);
}
.code-block { position: relative; }
.prose .highlight, .prose pre {
  position: relative;
  margin: 0;
  overflow-x: auto;
  padding: 22px 24px;
  background: #0b0b0d;
  color: #e4e4e1;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 14.5px;
  line-height: 1.65;
  tab-size: 2;
}
.prose .highlight pre { padding: 0; background: none; }
.code-copy {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  padding: 6px 12px;
  border: 1px solid rgb(236 236 234 / 0.24);
  border-radius: var(--radius-pill);
  background: #141417;
  color: #ececea;
  font-size: 12.5px;
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.code-block:hover .code-copy, .code-copy:focus-visible { opacity: 1; }
/* Pygments — palette sobre, contrastes AA sur #0b0b0d. */
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cs, .highlight .ch { color: #8b8b86; font-style: italic; }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kr, .highlight .kc, .highlight .ow { color: #c9b8ff; }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sd, .highlight .se, .highlight .si { color: #a8e6bd; }
.highlight .m, .highlight .mi, .highlight .mf, .highlight .il { color: #ffcf8a; }
.highlight .nf, .highlight .fm, .highlight .nc { color: #8fc8ff; }
.highlight .nb, .highlight .bp, .highlight .nt { color: #ffb2a6; }
.highlight .na, .highlight .nv, .highlight .vi { color: #f2d49b; }
.highlight .o, .highlight .p { color: #cfcfcb; }
.highlight .err { color: #ff7a6e; }

/* 6. Composants ──────────────────────────────────────────────────────────── */

/* Boutons et liens d'action */
.btn {
  --btn-bg: var(--solid);
  --btn-fg: var(--on-solid);
  --btn-border: var(--solid);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fg);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover { color: var(--btn-bg); }
.btn:hover::before { transform: none; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-border: var(--line-strong); }
.btn--ghost::before { background: var(--text); }
.btn--ghost:hover { color: var(--bg); border-color: var(--text); }
.btn--small { min-height: 42px; padding: 0 16px; font-size: 14px; }
.btn .icon { transition: transform var(--dur) var(--ease-out); }
.btn:hover .icon { transform: translateX(3px); }
[dir="rtl"] .btn:hover .icon { transform: translateX(-3px) scaleX(-1); }
[dir="rtl"] .btn .icon--dir { transform: scaleX(-1); }

.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
  padding-bottom: 2px;
  transition: background-size var(--dur) var(--ease-out);
}
.link:hover { background-size: 0 1px; background-position: 100% 100%; }
.link--quiet { color: var(--text-2); background-size: 0 1px; }
.link--quiet:hover { color: var(--text); background-size: 100% 1px; background-position: 0 100%; }

.text-btn {
  padding: 0;
  border: 0;
  background: none;
  font-weight: 500;
  color: inherit;
}

/* En-tête */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  color: var(--text);
  transition: transform 600ms var(--ease-out), background-color var(--dur) ease, border-color var(--dur) ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--line);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
}
.brand { display: inline-flex; color: var(--text); }
.brand .brand-mark { height: 34px; width: auto; }
.brand-mark .brand-mark__loop { stroke: currentColor; opacity: 0.5; }
.site-nav { display: flex; gap: clamp(18px, 2.2vw, 34px); }
.site-nav a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  padding-block: 6px;
  transition: color var(--dur-fast);
}
.site-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}
.site-nav a:hover, .site-nav a[aria-current="true"] { color: var(--text); }
.site-nav a:hover::after, .site-nav a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.header-actions { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); font-size: 14px; font-weight: 500; }
.header-actions .clock { color: var(--text-2); font-variant-numeric: tabular-nums; }
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text);
}
.icon-btn:hover { background: var(--bg-sunk); }
.lang-switch { display: inline-flex; align-items: center; gap: 4px; }
.lang-switch button {
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
}
.lang-switch button[aria-current="true"] { color: var(--text); text-decoration: underline; text-underline-offset: 5px; }
.lang-switch span { color: var(--line-strong); }
.menu-toggle { display: none; }
@media (max-width: 1099.98px) {
  .site-nav, .header-actions .clock, .header-actions .hide-on-tablet { display: none; }
  .menu-toggle { display: inline-grid; }
}

/* Menu mobile plein écran */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) 32px;
  background: var(--bg);
  color: var(--text);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.mobile-menu.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.mobile-menu__top { display: flex; justify-content: space-between; align-items: center; height: var(--header-h); }
.mobile-menu nav { display: flex; flex-direction: column; margin-top: 4vh; }
.mobile-menu nav a {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-size: clamp(40px, 11vw, 64px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.045em;
  text-decoration: none;
  transform: translateY(18px);
  opacity: 0;
  transition: transform 700ms var(--ease-out), opacity 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms + 80ms);
}
.mobile-menu.is-open nav a { transform: none; opacity: 1; }
.mobile-menu__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 14px 28px; padding-top: 32px; border-top: 1px solid var(--line); font-size: 15px; }

/* Barre d'actions mobile (CV + contact), après le hero */
.mobile-dock {
  position: fixed;
  inset: auto 0 0;
  z-index: 90;
  display: none;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  background: var(--bg);
  transform: translateY(100%);
  transition: transform 500ms var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-dock a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 58px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.mobile-dock a + a { background: var(--solid); color: var(--on-solid); }
.mobile-dock.is-visible { transform: none; }
@media (max-width: 767.98px) {
  .mobile-dock { display: grid; }
  /* Place réservée sous les sections épinglées : la barre les recouvre. */
  :root { --dock-space: calc(59px + env(safe-area-inset-bottom, 0px)); }
}

/* Filtres (projets, galerie, publications) */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding-bottom: 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.filter {
  position: relative;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-fast);
}
.filter sup { font-size: 11px; margin-inline-start: 2px; color: inherit; }
.filter::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.filter:hover { color: var(--text); }
.filter.is-active, .filter[aria-current="true"], .filter[aria-pressed="true"] { color: var(--text); }
.filter.is-active::after, .filter[aria-current="true"]::after, .filter[aria-pressed="true"]::after { transform: scaleX(1); }
.filter-empty { padding: 40px 0; color: var(--text-2); }

/* Listes à filets (projets, parcours, journal) */
.rows { list-style: none; }
.row { border-bottom: 1px solid var(--line); }
.row__link {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: baseline;
  padding-block: clamp(22px, 2.6vw, 34px);
  color: inherit;
  text-decoration: none;
}
.row__num { grid-column: span 1; font-size: var(--fs-small); color: var(--text-2); font-variant-numeric: tabular-nums; }
.row__title {
  grid-column: span 6;
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 56px);
  line-height: 1;
  letter-spacing: -0.045em;
  transition: transform 600ms var(--ease-out);
}
.row__meta { grid-column: span 2; font-size: 15px; color: var(--text-2); }
.row__cta { grid-column: span 3; justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.row__cta .icon { transition: transform var(--dur) var(--ease-out); }
.row__link:hover .row__title, .row__link:focus-visible .row__title { transform: translateX(16px); }
[dir="rtl"] .row__link:hover .row__title { transform: translateX(-16px); }
.row__link:hover .row__cta .icon { transform: translateX(4px); }
.row__thumb { display: none; }
@media (max-width: 767.98px) {
  .row__link { grid-template-columns: 1fr auto; row-gap: 6px; }
  .row__num { display: none; }
  .row__title { grid-column: 1 / -1; }
  .row__meta { grid-column: 1; }
  .row__cta { grid-column: 2; }
  .row__thumb { display: block; grid-column: 1 / -1; margin-top: 14px; }
}

.cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 22px;
  overflow: hidden;
  background: #0b0b0d;
  color: #ececea;
}
.cover__art { position: absolute; inset: -10% -40% auto -40%; width: 180%; max-width: none; opacity: 0.92; }
.cover__kicker { position: relative; font-size: 13px; color: #a3a39f; }
.cover__title {
  position: relative;
  margin-top: 6px;
  font-family: var(--font-display);
  font-stretch: 112%;
  font-size: 32px;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

/* Médias */
.media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--bg-sunk); }
picture.media, .media > picture { display: block; }
.media .media { border-radius: inherit; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-3-2 { aspect-ratio: 3 / 2; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-1-1 { aspect-ratio: 1; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
figure { margin: 0; }
figcaption { margin-top: 10px; font-size: var(--fs-small); color: var(--text-2); }

/* Sliders : base commune */
.slider { position: relative; }
.slider__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 24px;
}
.slider__count { font-size: var(--fs-small); color: var(--text-2); font-variant-numeric: tabular-nums; }
.slider__progress { flex: 1 1 auto; height: 1px; background: var(--line); position: relative; overflow: hidden; max-width: 320px; }
.slider__progress span {
  position: absolute;
  inset: 0;
  background: var(--text);
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
  transition: transform 500ms var(--ease-out);
}
.slider__buttons { display: flex; gap: 8px; }
.slider__btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text);
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.slider__btn:hover { background: var(--solid); color: var(--on-solid); }
.slider__btn:disabled { opacity: 0.35; pointer-events: none; }
[dir="rtl"] .slider__btn .icon { transform: scaleX(-1); }

/* Carousel : défilement natif + accroche (le tactile reste natif) */
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, var(--slide-w, 31%));
  gap: var(--col-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
@media (max-width: 767.98px) { .carousel__track { grid-auto-columns: 84%; } }

/* Fondu : images empilées, une seule visible */
.fade__stage { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--bg-sunk); }
.fade__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease-out); }
.fade__slide.is-current { position: relative; opacity: 1; }
.fade__slide img { width: 100%; height: 100%; object-fit: contain; }
.fade__thumbs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.fade__thumbs button {
  flex: none;
  width: 72px;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid transparent;
  background: var(--bg-sunk);
  opacity: 0.55;
  overflow: hidden;
  transition: opacity var(--dur-fast), border-color var(--dur-fast);
}
.fade__thumbs button[aria-current="true"] { opacity: 1; border-color: var(--text); }
.fade__thumbs img { width: 100%; height: 100%; object-fit: cover; }
html:not(.js) .fade__slide { position: relative; opacity: 1; margin-bottom: 12px; }

/* Parallaxe : la photo glisse moins vite que son cadre */
.parallax-slider .carousel__track { grid-auto-columns: minmax(300px, var(--slide-w, 38%)); }
.parallax-slide { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; }
.parallax-slide__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--bg-sunk); }
.parallax-slide__frame > * {
  position: absolute;
  inset: 0 -12%;
  width: 124%;
  max-width: none;
  height: 100%;
  transform: translateX(var(--shift, 0px));
  will-change: transform;
}
.parallax-slide__frame img { width: 100%; height: 100%; object-fit: cover; }
.parallax-slide__meta { display: flex; justify-content: space-between; gap: 14px; font-size: 15px; }
.parallax-slide__meta span:last-child { color: var(--text-2); }
.parallax-slide__title { font-family: var(--font-display); font-stretch: 112%; font-size: 26px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }

/* Galerie : toute la photo mène au détail ; au clic, la carte s'enfonce et
   une onde part du point touché (data-press, script). */
a.parallax-slide__frame { display: block; color: inherit; }
.parallax-slide__more {
  position: absolute;
  inset: auto 14px 14px auto;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: rgb(11 11 13 / 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #f2f0ec;
  font-size: 13.5px;
  font-weight: 600;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
a.parallax-slide__frame:focus-visible .parallax-slide__more { opacity: 1; transform: none; }
/* Survol réel seulement : sur écran tactile, un survol « collé » après un
   toucher laisserait la pastille posée sur la photo. */
@media (hover: hover) and (pointer: fine) {
  a.parallax-slide__frame:hover .parallax-slide__more { opacity: 1; transform: none; }
}
.parallax-slide__title a { color: inherit; text-decoration: none; }
.parallax-slide__title a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
[data-press] { position: relative; transition: transform 260ms var(--ease-out); }
[data-press].is-pressed { transform: scale(0.97); }
.press-ripple {
  position: absolute;
  z-index: 3;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: rgb(242 240 236 / 0.55);
  pointer-events: none;
  animation: press-ripple 650ms var(--ease-out) forwards;
}
@keyframes press-ripple { to { transform: scale(var(--ripple-scale, 30)); opacity: 0; } }

/* Visionneuse plein écran : ambiance floutée de l'image courante, image
   arrondie au centre, flèches latérales, bandeau de vignettes. */
html.has-dialog { overflow: hidden; }
.lightbox {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #09090a;
  color: #ececea;
}
.lightbox[open] { animation: lb-fade 380ms var(--ease-out); }
.lightbox.is-closing { animation: lb-fade-out 220ms ease-in forwards; }
@keyframes lb-fade { from { opacity: 0; } }
@keyframes lb-fade-out { to { opacity: 0; } }
.lightbox::backdrop { background: rgb(9 9 10 / 0.6); }
.lightbox__ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lightbox__ambient img {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  object-fit: cover;
  opacity: 0;
  filter: blur(56px) brightness(0.42) saturate(0.9);
  transform: scale(1.08);
  transition: opacity 900ms var(--ease-out);
}
.lightbox__ambient img.is-on { opacity: 1; }
.lightbox__ambient::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 30%, rgb(9 9 10 / 0.72)); }
.lightbox__inner { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; padding: 16px var(--gutter) 18px; }
.lightbox__top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 20px; min-height: 52px; }
.lightbox__caption { margin: 0; overflow: hidden; font-size: 15.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.lightbox__count { font-size: 13.5px; letter-spacing: 0.06em; color: rgb(236 236 234 / 0.66); font-variant-numeric: tabular-nums; }
.lightbox__close, .lightbox__nav {
  display: grid;
  place-items: center;
  border: 1px solid rgb(236 236 234 / 0.18);
  border-radius: 50%;
  background: rgb(20 20 22 / 0.5);
  color: #ececea;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: background-color 250ms, color 250ms, border-color 250ms, transform 400ms var(--ease-out);
}
.lightbox__close { width: 46px; height: 46px; }
.lightbox__close .icon { width: 20px; height: 20px; }
.lightbox__close:hover, .lightbox__nav:hover { background: #ececea; border-color: #ececea; color: #0b0b0d; }
.lightbox__close:active, .lightbox__nav:active { transform: scale(0.92); }
.lightbox__stage { position: relative; min-height: 0; margin-block: 14px; touch-action: pan-y; user-select: none; }
.lightbox__figure { position: absolute; inset: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; margin: 0; padding-inline: 76px; will-change: transform, opacity; }
.lightbox__figure img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 60px 120px -50px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(236 236 234 / 0.08);
  -webkit-user-drag: none;
}
.lightbox__nav { position: absolute; top: 50%; z-index: 2; width: 56px; height: 56px; margin-top: -28px; }
.lightbox__nav .icon { width: 22px; height: 22px; }
.lightbox__nav--prev { inset-inline-start: 0; }
.lightbox__nav--next { inset-inline-end: 0; }
[dir="rtl"] .lightbox__nav .icon { transform: scaleX(-1); }
.lightbox__loader { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 2px solid rgb(236 236 234 / 0.2); border-top-color: #ececea; border-radius: 50%; opacity: 0; transition: opacity 200ms; animation: lb-spin 900ms linear infinite; pointer-events: none; }
.lightbox__stage.is-loading .lightbox__loader { opacity: 1; }
@keyframes lb-spin { to { transform: rotate(1turn); } }
.lightbox__strip { position: relative; display: flex; justify-content: safe center; gap: 8px; padding: 4px 2px; overflow-x: auto; scrollbar-width: none; }
.lightbox__strip::-webkit-scrollbar { display: none; }
.lightbox__thumb { flex: none; width: 68px; height: 50px; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: rgb(236 236 234 / 0.08); opacity: 0.42; cursor: pointer; transition: opacity 300ms, transform 400ms var(--ease-out), box-shadow 300ms; }
.lightbox__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lightbox__thumb:hover { opacity: 0.8; }
.lightbox__thumb[aria-current="true"] { opacity: 1; transform: translate3d(0, -3px, 0); box-shadow: 0 0 0 2px #09090a, 0 0 0 4px #ececea; }
@media (max-width: 767.98px) {
  .lightbox__inner { padding: 10px 14px 14px; }
  .lightbox__top { gap: 12px; }
  .lightbox__figure { padding-inline: 0; }
  .lightbox__figure img { border-radius: var(--radius); }
  .lightbox__nav { top: auto; bottom: -6px; width: 44px; height: 44px; margin: 0; }
  .lightbox__stage { margin-block: 10px 56px; }
  .lightbox__thumb { width: 54px; height: 40px; border-radius: 10px; }
}

/* Accordéon (parcours) — <details> natif, sans JavaScript */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__summary {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: baseline;
  padding-block: clamp(22px, 2.4vw, 32px);
  list-style: none;
  cursor: pointer;
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__period { grid-column: span 2; font-size: var(--fs-small); color: var(--text-2); font-variant-numeric: tabular-nums; }
.accordion__title { grid-column: span 6; }
.accordion__title strong {
  display: block;
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: clamp(24px, 2.5vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.accordion__title span { display: block; margin-top: 6px; color: var(--text-2); font-size: 15px; }
.accordion__org { grid-column: span 3; font-size: 15px; }
.accordion__sign {
  grid-column: span 1;
  justify-self: end;
  position: relative;
  width: 18px;
  height: 18px;
}
.accordion__sign::before, .accordion__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out);
}
.accordion__sign::after { transform: rotate(90deg); }
.accordion__item[open] .accordion__sign::after { transform: rotate(0deg); }
.accordion__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 28px;
  padding-bottom: 40px;
}
.accordion__body > .col-main { grid-column: 3 / span 6; }
.accordion__body > .col-side { grid-column: 10 / span 3; }
.mission-list { list-style: none; border-top: 1px solid var(--line); }
.mission-list li { padding: 12px 0; border-bottom: 1px solid var(--line); line-height: 1.55; }
@media (max-width: 1023.98px) {
  .accordion__summary { grid-template-columns: 1fr auto; row-gap: 8px; }
  .accordion__period { grid-column: 1 / -1; }
  .accordion__title { grid-column: 1; }
  .accordion__org { grid-column: 1; }
  .accordion__sign { grid-column: 2; grid-row: 2; }
  .accordion__body > .col-main, .accordion__body > .col-side { grid-column: 1 / -1; }
}

/* Champs de formulaire */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field textarea, .field select {
  width: 100%;
  min-height: 54px;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field textarea { min-height: 180px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 1px var(--text);
}
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--error); }
/* Liste déroulante : flèche du thème, invite en gris tant que rien n'est choisi. */
.field__select { position: relative; }
.field__select select { appearance: none; padding-inline-end: 52px; cursor: pointer; }
.field__select select:invalid { color: var(--text-2); }
.field__select option { color: var(--text); }
.field__select .icon { position: absolute; inset-inline-end: 18px; top: 50%; translate: 0 -50%; color: var(--text-2); pointer-events: none; }
.field__error { font-size: 14px; color: var(--error); }
.field__hint { font-size: 13px; color: var(--text-2); }
.form-status { min-height: 1.6em; font-size: 15px; }
.form-status.is-success { color: var(--ok); }
.form-status.is-error { color: var(--error); }
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__label { opacity: 0.4; }
.spinner {
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Notifications */
.toast-region { position: fixed; inset: auto var(--gutter) 24px auto; z-index: 300; display: flex; flex-direction: column; gap: 10px; }
.toast {
  max-width: 380px;
  padding: 14px 18px;
  background: var(--solid);
  color: var(--on-solid);
  font-size: 14.5px;
  box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.6);
  animation: toast-in 500ms var(--ease-out);
}
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }

/* Fil d'Ariane */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; color: var(--text-2); }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb [aria-current="page"] { color: var(--text); }

/* Pied de page : une feuille sombre aux angles arrondis, détachée de la page
   (impossible à confondre avec une section), signée du nom en très grand. */
.site-footer { padding: clamp(32px, 4.5vw, 72px) clamp(8px, 1vw, 14px) clamp(8px, 1vw, 14px); }
.site-footer__sheet {
  position: relative;
  overflow: hidden;
  padding-top: clamp(24px, 3vw, 42px);
  border-radius: clamp(24px, 3vw, 40px);
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--line);
}
:root[data-theme="dark"] .site-footer__sheet { background: #141417; }
.site-footer__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.site-footer__brand { display: inline-flex; color: var(--text); }
.site-footer__brand .brand-mark { width: 46px; height: 46px; }
.site-footer__up { display: inline-flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 500; color: var(--text); text-decoration: none; }
.site-footer__up-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); transition: background-color var(--dur-fast), color var(--dur-fast), transform var(--dur) var(--ease-out); }
.site-footer__up:hover .site-footer__up-icon { background: var(--solid); color: var(--on-solid); transform: translateY(-3px); }
.site-footer__up-icon .icon { width: 18px; height: 18px; }
.site-footer__kicker { margin: clamp(32px, 4.6vw, 68px) 0 14px; font-size: var(--fs-lead); color: var(--text-2); }
.site-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: clamp(36px, 5.8vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.055em;
  color: var(--text);
  text-decoration: none;
}
.site-footer__cta-icon { display: inline-grid; place-items: center; flex: none; width: clamp(44px, 4.4vw, 72px); height: clamp(44px, 4.4vw, 72px); border-radius: var(--radius-pill); background: var(--solid); color: var(--on-solid); transition: transform var(--dur) var(--ease-out); }
.site-footer__cta-icon .icon { width: 42%; height: 42%; }
.site-footer__cta:hover .site-footer__cta-icon { transform: rotate(45deg); }
.site-footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--col-gap); margin-top: clamp(40px, 5vw, 72px); padding-top: 24px; border-top: 1px solid var(--line); }
.site-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 15.5px; }
.site-footer__col h2 { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.site-footer__col a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.site-footer__col a .icon { width: 14px; height: 14px; opacity: 0.6; }
.site-footer__col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__muted { color: var(--text-2); }
.site-footer__giant {
  margin: clamp(36px, 5vw, 80px) 0 0;
  padding-inline: var(--gutter);
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 8.9vw;
  line-height: 0.82;
  letter-spacing: -0.06em;
  white-space: nowrap;
  overflow: hidden;
  color: var(--text);
}
.site-footer__giant.is-scattered { overflow-x: clip; overflow-y: visible; padding-block: 0.12em 0.28em; }

.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 18px 22px; font-size: 13.5px; color: var(--text-2); }
@media (max-width: 899.98px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) {
  .site-footer__up { gap: 0; font-size: 0; }
  .site-footer__up-icon { font-size: 15px; }
  .site-footer__giant { font-size: 15vw; line-height: 0.92; white-space: normal; }
}

/* Plan du site (page HTML pour les visiteurs) */
.sitemap { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 88px)); }
.sitemap__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(20px, 2vw, 28px); }
.sitemap__group { padding: 26px 28px 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-elev); }
.sitemap__group h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 16px; font-family: var(--font-display); font-stretch: 112%; font-weight: 600; font-size: var(--fs-4); letter-spacing: -0.03em; }
.sitemap__group h2 span { font-family: var(--font-text); font-size: 13px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sitemap__group ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.sitemap__group li { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.sitemap__group a { color: var(--text); text-decoration: none; font-weight: 500; }
.sitemap__group a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sitemap__group small { font-size: 13.5px; color: var(--text-2); }

/* Retour en haut flottant : paraît après un écran et demi de défilement. */
.to-top {
  position: fixed;
  z-index: 55;
  inset: auto clamp(16px, 2vw, 28px) clamp(16px, 2vw, 28px) auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  background: var(--solid);
  color: var(--on-solid);
  box-shadow: 0 0 0 1px rgb(242 240 236 / 0.22), 0 18px 40px -18px rgb(0 0 0 / 0.55);
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(0.9);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { transform: translate3d(0, -3px, 0); }
.to-top .icon { width: 22px; height: 22px; }
[dir="rtl"] .to-top { inset: auto auto clamp(16px, 2vw, 28px) clamp(16px, 2vw, 28px); }
@media (max-width: 1023.98px) { .to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }

/* 7. Sections ────────────────────────────────────────────────────────────── */

/* Hero */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: calc(var(--header-h) + clamp(32px, 10vh, 120px));
  padding-bottom: clamp(24px, 4vh, 44px);
  overflow: hidden;
  isolation: isolate;
}
@supports (min-height: 100svh) { .hero { min-height: 100svh; } }
.hero__stage {
  position: absolute;
  z-index: -1;
  inset-block: 12% 18%;
  inset-inline: auto 2vw;
  width: min(60vw, 900px);
}
.hero__poster, .sculpture__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 1200ms var(--ease-out);
}
.sculpture__canvas { opacity: 0; }
.hero__stage.is-ready .sculpture__canvas { opacity: 1; }
.hero__stage.is-ready .hero__poster { opacity: 0; }
.hero__intro { grid-column: 1 / span 5; align-self: start; display: flex; flex-direction: column; gap: 30px; }
.hero__intro .lead span { color: var(--text-2); }
.hero__meta { display: flex; flex-wrap: wrap; gap: 14px 44px; font-size: 14px; color: var(--text-2); }
.hero__meta strong { display: block; color: var(--text); font-weight: 500; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; will-change: transform; }
.hero__roles { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-bottom: 0.8em; font-size: 14px; color: var(--text-2); text-align: end; }
.hero__name .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero__name .line > span { display: block; }
@media (max-width: 1023.98px) {
  .hero__intro { grid-column: 1 / -1; max-width: 560px; }
  .hero__stage { inset-block: auto 22%; inset-inline: -10vw; width: 120vw; height: 52vh; opacity: 0.85; }
  .hero__roles { display: none; }
}
@media (max-width: 767.98px) {
  .hero { padding-top: calc(var(--header-h) + 24px); }
  .hero__stage { inset-block: 47% auto; height: 34vh; }
  .hero__intro { gap: 20px; }
  .hero__meta { display: none; }
}

/* Manifeste (mots révélés au défilement) */
.manifesto__text {
  grid-column: 1 / span 11;
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}
.manifesto__text .word { opacity: var(--word-opacity, 1); transition: opacity 200ms linear; }
.about__grid { margin-top: clamp(56px, 8vw, 120px); row-gap: 48px; }
.about__body { grid-column: 4 / span 7; display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 1023.98px) { .about__body { grid-column: 1 / -1; } }

/* À propos — présentation personnelle (.persona). Plans : nom qui défile, portrait,
   textes. Fond clair (ou sombre selon le thème) : une photo classique y fond
   ses bords ; un PNG détouré s'y découpe net. */
.persona-section { padding-top: 0; }
.persona {
  /* Hauteur de la scène et largeur du portrait (rapport --portrait-k posé
     par le gabarit) : les colonnes de texte s'écartent d'autant, le portrait
     ne recouvre jamais l'introduction ni les repères. */
  --persona-h: max(100svh, 860px);
  --portrait-k: 0.75;
  --portrait-w: min(calc(min(var(--persona-h) * 0.82, 840px) * var(--portrait-k)), 44vw);
  position: relative;
  min-height: 100vh;
  min-height: var(--persona-h);
  margin-bottom: clamp(72px, 10vw, 160px);
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(55% 65% at 50% 52%, color-mix(in srgb, var(--text) 6%, transparent), transparent 72%), var(--bg);
  border-bottom: 1px solid var(--line);
}
.persona__marquee { position: absolute; inset-inline: 0; top: 47%; z-index: 1; overflow: hidden; transform: translate3d(0, -50%, 0); pointer-events: none; }
.persona__marquee-track { display: flex; width: max-content; direction: ltr; will-change: transform; }
.persona__marquee-item {
  display: flex;
  align-items: center;
  flex: none;
  padding-inline-end: 0.18em;
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 400;
  font-size: clamp(96px, 15.5vw, 300px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
}
.persona__marquee-sep { display: inline-block; width: 0.5em; height: 0.06em; margin-inline: 0.36em 0.3em; background: currentColor; }

/* Portrait net, au premier plan, couleurs d'origine. Une photo classique
   devient une carte arrondie posée au-dessus du bandeau ; un PNG détouré se
   pose directement sur le bas de la section, sans cadre. Aucun fondu. */
.persona__portrait {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(76px, 10vh, 108px);
  width: var(--portrait-w);
  aspect-ratio: var(--portrait-ratio, 3 / 4);
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-sunk);
  box-shadow: 0 50px 90px -50px rgb(0 0 0 / 0.55), 0 0 0 1px var(--line);
  transform: translate3d(-50%, var(--lift, 0px), 0) scale(var(--zoom, 1));
  transform-origin: 50% 100%;
  will-change: transform;
}
.persona__photo, .persona__photo img { display: block; width: 100%; height: 100%; }
.persona__photo img, img.persona__photo { object-fit: cover; object-position: 50% 22%; }
.persona.is-cutout { --portrait-w: min(calc(var(--persona-h) * 0.92 * var(--portrait-k)), 48vw); }
.persona.is-cutout .persona__portrait {
  bottom: 0;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.persona.is-cutout .persona__photo img { object-fit: contain; object-position: 50% 100%; }
.about__bio { max-width: 62ch; margin: 0; font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); }

.persona__layer {
  position: absolute;
  z-index: 3;
  inset: calc(var(--header-h) + 8px) var(--gutter) clamp(84px, 12vh, 124px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--portrait-w) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(24px, 2.8vw, 48px);
  pointer-events: none;
}
.persona__layer > * { pointer-events: auto; }
.persona__intro { grid-column: 1; grid-row: 1; }
.persona__intro .persona__statement { font-size: clamp(16.5px, 1.32vw, 19px); }
.persona__label { margin: 0 0 14px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
.persona__statement { margin: 0; font-size: 19px; line-height: 1.42; }
/* Phrase de présentation : une ligne de titre, jamais justifiée (sur deux
   lignes, la justification l'écartèlerait) ; lignes équilibrées. */
.persona__name { display: block; text-align: start; text-wrap: balance; }
/* Bio : un cran plus petite, justifiée dans une colonne étroite (280 à
   380 px selon l'écran). La césure y suit la règle française : au moins
   3 lettres de chaque côté, jamais dans un nom propre (.nohy, posé par le
   filtre protect_names) : pas de trous entre les mots. */
.persona__bio {
  display: block;
  margin-top: 0.4em;
  font-size: 0.88em;
  color: var(--text-2);
  hyphenate-limit-chars: 7 3 3;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
}
.nohy { -webkit-hyphens: manual; hyphens: manual; }
.persona__signature { grid-column: 3; grid-row: 1; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 18px; text-align: end; }
.persona__signature .brand-mark { width: auto; height: 42px; }
.persona__roles { margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: 0.04em; text-transform: uppercase; }
.persona__facts { grid-column: 1; grid-row: 3; align-self: end; display: grid; grid-template-columns: max-content; gap: 14px; margin: 0; }
.persona__facts dt { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.persona__facts dd { margin: 4px 0 0; font-size: 16px; font-weight: 500; }
.persona__actions { grid-column: 3; grid-row: 3; align-self: end; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.persona__pillars {
  position: absolute;
  z-index: 3;
  inset: auto var(--gutter) clamp(20px, 3vh, 34px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.persona__pillars li[aria-hidden] { font-size: 20px; font-weight: 300; line-height: 1; color: var(--text-2); }
.js .persona__pillars li { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js .persona__pillars.is-revealed li { opacity: 1; transform: none; }

/* Tablette et mobile : portrait en tête, textes dessous. */
@media (max-width: 1099.98px) {
  .persona { display: flex; flex-direction: column; min-height: 0; padding-top: calc(var(--header-h) + 8px); }
  .persona__layer { position: static; order: 2; display: flex; flex-direction: column; gap: 26px; padding: 28px var(--gutter) 0; }
  .persona__signature { display: none; }
  .persona__facts { align-self: stretch; }
  .persona__actions { flex-direction: row; flex-wrap: wrap; align-self: flex-start; align-items: center; justify-content: flex-start; }
  .persona__portrait { position: relative; order: 1; left: auto; bottom: auto; width: min(100% - 40px, 480px); height: auto; margin: 0 auto; transform: translate3d(0, var(--lift, 0px), 0) scale(var(--zoom, 1)); }
  .persona.is-cutout .persona__portrait { width: auto; height: 62svh; }
  /* Le nom défile au-dessus du portrait, jamais caché par lui. */
  .persona__marquee { position: relative; order: 0; top: auto; transform: none; margin-bottom: clamp(14px, 3.5vw, 26px); }
  .persona__marquee-item { font-size: clamp(64px, 21vw, 150px); }
  .persona__facts { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
  .persona__pillars { position: static; order: 3; margin: 32px var(--gutter) 24px; font-size: 10px; letter-spacing: 0.06em; white-space: nowrap; }
  .persona__pillars li[aria-hidden] { font-size: 13px; }
  .persona__pillars li[aria-hidden]:first-child, .persona__pillars li[aria-hidden]:last-child { display: none; }
}

/* Le cycle complet : défilement horizontal épinglé (écran large) */
.lifecycle { --steps: 8; }
.lifecycle__head { margin-bottom: 0; }
.lifecycle__track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line); }
.lifecycle__step { padding: 26px var(--col-gap) 0 0; border-inline-end: 1px solid var(--line); min-height: 260px; display: flex; flex-direction: column; gap: 18px; }
.lifecycle__step:nth-child(4n) { border-inline-end: 0; }
.lifecycle__num { font-size: var(--fs-small); color: var(--text-2); font-variant-numeric: tabular-nums; }
.lifecycle__title { font-family: var(--font-display); font-stretch: 112%; font-weight: 600; font-size: clamp(30px, 3vw, 48px); line-height: 1; letter-spacing: -0.045em; }
.lifecycle__text { color: var(--text-2); }
.lifecycle__step a { margin-top: auto; padding-bottom: 26px; font-size: 14px; }
@media (max-width: 1023.98px) {
  .lifecycle__track { grid-template-columns: 1fr 1fr; }
  .lifecycle__step:nth-child(2n) { border-inline-end: 0; }
}
@media (max-width: 599.98px) {
  .lifecycle__track { grid-template-columns: 1fr; }
  .lifecycle__step { border-inline-end: 0; border-bottom: 1px solid var(--line); min-height: 0; }
}
/* Épinglé (classe posée par le script quand l'écran est assez haut) : les
   étapes défilent à l'horizontale, sur ordinateur comme sur mobile. */
.js .lifecycle--pinned.is-pinned { height: calc(var(--steps) * 42vh + 100vh); padding-block: 0; }
.js .lifecycle--pinned.is-pinned .lifecycle__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.js .lifecycle--pinned.is-pinned .lifecycle__track {
  display: flex;
  width: max-content;
  border-top: 0;
  transform: translate3d(var(--track-x, 0px), 0, 0);
  will-change: transform;
}
.js .lifecycle--pinned.is-pinned .lifecycle__step {
  width: clamp(320px, 30vw, 440px);
  border-top: 1px solid var(--line);
  border-bottom: 0;
  border-inline-end: 1px solid var(--line);
  min-height: 46vh;
  padding-inline-start: 0;
}
.js .lifecycle--pinned.is-pinned .lifecycle__step:nth-child(n) { border-inline-end: 1px solid var(--line); }
.lifecycle__progress { height: 1px; background: var(--line); margin-top: 32px; position: relative; overflow: hidden; }
.lifecycle__progress span { position: absolute; inset: 0; background: var(--text); transform-origin: left; transform: scaleX(var(--progress, 0)); }
[dir="rtl"] .lifecycle__progress span { transform-origin: right; }
.lifecycle:not(.is-pinned) .lifecycle__progress { display: none; }
@media (max-width: 1023.98px) {
  .js .lifecycle--pinned.is-pinned { height: calc(var(--steps) * 56vh + 100vh); }
  .js .lifecycle--pinned.is-pinned .lifecycle__sticky { padding-bottom: var(--dock-space, 0px); }
  .js .lifecycle--pinned.is-pinned .lifecycle__head { row-gap: 14px; }
  .js .lifecycle--pinned.is-pinned .section-head__title { font-size: clamp(38px, 9.4vw, 72px); }
  .js .lifecycle--pinned.is-pinned .section-head__intro { font-size: 16.5px; }
  .js .lifecycle--pinned.is-pinned .lifecycle__track { margin-top: clamp(26px, 5vh, 56px); }
  .js .lifecycle--pinned.is-pinned .lifecycle__step { width: min(76vw, 380px); min-height: 0; padding: 22px var(--col-gap) 22px 0; }
  .js .lifecycle--pinned.is-pinned .lifecycle__title { font-size: clamp(28px, 7.6vw, 40px); }
  .js .lifecycle--pinned.is-pinned .lifecycle__progress { margin-top: 18px; }
}

/* Expertise — services : aplat qui glisse au survol, numéro et icône en
   parallaxe (souris seulement ; au toucher, la liste reste une liste). */
.services { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.service {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 14px;
  align-items: center;
  margin-inline: calc(-1 * clamp(12px, 1.6vw, 24px));
  padding: clamp(26px, 3vw, 40px) clamp(12px, 1.6vw, 24px);
  border-bottom: 1px solid var(--line);
  transition: color 500ms var(--ease-out);
}
.service__fill {
  position: absolute;
  inset: 6px 0;
  z-index: -1;
  border-radius: var(--radius-lg);
  background: var(--solid);
  clip-path: inset(0 100% 0 0 round var(--radius-lg));
  transition: clip-path 800ms var(--ease-out);
}
.service__num { grid-column: span 1; font-size: var(--fs-small); color: var(--text-2); font-variant-numeric: tabular-nums; transition: color 500ms var(--ease-out); }
.service__title { grid-column: span 4; margin: 0; transition: transform 700ms var(--ease-out); }
.service__text { grid-column: span 5; max-width: 52ch; margin: 0; color: var(--text-2); transition: color 500ms var(--ease-out); }
.service__visual {
  grid-column: span 2;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(calc(var(--mx, 0) * 22px), calc(var(--my, 0) * 14px), 0);
  transition: opacity 500ms var(--ease-out), transform 300ms linear;
}
.service__big { font-family: var(--font-display); font-stretch: 112%; font-weight: 600; font-size: clamp(56px, 6vw, 104px); line-height: 0.8; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.2px var(--on-solid); opacity: 0.55; }
.service__badge {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: var(--radius-pill);
  background: var(--on-solid);
  color: var(--solid);
  transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px), 0) rotate(calc(var(--mx, 0) * 16deg));
  transition: transform 300ms linear;
}
.service__badge .icon { width: 26px; height: 26px; stroke-width: 1.5; }
@media (hover: hover) and (pointer: fine) {
  .service:hover { color: var(--on-solid); }
  .service:hover .service__fill { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
  .service:hover .service__num, .service:hover .service__text { color: color-mix(in srgb, var(--on-solid) 72%, transparent); }
  .service:hover .service__title { transform: translate3d(14px, 0, 0); }
  .service:hover .service__visual { opacity: 1; }
}
@media (max-width: 1023.98px) {
  .service__title { grid-column: span 5; }
  .service__text { grid-column: span 6; }
  .service__visual { display: none; }
}
@media (max-width: 767.98px) {
  .service__num { display: none; }
  .service__title, .service__text { grid-column: 1 / -1; }
}

/* Expertise — outils : cartes inclinables, reflet qui suit le curseur,
   outils qui défilent en boucle au survol quand ils débordent. */
.tools { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px; margin-top: clamp(72px, 9vw, 140px); }
.tools__intro { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--header-h) + 24px); }
.tools__intro h3 { margin: 0; }
.tools__note { margin: 16px 0 0; color: var(--text-2); }
.tools__grid { grid-column: 5 / span 8; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; perspective: 1200px; }
.tool-group {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 168px;
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out), border-color 500ms;
}
.tool-group__light {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(260px circle at var(--lx, 50%) var(--ly, 50%), color-mix(in srgb, var(--text) 9%, transparent), transparent 70%);
  transition: opacity 400ms;
}
.tool-group__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tool-group__head h4 { margin: 0; font-family: var(--font-display); font-stretch: 112%; font-weight: 600; font-size: var(--fs-4); line-height: 1.12; letter-spacing: -0.03em; }
.tool-group__count { flex: none; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tool-group__viewport { margin: 0; }
.tool-group__track { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tool { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; line-height: 1.25; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: 14.5px; background: var(--bg); transition: background-color 300ms, color 300ms, border-color 300ms; }
.tool img { width: 18px; height: 18px; object-fit: contain; }
@keyframes tool-wave { 0% { transform: none; } 35% { transform: translate3d(0, -7px, 0); } 100% { transform: none; } }
@media (hover: hover) and (pointer: fine) {
  .tool-group:hover { border-color: var(--line-strong); box-shadow: 0 30px 60px -36px rgb(0 0 0 / 0.45); }
  .tool-group:hover .tool-group__light { opacity: 1; }
  .tool-group:hover .tool { animation: tool-wave 900ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 70ms); }
  .tool:hover { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
}
@media (max-width: 1023.98px) {
  .tools__intro { position: static; grid-column: 1 / -1; }
  .tools__grid { grid-column: 1 / -1; }
}

/* DevSecOps — pipeline. Par défaut : étapes empilées en cartes compactes.
   Écran large avec script : section épinglée, une portion de défilement par
   étape, rail de progression à gauche (cliquable). */
.pipeline { position: relative; margin-top: clamp(40px, 5vw, 72px); }
.pipeline__nav { display: none; }
.pipeline__stages { display: flex; flex-direction: column; gap: 14px; }
.pipeline__stage { display: flex; flex-direction: column; gap: 22px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-elev); }
.pipeline__count { margin: 0 0 10px; font-size: 13.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pipeline__title { margin: 0; overflow: hidden; font-family: var(--font-display); font-stretch: 112%; font-weight: 600; font-size: clamp(30px, 3.6vw, 64px); line-height: 0.98; letter-spacing: -0.045em; }
.pipeline__title span { display: block; }
.pipeline__summary { max-width: 52ch; margin: 14px 0 0; font-size: var(--fs-lead); line-height: 1.45; color: var(--text-2); }
.pipeline__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px clamp(24px, 3vw, 48px); }
.pipeline__block h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.pipeline__badge { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--solid); color: var(--on-solid); font-size: 11px; letter-spacing: 0; }
.pipeline__practices { margin: 0; padding: 0; list-style: none; }
.pipeline__practices li { position: relative; padding: 10px 0 10px 22px; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.4; }
.pipeline__practices li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 1.05em; width: 10px; height: 1.5px; background: currentColor; opacity: 0.6; }
.pipeline__proofs { display: flex; flex-direction: column; }
.proof { border-bottom: 1px solid var(--line); }
.proof summary { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; list-style: none; cursor: pointer; }
.proof summary::-webkit-details-marker { display: none; }
.proof__tool { flex: 1; min-width: 0; font-weight: 600; font-size: 15.5px; }
.proof__count { flex: none; padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.proof__chevron { flex: none; width: 16px; height: 16px; color: var(--text-2); transition: transform var(--dur) var(--ease-out); }
.proof[open] .proof__chevron { transform: rotate(180deg); }
.proof__sources { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.proof__sources a { color: var(--text); text-underline-offset: 3px; }
.pipeline__empty { margin: 10px 0 0; font-size: 14.5px; color: var(--text-2); }
.pipeline__site { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 14px 18px; border-radius: var(--radius); background: var(--bg-sunk); font-size: 14.5px; line-height: 1.45; }
.pipeline__site span { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
@media (max-width: 767.98px) { .pipeline__body { grid-template-columns: minmax(0, 1fr); } }

.js .pipeline.is-pinned { height: calc(var(--count) * 42vh + 100vh); }
.pipeline.is-pinned .pipeline__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: center;
  padding: calc(var(--header-h) + 12px) 0 28px;
}
.pipeline.is-pinned .pipeline__nav { position: relative; display: block; grid-column: 1 / span 3; padding-inline-start: 22px; }
.pipeline__rail { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.pipeline__step {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 8 px de marge : l'étape courante se décale de 8 px sans déborder. */
  width: calc(100% - 8px);
  min-height: 36px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--text-2);
  font-size: 15px;
  text-align: start;
  cursor: pointer;
  opacity: 0.55;
  transition: color var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out), transform 600ms var(--ease-out);
}
.pipeline__step:hover { opacity: 1; }
.pipeline__step.is-current { color: var(--text); opacity: 1; transform: translateX(8px); }
[dir="rtl"] .pipeline__step.is-current { transform: translateX(-8px); }
.pipeline__step.is-done { opacity: 0.85; }
.pipeline__step-num { flex: none; width: 24px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pipeline__step-label { flex: 1; min-width: 0; }
.pipeline__step-proof { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.pipeline__progress { position: absolute; inset-block: 6px; inset-inline-start: 0; width: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.pipeline__progress span { display: block; width: 100%; height: 100%; background: var(--text); transform-origin: 50% 0; transform: scaleY(var(--progress, 0)); }
/* Tablette et mobile : le rail devient un bandeau d'étapes collant sous
   l'en-tête (il remonte quand l'en-tête se masque). L'étape lue s'allume,
   le bandeau la garde en vue, la barre du bas suit la progression. */
@media (max-width: 1023.98px) {
  .js .pipeline:not(.is-pinned) .pipeline__nav {
    position: sticky;
    top: var(--header-h);
    z-index: 5;
    display: block;
    margin: 0 calc(-1 * var(--gutter)) 16px;
    padding: 10px var(--gutter) 12px;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: top 600ms var(--ease-out);
  }
  .js.is-header-hidden .pipeline:not(.is-pinned) .pipeline__nav { top: 0; }
  /* position: relative : les textes masqués (lecteurs d'écran) restent dans la zone défilante. */
  .js .pipeline:not(.is-pinned) .pipeline__rail { position: relative; flex-direction: row; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .js .pipeline:not(.is-pinned) .pipeline__rail::-webkit-scrollbar { display: none; }
  .js .pipeline:not(.is-pinned) .pipeline__rail li { flex: none; }
  .js .pipeline:not(.is-pinned) .pipeline__step {
    width: auto;
    min-height: 38px;
    padding: 6px 14px;
    gap: 8px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    opacity: 1;
    font-size: 14px;
    white-space: nowrap;
    transition: background-color 450ms var(--ease-out), color 450ms var(--ease-out), border-color 450ms var(--ease-out);
  }
  .js .pipeline:not(.is-pinned) .pipeline__step.is-current,
  [dir="rtl"] .js .pipeline:not(.is-pinned) .pipeline__step.is-current { transform: none; background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
  .js .pipeline:not(.is-pinned) .pipeline__step.is-done { color: var(--text); }
  .js .pipeline:not(.is-pinned) .pipeline__step-num { width: auto; }
  .js .pipeline:not(.is-pinned) .pipeline__progress { inset: auto 0 0; width: auto; height: 2px; border-radius: 0; }
  .js .pipeline:not(.is-pinned) .pipeline__progress span { transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); }
  [dir="rtl"] .js .pipeline:not(.is-pinned) .pipeline__progress span { transform-origin: 100% 50%; }
  .js .pipeline:not(.is-pinned) .pipeline__stage { transition: border-color 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
  .js .pipeline:not(.is-pinned) .pipeline__stage.is-current { border-color: var(--line-strong); box-shadow: 0 34px 70px -46px rgb(0 0 0 / 0.9); }
}
.pipeline.is-pinned .pipeline__stages { position: relative; grid-column: 5 / span 8; align-self: stretch; display: block; }
.pipeline.is-pinned .pipeline__stage {
  position: absolute;
  inset: 0;
  justify-content: center;
  gap: clamp(20px, 3vh, 32px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 28px, 0);
  transition: opacity 600ms var(--ease-out), transform 900ms var(--ease-out), visibility 0s linear 600ms;
}
.pipeline.is-pinned[data-direction="up"] .pipeline__stage { transform: translate3d(0, -28px, 0); }
.pipeline.is-pinned .pipeline__stage.is-current { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pipeline.is-pinned .pipeline__title span { transform: translate3d(0, 105%, 0); transition: transform 900ms var(--ease-out); }
.pipeline.is-pinned .is-current .pipeline__title span { transform: none; }
.pipeline.is-pinned .pipeline__proofs { max-height: 34vh; overflow-y: auto; overscroll-behavior: contain; }

.arch { margin-top: clamp(80px, 10vw, 140px); padding-top: 24px; border-top: 1px solid var(--line); row-gap: 28px; }
/* Titre du bloc : même police, même graisse, même couleur ; plus grand,
   pour qu'il se repère d'un coup d'œil. */
.arch__label { grid-column: 1 / span 3; margin: 0; font-size: clamp(22px, 2vw, 30px); line-height: 1.15; color: var(--text-2); text-wrap: balance; }
.arch__flow { grid-column: 4 / span 9; display: flex; flex-wrap: wrap; align-items: center; row-gap: 12px; font-size: 15px; }
.arch__node { padding: 14px 18px; border: 1px solid var(--line-strong); white-space: nowrap; }
.arch__node--core { background: var(--solid); color: var(--on-solid); border-color: var(--solid); }
.arch__link { position: relative; width: clamp(24px, 3vw, 48px); height: 1px; background: var(--line-strong); overflow: hidden; }
.arch__link::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: var(--text);
  animation: packet 2.4s var(--ease-in-out) infinite;
}
@keyframes packet { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.arch__notes { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); font-size: 15px; color: var(--text-2); }
@media (max-width: 1023.98px) { .arch__label, .arch__flow, .arch__notes { grid-column: 1 / -1; } .arch__notes { grid-template-columns: 1fr; } }

/* Terminal. Épinglé (data-terminal.is-pinned) : chaque portion de
   défilement ouvre l'onglet suivant, le soulignement de l'onglet se remplit
   avec le défilement et les lignes s'écrivent une à une. */
.terminal-scroll { position: relative; margin-top: clamp(64px, 8vw, 120px); }
.js .terminal-scroll.is-pinned { height: calc(var(--count) * 55vh + 100vh); height: calc(var(--count) * 55svh + 100svh); }
.terminal-scroll.is-pinned .terminal-scroll__sticky {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  height: 100svh;
  padding-top: calc(var(--header-h) + 8px);
}
.terminal { row-gap: 24px; align-items: center; }
.terminal__intro { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 14px; }
.terminal__count, .terminal__hint { display: none; }
.terminal-scroll.is-pinned .terminal__count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: clamp(64px, 7vw, 112px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.terminal__count-total { font-size: 0.24em; letter-spacing: 0; color: var(--text-2); }
.terminal-scroll.is-pinned .terminal__hint { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--text-2); }
.terminal__hint .icon { width: 15px; height: 15px; animation: hint-nudge 1.8s var(--ease-out) infinite; }
@keyframes hint-nudge { 0%, 100% { transform: none; } 50% { transform: translate3d(0, 4px, 0); } }
.terminal__window { grid-column: 6 / span 7; min-width: 0; overflow: hidden; background: #070708; color: #e4e4e1; border: 1px solid rgb(236 236 234 / 0.12); border-radius: var(--radius); box-shadow: 0 50px 100px -60px rgb(0 0 0 / 0.9); }
.terminal__tabs { display: flex; gap: 22px; padding: 0 20px; border-bottom: 1px solid rgb(236 236 234 / 0.12); overflow-x: auto; scrollbar-width: none; }
.terminal__tabs button { position: relative; padding: 14px 0; margin-bottom: -1px; border: 0; border-bottom: 1px solid transparent; background: none; color: #a3a39f; font-size: 14px; white-space: nowrap; transition: color 300ms; }
.terminal__tabs button[aria-selected="true"] { color: #ececea; border-bottom-color: #ececea; }
.terminal__tabs button::after { content: ''; position: absolute; inset: auto 0 -1px; height: 2px; background: #ececea; transform: scaleX(var(--fill, 0)); transform-origin: 0 50%; }
[dir="rtl"] .terminal__tabs button::after { transform-origin: 100% 50%; }
.terminal-scroll.is-pinned .terminal__tabs button[aria-selected="true"] { border-bottom-color: rgb(236 236 234 / 0.24); }
.terminal-scroll:not(.is-pinned) .terminal__tabs button::after { display: none; }
/* Les panneaux partagent une cellule : la fenêtre garde sa hauteur d'un
   onglet à l'autre (pas de saut de mise en page). */
.terminal__panels { display: grid; }
.terminal__panels > .terminal__body { grid-area: 1 / 1; min-width: 0; }
.terminal__panels > .terminal__body[hidden] { display: block !important; visibility: hidden; }
.terminal__body { padding: 20px 22px 24px; overflow-x: auto; direction: ltr; text-align: left; }
.terminal__body pre { margin: 0; font-family: var(--font-mono); font-size: 14px; line-height: 1.75; }
/* Couleurs de Git Bash (mintty, palette par défaut) : la seule exception à
   la palette graphite du site, comme dans un vrai terminal. */
.terminal__body {
  --gb-fg: #bfbfbf;
  --gb-green: #3fd23f;
  --gb-magenta: #d63ad6;
  --gb-yellow: #d2c940;
  --gb-cyan: #3fc7d2;
  color: var(--gb-fg);
}
.terminal__body .ps1-user { color: var(--gb-green); }
.terminal__body .ps1-sys { color: var(--gb-magenta); }
.terminal__body .ps1-path { color: var(--gb-yellow); }
.terminal__body .ps1-branch { color: var(--gb-cyan); }
.terminal__body .ps { color: #ffffff; }
.terminal__body .c { color: #7f7f7f; }
.terminal__body .k { color: #ffffff; }
.terminal__body .v { color: var(--gb-fg); }
.terminal-scroll.is-pinned .terminal__body { padding: 26px 28px 30px; }
.terminal-scroll.is-pinned .terminal__body pre { font-size: 15px; line-height: 1.8; }
.term-line { display: inline-block; vertical-align: top; }
.js .terminal__body .term-line { clip-path: inset(0 100% 0 0); }
.js .terminal__body.is-typing .term-line { animation: term-type 640ms steps(26, end) forwards; animation-delay: calc(140ms + var(--l, 0) * 260ms); }
/* L'invite s'affiche d'un coup, comme dans un vrai terminal ; seules les
   commandes se tapent. */
.js .terminal__body.is-typing .term-line--ps1 { animation-duration: 1ms; animation-timing-function: linear; }
@keyframes term-type { to { clip-path: inset(0 0 0 0); } }
.terminal__caret { display: inline-block; width: 0.6em; height: 1.15em; vertical-align: -0.2em; background: #ececea; animation: caret-blink 1.05s steps(1, end) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
.terminal__note { margin: 0; padding: 12px 22px; border-top: 1px solid rgb(236 236 234 / 0.12); font-size: 13px; color: #a3a39f; }
@media (max-width: 1023.98px) {
  .terminal__intro, .terminal__window { grid-column: 1 / -1; }
  .terminal-scroll.is-pinned .terminal__intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 20px; row-gap: 10px; }
  .terminal-scroll.is-pinned .terminal__intro > :not(.terminal__count) { grid-column: 1; }
  .terminal-scroll.is-pinned .terminal__count { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0; font-size: 56px; }
  .terminal-scroll.is-pinned .terminal__hint { display: none; }
}
@media (max-width: 767.98px) { .terminal-scroll.is-pinned .terminal-scroll__sticky { padding-bottom: calc(58px + env(safe-area-inset-bottom)); } }

/* Projets — vitrine. Par défaut (sans script, mobile, mouvement réduit) :
   des cartes empilées. Écran large avec script : la section est épinglée et
   chaque écran de défilement fait entrer le projet suivant. */
.section--showcase { padding-bottom: clamp(80px, 9vw, 140px); }
.showcase { position: relative; margin-top: clamp(40px, 5vw, 72px); }
.showcase__slides { margin: 0; padding: 0 var(--gutter); list-style: none; display: flex; flex-direction: column; gap: clamp(56px, 8vw, 96px); }
.showcase__slide { display: grid; gap: 18px; }
.showcase__meta { margin: 0 0 10px; font-size: var(--fs-small); color: var(--text-2); }
.showcase__title { margin: 0; font-family: var(--font-display); font-stretch: 112%; font-weight: 600; font-size: var(--fs-2); line-height: 0.95; letter-spacing: -0.045em; }
.showcase__title span { display: block; }
.showcase__frame { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); background: #070708; box-shadow: 0 60px 120px -60px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.07); }
.showcase__frame > .media, .showcase__frame > .cover { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
/* Photo montrée en entier (vitrine, en-tête des pages de détail) : le cadre
   réserve la place ; la photo y prend la plus grande taille possible à ses
   propres proportions (--ratio, lu au chargement par le script ; 16/10 en
   attendant), coins arrondis et ombre sur la photo elle-même. Jamais
   recadrée, jamais déformée. Sans photo, la couverture typographique garde
   son cadre sombre. */
.showcase__frame.has-photo { overflow: visible; background: none; box-shadow: none; }
.showcase__frame.has-photo > .media,
.case-hero__media.is-photo .case-hero__reveal { container-type: size; display: grid; place-items: center; overflow: visible; background: none; }
.showcase__frame.has-photo > .media img,
.case-hero__media.is-photo .case-hero__picture img {
  width: min(100cqw, 100cqh * var(--ratio, 1.6));
  height: auto;
  max-width: none;
  aspect-ratio: var(--ratio, 1.6);
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 60px 120px -60px rgb(0 0 0 / 0.9);
}
.showcase__text { display: flex; flex-direction: column; gap: 16px; max-width: 46ch; }
.showcase__excerpt { margin: 0; font-size: var(--fs-lead); line-height: 1.45; text-align: start; }
.showcase__role { margin: 0; font-size: var(--fs-small); }
.showcase__links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 6px 0 0; }
.showcase__backdrop, .showcase__hud, .showcase__thumbs { display: none; }
/* Logos de technologies (sprite tech.svg) : monochromes, suivent la couleur du texte. */
.tech-logo { flex: none; width: 1.05em; height: 1.05em; fill: currentColor; }
.tech-logo + .tech-logo { margin-inline-start: -2px; }
.pill-list li { display: inline-flex; align-items: center; gap: 7px; }
.pill-list li img { width: 16px; height: 16px; object-fit: contain; }
.proof__tool { display: inline-flex; align-items: center; gap: 9px; }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pill-list li { padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: 13.5px; line-height: 1.3; }
.index-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 32px; margin-top: clamp(72px, 9vw, 140px); padding-bottom: 22px; }
.index-head .filters { margin: 0; }

/* Couverture typographique, déclinaisons vitrine et miniature. */
.cover--showcase { padding: clamp(24px, 3vw, 44px); }
.cover--showcase .cover__art { inset: -16% -10% auto -10%; width: 120%; opacity: 0.85; }
.cover--showcase .cover__title { font-size: clamp(30px, 3.4vw, 60px); max-width: 12ch; }
.cover--showcase .cover__kicker { font-size: 14px; }
.showcase__slide:nth-child(3n + 2) .cover--showcase .cover__art { inset: -30% -30% auto -6%; width: 140%; transform: rotate(-14deg); }
.showcase__slide:nth-child(3n) .cover--showcase .cover__art { inset: auto -18% -36% -22%; width: 150%; transform: rotate(9deg) scaleX(-1); }
.cover--thumb { padding: 0; }
.cover--thumb .cover__art { inset: -30%; width: 160%; }

.js .showcase.is-pinned { height: calc(var(--count) * 100vh); height: calc(var(--count) * 100svh); margin-top: clamp(24px, 3vw, 48px); }
.showcase.is-pinned .showcase__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.showcase.is-pinned .showcase__backdrop { display: block; position: absolute; inset: 0; }
.showcase__backdrop-item {
  position: absolute;
  inset: -12%;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
  background: radial-gradient(40% 46% at 50% 54%, rgb(242 240 236 / 0.07), transparent 72%);
}
.showcase__backdrop-item:nth-child(3n + 2) { background: radial-gradient(44% 50% at 38% 58%, rgb(242 240 236 / 0.06), transparent 70%), radial-gradient(30% 40% at 70% 30%, rgb(242 240 236 / 0.05), transparent 70%); }
.showcase__backdrop-item:nth-child(3n) { background: radial-gradient(46% 52% at 62% 48%, rgb(242 240 236 / 0.08), transparent 72%); }
.showcase__backdrop-item.is-current { opacity: 1; }
/* Arrière-plan : l'image principale du projet, très floutée ; à défaut, la
   couverture du site, cadrée différemment pour chaque projet. */
.showcase__backdrop-media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.showcase__backdrop-media img, img.showcase__backdrop-media { width: 100%; height: 100%; object-fit: cover; }
.showcase__backdrop-media { filter: blur(14px) saturate(1.1) brightness(0.85); transform: scale(1.08); }
.showcase__backdrop-item:nth-child(3n + 2) .showcase__backdrop-art { transform: scale(1.5) rotate(-18deg) translate3d(-6%, 4%, 0); }
.showcase__backdrop-item:nth-child(3n) .showcase__backdrop-art { transform: scale(1.35) rotate(14deg) scaleX(-1) translate3d(5%, -3%, 0); }
/* Voiles là où se trouvent les textes (côtés, bas) : le flou reste visible
   au centre et autour de la photo, les textes restent lisibles. */
.showcase__backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(11 11 13 / 0.68), rgb(11 11 13 / 0.14) 32%, rgb(11 11 13 / 0.14) 68%, rgb(11 11 13 / 0.68)), linear-gradient(0deg, rgb(11 11 13 / 0.5), transparent 26%); }
@media (max-width: 1023.98px) {
  .showcase__backdrop::after { background: linear-gradient(180deg, rgb(11 11 13 / 0.62), rgb(11 11 13 / 0.16) 30%, rgb(11 11 13 / 0.16) 58%, rgb(11 11 13 / 0.78)); }
}
.showcase.is-pinned .showcase__head,
.showcase.is-pinned .showcase__text { text-shadow: 0 1px 22px rgb(0 0 0 / 0.38); }
.showcase__backdrop-item { transform: scale(1.06); transition: opacity 1100ms var(--ease-out), transform 1600ms var(--ease-out); }
.showcase__backdrop-item.is-current { transform: none; }

/* Survol du visuel : l'image suit légèrement le curseur, une pastille
   « Voir l'étude de cas » l'accompagne. */
.showcase__frame { cursor: pointer; }
.showcase__cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  padding: 14px;
  border-radius: 50%;
  background: #f2f0ec;
  color: #0b0b0d;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(calc(var(--cx, 50%) - 50%), calc(var(--cy, 50%) - 50%), 0) scale(0.4);
  transition: opacity 300ms var(--ease-out), transform 500ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .showcase__frame:hover .showcase__cursor { opacity: 1; transform: translate3d(calc(var(--cx, 50%) - 64px), calc(var(--cy, 50%) - 64px), 0) scale(1); }
  .showcase.is-pinned .is-current .showcase__frame:hover > .media,
  .showcase.is-pinned .is-current .showcase__frame:hover > .cover { transform: scale(1.07) translate3d(calc(var(--px, 0) * -16px), calc(var(--py, 0) * -12px), 0); }
}

.showcase.is-pinned .showcase__slides { position: absolute; inset: 0; padding: 0; display: block; }
.showcase.is-pinned .showcase__slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: center;
  padding: calc(var(--header-h) + 12px) calc(var(--gutter) + 96px) 64px var(--gutter);
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 900ms;
}
.showcase.is-pinned .showcase__slide.is-current { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.showcase.is-pinned .showcase__head { grid-column: 1 / span 3; align-self: center; }
.showcase.is-pinned .showcase__visual { grid-column: 4 / span 6; }
.showcase.is-pinned .showcase__text { grid-column: 10 / span 3; align-self: center; }
.showcase.is-pinned .showcase__title { font-size: clamp(34px, 3.3vw, 60px); overflow: hidden; padding-bottom: 0.08em; }
.showcase.is-pinned .showcase__frame { aspect-ratio: auto; height: min(64svh, 40vw); }

/* Entrées et sorties : le sens suit le défilement (data-direction). */
.showcase.is-pinned .showcase__title span { transform: translate3d(0, 110%, 0); transition: transform 1000ms var(--ease-out); }
.showcase.is-pinned .showcase__meta,
.showcase.is-pinned .showcase__text > * { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
.showcase.is-pinned .showcase__frame { clip-path: inset(100% 0 0 0 round var(--radius-lg)); transition: clip-path 1100ms var(--ease-out); }
.showcase.is-pinned .showcase__frame > * { transform: scale(1.18); transition: transform 1400ms var(--ease-out); }
.showcase.is-pinned[data-direction="up"] .showcase__title span { transform: translate3d(0, -110%, 0); }
.showcase.is-pinned[data-direction="up"] .showcase__frame { clip-path: inset(0 0 100% 0 round var(--radius-lg)); }
.showcase.is-pinned .is-current .showcase__title span,
.showcase.is-pinned .is-current .showcase__meta,
.showcase.is-pinned .is-current .showcase__text > * { opacity: 1; transform: none; }
.showcase.is-pinned .is-current .showcase__text > *:nth-child(2) { transition-delay: 60ms; }
.showcase.is-pinned .is-current .showcase__text > *:nth-child(3) { transition-delay: 120ms; }
.showcase.is-pinned .is-current .showcase__text > *:nth-child(4) { transition-delay: 180ms; }
.showcase.is-pinned .is-current .showcase__frame { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
.showcase.is-pinned .is-current .showcase__frame.has-photo { clip-path: inset(-12% round var(--radius-lg)); }
/* Photo entière : ni pré-zoom ni zoom au défilement (elle déborderait de son
   cadre) ; l'entrée par découpe suffit. */
.showcase.is-pinned .showcase__frame.has-photo > *,
.showcase.is-pinned .is-current .showcase__frame.has-photo > * { transform: none; }
.showcase.is-pinned .is-current .showcase__frame > * { transform: scale(var(--frame-scale, 1)); }
.showcase.is-pinned .is-leaving .showcase__frame { clip-path: inset(0 0 0 0 round var(--radius-lg)); opacity: 0; transform: scale(0.94); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }

.showcase.is-pinned .showcase__hud {
  position: absolute;
  inset: auto auto 34px var(--gutter);
  display: flex;
  align-items: center;
  gap: 10px;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--text-2);
}
.showcase__count { position: relative; display: grid; place-items: center; width: 52px; height: 52px; color: var(--text); font-weight: 600; }
.showcase__count svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.showcase__count circle { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.showcase__count .showcase__ring { stroke: var(--text); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: var(--ring, 1); stroke-linecap: round; }
.showcase.is-pinned .showcase__thumbs {
  position: absolute;
  inset: 50% var(--gutter) auto auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateY(-50%);
}
.showcase__thumb {
  position: relative;
  width: 64px;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-sm);
  background: #070708;
  opacity: 0.42;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.showcase__thumb > * { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.showcase__thumb:hover { opacity: 0.8; }
.showcase__thumb.is-current { opacity: 1; transform: scale(1.06); box-shadow: 0 0 0 2px var(--text); }
[dir="rtl"] .showcase.is-pinned .showcase__hud { inset: auto var(--gutter) 34px auto; }
[dir="rtl"] .showcase.is-pinned .showcase__thumbs { inset: 50% auto auto var(--gutter); }
[dir="rtl"] .showcase.is-pinned .showcase__slide { padding-inline: var(--gutter) calc(var(--gutter) + 96px); }
/* Tablette et mobile en portrait : la même vitrine épinglée, en colonne
   (titre, image, texte) ; les mêmes entrées et sorties qu'à l'ordinateur. */
@media (max-width: 1023.98px) {
  .showcase.is-pinned .showcase__slide,
  [dir="rtl"] .showcase.is-pinned .showcase__slide {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    align-items: start;
    row-gap: clamp(14px, 2.4svh, 24px);
    padding: calc(var(--header-h) + 4px) var(--gutter) calc(92px + var(--dock-space, 0px));
  }
  .showcase.is-pinned .showcase__head,
  .showcase.is-pinned .showcase__visual,
  .showcase.is-pinned .showcase__text { grid-column: 1; align-self: start; }
  .showcase.is-pinned .showcase__title { font-size: clamp(30px, 7.6vw, 54px); }
  .showcase.is-pinned .showcase__frame { width: 100%; height: auto; aspect-ratio: 16 / 10; max-height: 38svh; }
  .showcase.is-pinned .showcase__text { max-width: 60ch; gap: 12px; }
  .showcase.is-pinned .showcase__excerpt { font-size: 16.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .showcase.is-pinned .showcase__text .pill-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .showcase.is-pinned .showcase__text .pill-list::-webkit-scrollbar { display: none; }
  .showcase.is-pinned .showcase__text .pill-list li { flex: none; }
  .showcase.is-pinned .showcase__thumbs { display: none; }
  .showcase.is-pinned .showcase__hud { inset: auto auto calc(22px + var(--dock-space, 0px)) var(--gutter); }
  [dir="rtl"] .showcase.is-pinned .showcase__hud { inset: auto var(--gutter) calc(22px + var(--dock-space, 0px)) auto; }
}
@media (max-width: 599.98px) {
  .showcase.is-pinned .showcase__links { margin-top: 0; }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .showcase__slide { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .showcase__visual { grid-column: 1 / -1; grid-row: 1; }
}

/* Parcours */
.journey__block + .journey__block { margin-top: clamp(80px, 9vw, 140px); }
.journey__label { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; margin-bottom: 18px; }
.edu-list { list-style: none; border-top: 1px solid var(--line); }
.edu-list li a, .edu-list li > div {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  padding-block: 22px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  align-items: baseline;
}
.edu-list .period { grid-column: span 2; font-size: var(--fs-small); color: var(--text-2); font-variant-numeric: tabular-nums; }
.edu-list .title { grid-column: span 6; font-family: var(--font-display); font-stretch: 112%; font-weight: 600; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.035em; line-height: 1.1; }
.edu-list .org { grid-column: span 4; font-size: 15px; color: var(--text-2); }
.edu-list a:hover .title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
@media (max-width: 767.98px) {
  .edu-list .period, .edu-list .title, .edu-list .org { grid-column: 1 / -1; }
}
/* Expériences : cartes empilées. Sur grand écran (et assez haut), chaque
   carte s'arrête sous l'en-tête et la suivante vient la recouvrir ; la carte
   recouverte recule légèrement (--covered, posé par le script). */
.deck { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 20px; }
.deck__card {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 22px;
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  box-shadow: 0 -30px 70px -50px rgb(0 0 0 / 0.45);
  transform-origin: 50% 0;
  transform: scale(calc(1 - var(--covered, 0) * 0.05));
}
.deck__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #0b0b0d;
  opacity: calc(var(--covered, 0) * 0.28);
  pointer-events: none;
}
.deck__head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--text-2); font-variant-numeric: tabular-nums; }
/* Carte reliée à son étude de cas : le lien du titre couvre toute la carte
   (aucun bouton ajouté) ; les liens internes (site, etc.) restent au-dessus. */
.deck__title a { color: inherit; text-decoration: none; }
.deck__title a::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.deck__title a:focus-visible { outline: none; }
.deck__card.is-linked:has(.deck__title a:focus-visible) { outline: 2px solid var(--text); outline-offset: 4px; }
.deck__links, .deck__side .pill-list { position: relative; z-index: 2; }
.deck__card.is-linked { cursor: pointer; transition: border-color 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .deck__card.is-linked:hover { border-color: var(--line-strong); box-shadow: 0 -30px 70px -50px rgb(0 0 0 / 0.45), 0 30px 60px -40px rgb(0 0 0 / 0.35); }
  .deck__card.is-linked:hover .deck__title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; }
}
.deck__index { font-family: var(--font-display); font-stretch: 112%; font-weight: 600; font-size: clamp(44px, 4.4vw, 72px); line-height: 0.8; letter-spacing: -0.05em; color: var(--text); }
.deck__main { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 10px; }
.deck__title { margin: 0; font-family: var(--font-display); font-stretch: 112%; font-weight: 600; font-size: var(--fs-3); line-height: 1.02; letter-spacing: -0.038em; }
.deck__org { margin: 0; color: var(--text-2); }
.deck__lead { margin: 10px 0 0; font-size: var(--fs-lead); line-height: 1.45; }
.deck__side { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 18px; }
.deck__side p { margin: 0; }
.deck__missions ul { margin: 0; padding-inline-start: 1.1em; }
.deck__links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; }
.deck__missions li + li { margin-top: 6px; }
.deck__missions li:nth-child(n + 5) { display: none; }
@media (max-width: 1023.98px) {
  .deck__main, .deck__side { grid-column: 1 / -1; }
}
@media (min-width: 1024px) and (min-height: 720px) {
  .deck { padding-bottom: 12vh; }
  .deck__item { position: sticky; top: calc(var(--header-h) + 12px + var(--i) * 14px); }
}
/* Tablette et mobile : chaque carte se redresse en entrant (relief, montée)
   et recule en sortant par le haut. Valeurs posées par le script. */
@media (max-width: 1023.98px) {
  .has-depth .deck__card {
    transform-origin: 50% 0;
    transform: perspective(1400px) translate3d(0, calc((1 - var(--in, 1)) * 56px), 0) rotateX(calc((1 - var(--in, 1)) * 14deg)) scale(calc(1 - (1 - var(--in, 1)) * 0.06 - var(--out, 0) * 0.05));
    opacity: calc(1 - (1 - var(--in, 1)) * 0.55 - var(--out, 0) * 0.3);
  }
  .has-depth .pipeline:not(.is-pinned) .pipeline__stage {
    transform-origin: 50% 0;
    transform: perspective(1400px) translate3d(0, calc((1 - var(--in, 1)) * 44px), 0) rotateX(calc((1 - var(--in, 1)) * 11deg)) scale(calc(1 - (1 - var(--in, 1)) * 0.05));
    opacity: calc(1 - (1 - var(--in, 1)) * 0.55);
  }
}
/* Écrans tactiles : ce que la souris révèle au survol, le défilement le
   révèle au passage au centre de l'écran (.is-in-focus). */
@media (hover: none), (max-width: 1023.98px) {
  .has-depth .tool-group { --rx: calc(var(--mid, 0) * 7deg); }
  .has-depth .tool-group.is-in-focus { border-color: var(--line-strong); box-shadow: 0 30px 60px -36px rgb(0 0 0 / 0.45); }
  .has-depth .tool-group.is-in-focus .tool-group__light { opacity: 1; }
  .has-depth .tool-group.is-in-focus .tool { animation: tool-wave 900ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 70ms); }
  .has-depth .case-hero__frame,
  .has-depth[dir="rtl"] .case-hero__frame { transform-origin: 50% 50%; transform: perspective(1200px) rotateX(calc(var(--mid, 0) * -9deg)) scale(calc(1 - var(--out, 0) * 0.05)); transition: transform 300ms linear; }
}
@media (hover: none) {
  .has-depth .service.is-in-focus { color: var(--on-solid); }
  .has-depth .service.is-in-focus .service__fill { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
  .has-depth .service.is-in-focus .service__num,
  .has-depth .service.is-in-focus .service__text { color: color-mix(in srgb, var(--on-solid) 72%, transparent); }
  .has-depth .service.is-in-focus .service__title { transform: translate3d(10px, 0, 0); }
  .has-depth[dir="rtl"] .service.is-in-focus .service__title { transform: translate3d(-10px, 0, 0); }
}

/* Galeries 3D (diplômes et certifications, journal). La scène épinglée
   n'apparaît qu'avec WebGL sur grand écran ; sinon la version HTML de repli
   (cartes) reste affichée. */
.credentials__title { margin: 0 0 clamp(28px, 4vw, 56px); }
.hall { position: relative; }
.hall__scene { position: relative; height: calc(var(--count, 3) * 72vh + 100vh); }
.hall__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; border-radius: var(--radius-lg); background: #0b0b0d; color: #f2f0ec; }
/* Voile à gauche (à droite en arabe) : la légende reste lisible sur le relief. */
.hall__sticky::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(11 11 13 / 0.8), rgb(11 11 13 / 0.3) 30%, transparent 42%); }
[dir="rtl"] .hall__sticky::after { background: linear-gradient(270deg, rgb(11 11 13 / 0.8), rgb(11 11 13 / 0.3) 30%, transparent 42%); }
.hall__caption {
  position: absolute;
  z-index: 2;
  inset-inline-start: clamp(28px, 4vw, 72px);
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: min(32vw, 440px);
  transform: translate3d(0, -50%, 0);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.hall__caption.is-changing { opacity: 0; transform: translate3d(0, calc(-50% + 12px), 0); transition-duration: 160ms; }
.hall.is-portrait .hall__sticky::after,
[dir="rtl"] .hall.is-portrait .hall__sticky::after { background: linear-gradient(0deg, rgb(11 11 13 / 0.94) 0%, rgb(11 11 13 / 0.72) 30%, transparent 50%); }
.hall.is-portrait .hall__caption { inset: auto clamp(18px, 5vw, 40px) calc(clamp(22px, 4svh, 40px) + var(--dock-space, 0px)); top: auto; width: auto; gap: 10px; transform: none; }
.hall.is-portrait .hall__caption.is-changing { transform: translate3d(0, 12px, 0); }
.hall.is-portrait .hall__caption-title { font-size: clamp(26px, 6.6vw, 40px); }
.hall.is-portrait .hall__caption-text { font-size: 15px; -webkit-line-clamp: 3; }
.hall.is-portrait .hall__caption-steps { margin-top: 10px; }
.hall.is-portrait .hall__hint { inset: 18px var(--gutter) auto; }
.hall__caption-meta { display: flex; gap: 14px; margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(242 240 236 / 0.62); }
.hall__caption-title { margin: 0; font-family: var(--font-display); font-stretch: 112%; font-weight: 600; font-size: clamp(30px, 2.9vw, 46px); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.hall__caption-sub { margin: -4px 0 0; font-size: 15.5px; color: rgb(242 240 236 / 0.72); }
.hall__caption-text { margin: 0; font-size: 16px; line-height: 1.55; color: rgb(242 240 236 / 0.78); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.hall__caption-sub:empty, .hall__caption-text:empty { display: none; }
.hall__caption-cta { --btn-bg: #f2f0ec; --btn-fg: #0b0b0d; --btn-border: #f2f0ec; margin-top: 8px; }
.hall__caption-cta:hover { color: #f2f0ec; }
.hall__caption-cta::before { background: #0b0b0d; }
.hall__caption-steps { display: flex; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
.hall__caption-steps li { width: 26px; height: 3px; border-radius: 3px; background: rgb(242 240 236 / 0.22); transition: background-color 300ms, width 400ms var(--ease-out); }
.hall__caption-steps li.is-done { background: rgb(242 240 236 / 0.55); }
.hall__caption-steps li.is-current { width: 44px; background: #f2f0ec; }
.hall__stage, .hall__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hall__stage { border-radius: inherit; }
.hall__stage:focus-visible { outline: 2px solid #f2f0ec; outline-offset: -6px; }
.hall__stage canvas { cursor: default; }
.hall__stage.is-hovering canvas { cursor: pointer; }
.hall .hall__hint { position: absolute; z-index: 2; inset: auto var(--gutter) 26px; margin: 0; font-size: 13px; letter-spacing: 0.04em; color: rgb(242 240 236 / 0.6); text-align: center; pointer-events: none; }
.hall__more { margin: 22px 0 0; }

/* Repli : cartes de distinctions inclinables. */
.credential-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.credential-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 240px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}
.credential-card:nth-child(3n + 2) { background: #1d1d21; color: #f2f0ec; border-color: transparent; --text-2: #a3a39f; }
.credential-card__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.credential-card__meta { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.credential-card__title { margin: 6px 0 0; font-family: var(--font-display); font-stretch: 112%; font-weight: 600; font-size: var(--fs-4); line-height: 1.1; letter-spacing: -0.03em; }
.credential-card__issuer { margin: 0; font-size: 14.5px; color: var(--text-2); }
.credential-card__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; color: inherit; font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .credential-card:hover { transform: translateY(-6px) rotate(-0.6deg); box-shadow: 0 30px 60px -36px rgb(0 0 0 / 0.45); } }

.cert-slider .fade__stage { aspect-ratio: 4 / 3; }
.cert-card { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 24px; align-items: center; }
.cert-card__media { grid-column: 1 / span 6; }
.cert-card__body { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1023.98px) { .cert-card__media, .cert-card__body { grid-column: 1 / -1; } }

/* Journal */
.post-card { display: flex; flex-direction: column; gap: 16px; color: inherit; text-decoration: none; }
.post-card .media { aspect-ratio: 4 / 3; }
.post-card .media img { transition: transform 1200ms var(--ease-out); }
.post-card:hover .media img { transform: scale(1.04); }
.post-card__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--text-2); }
.post-card__title { font-family: var(--font-display); font-stretch: 112%; font-weight: 600; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.08; letter-spacing: -0.035em; }
.post-card__excerpt { color: var(--text-2); font-size: 16px; line-height: 1.55; }
.doc-cover { display: grid; place-items: center; height: 100%; padding: 24px; background: #0b0b0d; color: #ececea; }
.doc-cover span { font-family: var(--font-display); font-stretch: 112%; font-size: 40px; font-weight: 600; letter-spacing: -0.04em; }

/* Contact */
.contact__grid { row-gap: 56px; }
.contact__intro { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 28px; }
.contact__mail {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: clamp(24px, 2.5vw, 40px);
  letter-spacing: -0.04em;
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.contact__channels { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.contact__channels a, .contact__channels > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-size: 16px;
}
.contact__channels span { color: var(--text-2); font-size: 14px; }
.contact__form { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px var(--col-gap); align-content: start; }
.contact__form .field--wide, .contact__form .form-actions, .contact__form .form-status, .contact__form .captcha { grid-column: 1 / -1; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.form-actions p { font-size: 13px; color: var(--text-2); max-width: 46ch; }
@media (max-width: 1023.98px) { .contact__intro, .contact__form { grid-column: 1 / -1; } }
@media (max-width: 599.98px) { .contact__form { grid-template-columns: 1fr; } }

/* Pages de détail (études de cas) */
.case-hero { position: relative; padding-top: calc(var(--header-h) + 40px); padding-bottom: clamp(48px, 6vw, 80px); overflow: hidden; isolation: isolate; }
.case-hero__art { position: absolute; z-index: -1; inset-block-start: 8%; inset-inline-end: -8%; width: min(58vw, 820px); opacity: 0.85; pointer-events: none; }
.case-hero__title { margin-top: clamp(80px, 14vh, 180px); }
.case-hero__lead { margin-top: 28px; max-width: 760px; }
.case-meta { margin-top: clamp(40px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--line); row-gap: 20px; }
.case-meta > div { grid-column: span 3; font-size: 15px; }
.case-meta dt { color: var(--text-2); font-size: 14px; }
.case-meta dd { margin: 6px 0 0; }
@media (max-width: 767.98px) { .case-meta > div { grid-column: span 6; } .case-hero__art { width: 110vw; inset-inline-end: -30vw; opacity: 0.5; } }
.case-hero__text { min-width: 0; }
/* En-tête avec la photo principale : titre à gauche, photo à droite, posée
   en léger relief (elle suit le pointeur et se redresse au survol). */
.case-hero--media .case-hero__top {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: clamp(32px, 5vw, 88px);
  margin-top: clamp(48px, 8vh, 112px);
}
.case-hero--media .case-hero__title { margin-top: 0; font-size: clamp(42px, 5.4vw, 92px); }
.case-hero__media { margin: 0; min-width: 0; perspective: 1400px; }
.case-hero__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
  background: #1b1b1f;
  color: inherit;
  cursor: zoom-in;
  isolation: isolate;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 70px 120px -60px rgb(0 0 0 / 0.85);
  transform: rotateX(var(--rx, 3deg)) rotateY(var(--ry, -8deg));
  transform-origin: 100% 50%;
  transition: transform 900ms var(--ease-out), box-shadow 900ms var(--ease-out);
}
[dir="rtl"] .case-hero__frame { transform: rotateX(var(--rx, 3deg)) rotateY(var(--ry, 8deg)); transform-origin: 0 50%; }
.case-hero__frame::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, rgb(255 255 255 / 0.10), transparent 38%); pointer-events: none; }
.case-hero__reveal, .case-hero__picture, .case-hero__picture img { display: block; width: 100%; height: 100%; }
/* Photo : entière, à ses proportions, coins arrondis, posée dans le cadre
   (qui ne sert plus que de zone : ni fond, ni reflet). */
.case-hero__media.is-photo .case-hero__frame { overflow: visible; background: none; box-shadow: none; }
.case-hero__media.is-photo .case-hero__frame::after,
.case-hero__media.is-photo .pgallery__chip { display: none; }
.case-hero__media.is-photo .case-hero__picture { display: grid; place-items: center; width: 100%; height: 100%; transform: translate3d(0, var(--py, 0%), 0); }
/* Diplôme, certificat : la pièce entière, sur une feuille claire. */
.case-hero__media.is-document .case-hero__frame { padding: clamp(14px, 1.8vw, 24px); background: #f3f3f4; }
.case-hero__media.is-document .case-hero__picture { transform: none; }
.case-hero__media.is-document .case-hero__picture img { object-fit: contain; }
.case-hero__frame:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) {
  .case-hero__frame:hover { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 50px 100px -50px rgb(0 0 0 / 0.9); }
  .case-hero__frame:hover .pgallery__chip { opacity: 1; transform: none; }
}
@media (max-width: 1023.98px) {
  .case-hero--media .case-hero__top { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .case-hero__frame, [dir="rtl"] .case-hero__frame { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .case-hero__frame, [dir="rtl"] .case-hero__frame { transform: none; transition: none; }
}
.case-body { padding-block: clamp(72px, 9vw, 130px); row-gap: 48px; }
.toc { grid-column: 1 / span 3; align-self: start; position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; font-size: 15px; }
.toc h2 { font-size: 14px; font-weight: 500; color: var(--text-2); padding-bottom: 10px; }
.toc a { padding: 10px 0; border-top: 1px solid var(--line); color: var(--text-2); text-decoration: none; transition: color var(--dur-fast); }
.toc a.level-3 { padding-inline-start: 14px; font-size: 14px; }
.toc a:hover, .toc a[aria-current="true"] { color: var(--text); }
.case-main { grid-column: 5 / span 7; min-width: 0; display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px); }
.case-main--wide { grid-column: 1 / span 8; }
.case-aside { grid-column: 10 / span 3; display: flex; flex-direction: column; gap: 28px; }
.case-band { padding: clamp(24px, 3vw, 40px); background: var(--solid); color: var(--on-solid); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.case-band small { display: block; font-size: 14px; opacity: 0.7; }
@media (max-width: 1023.98px) {
  .toc { position: static; grid-column: 1 / -1; }
  .case-main, .case-main--wide, .case-aside { grid-column: 1 / -1; }
}
@media (max-width: 599.98px) { .case-band { grid-template-columns: 1fr; } }
.case-nav { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.case-nav a { display: flex; flex-direction: column; gap: 10px; padding: clamp(28px, 4vw, 48px) var(--gutter); color: inherit; text-decoration: none; }
.case-nav a + a, .case-nav span + a { border-inline-start: 1px solid var(--line); align-items: flex-end; text-align: end; }
.case-nav small { font-size: 14px; color: var(--text-2); }
.case-nav strong { font-family: var(--font-display); font-stretch: 112%; font-size: clamp(24px, 3vw, 44px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.case-nav a:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
/* Photos d'un projet : couverture en grand (parallaxe), puis paires en
   largeurs inégales qui alternent. Dévoilement au défilement, zoom lent au
   survol, ouverture dans la visionneuse. */
.pcover { grid-column: 1 / -1; margin: 0 0 clamp(28px, 4vw, 56px); }
.pcover__frame, .pgallery__tile {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-sunk);
  color: inherit;
  cursor: zoom-in;
  isolation: isolate;
}
.pcover__frame { aspect-ratio: 16 / 9; box-shadow: 0 60px 120px -70px rgb(0 0 0 / 0.55); }
.pcover__media, .pcover__picture, .pcover__picture img, .pgallery__picture, .pgallery__picture img { display: block; width: 100%; height: 100%; }
.pcover__picture { transform: translate3d(0, var(--py, 0%), 0) scale(1.12); will-change: transform; }
.pcover__picture img, .pgallery__picture img { object-fit: cover; }
.pcover__picture img { object-position: 50% 30%; }
.pcover__caption { display: flex; gap: 14px; margin-top: 14px; font-size: 14px; color: var(--text-2); }
.pcover__caption span { color: var(--text); font-variant-numeric: tabular-nums; }
.pcover__frame::after, .pgallery__tile::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(0 0 0 / 0.38), transparent 45%); opacity: 0; transition: opacity 500ms var(--ease-out); pointer-events: none; }
.pgallery__chip, .pgallery__index { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-pill); background: rgb(11 11 13 / 0.68); color: #f2f0ec; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pgallery__chip { right: 16px; bottom: 16px; padding: 9px 14px; font-size: 13.5px; font-weight: 600; opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
.pgallery__chip .icon { width: 15px; height: 15px; }
.pgallery__index { top: 16px; left: 16px; padding: 5px 11px; font-size: 12px; font-variant-numeric: tabular-nums; }
.pgallery { grid-column: 1 / -1; display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(56px, 7vw, 110px); }
.pgallery__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.pgallery__head h2 { margin: 0; }
.pgallery__count { font-size: 14px; color: var(--text-2); }
.pgallery__row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(14px, 1.6vw, 24px); height: clamp(280px, 36vw, 560px); }
.pgallery__row.is-flipped { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.pgallery__row.is-single { grid-template-columns: minmax(0, 1fr); height: clamp(280px, 40vw, 600px); }
.pgallery__tile { height: 100%; }
.pcover__frame:focus-visible, .pgallery__tile:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .pcover__frame:hover::after, .pgallery__tile:hover::after { opacity: 1; }
  .pcover__frame:hover .pgallery__chip, .pgallery__tile:hover .pgallery__chip { opacity: 1; transform: none; }
  .js .pgallery__tile.is-revealed:hover img, .pgallery__tile:hover img { transform: scale(1.05); transition: transform 1200ms var(--ease-out); }
}
.pcover__frame:focus-visible .pgallery__chip,
.pgallery__tile:focus-visible .pgallery__chip,
.case-hero__frame:focus-visible .pgallery__chip { opacity: 1; transform: none; }
@media (max-width: 767.98px) {
  .pcover__frame { aspect-ratio: 4 / 3; }
  .pgallery__row, .pgallery__row.is-flipped, .pgallery__row.is-single { grid-template-columns: minmax(0, 1fr); height: auto; }
  .pgallery__tile { height: auto; aspect-ratio: 4 / 3; }
}

/* Lecture d'un document : page entière (format A4, jamais rognée) et
   actions à côté ; lecteur intégré grand format à l'ouverture. */
.doc-reader { display: flex; flex-direction: column; gap: 24px; }
.doc-reader__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; }
.doc-reader__head h2 { margin: 0; }
.doc-reader__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.doc-reader__tags span { padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: 13px; color: var(--text-2); }
.doc-reader__preview {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
}
.doc-reader__cover { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: inherit; cursor: pointer; }
div.doc-reader__cover { cursor: default; }
.doc-reader__page {
  display: block;
  aspect-ratio: 1 / 1.414;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #ffffff;
  box-shadow: 0 1px 0 var(--line), 0 30px 50px -30px rgb(0 0 0 / 0.45);
  transform: rotate(-1.2deg);
  transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out);
}
.doc-reader__image, .doc-reader__image img { display: block; width: 100%; height: 100%; }
.doc-reader__image img { object-fit: contain; object-position: 50% 0; }
.doc-reader__blank { display: grid; place-items: center; height: 100%; background: var(--solid); color: var(--on-solid); }
.doc-reader__blank span { font-family: var(--font-display); font-stretch: 112%; font-weight: 600; font-size: 44px; letter-spacing: -0.04em; }
.doc-reader__chip {
  position: absolute;
  left: 50%;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: var(--solid);
  color: var(--on-solid);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transform: translate3d(-50%, 8px, 0);
  opacity: 0;
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.doc-reader__chip .icon { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  button.doc-reader__cover:hover .doc-reader__page { transform: rotate(0deg) translate3d(0, -6px, 0); box-shadow: 0 1px 0 var(--line), 0 44px 70px -34px rgb(0 0 0 / 0.55); }
  button.doc-reader__cover:hover .doc-reader__chip { opacity: 1; transform: translate3d(-50%, 0, 0); }
}
button.doc-reader__cover:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; border-radius: var(--radius-sm); }
.doc-reader__info { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.doc-reader__title { margin: 0; font-family: var(--font-display); font-stretch: 112%; font-weight: 600; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.04; letter-spacing: -0.035em; overflow-wrap: anywhere; }
.doc-reader__text { max-width: 46ch; margin: 0; color: var(--text-2); }
.doc-reader__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.doc-reader__tab { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; }
.doc-reader__tab .icon { width: 14px; height: 14px; }
.doc-reader__viewer { overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--bg-sunk); }
.doc-reader__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 12px 10px 20px; border-bottom: 1px solid var(--line); background: var(--bg-elev); }
.doc-reader__bar-title { margin: 0; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.doc-reader__tools { display: flex; gap: 4px; }
.doc-reader__slot { height: min(88vh, 1120px); }
.doc-reader__slot object { display: block; width: 100%; height: 100%; }
.doc-reader__slot object .btn { margin: 32px; }
.doc-reader__viewer:fullscreen { display: flex; flex-direction: column; border-radius: 0; }
.doc-reader__viewer:fullscreen .doc-reader__slot { flex: 1; height: auto; }
@media (max-width: 639.98px) {
  .doc-reader__preview { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .doc-reader__cover { max-width: 260px; }
  .doc-reader__info { align-items: center; }
  .doc-reader__actions { justify-content: center; }
}
.video-frame { aspect-ratio: 16 / 9; width: 100%; border: 0; background: #000; }
.share { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; }

/* Journal (liste) */
.blog-tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 40px; }
.search-field { display: flex; align-items: center; gap: 10px; flex: 1 1 320px; max-width: 460px; min-height: 52px; padding: 0 20px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--bg-elev); }
.search-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; }
.search-field:focus-within { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.pagination { display: flex; justify-content: center; gap: 22px; margin-top: 64px; font-size: 15px; }

/* Visite guidée */
.tour {
  position: fixed;
  inset: 0;
  z-index: 400;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0b0b0d;
  color: #ececea;
  overflow: hidden;
}
.tour::backdrop { background: #0b0b0d; }
.tour[open] { display: block; animation: tour-in 700ms var(--ease-out); }
@keyframes tour-in { from { opacity: 0; } }
.tour__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1200ms var(--ease-out); }
.tour__canvas.is-ready { opacity: 1; }
.tour__fallback {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 85% 40%, #1b1b20 0%, #0b0b0d 60%);
}
.tour__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(11 11 13 / 0.94) 0%, rgb(11 11 13 / 0.6) 45%, rgb(11 11 13 / 0.1) 75%); pointer-events: none; }
[dir="rtl"] .tour__scrim { transform: scaleX(-1); }
.tour__ui { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; height: 100%; padding: 0 var(--gutter) 28px; }
.tour__top { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; }
.tour__segments { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.tour__segments li { height: 3px; border-radius: 3px; background: rgb(236 236 234 / 0.22); overflow: hidden; }
.tour__segments span { display: block; width: 100%; height: 100%; background: #ececea; transform-origin: left; transform: scaleX(0); }
[dir="rtl"] .tour__segments span { transform-origin: right; }
.tour__segments span.is-done { transform: none; }
.tour__segments span.is-current { animation: tour-segment linear forwards; }
.tour.is-paused .tour__segments span.is-current { animation-play-state: paused; }
@keyframes tour-segment { to { transform: none; } }
.tour__bar { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 52px; }
.tour__brand { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: #a3a39f; }
.tour__brand .brand-mark { width: 30px; height: 30px; color: #ececea; }
.tour__actions { display: flex; align-items: center; gap: 8px; }
.tour__icon-btn { display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgb(236 236 234 / 0.28); border-radius: var(--radius-pill); background: rgb(11 11 13 / 0.4); color: #ececea; cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast); }
.tour__icon-btn:hover { background: #ececea; color: #0b0b0d; }
.tour__screen { align-self: center; max-width: 620px; }
.tour__eyebrow { margin: 0; font-size: 14px; color: #a3a39f; font-variant-numeric: tabular-nums; }
.tour__title { margin: 18px 0 0; font-family: var(--font-display); font-stretch: 112%; font-weight: 600; font-size: clamp(44px, 6vw, 96px); line-height: 0.95; letter-spacing: -0.05em; }
.tour__intro .tour__title, .tour__outro .tour__title { font-size: clamp(40px, 5vw, 80px); }
.tour__text { margin: 24px 0 0; max-width: 46ch; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.5; color: #cfcfcb; }
.tour__how { display: flex; flex-direction: column; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 15.5px; color: #cfcfcb; }
.tour__how li { display: flex; align-items: center; gap: 14px; }
.tour__how .icon { flex: none; width: 34px; height: 34px; padding: 8px; border: 1px solid rgb(236 236 234 / 0.24); border-radius: var(--radius-pill); color: #ececea; }
.tour__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.tour__facts li { padding: 7px 14px; border: 1px solid rgb(236 236 234 / 0.26); border-radius: var(--radius-pill); font-size: 14px; color: #ececea; background: rgb(11 11 13 / 0.35); }
.tour__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 32px 0 0; }
.tour .btn { --btn-bg: #ececea; --btn-fg: #0b0b0d; --btn-border: #ececea; }
.tour .btn--ghost { --btn-bg: transparent; --btn-fg: #ececea; --btn-border: rgb(236 236 234 / 0.4); }
.tour .text-btn { color: #ececea; }
.tour__panel [data-tour-anim] { opacity: 0; transform: translateY(26px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.tour__panel.is-in [data-tour-anim] { opacity: 1; transform: none; }
.tour__intro, .tour__outro { animation: fade-up 900ms var(--ease-out) both; }
.tour__stations { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); border-top: 1px solid rgb(236 236 234 / 0.18); }
.tour__station {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: -1px;
  padding: 14px 8px 0 0;
  border: 0;
  border-top: 2px solid transparent;
  background: none;
  color: #a3a39f;
  text-align: start;
  font-size: 13px;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur) var(--ease-out);
}
.tour__station:hover { color: #ececea; }
.tour__station[aria-current="step"] { color: #ececea; border-top-color: #ececea; }
.tour__bottom { display: flex; flex-direction: column; gap: 20px; }
.tour__controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.tour__controls .slider__btn { border-color: rgb(236 236 234 / 0.32); color: #ececea; }
.tour__controls .slider__btn:hover { background: #ececea; color: #0b0b0d; }
.tour__hint { margin: 0; font-size: 13px; color: #a3a39f; }
/* Lancement depuis l'en-tête : une pastille « lecture » rend l'action explicite. */
.tour-launch { display: inline-flex; align-items: center; gap: 8px; }
.tour-launch__icon { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid currentColor; border-radius: var(--radius-pill); }
.tour-launch__icon .icon { width: 11px; height: 11px; margin-inline-start: 1px; fill: currentColor; }
@media (max-width: 767.98px) {
  .tour__scrim { background: linear-gradient(0deg, rgb(11 11 13 / 0.96) 0%, rgb(11 11 13 / 0.6) 55%, rgb(11 11 13 / 0) 80%); }
  .tour__screen { align-self: end; padding-bottom: 20px; }
  .tour__stations { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 96px; overflow-x: auto; scrollbar-width: none; }
  .tour__hint { display: none; }
  .tour__how { display: none; }
}

/* Erreurs */
.error-page { min-height: 100vh; display: grid; align-content: center; gap: 28px; padding: var(--gutter); }

/* 8. Mouvement ───────────────────────────────────────────────────────────── */
/* Les états cachés n'existent qu'avec JavaScript actif (classe .js posée dans
   <head>) : sans script, tout le contenu est visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js [data-reveal="mask"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-image) var(--ease-out);
}
.js [data-reveal="image"] {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--dur-image) var(--ease-out);
}
.js [data-reveal="image"] img { transform: scale(1.08); transition: transform 1600ms var(--ease-out); }
.js [data-reveal].is-revealed { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
.js [data-reveal="image"].is-revealed img { transform: none; }

/* Compteur d'entrée (accueil, une fois par session). Masqué sans script,
   avec « réduire les animations » et dès que theme.js libère la page. */
.preloader { display: none; }
.js.has-intro:not(.intro-seen) .preloader {
  --load: 0;
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(20px, 3vw, 40px) var(--gutter) clamp(28px, 5vh, 56px);
  background: #0b0b0d;
  color: #f2f0ec;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1100ms var(--ease-in-out);
}
.js.has-intro.intro-done .preloader { clip-path: inset(0 0 100% 0); pointer-events: none; }
/* Logo dessiné au rythme du chargement : anneau, puis M, puis S. */
.preloader__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.preloader__mark { width: clamp(120px, 16vw, 210px); height: auto; overflow: visible; }
.preloader__ghost { opacity: 0.1; }
.preloader__ink path { stroke-dasharray: 1; }
.preloader__ring { stroke-dashoffset: calc(1 - clamp(0, var(--load) / 0.92, 1)); }
.preloader__m { stroke-dashoffset: calc(1 - clamp(0, (var(--load) - 0.06) / 0.5, 1)); }
.preloader__s { stroke-dashoffset: calc(1 - clamp(0, (var(--load) - 0.34) / 0.56, 1)); }
.preloader.is-complete .preloader__mark { animation: mark-settle 760ms var(--ease-out) both; }
.preloader.is-complete .preloader__ghost { opacity: 0; transition: opacity 400ms; }
@keyframes mark-settle {
  0% { transform: none; }
  38% { transform: scale(1.07); }
  100% { transform: none; }
}
.preloader__name {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: clamp(15px, 1.4vw, 19px);
  letter-spacing: 0.02em;
  clip-path: inset(0 calc((1 - var(--load)) * 100%) 0 0);
}
[dir="rtl"] .preloader__name { clip-path: inset(0 0 0 calc((1 - var(--load)) * 100%)); }
.preloader__bottom { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(242 240 236 / 0.55); }
.preloader__count { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: #f2f0ec; }
.preloader__bar { position: absolute; inset: auto 0 0; height: 2px; background: rgb(242 240 236 / 0.12); }
.preloader__bar span { display: block; height: 100%; background: #f2f0ec; transform-origin: left; transform: scaleX(var(--load)); }
[dir="rtl"] .preloader__bar span { transform-origin: right; }
/* Tant que le compteur couvre l'écran, l'entrée du hero attend. */
.js.has-intro:not(.intro-seen):not(.intro-done) .hero [data-intro],
.js.has-intro:not(.intro-seen):not(.intro-done) .hero__name .line > span { animation-play-state: paused; }

/* Nom du hero : chaque ligne monte depuis son masque. */
.js .hero__name .line > span { transform: translate3d(0, 105%, 0); animation: line-up 1100ms var(--ease-out) forwards; animation-delay: calc(120ms + var(--i, 0) * 110ms); }
@keyframes line-up { to { transform: none; } }
.js .hero [data-intro] { opacity: 0; transform: translate3d(0, 16px, 0); animation: fade-up 1000ms var(--ease-out) forwards; animation-delay: calc(380ms + var(--i, 0) * 90ms); }
@keyframes fade-up { to { opacity: 1; transform: none; } }

/* Lettres dispersées (titres data-scatter) : rassemblées selon --assemble,
   posé par le script au fil du défilement. Chaque lettre part avec un léger
   décalage (--d) pour que le mot se reforme de gauche à droite. */
.scatter-word { display: inline-block; white-space: nowrap; }
.is-scattered .scatter-piece {
  --p: clamp(0, calc((var(--assemble, 1) - var(--d, 0)) / 0.65), 1);
  display: inline-block;
  opacity: calc(0.08 + 0.92 * var(--p));
  transform:
    translate3d(calc(var(--sx, 0em) * (1 - var(--p))), calc(var(--sy, 0em) * (1 - var(--p))), 0)
    rotate(calc(var(--sr, 0deg) * (1 - var(--p))));
  will-change: transform, opacity;
}

/* Signature du pied de page : les lettres arrivent dispersées et se
   rassemblent, de gauche à droite, quand le nom entre à l'écran. */
.is-scattered.is-arriving .scatter-piece {
  opacity: 0;
  transform: translate3d(var(--sx, 0em), var(--sy, 0em), 0) rotate(var(--sr, 0deg));
  transition: opacity 900ms var(--ease-out), transform 1500ms var(--ease-out);
  transition-delay: calc(var(--d, 0) * 2s);
}
.is-scattered.is-arriving.is-formed .scatter-piece { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal], .js [data-reveal="mask"], .js [data-reveal="image"] { opacity: 1; transform: none; clip-path: none; }
  .js [data-reveal="image"] img { transform: none; }
  .manifesto__text .word { opacity: 1 !important; }
  .is-scattered .scatter-piece { opacity: 1; transform: none; }
  .js .terminal__body .term-line { clip-path: none; }
  .arch__link::after { display: none; }
}

/* Défilement amorti (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* 9. Impression ──────────────────────────────────────────────────────────── */
@media print {
  .site-header, .mobile-dock, .hero__stage, .tour, .slider__controls, .contact__form { display: none !important; }
  .section { padding-block: 32px; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  body { background: #fff; color: #000; }
}