/* BatiScope — site vitrine noir et blanc.
   Système : 03-ui.md ; contrat DOM ↔ JS : 01-architecture.md §3 ; DOM des démos : 02-ux.md §2.
   Règle d'or : aucune couleur, aucun dégradé, aucune ombre, aucun filtre. L'inversion est le seul surlignage. */

@layer reset, base, layout, components, demos, utilities;

/* ------------------------------------------------------------------ jetons (hors couche) */
:root {
  color-scheme: light;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;

  /* neutres seulement (r = g = b) */
  --paper: #fff; --ink: #000;
  --accent: #1f4d3a; --accent-on-ink: #5fa883;   /* vert sapin : curseur, MCP, points d'attache ; version claire sur fond noir */
  --gray-1: #f2f2f2; --gray-2: #d9d9d9; --gray-3: #8c8c8c;
  --gray-4: #595959; --gray-5: #1f1f1f; --gray-6: #383838;
  --bg: var(--paper); --fg: var(--ink); --fg-muted: var(--gray-4);
  --line: var(--ink); --line-soft: var(--gray-2); --surface: var(--gray-1);

  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --fs-display: clamp(2.75rem, 1.333rem + 6.296vw, 7rem);
  --fs-statement: clamp(1.75rem, 1rem + 3.333vw, 4rem);
  --fs-h2: clamp(2rem, 1.333rem + 2.963vw, 4rem);
  --fs-h2-col: clamp(2rem, 1.667rem + 1.481vw, 3rem);
  --fs-xl: clamp(1.375rem, 1.083rem + 1.296vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 1.083rem + .741vw, 1.75rem);
  --fs-lead: clamp(1.125rem, 1rem + .556vw, 1.5rem);
  --fs-body: clamp(1rem, .958rem + .185vw, 1.125rem);
  --fs-small: .875rem;
  --fs-label: clamp(.75rem, .729rem + .093vw, .8125rem);
  --fs-price: clamp(2.5rem, 2.167rem + 1.481vw, 3.5rem);
  --fs-demo: .75rem;

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem;
  --gutter: 16px; --col-gap: 16px;
  --max: 1200px; --measure: 64ch; --nav-h: 56px;
  --section-y: clamp(3rem, 2rem + 4.444vw, 6rem);
  --section-y-band: clamp(4rem, 2.667rem + 5.926vw, 8rem);

  --bw-hair: 1px; --bw: 2px; --radius: 0;

  --t-fast: 150ms; --t-base: 300ms; --t-move: 600ms; --t-slow: 1200ms; --t-reset: 300ms;
  --ease: cubic-bezier(.2, 0, 0, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --blink: 1.06s;

  /* curseur bloc (sans) : de la hauteur de capitale à la ligne de base */
  --caret-w: .5em; --caret-top: .21em; --caret-bottom: .21em; --caret-box: 1.2em;   /* --caret-box = hauteur de la boîte en ligne */

  --z-nav: 100; --z-skip: 200;
}
@media (min-width: 600px)  { :root { --gutter: 24px; } }
@media (min-width: 900px)  { :root { --col-gap: 24px; --fs-demo: .8125rem; } }   /* 900 = bascule du menu, dupliquée dans site.js */
@media (min-width: 1200px) { :root { --gutter: 40px; --col-gap: 32px; } }

.theme-noir   { --bg: var(--ink);   --fg: var(--paper); --fg-muted: var(--gray-3); --line: var(--paper); --line-soft: var(--gray-6); --surface: var(--gray-5); }
.theme-papier { --bg: var(--paper); --fg: var(--ink);   --fg-muted: var(--gray-4); --line: var(--ink);   --line-soft: var(--gray-2); --surface: var(--gray-1); }

/* impression : les bandes noires repassent en papier (fonds souvent non imprimés) */
@media print {
  .theme-noir { --bg: var(--paper); --fg: var(--ink); --fg-muted: var(--gray-4); --line: var(--ink); --line-soft: var(--gray-2); --surface: var(--gray-1); }
}

/* ------------------------------------------------------------------ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body, h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  ul, ol { padding: 0; }
  img, svg { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; cursor: pointer; }
  table { border-collapse: collapse; border-spacing: 0; }
}

/* ------------------------------------------------------------------ base */
@layer base {
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body {
    background: var(--bg); color: var(--fg);
    font: 400 var(--fs-body)/1.55 var(--font-sans);
    text-rendering: optimizeLegibility;
  }
  .theme-noir, .theme-papier { background: var(--bg); color: var(--fg); }
  .theme-noir { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  .theme-papier { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }

  h1, h2, h3 { font-weight: 700; text-wrap: balance; }
  p, li, dd { text-wrap: pretty; }
  strong { font-weight: 700; }

  a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
  @media (hover: hover) { a:hover { text-decoration-thickness: 2px; } }
  :focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
  ::selection { background: var(--fg); color: var(--bg); }

  abbr[title] {
    text-decoration-line: underline; text-decoration-style: dotted;
    text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: help;
  }
  kbd {
    display: inline-block; min-width: 1.9em; padding: .12em .45em .08em;
    border: 1px solid var(--fg); border-bottom-width: 2px;
    background: var(--bg); color: var(--fg);
    font: 500 .8125em/1.2 var(--font-mono); text-align: center; white-space: nowrap; vertical-align: .05em;
  }
  kbd + kbd { margin-left: .25em; }
}

/* ------------------------------------------------------------------ layout */
@layer layout {
  .container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

  /* overflow-x: clip protège la largeur de page d'un curseur en bout de ligne, sans créer de défilement */
  .section { padding-block: var(--section-y); scroll-margin-top: var(--nav-h); overflow-x: clip; }
  .section--band { padding-block: var(--section-y-band); }
  .section--ruled > .container { border-top: 1px solid var(--line); padding-top: var(--sp-5); }

  .hero { padding-block: var(--sp-8) var(--sp-9); }

  @media (min-width: 900px) {
    .hero { min-height: calc(100svh - var(--nav-h)); display: grid; align-content: center; } /* tout l'écran visible sous la barre */

    .feature__grid {
      display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--col-gap); align-items: start;
    }
    .feature__grid > .label,
    .feature__grid > .limits { grid-column: 1 / -1; }
    .feature__text { grid-column: 1 / span 5; }
    .feature__grid > .demo-frame { grid-column: 6 / -1; }

    .consult-layout {
      display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--col-gap); align-items: start;
    }
    .consult-layout > .steps { grid-column: 1 / span 5; }
    .consult-layout > .demo-frame { grid-column: 6 / -1; }
  }
}

/* ------------------------------------------------------------------ composants */
@layer components {

  /* --- lien d'évitement */
  .skip-link:not(:focus) {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .skip-link:focus {
    position: fixed; top: 8px; left: 8px; z-index: var(--z-skip);
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
    background: var(--fg); color: var(--bg); font-weight: 700; text-decoration-line: none;
  }

  /* --- navigation (4 pages) */
  .site-nav {
    position: relative; z-index: var(--z-nav);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--sp-5);
    min-height: var(--nav-h);
    padding-inline: max(var(--gutter), (100% - var(--max)) / 2);
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .js .site-nav { position: sticky; top: 0; transition: background-color .25s var(--ease), color .25s var(--ease); }
  .site-nav.theme-noir { border-bottom-color: transparent; } /* sur le héros noir : pas de filet, le noir est plein cadre */
  .site-nav__brand {
    display: inline-block; line-height: 44px; margin-block: 6px;
    font-size: 1.25rem; font-weight: 700; letter-spacing: -.03em; text-decoration-line: none;
  }
  .site-nav__brand::after {   /* le curseur de la page, immobile */
    content: ""; display: inline-block; width: .5em; height: .72em; margin-left: .1em;
    background: var(--accent); vertical-align: baseline;   /* le logo : le curseur bloc, vert sapin */
  }
  .theme-noir .site-nav__brand::after { background: var(--accent-on-ink); }
  .site-nav__toggle {
    display: none; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px; padding: 0 12px;
    border: 1px solid var(--line); font: 500 .8125rem/1 var(--font-mono);
  }
  .js .site-nav__toggle { display: inline-flex; }
  .site-nav__toggle[aria-expanded="true"] { background: var(--fg); color: var(--bg); }

  /* sans JS : liens visibles, qui passent à la ligne */
  .site-nav__menu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-4); width: 100%; padding-bottom: var(--sp-2); }
  .site-nav__link { display: inline-flex; align-items: center; min-height: 44px; text-decoration-line: none; }
  @media (hover: hover) { .site-nav__link:hover { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; } }

  /* avec JS, sous 900 px : panneau repliable */
  .js .site-nav__menu:not(.is-open) { display: none; }
  .js .site-nav__menu.is-open {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
    padding: 0 var(--gutter) var(--sp-4);
    background: var(--bg); border-bottom: 1px solid var(--line);
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
  }
  .js .site-nav__menu.is-open .site-nav__link { min-height: 56px; font-size: 1.25rem; border-bottom: 1px solid var(--line-soft); }
  .js .site-nav__menu.is-open .site-nav__cta { margin-top: var(--sp-4); width: 100%; }
  .motion .site-nav__menu.is-open { animation: menu-in var(--t-fast) var(--ease); }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }

  @media (min-width: 900px) {   /* bascule du menu (valeur dupliquée dans site.js) */
    .site-nav { flex-wrap: nowrap; }
    .js .site-nav__toggle { display: none; }
    .site-nav__menu,
    .js .site-nav__menu:not(.is-open),
    .js .site-nav__menu.is-open {
      display: flex; position: static; flex-direction: row; flex-wrap: nowrap; align-items: center;
      width: auto; gap: var(--sp-5); padding: 0; border: 0; max-height: none; overflow: visible;
      background: none; animation: none;
    }
    .site-nav__link,
    .js .site-nav__menu.is-open .site-nav__link { min-height: 44px; font-size: .9375rem; border: 0; }
    .site-nav__link--login { margin-left: var(--sp-4); }
    .site-nav__cta,
    .js .site-nav__menu.is-open .site-nav__cta { margin: 0; width: auto; }
  }

  /* --- boutons et liens d'action */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    min-height: 48px; padding: 0 1.25rem;
    border: var(--bw) solid var(--fg); border-radius: 0;
    font: 700 1rem/1.2 var(--font-sans); text-decoration-line: none; white-space: nowrap;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .btn:active { transform: translateY(1px); }
  .btn--ink { background: var(--fg); color: var(--bg); }
  .btn--line { background: transparent; color: var(--fg); }
  @media (hover: hover) {
    .btn--ink:hover { background: var(--bg); color: var(--fg); }
    .btn--line:hover { background: var(--fg); color: var(--bg); }
  }
  .btn--sm { min-height: 44px; padding: 0 1rem; font-size: .9375rem; }
  .btn--block { width: 100%; }
  .link {
    display: inline-flex; align-items: center; min-height: 44px;
    font-weight: 700; text-decoration-thickness: 2px;
  }
  .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }

  /* --- étiquettes mono */
  .label { font: 500 var(--fs-label)/1.3 var(--font-mono); letter-spacing: .01em; color: var(--fg-muted); }
  .label__num { font-weight: 600; color: var(--fg); }
  .label--rule { display: block; overflow: hidden; white-space: nowrap; color: var(--fg); }
  .label--rule::after {
    content: ""; display: inline-block; width: 100%; margin-left: var(--sp-3);
    vertical-align: middle; border-top: 1px solid var(--line);
  }

  /* --- titres de section */
  .section-title { font-size: var(--fs-h2); line-height: 1; letter-spacing: -.035em; max-width: 16em; }
  .section-lead { margin-top: var(--sp-5); font-size: var(--fs-lead); line-height: 1.4; max-width: 36em; }

  /* --- héros */
  .hero__title { font-size: var(--fs-display); line-height: .95; letter-spacing: -.045em; max-width: 11em; }
  /* constellation : les pièces d'un dossier flottent et se relient (site.js, canvas) */
  .hero__demo { position: relative; margin-top: var(--sp-6); height: clamp(260px, 44vw, 520px); overflow: hidden; } /* sans cadre : le dessin respire */
  .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  @media (min-width: 900px) { .hero__demo { margin-top: var(--sp-8); } }
  /* grand écran : titre à gauche, toile à droite, sur toute la hauteur */
  @media (min-width: 1200px) {
    .hero__inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; column-gap: var(--sp-7); }
    .hero__title { font-size: clamp(3.5rem, 5.4vw, 5rem); max-width: none; } /* « Vos documents » tient sur une ligne dans sa colonne */
    .hero__demo { margin-top: 0; height: min(72svh, 680px); }
  }

  /* --- présentation et boutons (sous le manifeste) */
  .intro__lead { font-size: var(--fs-lead); line-height: 1.4; letter-spacing: -.005em; max-width: 36em; }
  .intro__actions { margin-top: var(--sp-6); }
  .intro__actions .btn { width: 100%; }
  .intro__note { margin-top: var(--sp-5); }
  @media (min-width: 600px) { .intro__actions .btn { width: auto; } }

  /* --- manifeste (négatif) */
  .manifeste__title { font-size: var(--fs-statement); line-height: 1.04; letter-spacing: -.03em; max-width: 16em; }
  .manifeste__lead { margin-top: var(--sp-6); font-size: var(--fs-lead); line-height: 1.4; max-width: 36em; }
  .manifeste__text { margin-top: var(--sp-5); font-size: var(--fs-body); line-height: 1.6; max-width: 40em; color: var(--fg-muted); }
  .manifeste__kicker { margin-top: var(--sp-6); font-size: var(--fs-xl); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }

  /* --- sommaire des fonctions */
  .toc { list-style: none; margin-top: var(--sp-7); border-bottom: 1px solid var(--line); }
  .toc li { border-top: 1px solid var(--line); }
  .toc__link {
    display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-4);
    min-height: 64px; padding: var(--sp-4) var(--sp-2);
    text-decoration-line: none;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .toc__num { font: 600 var(--fs-label)/1 var(--font-mono); }
  .toc__title { font-size: var(--fs-xl); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
  /* flèche décorative : texte alternatif vide pour ne pas l'ajouter au nom accessible du lien ; la 1re ligne sert de repli */
  .toc__link::after { content: "↓"; content: "↓" / ""; font: 400 var(--fs-label)/1 var(--font-mono); }
  @media (hover: hover) { .toc__link:hover { background: var(--fg); color: var(--bg); } }

  /* --- blocs de fonction */
  .feature .label--rule + * { margin-top: var(--sp-4); }
  .feature__title { font-size: var(--fs-h2-col); line-height: 1.05; letter-spacing: -.03em; }
  .feature--wide .feature__title { font-size: var(--fs-h2); line-height: 1; letter-spacing: -.035em; max-width: 14em; }
  .feature__title + p { margin-top: var(--sp-5); }
  .feature__text p { max-width: var(--measure); }
  .feature__text p + p { margin-top: 1em; }
  .feature__lead { font-size: var(--fs-lead); line-height: 1.4; letter-spacing: -.005em; max-width: 36em; }
  .feature__relief { margin-top: var(--sp-5); font-size: var(--fs-xl); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
  .feature__note { margin-top: var(--sp-5); max-width: var(--measure); }
  .feature .demo-frame, .consult-layout { margin-top: var(--sp-7); }
  .consult-layout .demo-frame { margin-top: var(--sp-7); }
  .feature .limits { margin-top: var(--sp-6); }
  @media (min-width: 900px) {
    .feature .label--rule + * { margin-top: var(--sp-5); }
    .feature__title + p { margin-top: var(--sp-6); }
    .feature .demo-frame { margin-top: var(--sp-8); }
    .feature__grid > .demo-frame { margin-top: var(--sp-5); }
    .consult-layout { margin-top: var(--sp-8); }
    .consult-layout .demo-frame { margin-top: 0; position: sticky; top: calc(var(--nav-h) + var(--sp-5)); }
    .feature .limits { margin-top: var(--sp-7); }
  }

  /* --- raccourcis DocDiving */

  /* --- ligne Limites : la signature du concept */
  .limits {
    padding-top: var(--sp-3); border-top: 1px dotted var(--line);
    font: 400 var(--fs-label)/1.5 var(--font-mono); color: var(--fg-muted);
  }
  .limits__label { margin-right: .75em; font-weight: 500; color: var(--fg); }

  /* --- étapes de la Consultation (hors démo, sur noir) */
  .steps { list-style: none; counter-reset: step; border-bottom: 1px solid var(--line-soft); }
  .steps__item {
    counter-increment: step; position: relative;
    min-height: calc(2rem + 2 * var(--sp-4));
    padding: var(--sp-4) 0 var(--sp-4) calc(2rem + var(--sp-4));
    border-top: 1px solid var(--line-soft);
    font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted);
  }
  .steps__item::before {
    content: counter(step); position: absolute; left: 0; top: var(--sp-4);
    display: grid; place-items: center; width: 2rem; height: 2rem;
    border: 1px solid var(--line); color: var(--fg); font: 500 .8125rem/1 var(--font-mono);
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .steps__item strong { color: var(--fg); font-size: var(--fs-body); text-underline-offset: .25em; }
  .steps__item.is-current::before { background: var(--fg); color: var(--bg); }
  .steps__item.is-current strong { text-decoration-line: underline; text-decoration-thickness: 2px; }

  /* --- connecteur MCP (à part des fonctions) */
  /* le pont : assistants → MCP → BatiScope ; traits fixes en gris, flux en pointillés qui avancent (en mouvement) */
  .bridge { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); padding: var(--sp-5); border: 1px solid var(--ink); }
  .bridge__agents { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
  .bridge__agent { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
  .bridge__logo { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--ink); background: var(--bg); color: var(--fg); }
  .bridge__logo-svg { width: 28px; height: 28px; fill: currentColor; }
  .bridge__logo--claude { color: #d97757; }   /* couleurs de marque */
  .bridge__logo--openai { color: #10a37f; }
  .bridge__logo--any { font: 600 1.5rem/1 var(--font-mono); }
  .bridge__name { font: 500 var(--fs-label)/1.3 var(--font-mono); }
  .bridge__link { position: relative; height: 96px; }
  .bridge__wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .bridge__wire--h { display: none; }
  .bridge__wire path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .bridge__rails path { stroke: var(--line); }
  .bridge__flow path { stroke: var(--accent); stroke-dasharray: 3 9; stroke-linecap: round; }
  .bridge__flow--back path { stroke: var(--fg-muted); stroke-dasharray: 2 14; }
  .bridge__tag {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    padding: .25rem .5rem; border: 1px solid var(--accent); background: var(--accent); color: var(--paper);
    font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em;
  }
  .bridge__app { padding: var(--sp-5); background: var(--fg); color: var(--bg); }
  .bridge__app-name { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; line-height: 1.1; }
  .bridge__app-name::after { content: ""; display: inline-block; width: .5em; height: .72em; margin-left: .1em; vertical-align: baseline; background: var(--accent-on-ink); }
  .bridge__app-sub { margin-top: .25rem; font: 400 var(--fs-small)/1.3 var(--font-mono); color: var(--gray-3); }
  .bridge__docs { list-style: none; display: flex; flex-wrap: wrap; gap: .375rem; margin-top: var(--sp-4); }
  .bridge__docs li { padding: .2rem .5rem; border: 1px solid var(--bg); font: 500 var(--fs-label)/1.3 var(--font-mono); }
  @media (min-width: 900px) {
    .bridge { grid-template-columns: minmax(0, 5fr) 140px minmax(0, 4fr); align-items: stretch; gap: var(--sp-6); padding: var(--sp-6); margin-top: var(--sp-8); }
    .bridge__agents { grid-template-columns: 1fr; gap: var(--sp-3); }
    .bridge__agent { flex-direction: row; justify-content: flex-start; text-align: left; gap: var(--sp-4); }
    .bridge__agent::after { content: ""; flex: 1; margin-left: var(--sp-4); border-top: 1px solid var(--line); } /* rail jusqu'au fil */
    .bridge__logo { width: 48px; height: 48px; }
    .bridge__link { height: auto; }
    .bridge__wire--h { display: block; }
    .bridge__wire--v { display: none; }
    .bridge__app { align-self: center; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion .bridge__flow path { animation: bridge-flow 1.6s linear infinite; }
    .motion .bridge__flow--back path { animation-duration: 2.6s; }
  }
  @keyframes bridge-flow { to { stroke-dashoffset: -12; } }

  /* --- apparition des blocs (façon « un bloc après l'autre ») : seulement en mouvement, posée par site.js */
  .motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--reveal-i, 0) * var(--reveal-step, 160ms)); }
  .motion [data-reveal].is-in { opacity: 1; transform: none; }
  /* retenu : ce qui suit un titre tapé attend la fin de la frappe, puis apparaît du haut vers le bas */
  .motion [data-reveal].is-held { opacity: 0; transform: translateY(18px); transition: none; }
  .toc { --reveal-step: 300ms; }
  .toc li.is-lit .toc__link { background: var(--fg); color: var(--bg); } /* le curseur descend la liste pendant qu'elle apparaît */
  .mcp__kicker { margin-bottom: var(--sp-4); }
  .mcp__grid { display: grid; gap: var(--sp-7); margin-top: var(--sp-7); }
  .mcp__lead { font-size: var(--fs-lead); line-height: 1.4; }
  .mcp__text p + p { margin-top: var(--sp-4); }
  .mcp__text > p { max-width: 36em; }
  .mcp__facts { margin-top: var(--sp-6); color: var(--fg); }
  /* « C'est quoi, un MCP ? » replié : l'explication pour qui la veut */
  .mcp__more { margin-top: var(--sp-5); border-top: 1px solid var(--line-soft); padding-top: var(--sp-4); max-width: 36em; }
  .mcp__more summary { display: flex; align-items: center; gap: .6em; cursor: pointer; list-style: none; font: 500 var(--fs-small)/1.4 var(--font-mono); }
  .mcp__more summary::-webkit-details-marker { display: none; }
  .mcp__more summary::before { content: "+"; display: grid; place-items: center; width: 1.4em; height: 1.4em; border: 1px solid var(--line); font-weight: 600; }
  .mcp__more[open] summary::before { content: "−"; }
  .mcp__more p { margin-top: var(--sp-3); font-size: var(--fs-small); line-height: 1.6; color: var(--fg-muted); }
  @media (min-width: 900px) {
    .mcp__grid { margin-top: var(--sp-8); }
  }

  /* --- tarifs */
  .pricing { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); }
  .plan { display: flex; flex-direction: column; padding: var(--sp-5); border: 1px solid var(--line); }
  .plan.theme-noir { border-color: var(--ink); }
  .plan__name { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.015em; }
  .plan__price { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin-top: var(--sp-4); }
  .plan__amount { font: 600 var(--fs-price)/1 var(--font-mono); letter-spacing: -.02em; white-space: nowrap; }
  .plan__per { font: 400 var(--fs-small)/1.3 var(--font-mono); color: var(--fg-muted); }
  .plan__list { list-style: none; margin: var(--sp-5) 0; font: 400 .875rem/1.4 var(--font-mono); }
  .plan__list li { padding: .625rem 0; border-top: 1px solid var(--line-soft); }
  .plan__list li:first-child { border-top-color: var(--line); }
  .plan__cta { margin-top: auto; }
  .pricing__note { margin-top: var(--sp-5); max-width: var(--measure); font-size: var(--fs-small); color: var(--fg-muted); }
  @media (min-width: 600px)  { .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 900px)  { .pricing { margin-top: var(--sp-8); } }
  @media (min-width: 1200px) { .pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* --- appel final (négatif) */
  .final { text-align: center; }
  .final__brand { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.02em; margin-bottom: var(--sp-5); }
  .final__brand::after { content: ""; display: inline-block; width: .5em; height: .72em; margin-left: .1em; vertical-align: baseline; background: var(--accent-on-ink); }
  .final__title { font-size: var(--fs-h2); font-weight: 500; line-height: 1.05; letter-spacing: -.03em; max-width: 14em; margin-inline: auto; }
  .final__actions { margin-top: var(--sp-7); justify-content: center; }
  .final__actions .btn { width: 100%; }
  @media (min-width: 600px) { .final__actions .btn { width: auto; } }
  @media (min-width: 900px) { .final { min-height: min(70svh, 720px); display: grid; align-items: center; } }

  /* --- pied de page */
  .site-footer { padding: var(--sp-7) 0 var(--sp-6); border-top: 1px solid var(--line); }
  .site-footer__nav { display: flex; flex-direction: column; }
  .site-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-small); text-decoration-line: none; }
  @media (hover: hover) { .site-footer__nav a:hover { text-decoration-line: underline; } }
  .site-footer__copy {
    margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line-soft);
    font: 400 var(--fs-label)/1.3 var(--font-mono); color: var(--fg-muted);
  }
  @media (min-width: 900px) { .site-footer__nav { flex-direction: row; flex-wrap: wrap; column-gap: var(--sp-5); } }

  /* --- pages légales (contenu inchangé : sélecteurs descendants seulement) */
  .legal { width: min(100% - 2 * var(--gutter), 72ch); margin-inline: auto; padding-block: var(--sp-7) var(--sp-9); }
  .legal h1 { margin: var(--sp-5) 0 var(--sp-4); font-size: var(--fs-h2); line-height: 1; letter-spacing: -.035em; }
  .legal h2 {
    margin: var(--sp-7) 0 var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line);
    font-size: 1.25rem; line-height: 1.2; letter-spacing: -.01em;
  }
  .legal p, .legal li { font-size: var(--fs-body); line-height: 1.6; }
  .legal p + p, .legal p + ul, .legal ul + p { margin-top: var(--sp-3); }
  .legal ul { padding-left: 1.25em; }
  .legal li + li { margin-top: var(--sp-1); }
  .back-link {
    display: inline-flex; align-items: center; gap: .5em; min-height: 44px;
    font: 500 var(--fs-label)/1 var(--font-mono); text-decoration-line: none;
  }
  @media (hover: hover) { .back-link:hover { text-decoration-line: underline; } }
  .back-link svg { width: 16px; height: 16px; flex: none; }
  .highlight-box { margin: var(--sp-5) 0; padding: var(--sp-5); border: 1px solid var(--line); }
  .info-box { margin: var(--sp-4) 0; padding: var(--sp-5); background: var(--surface); }
  .highlight-box p + p, .info-box p + p { margin-top: var(--sp-2); }

  /* --- cadre de démo, bouton Pause (à droite, sous la démo) */
  .demo-frame { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-4); row-gap: var(--sp-3); }
  .demo-frame > .demo { grid-column: 1 / -1; }
  .demo-toggle {
    display: none; grid-column: 2; align-self: start; align-items: center; justify-content: center; gap: .5em;
    min-height: 44px; min-width: 44px; padding: 0 12px;
    border: 1px solid var(--line); background: var(--bg); color: var(--fg);
    font: 500 .8125rem/1 var(--font-mono);
  }
  .motion .demo-toggle { display: inline-flex; }
  /* masqué (la démo se met en pause au survol) ; réapparaît au focus clavier pour garder un arrêt accessible */
  .demo-toggle:not(:focus-visible) { position: absolute; width: 1px; height: 1px; min-width: 0; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; }
  .demo-toggle::before { content: ""; width: 10px; height: 12px; border-inline: 3px solid currentColor; }
  .demo-toggle[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
  .demo-toggle[aria-pressed="true"]::before { border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }

  /* --- frappe (calque construit par site.js) */
  .motion [data-type]:not(.type-ready) { color: transparent; }
  .type-ready > .sr-only { user-select: none; -webkit-user-select: none; }
  .type { position: relative; }
  .type__w { white-space: nowrap; }
  .type__ch { position: relative; }
  .motion .type__ch:not(.is-on) { opacity: 0; }
  .motion .type__ch.is-caret::after,
  .motion .type.is-caret-start::before {
    content: ""; position: absolute; top: var(--caret-top); bottom: var(--caret-bottom);
    width: var(--caret-w); background: var(--accent);
  }
  .theme-noir .type__ch.is-caret::after, .theme-noir .type.is-caret-start::before { background: var(--accent-on-ink); }
  .motion .type__ch.is-caret::after { left: calc(100% + .04em); }
  /* espace en fin de ligne (hors mot) : sa boîte est déformée par le retour à la ligne, hauteur fixée */
  .motion .type > .type__ch.is-caret::after { bottom: auto; height: calc(var(--caret-box) - var(--caret-top) - var(--caret-bottom)); }
  .motion .type.is-caret-start::before { left: 0; animation: caret-out var(--blink) steps(1, end) 3; }
  /* fin de frappe : 3 clignotements puis effacé… */
  .motion .type.is-done .is-caret::after { animation: caret-out var(--blink) steps(1, end) 3 forwards; }
  /* …sauf le h1 et le titre final (« Vos documents se parlent enfin. ») : clignote sans fin */
  .motion .hero__title .type.is-done .is-caret::after,
  .motion .final__title .type.is-done .is-caret::after { animation: caret-out var(--blink) steps(1, end) infinite; }
  @keyframes caret-out { 50%, 100% { opacity: 0; } }
}

/* ------------------------------------------------------------------ démos */
@layer demos {

  /* --- racine : fenêtre à dimensions fixes */
  .demo {
    --demo-h: 440px; --bar-h: 32px; --veil-top: 0px;
    --caret-w: 1ch; --caret-top: .12em; --caret-bottom: .12em; --caret-box: 1.3em;   /* curseur de cellule, façon terminal */
    position: relative; height: var(--demo-h); overflow: hidden; contain: layout paint; isolation: isolate;
    border: 1px solid var(--line); background: var(--bg); color: var(--fg);
    font: 400 var(--fs-demo)/1.45 var(--font-mono); letter-spacing: 0;
    user-select: none; -webkit-user-select: none;
  }
  @media (min-width: 900px) { .demo { --bar-h: 36px; } }

  /* voile entre deux boucles (is-resetting) : l'étape 0 s'installe dessous, d'un coup */
  .demo::after {
    content: ""; position: absolute; inset: var(--veil-top) 0 0; z-index: 20;
    background: var(--bg); opacity: 0; pointer-events: none;
  }
  .motion .demo::after { transition: opacity var(--t-reset) var(--ease); }
  .motion .demo.is-resetting::after { opacity: 1; }
  .motion .demo.is-resetting * { transition: none !important; }
  .motion .demo.is-paused *,
  .motion .demo.is-paused *::before,
  .motion .demo.is-paused *::after { animation-play-state: paused; }

  /* apparitions / disparitions (01 §3.5) */
  .demo [data-to] { opacity: 0; visibility: hidden; }
  .motion .demo [data-from],
  .motion .demo [data-to] {
    transition: opacity var(--fx-dur, var(--t-base)) var(--ease),
                transform var(--fx-dur, var(--t-base)) var(--ease),
                visibility 0s linear 0s;
  }
  .motion .demo .is-off { opacity: 0; visibility: hidden; transition-delay: 0s, 0s, var(--fx-dur, var(--t-base)); }
  .motion .demo [data-to]:not(.is-on) { transition-delay: 0s, 0s, var(--fx-dur, var(--t-base)); }
  .motion .demo [data-to].is-on { opacity: 1; visibility: visible; }

  .motion .demo [class$="__press"] { --fx-dur: 90ms; }   /* appui de touche ou de bouton : net */

  /* --- démos sur fond blanc : présentées comme une fenêtre de l'app, posée sur un socle gris clair (piste B, 2026-10-03) */
  .demo-frame--stage { position: relative; padding: 10px; border-radius: 16px; background: #efefed; }
  @media (min-width: 900px) { .demo-frame--stage { padding: 20px; border-radius: 22px; } }
  .demo-frame--stage > .demo {
    height: calc(var(--demo-h) + 28px); display: flex; flex-direction: column;
    border-radius: 14px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .08);
  }
  /* barre de fenêtre : les trois feux de macOS */
  .demo-frame--stage > .demo::before {
    content: ""; flex: none; height: 28px; border-bottom: 1px solid #262626; background-color: #1a1a1a;
    background-image: radial-gradient(circle at 16px 14px, #ff5f57 4.5px, transparent 5px),
                      radial-gradient(circle at 32px 14px, #febc2e 4.5px, transparent 5px),
                      radial-gradient(circle at 48px 14px, #28c840 4.5px, transparent 5px);
    background-repeat: no-repeat;
  }
  .demo-frame--stage > .demo--share > .sh-track { flex: 1; min-height: 0; height: auto; }
  .demo-frame--stage .demo-toggle:focus-visible { position: absolute; right: 14px; bottom: 14px; z-index: 30; background: #fff; }

  /* =============================================================== DocDiving */
  /* Fidèle à l'app : fond sombre, pages arrondies, gris nuancés, vert sapin pour la sélection.
     Tout se déplace par transitions CSS pilotées par des variables posées à chaque étape (site.js, DEMOS.docdiving) :
     --c colonne choisie, --r page choisie, --pan/--vpan défilement de la vue d'ensemble, --k pièce lue, --scroll. */
  .demo--docdiving {
    --bg: #0f0f0f; --fg: #f2f2f2; --fg-muted: #8c8c8c; --line: #2a2a2a; --line-soft: #222;
    --dd-acc: #5fa883; --dd-acc-deep: #1f4d3a; --dd-paper: #ececec; --dd-ink: #b8b8b8;
    --demo-h: 500px; --top-h: 42px; --bot-h: 48px;
    --col-w: 78px; --gap: 12px; --th-h: 102px; --gap-y: 10px; --head-h: 46px; --pad: 14px; --lh: 6px;
    --cs: calc(var(--col-w) + var(--gap)); --rs: calc(var(--th-h) + var(--gap-y));
    --pw: 72%;
    --ease-dd: cubic-bezier(.32, .72, .16, 1); --ease-dive: cubic-bezier(.65, 0, .2, 1);
    display: flex; flex-direction: column;
    border-radius: 16px; border-color: #0f0f0f;
    font: 400 12px/1.4 var(--font-sans);
  }
  @media (min-width: 600px) { .demo--docdiving { --demo-h: 540px; --col-w: 96px; --gap: 14px; --th-h: 126px; --head-h: 50px; --pad: 18px; --lh: 7px; --pw: 64%; } }
  @media (min-width: 900px) { .demo--docdiving { --demo-h: 600px; --top-h: 48px; --bot-h: 54px; --col-w: 112px; --gap: 18px; --th-h: 146px; --gap-y: 14px; --head-h: 54px; --pad: 22px; --lh: 8px; --pw: min(52%, 540px); } }

  /* barre du haut : la pièce en cours */
  .dd-top { flex: none; height: var(--top-h); display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid #222; min-width: 0; }
  .dd-chip { flex: none; padding: 3px 8px; border-radius: 6px; background: var(--dd-acc-deep); color: #e6f2eb; font: 600 10px/1.2 var(--font-mono); letter-spacing: .04em; }
  .dd-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 13px; color: #f2f2f2; }
  .dd-count { margin-left: auto; flex: none; font: 500 11px/1 var(--font-mono); color: #a6a6a6; padding: 5px 8px; border-radius: 6px; background: #1c1c1c; }

  .dd-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; container-type: size; }

  /* ---- vue d'ensemble : une colonne par pièce */
  .dd-map {
    position: absolute; inset: 0;
    transform-origin:
      calc(var(--pad) + (var(--c) - var(--pan)) * var(--cs) + var(--col-w) / 2)
      calc(var(--head-h) + (var(--r) - var(--vpan)) * var(--rs) + var(--th-h) / 2);
  }
  .dd-track {
    position: absolute; left: var(--pad); top: 10px;
    transform: translate(calc(var(--pan) * -1 * var(--cs)), calc(var(--vpan) * -1 * var(--rs)));
  }
  .dd-col {
    position: absolute; top: 0; left: calc(var(--i) * var(--cs)); width: var(--col-w);
    display: flex; flex-direction: column; gap: var(--gap-y);
    /* la colonne choisie s'allume, les autres restent en retrait */
    opacity: calc(.5 + .5 * (1 - min(1, max(var(--i) - var(--c), var(--c) - var(--i)))));
  }
  .dd-col__head { height: calc(var(--head-h) - var(--gap-y)); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; text-align: center; }
  .dd-tag { padding: 2px 6px; border-radius: 4px; font: 600 9px/1.2 var(--font-mono); letter-spacing: .05em; background: #2c2c2c; color: #bdbdbd; }
  .dd-tag--cctp { background: #34413a; color: #cfe3d7; }
  .dd-tag--dpgf, .dd-tag--plan { background: #3a3a3a; color: #d9d9d9; }
  .dd-col__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: #bdbdbd; }

  /* vignettes : pages variées (texte, photo, plan, tableau, planning…), symboles SVG définis une fois dans la démo */
  .dd-th { position: relative; height: var(--th-h); border-radius: 6px; background: var(--dd-paper); overflow: hidden; }
  .dd-th__svg { display: block; width: 100%; height: 100%; }
  .dd-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

  /* cadres : la colonne choisie, puis la page choisie (vert sapin) */
  .dd-colframe {
    position: absolute; left: -7px; top: -6px; width: calc(var(--col-w) + 14px);
    height: calc(var(--head-h) + 7 * var(--rs) + 6px); border: 1px solid #4a4a4a; border-radius: 12px;
    transform: translateX(calc(var(--c) * var(--cs)));
  }
  .dd-sel {
    position: absolute; left: -4px; top: calc(var(--head-h) - 4px); width: calc(var(--col-w) + 8px); height: calc(var(--th-h) + 8px);
    border: 2px solid var(--dd-acc); border-radius: 9px;
    transform: translate(calc(var(--c) * var(--cs)), calc(var(--r) * var(--rs)));
  }
  .dd-tip {
    position: absolute; left: calc(var(--col-w) + 12px); top: calc(var(--head-h) + var(--th-h) / 2 - 13px);
    padding: 5px 9px; border-radius: 7px; background: #f2f2f2; color: #111; font-weight: 700; font-size: 12px; white-space: nowrap;
    transform: translate(calc(var(--c) * var(--cs)), calc(var(--r) * var(--rs)));
  }
  .demo--docdiving:not([data-sel="on"]) :is(.dd-sel, .dd-colframe),
  .demo--docdiving:not([data-tip="on"]) .dd-tip { opacity: 0; }

  /* ---- lecture : la page au centre, les pièces voisines de part et d'autre */
  .dd-read { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
  .demo--docdiving[data-scene="read"] .dd-read { opacity: 1; visibility: visible; }
  .demo--docdiving[data-scene="read"] .dd-map { opacity: 0; transform: scale(3.2); }
  /* survol : la vue d'ensemble vue de près, origine fixe, toutes les pièces éclairées */
  .demo--docdiving[data-scene="fly"] .dd-map { transform: scale(1.45); transform-origin: 50% 50%; }
  /* caméra du survol : la page (fx, fy) est placée au centre de la scène (unités cqw/cqh de .dd-stage) */
  .demo--docdiving[data-scene="fly"] .dd-track {
    transform: translate(calc(50cqw - var(--pad) - var(--col-w) / 2 - var(--fx) * var(--cs)),
                         calc(50cqh - 10px - var(--head-h) - var(--th-h) / 2 - var(--fy) * var(--rs)));
  }
  .demo--docdiving[data-scene="fly"][data-land="on"] .dd-map { transform: scale(3.2); opacity: 0; }
  .demo--docdiving[data-land="on"] .dd-read { opacity: 1; visibility: visible; }
  .demo--docdiving[data-scene="fly"] .dd-col { opacity: .9; }
  .dd-rp {
    position: absolute; top: 14px; bottom: 0; left: 50%; width: var(--pw); margin-left: calc(var(--pw) / -2);
    border-radius: 10px 10px 0 0; background: #f7f7f7; color: #1f1f1f; overflow: hidden;
  }
  .dd-rp {
    transform: translateX(calc((var(--i) - var(--k)) * (100% + 26px)));
    opacity: calc(1 - .72 * min(1, max(var(--i) - var(--k), var(--k) - var(--i))));
  }
  .dd-rp__body { padding: 18px 20px; }
  .dd-photo { display: block; width: 100%; height: 150px; border-radius: 4px; margin: 4px 0 16px; }
  .dd-tab { display: grid; grid-template-columns: 2fr 1fr 1fr; border: 1px solid #c4c4c4; margin: 6px 0 16px; }
  .dd-tab span { height: 18px; border-top: 1px solid #dcdcdc; }
  .dd-tab span:nth-child(3n+2), .dd-tab span:nth-child(3n) { border-left: 1px solid #dcdcdc; }
  .dd-tab span:nth-child(-n+3) { border-top: 0; background: #d6d6d6; }
  .dd-rp--main .dd-rp__body { transform: translateY(calc(var(--scroll) * -22%)); }
  /* numéro de page en pied */
  .dd-rc__pg { margin-top: 18px !important; text-align: right; font-size: 11px; color: #6a6a6a; }
  /* page technique du CCTP : marge des numéros, titres soulignés, tirets et sous-points */
  .dd-spec { font-size: 11.5px; line-height: 1.45; padding-left: 20px; padding-right: 20px; }
  .dd-spec > p, .dd-spec > ul { padding-left: 36px; }
  @media (min-width: 900px) { .dd-spec > p, .dd-spec > ul { padding-left: 52px; } }
  .dd-spec > .dd-cart { margin-bottom: 12px; }
  .dd-spec p + p { margin-top: 6px; }
  .dd-spec__h, .dd-spec__h2 { position: relative; font-weight: 700; margin-top: 12px !important; }
  .dd-spec__h { font-size: 14px; }
  .dd-spec__h u { text-underline-offset: 2px; }
  .dd-spec__h em, .dd-spec__h2 em { position: absolute; left: 0; font-style: normal; font-weight: 400; font-size: 11px; color: #4a4a4a; }
  .dd-spec ul { margin-top: 4px; }
  .dd-spec li { list-style: none; position: relative; padding-left: 12px; }
  .dd-spec li::before { content: "-"; position: absolute; left: 2px; }
  .dd-spec li.dd-spec__sub { padding-left: 34px; }
  .dd-spec li.dd-spec__sub::before { content: "*"; left: 24px; }
  /* planning (page voisine) */
  .dd-gantt { position: relative; margin: 10px 0 18px; display: grid; gap: 7px; border-left: 1px solid #c4c4c4; padding: 4px 0; }
  .dd-gantt span { display: block; height: 8px; margin-left: calc(var(--s) * 1%); width: calc(var(--w) * 1%); border-radius: 2px; background: #9a9a9a; }
  .dd-gantt span.is-key { background: #5fa883; }
  .dd-rp__kicker { font: 600 10px/1.3 var(--font-mono); color: #6f6f6f; margin-bottom: 14px; }
  .dd-rp__h { font-weight: 700; font-size: 15px; margin: 14px 0 10px; letter-spacing: -.01em; }
  .dd-rp__txt { font-size: 12.5px; line-height: 1.55; margin: 6px 0 14px; }
  .dd-cart { display: grid; grid-template-columns: 1.1fr 2fr .7fr; border: 1px solid #bdbdbd; font-size: 9.5px; line-height: 1.3; text-align: center; }
  .dd-cart > span { padding: 7px 6px; display: flex; flex-direction: column; justify-content: center; }
  .dd-cart > span + span { border-left: 1px solid #bdbdbd; }
  .dd-cart b { font-size: 9.5px; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 2px; }
  .dd-toc { display: flex; align-items: baseline; gap: 6px; font-size: 11px; line-height: 1.75; padding-left: 14%; }
  .dd-toc--h { padding-left: 4%; font-weight: 700; }
  .dd-toc i { flex: 1; border-bottom: 1px dotted #9a9a9a; transform: translateY(-3px); }
  .dd-toc em { font-style: normal; font-variant-numeric: tabular-nums; }
  .dd-lines { display: block; height: 220px; position: relative; overflow: hidden; }
  .dd-lines::after {
    content: ""; position: absolute; left: 0; top: 4px; width: 92%; height: 3px; border-radius: 2px; background: #cfcfcf;
    box-shadow: 0 13px 0 #d9d9d9, 0 26px 0 #cfcfcf, 0 39px 0 #d9d9d9, 0 52px 0 #cfcfcf, 0 78px 0 #cfcfcf, 0 91px 0 #d9d9d9,
      0 104px 0 #cfcfcf, 0 117px 0 #d9d9d9, 0 143px 0 #cfcfcf, 0 156px 0 #d9d9d9, 0 169px 0 #cfcfcf, 0 182px 0 #d9d9d9;
  }
  .dd-lines--short { height: 60px; }
  .dd-arrow {
    position: absolute; top: 50%; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%;
    background: #1c1c1c; border: 1px solid #333; display: grid; place-items: center;
  }
  .dd-arrow::before { content: ""; width: 9px; height: 9px; border: solid #e6e6e6; border-width: 2px 2px 0 0; }
  .dd-arrow--l { left: 10px; } .dd-arrow--l::before { transform: translateX(2px) rotate(-135deg); }
  .dd-arrow--r { right: 10px; } .dd-arrow--r::before { transform: translateX(-2px) rotate(45deg); }
  .demo--docdiving[data-arrow="r"] .dd-arrow--r { background: var(--dd-acc); border-color: var(--dd-acc); }
  .demo--docdiving[data-arrow="r"] .dd-arrow--r::before { border-color: #0f0f0f; }

  /* page trouvée : surlignage vert sapin qui se pose (pas de dégradé : un bloc qui s'étire) */
  .dd-htrack { position: absolute; inset: 0; opacity: 0; transform: translateY(18px); }
  .demo--docdiving[data-hit="on"] .dd-htrack { opacity: 1; transform: none; }
  .demo--docdiving[data-hit="on"] .dd-rtrack { opacity: 0; }
  /* surligneur : un aplat qui s'étire, ligne par ligne (box-decoration-break), comme un stabilo */
  .dd-mark {
    padding: 1px 3px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
    background-image: linear-gradient(#cfe6d8, #cfe6d8); background-repeat: no-repeat; background-size: 0% 100%;
  }
  .demo--docdiving[data-hit="on"] .dd-mark, .demo--docdiving[data-step="end"] .dd-mark { background-size: 100% 100%; }

  /* ---- recherche dans tout le dossier */
  .dd-search { position: absolute; inset: 0; z-index: 5; background: rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; }
  .demo--docdiving[data-search="on"] .dd-search { opacity: 1; visibility: visible; }
  .dd-sp {
    width: min(92%, 600px); margin: 26px auto 0; border-radius: 14px; background: #1a1a1a; border: 1px solid #353535; overflow: hidden;
    transform: translateY(-10px) scale(.98);
  }
  .demo--docdiving[data-search="on"] .dd-sp { transform: none; }
  .dd-sp__box { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #2c2c2c; font-size: 16px; color: #f2f2f2; }
  .dd-ico { width: 13px; height: 13px; border: 2px solid #d9d9d9; border-radius: 50%; position: relative; flex: none; }
  .dd-ico::after { content: ""; position: absolute; width: 2px; height: 7px; background: #d9d9d9; right: -4px; bottom: -6px; transform: rotate(-45deg); }
  .dd-sp__q { flex: 1; min-width: 0; font-family: var(--font-sans); }
  .dd-sp__esc { font: 500 10px/1 var(--font-mono); color: #8c8c8c; border: 1px solid #3a3a3a; border-radius: 5px; padding: 4px 6px; }
  .dd-sp__h { padding: 12px 16px 4px; font: 600 9.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #7a7a7a; }
  .dd-row { padding: 9px 16px 10px; border-left: 2px solid transparent; opacity: 0; transform: translateY(6px); }
  .demo--docdiving[data-results="on"] .dd-row, .demo--docdiving[data-step="end"] .dd-row { opacity: 1; transform: none; }
  /* sélection d'un extrait : barre verte, fond teinté, « ↵ ouvrir » — posée à l'étape pick, nette */
  .dd-row__go { flex: none; margin-left: 10px; padding: 3px 7px; border-radius: 5px; background: var(--dd-acc); color: #0f0f0f; font: 600 10px/1 var(--font-mono); opacity: 0; transform: translateX(-6px); }
  .demo--docdiving:is([data-pick="on"], [data-step="end"]) .dd-row--sel { background: #2c4337; border-left-color: var(--dd-acc); }
  .demo--docdiving:is([data-pick="on"], [data-step="end"]) .dd-row__go { opacity: 1; transform: none; }
  .demo--docdiving[data-search="on"][data-key="enter"] .dd-row--sel { background: #3d6b55; }
  .dd-row__t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #ededed; min-width: 0; }
  .dd-row__t em { margin-left: auto; flex: none; font: 400 10.5px/1 var(--font-mono); font-style: normal; color: #8c8c8c; padding-left: 8px; }
  .dd-row__s { margin-top: 4px; font-size: 11.5px; color: #a6a6a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dd-row mark { background: #2f5442; color: #e6f2eb; border-radius: 3px; padding: 0 2px; }
  .dd-dot { width: 6px; height: 6px; border-radius: 50%; background: #9a9a9a; flex: none; }
  .dd-dot--cctp { background: var(--dd-acc); }
  .dd-row--more { display: none; }
  @media (min-width: 600px) { .dd-row--more { display: block; } }

  /* ---- barre du bas : ce qui se passe, et la touche qui le fait */
  .dd-bot { position: relative; flex: none; height: var(--bot-h); display: flex; align-items: center; gap: 12px; padding: 0 14px; border-top: 1px solid #222; }
  .dd-rail { position: absolute; left: 14px; right: 14px; top: -2px; height: 3px; border-radius: 2px; background: #2c2c2c; overflow: hidden; }
  .dd-rail__on { position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% / 12); border-radius: 2px; background: var(--dd-acc); transform: translateX(calc(var(--c) * 100%)); }
  .dd-say { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: #f2f2f2; }
  .dd-say::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--dd-acc); vertical-align: 1px; }
  .dd-keys { margin-left: auto; display: flex; gap: 6px; flex: none; }
  .dd-key { display: none; padding: 5px 8px; border-radius: 6px; border: 1px solid #353535; color: #8c8c8c; font: 500 10.5px/1 var(--font-mono); white-space: nowrap; }
  @media (min-width: 600px) { .dd-key { display: inline-flex; } }
  .demo--docdiving:is([data-key="space"]) .dd-key[data-k="space"],
  .demo--docdiving:is([data-key="arrows"]) .dd-key[data-k="arrows"],
  .demo--docdiving:is([data-key="cmdk"]) .dd-key[data-k="cmdk"],
  .demo--docdiving:is([data-key="enter"]) .dd-key[data-k="enter"] { display: inline-flex; background: var(--dd-acc); border-color: var(--dd-acc); color: #0f0f0f; }

  /* ---- mouvement (uniquement avec .motion : sans JS ou en mouvement réduit, l'état final est posé) */
  .motion .demo--docdiving .dd-track { transition: transform .32s var(--ease-dd); }
  .motion .demo--docdiving .dd-col { transition: opacity .25s var(--ease-dd); }
  .motion .demo--docdiving :is(.dd-colframe, .dd-sel, .dd-tip) { transition: transform .2s var(--ease-dd), opacity .25s var(--ease-dd); }
  .motion .demo--docdiving .dd-rail__on { transition: transform .2s var(--ease-dd); }
  .motion .demo--docdiving .dd-map { transition: transform .7s var(--ease-dive), transform-origin .6s var(--ease-dive), opacity .45s var(--ease-dive) .15s; }
  /* survol : un seul trajet en ligne droite (translation pure), accélère puis freine */
  .motion .demo--docdiving[data-scene="fly"] .dd-track { transition: transform 1.15s cubic-bezier(.5, 0, .3, 1); }
  .motion .demo--docdiving .dd-row__go { transition: opacity .3s var(--ease-dd) .15s, transform .3s var(--ease-dd) .15s; }
  /* lecture et recherche : la transition est celle de l'état d'arrivée (entrée retardée, sortie franche) */
  .motion .demo--docdiving .dd-read { transition: opacity .4s var(--ease-dd), visibility 0s linear .4s; }
  .motion .demo--docdiving:is([data-scene="read"], [data-land="on"]) .dd-read { transition: opacity .55s var(--ease-dd) .25s, visibility 0s linear 0s; }
  .motion .demo--docdiving .dd-search { transition: opacity .3s var(--ease-dd), visibility 0s linear .3s; }
  .motion .demo--docdiving[data-search="on"] .dd-search { transition: opacity .3s var(--ease-dd), visibility 0s linear 0s; }
  .motion .demo--docdiving .dd-sp { transition: transform .4s var(--ease-dd); }
  .motion .demo--docdiving .dd-rtrack { transition: opacity .35s var(--ease-dd); }
  .motion .demo--docdiving .dd-rp { transition: transform .5s var(--ease-dive), opacity .4s var(--ease-dd); }
  .motion .demo--docdiving .dd-rp__body { transition: transform 1.1s cubic-bezier(.45, 0, .2, 1); }
  .motion .demo--docdiving .dd-htrack { transition: opacity .45s var(--ease-dd) .1s, transform .5s var(--ease-dd) .1s; }
  .motion .demo--docdiving .dd-mark { transition: background-size .7s var(--ease-dd) .55s; }
  .motion .demo--docdiving .dd-mark--late { transition-delay: 1s; }
  .motion .demo--docdiving .dd-row { transition: opacity .4s var(--ease-dd) calc(var(--j) * 110ms), transform .45s var(--ease-dd) calc(var(--j) * 110ms), background-color .2s; }
  /* ouverture du DCE : les colonnes puis les pages arrivent en cascade */
  .motion .demo--docdiving .dd-th { transition: opacity .5s var(--ease-dd) calc(var(--i) * 75ms + var(--j) * 70ms), transform .65s var(--ease-dd) calc(var(--i) * 75ms + var(--j) * 70ms); }
  .motion .demo--docdiving .dd-col__head { transition: opacity .4s var(--ease-dd) calc(var(--i) * 75ms); }
  .motion .demo--docdiving[data-boot="on"] .dd-th { opacity: 0; transform: translateY(18px) scale(.94); }
  .motion .demo--docdiving[data-boot="on"] .dd-col__head { opacity: 0; }
  /* curseur de frappe de la recherche, visible sur fond sombre */
  .motion .demo--docdiving .type__ch.is-caret::after { background: var(--dd-acc); }

  /* =============================================================== Agent (chat) */
  /* Fidèle à l'onglet Agent de l'app (fond sombre, conversation à gauche, panneau Documents / Sources à droite),
     vert sapin à la place du violet et du bleu. Pilotage par variables et attributs posés à chaque étape :
     --prog étape de travail affichée, --rd pièce en cours de lecture ; data-panel, data-sent, data-work, data-ans… */
  .demo--agent {
    --bg: #0f0f0f; --fg: #f2f2f2; --fg-muted: #8c8c8c; --line: #2a2a2a; --line-soft: #222;
    --ag-acc: #5fa883; --ag-deep: #1f4d3a; --pw: 72%; --row: 28px;
    --demo-h: 520px; --ease-ag: cubic-bezier(.32, .72, .16, 1);
    display: flex; flex-direction: column; border-radius: 16px; border-color: #0f0f0f;
    font: 400 12px/1.45 var(--font-sans);
  }
  @media (min-width: 900px) { .demo--agent { --demo-h: 600px; --pw: min(52%, 540px); } }
  .ag-top { flex: none; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid #222; min-width: 0; }
  .ag-bot { width: 18px; height: 16px; border-radius: 5px; border: 2px solid var(--ag-acc); position: relative; flex: none; }
  .ag-bot::after { content: ""; position: absolute; top: 4px; left: 3px; width: 3px; height: 3px; border-radius: 50%; background: var(--ag-acc); box-shadow: 5px 0 0 var(--ag-acc); }
  .ag-bot--s { width: 14px; height: 12px; border-width: 1.5px; }
  .ag-bot--s::after { top: 3px; left: 2px; width: 2px; height: 2px; box-shadow: 4px 0 0 var(--ag-acc); }
  .ag-top__t { font-weight: 700; font-size: 13px; }
  .ag-top__p { color: #8c8c8c; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .ag-top__h, .ag-top__n { flex: none; padding: 4px 9px; border-radius: 7px; border: 1px solid #2c2c2c; color: #a6a6a6; font-size: 11px; }
  .ag-top__h { margin-left: auto; }
  .ag-top__n { display: none; }
  @media (min-width: 600px) { .ag-top__n { display: block; } }

  .ag-stage { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 12px; }
  @media (min-width: 900px) { .ag-stage { grid-template-columns: minmax(0, 1fr) 34%; padding: 14px; } }

  /* ---- conversation */
  .ag-chat { position: relative; display: flex; flex-direction: column; min-height: 0; border-radius: 12px; background: #161616; border: 1px solid #262626; overflow: hidden; }
  .ag-thread { flex: 1; min-height: 0; padding: 16px 18px; display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 14px; overflow: hidden; }
  .ag-user { justify-self: end; max-width: 85%; text-align: right; }
  .ag-meta { display: flex; align-items: center; gap: 6px; font: 400 10.5px/1 var(--font-mono); color: #7a7a7a; margin-bottom: 6px; }
  .ag-user .ag-meta { justify-content: flex-end; }
  .ag-bubble { display: inline-block; text-align: left; padding: 11px 16px; border-radius: 16px; background: var(--ag-deep); border: 1px solid #2f6b50; color: #f2f2f2; font-size: 14px; }
  .demo--agent:not([data-sent="on"]) .ag-user { opacity: 0; transform: translateY(10px); }
  /* état vide de l'app, avant la première question */
  .ag-empty { position: absolute; inset: 0 0 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; color: #8c8c8c; font-size: 12px; pointer-events: none; }
  .ag-empty b { color: #e6e6e6; font-size: 15px; }
  .ag-empty__i { width: 34px; height: 28px; border-radius: 9px; border: 2px solid #4a4a4a; margin-bottom: 6px; position: relative; }
  .ag-empty__i::after { content: ""; position: absolute; left: 6px; bottom: -7px; width: 8px; height: 8px; border: solid #4a4a4a; border-width: 0 0 2px 2px; transform: skewY(-35deg); background: #161616; }
  .demo--agent[data-sent="on"] .ag-empty { opacity: 0; }

  /* étapes de travail, telles qu'affichées par l'app : la plus récente pulse, les anciennes s'estompent */
  .ag-steps, .ag-answer { grid-row: 2; grid-column: 1; min-width: 0; }
  .ag-steps { list-style: none; display: grid; gap: 8px; align-content: start; font-size: 13px; color: #cfcfcf; }
  .ag-steps li {
    --vis: clamp(0, calc(var(--prog) - var(--n) + 1), 1); --old: clamp(0, calc(var(--prog) - var(--n)), 1);
    display: flex; align-items: center; gap: 9px;
    opacity: calc(var(--vis) * (1 - .5 * var(--old))); transform: translateY(calc((1 - var(--vis)) * 6px));
  }
  .ag-steps i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #6f6f6f; position: relative; }
  .ag-steps i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--ag-acc); opacity: calc(1 - var(--old)); }
  .ag-steps li { --cur: calc(var(--vis) * (1 - var(--old))); }
  .ag-steps i { background: color-mix(in srgb, var(--ag-acc) calc(var(--cur) * 100%), #6f6f6f); }
  .demo--agent[data-ans="on"] .ag-steps { opacity: 0; visibility: hidden; }

  /* réponse : markdown rendu, citations numérotées en pastilles */
  .ag-answer { font-size: 14px; line-height: 1.55; color: #e6e6e6; }
  @media (min-width: 900px) { .ag-answer { font-size: 15px; } .ag-thread { padding: 22px 26px; } }
  .ag-answer ul { list-style: none; margin-top: 6px; display: grid; gap: 7px; }
  .ag-answer li { position: relative; padding-left: 16px; }
  .ag-answer li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: #8c8c8c; }
  .ag-answer b { color: #fff; font-weight: 700; }
  .ag-l { opacity: 0; transform: translateY(6px); }
  .demo--agent[data-ans="on"] .ag-l { opacity: 1; transform: none; }
  .demo--agent:not([data-ans="on"]) .ag-answer > .ag-meta { opacity: 0; }
  .ag-doc { padding: 0 6px; border-radius: 5px; background: #1b2a22; border: 1px solid #2f5442; color: #a9dcc0; white-space: nowrap; }
  .ag-cite {
    position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 2px; vertical-align: 1px;
    border-radius: 4px; background: rgba(95, 168, 131, .2); color: #9fd8b9; font: 700 10px/1 var(--font-mono);
  }
  .demo--agent[data-hover="on"] .ag-cite--first { background: var(--ag-acc); color: #0f0f0f; box-shadow: 0 0 0 3px rgba(95, 168, 131, .3); }
  .ag-tip {
    position: absolute; left: 50%; bottom: calc(100% + 8px); padding: 4px 8px; border-radius: 6px; background: #f2f2f2; color: #111;
    font: 600 11px/1.2 var(--font-sans); white-space: nowrap; opacity: 0; transform: translate(-50%, 4px); pointer-events: none;
  }
  .demo--agent[data-hover="on"]:not([data-open="on"]) .ag-tip { opacity: 1; transform: translate(-50%, 0); }
  /* pointeur de souris, dessiné (pas d'image) */
  .ag-cursor {
    position: absolute; left: 9px; top: 9px; width: 14px; height: 20px; background: #fff;
    clip-path: polygon(0 0, 0 80%, 24% 63%, 40% 100%, 55% 94%, 40% 58%, 75% 58%);
    opacity: 0; transform: translate(46px, 40px);
  }
  .demo--agent[data-hover="on"] .ag-cursor { opacity: 1; transform: none; }
  .demo--agent[data-open="on"] .ag-cursor { transform: scale(.85); }

  /* saisie : sélecteur de longueur de réponse, bouton d'envoi (vert quand il y a du texte, roue pendant le travail) */
  .ag-input { position: relative; flex: none; margin: 0 12px 12px; padding: 10px 12px; border-radius: 12px; background: #1f1f1f; border: 1px solid #2c2c2c; }
  .ag-input__ph { color: #6f6f6f; font-size: 13px; }
  .ag-input__q { position: absolute; top: 10px; left: 12px; right: 12px; color: #f2f2f2; font-size: 13px; opacity: 0; }
  .demo--agent[data-typing="on"] .ag-input__q { opacity: 1; }
  .demo--agent[data-typing="on"] .ag-input__ph { opacity: 0; }
  .ag-input__row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
  .ag-mode { padding: 3px 10px; border-radius: 999px; border: 1px solid #333; color: #a6a6a6; font-size: 11px; }
  .ag-send { width: 30px; height: 30px; border-radius: 50%; background: #2c2c2c; display: grid; place-items: center; }
  .ag-send::before { content: ""; width: 8px; height: 8px; border: solid #8c8c8c; border-width: 2px 2px 0 0; transform: translateY(2px) rotate(-45deg); }
  .demo--agent[data-typing="on"] .ag-send { background: var(--ag-acc); }
  .demo--agent[data-typing="on"] .ag-send::before { border-color: #0f0f0f; }
  .demo--agent[data-work="on"] .ag-send::before { width: 12px; height: 12px; border: 2px solid #4a4a4a; border-top-color: var(--ag-acc); border-radius: 50%; transform: none; }

  /* ---- panneau : Documents (pièces interrogées, curseur sur la pièce lue) puis Sources */
  .ag-panel { display: none; }
  @media (min-width: 900px) {
    .ag-panel { position: relative; display: grid; grid-template-rows: auto 1fr; min-height: 0; border-radius: 12px; background: #161616; border: 1px solid #262626; overflow: hidden; }
  }
  .ag-tabs { display: flex; border-bottom: 1px solid #262626; }
  .ag-tab { padding: 10px 14px; font-size: 12px; color: #7a7a7a; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .demo--agent[data-panel="sources"] .ag-tab--src, .demo--agent[data-panel="docs"] .ag-tab--docs { color: #f2f2f2; border-bottom-color: var(--ag-acc); }
  .ag-docs, .ag-src { grid-row: 2; grid-column: 1; min-height: 0; padding: 10px 12px; overflow: hidden; }
  .demo--agent[data-panel="sources"] .ag-docs, .demo--agent[data-panel="docs"] .ag-src { opacity: 0; visibility: hidden; }
  .ag-docs { display: flex; flex-direction: column; }
  .ag-docs__all { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #a6a6a6; padding-bottom: 6px; border-bottom: 1px solid #222; margin-bottom: 4px; }
  .ag-docs__list { position: relative; }
  .ag-docs__row { position: relative; display: flex; align-items: center; gap: 8px; height: var(--row); font-size: 12px; color: #d0d0d0; white-space: nowrap; overflow: hidden; }
  /* case cochée : coche tracée (clip-path), centrée, nette à toutes les tailles */
  .ag-box { width: 14px; height: 14px; flex: none; border-radius: 4px; background: var(--ag-acc); position: relative; }
  .ag-box::after {
    content: ""; position: absolute; inset: 0; background: #0f0f0f;
    clip-path: polygon(22% 50%, 34% 38%, 44% 49%, 68% 25%, 80% 37%, 44% 73%);
  }
  .ag-tag { flex: none; width: 44px; padding: 1px 0; text-align: center; border-radius: 4px; background: #2c2c2c; color: #bdbdbd; font: 600 8.5px/1.3 var(--font-mono); letter-spacing: .04em; }   /* largeur fixe : les noms s'alignent */
  .ag-tag--cctp { background: #34413a; color: #cfe3d7; }
  .ag-docs__cursor {
    position: absolute; left: -6px; right: -6px; top: 0; height: var(--row); border-radius: 7px;
    background: rgba(95, 168, 131, .14); border: 1px solid var(--ag-acc); opacity: 0;
    transform: translateY(calc(var(--rd) * var(--row)));
  }
  .ag-docs__cursor::after { content: "lecture…"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 600 9.5px/1 var(--font-mono); color: var(--ag-acc); }
  .demo--agent[data-reading="on"] .ag-docs__cursor { opacity: 1; }
  .ag-docs__foot { margin-top: auto; padding-top: 8px; font-size: 11px; color: #8c8c8c; }
  .ag-docs__foot b { color: #f2f2f2; }
  .ag-src__sub { font-size: 11px; color: #8c8c8c; margin-bottom: 2px; }
  .ag-card { position: relative; height: 128px; margin-top: 10px; border-radius: 10px; overflow: hidden; background: #ececec; border: 2px solid #3a3a3a; opacity: 0; transform: translateY(10px); }
  .demo--agent[data-panel="sources"] .ag-card { opacity: 1; transform: none; }
  .demo--agent[data-hover="on"] .ag-card[style*="--n:0"] { border-color: var(--ag-acc); }
  .ag-card__svg { display: block; width: 100%; height: 100%; }
  .ag-card__chips { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; }
  .ag-card__chips i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ag-acc); color: #0f0f0f; font: 700 10px/1 var(--font-mono); font-style: normal; }
  .ag-card__over { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; background: rgba(12, 12, 12, .88); }
  .ag-card__over b { display: block; font-size: 12px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ag-card__over > span { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 10.5px; color: #bdbdbd; }
  .ag-card__over em { font-style: normal; padding: 1px 5px; border-radius: 4px; background: #2c2c2c; font: 600 8.5px/1.3 var(--font-mono); }
  .ag-card__open { margin-left: auto; color: #a9dcc0; }

  /* ---- clic sur la citation : la page s'ouvre dans DocDiving, la phrase se surligne */
  .ag-dd { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; background: #0f0f0f; opacity: 0; visibility: hidden; transform: scale(.94); }
  .demo--agent[data-open="on"] .ag-dd { opacity: 1; visibility: visible; transform: none; }
  .ag-dd__bar { flex: none; height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 14px; border-bottom: 1px solid #222; }
  .ag-dd__tab { padding: 3px 9px; border-radius: 6px; background: #1f1f1f; border: 1px solid #333; color: #d9d9d9; font: 600 10.5px/1.2 var(--font-mono); }
  .ag-dd__chip { padding: 3px 8px; border-radius: 6px; background: var(--ag-deep); color: #e6f2eb; font: 600 10px/1.2 var(--font-mono); }
  .ag-dd__name { font-weight: 700; font-size: 13px; }
  .ag-dd__count { margin-left: auto; padding: 5px 8px; border-radius: 6px; background: #1c1c1c; color: #a6a6a6; font: 500 11px/1 var(--font-mono); }
  .ag-dd__row { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; gap: 26px; padding-top: 14px; overflow: hidden; }
  .ag-dd__page { flex: none; width: var(--pw); height: 100%; padding: 18px 20px; border-radius: 10px 10px 0 0; background: #f7f7f7; color: #1f1f1f; overflow: hidden; }
  .ag-dd__page--side { opacity: .28; }
  .ag-dd__kicker { font: 600 10px/1.3 var(--font-mono); color: #6f6f6f; margin-bottom: 14px; }
  .ag-dd__h { font-weight: 700; font-size: 15px; margin: 14px 0 10px; }
  .ag-dd__txt { font-size: 12.5px; line-height: 1.55; margin: 6px 0 14px; }
  .ag-lines { display: block; height: 220px; position: relative; overflow: hidden; }
  .ag-lines--short { height: 60px; }
  .ag-lines::after {
    content: ""; position: absolute; left: 0; top: 4px; width: 92%; height: 3px; border-radius: 2px; background: #cfcfcf;
    box-shadow: 0 13px 0 #d9d9d9, 0 26px 0 #cfcfcf, 0 39px 0 #d9d9d9, 0 52px 0 #cfcfcf, 0 78px 0 #cfcfcf, 0 91px 0 #d9d9d9,
      0 104px 0 #cfcfcf, 0 117px 0 #d9d9d9, 0 143px 0 #cfcfcf, 0 156px 0 #d9d9d9, 0 169px 0 #cfcfcf, 0 182px 0 #d9d9d9;
  }
  .ag-mark {
    padding: 1px 3px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
    background-image: linear-gradient(#cfe6d8, #cfe6d8); background-repeat: no-repeat; background-size: 0% 100%;
  }
  .demo--agent[data-open="on"] .ag-mark { background-size: 100% 100%; }

  /* ---- mouvement (avec .motion seulement) */
  .motion .demo--agent .ag-user { transition: opacity .45s var(--ease-ag), transform .5s var(--ease-ag); }
  .motion .demo--agent .ag-empty { transition: opacity .3s var(--ease-ag); }
  .motion .demo--agent .ag-steps li { transition: opacity .35s var(--ease-ag), transform .4s var(--ease-ag); }
  .motion .demo--agent .ag-steps i { transition: background-color .3s; }
  .motion .demo--agent .ag-steps i::after { animation: ag-pulse 1.1s ease-out infinite; transition: opacity .3s; }
  @keyframes ag-pulse { from { transform: scale(.6); } to { transform: scale(1.5); opacity: 0; } }
  .motion .demo--agent .ag-steps { transition: opacity .3s var(--ease-ag), visibility 0s linear .3s; }
  .motion .demo--agent .ag-l { transition: opacity .45s var(--ease-ag) calc(.15s + var(--n) * 170ms), transform .5s var(--ease-ag) calc(.15s + var(--n) * 170ms); }
  .motion .demo--agent .ag-answer > .ag-meta { transition: opacity .3s var(--ease-ag); }
  .motion .demo--agent :is(.ag-cite, .ag-tip, .ag-card) { transition: background-color .2s, color .2s, box-shadow .2s, opacity .3s var(--ease-ag), transform .35s var(--ease-ag), border-color .2s; }
  .motion .demo--agent .ag-card { transition-delay: calc(.35s + var(--n) * 140ms); }
  .motion .demo--agent .ag-cursor { transition: opacity .25s, transform .6s var(--ease-ag); }
  .motion .demo--agent :is(.ag-input__q, .ag-input__ph, .ag-send) { transition: opacity .2s, background-color .2s; }
  .motion .demo--agent .ag-send::before { animation: ag-spin .8s linear infinite; animation-play-state: paused; }
  .motion .demo--agent[data-work="on"] .ag-send::before { animation-play-state: running; }
  @keyframes ag-spin { to { rotate: 360deg; } }
  .motion .demo--agent :is(.ag-docs, .ag-src) { transition: opacity .35s var(--ease-ag), visibility 0s linear .35s; }
  .motion .demo--agent[data-panel="docs"] .ag-docs, .motion .demo--agent[data-panel="sources"] .ag-src { transition: opacity .35s var(--ease-ag), visibility 0s; }
  .motion .demo--agent .ag-docs__cursor { transition: transform .35s var(--ease-ag), opacity .3s; }
  .motion .demo--agent .ag-tab { transition: color .2s, border-color .2s; }
  .motion .demo--agent .ag-dd { transition: opacity .45s var(--ease-ag), transform .55s var(--ease-ag), visibility 0s linear .45s; }
  .motion .demo--agent[data-open="on"] .ag-dd { transition: opacity .45s var(--ease-ag) .15s, transform .55s var(--ease-ag) .15s, visibility 0s; }
  .motion .demo--agent .ag-mark { transition: background-size .8s var(--ease-ag) .8s; }
  .motion .demo--agent .type__ch.is-caret::after { background: var(--ag-acc); }

  /* =============================================================== Consultation (sur noir) */
  /* L'arbre de la séquence de relance, comme dans l'app : envoi → « Pas de réponse » (relances, sous leur délai)
     ou « Réponse » (Non → motif → fin ; Oui → rappel J−2) ; chaque relance peut ramener vers « Réponse » ; tout
     rejoint l'échéance. Animation : --st (étape atteinte) allume le chemin d'une entreprise ; le nœud courant pulse. */
  .demo--consult {
    --bg: #0f0f0f; --fg: #f2f2f2; --fg-muted: #8c8c8c; --line: #2a2a2a;
    --cs-acc: #5fa883;
    --cs-blue: #7aa7dc; --cs-red: #e07a64; --cs-green: #5fa883;   /* envoyé · sans réponse · a répondu */
    --demo-h: auto; height: auto; display: flex; flex-direction: column;
    border-radius: 16px; border-color: #2a2a2a; font: 400 12px/1.4 var(--font-sans);
  }
  .cs-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 12px 14px; border-bottom: 1px solid #222; }
  .cs-head__t { font-weight: 700; font-size: 13px; }
  .cs-head__who { padding: 3px 8px; border-radius: 6px; background: #1f1f1f; color: #d0d0d0; font-size: 11.5px; }
  .cs-stage { padding: 8px 6px 4px; }
  .cs-tree { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; overflow: visible; font-family: var(--font-sans); }

  /* traits de l'arbre : rouge éteint côté silence, vert côté réponse, gris côté refus */
  .cs-e { fill: none; stroke-width: 2; stroke-linecap: round; }
  .cs-e { stroke: rgba(255, 255, 255, .16); }   /* au repos, tout est neutre : seul le chemin parcouru se colore */
  .cs-arrow { fill: rgba(255, 255, 255, .3); }
  /* chemin parcouru : se dessine segment après segment (pathLength = 1) */
  .cs-route path {
    --lit: clamp(0, calc(var(--st) - var(--k) + 1), 1);
    fill: none; stroke: var(--tc, transparent); stroke-width: 3.2; stroke-linecap: round;
    /* valeurs en px (Firefox refuse un calc() sans unité ici) ; pathLength = 1 → 1px = toute la longueur */
    stroke-dasharray: 1px 1px; stroke-dashoffset: calc((1 - var(--lit)) * 1px);
    opacity: var(--lit);   /* garde-fou : un segment pas encore atteint reste invisible, quoi qu'il arrive */
  }


  /* nœuds, pastilles, délais */
  .cs-node > .cs-box, .cs-clock > .cs-box { fill: #1c1c1c; stroke: rgba(255, 255, 255, .16); stroke-width: 1.2; }
  .cs-pill > .cs-box { fill: #141414; stroke-width: 1.6; }
  .cs-pill > .cs-box { stroke: rgba(255, 255, 255, .22); }
  .cs-pill text { font-size: 15px; font-weight: 700; fill: #ececec; }
  .cs-node__l { font-size: 16px; font-weight: 700; fill: #f2f2f2; }
  .cs-node__d { font-size: 13px; fill: #9a9a9a; font-variant-numeric: tabular-nums; }
  .cs-clock text { font-size: 13px; fill: #a6a6a6; }
  .cs-clock circle, .cs-clock path { fill: none; stroke: #a6a6a6; stroke-width: 1.5; }
  .cs-ico { fill: #262626; }
  .cs-ico__p { fill: none; stroke: #d9d9d9; stroke-width: 1.8; stroke-linejoin: round; }
  .cs-chip rect { fill: #262626; stroke: rgba(255, 255, 255, .14); }
  .cs-chip text { font-size: 12px; fill: #d0d0d0; }
  .cs-chip__ico { fill: none; stroke: #bdbdbd; stroke-width: 1.3; }
  /* couleur du chemin, posée sur la racine : bleu = envoyé, rouge = sans réponse, vert = a répondu (tout le chemin bascule) */
  [data-tone="send"] { --tc: var(--cs-blue); --tf: rgba(122, 167, 220, .14); }
  [data-tone="sil"] { --tc: var(--cs-red); --tf: rgba(224, 122, 100, .14); }
  [data-tone="ok"] { --tc: var(--cs-green); --tf: rgba(95, 168, 131, .14); }
  /* atteinte : contour coloré ; en cours : halo fort (flou SVG) */
  .cs-glow { fill: var(--tf, transparent); stroke: var(--tc, transparent); stroke-width: 2.2; opacity: 0; }
  .cs-halo { fill: none; stroke: var(--tc, transparent); stroke-width: 7; opacity: 0; }
  .cs-clock > .cs-halo { display: none; }   /* le délai s'allume avec sa relance, sans halo : un seul point d'attention */
  [style*="--k"] > .cs-glow { opacity: clamp(0, calc(var(--st) - var(--k) + 1), 1); }
  [style*="--k"] > .cs-halo { opacity: calc(clamp(0, calc(var(--st) - var(--k) + 1), 1) * (1 - clamp(0, calc(var(--st) - var(--k)), 1)) * .95); }

  /* mouvement */
  .motion .demo--consult .cs-route path { transition: stroke-dashoffset .8s cubic-bezier(.45, 0, .25, 1), stroke .6s ease; }
  .motion .demo--consult .cs-glow { transition: opacity .35s ease .45s, stroke .6s ease, fill .6s ease; }
  .motion .demo--consult .cs-halo { transition: opacity .45s ease .45s, stroke .6s ease; animation: cs-pulse 1.4s ease-in-out infinite; }
  @keyframes cs-pulse { 50% { stroke-width: 11; } }

  /* =============================================================== Comparaison */
  /* Fidèle à l'écran de comparaison de l'app (sélecteur V1 / V2 avec « VS », analyse, rapport, synthèse, détail en
     mode révision). Bleu = ancienne version, vert = nouvelle, rouge barré = supprimé, vert souligné = ajouté.
     Pilotage : data-scene (select | load | result), data-v1/v2/tab2/drop/press/export, --sum (lignes de synthèse). */
  .demo--compare {
    --bg: #0f0f0f; --fg: #f2f2f2; --fg-muted: #8c8c8c; --line: #2a2a2a;
    --cp-blue: #7aa7dc; --cp-green: #5fa883; --cp-red: #e07a64; --cp-amber: #e3b25e;
    --demo-h: 600px; display: flex; flex-direction: column; border-radius: 16px; border-color: #0f0f0f;
    font: 400 12.5px/1.45 var(--font-sans);
  }
  @media (max-width: 899px) { .demo--compare { --demo-h: 640px; } }
  .cp-top { flex: none; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid #222; }
  .cp-top__t { font-weight: 700; font-size: 13px; }
  .cp-top__p { color: #8c8c8c; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* icône « comparer » : deux carrés reliés */
  .cp-ico { position: relative; width: 16px; height: 16px; flex: none; }
  .cp-ico::before, .cp-ico::after { content: ""; position: absolute; width: 6px; height: 6px; border: 2px solid var(--cp-green); border-radius: 50%; }
  .cp-ico::before { left: 0; top: 0; } .cp-ico::after { right: 0; bottom: 0; }
  .cp-ico--big { width: 34px; height: 34px; border-radius: 9px; background: rgba(95, 168, 131, .16); }
  .cp-ico--big::before { left: 8px; top: 8px; } .cp-ico--big::after { right: 8px; bottom: 8px; }
  .cp-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
  .cp-select, .cp-load, .cp-result { position: absolute; inset: 0; }
  .demo--compare:not([data-scene="select"]) .cp-select,
  .demo--compare:not([data-scene="load"]) .cp-load,
  .demo--compare:not([data-scene="result"]) .cp-result { opacity: 0; visibility: hidden; }

  /* ---- sélection */
  .cp-select { display: flex; flex-direction: column; padding: 14px; gap: 12px; }
  .cp-head { display: flex; align-items: center; gap: 12px; }
  .cp-head b { display: block; font-size: 15px; }
  .cp-head span { font-size: 12px; color: #8c8c8c; }
  .cp-cards { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; position: relative; }
  @media (min-width: 900px) { .cp-cards { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); align-items: stretch; } }
  .cp-card { position: relative; display: flex; flex-direction: column; gap: 9px; min-height: 0; padding: 12px; border-radius: 12px; background: #161616; border: 1px solid #262626; overflow: hidden; }
  .cp-card__t { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; }
  .cp-card__t i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 700 11px/1 var(--font-mono); font-style: normal; color: #0f0f0f; }
  .cp-card--v1 .cp-card__t i { background: var(--cp-blue); }
  .cp-card--v2 .cp-card__t i { background: var(--cp-green); }
  .cp-vs { display: none; }
  @media (min-width: 900px) { .cp-vs { display: grid; place-items: center; align-self: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(95, 168, 131, .16); color: var(--cp-green); font-weight: 700; font-size: 13px; } }
  .cp-seg { display: flex; gap: 4px; padding: 3px; border-radius: 9px; background: #1f1f1f; width: max-content; }
  .cp-seg span { padding: 4px 10px; border-radius: 7px; font-size: 11.5px; color: #8c8c8c; }
  .cp-card--v1 .cp-seg .is-on { background: var(--cp-blue); color: #0f0f0f; font-weight: 600; }
  .demo--compare[data-tab2="proj"] .cp-seg__proj, .demo--compare[data-tab2="up"] .cp-seg__up { background: var(--cp-green); color: #0f0f0f; font-weight: 600; }
  .cp-list { display: flex; flex-direction: column; gap: 3px; min-height: 0; overflow: hidden; }
  .cp-search { padding: 6px 10px; border-radius: 8px; background: #1f1f1f; border: 1px solid #2c2c2c; color: #6f6f6f; font-size: 11.5px; margin-bottom: 3px; }
  .cp-doc { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; font-size: 12px; color: #cfcfcf; white-space: nowrap; }
  .cp-doc__n { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .cp-file { width: 10px; height: 13px; flex: none; border: 1.5px solid #8c8c8c; border-radius: 2px; }
  .cp-check { margin-left: auto; width: 10px; height: 6px; border: solid var(--cp-blue); border-width: 0 0 2px 2px; transform: rotate(-45deg) translateY(-2px); opacity: 0; }
  .demo--compare[data-v1="on"] .cp-doc--a { background: rgba(122, 167, 220, .13); border-color: var(--cp-blue); }
  .demo--compare[data-v1="on"] .cp-doc--a .cp-check { opacity: 1; }
  .cp-chosen { margin-top: auto; padding: 6px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 600; opacity: 0; }
  .cp-chosen--v1 { background: rgba(122, 167, 220, .14); color: #b9d2f0; }
  .cp-chosen--v2 { background: rgba(95, 168, 131, .14); color: #a9dcc0; }
  .demo--compare[data-v1="on"] .cp-chosen--v1, .demo--compare[data-v2="on"] .cp-chosen--v2 { opacity: 1; }
  .cp-v2 { position: relative; flex: 1; min-height: 0; }
  .cp-v2 > .cp-list, .cp-up { position: absolute; inset: 0; }
  .demo--compare[data-tab2="up"] .cp-v2 > .cp-list, .demo--compare[data-tab2="proj"] .cp-up { opacity: 0; visibility: hidden; }
  .cp-v2 > .cp-list { opacity: .55; }
  .cp-drop { height: 100%; min-height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px dashed #3a3a3a; border-radius: 10px; color: #8c8c8c; font-size: 11px; }
  .cp-drop b { color: #d9d9d9; font-size: 12.5px; }
  .cp-drop__i { width: 16px; height: 16px; border: solid #8c8c8c; border-width: 2px 2px 0 0; transform: rotate(-45deg); margin-bottom: 2px; }
  .demo--compare[data-drop="fly"] .cp-drop { border-color: var(--cp-green); background: rgba(95, 168, 131, .08); }
  .cp-upfile { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: #1b2a22; border: 1px solid #2f5442; opacity: 0; }
  .cp-upfile b { font-size: 12.5px; color: #e6f2eb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .cp-upfile span:last-child { margin-left: auto; font-size: 11px; color: #8c8c8c; }
  .cp-upfile__i { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--cp-green); }
  .demo--compare[data-drop="on"] .cp-upfile { opacity: 1; }
  .demo--compare[data-drop="on"] .cp-drop { opacity: 0; }
  /* le fichier reçu par e-mail, glissé dans la zone de dépôt */
  .cp-fly { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 8px; background: #262626; border: 1px solid #3a3a3a; font-size: 11.5px; color: #e6e6e6; white-space: nowrap; opacity: 0; transform: translate(-50%, -50%) translate(120px, -110px) rotate(4deg); }
  .demo--compare[data-drop="fly"] .cp-fly { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
  .cp-foot { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid #222; }
  .cp-hint { margin-right: auto; font-size: 12px; color: #8c8c8c; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cp-btn { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 600; flex: none; }
  .cp-btn--ghost { color: #a6a6a6; border: 1px solid #2c2c2c; }
  .cp-btn--go { background: #2a2a2a; color: #6f6f6f; }
  .demo--compare[data-v2="on"] .cp-btn--go { background: var(--cp-green); color: #0f0f0f; }
  .cp-btn__ico { width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 3px; }
  .cp-btn__busy { display: none; }
  .demo--compare[data-press="on"] .cp-btn__l { display: none; }
  .demo--compare[data-press="on"] .cp-btn__busy { display: inline; }
  .demo--compare[data-press="on"] .cp-btn__ico { border-radius: 50%; border-top-color: transparent; }
  /* pointeur dessiné, ancré sur l'élément visé */
  .cp-cursor { position: absolute; left: 60%; top: 55%; width: 14px; height: 20px; background: #fff; clip-path: polygon(0 0, 0 80%, 24% 63%, 40% 100%, 55% 94%, 40% 58%, 75% 58%); opacity: 0; transform: translate(40px, 30px); pointer-events: none; }
  .demo--compare[data-v1="on"][data-v2="off"][data-tab2="proj"] .cp-doc--a .cp-cursor,
  .demo--compare[data-drop="fly"] .cp-fly .cp-cursor,
  .demo--compare[data-v2="on"][data-scene="select"] .cp-btn--go .cp-cursor { opacity: 1; transform: none; }

  /* ---- analyse */
  .cp-load { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: #8c8c8c; }
  .cp-load b { color: #f2f2f2; font-size: 15px; }
  .cp-spin, .cp-badge__spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #2c2c2c; border-top-color: var(--cp-green); margin-bottom: 6px; }
  .cp-badge__spin { width: 11px; height: 11px; border-width: 2px; margin: 0 0 0 6px; }
  .demo--compare[data-export="on"] .cp-badge__spin { display: none; }

  /* ---- résultat */
  .cp-result { display: flex; flex-direction: column; }
  .cp-rbar { position: relative; z-index: 2; flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #222; background: #0f0f0f; }
  .cp-rbar b { font-size: 14px; }
  .cp-back { width: 9px; height: 9px; border: solid #a6a6a6; border-width: 0 0 2px 2px; transform: rotate(45deg); margin: 0 4px; }
  .cp-export { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px; background: #1f1f1f; border: 1px solid #2c2c2c; color: #6f6f6f; font-size: 12px; font-weight: 600; }
  .cp-export__i { width: 10px; height: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); }
  .demo--compare[data-export="on"] .cp-export { background: var(--cp-green); border-color: var(--cp-green); color: #0f0f0f; }
  .cp-rgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; gap: 12px; padding: 12px 14px; overflow: hidden; align-content: start; }
  @media (min-width: 900px) { .cp-rgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .cp-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
  .cp-report, .cp-sum, .cp-diff { border-radius: 12px; padding: 12px 14px; border: 1px solid #262626; background: #161616; }
  .cp-report__t { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
  .cp-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .cp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 7px; font-size: 11.5px; }
  .cp-chip em { font-style: normal; font: 600 9px/1.3 var(--font-mono); padding: 1px 5px; border-radius: 4px; }
  .cp-chip--a { background: rgba(122, 167, 220, .12); border: 1px solid rgba(122, 167, 220, .35); color: #cfe0f5; }
  .cp-chip--a em { background: rgba(122, 167, 220, .25); }
  .cp-chip--b { background: rgba(95, 168, 131, .12); border: 1px solid rgba(95, 168, 131, .35); color: #cfe9db; }
  .cp-chip--b em { background: rgba(95, 168, 131, .25); }
  .cp-arrow { color: #8c8c8c; }
  .cp-count { margin-top: 9px; padding-top: 9px; border-top: 1px solid #262626; font-size: 12px; color: #a6a6a6; }
  .cp-count b { color: var(--cp-amber); }
  .cp-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 6px; background: rgba(95, 168, 131, .18); color: #a9dcc0; font: 600 10.5px/1.3 var(--font-mono); margin-bottom: 8px; }
  .cp-badge--g { background: #262626; color: #cfcfcf; }
  .cp-sum { position: relative; flex: 1; }
  .cp-sum__wait { position: absolute; left: 14px; top: 44px; font-size: 12px; color: #8c8c8c; opacity: calc(1 - clamp(0, var(--sum), 1)); }
  .cp-l { font-size: 12.5px; color: #dcdcdc; opacity: clamp(0, calc(var(--sum) - var(--n) + 1), 1); transform: translateY(calc((1 - clamp(0, calc(var(--sum) - var(--n) + 1), 1)) * 5px)); }
  .cp-l + .cp-l { margin-top: 5px; }
  .cp-l--h { font-weight: 700; color: #f2f2f2; margin-top: 9px !important; }
  .cp-l--h:first-of-type { margin-top: 0 !important; }
  .cp-l--li { position: relative; padding-left: 14px; }
  .cp-l--li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 4px; height: 4px; border-radius: 50%; background: #8c8c8c; }
  .cp-l b { color: #fff; }
  .cp-legend { display: flex; gap: 14px; margin-bottom: 9px; font-size: 11px; color: #a6a6a6; }
  .cp-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
  .cp-legend__d::before { background: rgba(224, 122, 100, .55); }
  .cp-legend__a::before { background: rgba(95, 168, 131, .6); }
  .cp-text { padding: 12px; border-radius: 9px; background: #121212; color: #c9c9c9; font-size: 12.5px; line-height: 1.75; }
  .cp-text p + p { margin-top: 4px; }
  .cp-text b { color: #f2f2f2; }
  /* mode révision ; la modification citée par la ligne de synthèse en cours s'allume (anneau) */
  .cp-text del, .cp-text ins {
    --cur: calc(clamp(0, calc(var(--sum) - var(--m) + 1), 1) * (1 - clamp(0, calc(var(--sum) - var(--m)), 1)));
    padding: 1px 3px; border-radius: 4px; text-decoration-thickness: 1.5px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .cp-text del { background: rgba(224, 122, 100, .18); color: #f0b6a8; text-decoration-line: line-through; text-decoration-color: rgba(240, 160, 140, .8); box-shadow: 0 0 0 calc(var(--cur) * 2px) var(--cp-red); }
  .cp-text ins { background: rgba(95, 168, 131, .2); color: #a9dcc0; text-decoration-line: underline; text-decoration-color: rgba(140, 210, 175, .8); text-underline-offset: 3px; box-shadow: 0 0 0 calc(var(--cur) * 2px) var(--cp-green); }

  /* grand écran : le résultat occupe toute la hauteur, texte plus grand */
  @media (min-width: 900px) {
    .cp-rgrid { grid-auto-rows: minmax(0, 1fr); padding: 16px 18px; gap: 16px; }
    .cp-report, .cp-sum, .cp-diff { padding: 16px 18px; }
    .cp-report__t { font-size: 14px; }
    .cp-chip { font-size: 12.5px; padding: 5px 9px; }
    .cp-count { font-size: 13px; }
    .cp-l { font-size: 14px; } .cp-l + .cp-l { margin-top: 8px; }
    .cp-l--h { margin-top: 14px !important; }
    .cp-text { font-size: 14px; line-height: 2; padding: 16px; }
    .cp-legend { font-size: 12px; margin-bottom: 12px; }
  }
  /* téléphone : cartes empilées plus compactes ; le résultat défile vers le détail pendant les dernières lignes */
  @media (max-width: 899px) {
    .cp-cards { grid-template-rows: auto minmax(0, 1fr); }
    .cp-card--v1 .cp-list > .cp-doc:nth-of-type(n+5) { display: none; }
    .cp-drop { min-height: 70px; }
    .cp-sum { flex: none; }
    .cp-rgrid { overflow: visible; transform: translateY(calc(clamp(0, calc(var(--sum) - 4), 3) * -96px)); }
    .motion .demo--compare .cp-rgrid { transition: transform .7s var(--ease); }
  }

  /* ---- mouvement */
  .motion .demo--compare :is(.cp-select, .cp-load, .cp-result) { transition: opacity .4s var(--ease), visibility 0s linear .4s; }
  .motion .demo--compare:is([data-scene="select"]) .cp-select,
  .motion .demo--compare:is([data-scene="load"]) .cp-load,
  .motion .demo--compare:is([data-scene="result"]) .cp-result { transition: opacity .4s var(--ease) .15s, visibility 0s; }
  .motion .demo--compare :is(.cp-doc, .cp-check, .cp-chosen, .cp-seg span, .cp-btn--go, .cp-export, .cp-drop) { transition: background-color .25s, border-color .25s, color .25s, opacity .3s; }
  .motion .demo--compare :is(.cp-v2 > .cp-list, .cp-up) { transition: opacity .3s, visibility 0s linear .3s; }
  .motion .demo--compare .cp-upfile { transition: opacity .35s ease .1s; }
  .motion .demo--compare .cp-fly { transition: opacity .25s, transform .75s cubic-bezier(.3, .7, .2, 1); }
  .motion .demo--compare[data-drop="on"] .cp-fly { transition: opacity .2s; }
  .motion .demo--compare .cp-cursor { transition: opacity .25s, transform .5s var(--ease); }
  .motion .demo--compare :is(.cp-spin, .cp-badge__spin) { animation: cp-spin .8s linear infinite; }
  .motion .demo--compare[data-press="on"] .cp-btn__ico { animation: cp-spin .8s linear infinite; }
  @keyframes cp-spin { to { rotate: 360deg; } }
  .motion .demo--compare .cp-l { transition: opacity .4s var(--ease), transform .45s var(--ease); }
  .motion .demo--compare .cp-sum__wait { transition: opacity .3s; }
  .motion .demo--compare :is(.cp-text del, .cp-text ins) { transition: box-shadow .3s ease; }
  .motion .demo--compare .cp-text :is(del, ins) { animation: none; }

  /* =============================================================== Échanges */
  /* Les deux côtés d'un envoi, fidèles à l'app : à gauche l'expéditeur (Documents → « Créer un lien d'envoi » → lien prêt),
     à droite le destinataire (SMS reçu → page du lien : le dossier est là).
     Pilotage : data-s (pick | dialog | ready), data-r (sms | page), data-press (élément cliqué),
     --pk (pièces cochées). Sur téléphone, data-side fait glisser d'un côté à l'autre. */
  .demo--share {
    --bg: #0f0f0f; --fg: #f2f2f2; --fg-muted: #8c8c8c; --line: #2a2a2a;
    --sh-acc: #5fa883; --sh-blue: #8fb6e6;
    --demo-h: 600px; border-radius: 16px; border-color: #0f0f0f; font: 400 12px/1.45 var(--font-sans);
  }
  .sh-track { display: flex; height: 100%; }
  .sh-pane { position: relative; display: flex; flex-direction: column; flex: none; width: 100%; min-width: 0; padding: 12px; gap: 8px; }
  @media (min-width: 900px) {
    .sh-pane--me { width: 56%; }
    .sh-pane--you { width: 44%; border-left: 1px dashed #2c2c2c; }
  }
  .sh-who { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #8c8c8c; white-space: nowrap; overflow: hidden; }
  .sh-who span { padding: 2px 8px; border-radius: 6px; background: #1f1f1f; color: #f2f2f2; font: 600 10.5px/1.4 var(--font-mono); }
  .sh-win { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 12px; background: #161616; border: 1px solid #262626; overflow: hidden; }
  .sh-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #262626; }
  .sh-bar b { font-size: 12.5px; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .sh-tab { font-size: 11.5px; color: #7a7a7a; padding: 3px 8px; border-radius: 6px; flex: none; }
  .sh-tab--docs { background: #262626; color: #f2f2f2; }
  .sh-me, .sh-you { position: relative; flex: 1; min-height: 0; }
  .sh-pick, .sh-dialog, .sh-ready, .sh-sms, .sh-pub { position: absolute; inset: 0; }
  .demo--share:not([data-s="pick"]):not([data-s="dialog"]) .sh-pick,
  .demo--share:not([data-s="dialog"]) .sh-dialog,
  .demo--share:not([data-s="ready"]) .sh-ready,
  .demo--share:not([data-r="sms"]) .sh-sms,
  .demo--share:not([data-r="page"]) .sh-pub { opacity: 0; visibility: hidden; }

  /* communs */
  .sh-doc { width: 10px; height: 13px; flex: none; border: 1.5px solid #8c8c8c; border-radius: 2px; }
  .sh-fold { width: 14px; height: 11px; flex: none; border-radius: 2px; background: var(--sh-acc); opacity: .75; }
  .sh-cb { width: 14px; height: 14px; flex: none; border-radius: 4px; border: 1.5px solid #4a4a4a; position: relative; }
  .sh-cb::after { content: ""; position: absolute; inset: 0; background: #0f0f0f; clip-path: polygon(22% 50%, 34% 38%, 44% 49%, 68% 25%, 80% 37%, 44% 73%); opacity: 0; }
  .sh-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 9px; font-size: 12px; font-weight: 600; white-space: nowrap; }
  .sh-btn--go { background: var(--sh-acc); color: #0f0f0f; }
  .sh-btn--ghost { border: 1px solid #2c2c2c; color: #a6a6a6; }
  .sh-btn__busy { display: none; }
  .sh-lab { font-size: 11px; color: #a6a6a6; margin: 8px 0 4px; }
  .sh-in { position: relative; padding: 7px 10px; border-radius: 8px; background: #1f1f1f; border: 1px solid #2c2c2c; font-size: 12px; color: #ececec; min-height: 31px; }
  .sh-in--sel { display: flex; justify-content: space-between; align-items: center; }
  .sh-caret { width: 6px; height: 6px; border: solid #8c8c8c; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
  .sh-okmark { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--sh-acc); position: relative; }
  .sh-okmark::after { content: ""; position: absolute; inset: 0; background: #0f0f0f; clip-path: polygon(24% 50%, 34% 40%, 44% 50%, 66% 28%, 76% 38%, 44% 70%); }
  .sh-linkico { width: 14px; height: 8px; flex: none; border: 2px solid var(--sh-acc); border-radius: 5px; }
  /* pointeur : visible sur l'élément qu'on clique (data-press) */
  .sh-cursor { position: absolute; left: 62%; top: 55%; width: 14px; height: 20px; background: #fff; clip-path: polygon(0 0, 0 80%, 24% 63%, 40% 100%, 55% 94%, 40% 58%, 75% 58%); opacity: 0; transform: translate(36px, 26px); pointer-events: none; z-index: 3; }
  .demo--share[data-press="tick"] .sh-row--t[style*="--i:4"] .sh-cursor,
  .demo--share[data-press="gen"] .sh-btn--gen .sh-cursor,
  .demo--share[data-press="ack"] .sh-opt--ack .sh-cursor,
  .demo--share[data-press="create"] .sh-btn--create .sh-cursor,
  .demo--share[data-press="copy"] .sh-btn--copy .sh-cursor,
  .demo--share[data-press="sms"] .sh-sms__b .sh-cursor,
  .demo--share[data-press="open"] .sh-btn--open .sh-cursor { opacity: 1; transform: none; }

  /* ---- expéditeur : choix des pièces + panneau d'envoi */
  .sh-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px; }
  @media (min-width: 600px) { .sh-pick { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
  .sh-tree { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .sh-row { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 7px; font-size: 12px; color: #d0d0d0; white-space: nowrap; }
  .sh-row__n { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .sh-row--fold { color: #f2f2f2; font-weight: 600; }
  .sh-row:not(.sh-row--fold) { padding-left: 22px; }
  .sh-chev { width: 6px; height: 6px; border: solid #8c8c8c; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
  .sh-row--t { --on: clamp(0, calc(var(--pk) - var(--i) + 1), 1); }
  .sh-row--t .sh-cb { background: color-mix(in srgb, var(--sh-acc) calc(var(--on) * 100%), transparent); border-color: color-mix(in srgb, var(--sh-acc) calc(var(--on) * 100%), #4a4a4a); }
  .sh-row--t .sh-cb::after { opacity: var(--on); }
  .sh-row--t { background: color-mix(in srgb, rgba(95, 168, 131, .1) calc(var(--on) * 100%), transparent); }
  .sh-panel { display: none; }
  @media (min-width: 600px) {
    .sh-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border-radius: 11px; border: 1px solid rgba(95, 168, 131, .35); background: #141a17; }
  }
  .sh-panel__t { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; }
  .sh-send { width: 14px; height: 14px; flex: none; background: var(--sh-acc); clip-path: polygon(0 45%, 100% 0, 60% 100%, 45% 58%); }
  .sh-panel__s { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: #a6a6a6; }
  .sh-pill { padding: 2px 8px; border-radius: 999px; background: rgba(95, 168, 131, .2); color: #a9dcc0; font-weight: 600; }
  .sh-mini { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
  .sh-mini__r { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #d0d0d0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: clamp(0, calc(var(--pk) - var(--i) + 1), 1); transform: translateX(calc((1 - clamp(0, calc(var(--pk) - var(--i) + 1), 1)) * -10px)); }
  .sh-total { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid #262626; font-size: 11.5px; color: #a6a6a6; }
  .sh-total span:last-child { color: #f2f2f2; font-weight: 600; }
  .sh-btn--gen { width: 100%; }
  .sh-panel__more { text-align: center; font-size: 11px; color: var(--sh-blue); }

  /* fenêtre de création */
  .sh-dialog { display: grid; place-items: center; padding: 12px; background: rgba(0, 0, 0, .55); }
  .sh-dlg { width: min(100%, 400px); padding: 14px 16px; border-radius: 12px; background: #1c1c1c; border: 1px solid #333; }
  .sh-dlg__t { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
  .sh-opt { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: #d9d9d9; }
  .demo--share[data-ack="on"] .sh-opt--ack .sh-cb { background: var(--sh-acc); border-color: var(--sh-acc); }
  .demo--share[data-ack="on"] .sh-opt--ack .sh-cb::after { opacity: 1; }
  .sh-hint { margin: 3px 0 0 22px; font-size: 10.5px; color: #7a7a7a; }
  .sh-seen { margin-top: 10px; font-size: 11.5px; color: #a6a6a6; }
  .sh-seen b { color: #f2f2f2; }
  .sh-note { margin-top: 6px; padding: 7px 9px; border-radius: 8px; background: #161616; font-size: 10.5px; color: #8c8c8c; }
  .sh-dlg__btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
  .demo--share[data-busy="on"] .sh-btn--create .sh-btn__l { display: none; }
  .demo--share[data-busy="on"] .sh-btn--create .sh-btn__busy { display: inline; }

  /* lien prêt */
  .sh-ready { display: flex; flex-direction: column; justify-content: center; padding: 18px; }
  .sh-ready__ok { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
  .sh-ready__txt { margin-top: 8px; font-size: 12px; color: #a6a6a6; max-width: 44ch; }
  .sh-link { padding: 9px 11px; border-radius: 8px; background: #1f1f1f; border: 1px solid #2c2c2c; font: 500 12px/1.3 var(--font-mono); color: var(--sh-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sh-ready__btns { display: flex; gap: 8px; margin-top: 12px; }
  .demo--share[data-copied="on"] .sh-btn--copy .sh-btn__l { display: none; }
  .demo--share[data-copied="on"] .sh-btn--copy .sh-btn__busy { display: inline; }


  /* ---- destinataire */
  .sh-win--pub { background: #12121a; border-color: #2a2a3a; }
  .sh-url { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #2a2a3a; font: 500 11px/1.2 var(--font-mono); color: #8c8c8c; white-space: nowrap; overflow: hidden; }
  .sh-url__t { overflow: hidden; text-overflow: ellipsis; opacity: 0; }
  .demo--share:not([data-r="sms"]) .sh-url__t { opacity: 1; }
  .sh-lock { width: 9px; height: 8px; flex: none; border: 1.5px solid #8c8c8c; border-radius: 2px; }
  /* le SMS qui apporte le lien */
  .sh-sms { display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; gap: 4px; }
  .sh-sms__from { font-size: 11px; color: #8c8c8c; opacity: 0; }
  .demo--share[data-msg="on"] .sh-sms__from { opacity: 1; }
  .sh-sms__b { position: relative; max-width: 88%; padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: #262633; color: #ececec; font-size: 12.5px; opacity: 0; transform: translateY(10px); }
  .sh-sms__b u { color: var(--sh-blue); text-underline-offset: 2px; word-break: break-all; }
  .demo--share[data-msg="on"] .sh-sms__b { opacity: 1; transform: none; }
  .demo--share[data-press="sms"] .sh-sms__b u { background: rgba(143, 182, 230, .2); }
  /* page du lien */
  .sh-pub { padding: 14px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
  .sh-pub__from { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #a6a6a6; }
  .sh-pub__from b { color: #c9d9f2; }
  .sh-pub__h { margin-top: 6px; font-size: 17px; font-weight: 700; color: #fff; }
  .sh-pub__s { font-size: 11.5px; color: #8c8c8c; }
  .sh-pub__grid { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; min-height: 0; }
  .sh-pub__docs { display: flex; flex-direction: column; gap: 4px; }
  .sh-pub__docs p { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #d0d0d0; }
  .sh-pub__docs em { margin-left: auto; font-style: normal; font-size: 10.5px; color: #7a7a7a; }
  .sh-pub__docs .sh-pub__exp { font-size: 10.5px; color: #7a7a7a; margin-top: 2px; }
  .sh-pub__form { padding: 12px; border-radius: 11px; background: #1a1a24; border: 1px solid #2a2a3a; }
  .sh-pub__ft { font-weight: 700; font-size: 13.5px; }
  .sh-btn--open { width: 100%; margin-top: 12px; }
  .sh-pub__free { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #a9dcc0; margin-top: 2px; }
  .sh-shield { width: 10px; height: 12px; flex: none; background: var(--sh-acc); clip-path: polygon(50% 0, 100% 18%, 100% 55%, 50% 100%, 0 55%, 0 18%); }
  .sh-in__ph { color: #6f6f6f; }

  /* le lien qui part de l'expéditeur vers le destinataire */
  .sh-fly { position: absolute; left: 28%; top: 54%; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: #1f1f1f; border: 1px solid var(--sh-acc); font: 500 11px/1.2 var(--font-mono); color: var(--sh-blue); white-space: nowrap; opacity: 0; pointer-events: none; }
  .demo--share[data-fly="on"] .sh-fly { opacity: 1; transform: translateX(min(42vw, 520px)); }

  /* téléphone : un seul côté à la fois, on glisse de l'un à l'autre */
  @media (max-width: 899px) {
    .sh-track { width: 100%; }
    .demo--share[data-side="you"] .sh-track { transform: translateX(-100%); }
    .sh-fly { display: none; }
  }

  /* ---- mouvement */
  .motion .demo--share :is(.sh-pick, .sh-dialog, .sh-ready, .sh-sms, .sh-pub) { transition: opacity .35s var(--ease), visibility 0s linear .35s; }
  .motion .demo--share[data-s="pick"] .sh-pick, .motion .demo--share[data-s="dialog"] :is(.sh-pick, .sh-dialog),
  .motion .demo--share[data-s="ready"] .sh-ready,
  .motion .demo--share[data-r="sms"] .sh-sms, .motion .demo--share[data-r="page"] .sh-pub { transition: opacity .35s var(--ease) .1s, visibility 0s; }
  .motion .demo--share .sh-dlg { transition: transform .35s var(--ease); }
  .motion .demo--share:not([data-s="dialog"]) .sh-dlg { transform: translateY(10px) scale(.98); }
  .motion .demo--share :is(.sh-row--t, .sh-row--t .sh-cb, .sh-row--t .sh-cb::after, .sh-mini__r, .sh-opt--ack .sh-cb, .sh-opt--ack .sh-cb::after, .sh-url__t) { transition: background-color .25s, border-color .25s, opacity .3s, transform .35s var(--ease); }
  .motion .demo--share .sh-cursor { transition: opacity .2s, transform .45s var(--ease); }
  .motion .demo--share :is(.sh-sms__b, .sh-sms__from) { transition: opacity .35s var(--ease), transform .45s var(--ease); }
  .motion .demo--share .sh-fly { transition: opacity .2s, transform .75s cubic-bezier(.45, 0, .25, 1); }
  .motion .demo--share .sh-track { transition: transform .6s cubic-bezier(.45, 0, .25, 1); }

}

/* ------------------------------------------------------------------ utilitaires */
@layer utilities {
  .sr-only {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .nowrap { white-space: nowrap; }

  /* filet de sécurité : aucune animation ni transition en mouvement réduit */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
  }
  @media print {
    .site-nav, .skip-link, .demo-toggle { display: none !important; }
    .type__ch { opacity: 1 !important; }
  }
  @media (forced-colors: active) {
    .demo { forced-color-adjust: none; }
    .motion .type__ch.is-caret::after, .site-nav__brand::after, .bridge__app-name::after, .final__brand::after { background: CanvasText; }
  }
}

/* Version « début » de l'accueil (2026-10-13) : sommaire des fonctions sans renvoi ni démo, une phrase sous chaque titre.
   Hors couche exprès : prime sur `components` sans toucher aux règles de la page complète (landing-hors-ligne/). */
.toc__link--static::after { content: none; }
.toc__desc { display: block; margin-top: .4em; font-size: var(--fs-body); font-weight: 400; line-height: 1.4; letter-spacing: 0; color: var(--fg-muted); }
.toc li.is-lit .toc__desc, .toc__link--static:hover .toc__desc { color: inherit; }
.limits--toc { margin-top: var(--sp-5); }