/* =============================================================
   PDS BRAND GUIDE — fichier CSS monolithique, sans étape de build.

   TABLE DES MATIÈRES
     L.  32   Tokens (:root) + thèmes dark/light
     L. 131   Layout (sidenav, theme toggle, contenu)
     L. 253   Shells page / section / block
     L. 342   Cover (section 00)
     L. 425   Logo (section 07 + helpers)
     L. 655   Architecture (section 08)
     L. 699   Shape (section 09)
     L. 749   Colors (section 10)
     L. 842   Typography (section 11)
     L. 908   Iconography (section 12)
     L. 968   Imagery (section 13)
     L.1087   Motion + animations (section 14)
     L.1212   Voice / Tone (sections 15–16)
     L.1319   Footer
     L.1333   Responsive (max-width: 980px)
     L.1355   Additions — classes externalisées pour le HTML vanilla
     L.1608   Reveal animations (scope .is-revealed)
     L.1714   Scrollbar masquée (fenêtre + sidenav + contenu)
     L.1723   Sections Design System (01-05) — token-table, pattern-list…
   Note : la section "Brand" (06) n'a pas de bloc CSS propre —
   elle réutilise .pillar-card / .audience-card définis plus bas.

   Convention : BEM-ish (bloc__élément--modificateur). Toutes les couleurs
   et espacements via tokens (var(--…)). Les valeurs #000/#fff codées en
   dur sont des invariants intentionnels (logo inversé sur vert, mocks photo).
   ============================================================= */

:root {
  /* primary stays green across themes */
  --primary: #00FF41;
  --primary-dim: #00CC33;
  --primary-glow: rgba(0, 255, 65, 0.35);
  --primary-soft: rgba(0, 255, 65, 0.08);

  --amber: #FFD700;
  --cyan: #00D4FF;
  --red: #FF4444;
  --orange: #FF8800;

  --font-mono: 'JetBrains Mono', monospace;
  --font-display: 'Space Grotesk', sans-serif;

  /* spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* radius — corner sharpness scale */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* motion — timing tokens */
  --t-instant:    80ms;
  --t-quick:     160ms;
  --t-base:      300ms;
  --t-cinematic: 2400ms;
  --t-scan:      2500ms;  /* scanline, loaders longs — documenté dans §14 Timing */
}

/* DARK */
body.theme-dark {
  --bg: #000000;
  --bg-2: #080D16;
  --bg-3: #0F1A2A;
  --bg-card: rgba(8, 13, 22, 0.9);
  --fg: #D8E2EC;
  --fg-dim: #8899AA;
  --fg-strong: #FFFFFF;
  --border: rgba(0, 255, 65, 0.18);
  --border-soft: #1E3044;
  --shadow: 0 0 24px rgba(0, 255, 65, 0.06);
}

/* LIGHT — paper-like, ink black, green retained */
body.theme-light {
  --bg: #F4F2EA;
  --bg-2: #ECEAE0;
  --bg-3: #E0DDD0;
  --bg-card: #FFFFFF;
  --fg: #1B232E;
  --fg-dim: #5A6470;
  --fg-strong: #050810;
  --border: rgba(0, 90, 25, 0.22);
  --border-soft: #C8C4B6;
  --shadow: 0 1px 0 rgba(0,0,0,0.04), 0 12px 30px rgba(20,30,15,0.06);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-mono);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.65;
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
  overflow-x: hidden;
}

/* Texture CRT : ligne sur 2 pixels, opacité 0.008 pour ne pas noircir le fond.
   z-index 1 = sous le layout (z-index 2), au-dessus du body. */
body.theme-dark::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 1px, rgba(0, 255, 65, 0.008) 1px 2px);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dim); }

ul { list-style: none; }

/* ============================================================
   LAYOUT — sticky side nav + content column
   ============================================================ */
.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  position: relative;
  z-index: 2;
}

/* SIDE NAV */
.sidenav {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  padding: var(--s-6) var(--s-5);
  border-right: 1px solid var(--border-soft);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  overflow-y: auto;
}

.sidenav__brand {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: var(--s-4);
}
.sidenav__brand-prompt { color: var(--primary); font-family: var(--font-mono); font-weight: 700; font-size: 22px; opacity: 0.7; }
.sidenav__brand-name   { color: var(--fg-strong); font-family: var(--font-mono); font-weight: 700; font-size: 22px; }
.sidenav__brand-cursor { display: inline-block; width: 9px; height: 3px; background: var(--primary); margin-left: 4px; align-self: center; animation: blink 1s step-end infinite; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.sidenav__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-bottom: 1px dashed var(--border);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-2);
  line-height: 1.7;
}
.sidenav__meta b { color: var(--primary); font-weight: 500; }

.sidenav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidenav__link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 7px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-dim);
  border-left: 2px solid transparent;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.sidenav__link:hover {
  color: var(--fg-strong);
  background: var(--primary-soft);
}
.sidenav__link.is-active {
  color: var(--primary);
  border-left-color: var(--primary);
  background: var(--primary-soft);
}
.sidenav__link-num {
  color: var(--primary);
  opacity: 0.7;
  font-size: 10px;
  min-width: 22px;
}

.sidenav__theme {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px dashed var(--border);
}
.theme-toggle {
  display: flex;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg);
}
.theme-toggle button {
  flex: 1;
  background: transparent;
  border: none;
  padding: 7px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-dim);
  cursor: pointer;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.theme-toggle button.is-active {
  background: var(--primary);
  color: #000;
  font-weight: 600;
}

/* CONTENT */
.content {
  padding: var(--s-8) var(--s-8);
  max-width: 1100px;
}

/* ============================================================
   PAGE / SECTION shells
   ============================================================ */
.page {
  padding: var(--s-8) 0 var(--s-9);
  border-bottom: 1px solid var(--border-soft);
  scroll-margin-top: var(--s-5);
}
.page:last-child { border-bottom: none; }

.page__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--s-5);
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-5);
  border-bottom: 1px dashed var(--border);
}
.page__id {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--primary);
  letter-spacing: 3px;
  margin-bottom: var(--s-3);
  text-transform: uppercase;
}
.page__id::before { content: '$ '; opacity: 0.7; }
.page__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  color: var(--fg-strong);
  line-height: 1.05;
  letter-spacing: -1.5px;
}
.page__lede {
  font-family: var(--font-display);
  color: var(--fg-dim);
  font-size: 1rem;
  max-width: 380px;
  text-align: right;
  line-height: 1.55;
}

.block { margin-bottom: var(--s-7); }
.block__label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--primary);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.block__label::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--primary);
  display: inline-block;
}
.block__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--fg-strong);
  margin-bottom: var(--s-3);
  letter-spacing: -0.3px;
}
.block__desc {
  font-family: var(--font-display);
  color: var(--fg-dim);
  font-size: 0.95rem;
  max-width: 720px;
  margin-bottom: var(--s-5);
}
/* Variante intro : pas de margin-bottom, utilisée pour le texte qui précède
   un composant visuel dans un block (favicon, signatures, hover policy…). */
.block__lede {
  font-family: var(--font-display);
  color: var(--fg-dim);
  font-size: 0.95rem;
  max-width: 720px;
  line-height: 1.55;
  margin-top: 0;
}

/* ============================================================
   COVER PAGE
   ============================================================ */
.cover {
  min-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s-7) 0 var(--s-8);
  border-bottom: 1px solid var(--border-soft);
  position: relative;
}
.cover__top {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed var(--border);
  padding-bottom: var(--s-4);
}
.cover__top b { color: var(--primary); font-weight: 500; }

.cover__hero {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin: var(--s-8) 0;
}

.cover__big-mark {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(80px, 16vw, 200px);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  letter-spacing: -4px;
}
.cover__big-mark .gt { color: var(--primary); opacity: 0.7; }
.cover__big-mark .name { color: var(--fg-strong); }
.cover__big-mark .cur {
  display: inline-block;
  width: 36px; height: 14px;
  background: var(--primary);
  margin-left: var(--s-3);
  margin-bottom: 18px;
  box-shadow: 0 0 30px var(--primary-glow);
  animation: blink 1s step-end infinite;
}
body.theme-light .cover__big-mark .cur { box-shadow: none; }

.cover__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  color: var(--fg);
  max-width: 720px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.3px;
}
.cover__tagline span { color: var(--primary); }

.cover__bottom {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  border-top: 1px dashed var(--border);
  padding-top: var(--s-5);
}
.cover__bottom > div {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.7;
}
.cover__bottom b { display: block; color: var(--fg-strong); font-size: 11px; font-weight: 500; margin-bottom: 4px; }

/* ============================================================
   LOGO
   ============================================================ */
.logo-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: var(--s-9) var(--s-7);
  margin-bottom: var(--s-5);
  position: relative;
  overflow: hidden;
}
.logo-hero::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px dashed var(--border);
  pointer-events: none;
}
.logo-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}
.logo-mark--lg {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 96px;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  letter-spacing: -3px;
}
.logo-mark--md { font-size: 56px; gap: 4px; letter-spacing: -2px; }
.logo-mark--sm { font-size: 28px; gap: 3px; letter-spacing: -1px; }
.logo-mark--xs { font-size: 16px; gap: 2px; letter-spacing: -0.5px; }
.logo-mark .gt { color: var(--primary); opacity: 0.7; }
.logo-mark .name { color: var(--fg-strong); }
.logo-mark .cur {
  display: inline-block;
  background: var(--primary);
  animation: blink 1s step-end infinite;
}
.logo-mark--lg .cur { width: 18px; height: 7px; margin-left: 6px; margin-bottom: 12px; }
.logo-mark--md .cur { width: 11px; height: 5px; margin-left: 4px; margin-bottom: 8px; }
.logo-mark--sm .cur { width: 6px; height: 3px;  margin-left: 3px; margin-bottom: 4px; }
.logo-mark--xs .cur { width: 4px; height: 2px;  margin-left: 2px; margin-bottom: 3px; }

.logo-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 8px;
  color: var(--fg);
  margin-top: var(--s-3);
  text-align: center;
}

/* logo variant grid */
.logo-variants {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  background: var(--border);
}
.logo-variant {
  background: var(--bg-2);
  padding: var(--s-6) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-height: 220px;
  position: relative;
}
.logo-variant--inverted {
  background: var(--primary);
}
.logo-variant--inverted .logo-mark .gt { color: #000; opacity: 0.5; }
.logo-variant--inverted .logo-mark .name { color: #000; }
.logo-variant--inverted .logo-mark .cur { background: #000; box-shadow: none; }
.logo-variant--inverted .logo-wordmark { color: #000; }
.logo-variant--inverted .logo-variant__label,
.logo-variant--inverted .logo-variant__caption { color: #002912; }
.logo-variant--inverted .logo-variant__caption b { color: #000; }

.logo-variant__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--primary);
  text-transform: uppercase;
}
.logo-variant__art {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-variant__caption {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  border-top: 1px dashed var(--border);
  padding-top: var(--s-3);
  line-height: 1.5;
}
.logo-variant__caption b { color: var(--fg-strong); }
.logo-variant--inverted .logo-variant__caption { border-top-color: rgba(0,0,0,0.2); }

/* clear space + min size diagram */
.logo-spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.logo-spec__card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: var(--s-5);
}
.logo-spec__card h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--primary);
  margin-bottom: var(--s-4);
  text-transform: uppercase;
}
.logo-spec__card p {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  margin-top: var(--s-4);
  line-height: 1.6;
}
.logo-spec__card p b { color: var(--fg-strong); }

.clear-space-diagram {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* ::after supprimé : aucune règle de dimension/position — rendu 0×0, invisible */
.clear-space-diagram::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px dashed var(--primary);
  opacity: 0.5;
}
.clear-space-diagram .x-label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--primary);
  background: var(--bg);
  padding: 0 4px;
}
.clear-space-diagram .x-label.top { top: 6px; left: 50%; transform: translateX(-50%); }
.clear-space-diagram .x-label.left { left: 6px; top: 50%; transform: translateY(-50%) rotate(-90deg); }

.minsize-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  padding: var(--s-5) var(--s-4);
  gap: var(--s-4);
  min-height: 130px;
}
.minsize-row__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.minsize-row__item span {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-dim);
  letter-spacing: 1px;
}

/* logo do/don't */
.logo-rules {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.logo-rule {
  background: var(--bg-2);
  padding: var(--s-5) var(--s-4);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  position: relative;
}
.logo-rule__icon {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.logo-rule__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-top: 1px dashed var(--border);
  padding-top: var(--s-3);
}
.logo-rule--do .logo-rule__label { color: var(--primary); }
.logo-rule--do .logo-rule__label::before { content: '✓ DO · '; opacity: 0.8; }
.logo-rule--dont .logo-rule__label { color: var(--red); }
.logo-rule--dont .logo-rule__label::before { content: '✕ DON\'T · '; opacity: 0.8; }

/* ============================================================
   ARCHITECTURE
   ============================================================ */
.arch-tree {
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: var(--s-5) var(--s-6);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
  line-height: 1.9;
  white-space: pre;
  overflow-x: auto;
}
.arch-tree .root { color: var(--primary); font-weight: 700; }
.arch-tree .branch { color: var(--fg-dim); }
.arch-tree .leaf { color: var(--fg-strong); }
.arch-tree .desc { color: var(--fg-dim); font-size: 11px; }

.arch-table {
  width: 100%;
  border: 1px solid var(--border);
  border-collapse: collapse;
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 12px;
}
.arch-table th, .arch-table td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px dashed var(--border);
  vertical-align: top;
}
.arch-table th {
  background: var(--bg-3);
  color: var(--primary);
  font-weight: 600;
  letter-spacing: 1.5px;
  font-size: 10px;
  text-transform: uppercase;
}
.arch-table td:first-child { color: var(--fg-strong); font-weight: 500; }
.arch-table tr:last-child td { border-bottom: none; }

/* ============================================================
   SHAPE
   ============================================================ */
.shape-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.shape-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: var(--s-5);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.shape-card__demo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  padding: var(--s-4);
}
.shape-card__name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--primary);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.shape-card__note {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-dim);
  line-height: 1.5;
}

/* ASCII pattern boxes */
.ascii-box {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--primary);
  line-height: 1.2;
  white-space: pre;
  letter-spacing: 0;
}

/* ============================================================
   COLORS
   ============================================================ */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
.swatch {
  border: 1px solid var(--border);
  background: var(--bg-2);
  overflow: hidden;
}
.swatch__chip {
  height: 110px;
  position: relative;
}
.swatch__chip::after {
  content: attr(data-hex);
  position: absolute;
  bottom: 8px; left: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 2px 6px;
  border-radius: 2px;
}
.swatch__meta {
  padding: var(--s-3) var(--s-4) var(--s-4);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  line-height: 1.6;
}
.swatch__meta b { display: block; color: var(--fg-strong); font-size: 12px; font-weight: 500; }
.swatch__role {
  color: var(--primary);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 2px 0;
}

/* ratio bar */
.ratio-bar {
  display: flex;
  height: 56px;
  border: 1px solid var(--border);
  margin: var(--s-4) 0 var(--s-3);
}
/* .ratio-bar > div supprimé : spécificité 0,1,1 écrasait .ratio-bar__seg (0,1,0)
   → letter-spacing: 1px prévalait sur 1.5px. Le style est dans .ratio-bar__seg (Additions). */
.ratio-bar__legend {
  display: flex;
  gap: var(--s-5);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.ratio-bar__legend > span { display: flex; align-items: center; gap: 6px; }
/* .ratio-bar__legend i de base supprimé : doublon sans margin-right.
   La règle complète est dans la section Additions. */

/* contrast pairs */
.contrast-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.contrast-card {
  border: 1px solid var(--border);
  padding: var(--s-5);
  font-family: var(--font-mono);
}
.contrast-card__sample {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
}
.contrast-card__ratio {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px dashed currentColor;
  opacity: 0.7;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.typo-card {
  border: 1px solid var(--border);
  background: var(--bg-2);
  padding: var(--s-5) var(--s-6);
  margin-bottom: var(--s-4);
}
.typo-card__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px dashed var(--border);
}
.typo-card__name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--fg-strong);
  letter-spacing: -0.5px;
}
.typo-card__role {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--primary);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.typo-card__weights {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  margin-bottom: var(--s-4);
}
.typo-card__weights b { color: var(--fg); }

.scale-table {
  width: 100%;
  border-collapse: collapse;
}
.scale-table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px dashed var(--border);
  vertical-align: baseline;
}
.scale-table td:first-child {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  width: 110px;
  white-space: nowrap;
}
.scale-table td:last-child {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-dim);
  text-align: right;
  width: 130px;
  white-space: nowrap;
}
.scale-table tr:last-child td { border-bottom: none; }

/* ============================================================
   ICONOGRAPHY
   ============================================================ */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.icon-cell {
  background: var(--bg-2);
  padding: var(--s-4) var(--s-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  min-height: 100px;
  text-align: center;
}
.icon-cell__svg {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.icon-cell__name {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-dim);
  letter-spacing: 0.5px;
}

.icon-spec {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.icon-spec__card {
  border: 1px solid var(--border);
  background: var(--bg-2);
  padding: var(--s-5);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  line-height: 1.6;
}
.icon-spec__card b {
  display: block;
  color: var(--primary);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.icon-spec__card span { color: var(--fg-strong); display: block; font-size: 13px; font-weight: 500; }

/* ============================================================
   IMAGERY
   ============================================================ */
.imagery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.imagery-card {
  border: 1px solid var(--border);
  background: var(--bg-2);
  overflow: hidden;
}
.imagery-card__preview {
  height: 200px;
  position: relative;
  overflow: hidden;
  background: #050810;
  display: flex;
  align-items: center;
  justify-content: center;
}
.imagery-card__caption {
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  border-top: 1px dashed var(--border);
}
.imagery-card__caption b { color: var(--fg-strong); display: block; margin-bottom: 2px; }

/* placeholders styled like terminal-look photos */
.img-mock {
  width: 100%; height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
}
.img-mock--matrix {
  background:
    radial-gradient(circle at 30% 30%, rgba(0,255,65,0.18), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(0,255,65,0.12), transparent 60%),
    #020608;
}
.img-mock--matrix::before {
  content: '01101001 11010110\\A 10110010 00111101\\A 01001101 11100100\\A 11010001 01001110\\A 00110110 10101011';
  white-space: pre;  /* pre-wrap supprimé : était immédiatement écrasé par cette déclaration */
  font-size: 10px;
  color: var(--primary);
  opacity: 0.55;
  letter-spacing: 2px;
  line-height: 1.4;
  text-align: center;
  padding: 16px;
}
.img-mock--noise {
  background: repeating-linear-gradient(0deg, #080D16 0 1px, #0E1828 1px 2px),
              repeating-linear-gradient(90deg, transparent 0 1px, rgba(0,255,65,0.04) 1px 2px);
}
.img-mock--noise::before {
  content: '— NO SIGNAL —';
  color: var(--primary);
  font-size: 11px;
  letter-spacing: 4px;
  background: rgba(0,0,0,0.7);
  padding: 4px 10px;
  border: 1px solid var(--primary);
}
.img-mock--portrait {
  background:
    linear-gradient(135deg, rgba(0,255,65,0.1), transparent 60%),
    radial-gradient(ellipse at 50% 40%, #1B2638, #050810);
}
.img-mock--portrait::before {
  content: '◣ PORTRAIT';
  font-size: 11px;
  color: var(--primary);
  letter-spacing: 3px;
}

/* treatment do/don't strip */
.treatment-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: var(--s-4);
}
.treatment {
  background: var(--bg-2);
  padding: var(--s-4);
  min-height: 130px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.treatment__demo {
  flex: 1;
  background: #050810;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
}
.treatment__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.treatment--do .treatment__label { color: var(--primary); }
.treatment--do .treatment__label::before { content: '✓ '; }
.treatment--dont .treatment__label { color: var(--red); }
.treatment--dont .treatment__label::before { content: '✕ '; }

/* ============================================================
   VIDEO / MOTION
   ============================================================ */
.motion-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}
.motion-card {
  border: 1px solid var(--border);
  background: var(--bg-2);
  padding: var(--s-5);
}
.motion-card__demo {
  height: 160px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-3);
  overflow: hidden;
  position: relative;
}
.motion-card__title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--primary);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.motion-card__desc {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  line-height: 1.6;
}

/* Animations */
@keyframes m-typewriter {
  0%, 5%   { width: 0; }
  60%, 100% { width: 100%; }
}
@keyframes m-glow {
  0%, 100% { text-shadow: 0 0 4px var(--primary-glow); }
  50%      { text-shadow: 0 0 24px var(--primary), 0 0 6px var(--primary); }
}
@keyframes m-scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
@keyframes m-fadeline {
  0% { opacity: 0; transform: translateX(-12px); }
  100% { opacity: 1; transform: translateX(0); }
}

.demo-typewriter {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid var(--primary);
  animation: m-typewriter 3.2s steps(24) infinite, blink 0.7s step-end infinite;
}
.demo-glow {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  animation: m-glow 2.4s ease-in-out infinite;
}
.demo-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, var(--primary), transparent);
  height: 30%;
  animation: m-scan 2.5s linear infinite;
  opacity: 0.35;
}
.demo-scan-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg);
  letter-spacing: 2px;
  z-index: 2;
}
.demo-stagger > div {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
  opacity: 0;
  animation: m-fadeline 0.5s ease-out forwards;
}
.demo-stagger > div:nth-child(1) { animation-delay: 0s; }
.demo-stagger > div:nth-child(2) { animation-delay: 0.18s; }
.demo-stagger > div:nth-child(3) { animation-delay: 0.36s; }
.demo-stagger > div:nth-child(4) { animation-delay: 0.54s; }
.demo-stagger > div b { color: var(--primary); }

/* timing table */
.timing-table {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg-2);
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
}
.timing-table th, .timing-table td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px dashed var(--border);
}
.timing-table th {
  background: var(--bg-3);
  color: var(--primary);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.timing-table td:first-child { color: var(--fg-strong); }
.timing-table tr:last-child td { border-bottom: none; }

/* ============================================================
   VOICE / TONE
   ============================================================ */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}
.voice-card {
  border: 1px solid var(--border);
  background: var(--bg-2);
  padding: var(--s-5);
}
.voice-card--do { border-left: 3px solid var(--primary); }
.voice-card--dont { border-left: 3px solid var(--red); }
.voice-card__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: var(--s-4);
  text-transform: uppercase;
}
.voice-card--do .voice-card__label { color: var(--primary); }
.voice-card--do .voice-card__label::before { content: '$ '; }
.voice-card--dont .voice-card__label { color: var(--red); }
.voice-card--dont .voice-card__label::before { content: '! '; }
.voice-card ul { padding: 0; margin: 0; }
.voice-card li {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg);
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  line-height: 1.5;
}
.voice-card li:last-child { border: none; }
.voice-card li b { color: var(--primary); }
.voice-card--dont li b { color: var(--red); }

/* tone matrix */
.tone-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.tone-card {
  border: 1px solid var(--border);
  background: var(--bg-2);
  padding: var(--s-5);
}
.tone-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--fg-strong);
  font-size: 1.05rem;
  margin-bottom: var(--s-2);
}
.tone-card__context {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--primary);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.tone-card__example {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg);
  background: var(--bg);
  border-left: 2px solid var(--primary);
  padding: var(--s-3) var(--s-4);
  line-height: 1.6;
}
.tone-card__example::before { content: '"'; color: var(--primary); }
.tone-card__example::after { content: '"'; color: var(--primary); }

/* copy examples */
.copy-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.copy-pair__col {
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: var(--s-4);
}
.copy-pair__col--good { border-left: 3px solid var(--primary); }
.copy-pair__col--bad  { border-left: 3px solid var(--red); }
.copy-pair__col h5 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.copy-pair__col--good h5 { color: var(--primary); }
.copy-pair__col--bad h5 { color: var(--red); }
.copy-pair__col p {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--fg);
  line-height: 1.55;
}

/* ============================================================
   FOOTER
   ============================================================ */
.cguide-footer {
  padding: var(--s-7) 0 var(--s-8);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 1px;
  border-top: 1px dashed var(--border);
}
.cguide-footer .term { color: var(--primary); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .sidenav {
    position: relative; height: auto;
    border-right: none; border-bottom: 1px solid var(--border-soft);
  }
  .content { padding: var(--s-5) var(--s-5); }
  .page__head { grid-template-columns: 1fr; }
  .page__lede { text-align: left; max-width: none; }
  .logo-variants { grid-template-columns: 1fr; }
  .logo-rules, .palette-grid, .icon-grid, .shape-grid, .imagery-grid, .treatment-row, .tone-matrix {
    grid-template-columns: repeat(2, 1fr);
  }
  .icon-grid { grid-template-columns: repeat(4, 1fr); }
  .voice-grid, .motion-grid, .copy-pair, .logo-spec, .contrast-grid { grid-template-columns: 1fr; }
  .cover__bottom { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   ADDITIONS — classes for inline-styled blocks
   (originally inline React styles, externalized for vanilla HTML)
   ============================================================ */

/* prose paragraphs in display family */
.bg-prose {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--fg);
  max-width: 720px;
  line-height: 1.6;
  margin-top: var(--s-3);
}

/* BRAND — pillars */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
.pillar-card {
  border: 1px solid var(--border);
  background: var(--bg-2);
  padding: var(--s-5);
}
.pillar-card__num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--primary);
  letter-spacing: 2px;
  margin-bottom: var(--s-2);
}
.pillar-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--fg-strong);
  margin-bottom: 6px;
}
.pillar-card__desc {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  line-height: 1.6;
}

/* BRAND — audience */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.audience-card {
  border-left: 2px solid var(--primary);
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-dim);
  line-height: 1.6;
}
.audience-card b {
  color: var(--fg-strong);
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

/* LOGO — bad-state demos */
.logo-mark.bg-on-green .gt { color: #000; opacity: 0.5; }
.logo-mark.bg-on-green .name { color: #000; }
.logo-mark.bg-on-green .cur { background: #000; box-shadow: none; }

.logo-mark.bg-bad-gradient .gt { color: #ff00ff; }
.logo-mark.bg-bad-gradient .name {
  background: linear-gradient(45deg, #ff00ff, #00ffff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.logo-mark.bg-bad-gradient .cur { background: #00ffff; }

.bg-bad-gradient-icon {
  background: linear-gradient(45deg, #ff00ff, #00ffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* SHAPE — demo blocks */
.shape-demo {
  width: 96px; height: 96px;
}
.shape-demo--grid {
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, var(--border) 7px 8px),
    repeating-linear-gradient(90deg, transparent 0 7px, var(--border) 7px 8px);
  border: 1px solid var(--primary);
}
.shape-demo--corners {
  width: 90px; height: 90px;
  border: 2px solid var(--primary);
  box-shadow: 8px 8px 0 var(--primary-soft);
}
.shape-demo--dashed {
  width: 90px; height: 90px;
  border: 1px dashed var(--primary);
}

/* SHAPE — layout cadres */
.layout-cadres {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.layout-cadre {
  border: 1px solid var(--border);
  background: var(--bg-2);
  padding: 16px;
}
.layout-cadre__label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--primary);
  letter-spacing: 2px;
  margin-bottom: var(--s-2);
}
.layout-cadre__demo {
  display: grid;
  gap: 6px;
  height: 100px;
}
.layout-cadre__demo--3col   { grid-template-columns: 1.4fr 1fr 0.75fr; }
.layout-cadre__demo--sidebar{ grid-template-columns: 0.4fr 1fr; }
.layout-cell { background: var(--bg); }
.layout-cell--ghost  { background: var(--bg);          border: 1px dashed var(--border); }
.layout-cell--accent { background: var(--primary-soft); border: 1px solid var(--primary); }

/* COLORS — ratio bar segments + légende des couleurs */
/* .ratio-bar déclaré dans §Colors ci-dessus (avec margin) — doublon supprimé ici */
.ratio-bar__seg {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.ratio-bar__seg--bg   { flex: 60; background: var(--bg);   color: var(--fg); }
.ratio-bar__seg--surf { flex: 30; background: var(--bg-2); color: var(--fg); }
.ratio-bar__seg--prim { flex: 10; background: var(--primary); color: #000; font-weight: 700; }

.ratio-bar__legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: middle; }
.ratio-i--bg   { background: var(--bg);     border: 1px solid var(--border); }
.ratio-i--surf { background: var(--bg-2);   border: 1px solid var(--border); }
.ratio-i--prim { background: var(--primary); }

.ratio-note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  margin-top: 12px;
}
.ratio-note b { color: var(--fg-strong); }

/* TYPO — samples */
.typo-sample--hero {
  font-family: var(--font-display); font-weight: 700;
  font-size: 3rem; letter-spacing: -1.5px; color: var(--fg-strong);
}
.typo-sample--h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2rem; letter-spacing: -1px; color: var(--fg-strong);
}
.typo-sample--h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.5rem; color: var(--fg-strong);
}
.typo-sample--lede {
  font-family: var(--font-display);
  font-size: 1.1rem; color: var(--fg);
}
.typo-sample--body {
  font-family: var(--font-display);
  font-size: 1rem; color: var(--fg);
}
.typo-sample--code {
  font-family: var(--font-mono);
  font-size: 15px; color: var(--primary);
}
.typo-sample--mono-body {
  font-family: var(--font-mono);
  font-size: 14px; color: var(--fg);
}
.typo-sample--mono-ui {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--fg);
}
.typo-sample--mono-meta {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--fg-dim);
  letter-spacing: 2px; text-transform: uppercase;
}

/* IMAGERY — treatment demos */
.treatment__demo--duotone   { background: linear-gradient(135deg, #050810 0%, #0F1A2A 60%, #0A2210 100%); }
.treatment__demo--desat     { background: #080D16; filter: grayscale(0.7); }
.treatment__demo--saturated { background: linear-gradient(45deg, #ff5b5b, #ffd700, #5bff8d, #5bbeff); }
.treatment__demo--stock     { background: #fff; position: relative; }
.treatment__demo--stock span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #999; font-size: 10px; font-family: var(--font-mono);
  letter-spacing: 2px;
}

/* MOTION — scan demo wrap (was inline) */
.demo-scan-wrap { position: relative; background: #050810; }

/* MOTION — don'ts list */
.motion-donts {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg);
  line-height: 2;
  padding-left: 0;
  list-style: none;
}
.motion-donts b { color: var(--primary); }

/* TONE — signature grid */
.signature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.signature-line {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--primary);
  border-left: 2px solid var(--primary);
  padding: 8px 14px;
  background: var(--bg-2);
}

/* Responsive — additions */
@media (max-width: 980px) {
  .pillar-grid    { grid-template-columns: repeat(2, 1fr); }
  .audience-grid  { grid-template-columns: 1fr; }
  .layout-cadres  { grid-template-columns: 1fr; }
  .signature-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   REVEAL ANIMATIONS — section entre dans le viewport, JS pose .is-revealed.
   Réutilise le vocabulaire motion de §14 (m-typewriter / m-glow / m-scan /
   m-fadeline). Chaque section ne joue le cycle qu'une seule fois.
   ============================================================= */

@keyframes bg-reveal-typewriter {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes bg-reveal-fadeline {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Section kicker — typewriter when section enters */
.page .page__id {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  max-width: 100%;
}
.page.is-revealed .page__id {
  animation: bg-reveal-typewriter 1.4s steps(24) both;
}

/* Cover — glow pulse + scanline overlay. Le caret .cur garde son blink natif (cf. ligne 375). */
.cover.is-revealed .cover__big-mark {
  animation: m-glow var(--t-cinematic) ease-in-out 0.4s 1;
}
.cover { position: relative; overflow: hidden; }
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  height: 30%;
  background: linear-gradient(transparent, var(--primary-glow), transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.cover.is-revealed::after {
  animation: m-scan 5.5s linear 0.6s 1;
  opacity: 0.22;
}
.cover > * { position: relative; z-index: 2; }

/* Stagger en entrée pour les enfants de grilles — pattern log-stagger §14.
   Intervalle 60ms (pas 180ms du token) : à 180ms les grilles à 8+ cellules
   dépassent 1.4s total, ce qui rompt la règle "< 300ms sauf cinematic".
   60ms × 8 = 480ms max, perçu comme instantané à l'échelle d'une page. */
.page.is-revealed .pillar-grid > *,
.page.is-revealed .audience-grid > *,
.page.is-revealed .shape-grid > *,
.page.is-revealed .palette-grid > *,
.page.is-revealed .contrast-grid > *,
.page.is-revealed .imagery-grid > *,
.page.is-revealed .motion-grid > *,
.page.is-revealed .voice-grid > *,
.page.is-revealed .tone-matrix > *,
.page.is-revealed .signature-grid > *,
.page.is-revealed .icon-grid > * {
  opacity: 0;
  animation: bg-reveal-fadeline 0.4s ease-out forwards;
}
.page.is-revealed [class$="-grid"] > *:nth-child(1),
.page.is-revealed .tone-matrix > *:nth-child(1) { animation-delay: 0ms; }
.page.is-revealed [class$="-grid"] > *:nth-child(2),
.page.is-revealed .tone-matrix > *:nth-child(2) { animation-delay: 60ms; }
.page.is-revealed [class$="-grid"] > *:nth-child(3),
.page.is-revealed .tone-matrix > *:nth-child(3) { animation-delay: 120ms; }
.page.is-revealed [class$="-grid"] > *:nth-child(4),
.page.is-revealed .tone-matrix > *:nth-child(4) { animation-delay: 180ms; }
.page.is-revealed [class$="-grid"] > *:nth-child(5),
.page.is-revealed .tone-matrix > *:nth-child(5) { animation-delay: 240ms; }
.page.is-revealed [class$="-grid"] > *:nth-child(6),
.page.is-revealed .tone-matrix > *:nth-child(6) { animation-delay: 300ms; }
.page.is-revealed [class$="-grid"] > *:nth-child(7) { animation-delay: 360ms; }
.page.is-revealed [class$="-grid"] > *:nth-child(8) { animation-delay: 420ms; }
.page.is-revealed [class$="-grid"] > *:nth-child(n+9) { animation-delay: 480ms; }

/* Phosphor pulse — primary swatch only (box-shadow variant, 10% rule) */
@keyframes bg-reveal-glow-box {
  0%, 100% { box-shadow: 0 0 4px var(--primary-glow); }
  50%      { box-shadow: 0 0 18px var(--primary), 0 0 6px var(--primary); }
}
.page.is-revealed .swatch__chip[data-hex="#00FF41"] {
  animation: bg-reveal-glow-box var(--t-cinematic) ease-in-out infinite;
}

/* prefers-reduced-motion — kill all reveal animations */
@media (prefers-reduced-motion: reduce) {
  .page.is-revealed .page__id,
  .cover.is-revealed .cover__big-mark,
  .cover.is-revealed::after,
  .page.is-revealed [class$="-grid"] > *,
  .page.is-revealed .tone-matrix > *,
  .page.is-revealed .swatch__chip[data-hex="#00FF41"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Scrollbar invisible — page et sidenav restent scrollables, juste sans barre */
html, body, .sidenav, .content { scrollbar-width: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.sidenav::-webkit-scrollbar,
.content::-webkit-scrollbar,
::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* =============================================================
   DESIGN-SYSTEM SECTIONS (01-05) — Tokens · Components · States ·
   Patterns · Usage. Ajoutées en v1.1 pour documenter les valeurs
   réelles extraites de pdesouza-portfolio (preprod).
   ============================================================= */

/* Sidenav group label between Cover and DS sections, between DS and Brand */
.sidenav__group {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--fg-dim);
  text-transform: uppercase;
  padding: 1.25rem 1rem 0.5rem;
  margin-top: 0.25rem;
  border-top: 1px dashed var(--border-soft);
}
.sidenav__group:first-of-type { border-top: none; padding-top: 0.75rem; }

/* Token table — listing tokens, values, roles */
.token-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  margin-top: 0.5rem;
}
.token-table th,
.token-table td {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.token-table th {
  background: var(--bg-3);
  color: var(--fg-strong);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.token-table tr:last-child td { border-bottom: none; }
.token-table code {
  font-size: 12px;
  color: var(--primary);
  background: transparent;
  padding: 0;
}
.token-table td:nth-child(2) { color: var(--fg-strong); white-space: nowrap; }

/* Inline color dot used in tokens table */
.tk-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  margin-right: 8px;
  vertical-align: middle;
}

/* Pattern lists — usage, do/dont, ordered procedures */
.pattern-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--fg);
}
.pattern-list li {
  padding: 0.5rem 0 0.5rem 1.25rem;
  border-bottom: 1px dashed var(--border-soft);
  position: relative;
  line-height: 1.6;
}
.pattern-list li:last-child { border-bottom: none; }
.pattern-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0.5rem;
  color: var(--primary);
}
.pattern-list--bad li::before {
  content: "✕";
  color: var(--red);
}
.pattern-list--ord {
  counter-reset: pl;
}
.pattern-list--ord li { padding-left: 2rem; }
.pattern-list--ord li::before {
  counter-increment: pl;
  content: "[" counter(pl, decimal-leading-zero) "]";
  color: var(--primary);
  font-size: 12px;
  top: 0.5rem;
}

/* Inline code (used inside lede / prose / lists in DS sections) */
.page__lede code,
.bg-prose code,
.pattern-list code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 0.05em 0.4em;
  border-radius: var(--radius-sm);
}
.pattern-list b { color: var(--fg-strong); }

/* ============================================================
   FAVICON showcase — section 07 (logo)
   Minimal `>_` mark for browser tabs / PWA / small contexts.
   ============================================================ */
.favicon-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: center;
  margin-top: var(--s-5);
}
@media (max-width: 720px) {
  .favicon-showcase { grid-template-columns: 1fr; }
}

.favicon-showcase__sizes {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.favicon-size {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}
.favicon-size__label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  text-align: center;
  line-height: 1.4;
}
.favicon-size__label small {
  font-size: 9px;
  opacity: 0.7;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* The actual favicon block — replicates /opt/nginx/preprod/assets/favicon.svg */
.favicon-mark {
  background: #0A0F1A;
  border-radius: 4px;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  position: relative;
  padding: 0;
}
.favicon-mark .gt {
  color: var(--primary);
  line-height: 1;
}
.favicon-mark .cur {
  display: inline-block;
  background: var(--primary);
  animation: blink 1s step-end infinite;
  align-self: center;
}

/* Size variants — keep proportions identical to actual SVG */
.favicon-size--xl .favicon-mark { width: 192px; height: 192px; border-radius: 24px; }
.favicon-size--xl .favicon-mark .gt { font-size: 110px; margin-left: 36px; transform: translateY(8px); }
.favicon-size--xl .favicon-mark .cur { width: 28px; height: 12px; margin-left: 12px; }

.favicon-size--lg .favicon-mark { width: 64px; height: 64px; border-radius: 8px; }
.favicon-size--lg .favicon-mark .gt { font-size: 36px; margin-left: 12px; transform: translateY(2px); }
.favicon-size--lg .favicon-mark .cur { width: 10px; height: 4px; margin-left: 4px; }

.favicon-size--md .favicon-mark { width: 32px; height: 32px; border-radius: 4px; }
.favicon-size--md .favicon-mark .gt { font-size: 18px; margin-left: 6px; transform: translateY(1px); }
.favicon-size--md .favicon-mark .cur { width: 5px; height: 2px; margin-left: 2px; }

.favicon-size--sm .favicon-mark { width: 16px; height: 16px; border-radius: 2px; }
.favicon-size--sm .favicon-mark .gt { font-size: 10px; margin-left: 3px; transform: translateY(0.5px); }
.favicon-size--sm .favicon-mark .cur { width: 3px; height: 1px; margin-left: 1px; }

/* Browser tab mockup */
.favicon-tab-mockup {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-display);
}
.favicon-tab {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: var(--s-2) var(--s-3);
  font-size: 12px;
  color: var(--fg);
  position: relative;
}
.favicon-tab--inactive {
  background: transparent;
  border-color: transparent;
  color: var(--fg-dim);
  opacity: 0.55;
}
.favicon-tab__icon {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  background: #0A0F1A;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  flex-shrink: 0;
}
.favicon-tab__icon .gt {
  color: var(--primary);
  margin-left: 3px;
  transform: translateY(0.5px);
  line-height: 1;
}
.favicon-tab__icon .cur {
  width: 3px;
  height: 1px;
  background: var(--primary);
  margin-left: 1px;
  align-self: center;
  animation: blink 1s step-end infinite;
}
.favicon-tab__icon--muted {
  background: transparent;
  color: var(--fg-dim);
  font-size: 11px;
}
.favicon-tab__title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.favicon-tab__close {
  font-size: 14px;
  color: var(--fg-dim);
  cursor: default;
}

/* ============================================================
   SIGNATURE showcase — section 08 (imagery)
   Article + project signature cards (mix B + C).
   ============================================================ */
.sig-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.sig-card {
  margin: 0;
  padding: var(--s-4);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-3);
}
.sig-card__art {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12%;
}
.sig-card__art svg {
  width: 100%;
  height: 100%;
}
.sig-card__fragment {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0.4rem 0.55rem;
  background: rgba(0, 0, 0, 0.35);
  border-left: 2px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.sig-card__fragment--red {
  border-left-color: var(--red, #FF4444);
}
.sig-card__cmd {
  color: var(--primary);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sig-card__fragment--red .sig-card__cmd {
  color: var(--red, #FF4444);
}
.sig-card__out {
  color: var(--fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sig-card__cap {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  margin-top: auto;
}
.block__note {
  font-size: 12px;
  color: var(--fg-dim);
  font-family: var(--font-mono);
}

/* ============================================================
   bg-compare — colors §05 (terminal-card exception)
   ============================================================ */
.bg-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-top: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.bg-compare__sample {
  padding: var(--s-6);
  min-height: 140px;
  display: flex;
  align-items: flex-end;
  position: relative;
}
.bg-compare__label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #fff;
  line-height: 1.5;
}
.bg-compare__label code {
  color: var(--primary);
  background: rgba(0, 0, 0, 0.4);
  padding: 1px 5px;
  border-radius: 3px;
}
.bg-compare__label small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  letter-spacing: 0.3px;
}
@media (max-width: 600px) {
  .bg-compare { grid-template-columns: 1fr; }
}

/* ============================================================
   v1.2 — LIVE SPECIMENS · CODEBLOCKS · PLAYGROUND
   Ajouts 2026.06 : démos vivantes dans Tokens/Components/States,
   blocs de code copiables (même grammaire que motion/).
   ============================================================ */

/* ---------- codeblock copiable ---------- */

.codeblock {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-2);
  margin-bottom: var(--s-4);
}
.codeblock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg);
}
.codeblock__head span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.copy {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--fg-dim);
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  cursor: pointer;
  transition: color var(--t-quick) ease-out, border-color var(--t-quick) ease-out;
}
.copy:hover, .copy.is-copied { color: var(--primary); border-color: var(--primary); }
.codeblock pre { margin: 0; padding: var(--s-4) var(--s-5); overflow-x: auto; }
.codeblock code {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--fg);
  white-space: pre;
}

/* ---------- spécimens §02 : terminal-card + widget ---------- */

.specimen-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--s-4);
  align-items: start;
}
.specimen__cap {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: var(--s-2);
}

.live-tc {
  background: #080D16;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--t-quick) ease-out, box-shadow var(--t-quick) ease-out;
}
body.theme-light .live-tc { background: var(--bg-card); }
.live-tc:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 20px rgba(0, 255, 65, 0.08);
}
.live-tc__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.6rem 0.85rem;
  background: #141E2A;
  border-bottom: 1px solid var(--border-soft);
}
body.theme-light .live-tc__header { background: var(--bg-3); }
.live-tc__dot { width: 12px; height: 12px; border-radius: 50%; }
.live-tc__dot--red    { background: #ff5f56; }
.live-tc__dot--yellow { background: #ffbd2e; }
.live-tc__dot--green  { background: #27c93f; }
.live-tc__title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  margin-left: var(--s-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-tc__body { padding: 1rem; font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.6; }
.live-tc__prompt { color: var(--primary); }
.live-tc__prompt::before { content: '> '; }
.live-tc__output { color: var(--fg); }
.live-tc__output--dim { color: var(--fg-dim); }
.live-tc__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 1px;
  padding: var(--s-2) 1rem;
  border-top: 1px solid var(--border-soft);
}
.cursor-inline {
  display: inline-block;
  width: 7px;
  height: 11px;
  background: var(--primary);
  margin-left: 6px;
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
}

.live-widget {
  background: #080D16;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
body.theme-light .live-widget { background: var(--bg-card); }
.live-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  background: #141E2A;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 11px;
}
body.theme-light .live-widget__header { background: var(--bg-3); }
.live-widget__title { color: var(--fg); }
.live-widget__live {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--red);
  font-size: 9px;
  letter-spacing: 1.5px;
}
.live-dot-demo {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  animation: live-pulse-12 2s ease-in-out infinite;
}
.live-dot-demo--green { background: var(--primary); }
@keyframes live-pulse-12 {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.live-widget__body { padding: 0.75rem 0.85rem; }
.live-widget__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-dim);
  padding: 3px 0;
}
.live-widget__row b { color: var(--primary); font-weight: 600; font-size: 14px; }
.live-widget__row--bar i {
  color: var(--primary);
  font-style: normal;
  white-space: pre;
  letter-spacing: 1px;
  font-size: 11px;
}

/* ---------- §02 : status chrome + skill bars ---------- */

.live-chrome {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-2);
}
.live-chrome__progress { height: 2px; background: var(--border-soft); }
.live-chrome__progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary-glow);
  transition: width 1.2s ease-out;
}
.live-chrome__body { padding: var(--s-5); }
.live-skill {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: var(--s-1) 0;
}
.live-skill span { color: var(--fg-dim); }
.live-skill i { color: var(--primary); font-style: normal; white-space: pre; letter-spacing: 1px; }
.live-skill b { color: var(--fg-strong); font-weight: 600; }
.live-chrome__statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--border-soft);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
}
.live-chrome__sb-left { color: var(--primary); display: flex; align-items: center; gap: var(--s-2); }

/* ---------- §03 : state playground ---------- */

.state-playground {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
.state-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 110px;
  padding: var(--s-4);
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  text-align: center;
}
.state-cell__cap {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.state-link {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
.state-link:hover { color: var(--cyan); }
.state-navlink {
  position: relative;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
  text-decoration: none;
  padding-bottom: 3px;
  transition: color 0.3s ease;
}
.state-navlink::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--primary);
  transition: width 0.3s ease;
}
.state-navlink:hover { color: var(--primary); }
.state-navlink:hover::after { width: 100%; }
.state-toggle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--primary);
  background: transparent;
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.state-toggle:hover { background: var(--primary); color: #000; }
.state-card {
  width: 100%;
  padding: var(--s-4);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg);
  background: #080D16;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--t-quick) ease-out, box-shadow var(--t-quick) ease-out;
}
body.theme-light .state-card { background: var(--bg-card); }
.state-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 20px rgba(0, 255, 65, 0.08);
}

/* ---------- responsive v1.2 ---------- */

@media (max-width: 880px) {
  .specimen-row, .state-playground { grid-template-columns: 1fr; }
  .live-skill { grid-template-columns: 1fr; gap: var(--s-1); }
  .live-skill b { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-inline, .live-dot-demo { animation: none; }
  .live-chrome__progress i { transition: none; }
}

/* ============================================================
   v1.2b — COVER FIELD · PLANCHES PHOSPHOR VIGIL
   ============================================================ */

/* topographie générative derrière la cover */
.cover { position: relative; overflow: hidden; }
.cover > * { position: relative; z-index: 1; }
#cover-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* figures de planches */
.plate-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}
.plate-fig {
  margin: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  transition: border-color var(--t-quick) ease-out, box-shadow var(--t-quick) ease-out;
}
.plate-fig:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 20px rgba(0, 255, 65, 0.08);
}
.plate-fig img {
  display: block;
  width: 100%;
  height: auto;
}
.plate-fig figcaption {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border-soft);
  background: var(--bg);
}
.block > .plate-fig { max-width: 760px; }

@media (max-width: 880px) {
  .plate-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   v1.3 — CHAPITRE MOTION FUSIONNÉ : démos vivantes
   Famille .demo-* importée de l'ex motion/css/motion.css.
   (.codeblock, .copy, .rules-grid, .rule-card déjà définis en v1.2)
   ============================================================ */

.demo {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
  margin-bottom: var(--s-4);
}
.demo__stage {
  min-height: 150px;
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.demo__stage--term {
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 13px;
}
.demo__stage--center { align-items: center; }
.demo__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--border-soft);
  background: var(--bg);
}
.demo__spec {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 0.5px;
}
.replay {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--primary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color var(--t-quick) ease-out, background var(--t-quick) ease-out;
}
.replay:hover { border-color: var(--primary); background: var(--primary-soft); }

.demo__note {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--fg-dim);
  line-height: 1.65;
  margin: var(--s-4) 0 0;
  max-width: 640px;
}
.demo__note code { font-family: var(--font-mono); font-size: 0.78rem; color: var(--primary); }
.demo__note b { color: var(--fg); font-weight: 600; }

/* terminal / typewriter / stagger */
.demo-term-line { font-family: var(--font-mono); font-size: 13px; color: var(--fg); line-height: 1.9; }
.demo-term-line b { color: var(--primary); font-weight: 600; }
.demo-term-line.out { color: var(--fg-dim); padding-left: var(--s-4); }
.demo-term-line.hl, .hl-green { color: var(--primary); }
.demo-cursor {
  display: inline-block; width: 8px; height: 14px; background: var(--primary);
  margin-left: 3px; vertical-align: text-bottom; animation: blink 1s step-end infinite;
}

/* barres ASCII / compteurs */
.demo-skill {
  display: grid;
  grid-template-columns: 170px 1fr auto auto;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-1) 0;
  font-family: var(--font-mono);
  font-size: 12px;
}
.demo-skill__name { color: var(--fg-dim); }
.demo-skill__bar  { color: var(--primary); white-space: pre; letter-spacing: 1px; }
.demo-skill__pct  { color: var(--fg-strong); min-width: 2ch; text-align: right; }
.demo-skill__unit { color: var(--fg-dim); }
.demo-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); width: 100%; }
.demo-stat {
  text-align: center; padding: var(--s-4);
  border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg-2);
}
.demo-stat__num { display: block; font-family: var(--font-mono); font-size: 1.7rem; font-weight: 600; color: var(--primary); }
.demo-stat__label { font-family: var(--font-mono); font-size: 10px; color: var(--fg-dim); letter-spacing: 1.5px; text-transform: uppercase; }

/* signature SVG */
.demo-sig { width: 220px; color: var(--primary); }

/* reveal cards */
.demo-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); width: 100%; }
.demo-card { border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-2); }
.demo-card__head {
  font-family: var(--font-mono); font-size: 11px; color: var(--primary);
  padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--border-soft); background: var(--bg);
}
.demo-card__head::before { content: '> '; opacity: 0.6; }
.demo-card__body { font-family: var(--font-display); font-size: 0.8rem; color: var(--fg-dim); line-height: 1.55; padding: var(--s-3) var(--s-4); }

/* hover card */
.demo-hover-card {
  width: min(380px, 100%);
  border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-2);
  transition: border-color var(--t-quick) ease-out, box-shadow var(--t-quick) ease-out;
}
.demo-hover-card:hover { border-color: var(--primary); box-shadow: 0 4px 16px rgba(0, 255, 65, 0.07); }
.demo-hover-card .demo-card__body { font-size: 0.85rem; }

/* boot */
.demo__stage--boot { min-height: 190px; }
.demo-boot {
  position: absolute; inset: 0; padding: var(--s-5);
  display: flex; flex-direction: column; justify-content: center;
  background: var(--bg-2); z-index: 2; transition: opacity var(--t-base) ease-out;
}
.demo-boot.is-done { opacity: 0; pointer-events: none; }
.demo-boot__line { font-family: var(--font-mono); font-size: 12px; color: var(--fg-dim); line-height: 2; }
.demo-boot__line.hl { color: var(--primary); }
.demo-boot-after { opacity: 0; transition: opacity var(--t-base) ease-out; }
.demo-boot-after.is-on { opacity: 1; }

/* status chrome */
.demo__stage--chrome { padding: 0; min-height: 170px; background: var(--bg-2); }
.demo-progress { height: 2px; background: var(--border-soft); }
.demo-progress i { display: block; height: 100%; width: 0; background: var(--primary); box-shadow: 0 0 8px var(--primary-glow); }
.demo-chrome-body { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 110px; }
.demo-chrome-hint { font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim); letter-spacing: 0.5px; }
.demo-statusbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-2) var(--s-4); border-top: 1px solid var(--border-soft); background: var(--bg);
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim);
}
.demo-statusbar__left { color: var(--primary); display: flex; align-items: center; gap: var(--s-2); }
.demo-statusbar__mid { color: var(--fg); }
.demo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); animation: pulse-dot-m 2.4s ease-in-out infinite; }
@keyframes pulse-dot-m { 0%, 100% { box-shadow: 0 0 0 0 var(--primary-glow); } 50% { box-shadow: 0 0 6px 2px var(--primary-glow); } }

@media (max-width: 880px) {
  .demo-stats, .demo-cards { grid-template-columns: 1fr; }
  .demo-skill { grid-template-columns: 1fr; gap: var(--s-1); }
  .demo-skill__pct, .demo-skill__unit { display: none; }
  .demo__bar { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-cursor, .demo-dot { animation: none; }
}