/* ==========================================================================
   Système Jemaï — feuille de style partagée
   Architecture en 3 couches : primitives → sémantiques → composants.
   Layout : grille modulaire 12 colonnes, gouttière fluide, design « dark-first ».
   ========================================================================== */

/* ---------- 1. PRIMITIVES (valeurs brutes, jamais utilisées dans un composant) ----------
   Palette alignée sur la référence Figma « Fieldnotes » : anthracite chaud, pêche, prune. */
:root {
  --char-0: #FFFFFF;
  --char-50: #F7F3EF;
  --char-100: #EFE9E3;
  --char-200: #E3DBD4;
  --char-250: #D5CEC8;
  --char-300: #CFC5BD;
  --char-400: #98918C;
  --char-450: #857D78;
  --char-500: #6B635E;
  --char-600: #4A4440;
  --char-700: #3A3430;
  --char-800: #2D2825;
  --char-850: #24201E;
  --char-900: #1F1C1A;
  --char-950: #181615;

  --peach-200: #FBE3D2;
  --peach-300: #F6CDAF;
  --peach-400: #F2BD98;
  --peach-500: #E39A6B;
  --peach-700: #9A4F24;
  --peach-800: #7F3F1B;

  --plum-300: #CDBFEA;
  --plum-400: #B9A6E0;
  --plum-600: #6B4FA8;
  --plum-900: #3C2E42;

  --sage-400: #8FA8A3;
  --rose-400: #C9969F;

  --green-400: #7FD3A6;
  --green-700: #2F6B4A;
  --amber-400: #F2CC7A;
  --amber-700: #7A5410;
  --red-400: #F29A92;
  --red-700: #A8322B;

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* Échelle d'espacement — base 4 px */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px;
  --space-9: 64px; --space-10: 80px; --space-11: 96px; --space-12: 128px;

  /* Rayons */
  --radius-2xs: 4px; --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px;
  --radius-lg: 20px; --radius-xl: 28px; --radius-full: 999px;

  /* Typographie fluide — ratio ~1.25 */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.375rem, 1.1rem + 1vw, 1.625rem);
  --text-2xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.375rem);
  --text-3xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
  --text-4xl: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);
  --text-hero: clamp(3.25rem, 1.2rem + 9.6vw, 10.5rem);

  /* Mouvement */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 560ms; --dur-5: 900ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ---------- 2. SÉMANTIQUES — thème sombre par défaut ---------- */
  --bg: var(--char-950);
  --surface: var(--char-900);
  --surface-2: var(--char-850);
  --surface-3: var(--char-800);
  --line: var(--char-800);
  --line-strong: var(--char-700);
  --line-ui: var(--char-450);
  --fg: var(--char-0);
  --fg-2: var(--char-250);
  --fg-3: var(--char-400);
  --accent: var(--peach-400);
  --accent-hover: var(--peach-300);
  --accent-fg: var(--char-950);
  --accent-soft: rgb(242 189 152 / .13);
  --accent-line: rgb(242 189 152 / .36);
  --plum: var(--plum-400);
  --plum-soft: rgb(185 166 224 / .14);
  --success: var(--green-400);
  --success-soft: rgb(127 211 166 / .12);
  --warning: var(--amber-400);
  --warning-soft: rgb(242 204 122 / .12);
  --danger: var(--red-400);
  --danger-soft: rgb(242 154 146 / .12);
  --focus: var(--peach-300);
  --scrim: rgb(12 11 10 / .72);
  --glass: rgb(24 22 21 / .74);
  --grid-dot: rgb(251 248 245 / .06);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-md: 0 8px 24px -8px rgb(0 0 0 / .6);
  --shadow-lg: 0 24px 60px -20px rgb(0 0 0 / .75);
  --spot: rgb(242 189 152 / .12);
  --orb-a: var(--plum-900);
  --orb-b: var(--peach-400);
  color-scheme: dark;

  /* ---------- 3. COMPOSANTS ---------- */
  --btn-height-sm: 36px;
  --btn-height-md: 44px;
  --btn-height-lg: 52px;
  --btn-radius: var(--radius-full);
  --card-radius: var(--radius-lg);
  --card-pad: clamp(20px, 3vw, 32px);
  --input-height: 44px;
  --input-radius: var(--radius-sm);
  --header-h: 68px;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: var(--char-50);
    --surface: var(--char-0);
    --surface-2: var(--char-100);
    --surface-3: var(--char-200);
    --line: var(--char-200);
    --line-strong: var(--char-300);
    --line-ui: var(--char-450);
    --fg: var(--char-950);
    --fg-2: var(--char-600);
    --fg-3: var(--char-500);
    --accent: var(--peach-700);
    --accent-hover: var(--peach-800);
    --accent-fg: var(--char-0);
    --accent-soft: rgb(154 79 36 / .09);
    --accent-line: rgb(154 79 36 / .3);
    --plum: var(--plum-600);
    --plum-soft: rgb(107 79 168 / .1);
    --success: var(--green-700);
    --success-soft: rgb(47 107 74 / .1);
    --warning: var(--amber-700);
    --warning-soft: rgb(122 84 16 / .1);
    --danger: var(--red-700);
    --danger-soft: rgb(168 50 43 / .08);
    --focus: var(--peach-700);
    --scrim: rgb(24 22 21 / .5);
    --glass: rgb(247 243 239 / .8);
    --grid-dot: rgb(24 22 21 / .07);
    --shadow-sm: 0 1px 2px rgb(24 22 21 / .06);
    --shadow-md: 0 8px 24px -10px rgb(24 22 21 / .18);
    --shadow-lg: 0 30px 60px -24px rgb(24 22 21 / .28);
    --spot: rgb(154 79 36 / .08);
    --orb-a: var(--plum-300);
    --orb-b: var(--peach-400);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: var(--char-50);
  --surface: var(--char-0);
  --surface-2: var(--char-100);
  --surface-3: var(--char-200);
  --line: var(--char-200);
  --line-strong: var(--char-300);
  --line-ui: var(--char-450);
  --fg: var(--char-950);
  --fg-2: var(--char-600);
  --fg-3: var(--char-500);
  --accent: var(--peach-700);
  --accent-hover: var(--peach-800);
  --accent-fg: var(--char-0);
  --accent-soft: rgb(154 79 36 / .09);
  --accent-line: rgb(154 79 36 / .3);
  --plum: var(--plum-600);
  --plum-soft: rgb(107 79 168 / .1);
  --success: var(--green-700);
  --success-soft: rgb(47 107 74 / .1);
  --warning: var(--amber-700);
  --warning-soft: rgb(122 84 16 / .1);
  --danger: var(--red-700);
  --danger-soft: rgb(168 50 43 / .08);
  --focus: var(--peach-700);
  --scrim: rgb(24 22 21 / .5);
  --glass: rgb(247 243 239 / .8);
  --grid-dot: rgb(24 22 21 / .07);
  --shadow-sm: 0 1px 2px rgb(24 22 21 / .06);
  --shadow-md: 0 8px 24px -10px rgb(24 22 21 / .18);
  --shadow-lg: 0 30px 60px -24px rgb(24 22 21 / .28);
  --spot: rgb(154 79 36 / .08);
  --orb-a: var(--plum-300);
  --orb-b: var(--peach-400);
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }

/* ==========================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; font-optical-sizing: auto; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-fg); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: .875em; }
[hidden] { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; left: 16px; top: -100px; z-index: 1000;
  padding: 12px 18px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-fg); font-weight: 600; text-decoration: none;
  transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-3)); }
.mono { font-family: var(--font-mono); }
.muted { color: var(--fg-2); }
.subtle { color: var(--fg-3); }
.tnum { font-variant-numeric: tabular-nums; }

/* Eyebrow — label technique en mono */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2);
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--accent); }
.eyebrow--plain::before { display: none; }

.lead { font-size: var(--text-md); color: var(--fg-2); max-width: 62ch; line-height: 1.65; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--glass);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; gap: var(--space-5); height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; letter-spacing: -.01em; flex-shrink: 0; }
.brand__logo { display: inline-flex; align-items: center; }
.brand__img { display: block; height: 30px; width: auto; transition: transform var(--dur-3) var(--ease-spring); }
.brand__img--light, .brand__mark { display: none; }
.brand__mark { width: 32px; height: 32px; transition: transform var(--dur-3) var(--ease-spring); }
.brand:hover .brand__img, .brand:hover .brand__mark { transform: translateY(-1px) rotate(-2deg); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .brand__img--dark { display: none; }
  :root:not([data-theme="dark"]) .brand__img--light { display: block; }
}
:root[data-theme="light"] .brand__img--dark { display: none; }
:root[data-theme="light"] .brand__img--light { display: block; }
/* Petits écrans : l'aile seule, le logo complet ne laisse pas la place aux boutons */
@media (max-width: 419px) {
  .site-header .brand__img { display: none !important; }
  .site-header .brand__mark { display: block; }
}

.nav { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.nav a {
  position: relative; padding: 8px 12px; border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 500; color: var(--fg-2); text-decoration: none;
  transition: color var(--dur-2), background-color var(--dur-2);
  white-space: nowrap;
}
.nav a:hover { color: var(--fg); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--fg); background: var(--surface-2); }
.nav a.nav__ds { color: var(--accent); }
.nav a.nav__ds:hover { background: var(--accent-soft); }

.header-tools { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--radius-full); border: 1px solid var(--line); background: transparent; color: var(--fg-2);
  cursor: pointer; transition: color var(--dur-2), border-color var(--dur-2), background-color var(--dur-2);
}
.icon-btn:hover { color: var(--fg); border-color: var(--line-strong); background: var(--surface-2); }
.icon-btn svg { width: 18px; height: 18px; }
.theme-icon-sun { display: none; }
:root[data-theme="light"] .theme-icon-sun { display: block; }
:root[data-theme="light"] .theme-icon-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-icon-sun { display: block; }
  :root:not([data-theme="dark"]) .theme-icon-moon { display: none; }
}


.menu-btn { display: none; }
@media (max-width: 1180px) {
  .nav { display: none; }
  .menu-btn { display: inline-grid; }
  .header-tools { margin-inline-start: auto; }
}

/* Menu mobile (dialog) */
.mobile-nav {
  position: fixed; inset: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  border: 0; padding: calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--gutter) var(--space-8);
  background: var(--bg); color: var(--fg);
}
.mobile-nav::backdrop { background: var(--scrim); }
.mobile-nav[open] { display: flex; flex-direction: column; gap: var(--space-6); animation: sheet-in var(--dur-3) var(--ease-out); }
.mobile-nav__top { display: flex; justify-content: space-between; align-items: center; }
.mobile-nav nav { display: flex; flex-direction: column; }
.mobile-nav nav a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -.02em; text-decoration: none;
}
.mobile-nav nav a[aria-current="page"] { color: var(--accent); }
.mobile-nav nav a span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); letter-spacing: .06em; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   BOUTONS
   ========================================================================== */
.btn {
  --_h: var(--btn-height-md);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--_h); padding: 0 22px;
  border-radius: var(--btn-radius); border: 1px solid transparent;
  font-size: var(--text-sm); font-weight: 600; letter-spacing: -.005em; line-height: 1; text-decoration: none;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2), border-color var(--dur-2), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2);
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--dur-3) var(--ease-spring); }
.btn:hover svg.arrow { transform: translateX(3px); }
.btn:active { transform: scale(.97); }
.btn--sm { --_h: var(--btn-height-sm); padding: 0 16px; font-size: var(--text-xs); }
.btn--lg { --_h: var(--btn-height-lg); padding: 0 28px; font-size: var(--text-base); }
.btn--primary { background: var(--accent); color: var(--accent-fg); }
.btn--primary:hover { background: var(--accent-hover); box-shadow: 0 10px 30px -10px var(--accent); }
.btn--secondary { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--fg); background: var(--surface-2); }
.btn--ghost { background: transparent; color: var(--fg-2); }
.btn--ghost:hover { color: var(--fg); background: var(--surface-2); }
.btn--danger { background: var(--danger); color: var(--bg); }
.btn--danger:hover { filter: brightness(1.08); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] .btn__label { opacity: .7; }
.btn--icon { padding: 0; width: var(--_h); }

.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.link {
  color: var(--accent); text-decoration: none; font-weight: 600;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size var(--dur-3) var(--ease-out);
}
.link:hover { background-size: 100% 1.5px; }

.arrow-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--text-sm); text-decoration: none; color: var(--fg); }
.arrow-link svg { width: 16px; height: 16px; transition: transform var(--dur-3) var(--ease-spring); }
.arrow-link:hover { color: var(--accent); }
.arrow-link:hover svg { transform: translateX(4px); }

/* ==========================================================================
   TAGS, BADGES, CHIPS
   ========================================================================== */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--radius-full);
  border: 1px solid var(--line-strong); color: var(--fg-2);
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.tag--accent { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--neutral { background: var(--surface-3); color: var(--fg-2); }
.badge--info { background: var(--accent-soft); color: var(--accent); }
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }

/* ==========================================================================
   CARTES & SURFACES
   ========================================================================== */
.card {
  position: relative; isolation: isolate;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius);
  padding: var(--card-pad);
  min-width: 0;
}
.card--flat { background: transparent; }
.card--raised { box-shadow: var(--shadow-md); }
a.card { display: block; text-decoration: none; color: inherit; transition: border-color var(--dur-3), transform var(--dur-3) var(--ease-out); }
a.card:hover { border-color: var(--line-strong); }
@media (prefers-reduced-motion: no-preference) {
  a.card:hover { transform: translateY(-3px); }
  a.card:active { transform: translateY(-1px) scale(.995); }
}

/* Pages voisines (cartes précédent / suivant) */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-block: var(--space-10) 0; }
a.pager__link { display: flex; flex-direction: column; gap: 10px; }
.pager__link .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.pager__link svg { width: 16px; height: 16px; transition: transform var(--dur-3) var(--ease-spring); }
.pager__link--next { text-align: right; align-items: flex-end; }
.pager__link--prev:hover svg { transform: translateX(-4px); }
.pager__link--next:hover svg { transform: translateX(4px); }
.pager__link:hover { border-color: var(--accent-line); }
.pager__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -.015em; }
@media (max-width: 639px) { .pager { grid-template-columns: 1fr; } .pager > span { display: none; } }

/* Progression de lecture : liée au défilement (CSS seul, ignorée par les navigateurs qui ne la gèrent pas),
   masquée sous prefers-reduced-motion */
.read-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .read-progress {
    display: block; position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; pointer-events: none;
    background: linear-gradient(90deg, var(--plum), var(--accent)); transform-origin: 0 50%;
    animation: read-progress linear both; animation-timeline: scroll(root);
  }
  @keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) { .read-progress { display: none !important; } }

/* Retour en haut */
.to-top { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; width: 44px; height: 44px; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-md); }
.to-top:not([hidden]) { animation: fade-up var(--dur-3) var(--ease-out) both; }
.to-top:hover svg { transform: translateY(-2px); }
.to-top svg { transition: transform var(--dur-3) var(--ease-spring); }

/* Halo qui suit le curseur (spotlight) */
.spot { --mx: 50%; --my: 50%; }
.spot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), var(--spot), transparent 60%);
  opacity: 0; transition: opacity var(--dur-3);
}
.spot:hover::before { opacity: 1; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section { padding-block: clamp(72px, 10vw, 144px); position: relative; }
.section--tight { padding-block: clamp(48px, 7vw, 96px); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: var(--space-4); margin-bottom: clamp(36px, 5vw, 64px); max-width: 760px; }
.section-head h2 { font-size: var(--text-3xl); }
.section-head--split { max-width: none; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) { .section-head--split { grid-template-columns: 1.2fr 1fr; gap: var(--space-8); } }

/* Apparition au défilement — uniquement de la translation : le contenu reste visible au repos */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}
@keyframes rise { from { transform: translateY(28px); } to { transform: none; } }

/* ==========================================================================
   HERO (accueil)
   ========================================================================== */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; gap: clamp(32px, 5vw, 64px); align-items: end;
  padding-block: clamp(48px, 8vw, 112px) clamp(48px, 6vw, 88px);
}
@media (min-width: 1000px) { .hero__inner { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
.hero__title {
  font-size: var(--text-hero); font-weight: 800; line-height: .86; letter-spacing: -0.055em;
  font-variation-settings: "wdth" 85;
  margin-block: var(--space-5) var(--space-6);
}
.hero__title .line { display: block; }
.hero__title .line--accent { color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
.hero__tagline { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; max-width: 22ch; }
.hero__tagline em { font-style: normal; color: var(--accent); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-7); }
.hero__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: var(--space-7); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); letter-spacing: .04em; }
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }

@media (prefers-reduced-motion: no-preference) {
  .hero__title .line { animation: title-in var(--dur-5) var(--ease-out) both; }
  .hero__title .line:nth-child(2) { animation-delay: 90ms; }
  .hero__tagline, .hero__ctas, .hero .eyebrow { animation: fade-up var(--dur-4) var(--ease-out) both; }
  .hero__tagline { animation-delay: 220ms; }
  .hero__ctas { animation-delay: 320ms; }
  .portrait { animation: fade-up var(--dur-5) var(--ease-out) 150ms both; }
}
@keyframes title-in { from { transform: translateY(40%); clip-path: inset(0 0 100% 0); } to { transform: none; clip-path: inset(0 0 -10% 0); } }
@keyframes fade-up { from { transform: translateY(16px); } to { transform: none; } }

/* Portrait avec annotations de spécification */
.portrait { position: relative; justify-self: center; width: min(100%, 420px); }
@media (min-width: 1000px) { .portrait { justify-self: end; } }
.portrait__frame {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  aspect-ratio: 4 / 5; max-width: 100%;
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
}
.portrait__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.portrait__frame::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08);
}
.spec {
  position: absolute; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .04em; color: var(--accent);
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.spec--top { top: -26px; left: 0; right: 0; justify-content: center; }
.spec--top::before, .spec--top::after { content: ""; flex: 1; height: 1px; background: var(--accent-line); }
.spec--side { right: -14px; top: 0; bottom: 0; writing-mode: vertical-rl; justify-content: center; }
.spec--side::before, .spec--side::after { content: ""; flex: 1; width: 1px; background: var(--accent-line); }
.portrait__chip {
  position: absolute; left: 16px; bottom: 16px; right: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius-md);
  background: rgb(24 22 21 / .62); color: #FBF8F5; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: var(--text-xs); border: 1px solid rgb(255 255 255 / .1);
}
.portrait__chip strong { font-weight: 600; font-size: var(--text-sm); display: block; }
.portrait__chip .mono { color: #D5CEC8; }
.corner { position: absolute; width: 14px; height: 14px; border-color: var(--accent); border-style: solid; border-width: 0; }
.corner--tl { top: -7px; left: -7px; border-top-width: 1.5px; border-left-width: 1.5px; }
.corner--br { bottom: -7px; right: -7px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
@media (max-width: 520px) { .spec--side { display: none; } }

/* Ruban chaos → cohérence */
.morph-control {
  display: inline-flex; align-items: center; gap: 12px; margin-top: var(--space-6);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); letter-spacing: .04em;
}
.morph-control .range { width: 140px; }

/* Slider : piste fine remplie jusqu’à la poignée (--fill), poignée de 18 px qu’on saisit et fait glisser */
.range {
  -webkit-appearance: none; appearance: none; width: 140px; height: 28px; background: transparent;
  cursor: pointer; touch-action: pan-y; --fill: 100%;
}
.range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-full); background: linear-gradient(to right, var(--accent) var(--fill), var(--line-strong) var(--fill)); }
.range::-moz-range-track { height: 4px; border-radius: var(--radius-full); background: var(--line-strong); }
.range::-moz-range-progress { height: 4px; border-radius: var(--radius-full); background: var(--accent); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--accent), 0 2px 8px rgb(0 0 0 / .3);
  cursor: grab; transition: transform .18s var(--ease-spring);
}
.range::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent), 0 2px 8px rgb(0 0 0 / .3); cursor: grab; transition: transform .18s var(--ease-spring);
}
.range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.range:hover::-moz-range-thumb { transform: scale(1.12); }
.range:active { cursor: grabbing; }
.range:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.22); }
.range:active::-moz-range-thumb { cursor: grabbing; transform: scale(1.22); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--accent), 0 0 0 6px var(--accent-line); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--accent), 0 0 0 6px var(--accent-line); }


/* Marquee de compétences */
.marquee { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--surface); }
.marquee__track { display: flex; gap: 48px; width: max-content; padding-block: 18px; }
.marquee__item { display: inline-flex; align-items: center; gap: 48px; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: -.02em; color: var(--fg-2); white-space: nowrap; }
.marquee__item::after { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 40s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   ACCUEIL — blocs
   ========================================================================== */
.about-grid { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .about-grid { grid-template-columns: 5fr 7fr; gap: var(--space-10); } }
.about-grid h2 { font-size: var(--text-3xl); }
.about-body { display: grid; gap: var(--space-5); font-size: var(--text-md); color: var(--fg-2); max-width: 64ch; }
.quote {
  position: relative; margin: var(--space-4) 0 0; padding: var(--space-6) 0 0;
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--fg);
  border-top: 1px solid var(--line);
}
.quote::before { content: "“"; position: absolute; top: -.18em; left: -.06em; font-size: 5em; line-height: 1; color: var(--accent); opacity: .9; }
.quote p { padding-top: .6em; }

/* Projets (accueil) */
.cases { display: grid; gap: 16px; }
.case-row {
  display: grid; gap: var(--space-5); align-items: start;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--card-radius); border: 1px solid var(--line); background: var(--surface);
  text-decoration: none; color: inherit; position: relative; isolation: isolate; overflow: hidden;
  transition: border-color var(--dur-3);
}
.case-row:hover { border-color: var(--accent-line); }
@media (min-width: 900px) { .case-row { grid-template-columns: 120px minmax(0, 1fr) 260px; gap: var(--space-8); } }
.case-row__visual { width: 96px; height: 96px; }
.case-row h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.case-row p { color: var(--fg-2); }
.case-row__tags { display: flex; flex-wrap: wrap; gap: 6px; align-content: start; }
@media (min-width: 900px) { .case-row__tags { justify-content: flex-end; } }
.case-row__more { margin-top: var(--space-4); }

/* Cartes blog */
.posts { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .posts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card.post-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; text-decoration: none; }
.post-card__cover { aspect-ratio: 16 / 9; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.post-card__cover canvas, .post-card__cover svg { width: 100%; height: 100%; }
.post-card__body { padding: var(--card-pad); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.post-card h3 { font-size: var(--text-xl); }
.post-card p { color: var(--fg-2); font-size: var(--text-sm); }
.post-card .arrow-link { margin-top: auto; padding-top: var(--space-3); }
.post-meta { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); letter-spacing: .04em; text-transform: uppercase; }
.post-card--featured { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .card.post-card--featured { flex-direction: row; }
  .post-card--featured .post-card__cover { aspect-ratio: auto; flex: 1.2; border-bottom: 0; border-right: 1px solid var(--line); min-height: 320px; }
  .post-card--featured .post-card__body { flex: 1; justify-content: center; }
  .post-card--featured h3 { font-size: var(--text-2xl); }
}

/* Parcours — timeline */
.timeline { position: relative; display: grid; gap: 0; }
.tl-item { display: grid; gap: var(--space-3) var(--space-8); padding-block: var(--space-6); border-top: 1px solid var(--line); }
.tl-item:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .tl-item { grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1.3fr); align-items: baseline; } }
.tl-item__years { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-3); }
.tl-item__years b { color: var(--accent); font-weight: 500; }
.tl-item h3 { font-size: var(--text-xl); }
.tl-item__co { color: var(--fg-3); font-size: var(--text-sm); margin-top: 4px; }
.tl-item p { color: var(--fg-2); }

/* Services */
.services { display: grid; gap: 16px; }
@media (min-width: 760px) { .services { grid-template-columns: 1fr 1fr; } .services > :first-child { grid-column: 1 / -1; } }
@media (min-width: 1180px) { .services { grid-template-columns: repeat(3, minmax(0, 1fr)); } .services > :first-child { grid-column: auto; } }
.service { display: flex; flex-direction: column; gap: var(--space-5); }
.service h3 { font-size: var(--text-2xl); }
.service > p { color: var(--fg-2); }
.service__list { list-style: none; display: grid; gap: 0; counter-reset: s; }
.service__list li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding-block: 14px; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.service__list li::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-family: var(--font-mono); color: var(--accent); font-size: var(--text-xs); padding-top: 3px; }
.service__list--checks li::before {
  content: ""; width: 16px; height: 16px; margin-top: 3px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.service .btn { align-self: flex-start; margin-top: auto; }

/* Impact — bento */
.bento { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); } }
.kpi { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-5); overflow: hidden; }
.kpi__value { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 700; line-height: .9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.kpi__value small { font-size: .5em; letter-spacing: -.02em; color: var(--fg-2); margin-left: 2px; }
.kpi__label { color: var(--fg-2); font-size: var(--text-sm); max-width: 24ch; }
.kpi--hero { grid-column: span 2; grid-row: span 2; background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.kpi--hero .kpi__value { font-size: clamp(5rem, 3rem + 9vw, 11rem); }
.kpi--hero .kpi__label { color: var(--accent-fg); opacity: .82; font-size: var(--text-md); }
.kpi--wide { grid-column: span 2; }
@media (max-width: 899px) { .kpi--hero { grid-row: auto; } }
.kpi__ring { width: 76px; height: 76px; flex-shrink: 0; }
.kpi__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ring-track { stroke: var(--surface-3); }
.ring-fill { stroke: var(--accent); transition: stroke-dashoffset 1.4s var(--ease-out); }
.bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.nps-scale { display: grid; gap: 6px; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-3); }
.nps-scale__track { position: relative; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--danger-soft), var(--surface-3) 50%, var(--success-soft)); }
.nps-scale__mark { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); transform: translate(-50%, -50%); }
.nps-scale__ticks { display: flex; justify-content: space-between; }

/* Contact */
.contact-grid { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.1fr; gap: var(--space-10); } }
.contact-title { font-size: var(--text-4xl); line-height: .95; letter-spacing: -.045em; }

/* ==========================================================================
   FORMULAIRES
   ========================================================================== */
.field { display: grid; gap: 8px; min-width: 0; }
.field__label { font-size: var(--text-sm); font-weight: 600; color: var(--fg); }
.field__label .req { color: var(--danger); margin-left: 2px; }
.field__help { font-size: var(--text-xs); color: var(--fg-3); }
.field__error { display: none; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 500; color: var(--danger); }
.field__error svg { width: 14px; height: 14px; flex-shrink: 0; }
.field.is-invalid .field__error { display: flex; }
.input, .textarea, .select {
  width: 100%; min-height: var(--input-height); padding: 10px 14px;
  border: 1px solid var(--line-ui); border-radius: var(--input-radius);
  background: var(--surface); color: var(--fg); font-size: var(--text-base);
  transition: border-color var(--dur-2), box-shadow var(--dur-2), background-color var(--dur-2);
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398918C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.input::placeholder, .textarea::placeholder { color: var(--fg-3); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--fg-3); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field.is-invalid .input, .field.is-invalid .textarea, .field.is-invalid .select { border-color: var(--danger); }
.field.is-invalid .input:focus, .field.is-invalid .textarea:focus { box-shadow: 0 0 0 4px var(--danger-soft); }
.input[disabled], .select[disabled] { opacity: .5; cursor: not-allowed; background: var(--surface-2); }
.form-grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }

.check, .radio { display: inline-flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: var(--text-sm); line-height: 1.45; }
.check input, .radio input {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; margin: 1px 0 0;
  width: 20px; height: 20px; border: 1.5px solid var(--line-ui); background: var(--surface);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--dur-2), border-color var(--dur-2);
}
.check input { border-radius: 6px; }
.radio input { border-radius: 50%; }
.check input::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--accent-fg); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform var(--dur-2) var(--ease-spring); }
.radio input::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-fg); transform: scale(0); transition: transform var(--dur-2) var(--ease-spring); }
.check input:checked, .radio input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.radio input:checked::after { transform: scale(1); }
.check input:disabled, .radio input:disabled { opacity: .4; cursor: not-allowed; }

.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: var(--text-sm); }
.switch input {
  appearance: none; -webkit-appearance: none; margin: 0; position: relative; flex-shrink: 0;
  width: 44px; height: 26px; border-radius: 99px; background: var(--surface-3); border: 1px solid var(--line-ui);
  cursor: pointer; transition: background-color var(--dur-2);
}
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--fg); transition: transform var(--dur-3) var(--ease-spring); }
.switch input:checked { background: var(--accent); border-color: var(--accent); }
.switch input:checked::after { transform: translateX(18px); background: var(--accent-fg); }

.segmented { display: inline-flex; padding: 4px; border-radius: var(--radius-full); background: var(--surface-2); border: 1px solid var(--line); flex-wrap: wrap; }
.segmented button { border: 0; background: transparent; padding: 8px 16px; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 500; color: var(--fg-2); cursor: pointer; transition: background-color var(--dur-2), color var(--dur-2); }
/* Variante compacte (sélecteur de langue de l'en-tête) */
.segmented--sm { padding: 3px; flex-wrap: nowrap; }
.segmented--sm button { min-width: 36px; height: 32px; padding: 0 10px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; }
.segmented button[aria-pressed="true"], .segmented button[aria-selected="true"] { background: var(--fg); color: var(--bg); font-weight: 600; box-shadow: var(--shadow-sm); }

/* ==========================================================================
   FEEDBACK — alertes, toasts, progression
   ========================================================================== */
.alert { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 16px 18px; border-radius: var(--radius-md); border: 1px solid; font-size: var(--text-sm); }
.alert svg { width: 20px; height: 20px; margin-top: 1px; }
.alert strong { display: block; font-weight: 600; margin-bottom: 2px; color: var(--fg); }
.alert p { color: var(--fg-2); }
.alert--info { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.alert--success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 35%, transparent); color: var(--success); }
.alert--warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 35%, transparent); color: var(--warning); }
.alert--danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); }

.toast-region { position: fixed; z-index: 200; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.toast {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: start;
  padding: 14px 16px; border-radius: var(--radius-md); background: var(--fg); color: var(--bg);
  box-shadow: var(--shadow-lg); font-size: var(--text-sm);
  animation: toast-in var(--dur-3) var(--ease-spring);
}
.toast svg { width: 20px; height: 20px; }
.toast button { border: 0; background: transparent; color: inherit; opacity: .7; cursor: pointer; padding: 0 2px; }
.toast--out { animation: toast-out var(--dur-2) var(--ease-in-out) forwards; }
@keyframes toast-in { from { transform: translateY(16px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { transform: translateY(8px); opacity: 0; } }

.progress { display: grid; gap: 8px; }
.progress__top { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--fg-2); }
.skeleton { border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%) 0 0 / 200% 100%; }
@media (prefers-reduced-motion: no-preference) { .skeleton { animation: shimmer 1.6s linear infinite; } }
@keyframes shimmer { to { background-position: -200% 0; } }

.tooltip-wrap { position: relative; display: inline-flex; }
.tooltip {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px);
  padding: 6px 10px; border-radius: var(--radius-xs); background: var(--fg); color: var(--bg);
  font-size: var(--text-xs); font-weight: 500; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--fg); }
.tooltip-wrap:hover .tooltip, .tooltip-wrap:focus-within .tooltip { opacity: 1; transform: translate(-50%, 0); }

.avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: var(--text-sm); overflow: hidden; border: 2px solid var(--surface); flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.avatar--sm { width: 32px; height: 32px; font-size: var(--text-xs); }
.avatar--lg { width: 56px; height: 56px; font-size: var(--text-md); }
.avatar-group { display: flex; }
.avatar-group .avatar + .avatar { margin-left: -10px; }

/* ==========================================================================
   NAVIGATION DE CONTENU — onglets, accordéon, fil d'Ariane, pagination
   ========================================================================== */
.tabs [role="tablist"] { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs [role="tab"] {
  position: relative; border: 0; background: transparent; padding: 12px 14px; cursor: pointer; white-space: nowrap;
  font-size: var(--text-sm); font-weight: 500; color: var(--fg-2);
}
.tabs [role="tab"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform var(--dur-3) var(--ease-out); }
.tabs [role="tab"]:hover { color: var(--fg); }
.tabs [role="tab"][aria-selected="true"] { color: var(--fg); }
.tabs [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }
.tabs [role="tabpanel"] { padding-top: var(--space-5); }

.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 2px; cursor: pointer; list-style: none; font-weight: 600;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; width: 20px; height: 20px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-3) var(--ease-out); color: var(--fg-3);
}
.accordion details[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.accordion .acc-body { padding: 0 2px 20px; color: var(--fg-2); display: grid; gap: 12px; }

.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--text-sm); color: var(--fg-3); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.breadcrumb a { color: var(--fg-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current="page"] { color: var(--fg); }

.pagination { display: flex; gap: 6px; flex-wrap: wrap; }
.pagination a, .pagination span { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); text-decoration: none; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--fg-2); }
.pagination a:hover { border-color: var(--line-strong); color: var(--fg); }
.pagination [aria-current="page"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* Modale */
.modal { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--surface); color: var(--fg); box-shadow: var(--shadow-lg); }
.modal::backdrop { background: var(--scrim); backdrop-filter: blur(4px); }
.modal[open] { animation: modal-in var(--dur-3) var(--ease-spring); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.modal__head { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 24px 24px 0; }
.modal__head h3 { font-size: var(--text-xl); }
.modal__body { padding: 12px 24px 24px; color: var(--fg-2); }
.modal__foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 16px 24px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* Tableau */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); background: var(--surface-2); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.table td code { white-space: nowrap; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

kbd { display: inline-block; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; background: var(--surface-2); font-size: .75rem; line-height: 1.3; }

/* Code */
.code {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2);
  font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.7; min-width: 0;
}
.code pre { margin: 0; padding: 18px 20px; overflow-x: auto; }
.code__bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); font-size: var(--text-xs); color: var(--fg-3); }
.code .k { color: var(--accent); }
.code .s { color: var(--success); }
.code .c { color: var(--fg-3); }
.code .n { color: var(--plum); }
:not(pre) > code { padding: 2px 6px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); font-size: .85em; }

/* ==========================================================================
   DOCUMENTATION — gabarit avec barre latérale
   ========================================================================== */
.page-hero { padding-block: clamp(48px, 8vw, 104px) clamp(32px, 5vw, 64px); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.page-hero h1 { font-size: var(--text-4xl); font-weight: 800; letter-spacing: -0.05em; line-height: .92; margin-block: var(--space-4) var(--space-5); font-variation-settings: "wdth" 90; }
.page-hero .lead { font-size: var(--text-lg); }
.page-hero__grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid-dot) 1px, transparent 1px), linear-gradient(90deg, var(--grid-dot) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 80% 0%, #000, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 80% 0%, #000, transparent 70%); }
.page-hero > .wrap { position: relative; }

.docs { display: grid; gap: var(--space-8); padding-block: var(--space-9) var(--space-12); }
@media (min-width: 1080px) { .docs { grid-template-columns: 232px minmax(0, 1fr); gap: var(--space-10); } }
.docs-side { display: none; }
@media (min-width: 1080px) {
  .docs-side { display: block; position: sticky; top: calc(var(--header-h) + 32px + env(safe-area-inset-top, 0px)); align-self: start; max-height: calc(100vh - var(--header-h) - 64px); overflow-y: auto; }
}
.docs-side h2 { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; margin: 0 0 10px 12px; }
.docs-side ul { list-style: none; display: grid; gap: 2px; margin-bottom: 28px; }
.docs-side a { display: block; padding: 7px 12px; border-radius: var(--radius-xs); font-size: var(--text-sm); color: var(--fg-2); text-decoration: none; border-left: 2px solid transparent; }
.docs-side a:hover { color: var(--fg); background: var(--surface); }
.docs-side a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.docs-side a.is-active { color: var(--fg); border-left-color: var(--accent); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
.docs-mobile-nav { display: block; }
@media (min-width: 1080px) { .docs-mobile-nav { display: none; } }

.prose { min-width: 0; max-width: 820px; }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-11); padding-top: var(--space-5); scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--text-xl); margin-top: var(--space-8); }
.prose h4 { font-size: var(--text-md); margin-top: var(--space-6); font-family: var(--font-body); letter-spacing: -.01em; }
.prose p, .prose li { color: var(--fg-2); font-size: 1.0625rem; line-height: 1.75; }
.prose strong { color: var(--fg); font-weight: 600; }
.prose ul:not(.breadcrumb ul):not(.cluster):not(.steps), .prose ol:not(.breadcrumb ol):not(.steps) { padding-left: 1.25em; display: grid; gap: 8px; }
.prose li::marker { color: var(--accent); }
.prose a:not(.btn):not(.card):not(.arrow-link):not(.tag):not(.breadcrumb a):not(.pagination a) { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; }
.prose blockquote { margin: var(--space-7) 0; padding: 4px 0 4px var(--space-5); border-left: 2px solid var(--accent); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.3; letter-spacing: -.015em; color: var(--fg); }
.prose .wide { max-width: none; }
.prose figure { margin: var(--space-7) 0; }
.prose figcaption { margin-top: 10px; font-size: var(--text-xs); color: var(--fg-3); font-family: var(--font-mono); }
.docs-main { min-width: 0; display: grid; gap: 0; }
.docs-main > .prose { max-width: 860px; }

.section-anchor { display: flex; align-items: baseline; gap: 12px; }
.section-anchor .num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); font-weight: 500; letter-spacing: .06em; }

/* Bloc de démo de composant */
.demo { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); margin-top: var(--space-5); }
.demo__stage {
  padding: clamp(24px, 4vw, 44px); display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px); background-size: 16px 16px;
  min-width: 0;
}
.demo__stage--col { flex-direction: column; align-items: stretch; }
.demo__stage--center { justify-content: center; }
.demo__foot { border-top: 1px solid var(--line); padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--text-xs); color: var(--fg-3); font-family: var(--font-mono); background: var(--surface-2); }
.demo__foot b { color: var(--fg-2); font-weight: 500; }

.dodont { display: grid; gap: 16px; margin-top: var(--space-5); }
@media (min-width: 720px) { .dodont { grid-template-columns: 1fr 1fr; } }
.dodont > div { border-radius: var(--radius-md); border: 1px solid var(--line); padding: 18px 20px; background: var(--surface); }
.dodont h4 { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.dodont .do { border-top: 3px solid var(--success); }
.dodont .do h4 { color: var(--success); }
.dodont .dont { border-top: 3px solid var(--danger); }
.dodont .dont h4 { color: var(--danger); }
.dodont ul { padding-left: 1.1em; display: grid; gap: 6px; }
.dodont li { font-size: var(--text-sm); color: var(--fg-2); line-height: 1.6; }

.grid-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid-cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.mini-card { display: flex; flex-direction: column; gap: 10px; }
.mini-card h3 { font-size: var(--text-lg); letter-spacing: -.015em; }
.mini-card p { color: var(--fg-2); font-size: var(--text-sm); line-height: 1.6; }
.mini-card__icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.mini-card__icon svg { width: 20px; height: 20px; }

/* Nuancier */
.swatches { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.swatch { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.swatch__chip { height: 76px; position: relative; }
.swatch__chip span { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600; background: rgb(255 255 255 / .85); color: #181615; }
.swatch__meta { padding: 10px 12px; display: grid; gap: 2px; font-size: var(--text-xs); }
.swatch__meta b { font-weight: 600; font-size: var(--text-sm); }
.swatch__meta code { background: none; border: 0; padding: 0; color: var(--fg-3); }
.ramp { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); }
.ramp div { aspect-ratio: 1 / 1.4; display: flex; align-items: flex-end; padding: 6px; font-family: var(--font-mono); font-size: 0.5625rem; }
@media (max-width: 640px) { .ramp { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.type-row { display: grid; gap: 8px 32px; padding-block: 22px; border-top: 1px solid var(--line); align-items: baseline; }
@media (min-width: 760px) { .type-row { grid-template-columns: 170px minmax(0, 1fr); } }
.type-row__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); display: grid; gap: 2px; }
.type-row__meta b { color: var(--accent); font-weight: 500; }
.type-row__sample { min-width: 0; overflow-wrap: anywhere; }

.space-row { display: grid; grid-template-columns: 90px 60px minmax(0, 1fr); gap: 16px; align-items: center; padding-block: 8px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-2); }
.space-row__bar { height: 14px; border-radius: 3px; background: var(--accent); opacity: .85; max-width: 100%; }

.radius-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); }
.radius-grid > div { display: grid; gap: 10px; justify-items: start; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-2); }
.radius-grid .box { width: 88px; height: 88px; border: 1.5px solid var(--accent); background: var(--accent-soft); }

.elev-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); padding: 28px; border-radius: var(--radius-lg); background: var(--surface-2); }
.elev-grid > div { height: 120px; border-radius: var(--radius-md); background: var(--surface); display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-2); border: 1px solid var(--line); }

.motion-grid { display: grid; gap: 12px; }
.motion-row { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 16px; align-items: center; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-2); }
.motion-track { position: relative; height: 36px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.motion-ball { position: absolute; top: 5px; left: 5px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); }
.motion-grid.is-playing .motion-ball { left: calc(100% - 29px); }

/* Diagramme d'architecture des tokens */
.layers { display: grid; gap: 12px; }
.layer { display: grid; gap: 12px 24px; padding: 20px 22px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); align-items: center; }
@media (min-width: 760px) { .layer { grid-template-columns: 200px minmax(0, 1fr); } }
.layer__name { display: grid; gap: 4px; }
.layer__name b { font-family: var(--font-display); font-size: var(--text-lg); }
.layer__name span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); }
.layer__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.layer__chips code { font-size: .75rem; }
.layer-arrow { display: flex; justify-content: center; color: var(--fg-3); }
.layer-arrow svg { width: 20px; height: 20px; }

/* Playground */
.playground { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
@media (min-width: 900px) { .playground { grid-template-columns: 320px minmax(0, 1fr); } }
.playground__controls { padding: 24px; display: grid; gap: 22px; align-content: start; border-bottom: 1px solid var(--line); background: var(--surface-2); }
@media (min-width: 900px) { .playground__controls { border-bottom: 0; border-right: 1px solid var(--line); } }
.playground__controls label { display: grid; gap: 8px; font-size: var(--text-sm); font-weight: 600; }
.playground__controls output { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); font-weight: 400; }
.playground__controls .range { width: 100%; }
.playground__preview { padding: clamp(20px, 4vw, 40px); display: grid; gap: 20px; align-content: start; min-width: 0; }
.pg-card { border-radius: var(--pg-radius, 20px); padding: calc(var(--pg-space, 8px) * 3); background: var(--pg-surface, #fff); color: var(--pg-fg, #181615); border: 1px solid var(--pg-line, #E3DBD4); display: grid; gap: calc(var(--pg-space, 8px) * 2); font-family: var(--font-body); }
.pg-card h4 { font-family: var(--font-display); font-size: calc(var(--pg-type, 16px) * 1.5); margin: 0; letter-spacing: -.02em; }
.pg-card p { font-size: var(--pg-type, 16px); color: var(--pg-fg-2, #4A4440); }
.pg-btn { justify-self: start; border: 0; border-radius: calc(var(--pg-radius, 20px) * .6); padding: calc(var(--pg-space, 8px) * 1.4) calc(var(--pg-space, 8px) * 2.6); background: var(--pg-accent, #9A4F24); color: var(--pg-on-accent, #fff); font-weight: 600; font-size: calc(var(--pg-type, 16px) * .9); }
.pg-chip { display: inline-flex; padding: 4px 10px; border-radius: 99px; background: var(--pg-accent-soft, #FBE3D2); color: var(--pg-accent-ink, #7F3F1B); font-size: 12px; font-weight: 600; justify-self: start; }
.contrast-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; font-family: var(--font-mono); font-size: var(--text-xs); border: 1px solid var(--line); }
.contrast-pill.ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.contrast-pill.ko { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

/* Modèle de maturité */
.maturity { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); counter-reset: lvl; }
.maturity__lvl { position: relative; padding: 20px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); display: grid; gap: 8px; align-content: start; }
.maturity__lvl::before { counter-increment: lvl; content: "Niveau " counter(lvl); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); letter-spacing: .06em; text-transform: uppercase; }
.maturity__lvl h3 { font-size: var(--text-lg); }
.maturity__lvl p { font-size: var(--text-sm); color: var(--fg-2); line-height: 1.55; }
.maturity__bar { height: 4px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.maturity__bar span { display: block; height: 100%; background: var(--accent); }
.maturity__lvl.is-current { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* Steps / processus */
.steps { list-style: none; display: grid; gap: 0; counter-reset: st; padding: 0 !important; }
.steps > li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding-bottom: 28px; }
.steps > li::before { counter-increment: st; content: counter(st); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; z-index: 1; }
.steps > li::after { content: ""; position: absolute; left: 17.5px; top: 36px; bottom: 0; width: 1px; background: var(--line-strong); }
.steps > li:last-child::after { display: none; }
.steps h4 { margin: 6px 0 6px !important; font-size: var(--text-md); }
.steps p { font-size: var(--text-sm) !important; }

/* Callout */
.callout { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 20px 22px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.callout svg { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.callout p { font-size: var(--text-sm) !important; margin: 0 !important; }
.callout strong { display: block; margin-bottom: 4px; }

/* Stat chips inline */
.stat-strip { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--line); }
.stat-strip > div { background: var(--surface); padding: 18px 20px; display: grid; gap: 4px; }
.stat-strip b { font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat-strip span { font-size: var(--text-xs); color: var(--fg-3); }

/* Article */
.article-head { padding-block: clamp(48px, 8vw, 104px) clamp(32px, 4vw, 48px); }
.article-head h1 { font-size: var(--text-4xl); font-weight: 800; line-height: .95; letter-spacing: -0.045em; max-width: 18ch; margin-block: var(--space-5); }
.article-head .lead { font-size: var(--text-lg); }
.article-cover { aspect-ratio: 21 / 9; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); max-width: 100%; }
.article-cover canvas { width: 100%; height: 100%; }
.article-body { display: grid; gap: var(--space-9); padding-block: var(--space-9) var(--space-12); }
@media (min-width: 1080px) { .article-body { grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-11); } }
.article-aside { display: none; }
@media (min-width: 1080px) { .article-aside { display: grid; gap: 24px; align-content: start; position: sticky; top: calc(var(--header-h) + 32px); align-self: start; } }
.article-aside h2 { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; margin-bottom: 10px; }
.article-aside ol { list-style: none; display: grid; gap: 4px; }
.article-aside ol a { font-size: var(--text-sm); color: var(--fg-2); text-decoration: none; display: block; padding: 4px 0 4px 12px; border-left: 1px solid var(--line); }
.article-aside ol a:hover, .article-aside ol a.is-active { color: var(--fg); border-left-color: var(--accent); }
.author { display: flex; align-items: center; gap: 12px; font-size: var(--text-sm); }
.author b { display: block; font-weight: 600; }
.author span { color: var(--fg-3); font-size: var(--text-xs); }
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  .read-progress { animation: grow linear both; animation-timeline: scroll(root); }
}
@keyframes grow { to { transform: scaleX(1); } }

.next-read { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* Glossaire */
.glossary-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: var(--space-5); }
.glossary-tools .input { max-width: 360px; }
.glossary { display: grid; gap: 0; border-top: 1px solid var(--line); }
.glossary dt { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: -.01em; padding-top: 18px; color: var(--fg); }
.glossary dd { margin: 4px 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--fg-2); font-size: var(--text-sm); line-height: 1.65; }
.glossary .g-item { display: contents; }

/* Checklist interactive */
.checklist { display: grid; gap: 28px; }
.checklist fieldset { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 20px 8px; margin: 0; background: var(--surface); min-width: 0; }
.checklist legend { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); padding: 0 8px; margin-left: -8px; }
.checklist .check { display: flex; padding-block: 10px; border-top: 1px solid var(--line); width: 100%; color: var(--fg-2); }
.checklist .check:first-of-type { border-top: 0; }
.checklist .check input:checked + span { color: var(--fg); }
.score-card { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-radius: var(--radius-md); border: 1px solid var(--accent-line); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.score-card b { font-family: var(--font-display); font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }
.score-card .bar { flex: 1; min-width: 140px; }

/* Quiz de maturité */
.quiz { display: grid; gap: 18px; }
.quiz fieldset { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 20px; margin: 0; background: var(--surface); display: grid; gap: 10px; min-width: 0; }
.quiz legend { font-weight: 600; padding: 0 6px; margin-left: -6px; color: var(--fg); }
.quiz-result { padding: 24px; border-radius: var(--radius-lg); background: var(--accent-soft); border: 1px solid var(--accent-line); display: grid; gap: 8px; }
.quiz-result b { font-family: var(--font-display); font-size: var(--text-2xl); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); padding-block: var(--space-11) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.footer-top { display: grid; gap: var(--space-8); }
@media (min-width: 640px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .footer-top { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); } }
.footer-top h2 { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; margin-bottom: 14px; }
.footer-top ul { list-style: none; display: grid; gap: 8px; }
.footer-top a:not(.btn) { color: var(--fg-2); text-decoration: none; font-size: var(--text-sm); }
.footer-top a:not(.btn):hover { color: var(--accent); }
.footer-pitch { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; max-width: 22ch; }
.footer-word {
  margin-top: var(--space-10); font-family: var(--font-display); font-weight: 800; letter-spacing: -0.06em; line-height: .78;
  font-size: clamp(3.5rem, 15vw, 15rem); color: transparent; -webkit-text-stroke: 1px var(--line-strong);
  white-space: nowrap; user-select: none; font-variation-settings: "wdth" 80;
}
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); font-size: var(--text-xs); color: var(--fg-3); font-family: var(--font-mono); }

/* ==========================================================================
   UTILITAIRES DE MISE EN PAGE
   ========================================================================== */
.split { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.center { text-align: center; }
.cta-band { display: grid; gap: 24px; padding: clamp(28px, 5vw, 56px); border-radius: var(--radius-xl); background: var(--fg); color: var(--bg); position: relative; overflow: hidden; }
@media (min-width: 900px) { .cta-band { grid-template-columns: 1fr auto; align-items: center; } }
.cta-band h2 { font-size: var(--text-3xl); color: var(--bg); }
.cta-band p { color: color-mix(in srgb, var(--bg) 72%, var(--fg)); max-width: 52ch; margin-top: 10px; }
.cta-band .btn--primary { background: var(--bg); color: var(--fg); }
.cta-band .btn--primary:hover { background: var(--surface-2); box-shadow: none; }

/* Mouvement réduit : tout est neutralisé */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .site-footer, .toast-region, .hero__canvas, .read-progress { display: none !important; }
}

/* ==========================================================================
   MOTION & ÉLÉMENTS GRAPHIQUES 2026
   Tout ce bloc est neutralisé par la règle prefers-reduced-motion ci-dessus
   (durées ramenées à ~0) ; les états de repos restent lisibles.
   ========================================================================== */

/* Transitions de page natives (navigation entre documents) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 220ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in 380ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
.site-header { view-transition-name: site-header; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* Grain : texture très légère qui donne de la matière aux aplats */
.grain { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Lueur qui suit le pointeur dans le hero */
.hero__glow { position: absolute; z-index: 0; width: 640px; height: 640px; border-radius: 50%; pointer-events: none; left: 0; top: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%);
  transform: translate(var(--gx, 60vw), var(--gy, 10vh)) translate(-50%, -50%); filter: blur(10px); opacity: .9; transition: transform 600ms var(--ease-out); }

/* Mot clé en dégradé animé */
.sheen { background: linear-gradient(100deg, var(--accent) 0%, var(--plum) 45%, var(--accent) 90%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: no-preference) { .sheen { animation: sheen 6s var(--ease-in-out) infinite alternate; } }
@keyframes sheen { to { background-position: 100% 0; } }

/* Bordure lumineuse en rotation (cartes vedettes) */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.glow-border { position: relative; isolation: isolate; border-color: transparent !important; }
.glow-border::after {
  content: ""; position: absolute; inset: -1px; z-index: -2; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--angle), var(--line-strong) 0 55%, var(--accent) 70%, var(--plum) 80%, var(--line-strong) 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (prefers-reduced-motion: no-preference) { .glow-border::after { animation: spin-angle 7s linear infinite; } }
@keyframes spin-angle { to { --angle: 360deg; } }

/* Texte qui s'allume au défilement (mot par mot) */
.manifesto { font-family: var(--font-display); font-size: clamp(1.75rem, 1rem + 3.4vw, 4rem); font-weight: 650; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.manifesto .w { display: inline-block; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .manifesto .w { animation: word-on linear both; animation-timeline: view(); animation-range: cover 10% cover 38%; }
  }
}
@keyframes word-on { from { opacity: .16; filter: blur(2px); } to { opacity: 1; filter: none; } }
.manifesto em { font-style: normal; color: var(--accent); }

/* Titres de section : apparition par masque, parallaxe douce */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal-title { animation: clip-up linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .parallax { animation: drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes clip-up { from { clip-path: inset(0 0 100% 0); transform: translateY(24px); } to { clip-path: inset(0 0 -20% 0); transform: none; } }
@keyframes drift { from { transform: translateY(40px); } to { transform: translateY(-40px); } }

/* Boutons magnétiques */
.magnetic { transition: transform 280ms var(--ease-spring), background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2); }

/* Piliers IA */
.pillars { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.pillar { display: flex; flex-direction: column; gap: 14px; min-height: 300px; overflow: hidden; }
.pillar h3 { font-size: var(--text-xl); }
.pillar p { color: var(--fg-2); font-size: var(--text-sm); }
.pillar__viz { height: 96px; margin-top: auto; color: var(--fg-3); }
.pillar__viz svg { width: 100%; height: 100%; }
.pillar__k { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); letter-spacing: .06em; text-transform: uppercase; }

/* Flux animés dans les SVG (signaux qui circulent) */
.flow { stroke-dasharray: 4 10; }
@media (prefers-reduced-motion: no-preference) {
  .flow { animation: flow 1.6s linear infinite; }
  .pulse-dot { animation: pulse-dot 2.4s var(--ease-in-out) infinite; transform-box: fill-box; transform-origin: center; }
  .orbit { animation: orbit 14s linear infinite; transform-box: view-box; transform-origin: 50% 50%; }
  .blink { animation: blink 1.1s steps(2) infinite; }
}
@keyframes flow { to { stroke-dashoffset: -28; } }
@keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .6; } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: 0; } }

/* Récit scénarisé au défilement (section collante) */
.story { display: grid; gap: var(--space-8); }
@media (min-width: 1000px) { .story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-10); } }
.story__visual { position: relative; }
@media (min-width: 1000px) { .story__visual { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; height: min(560px, calc(100vh - var(--header-h) - 80px)); } }
.story__screen { position: relative; height: 100%; min-height: 360px; border-radius: var(--radius-xl); border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.story__screen::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px); background-size: 18px 18px; }
.story__pane { position: absolute; inset: 0; display: grid; place-items: center; padding: 28px 28px 48px; opacity: 0; transform: translateY(16px) scale(.98); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); }
.story__pane.is-active { opacity: 1; transform: none; }
.story__pane svg { width: 100%; max-width: 440px; height: auto; max-height: 100%; }
.story__progress { position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; gap: 6px; z-index: 2; }
.story__progress span { flex: 1; height: 3px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.story__progress span::after { content: ""; display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 500ms var(--ease-out); }
.story__progress span.is-done::after { transform: scaleX(1); }
.story__steps { list-style: none; display: grid; gap: 0; }
.story__step { padding-block: clamp(28px, 7vh, 72px); border-top: 1px solid var(--line); transition: opacity 400ms var(--ease-out); }
.story__step { position: relative; padding-left: 22px; }
.story__step::before { content: ""; position: absolute; left: 0; top: clamp(28px, 7vh, 72px); bottom: clamp(28px, 7vh, 72px); width: 2px; border-radius: 2px; background: var(--line-strong); transition: background-color 400ms var(--ease-out); }
.js .story__step:not(.is-active) h3 { color: var(--fg-2); }
.story__step:last-child { border-bottom: 1px solid var(--line); }
.js .story__step.is-active::before { background: var(--accent); }
.story__step .k { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); letter-spacing: .08em; text-transform: uppercase; }
.story__step h3 { font-size: var(--text-2xl); margin-block: 10px 12px; }
.story__step p { color: var(--fg-2); max-width: 52ch; }
.story__step ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
@media (max-width: 999px) { .story__visual { display: none; } .js .story__step:not(.is-active) h3 { color: var(--fg); } }

/* Rail horizontal de cas d'usage */
.rail-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: var(--space-6); }
.rail-nav { display: flex; gap: 8px; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(280px, 82vw), 340px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; overscroll-behavior-x: contain; }
.rail > * { scroll-snap-align: start; }
.uc-card { display: flex; flex-direction: column; gap: 14px; min-height: 340px; }
.uc-card h3 { font-size: var(--text-lg); letter-spacing: -.015em; }
.uc-card p { color: var(--fg-2); font-size: var(--text-sm); }
.uc-card__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.uc-meter { display: grid; gap: 8px; margin-top: auto; }
.uc-meter__row { display: grid; grid-template-columns: 82px 1fr 28px; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-3); }
.uc-meter__row .bar { height: 6px; }
.uc-meter__row b { color: var(--fg-2); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

/* Écran de terminal / prompt */
.term { border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-2); overflow: hidden; font-family: var(--font-mono); font-size: 0.8125rem; min-width: 0; }
.term__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--fg-3); font-size: var(--text-xs); }
.term__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); display: inline-block; }
.term__body { padding: 16px 18px; display: grid; gap: 8px; line-height: 1.6; color: var(--fg-2); overflow-x: auto; }
.term__body .ok { color: var(--success); }
.term__body .ko { color: var(--danger); }
.term__body .acc { color: var(--accent); }
.caret { display: inline-block; width: 8px; height: 1em; background: var(--accent); vertical-align: -2px; }

/* Matrice valeur × faisabilité */
.matrix { position: relative; aspect-ratio: 1 / 1; max-width: 560px; width: 100%; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.matrix__q { position: absolute; width: 50%; height: 50%; display: grid; padding: 10px 12px; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-3); letter-spacing: .04em; text-transform: uppercase; }
.matrix__q--tl { left: 0; top: 0; border-right: 1px dashed var(--line-strong); border-bottom: 1px dashed var(--line-strong); }
.matrix__q--tr { right: 0; top: 0; justify-items: end; border-bottom: 1px dashed var(--line-strong); background: var(--accent-soft); color: var(--accent); }
.matrix__q--bl { left: 0; bottom: 0; align-items: end; border-right: 1px dashed var(--line-strong); }
.matrix__q--br { right: 0; bottom: 0; justify-items: end; align-items: end; }
.matrix__dot { position: absolute; width: var(--dot, 32px); height: var(--dot, 32px); margin: calc(var(--dot, 32px) / -2) 0 0 calc(var(--dot, 32px) / -2); font-size: calc(var(--dot, 32px) * .34); border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; background: var(--fg); color: var(--bg); border: 2px solid var(--surface); cursor: pointer; padding: 0; transition: transform var(--dur-3) var(--ease-spring), background-color var(--dur-2), opacity var(--dur-3); }
.matrix__dot:hover, .matrix__dot:focus-visible, .matrix__dot.is-active { background: var(--accent); color: var(--accent-fg); box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 4px var(--accent); }
.matrix__dot.is-dim { opacity: .2; }
/* Anneaux intérieurs uniquement : rien ne déborde sur les points voisins ; le contour de focus (3 px) est compté dans l'écart */
.matrix__dot:focus-visible { outline-offset: 1px; border-radius: 50%; }
.matrix__dot[data-risk="eleve"] { box-shadow: inset 0 0 0 3px var(--danger); }
.matrix__dot[data-risk="eleve"]:hover, .matrix__dot[data-risk="eleve"]:focus-visible, .matrix__dot[data-risk="eleve"].is-active { box-shadow: inset 0 0 0 3px var(--danger), inset 0 0 0 5px var(--bg); }
.matrix-wrap { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 1000px) { .matrix-wrap { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); } }

/* Pastilles de niveau de risque */
.risk { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.risk--faible { background: var(--success-soft); color: var(--success); }
.risk--limite { background: var(--warning-soft); color: var(--warning); }
.risk--eleve { background: var(--danger-soft); color: var(--danger); }

/* Pyramide des risques (AI Act) */
.pyramid { display: grid; gap: 6px; justify-items: center; }
.pyramid > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius-sm); font-size: var(--text-sm); width: 100%; min-width: 0; }
.pyramid > div b { font-family: var(--font-display); font-size: var(--text-md); }
.pyramid > div span { font-size: var(--text-xs); color: var(--fg-2); text-align: right; }
.pyramid .p1 { max-width: 46%; background: var(--danger-soft); color: var(--danger); }
.pyramid .p2 { max-width: 64%; background: var(--warning-soft); color: var(--warning); }
.pyramid .p3 { max-width: 82%; background: var(--accent-soft); color: var(--accent); }
.pyramid .p4 { max-width: 100%; background: var(--success-soft); color: var(--success); }
@media (max-width: 760px) { .pyramid > div { max-width: 100% !important; flex-direction: column; align-items: flex-start; } .pyramid > div span { text-align: left; } }

/* Accueil : badge de rôle et rotation de mots */
.ai-hero-badge { display: flex; width: fit-content; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 99px; border: 1px solid var(--accent-line); background: var(--accent-soft); font-size: var(--text-xs); font-weight: 600; color: var(--fg); max-width: 100%; }
.ai-hero-badge b { padding: 3px 9px; border-radius: 99px; background: var(--accent); color: var(--accent-fg); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .06em; }
.rot-line { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .32em; }
.rotator { display: inline-grid; overflow: hidden; padding-block: .12em; margin-block: -.12em; }
.rotator > span { grid-area: 1 / 1; white-space: nowrap; transition: transform 700ms var(--ease-out), opacity 500ms; }
.rotator > span:not(.is-on) { transform: translateY(105%); opacity: 0; }
.rotator > span.is-off { transform: translateY(-105%); opacity: 0; }

/* Bandeau « stack » IA */
.logos-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-tool { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: var(--text-sm); color: var(--fg-2); }
.chip-tool svg { width: 16px; height: 16px; color: var(--accent); }

/* Frise du parcours : défilement horizontal, du plus récent au plus ancien, sans dates */
.frise-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: var(--space-5); }
.frise {
  list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(320px, 84vw), 400px); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 20px; margin: 0;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; overscroll-behavior-x: contain;
}
.frise:focus-visible { outline-offset: 6px; }
.frise__stop { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 18px; scroll-snap-align: start; min-width: 0; }
/* ligne continue : chaque étape prolonge le trait jusqu'à la suivante (gap compris) */
.frise__stop::before { content: ""; position: absolute; top: 13px; left: 14px; right: -20px; height: 2px; background: var(--line-strong); }
.frise__stop:last-child::before { right: 0; background: linear-gradient(90deg, var(--line-strong), transparent); }
.frise__stop--now::before { background: linear-gradient(90deg, var(--accent), var(--line-strong)); }
.frise__marker { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; height: 28px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.frise__marker::before { content: ""; width: 14px; height: 14px; margin-left: 7px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-ui); flex-shrink: 0; }
.frise__marker span { padding: 3px 10px; border-radius: 99px; background: var(--bg); box-shadow: inset 0 0 0 100px var(--accent-soft); border: 1px solid var(--accent-line); }
.frise__stop--now .frise__marker::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
@media (prefers-reduced-motion: no-preference) { .frise__stop--now .frise__marker::before { animation: pulse-ring 2.4s var(--ease-in-out) infinite; } }
@keyframes pulse-ring { 0%, 100% { box-shadow: 0 0 0 5px var(--accent-soft); } 50% { box-shadow: 0 0 0 10px transparent; } }
.frise__card { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.frise__card h3 { font-size: var(--text-lg); line-height: 1.2; letter-spacing: -.015em; }
.frise__card > p:not(.frise__co) { color: var(--fg-2); font-size: var(--text-sm); line-height: 1.6; }
.frise__co { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); letter-spacing: -.02em; line-height: 1.1; color: var(--fg); }
.frise__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); letter-spacing: .04em; margin-top: -6px; }
.frise__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }

/* Correctifs d'audit */
.kpi--hero .kpi__value small { color: inherit; }
.scroll-cue { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-5); margin-left: var(--space-5); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); text-decoration: none; }
.scroll-cue:hover { color: var(--accent); }
.scroll-cue svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) { .scroll-cue svg { animation: cue 2s var(--ease-in-out) infinite; } }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.is-paused, .is-paused *, .is-paused::before, .is-paused::after, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; }

/* Sommaire secondaire de l'accueil */
.subnav { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 40; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.subnav__inner { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 8px; }
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav a { flex-shrink: 0; padding: 6px 12px; border-radius: 99px; font-size: var(--text-sm); color: var(--fg-2); text-decoration: none; transition: color var(--dur-2), background-color var(--dur-2); }
.subnav a:hover { color: var(--fg); background: var(--surface-2); }
.subnav a.is-active { color: var(--accent-fg); background: var(--accent); }
html:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 64px); }

@media (max-width: 600px) { .table th { white-space: normal; } .table th, .table td { padding: 10px 12px; } }
.stat-strip span a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }

.tooltip-wrap.tt-hidden .tooltip { opacity: 0 !important; }
.audit-block { display: grid; gap: 28px; }
.docs-jump { display: flex; gap: 8px; align-items: end; }
.docs-jump .field { flex: 1; }

@media (max-width: 899px) { .kpi__row { flex-wrap: wrap; } .kpi__ring { width: 56px; height: 56px; } }

/* Section courante dans la navigation (sous-pages) */
.nav a[aria-current="true"] { color: var(--fg); background: var(--surface-2); }
.mobile-nav nav a[aria-current="true"] { color: var(--accent); }
/* Tableaux empilés en cartes sur petit écran */
@media (max-width: 480px) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td, .table--stack th[scope="row"] { display: block; width: 100%; }
  .table--stack tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .table--stack tr:last-child { border-bottom: 0; }
  .table--stack td, .table--stack th[scope="row"] { border: 0; padding: 6px 14px; }
  .table--stack td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 2px; }
}

@media (max-width: 420px) { .matrix__q { font-size: 0.5625rem; } }