/* ==========================================================================
   Sébastien Depeau · Portfolio UX 2026
   DA « Béton et néon » : brutalisme silencieux, futur dystopique et calme.
   Fond de béton nuit, titres en béton éclairé par le haut, une seule ligne
   de néon blanc qui guide le regard. Chaque étude de cas garde un voyant
   de la couleur de son projet (--sig, --sig-2).
   ========================================================================== */

/* ---------- Polices hébergées avec le site (licence SIL Open Font License) ---------- */
/* Big Shoulders Display, latin-ext */
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("../fonts/big-shoulders-display-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Big Shoulders Display, latin */
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("../fonts/big-shoulders-display-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Geist, latin-ext */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/geist-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Geist, latin */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/geist-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Geist Mono, latin-ext */
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/geist-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Geist Mono, latin */
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/geist-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Jetons ---------- */
:root {
  color-scheme: dark;

  /* Béton */
  --night: #0e0f10;        /* Béton nuit : fond */
  --shade: #151618;        /* Béton ombre : panneaux */
  --raw: #1f2123;          /* Béton brut : cadres d'images */
  --line: rgba(233, 233, 228, 0.12);         /* Joints de coffrage */
  --line-strong: rgba(233, 233, 228, 0.28);
  --dim: #8e9093;          /* Béton clair : texte secondaire (6:1 sur le fond) */
  --text: #cfd0cb;         /* Texte courant (12:1) */
  --light: #e9e9e4;        /* Lumière : titres et texte important (15:1) */
  --panel: #ecebe6;        /* Caisson lumineux */

  /* Lumière */
  --neon: #ffffff;
  --halo: 0 0 4px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.45), 0 0 34px rgba(255, 255, 255, 0.18);
  --signal: #7cf7e4;       /* Voyant « disponible » */

  /* Voyants de projet (surchargés par .theme-*) */
  --sig: var(--neon);
  --sig-2: var(--neon);

  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.85rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.1rem);
  --step-1: clamp(1.15rem, 1.06rem + 0.45vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.25rem + 1.2vw, 2.4rem);
  --step-3: clamp(2.2rem, 1.6rem + 2.8vw, 4.4rem);
  --step-4: clamp(2.8rem, 1.4rem + 6vw, 8rem);
  --step-5: clamp(3.4rem, 1.4rem + 7.4vw, 9.5rem);

  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1440px;
  --header-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);

  /* Béton banché : joints de coffrage et trous de banche */
  --formwork:
    radial-gradient(circle at 45px 34px, rgba(0, 0, 0, 0.85) 0 2.2px, rgba(255, 255, 255, 0.14) 2.8px 3.4px, transparent 3.9px) 0 0 / 90px 67.5px,
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 270px 135px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 270px 135px;
  /* Nuages du béton */
  --concrete: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .14 0 0 0 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") 0 0 / 520px 520px;
}

.theme-recette { --sig: #5faf88; --sig-2: #f48256; }
.theme-forui   { --sig: #f5a7b5; --sig-2: #8ea6ff; }
.theme-sd      { --sig: #4993c4; --sig-2: #9cc7e6; }

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--night);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grain de film, très léger, au-dessus de tout */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0.045;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; color: var(--light); }
strong { color: var(--light); font-weight: 600; }
ul { margin: 0; }
::selection { background: var(--neon); color: var(--night); }

:focus-visible { outline: 2px solid var(--neon); outline-offset: 4px; box-shadow: 0 0 22px rgba(255, 255, 255, 0.35); }

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 210;
  background: var(--neon); color: var(--night); padding: 0.8em 1.2em;
  font: 500 0.8rem var(--mono); text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.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;
}

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* Étiquettes de signalétique */
.mono {
  font-family: var(--mono); font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.muted { color: var(--dim); }

/* Titres monumentaux : béton éclairé par le haut */
.display {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.005em; line-height: 0.86; text-wrap: balance;
}
.section-title, .project__title, .case-title, .next-project__title, .contact__title, .about__lead, .case-section h2 {
  /* La marge négative compense le jour laissé aux accents des capitales */
  padding-top: 0.14em; margin-top: -0.14em;
  background: linear-gradient(180deg, #fbfbf8 0%, #d7d8d3 48%, #8e9093 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (forced-colors: active) {
  .section-title, .project__title, .case-title, .next-project__title, .contact__title, .about__lead, .case-section h2, .hero__title > span {
    background: none; color: CanvasText;
  }
}

/* ---------- Boutons et liens ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.8em;
  min-height: 48px; padding: 0.9em 1.4em; border-radius: 0;
  border: 1px solid var(--line-strong); background: rgba(14, 15, 16, 0.6); color: var(--light);
  font: 500 0.8rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s, color 0.3s, background-color 0.3s;
}
.btn:hover { border-color: var(--neon); color: var(--neon); box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.08), 0 0 18px rgba(255, 255, 255, 0.16); }
.btn--accent { background: var(--neon); border-color: var(--neon); color: var(--night); box-shadow: 0 0 18px rgba(255, 255, 255, 0.2); }
.btn--accent:hover { background: var(--neon); color: var(--night); box-shadow: var(--halo); }

.arrow-link {
  display: inline-flex; align-items: center; gap: 0.7em; text-decoration: none; color: var(--light);
  font: 500 0.8rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.arrow-link .arr { display: inline-block; transition: transform 0.3s var(--ease); }
.arrow-link:hover .arr, a:hover > .arrow-link .arr, a:hover .arrow-link .arr { transform: translateX(6px); }

/* ---------- En-tête ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14, 15, 16, 0.94);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.3s;
}
.site-header.is-scrolled { background: rgba(14, 15, 16, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* Le bas de l'en-tête est un tube néon qui s'allume avec la lecture */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--neon); box-shadow: 0 0 6px rgba(255, 255, 255, 0.8), 0 0 16px rgba(255, 255, 255, 0.35);
  transform: scaleX(var(--progress, 0)); transform-origin: left; pointer-events: none;
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }

.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1.15; position: relative; z-index: 2; }
.brand__name { font: 800 1.35rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--light); }
.brand__role { font: 500 0.66rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--dim); margin-top: 4px; }

.nav__list { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative; display: inline-block; padding-block: 8px; text-decoration: none; color: var(--dim);
  font: 500 0.74rem var(--mono); letter-spacing: 0.16em; text-transform: uppercase; transition: color 0.25s;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--neon);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease);
}
.nav__link:hover, .nav__link[aria-current] { color: var(--light); }
.nav__link:hover::after, .nav__link[aria-current]::after { transform: scaleX(1); }
.nav__cv { margin-left: 8px; min-height: 40px; padding: 0.75em 1.1em; }
.nav__extra { display: none; }

.menu-toggle {
  display: none; position: relative; z-index: 2;
  align-items: center; gap: 12px; min-height: 44px; padding: 0 4px;
  background: none; border: 0; color: var(--light);
  font: 500 0.78rem var(--mono); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
}
.menu-toggle__bars { width: 26px; height: 10px; position: relative; }
.menu-toggle__bars::before, .menu-toggle__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars::after { top: 9px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { top: 4px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { top: 4px; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 0; z-index: 1;
    display: flex; flex-direction: column; justify-content: center; gap: 40px;
    padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
    background: linear-gradient(rgba(11, 12, 13, 0.55), rgba(11, 12, 13, 0.55)), var(--formwork), #0b0c0d;
    opacity: 0; visibility: hidden;
    transition: opacity 0.35s, visibility 0s 0.35s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transition: opacity 0.35s; }
  .nav__list { flex-direction: column; align-items: flex-start; gap: 6px; }
  .nav__link { font: 800 clamp(2.8rem, 13vw, 4.6rem)/1 var(--display); letter-spacing: 0.01em; color: var(--light); padding-block: 4px; }
  .nav__cv { margin: 20px 0 0; }
  .nav__extra { display: block; }
  body.menu-open { overflow: hidden; }
}

/* ---------- Mur de béton éclairé à la lampe (accueil et contact) ---------- */
.wall {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--formwork), var(--concrete);
  -webkit-mask-image: radial-gradient(560px circle at var(--mx, 76%) var(--my, 30%), #000 0%, rgba(0, 0, 0, 0.42) 42%, rgba(0, 0, 0, 0.14) 72%);
  mask-image: radial-gradient(560px circle at var(--mx, 76%) var(--my, 30%), #000 0%, rgba(0, 0, 0, 0.42) 42%, rgba(0, 0, 0, 0.14) 72%);
}
.wall::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(520px circle at var(--mx, 76%) var(--my, 30%), rgba(255, 255, 255, 0.06), transparent 70%);
}

/* ---------- Hero (accueil) ---------- */
.hero {
  position: relative; isolation: isolate; overflow: clip; border-bottom: 1px solid var(--line);
  --ceiling: clamp(32px, 6vh, 64px);   /* hauteur du néon */
  --rise: clamp(48px, 7vh, 96px);      /* vide entre le néon et le titre */
  --gap: clamp(24px, 3vw, 48px);
  --lamp-x: 74%;                        /* bout de la ligne, en % de la grille */
}
/* Lumière zénithale */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 55% at 76% -6%, rgba(255, 255, 255, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 45%);
}
.hero__inner { display: flex; flex-direction: column; min-height: calc(100svh - var(--header-h)); padding-bottom: clamp(20px, 3vw, 40px); }
.hero__grid {
  position: relative; flex: 1; display: grid; align-content: end; gap: clamp(24px, 3vw, 36px) var(--gap);
  padding-top: calc(var(--ceiling) + var(--rise));
}

/* La ligne de néon : du bord de l'écran jusqu'à la lampe */
.hero__light { position: absolute; inset: 0; pointer-events: none; }
.hero__strip {
  position: absolute; top: var(--ceiling); height: 2px; border-radius: 2px;
  left: calc((100% - 100vw) / 2);
  width: calc((100vw - 100%) / 2 + var(--lamp-x));
  background: var(--neon); box-shadow: var(--halo);
  transform: scaleX(0); transform-origin: left;
  animation: strip-on 1.8s 0.2s var(--ease) forwards, flicker 1.2s 2s linear;
}
.hero__strip::after {
  content: ""; position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--neon); box-shadow: var(--halo);
}

/* La lampe éclaire un humain, debout sur le panneau d'informations */
.hero__lamp { display: none; }
@media (min-width: 1100px) {
  .hero { --lamp-x: calc(100% - (100% - var(--gap)) * 5 / 24); }
  .hero__grid {
    align-content: stretch;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: 1fr auto;
    grid-template-areas: "title lamp" "bottom board";
  }
  .hero__title { grid-area: title; align-self: end; }
  .hero__bottom { grid-area: bottom; }
  .board { grid-area: board; align-self: start; }
  .hero__lamp { grid-area: lamp; display: block; position: relative; pointer-events: none; }
}
.hero__beam { position: absolute; left: 50%; top: calc(-1 * var(--rise)); bottom: 0; width: clamp(180px, 19vw, 300px); translate: -50% 0; filter: blur(6px); opacity: 0; animation: light-on 1.4s 1.7s forwards; }
.hero__beam::before {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(49% 0, 51% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.07) 55%, rgba(255, 255, 255, 0.025));
}
.hero__pool {
  position: absolute; left: 50%; bottom: -16px; width: clamp(200px, 22vw, 340px); height: 34px; translate: -50% 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 60%, transparent);
  opacity: 0; animation: light-on 1.4s 2s forwards;
}
.hero__figure { position: absolute; left: 50%; bottom: 0; height: clamp(88px, 13vh, 136px); width: auto; translate: -50% 0; fill: #050606; filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.7)); }
@keyframes strip-on { to { transform: scaleX(1); } }
@keyframes light-on { 0% { opacity: 0; } 12% { opacity: 0.8; } 18% { opacity: 0.15; } 30% { opacity: 1; } 38% { opacity: 0.55; } 100% { opacity: 1; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 8% { opacity: 0.4; } 14% { opacity: 1; } 22% { opacity: 0.7; } 28% { opacity: 1; } }

/* Le titre s'éclaire ligne après ligne : l'utile devient évident */
.hero__title { font-size: clamp(4.25rem, 1rem + 7.4vw, 10rem); margin: 0; }
/* Sur ordinateur, l'accroche tient toujours en 3 lignes et laisse les boutons visibles dès l'arrivée */
@media (min-width: 1100px) {
  .hero__title { font-size: min(8.8vw - 4px, 7.6rem, 15vh); }
  .hero__title > span:not(.visually-hidden) { white-space: nowrap; }
}
.hero__title > span:not(.visually-hidden) {
  display: block; padding-top: 0.14em; margin-top: -0.14em;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__title .l1 { background-image: linear-gradient(180deg, #a3a5a8, #707376); }
.hero__title .l2 { background-image: linear-gradient(180deg, #e4e5e0, #93959a); }
.hero__title .l3 { background-image: linear-gradient(180deg, #ffffff 40%, #dfe0db); filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.3)); }

.hero__bottom { display: grid; gap: 24px; }
.hero__intro { font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); line-height: 1.5; max-width: 52ch; margin: 0; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Panneau d'affichage, comme sur un quai */
.board { border: 1px solid var(--line-strong); background: rgba(8, 9, 10, 0.78); overflow: clip; }
.board__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--dim); }
.status { display: inline-flex; align-items: center; gap: 0.8em; color: var(--light); }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 6px var(--signal), 0 0 16px rgba(124, 247, 228, 0.5); animation: beacon 2.6s ease-in-out infinite; }
@keyframes beacon { 50% { opacity: 0.35; box-shadow: 0 0 2px var(--signal); } }
.facts-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); margin: 0; }
.facts-strip div { padding: 14px 16px 16px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin: -1px 0 0 -1px; }
.facts-strip dt { font: 500 0.68rem/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.facts-strip dd { margin: 0; font: 700 clamp(1.2rem, 1rem + 0.5vw, 1.5rem)/1.05 var(--display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--light); }

/* Panneau défilant à diodes */
.ticker { overflow: hidden; background: #08090a; border-bottom: 1px solid var(--line); padding-block: 18px; }
.ticker__track {
  display: flex; width: max-content; animation: ticker 80s linear infinite;
  -webkit-mask: radial-gradient(circle, #000 1.05px, transparent 1.35px) 0 0 / 3px 3px;
  mask: radial-gradient(circle, #000 1.05px, transparent 1.35px) 0 0 / 3px 3px;
}
.ticker__group { display: flex; flex-shrink: 0; }
.ticker span {
  font: 800 clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem)/1 var(--display); text-transform: uppercase; letter-spacing: 0.08em;
  color: #fff; white-space: nowrap; padding-inline: 0.9em; text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}
.ticker span::after { content: ""; display: inline-block; width: 0.24em; height: 0.24em; margin-left: 1.8em; background: currentColor; vertical-align: 0.28em; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { position: relative; padding-block: clamp(96px, 12vw, 200px); }
.section-head {
  display: grid; gap: 20px 48px; align-items: end;
  padding-bottom: 24px; margin-bottom: clamp(40px, 6vw, 88px); border-bottom: 1px solid var(--line-strong);
}
@media (min-width: 900px) { .section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 40ch); } }
.section-title { font-size: var(--step-5); }
.section-head p { margin: 0; color: var(--dim); }

/* ---------- Projets (accueil) ---------- */
.projects { list-style: none; padding: 0; margin: 0; }
.project + .project { margin-top: clamp(72px, 10vw, 160px); }
.project__link { display: grid; gap: 20px; text-decoration: none; }
.project__head { display: flex; flex-direction: column; gap: 14px; order: -2; }
.project__meta { display: flex; justify-content: space-between; gap: 16px; color: var(--dim); }
.project__title { font-size: var(--step-4); transition: filter 0.5s; }
.project__body { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.project__pitch { font-size: var(--step-1); line-height: 1.4; margin: 0; max-width: 30ch; color: var(--light); }
.project__media { position: relative; order: -1; margin: 0; overflow: hidden; background: var(--shade); aspect-ratio: 16 / 10; border: 1px solid var(--line); }
.project__media img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.9s var(--ease), transform 1.2s var(--ease); }
/* Détecteur de présence : la salle s'allume quand on passe devant */
.js .project:not(.is-lit) .project__media img { filter: grayscale(1) brightness(0.5) contrast(1.1); }
.js .project__link:hover .project__media img, .js .project__link:focus-visible .project__media img { filter: none; transform: scale(1.025); }
.project__link:hover .project__title { filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.35)); }
@media (min-width: 900px) {
  .project__link { grid-template-columns: 4fr 8fr; column-gap: clamp(24px, 4vw, 72px); row-gap: 28px; }
  .project__head { grid-column: 1 / -1; }
  .project__body { grid-column: 1; grid-row: 2; justify-content: space-between; }
  .project__media { grid-column: 2; grid-row: 2; }
}

.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.tags li {
  font: 500 0.68rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim);
  border: 1px solid var(--line); padding: 0.5em 0.75em;
}

/* ---------- Méthode : quatre piliers ---------- */
.steps { display: grid; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line-strong); }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { padding: 28px 0 48px; border-bottom: 1px solid var(--line); }
@media (min-width: 700px) {
  .step { padding-inline: clamp(16px, 2vw, 28px); border-left: 1px solid var(--line); }
  .step:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (min-width: 1100px) {
  .step { border-bottom: 0; }
  .step:nth-child(odd) { border-left: 1px solid var(--line); padding-left: clamp(16px, 2vw, 28px); }
  .step:first-child { border-left: 0; padding-left: 0; }
}
.step__num {
  display: block; margin-bottom: 28px;
  font: 800 clamp(4.5rem, 2rem + 6vw, 8.5rem)/0.8 var(--display);
  color: transparent; -webkit-text-stroke: 1px rgba(233, 233, 228, 0.42);
  transition: color 0.5s var(--ease), text-shadow 0.5s var(--ease), -webkit-text-stroke-color 0.5s var(--ease);
}
/* Au survol, le chiffre s'allume comme un tube de néon */
.step:hover .step__num { color: var(--neon); -webkit-text-stroke-color: var(--neon); text-shadow: var(--halo), 0 0 48px rgba(255, 255, 255, 0.22); }
.step h3 { font: 800 var(--step-2)/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 14px; }
.step p { max-width: 34ch; }
.step ul { list-style: none; padding: 0; }

/* ---------- Expérience ---------- */
.xp { display: grid; gap: 40px; }
@media (min-width: 900px) { .xp { grid-template-columns: 5fr 7fr; column-gap: clamp(32px, 5vw, 96px); align-items: start; } }
/* Caisson lumineux : la seule surface claire de la page */
.xp__stat {
  background: var(--panel); color: #111214; padding: clamp(24px, 4vw, 48px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 340px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 48px rgba(255, 255, 255, 0.12), 0 0 140px rgba(255, 255, 255, 0.06);
}
.xp__stat .mono { color: #46484b; }
.xp__stat .xp__big { margin: 0 0 12px; font: 800 clamp(6rem, 3rem + 10vw, 13rem)/0.8 var(--display); color: var(--night); }
.xp__big sup { font-size: 0.4em; vertical-align: 1.1em; letter-spacing: 0.02em; }
.xp__stat p { margin: 0; font-size: var(--step-1); line-height: 1.3; max-width: 22ch; color: #1d1e20; }
.xp__head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.xp__logos { display: flex; gap: 8px; }
.xp__logos img { width: 56px; height: 56px; background: #f2f2ee; padding: 6px; }
.xp h3 { font: 800 var(--step-3)/0.95 var(--display); text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 14px; }
.xp ul { padding-left: 1.1em; margin: 24px 0; list-style: square; }
.xp li { margin-bottom: 0.6em; }
.xp li::marker { color: var(--dim); }
.xp__before { border-top: 1px solid var(--line); padding-top: 20px; color: var(--dim); margin: 0; }

/* ---------- À propos ---------- */
.about { display: grid; gap: 40px; }
@media (min-width: 900px) { .about { grid-template-columns: 4fr 8fr; column-gap: clamp(32px, 5vw, 96px); align-items: start; } }
.about__photo { margin: 0; }
@media (min-width: 900px) { .about__photo { position: sticky; top: calc(var(--header-h) + 24px); } }
.about__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.12) brightness(0.86); border: 1px solid var(--line); transition: filter 0.8s var(--ease); }
.about__photo:hover img { filter: none; }
.about__photo figcaption { margin-top: 12px; }
.about__lead { font: 800 var(--step-3)/0.95 var(--display); text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 0.8em; max-width: 20ch; background-image: linear-gradient(180deg, #fbfbf8, #c6c7c2); }
.about__text { max-width: 62ch; }
.about__text p { font-size: var(--step-1); line-height: 1.55; }
.blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 48px 32px; margin-top: clamp(48px, 6vw, 80px); }
.block h3 {
  font: 500 var(--step--1) var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--dim);
  padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line-strong);
}
.block ul { list-style: none; padding: 0; }
.block li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.timeline li { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; }
.timeline li span:first-child { font-family: var(--mono); font-size: var(--step--1); color: var(--dim); padding-top: 0.2em; }

/* ---------- Contact : la sortie ---------- */
.contact { position: relative; isolation: isolate; overflow: clip; border-top: 1px solid var(--line); }
.contact::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--neon); box-shadow: var(--halo); }
.contact { --mx: 50%; --my: 0%; }
.contact .mono { color: var(--dim); }
.contact__sign { display: flex; align-items: center; margin: 0; }
.contact__title { font-size: clamp(3.2rem, 1.2rem + 7vw, 9rem); margin: 24px 0 clamp(36px, 5vw, 72px); max-width: 15ch; }
.contact__title em { font-style: normal; background: linear-gradient(180deg, #ffffff 40%, #dfe0db); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.28)); }
.contact__mail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-bottom: 28px; border-bottom: 1px solid var(--line-strong); }
.contact__mail {
  font: 600 clamp(1.3rem, 0.6rem + 3.4vw, 3.6rem)/1.1 var(--font); letter-spacing: -0.025em; color: var(--light);
  text-decoration: none; overflow-wrap: anywhere; transition: color 0.3s, text-shadow 0.3s;
}
.contact__mail:hover { color: var(--neon); text-shadow: 0 0 18px rgba(255, 255, 255, 0.55); }
.copy-btn { min-height: 44px; }
.contact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; padding-top: 28px; margin: 0; }
.contact__grid dt { margin-bottom: 6px; }
.contact__grid dd { margin: 0; font-size: var(--step-1); font-weight: 500; color: var(--light); }
.contact__grid a { text-decoration: none; }
.contact__grid a:hover { text-decoration: underline; }
.contact__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(40px, 6vw, 72px); }
.toast { min-height: 1.5em; margin: 0; color: var(--light); font: 500 0.85rem var(--mono); letter-spacing: 0.06em; }
.toast:not(:empty)::before { content: "> " / ""; color: var(--signal); }

/* ---------- Pied de page ---------- */
.site-footer { color: var(--dim); border-top: 1px solid var(--line); }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 28px; }
.site-footer a { color: var(--light); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ==========================================================================
   Études de cas
   ========================================================================== */
.case-hero { padding-block: clamp(32px, 5vw, 72px) clamp(36px, 5vw, 64px); }
.back-link {
  display: inline-flex; align-items: center; gap: 0.7em; text-decoration: none; margin-bottom: clamp(36px, 6vw, 72px);
  font: 500 0.78rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); transition: color 0.25s;
}
.back-link:hover { color: var(--light); }
.back-link .arr { transition: transform 0.3s var(--ease); }
.back-link:hover .arr { transform: translateX(-6px); }
.case-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 24px; color: var(--dim); }
/* Voyant du projet */
.case-hero__meta .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sig); box-shadow: 0 0 6px var(--sig), 0 0 16px var(--sig); margin-right: 10px; vertical-align: 0.05em; }
.case-title { font-size: clamp(3.5rem, 1rem + 10vw, 12rem); }
.case-lead { font-size: var(--step-2); font-weight: 400; letter-spacing: -0.015em; line-height: 1.25; color: var(--light); max-width: 32ch; margin: clamp(24px, 3vw, 40px) 0 0; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); margin: clamp(36px, 5vw, 64px) 0 0; border: 1px solid var(--line-strong); overflow: clip; }
.facts div { padding: 14px 16px 16px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin: -1px 0 0 -1px; }
.facts dt { font: 500 0.68rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--dim); margin-bottom: 6px; }
.facts dd { margin: 0; font-weight: 500; line-height: 1.4; color: var(--light); }

.case-cover { background: var(--shade); margin: 0; border-block: 1px solid var(--line); }
.case-cover img { width: 100%; max-width: 1800px; margin-inline: auto; }

.tldr { background: var(--shade); border-bottom: 1px solid var(--line); padding-block: clamp(56px, 8vw, 112px); }
.tldr h2 { color: var(--dim); }
.tldr__grid { display: grid; gap: 32px; list-style: none; padding: 0; margin: 28px 0 0; }
@media (min-width: 900px) { .tldr__grid { grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); } }
.tldr__grid li { position: relative; border-top: 1px solid var(--line-strong); padding-top: 20px; }
.tldr__grid li::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 2px; background: var(--sig); box-shadow: 0 0 10px var(--sig); }
.tldr__grid h3 { font: 800 var(--step-2)/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 12px; }
.tldr__grid p { margin: 0; }

.case-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 56px; }
.case-layout > * { min-width: 0; }
@media (min-width: 1100px) { .case-layout { grid-template-columns: 210px minmax(0, 1fr); } }
.toc { display: none; }
@media (min-width: 1100px) {
  .toc { display: block; position: sticky; top: calc(var(--header-h) + 40px); align-self: start; padding-top: clamp(56px, 8vw, 120px); }
}
.toc ol { list-style: none; padding: 0; margin: 14px 0 0; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 8px 0 8px 16px; margin-left: -1px; border-left: 1px solid transparent; text-decoration: none; color: var(--dim); font-size: 0.92rem; transition: color 0.2s, border-color 0.2s; }
.toc a:hover { color: var(--light); }
.toc a.is-active { color: var(--light); border-left-color: var(--sig); box-shadow: -6px 0 12px -8px var(--sig); }

.case-section { padding-block: clamp(56px, 8vw, 120px); border-bottom: 1px solid var(--line); }
.case-section:last-child { border-bottom: 0; }
.case-section__num { display: block; color: var(--sig); margin-bottom: 16px; }
.case-section h2 { font: 800 var(--step-3)/0.92 var(--display); text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: clamp(24px, 3vw, 40px); max-width: 20ch; text-wrap: balance; }
.case-section h3 { font: 800 var(--step-2)/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; margin: clamp(48px, 6vw, 72px) 0 18px; }
.prose { max-width: 66ch; }
.prose p { font-size: var(--step-0); }

.pullquote { margin: clamp(36px, 5vw, 64px) 0; padding-left: clamp(16px, 2.4vw, 28px); border-left: 2px solid var(--sig); box-shadow: -8px 0 18px -14px var(--sig); max-width: 34ch; }
.pullquote p { font-size: var(--step-2); font-weight: 500; letter-spacing: -0.02em; line-height: 1.22; margin: 0; color: var(--light); }
.pullquote footer { margin-top: 14px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 28px; list-style: none; padding: 0; margin: clamp(32px, 4vw, 48px) 0; }
.stat { position: relative; border-top: 1px solid var(--line-strong); padding: 18px 0 28px; }
.stat::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 2px; background: var(--sig); box-shadow: 0 0 10px var(--sig); }
.stat__num { display: block; font: 800 var(--step-4)/0.9 var(--display); color: var(--light); }
.stat__label { display: block; margin-top: 12px; max-width: 24ch; color: var(--text); }

.figure { margin: clamp(32px, 4vw, 48px) 0; }
.figure--frame { background: var(--raw); padding: clamp(12px, 2.5vw, 32px); border: 1px solid var(--line); }
.figure figcaption { margin-top: 12px; color: var(--dim); max-width: 70ch; }
.zoom { position: relative; display: block; cursor: zoom-in; }
.zoom::after {
  content: "Agrandir ⤢"; position: absolute; right: 12px; bottom: 12px;
  background: var(--night); color: var(--light); border: 1px solid var(--line-strong);
  font: 500 0.7rem var(--mono); text-transform: uppercase; letter-spacing: 0.12em;
  padding: 0.6em 0.9em; opacity: 0; transition: opacity 0.25s;
}
.zoom:hover::after, .zoom:focus-visible::after { opacity: 1; }
@media (hover: none) { .zoom::after { opacity: 1; } }

.insights { display: grid; gap: 16px; list-style: none; padding: 0; margin: clamp(28px, 4vw, 44px) 0; }
@media (min-width: 900px) { .insights { grid-template-columns: repeat(3, 1fr); } }
.insights li { position: relative; background: var(--shade); border: 1px solid var(--line); padding: clamp(20px, 2.5vw, 32px); }
.insights li::after { content: ""; position: absolute; left: -1px; top: -1px; width: 40px; height: 2px; background: var(--sig); box-shadow: 0 0 10px var(--sig); }
.insights h4 { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; }
.insights p { margin: 0; color: var(--text); }

.process { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 20px; list-style: none; padding: 0; margin: clamp(28px, 4vw, 44px) 0; }
.process li { border-top: 1px solid var(--line-strong); padding: 14px 0 24px; }
.process strong { display: block; font-weight: 600; margin: 0 0 4px; }
.process span { color: var(--dim); font-size: 0.95rem; }

.gallery { display: grid; gap: clamp(16px, 2vw, 28px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); margin: clamp(32px, 4vw, 48px) 0; }
.shot { margin: 0; }
.shot .zoom { height: 460px; overflow: hidden; background: var(--shade); border: 1px solid var(--line); }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: object-position 4s var(--ease); }
.shot .zoom:hover img { object-position: bottom; }
.shot figcaption { margin-top: 12px; }
.shot figcaption strong { display: block; }
.shot figcaption span { color: var(--dim); font-size: 0.95rem; }

.duo { display: grid; gap: clamp(16px, 2vw, 28px); margin: clamp(32px, 4vw, 48px) 0; }
@media (min-width: 800px) { .duo { grid-template-columns: 1fr 1fr; align-items: start; } }

.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 24px 0; }
.swatch { border: 1px solid var(--line); background: var(--shade); }
.swatch__color { height: 110px; }
.swatch__info { padding: 12px 14px; }
.swatch__info strong { display: block; }
.swatch__info span { font-family: var(--mono); font-size: 0.78rem; color: var(--dim); }

/* Les logos gardent leur fond clair : ils sont présentés comme des caissons lumineux */
.logo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 24px 0; }
.logo-row figure { margin: 0; background: var(--panel); color: #1d1e20; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.logo-row .muted { color: #55575b; }
.logo-row img { aspect-ratio: 1; object-fit: contain; width: 100%; }

/* Arborescence (dessinée en HTML, interactive) */
.tree { margin: clamp(32px, 4vw, 48px) 0; padding: clamp(20px, 3vw, 36px); background: var(--shade); border: 1px solid var(--line-strong); }
.tree__root { position: relative; display: inline-block; background: var(--light); color: var(--night); font-weight: 600; padding: 10px 18px; }
.tree__branches { display: grid; gap: 8px; list-style: none; padding: 0; margin: 18px 0 0; }
.tree__branches > li { position: relative; }
.tree__node {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 10px 14px;
  background: var(--night); border: 1px solid var(--line-strong); border-radius: 0; font: 600 1rem/1.2 var(--font); color: var(--light);
  text-align: left; cursor: pointer; transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}
.tree__node::after { content: ""; flex: none; width: 7px; height: 7px; margin-top: -4px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform 0.3s var(--ease); }
.tree__node--key { border-color: var(--sig-2); box-shadow: 0 0 14px -4px var(--sig-2); }
.tree__branches > li.is-open > .tree__node { border-color: var(--neon); background: rgba(233, 233, 228, 0.05); box-shadow: 0 0 0 1px var(--neon), 0 0 24px rgba(255, 255, 255, 0.2); }
.tree__branches > li.is-open > .tree__node::after { margin-top: 4px; transform: rotate(-135deg); }
.tree__sub { list-style: none; padding: 10px 0 6px 18px; margin: 0 0 0 20px; border-left: 1px dashed var(--line-strong); }
.tree__sub[hidden] { display: none; }
.tree__sub li { font-size: 0.92rem; padding: 4px 0 4px 10px; color: var(--text); }
.tree__sub strong { color: var(--sig-2); font-weight: 600; }
@media (min-width: 860px) {
  .tree__root::after { content: ""; position: absolute; left: 20px; top: 100%; width: 1px; height: 18px; background: var(--line-strong); }
  .tree__branches { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; padding-top: 28px; border-top: 1px solid var(--line-strong); }
  .js .tree__branches { min-height: 15.5rem; }
  .tree__branches > li::before { content: ""; position: absolute; top: -29px; left: 20px; width: 1px; height: 28px; background: var(--line-strong); transition: background-color 0.3s, box-shadow 0.3s; }
  .tree__branches > li.is-open::before { background: var(--neon); box-shadow: 0 0 8px rgba(255, 255, 255, 0.7); }
}

/* Proto-persona (dessiné en HTML) */
.persona { display: grid; margin: clamp(32px, 4vw, 48px) 0; background: var(--shade); border: 1px solid var(--line-strong); }
.persona__id { padding: clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--line); }
.persona__avatar {
  display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 22px;
  border: 1px solid var(--sig); color: var(--sig); font: 800 2rem/1 var(--display); letter-spacing: 0.04em;
  box-shadow: 0 0 22px -8px var(--sig), inset 0 0 18px -10px var(--sig);
}
.persona .persona__name { font: 800 var(--step-3)/0.9 var(--display); text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 10px; }
.persona__role { color: var(--sig); margin: 0 0 22px; }
.persona__facts { list-style: none; padding: 0; margin: 0 0 24px; border-bottom: 1px solid var(--line); }
.persona__facts li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.95rem; line-height: 1.4; }
.persona__label { color: var(--dim); margin: 0 0 12px; }
.persona__quote { margin: 0; padding: clamp(24px, 3.4vw, 44px) clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--line); }
.persona__quote p { margin: 0; max-width: 22ch; font-size: var(--step-2); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; color: var(--light); text-wrap: balance; }
.persona__grid { display: grid; }
.persona__block { position: relative; padding: clamp(20px, 2.6vw, 32px) clamp(20px, 3vw, 36px); border-top: 1px solid var(--line); margin-top: -1px; transition: background-color 0.3s; }
.persona__block::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 2px; background: var(--sig); box-shadow: 0 0 10px var(--sig); transition: width 0.5s var(--ease); }
.persona__block--frein::before { background: var(--sig-2); box-shadow: 0 0 10px var(--sig-2); }
.persona__block:hover { background: rgba(233, 233, 228, 0.03); }
.persona__block:hover::before { width: 100%; }
.persona__block h4 { font: 500 0.72rem/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin: 0 0 14px; }
.persona__block p { margin: 0; }
.persona__block ul { list-style: none; padding: 0; margin: 0; }
.persona__block li { position: relative; padding-left: 20px; }
.persona__block li + li { margin-top: 10px; }
.persona__block li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px; background: var(--sig); }
.persona__block--frein li::before { background: var(--sig-2); }
@media (min-width: 900px) {
  .persona { grid-template-columns: minmax(250px, 0.75fr) 2fr; }
  .persona__id { border-bottom: 0; border-right: 1px solid var(--line); }
  .persona__grid { grid-template-columns: 1fr 1fr; }
  .persona__block:nth-child(odd) { border-right: 1px solid var(--line); }
}

/* Parcours et courbe d'émotions (dessinés en HTML et SVG, interactifs) */
.journey { margin: clamp(32px, 4vw, 48px) 0; background: var(--shade); border: 1px solid var(--line-strong); }
.journey__phases { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 14px; border-bottom: 1px solid var(--line); }
.journey__phases li {
  font: 500 0.62rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim);
  border: 1px solid var(--line); padding: 0.6em 0.75em; transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}
.journey__phases li.is-active { color: var(--neon); border-color: var(--line-strong); background: rgba(233, 233, 228, 0.06); text-shadow: 0 0 12px rgba(255, 255, 255, 0.45); }
@media (min-width: 860px) {
  .journey__phases { display: grid; grid-template-columns: 1.8fr repeat(13, 1fr); gap: 0; padding: 0; }
  .journey__phases li { grid-column: span var(--span, 1); border: 0; border-left: 1px solid var(--line); padding: 14px 2px 14px 7px; }
  .journey__phases li:first-child { border-left: 0; }
  .journey__phases li.is-active { box-shadow: inset 0 -2px 0 var(--neon); }
}
.journey__plot { position: relative; height: clamp(240px, 27vw, 320px); cursor: pointer; touch-action: pan-y; }
.journey__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.journey__sep { stroke: rgba(233, 233, 228, 0.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.journey__zero { stroke: rgba(233, 233, 228, 0.34); stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.journey__curve { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.2)); }
.journey__curve path { fill: none; stroke: var(--neon); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.journey__axis { position: absolute; left: 10px; font-size: 0.6rem; color: var(--dim); pointer-events: none; }
.journey__axis--pos { top: 9px; }
.journey__axis--neg { bottom: 9px; }
.journey__pts { position: absolute; inset: 0; }
.journey__pt {
  position: absolute; left: calc(var(--x) / 14.8 * 100%); top: calc((var(--y) + 1) / 9 * 100%);
  width: calc(100% / 14.8); min-width: 20px; height: 44px; transform: translate(-50%, -50%);
  display: grid; place-items: center; color: var(--sig); -webkit-tap-highlight-color: transparent;
}
.journey__pt.is-neg { color: var(--sig-2); }
.journey__pt.is-neu { color: var(--text); }
.journey__pt::before {
  content: ""; width: 11px; height: 11px; background: currentColor; box-shadow: 0 0 0 4px var(--shade);
  transition: transform 0.3s var(--ease), background-color 0.3s, box-shadow 0.3s;
}
.journey__pt[aria-selected="true"]::before { transform: scale(1.45); background: var(--neon); box-shadow: 0 0 0 3px var(--shade), var(--halo); }
.journey__guide {
  position: absolute; top: 0; bottom: 0; left: calc(var(--x, 0) / 14.8 * 100%); width: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.06)); transition: left 0.35s var(--ease);
}
.journey__tip {
  position: absolute; left: 0; top: calc((var(--y, 0) + 1) / 9 * 100%); z-index: 2; transform: translateY(calc(-100% - 18px));
  white-space: nowrap; pointer-events: none; font-size: 0.66rem; color: var(--night); background: var(--neon); padding: 0.5em 0.75em;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); transition: left 0.35s var(--ease), top 0.35s var(--ease);
}
.journey__tip.is-below { transform: translateY(18px); }
.journey__detail { display: grid; gap: 20px; padding: clamp(20px, 3vw, 36px); border-top: 1px solid var(--line); }
.journey__panel { display: grid; gap: 18px 48px; }
.journey__panel + .journey__panel { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.journey__panel[hidden] { display: none; }
.js .journey__panel { margin: 0; padding: 0; border: 0; min-height: 7.5rem; }
.journey__where { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 12px; color: var(--dim); font-size: 0.68rem; }
.journey__where span + span { color: var(--text); }
.journey .journey__step { font: 800 var(--step-2)/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 14px; }
.journey__emotion { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; color: var(--sig); }
.journey__mark { width: 0; height: 0; border-inline: 6px solid transparent; border-bottom: 9px solid currentColor; }
.is-neg > .journey__head .journey__emotion { color: var(--sig-2); }
.is-neg > .journey__head .journey__mark { border-bottom: 0; border-top: 9px solid currentColor; }
.is-neu > .journey__head .journey__emotion { color: var(--text); }
.is-neu > .journey__head .journey__mark { width: 12px; height: 2px; border: 0; background: currentColor; }
.journey__thought { margin: 0; }
.journey__thought p { margin: 0; max-width: 32ch; font-size: var(--step-1); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--light); }
.journey__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.journey__nav button {
  min-height: 48px; display: grid; place-items: center; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 0;
  background: rgba(14, 15, 16, 0.6); color: var(--light); font: 500 1rem/1 var(--mono); cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s, color 0.3s;
}
.journey__nav button:hover:not([aria-disabled="true"]) { border-color: var(--neon); color: var(--neon); box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.08), 0 0 18px rgba(255, 255, 255, 0.16); }
.journey__nav button[aria-disabled="true"] { opacity: 0.35; cursor: default; }
@media (min-width: 760px) {
  .journey__detail { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .journey__panel { grid-template-columns: minmax(200px, 0.8fr) 1.3fr; align-items: start; }
  .journey__nav { grid-template-columns: 48px 48px; }
  .journey__nav button { padding: 0; }
}

/* User flow (dessiné en HTML, interactif) */
.flow { margin: clamp(32px, 4vw, 48px) 0; padding: clamp(20px, 3vw, 36px); background: var(--shade); border: 1px solid var(--line-strong); }
.flow__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.flow__step { position: relative; }
.flow__step::before { content: ""; position: absolute; left: 24px; top: -22px; width: 1px; height: 22px; background: var(--line-strong); transition: background-color 0.3s, box-shadow 0.3s; }
.flow__step:first-child::before { display: none; }
.flow__step--detour { margin-left: 28px; }
.flow__step--detour::before { background: none; border-left: 1px dashed var(--line-strong); }
.flow__node {
  display: grid; gap: 8px; width: 100%; min-height: 68px; padding: 12px 14px; text-align: left; cursor: pointer;
  background: var(--night); color: var(--text); border: 1px solid var(--line-strong); border-radius: 0; font: inherit;
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}
.flow__kind { font-size: 0.6rem; letter-spacing: 0.1em; color: var(--dim); }
.flow__name { font: 800 1.3rem/1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); transition: color 0.3s; }
.flow__step--detour .flow__node { border-style: dashed; }
.flow__step--detour .flow__kind { color: var(--sig-2); }
.flow__desc { margin: 10px 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--text); max-width: 46ch; }
.flow__step.is-lit::before { background: var(--neon); box-shadow: 0 0 8px rgba(255, 255, 255, 0.7); }
.flow__step--detour.is-lit::before { background: none; box-shadow: none; border-left-color: var(--neon); }
.flow__step.is-lit .flow__node { border-color: rgba(255, 255, 255, 0.7); }
.flow__step.is-lit .flow__name { color: var(--neon); }
.flow__step.is-active .flow__node { border-color: var(--neon); background: rgba(233, 233, 228, 0.05); box-shadow: 0 0 0 1px var(--neon), 0 0 26px rgba(255, 255, 255, 0.22); }
.flow__detail { display: none; }
@media (min-width: 900px) {
  .flow__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 28px; }
  .flow__step { grid-column: var(--col); grid-row: 1; }
  .flow__step::before { left: -28px; top: 34px; width: 28px; height: 1px; }
  .flow__step--detour { grid-row: 2; margin-left: 0; }
  .flow__step--detour::before { left: 50%; top: -26px; width: 0; height: 26px; }
  .flow__name { font-size: 1.15rem; }
  .flow__node { height: 100%; align-content: start; }
  .js .flow__desc { display: none; }
  .js .flow__detail { display: block; margin-top: clamp(20px, 3vw, 32px); padding-top: clamp(20px, 3vw, 28px); border-top: 1px solid var(--line); min-height: 7rem; }
  .flow__detail h4 { font: 800 var(--step-2)/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 12px; }
  .flow__detail p { margin: 0; max-width: 56ch; font-size: var(--step-1); line-height: 1.4; color: var(--light); }
}

/* Carte de visite en 3D (recto et verso du fichier imprimable) */
.card3d {
  display: grid; justify-items: center; gap: clamp(20px, 3vw, 32px); margin: clamp(32px, 4vw, 48px) 0; overflow: hidden;
  padding: clamp(28px, 5vw, 56px) clamp(16px, 3vw, 36px) clamp(20px, 3vw, 32px); border: 1px solid var(--line-strong);
  background: radial-gradient(ellipse 60% 55% at 50% 38%, rgba(233, 233, 228, 0.13), transparent 70%), var(--shade);
}
.card3d__stage { width: min(100%, 460px); }
.card3d__card { display: grid; gap: 16px; }
.card3d__face { background: #fff; overflow: hidden; border-radius: 12px; }
.card3d__face img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-select: none; pointer-events: none; }
.card3d__controls { display: grid; justify-items: center; gap: 14px; }
.card3d__controls[hidden] { display: none; }
.card3d__hint { margin: 0; font-size: 0.64rem; color: var(--dim); }
.js .card3d__stage { position: relative; aspect-ratio: 819 / 530; margin: clamp(20px, 4vw, 44px) 0 clamp(28px, 5vw, 52px); perspective: 1100px; cursor: grab; touch-action: pan-y; }
.js .card3d__stage.is-dragging { cursor: grabbing; }
.js .card3d__stage::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -17%; height: 12%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), transparent); filter: blur(8px); pointer-events: none; }
.js .card3d__card { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-18deg); transition: transform 0.9s var(--ease); }
.js .is-dragging .card3d__card { transition: none; }
.js .card3d__card::before, .js .card3d__card::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: #c4c4bf; transform: translateZ(0.6px); }
.js .card3d__card::after { transform: translateZ(-0.6px); }
.js .card3d__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(1.6px); }
.js .card3d__face--back { transform: rotateY(180deg) translateZ(1.6px); }
.js .card3d__face::after { content: ""; position: absolute; inset: 0; background: rgb(14 15 16 / var(--dark, 0.06)); pointer-events: none; }

/* Caisson lumineux */
.callout { position: relative; background: var(--shade); color: var(--text); border: 1px solid var(--line-strong); padding: clamp(24px, 4vw, 44px); margin: clamp(32px, 4vw, 48px) 0; }
.callout::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--sig); box-shadow: 0 0 12px var(--sig), 0 0 30px -6px var(--sig); }
.callout .mono { color: var(--sig); }
.callout p { font-size: var(--step-1); line-height: 1.4; margin: 12px 0 0; max-width: 48ch; color: var(--light); }
.callout strong { color: var(--neon); }

.credits { font-size: 0.95rem; color: var(--dim); border-top: 1px solid var(--line); padding-top: 20px; margin-top: 32px; }

.next-project { position: relative; display: block; text-decoration: none; border-top: 1px solid var(--line); overflow: clip; }
.next-project::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--formwork); opacity: 0.35; }
.next-project__inner { padding-block: clamp(72px, 11vw, 176px); }
.next-project .mono { color: var(--dim); }
.next-project__title { font-size: clamp(3.5rem, 1rem + 10vw, 12rem); margin-top: 20px; transition: filter 0.4s; }
.next-project:hover .next-project__title { filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.4)); }

/* ---------- Visionneuse d'images ---------- */
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10, 11, 12, 0.97); color: var(--light); }
.lightbox::backdrop { background: rgba(10, 11, 12, 0.8); }
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px var(--gutter); border-bottom: 1px solid var(--line); }
.lightbox__caption { margin: 0; font-size: 0.95rem; color: var(--dim); }
.lightbox__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 24px; margin-left: auto; }
.lightbox__zoom { display: flex; align-items: center; gap: 12px; font-size: 0.68rem; color: var(--dim); }
.lightbox__zoom label, .lightbox__zoom output { font-size: inherit; }
.lightbox__zoom output { min-width: 6ch; color: var(--light); font-variant-numeric: tabular-nums; }
.lightbox__zoom input { -webkit-appearance: none; appearance: none; width: clamp(120px, 24vw, 260px); height: 44px; margin: 0; background: transparent; cursor: pointer; }
.lightbox__zoom input::-webkit-slider-runnable-track { height: 2px; background: var(--line-strong); }
.lightbox__zoom input::-moz-range-track { height: 2px; background: var(--line-strong); }
.lightbox__zoom input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 24px; margin-top: -11px; border: 0; border-radius: 0; background: var(--neon); box-shadow: var(--halo); }
.lightbox__zoom input::-moz-range-thumb { width: 12px; height: 24px; border: 0; border-radius: 0; background: var(--neon); box-shadow: var(--halo); }
.lightbox__body { flex: 1; display: flex; overflow: auto; padding: clamp(12px, 3vw, 40px); }
.lightbox__body img { flex: none; width: 100%; max-width: 1280px; margin: auto; background: #fff; user-select: none; -webkit-user-select: none; }
.lightbox__body.is-zoomed img { cursor: grab; }
.lightbox__body.is-dragging img { cursor: grabbing; }

/* ---------- Mouvement réduit : la lumière est déjà allumée ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ticker__track { animation: none; }
  .status__dot { animation: none; }
}

/* ---------- Page 404 ---------- */
.notfound { min-height: 62svh; display: grid; align-content: center; justify-items: start; gap: 20px; padding-block: clamp(64px, 12vh, 140px); }
.notfound h1 { margin: 0; font-size: clamp(3.25rem, 1rem + 8vw, 7.5rem); color: var(--light); max-width: 14ch; }
.notfound p { margin: 0; }