/* ==========================================================================
   Deynao — deynao.fr · feuille de style unique
   Direction : publication technique. Fond papier, serif de titre, grille
   asymétrique, tableaux plutôt que cartes, aucune lueur, aucune animation.
   Couleur : l'orange de la marque n'est jamais un texte de petite taille. Il
   vit dans le logo, les boutons (texte encre), les soulignements, les filets.
   Police de titre Source Serif 4 (licence SIL OFL), servie par le site : aucune
   requête vers un service externe. Le sans et le mono restent ceux du système.
   ========================================================================== */

:root {
  --paper: #faf8f4;
  --paper-2: #f3f0ea;
  --white: #ffffff;
  --ink: #17191d;
  --ink-2: #3d424b;
  --ink-3: #6b717c;
  --rule: #e4dfd6;
  --rule-2: #cfc8bb;
  --brand: #f97316;         /* orange de la marque : logo, boutons (texte encre), soulignements, filets.
                               Jamais un texte de petite taille : 2,80 sur blanc, il ne tient pas l'AA. */
  --brand-deep: #ea580c;    /* l'orange-600 du produit, seule autre nuance du site : mot du grand titre
                               (grand texte, 3,36 sur papier), anneaux de focus (3,52 sur blanc), survol des
                               boutons avec texte encre (4,94). Le site n'a que les deux oranges du produit. */
  --ok: #1f7a3f;
  --screen: #0f172a;        /* fond des écrans et vidéos, hérité du produit */
  --serif: "Source Serif 4", "Charter", "Iowan Old Style", "Georgia", "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;
  --max: 1160px;
  --radius: 10px;
  --shadow-screen: 0 1px 2px rgba(23, 25, 29, 0.06), 0 18px 40px -22px rgba(23, 25, 29, 0.32);
}

/* --- Police de titre ------------------------------------------------------
   Source Serif 4, servie par le site. La GRAISSE est figée dans chaque fichier ;
   c'est l'axe de TAILLE OPTIQUE qui reste variable, si bien que le navigateur
   choisit seul un dessin de titrage à 62 px et un dessin de labeur à 20 px
   (font-optical-sizing: auto, actif par défaut). Une seule famille en CSS.
   font-display: swap — le texte s'affiche tout de suite dans la police système,
   puis bascule : jamais de page muette en attendant la police.
   Fabriqué par tools/make-webfonts.py, licence dans assets/fonts/OFL.txt.       */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-500.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-600.woff") format("woff");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-500-italic.woff") format("woff");
  font-weight: 500; font-style: italic; font-display: swap;
}

/* --- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink-2); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
section[id], footer[id], [id="contenu"] { scroll-margin-top: 76px; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-color: var(--ink); }
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 500; color: var(--ink); letter-spacing: -0.005em; text-wrap: balance; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.12; margin: 0 0 18px; }
h3 { font-size: 1.35rem; line-height: 1.25; margin: 0 0 10px; }
p { margin: 0 0 1em; }
img, video, svg { max-width: 100%; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
.mono { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--ink-3); }
.kicker { margin: 0 0 18px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; text-decoration: none; }
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 3px; }

/* --- Boutons ------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 20px; border-radius: 6px; font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.btn-primary { background: var(--brand); color: var(--ink); border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-deep); color: var(--ink); border-color: var(--brand-deep); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn-sm { padding: 8px 14px; font-size: 0.92rem; }

/* --- En-tête ------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(250, 248, 244, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.site-header.is-scrolled { border-bottom-color: var(--rule); }
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font-family: var(--serif); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; }
.logo svg { display: block; flex: none; }
.logo .o { color: var(--brand); }
.site-nav { display: flex; gap: 24px; margin-left: 12px; }
.site-nav a { color: var(--ink-2); text-decoration: none; font-size: 0.95rem; white-space: nowrap; }
.site-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.site-nav .nav-cta { display: none; }
.lang-switch { margin-left: auto; font-size: 0.85rem; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.lang-switch a { color: var(--ink-3); text-decoration: none; padding: 2px 4px; }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current] { color: var(--ink); }
.lang-switch span { color: var(--rule-2); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; }
.site-header .header-cta { flex: none; }

/* --- Ouverture ----------------------------------------------------------- */
.hero { padding: clamp(40px, 5.5vw, 76px) 0 clamp(40px, 5vw, 64px); }
.hero h1 { font-size: clamp(2.2rem, 4.9vw, 3.9rem); line-height: 1.05; margin: 0 0 28px; max-width: 22ch; }
.hero h1 em { font-style: italic; color: var(--brand-deep); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 64px); align-items: start; margin-bottom: clamp(32px, 4vw, 52px); }
.hero-lead { font-size: 1.18rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 24px; max-width: 36em; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-status { margin: 14px 0 0; font-size: 0.9rem; color: var(--ink-3); }
.hero-aside { border-left: 1px solid var(--rule); padding-left: clamp(18px, 2.4vw, 30px); }
.hero-aside h2 { font-family: var(--mono); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-3); margin: 4px 0 12px; }
.hero-facts { list-style: none; padding: 0; margin: 0; font-size: 0.96rem; color: var(--ink-2); }
.hero-facts li { padding: 7px 0; border-top: 1px solid var(--rule); }
.hero-facts li:first-child { border-top: 0; padding-top: 0; }
.hero-facts b { color: var(--ink); font-weight: 600; }
.hero-media { margin: 0; }
.frame { border: 1px solid var(--rule-2); border-radius: var(--radius); overflow: hidden; background: var(--screen); box-shadow: var(--shadow-screen); }
.frame video, .frame img { display: block; width: 100%; height: auto; }
.hero-media figcaption { margin-top: 12px; font-size: 0.9rem; color: var(--ink-3); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* --- Sections ------------------------------------------------------------ */
.section { padding: clamp(64px, 8vw, 112px) 0; border-top: 1px solid var(--rule); }
.section-head { display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: baseline; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head .num { font-family: var(--mono); font-size: 0.85rem; color: var(--ink-3); letter-spacing: 0.04em; }
.section-head .lead { font-size: 1.12rem; color: var(--ink-2); max-width: 60ch; margin: 0; }

/* 01 · écrans */
.show { display: grid; grid-template-columns: 1fr; gap: clamp(48px, 6vw, 80px); }
.show-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.show-row:nth-child(even) .show-media { order: 2; }
.show-copy .idx { font-family: var(--mono); color: var(--ink-3); font-size: 0.85rem; margin-bottom: 10px; display: block; }
.show-copy h3 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.show-copy p { color: var(--ink-2); max-width: 42ch; }
.show-copy .from { font-size: 0.86rem; color: var(--ink-3); margin: 0; }
.shot { display: block; width: 100%; padding: 0; margin: 0; border: 1px solid var(--rule-2); border-radius: var(--radius); overflow: hidden; background: var(--screen); cursor: zoom-in; box-shadow: var(--shadow-screen); }
.shot img { display: block; width: 100%; height: auto; }

/* 02 · fonctionnement */
.how { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.archi { border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--white); padding: 22px; }
.archi svg { width: 100%; height: auto; display: block; }
.archi-caption { font-size: 0.9rem; color: var(--ink-3); margin: 14px 0 0; }
.facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.facts li { padding: 18px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 34px 1fr; gap: 12px; }
.facts .k { font-family: var(--mono); color: var(--ink-3); font-size: 0.8rem; padding-top: 5px; }
.how > div, .facts li > div, .steps li > *, .show-copy, .docs a > * { min-width: 0; }
.facts h3 { font-size: 1.12rem; margin: 0 0 4px; font-family: var(--sans); font-weight: 600; }
.facts p { margin: 0; font-size: 0.97rem; color: var(--ink-2); }

/* 03 · domaines */
.table-wrap { overflow-x: auto; }
.domains { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--rule-2); border-radius: var(--radius); overflow: hidden; }
.domains th, .domains td { text-align: left; padding: 16px 18px; vertical-align: top; border-top: 1px solid var(--rule); }
.domains thead th { font-family: var(--mono); font-weight: 500; font-size: 0.78rem; color: var(--ink-2); border-top: 0; background: var(--paper-2); letter-spacing: 0.03em; }
.domains th.fam { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; color: var(--ink); width: 26%; }
.domains td.list { width: 34%; }
/* Des noms, pas des liens : aucun soulignement qui promettrait un clic. */
.domains td.list span { display: inline-block; white-space: nowrap; color: var(--ink); font-size: 0.95rem; }   /* inline-block : la ligne peut se couper ENTRE deux noms, jamais dedans */
.domains td.list span:not(:last-child)::after { content: "\00B7"; margin: 0 0.55em; color: var(--ink-3); }
.domains td.desc { color: var(--ink-2); font-size: 0.97rem; }

/* 04 · films */
.films { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.film { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.film .thumb { display: block; position: relative; border: 1px solid var(--rule-2); border-radius: var(--radius); overflow: hidden; background: var(--screen); aspect-ratio: 16 / 9; box-shadow: var(--shadow-screen); }
.film .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film .play { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; background: rgba(250, 248, 244, 0.94); color: var(--ink); padding: 8px 12px 8px 10px; border-radius: 6px; font-size: 0.86rem; font-weight: 600; white-space: nowrap; }
.film .play::before { content: ""; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--brand); }
.film h3 { font-size: 1.2rem; margin: 14px 0 4px; }
.film p { margin: 0; color: var(--ink-3); font-size: 0.92rem; }

/* 05 · éditions */
.editions { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--rule-2); border-radius: var(--radius); overflow: hidden; }
.editions th, .editions td { padding: 14px 18px; text-align: left; border-top: 1px solid var(--rule); vertical-align: top; font-size: 0.97rem; }
.editions thead th { border-top: 0; background: var(--paper-2); font-family: var(--serif); font-weight: 500; font-size: 1.15rem; color: var(--ink); }
.editions thead th:first-child { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); font-weight: 500; }
.editions td:first-child { color: var(--ink-3); font-size: 0.9rem; width: 22%; }
.editions td { color: var(--ink-2); }
.playlink { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.playlink:hover { text-decoration-color: var(--ink); }
.editions-note { font-size: 0.9rem; color: var(--ink-3); margin: 14px 0 0; }

/* 06 · vérifier */
.verify { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.docs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.docs li { border-bottom: 1px solid var(--rule); }
.docs a { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; padding: 14px 0; text-decoration: none; color: var(--ink); }
.docs a:hover .t { text-decoration: underline; text-underline-offset: 4px; }
.docs .t { font-weight: 600; }
.docs .k { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); white-space: nowrap; }
.docs .d { grid-column: 1 / -1; font-size: 0.9rem; color: var(--ink-3); margin: 0; }
.scope { margin-top: 32px; padding: 20px 22px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--white); }
.scope h3 { font-family: var(--sans); font-weight: 600; font-size: 1.02rem; margin: 0 0 10px; }
/* Deux listes NOMMEES, pas une seule coupee en colonnes : ce qui est pris en charge
   et ce qui ne l'est pas ne doivent pas dependre de l'equilibrage des colonnes. */
.scope-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-top: 14px; }
.scope h4 { font-family: var(--mono); font-weight: 500; font-size: 0.76rem; letter-spacing: 0.03em; color: var(--ink-2); margin: 0 0 7px; }
.scope ul { margin: 0; padding: 0; list-style: none; font-size: 0.93rem; }
.scope li { padding: 3px 0 3px 18px; position: relative; color: var(--ink-2); }
.scope ul.ok li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.scope ul.no li::before { content: "–"; position: absolute; left: 2px; color: var(--ink-3); }
.scope .later { margin: 12px 0 0; font-size: 0.85rem; color: var(--ink-3); }
.faq { border-top: 1px solid var(--rule); }
.faq-group { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); letter-spacing: 0.03em; padding: 22px 0 6px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 14px 36px 14px 0; position: relative; font-weight: 600; color: var(--ink); font-size: 1.02rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font-family: var(--mono); color: var(--ink-3); font-size: 1.1rem; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 14px; color: var(--ink-2); font-size: 0.98rem; max-width: 66ch; }
.faq details a { font-size: 0.92rem; }

/* 07 · évaluer */
.eval { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 0.98rem; color: var(--ink-2); }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono); color: var(--ink-3); font-size: 0.82rem; padding-top: 4px; }
.eval-note { font-size: 0.9rem; color: var(--ink-3); margin: 16px 0 0; }
.demo-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 26px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--white); }
.demo-form .field-full { grid-column: 1 / -1; }
.demo-form label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.demo-form input, .demo-form select, .demo-form textarea { width: 100%; padding: 11px 12px; border-radius: 6px; border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink); font: inherit; font-size: 0.97rem; }
.demo-form input::placeholder, .demo-form textarea::placeholder { color: var(--ink-3); }
.demo-form input:focus, .demo-form select:focus, .demo-form textarea:focus { outline: none; border-color: var(--brand-deep); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18); }
.demo-form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b717c' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.demo-form .form-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.form-note { font-size: 0.84rem; color: var(--ink-3); margin: 0; }
.form-hint { font-size: 0.88rem; color: var(--ink-2); margin: 0; padding: 10px 14px; border-left: 3px solid var(--brand); background: var(--paper-2); border-radius: 4px; }
.form-status { font-size: 0.9rem; margin: 0; padding: 10px 14px; border-radius: 4px; }
.form-status.is-error { color: #7f1d1d; background: #fee2e2; }
.form-success { grid-column: 1 / -1; padding: 8px 0; }
.form-success h3 { margin: 0 0 8px; }
.form-success p { margin: 0; }
.req { color: var(--ink-2); }

/* 08 · qui est derrière */
.who { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 36px; align-items: start; max-width: 860px; }
.who .portrait { width: 140px; height: 140px; border-radius: 50%; border: 1px solid var(--rule-2); background: var(--paper-2); overflow: hidden; }
.who .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.who p { font-size: 1.08rem; line-height: 1.65; color: var(--ink-2); }
.who .links { font-size: 0.92rem; }

/* --- Pied de page -------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--rule); padding: 40px 0 28px; font-size: 0.9rem; color: var(--ink-3); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 28px; }
.footer-grid h2 { font-family: var(--mono); font-weight: 500; font-size: 0.76rem; letter-spacing: 0.04em; color: var(--ink-3); margin: 0 0 10px; text-transform: uppercase; }
.footer-grid a { display: block; color: var(--ink-2); text-decoration: none; padding: 3px 0; }
.footer-grid a:hover { color: var(--ink); text-decoration: underline; }
.footer-brand .logo { display: inline-flex; }   /* sinon .footer-grid a { display: block } l'emporte et empile la marque au-dessus du mot */
.footer-brand p { margin: 12px 0 0; max-width: 34ch; }
.footer-bottom { border-top: 1px solid var(--rule); padding-top: 18px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-bottom p { margin: 0; }
.footer-bottom a { color: var(--ink-3); text-decoration: none; }
.footer-bottom a:hover { color: var(--ink); text-decoration: underline; }
.colophon { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3); }
.site-footer.compact .wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.site-footer.compact .footer-links { margin-left: auto; display: flex; gap: 20px; }
.site-footer.compact .footer-links a { color: var(--ink-2); text-decoration: none; }
.site-footer.compact .footer-links a:hover { text-decoration: underline; }
.site-footer.compact .footer-tagline { margin: 0; }

/* --- Fenêtres (vidéo, capture agrandie) ---------------------------------- */
.lightbox { position: fixed; inset: 0; z-index: 100; display: none; background: rgba(23, 25, 29, 0.88); align-items: center; justify-content: center; padding: 24px; }
.lightbox.open { display: flex; }
.lightbox video { width: min(1100px, 100%); border-radius: 8px; background: #000; }
#img-lightbox img { width: auto; max-width: min(1240px, 94vw); max-height: 88vh; border-radius: 8px; }
.lightbox-close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 1.4rem; cursor: pointer; }

/* --- Pages documentaires ------------------------------------------------- */
body.doc { background: var(--paper); }
.doc-wrap { max-width: 800px; margin: 0 auto; padding: 48px 28px 96px; }
.doc-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 28px; color: var(--ink-3); text-decoration: none; font-size: 0.9rem; font-family: var(--mono); }
.doc-back:hover { color: var(--ink); }
.doc-wrap h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.12; margin: 0 0 10px; }
.doc-meta { color: var(--ink-3); font-size: 0.95rem; margin: 0 0 36px; }
.doc-wrap h2 { font-size: 1.45rem; margin: 44px 0 12px; padding-top: 22px; border-top: 1px solid var(--rule); }
.doc-wrap h3 { font-size: 1.1rem; font-family: var(--sans); font-weight: 600; margin: 22px 0 8px; }
.doc-wrap p, .doc-wrap li { font-size: 1rem; line-height: 1.7; color: var(--ink-2); }
.doc-wrap ul { padding-left: 20px; }
.doc-wrap li { margin: 6px 0; }
.doc-wrap strong { color: var(--ink); }
.doc-fill { background: var(--white); border: 1px dashed var(--brand-deep); border-radius: 4px; padding: 1px 7px; color: var(--ink); font-weight: 600; }
.doc-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 0.95rem; background: var(--white); }
.doc-table th, .doc-table td { text-align: left; padding: 10px 12px; border: 1px solid var(--rule); vertical-align: top; }
.doc-table th { background: var(--paper-2); color: var(--ink); font-weight: 600; }
.doc-callout { background: var(--white); border: 1px solid var(--rule-2); border-left: 3px solid var(--brand); border-radius: 6px; padding: 16px 18px; margin: 16px 0; }
.doc-callout p { margin: 0; }
.pd-code { font-family: var(--mono); font-size: 0.82rem; line-height: 1.7; color: var(--ink-2); background: var(--white); border: 1px solid var(--rule-2); border-radius: 6px; padding: 12px 14px; overflow-x: auto; }
.doc-versionblock { margin-top: 46px; border-top: 1px solid var(--rule); padding-top: 20px; }
.doc-vmeta { font-size: 0.9rem; color: var(--ink-2); margin: 0 0 8px; }
.doc-vmeta strong { color: var(--ink); }
.doc-group { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); letter-spacing: 0.03em; margin: 36px 0 4px; }
.doc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.doc-list li { border-bottom: 1px solid var(--rule); }
.doc-list a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; padding: 14px 0; text-decoration: none; color: var(--ink); }
.doc-list a:hover .t { text-decoration: underline; text-underline-offset: 4px; }
.doc-list .t { font-weight: 600; }
.doc-list .k { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); white-space: nowrap; }
.doc-list .d { grid-column: 1 / -1; font-size: 0.9rem; color: var(--ink-3); margin: 0; }

/* --- Adaptations --------------------------------------------------------- */
@media (max-width: 960px) {
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  .site-nav.open { display: flex; position: fixed; inset: 64px 0 auto; flex-direction: column; gap: 0; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 8px 28px 18px; margin: 0; z-index: 60; }
  .site-nav.open a { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 1rem; white-space: normal; }
  .site-nav.open .nav-cta { display: block; text-align: center; background: var(--brand); color: var(--ink); font-weight: 600; border-bottom: 0; padding: 12px 16px; border-radius: 6px; margin-top: 10px; }
  .hero-grid, .show-row, .how, .verify, .eval { grid-template-columns: 1fr; }
  .hero-aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 18px; }
  .show-row:nth-child(even) .show-media { order: 0; }
  .films { grid-template-columns: 1fr; }
  .section-head { grid-template-columns: 1fr; gap: 8px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .domains thead { display: none; }
  .domains tr { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule); padding: 8px 0; }
  .domains th.fam, .domains td.list { width: auto; }
  .domains td, .domains th { border-top: 0; padding: 8px 16px; }
  .editions thead { display: none; }
  .editions tr { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule); padding: 10px 0; }
  .editions td, .editions td:first-child { border-top: 0; padding: 4px 16px; width: auto; }
  .editions td:first-child { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); padding-top: 6px; }
  .editions td[data-col]::before { content: attr(data-col) " · "; font-weight: 600; color: var(--ink); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .doc-wrap { padding: 32px 20px 72px; }
  .doc-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .archi { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .archi svg { min-width: 560px; }
  .site-header .wrap { gap: 16px; }
  .site-header .header-cta { display: none; }
  .hero h1 { max-width: none; }
  .hero-ctas .btn { width: 100%; }
  .demo-form { grid-template-columns: 1fr; padding: 18px; }
  .who { grid-template-columns: 1fr; }
  .scope-cols { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .site-footer.compact .footer-links { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
@media print {
  .site-header, .site-footer, .lightbox, .hero-ctas, .nav-toggle, .doc-back, .demo-form { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { border-top: 1px solid #999; padding: 18pt 0; }
  a { color: #000; text-decoration: none; }
  .frame, .shot, .film .thumb { box-shadow: none; }
}