/* Conversion layer: clear hierarchy, one honest CTA, product proof above the fold. */
/* ── ENCRE MANUSCRITE (lot K6) — la voix du lecteur dans le cahier. Caveat vendorisée
   (assets/fonts/, subset latin : diacritiques FR + œ U+0152 inclus, licence OFL à côté)
   — AUCUN CDN runtime. Grammaire d'encre : bleu stylo = voix du lecteur (réactions,
   questions), crayon (--ink-3, plancher AA) = notes-guides ; les claims marketing
   restent en imprimé. */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("fonts/caveat-latin-wght-normal.woff2") format("woff2-variations");
  /* U+2191/U+2193 RETIRÉS du template @fontsource : le cmap réel du subset ne porte PAS ces
     flèches (vérifié fonttools, review K6) — les déclarer ferait retomber ↑/↓ en fonte système
     au milieu du manuscrit. Toute flèche en contexte .hand-* se DESSINE (svg/mask). */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --hand: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  --ink-hand: oklch(43% 0.11 262);
}
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 1100; left: 14px; top: 12px; padding: 9px 12px; border-radius: 6px; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 600; transform: translateY(-160%); transition: transform 140ms ease; }
.skip-link:focus { color: var(--bg); transform: translateY(0); }
#main:focus { outline: none; }

.hero-wrap { overflow: clip; }
html[data-hero-layout="split"] .hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .78fr);
  align-items: center;
  column-gap: clamp(42px, 6vw, 76px);
  row-gap: 52px;
  max-width: 1180px;
  padding-top: 64px;
  padding-bottom: 72px;
}

.hero-text { min-width: 0; }
.hero-brand { margin-bottom: 22px; font-size: 25px; }
.hero h1 { max-width: 680px; margin: 18px 0 20px; font-size: clamp(43px, 5vw, 66px); line-height: .99; letter-spacing: -.035em; }
.hero h1 em::after { bottom: 5px; height: 11px; }
.hero-sub { max-width: 620px; margin: 0; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.58; }
.hero-actions { display: flex; align-items: center; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.hero-actions .btn { min-height: 44px; padding: 10px 16px; }
.hero-primary { gap: 10px; }
.hero-secondary { border: 1px solid transparent; }
.hero-secondary:hover { border-color: var(--line); }
.hero-meta { gap: 12px 14px; margin-top: 25px; }
.hero-meta i { width: 16px; height: 16px; display: inline-grid; place-items: center; border-radius: 50%; background: color-mix(in oklch, var(--green) 10%, var(--bg)); color: var(--green); font-size: 9px; font-style: normal; font-weight: 700; }
.hero-meta .sep { background: var(--line-strong); opacity: .65; }

.hero-access { align-self: center; }
html[data-hero-layout="split"] .hero-access { width: 100%; max-width: 430px; justify-self: end; }
html[data-card-style="soft"] .access-card { padding: clamp(23px, 3vw, 30px); border-radius: 16px; box-shadow: 0 1px 1px rgba(20,18,12,.04), 0 16px 50px rgba(20,18,12,.08), 0 0 0 .5px var(--line); }
.access-live { gap: 0; }
.access-kicker { display: inline-flex; align-items: center; gap: 8px; width: fit-content; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.access-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in oklch, var(--green) 12%, transparent); }
.access-title { margin: 14px 0 8px; font-family: var(--serif); font-size: clamp(25px, 2.4vw, 31px); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.access-copy { margin: 0 0 20px; color: var(--ink-3); font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.access-field { gap: 10px; }
.access-input, .access-submit { height: 48px; border-radius: 8px; }
.access-input { font-size: 15px; }
.access-submit { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; }
.access-submit { text-decoration: none; }
.access-submit:disabled { cursor: wait; opacity: .65; transform: none; }
.auth-card-actions { display: grid; gap: 12px; }
.auth-signin { display: block; color: var(--ink-3); font-size: 12.5px; text-align: center; }
.auth-signin strong { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line-strong); }
.auth-signin:hover strong { border-color: var(--ink); }
.form-feedback { margin: 1px 0 0; color: var(--rose); font-size: 11.5px; line-height: 1.45; text-align: left; }
.form-feedback[hidden] { display: none; }
.access-promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 14px 0 0; }
.access-promises > span { display: flex; align-items: center; gap: 5px; color: var(--ink-3); font-size: 12px; line-height: 1.3; }
.access-promises i { color: var(--green); font-style: normal; font-weight: 700; }
.access-code { display: block; margin-top: 17px; color: var(--ink-3); }
.access-code:hover { color: var(--ink); }
.access-legal { margin: 8px 0 0; }
.access-done { min-height: 284px; justify-content: center; }

.hero-product {
  grid-column: 1 / -1;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  box-shadow: var(--e-4);
}
.hero-product-bar { height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 14px; border-bottom: 1px solid var(--line-soft); background: color-mix(in oklch, var(--bg) 92%, transparent); font-family: var(--mono); font-size: 10px; color: var(--ink-4); letter-spacing: .04em; }
.product-path, .product-live { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.product-path img { width: 18px; height: 18px; border-radius: 4px; }
.product-path > span:nth-child(2) { color: var(--ink-2); font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0; }
.path-sep { color: var(--line-strong); }
.product-live { color: var(--green); text-transform: uppercase; letter-spacing: .08em; }
.product-live > span:first-child { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in oklch, var(--green) 12%, transparent); }
.hero-canvas { position: relative; height: 350px; overflow: hidden; background:
  linear-gradient(oklch(76% 0.007 80 / 0.8) 1px, transparent 1px) 0 0 / 120px 120px,
  linear-gradient(90deg, oklch(76% 0.007 80 / 0.8) 1px, transparent 1px) 0 0 / 120px 120px,
  linear-gradient(oklch(84% 0.006 80 / 0.85) 1px, transparent 1px) 0 0 / 24px 24px,
  linear-gradient(90deg, oklch(84% 0.006 80 / 0.85) 1px, transparent 1px) 0 0 / 24px 24px,
  var(--bg-sunk); }
.hero-canvas > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* PAS de vector-effect:non-scaling-stroke ici — combiné à pathLength="1" + stroke-dasharray:1,
   Chromium calcule mal le motif de dash et laisse la QUEUE du tracé non peinte (lien qui
   « s'arrête avant le nœud », retour Réda K5). Les extrémités pénètrent dans les nœuds (opaques,
   peints au-dessus du svg) pour garantir le contact visuel à toutes les largeurs. */
.preview-edge { fill: none; stroke: oklch(52% .11 265); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; animation: preview-edge-in 900ms 500ms cubic-bezier(.22,1,.36,1) forwards; }
.edge-b { stroke: var(--amber); animation-delay: 720ms; }
.preview-pulse { fill: oklch(52% .11 265); opacity: 0; animation: preview-dot 1700ms 1s ease-out infinite; }
@keyframes preview-edge-in { to { stroke-dashoffset: 0; } }
@keyframes preview-dot { 0% { opacity: 0; r: 4; } 20% { opacity: .7; } 70%,100% { opacity: 0; r: 18; } }
.preview-node { position: absolute; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); box-shadow: var(--e-3); opacity: 0; transform: translateY(8px) scale(.985); animation: preview-node-in 600ms cubic-bezier(.22,1,.36,1) forwards; }
.preview-node header { height: 35px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border-bottom: 1px solid var(--line-soft); }
.preview-node header strong { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 600; }
.preview-grip { display: inline-flex; flex: none; color: var(--ink-5); }
.preview-badge { padding: 2px 5px; border-radius: 3px; background: var(--ink); color: var(--bg); font-family: var(--mono); font-size: 8px; letter-spacing: .06em; }
.preview-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: oklch(52% .11 265); }
.preview-dot.amber { background: var(--amber); }
.preview-thread { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; }
.preview-thread small { font-family: var(--mono); font-size: 7.5px; letter-spacing: .08em; color: var(--ink-5); }
.preview-thread p { margin: 0 0 3px; color: var(--ink-2); font-size: 10.5px; line-height: 1.45; }
.preview-thread mark { padding: 0 2px; border-bottom: 1.5px solid oklch(52% .11 265); border-radius: 2px; background: color-mix(in oklch, oklch(52% .11 265) 17%, transparent); color: inherit; }
.preview-node footer { display: flex; align-items: center; justify-content: space-between; margin: 0 8px 8px; padding: 5px 7px; border: 1px solid var(--line-soft); border-radius: 5px; font-family: var(--mono); font-size: 8px; color: var(--ink-4); }
.preview-send { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 4px; background: var(--ink); color: var(--bg); }
.preview-ph { color: var(--ink-5); }
.preview-foot-right { display: inline-flex; align-items: center; gap: 5px; }
/* Barre méta fidèle au produit (.mf-node__bar) : fond alt, crumb modèle ou « INHERITED · % »
   à gauche, anneau de contexte + chips PIN/FOCUS à droite. */
.preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 9px; background: var(--bg-alt); border-bottom: 1px solid var(--line-soft); font-family: var(--mono); font-size: 7.5px; letter-spacing: .05em; color: var(--ink-3); }
.preview-bar-actions { display: inline-flex; align-items: center; gap: 4px; }
.preview-ring { width: 12px; height: 12px; flex: none; }
.preview-chip { border: 1px solid var(--line); border-radius: 3px; padding: 1px 4px; background: var(--bg); color: var(--ink-4); font-size: 6.5px; letter-spacing: .06em; }
.preview-main { left: 5%; top: 58px; width: 31%; min-height: 235px; animation-delay: 100ms; }
.preview-main::before { content: ""; position: absolute; left: 0; inset-block: 0; width: 3px; background: oklch(52% .11 265); }
.preview-branch-a { left: 52%; top: 25px; width: 27%; min-height: 190px; animation-delay: 640ms; }
.preview-branch-b { left: 65%; top: 220px; width: 27%; min-height: 118px; animation-delay: 850ms; }
.preview-toast { position: absolute; left: 50%; bottom: 16px; display: flex; align-items: center; gap: 7px; transform: translate(-50%, 10px); opacity: 0; padding: 7px 11px; border-radius: 6px; background: var(--ink); color: var(--bg); box-shadow: var(--e-3); font-size: 10.5px; animation: preview-toast-in 480ms 1.35s cubic-bezier(.22,1,.36,1) forwards; white-space: nowrap; }
.preview-toast > span:first-child { color: oklch(76% .12 155); }
@keyframes preview-node-in { to { opacity: 1; transform: none; } }
@keyframes preview-toast-in { to { opacity: 1; transform: translate(-50%, 0); } }
.hero-product-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 15px 18px; border-top: 1px solid var(--line-soft); }
.hero-product-foot > div { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.hero-product-foot strong { font-size: 13.5px; }
.hero-product-foot span { color: var(--ink-3); font-size: 12px; }
.hero-product-foot a { flex: none; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.hero-product-foot a:hover { color: var(--ink); }

.final-capture { width: min(520px, 100%); margin: 30px auto 0; }
.final-auth-actions { display: flex; align-items: center; justify-content: center; gap: 9px; }
.final-auth-actions .btn { min-width: 148px; min-height: 46px; }
.final-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.final-form .access-input { min-width: 0; }
.final-form .access-submit { width: auto; padding-inline: 20px; }
.final-form .form-feedback { grid-column: 1 / -1; }
.final-note { margin-top: 11px !important; margin-bottom: 0 !important; font-family: var(--mono); font-size: 10.5px !important; letter-spacing: .04em; color: var(--ink-4) !important; }
.final-done { padding: 16px; border: 1px solid color-mix(in oklch, var(--green) 28%, var(--line)); border-radius: 9px; background: color-mix(in oklch, var(--green) 6%, var(--bg)); color: var(--green); font-size: 13px; }
.final-done[hidden] { display: none; }

/* Lazy demos never delay the hero and retain a useful fallback if the CDN is unavailable. */
body.demos-loading #problem-linear-mount:empty::before,
body.demos-loading #problem-forked-mount:empty::before,
body.demos-loading #canvas-demo-mount:empty::before,
body.demos-loading #moves-demo-mount:empty::before,
body.demos-loading #context-demo-mount:empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.58) 44%, transparent 60%) -160% 0 / 220% 100% no-repeat, var(--bg-sunk);
  animation: demo-loading 1.35s ease-in-out infinite;
}
/* Callout « Résultat » — la solution mise en avant en bas de chaque pilier (retour Réda K5).
   ≥2 classes : le <style> inline d'index.html (.pillar-copy p) charge APRÈS cette feuille. */
.pillar-copy .pillar-out { margin: 18px 0 0; padding: 11px 13px; border: 1px solid color-mix(in oklch, var(--green) 26%, var(--line)); border-radius: 8px; background: color-mix(in oklch, var(--green) 5%, var(--bg)); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.pillar-copy .pillar-out b { color: var(--green); }
.pillar-stage.anim:empty { aspect-ratio: 16 / 9; }
#context-demo-mount:empty { position: relative; min-height: 410px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-sunk); }
@keyframes demo-loading { to { background-position: 220% 0; } }
.demo-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 24px; background: var(--bg-sunk); color: var(--ink-3); text-align: center; }
.demo-fallback > span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--ink-2); }
.demo-fallback strong { color: var(--ink-2); font-size: 13px; }
.demo-fallback small { max-width: 260px; color: var(--ink-4); font-size: 11px; }
body.demos-error .pillar-stage.anim { min-height: 340px; }
body.demos-error #context-demo-mount { position: relative; min-height: 410px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }

/* ── Touches d'encre (lot K6) ─────────── */
/* Le surligneur du <em> du H1 passe du bloc mécanique au trait de marqueur tracé main
   (même ambre, même alpha ~32 %). html[data-title-font] : spécificité > au
   `.hero h1 em::after` du <style> inline qui charge APRÈS cette feuille.
   z-index:0 : SANS contexte d'empilement sur l'em, le ::after (z -1) coulait sous le fond
   opaque de la page — la bande ambre d'origine était déjà invisible en silence (prouvé
   par sonde rouge, diag K6) ; avec lui, le trait passe sous les glyphes, au-dessus du reste. */
html[data-title-font] .hero h1 em { z-index: 0; }
html[data-title-font] .hero h1 em::after {
  height: 14px;
  bottom: 2px;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' preserveAspectRatio='none'%3E%3Cpath d='M4 9C30 5.5 58 11 86 7.5S112 8.5 116 6.5' fill='none' stroke='%23B07E14' stroke-opacity='.3' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M6 11C34 8 62 12.5 90 9.5S110 10 114 8.5' fill='none' stroke='%23B07E14' stroke-opacity='.22' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.hand-note { font-family: var(--hand); font-weight: 500; font-size: 18px; line-height: 1.25; color: var(--ink-hand); letter-spacing: .005em; }
/* Note de marge (voix du lecteur) sous l'eyebrow de section — colonne gauche du .section-hd. */
.section-side { display: grid; gap: 12px; align-content: start; }
.section-side .hand-margin { margin: 6px 10px 0 0; max-width: 185px; transform: rotate(-2deg); text-wrap: balance; }
/* Flèche manuscrite « un fil → forké » : geste pur (aria-hidden), se dessine au scroll.
   PAS de vector-effect (piège K5 : queue de tracé non peinte avec pathLength+dasharray). */
.section .problem-grid { position: relative; }
.problem-grid .hand-arrow { position: absolute; left: 50%; top: -14px; width: 86px; height: 40px; transform: translateX(-58%) rotate(6deg); z-index: 6; overflow: visible; pointer-events: none; }
.hand-arrow path { fill: none; stroke: var(--ink-hand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 700ms cubic-bezier(.22,1,.36,1); }
.hand-arrow path + path { transition-delay: 620ms; transition-duration: 240ms; }
.hand-arrow.is-inked path { stroke-dashoffset: 0; }
/* Numéros manuscrits des Steps (décoratifs, aria-hidden — « STEP 0x » reste la voix produit).
   .steps .step : ≥2 classes pour poser position:relative face au .step du <style> inline. */
.steps .step { position: relative; }
.steps .hand-step { position: absolute; top: 8px; right: 16px; font-size: 27px; line-height: 1; transform: rotate(4deg); }
.steps .step:nth-child(2) .hand-step { transform: rotate(-3deg); }
.steps .step:nth-child(3) .hand-step { transform: rotate(2.5deg); }
/* « Voir le produit avant de créer un compte ↓ » est une note qu'on se fait à soi-même : crayon. */
.access-card .hand-cue { font-family: var(--hand); font-size: 16.5px; font-weight: 500; color: var(--ink-3); display: inline-block; transform: rotate(-1.2deg); }
.access-card .hand-cue:hover { color: var(--ink); }
/* Flèche ↓ DESSINÉE (mask + currentColor : suit le crayon→encre au survol). Le caractère
   U+2193 n'existe pas dans le cmap Caveat (review K6) — en texte il rendait en fonte système
   au milieu du manuscrit ; retiré des chaînes access.tour EN/FR au profit de ce geste. */
.access-card .hand-cue::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 13px;
  margin-left: 5px;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 1C4.6 5 5.4 8 5 12M1.8 8.6L5 12.4 8.2 8.4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 1C4.6 5 5.4 8 5 12M1.8 8.6L5 12.4 8.2 8.4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── K6b : 2ᵉ passe d'encre (annotations + doodles Réda 2026-07-22) ─────────── */
/* Encerclement manuscrit bleu de « contexte inclus » : ellipse double trait PAR-DESSUS le
   texte (les traits croisent les glyphes — authentique). inline-block : un ::after absolu
   sur un inline fragmenté en 2 lignes s'ancrerait au 1ᵉʳ fragment seulement. */
.hero-sub .hand-circle { position: relative; display: inline-block; }
.hero-sub .hand-circle::after {
  content: "";
  position: absolute;
  inset: -6px -12px -8px -10px;
  background: var(--ink-hand);
  opacity: .8;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 44'%3E%3Cpath d='M70 5C104 4 130 12 131 22 132 34 106 41 68 40 32 39 8 33 9 21 10 10 38 5 70 5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'/%3E%3Cpath d='M62 6C96 3 126 10 128 21 130 33 100 40 70 39' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 44'%3E%3Cpath d='M70 5C104 4 130 12 131 22 132 34 106 41 68 40 32 39 8 33 9 21 10 10 38 5 70 5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'/%3E%3Cpath d='M62 6C96 3 126 10 128 21 130 33 100 40 70 39' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* Souligné rouge manuscrit des 3 promesses méta (annotation Réda : « souligne en rouge
   manuscrit », verdict = les 3). Tracés variés par flips — même masque, trois lectures. */
.hero-meta b { position: relative; }
.hero-meta b::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -5px;
  height: 6px;
  background: var(--rose);
  opacity: .8;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5C20 2.5 45 6.5 70 4S95 4.5 98 3.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5C20 2.5 45 6.5 70 4S95 4.5 98 3.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.hero-meta b[data-i18n="hero.m2"]::after { transform: scaleX(-1); }
.hero-meta b[data-i18n="hero.m3"]::after { transform: scaleY(-1) rotate(.5deg); }
/* Croix manuscrite qui BARRE « Un seul fil » (l'état-problème, rouge du tag) ; vu manuscrit
   après « Ramifié » (l'état-solution, vert du tag). Annotations Réda 3-4. */
.prob-tag [data-i18n="s1.left"] { position: relative; }
.prob-tag [data-i18n="s1.left"]::after {
  content: "";
  position: absolute;
  inset: -6px -5px;
  background: var(--rose);
  opacity: .9;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 24' preserveAspectRatio='none'%3E%3Cpath d='M4 3C25 10 45 16 66 21M65 2C45 9 24 15 5 22' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 24' preserveAspectRatio='none'%3E%3Cpath d='M4 3C25 10 45 16 66 21M65 2C45 9 24 15 5 22' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.prob-tag [data-i18n="s1.right"]::after {
  content: "";
  display: inline-block;
  width: 13px;
  height: 12px;
  margin-left: 6px;
  vertical-align: -2px;
  background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1.5 6.5C4 8 5 9.5 6 10.5 8 6.5 10.5 3 13 1' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1.5 6.5C4 8 5 9.5 6 10.5 8 6.5 10.5 3 13 1' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* « Example??? ↓ » (visuel Réda K6e, dédoublonné lot 1) : UNE seule pose, sur la première
   démo de la page (01 grille problème) — répétée, l'annotation cessait de paraître spontanée.
   Posée dans le gap au-dessus du cadre, côté droit, flèche vers la démo. Masquée <1080px :
   les gaps se resserrent et la colonne de titre passe en 1fr. */
.hand-example { position: absolute; z-index: 6; display: none; pointer-events: none; user-select: none; font-family: var(--hand); font-weight: 500; font-size: 25px; line-height: 1; color: var(--ink-hand); text-align: center; }
.hand-example svg { display: block; width: 15px; height: 44px; margin: 2px auto 0; overflow: visible; }
.hand-example path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.section .ctx-grid { position: relative; }
@media (min-width: 1080px) {
  .hand-example { display: block; }
  .problem-grid .hand-example { top: -80px; right: 40px; transform: rotate(-2deg); }
}

/* Doodles de marge (visuels fournis par Réda, REDESSINÉS en SVG inline — verdict K6b :
   tokens encre, légendes Caveat en data-i18n EN/FR). Ils vivent dans le FLUX (absolute
   dans leur section) donc scrollent avec la page — jamais fixed. Placement ALTERNÉ
   (retour Réda K6c) : LA MARGE du cahier à gauche de la ligne rouge (idea/context/next)
   et la gouttière droite de la colonne 1180 (branch/plan/paths) ; ≥1480px : en dessous
   il n'y a pas de gouttière utile. aria-hidden : marginalia décorative, hors axe AA. */
.section.has-doodle, .final-cta.has-doodle { position: relative; }
.doodle { position: absolute; display: none; pointer-events: none; opacity: .62; z-index: 0; overflow: visible; }
.doodle path, .doodle circle, .doodle rect { fill: none; stroke: var(--ink-hand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.doodle .rd { stroke: var(--rose); }
.doodle .dash { stroke-dasharray: 5 6; }
/* Tailles PAR CLASSES uniquement (review K6b) : un attribut SVG font-size="N" a une
   spécificité NULLE en bas de cascade — n'importe quelle règle CSS l'écrase en silence. */
.doodle text { font-family: var(--hand); font-weight: 500; font-size: 16px; fill: var(--ink-hand); stroke: none; }
.doodle text.big { font-size: 24px; }
.doodle text.h { font-size: 21px; }
.doodle text.em { font-size: 17.5px; }
.doodle text.sm { font-size: 14px; }
.doodle text.rd { fill: var(--rose); stroke: none; }
@media (min-width: 1480px) {
  .doodle { display: block; }
  /* Gouttière DROITE de la colonne (100% = la boîte de section 1180). */
  .doodle--branch, .doodle--plan, .doodle--paths { left: calc(100% + 16px); width: min(260px, 50vw - 620px); }
  /* LA MARGE du cahier (retour Réda : « en placer dans la marge, c'est plus crédible ») —
     à GAUCHE de la ligne rouge, bord droit calé ~8px avant elle (la ligne vit à ~14px
     dans la boîte de section : right:100%−6px y aligne le bord droit du doodle). */
  .doodle--idea, .doodle--context, .doodle--next { right: calc(100% - 6px); width: min(260px, 50vw - 610px); }
  .doodle--idea { top: 330px; transform: rotate(-2deg); }
  .doodle--branch { top: 210px; transform: rotate(1.5deg); }
  .doodle--context { top: 130px; transform: rotate(-1.5deg); }
  .doodle--plan { top: 44px; transform: rotate(1deg); }
  .doodle--next { top: 30px; transform: rotate(-2deg); }
  .doodle--paths { top: 190px; transform: rotate(1.2deg); }
}

@media (max-width: 1080px) {
  html[data-hero-layout="split"] .hero { grid-template-columns: minmax(0, 640px); justify-content: center; gap: 32px; text-align: center; }
  html[data-hero-layout="split"] .hero-access { max-width: 520px; justify-self: center; }
  .hero-actions, html[data-hero-layout="split"] .hero-meta, html[data-hero-layout="split"] .hero-eyebrow { justify-content: center; }
  html[data-hero-layout="split"] .hero-sub { margin-inline: auto; }
  .hero-product { grid-column: 1; width: min(920px, calc(100vw - 36px)); justify-self: center; }
}

@media (max-width: 960px) {
  /* La grille s'empile à 960 (inline : .problem-grid → 1fr) — la flèche inter-cartes n'a plus
     de gap à traverser. Masquage EN LOCKSTEP avec CE breakpoint (review K6 : à 768 elle
     restait peinte sur la bande 769-960, pointant dans le vide au-dessus des cartes empilées). */
  .problem-grid .hand-arrow { display: none; }
}

@media (max-width: 700px) {
  html[data-hero-layout="split"] .hero { padding: 42px 18px 54px; gap: 28px; }
  .hero-brand { margin-bottom: 16px; }
  .hero h1 { font-size: clamp(39px, 12.3vw, 54px); }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .hero-meta { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 8px; }
  .hero-meta .sep { display: none; }
  html[data-card-style="soft"] .access-card { padding: 22px 18px; border-radius: 13px; }
  .access-promises { grid-template-columns: 1fr; gap: 5px; }
  .access-promises > span { justify-content: center; }
  .hero-product { width: 100%; }
  .hero-product-bar { padding-inline: 10px; }
  .product-live { display: none; }
  .hero-canvas { height: 470px; }
  .hero-canvas > svg { display: none; }
  .preview-main { left: 4%; top: 24px; width: 82%; min-height: 205px; }
  .preview-branch-a { left: 14%; top: 238px; width: 78%; min-height: 150px; }
  .preview-branch-b { display: none; }
  .preview-toast { bottom: 18px; max-width: calc(100% - 24px); white-space: normal; text-align: left; }
  .hero-product-foot { align-items: flex-start; padding: 14px; }
  .hero-product-foot > div { display: block; }
  .hero-product-foot span { display: block; margin-top: 3px; }
  .hero-product-foot a { display: none; }
  .final-form { grid-template-columns: 1fr; }
  .final-form .access-submit { width: 100%; }
  .final-auth-actions { display: grid; grid-template-columns: 1fr; }
  .final-auth-actions .btn { width: 100%; }
}

@media (max-width: 560px) {
  /* Le choix de langue prime sur le doublon « Sign in » (déjà présent dans la carte
     hero, le CTA final et auth.html) — un visiteur FR à navigateur EN doit pouvoir basculer.
     Spécificité ≥ 2 classes obligatoire : le <style> inline d'index.html charge APRÈS
     cette feuille et gagnerait tout arbitrage à égalité. */
  .nav-cta .nav-signin { display: none; }
  .nav-cta { gap: 6px; }
}

@media (max-width: 374px) {
  /* À 320px la nav débordait de 24px (boutons nowrap incompressibles) : marque réduite
     au glyphe, paddings resserrés — plus aucun scroll horizontal de page. */
  .nav .nav-row { padding: 12px 14px; gap: 10px; }
  .nav .nav-logo > span { display: none; }
}

@media (pointer: coarse) {
  /* Cibles tactiles ≥ ~44px sur écran tactile, sans changer le rendu pointeur fin.
     Même contrainte de spécificité que ci-dessus face au <style> inline. */
  .nav .btn { min-height: 44px; }
  .nav-cta .lang-tog button { min-width: 44px; min-height: 44px; padding: 0 12px; }
  .access-card .auth-signin { padding: 12px 0; }
  .access-card .access-code { padding: 12px 4px; }
  .hero-product-foot a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .footer .footer-row a { display: inline-block; padding: 14px 8px; margin: -14px -8px; }
  /* Lot 4 (M2) : le reste des commandes interactives. min-height plutôt que padding :
     node-anim.css charge APRÈS cette feuille, un padding à égalité de spécificité perdrait. */
  .midcta .btn { min-height: 44px; }
  .ctxd-acts .ctxd-act { min-height: 44px; }
  .na-embed-tabs button { min-height: 44px; }
  /* Replay : bouton 23px — zone de frappe étendue sans changer le rendu. Le bouton est
     absolute dans .na-embed-wrap : l'::after s'étend depuis SA boîte, pas celle du wrapper. */
  .na-embed-wrap .na-embed-replay::after { content: ""; position: absolute; inset: -12px; }
  .canvas-demo .cd-zoom-btn { min-width: 44px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .preview-node, .preview-toast { opacity: 1; transform: none; }
  .preview-edge { stroke-dashoffset: 0; }
  .hand-arrow path { stroke-dashoffset: 0; transition: none; }
  body.demos-loading *::before { animation: none !important; }
}