/* Talk-it · styles communs aux versions A (déroulé) et B (vidéo motion design).
   Direction (2026-10-22, demande de Marcello) : reprendre le langage visuel de kinso.ai (barre de navigation en pilule flottante,
   ouverture claire avec dégradé doux et trame fine, titres à deux graisses, étiquettes de section encadrées, partie sombre tramée)
   avec l'identité Talk-it : palette Encre / Menthe / Papier / Seafoam, Plus Jakarta Sans, logo du brandboard.
   Thème unique et délibéré : ouverture claire, milieu de page sombre. */
:root {
  --paper: #F7F6F1;
  --white: #FFFFFF;
  --ink: #111C1B;
  --ink-soft: #172A29;
  --text: #172A29;
  --muted: #5C6B68;
  --line: #E1E5E1;
  --accent: #1F5641;
  --accent-2: #3E8A5F;
  --mint: #BAF36B;
  --mint-pale: #E3F7CC;
  --seafoam: #B8D5C9;
  --dark-text: #F2F4EF;
  --dark-muted: #9DB1AB;
  --dark-line: rgba(242, 244, 239, .12);
  --todo-bg: #FBEBD3;
  --todo-fg: #8A4B0F;
  --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius-m: 14px;
  --radius-l: 22px;
  --shadow: 0 1px 2px rgba(17, 28, 27, .05), 0 24px 48px -24px rgba(17, 28, 27, .28);
  --shadow-float: 0 2px 6px rgba(17, 28, 27, .06), 0 16px 32px -12px rgba(17, 28, 27, .22);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
h1, h2, h3 { text-wrap: balance; margin: 0; letter-spacing: -0.03em; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 8px; }
img { max-width: 100%; height: auto; display: block; }

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.section { padding-block: 104px; }

/* Étiquette de section encadrée, entre deux filets */
.label { display: flex; align-items: center; gap: 16px; justify-content: center; margin-bottom: 28px; }
.label::before, .label::after { content: ""; flex: 1; max-width: 220px; height: 1px; background: var(--line); }
.label span { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); }
.dark .label::before, .dark .label::after { background: var(--dark-line); }
.dark .label span { color: var(--dark-muted); border-color: var(--dark-line); background: transparent; }

/* Public visé, au-dessus du titre */
.for { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .75); border: 1px solid var(--line); font-size: 13.5px; font-weight: 500; color: var(--text); box-shadow: 0 6px 16px -10px rgba(17, 28, 27, .25); }
.for .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 3px rgba(186, 243, 107, .45); }
.vhero .for { justify-self: center; }

/* Titres à deux graisses */
.h-xl { font-size: clamp(40px, 6.4vw, 72px); line-height: 1.02; font-weight: 700; }
.h-l { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.08; font-weight: 700; }
.light { font-weight: 400; }
.fade { color: #9AA6A3; }
.dark .fade { color: #5F7470; }
.tint-word { color: var(--accent-2); }
.dark .tint-word { background: linear-gradient(90deg, var(--mint), var(--seafoam)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.center { text-align: center; }
.sub { font-size: clamp(17px, 1.6vw, 19px); color: var(--muted); max-width: 46ch; }
.center .sub { margin-inline: auto; }

/* Boutons en pilule */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px/1.1 var(--font-sans); padding: 14px 22px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-ink { background: var(--ink); color: var(--white); box-shadow: 0 8px 18px -8px rgba(17, 28, 27, .5); }
.btn-ink:hover { background: #000; }
.btn-ghost { background: rgba(255, 255, 255, .7); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn-mint { background: var(--mint); color: var(--ink); }
.btn svg { flex: none; }
.btn-wide { width: 100%; max-width: 420px; }

/* Barre de navigation : pilule flottante */
.topbar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 14px); z-index: 20; padding-inline: max(14px, env(safe-area-inset-left, 0px)); }
.navpill { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 10px 10px 22px; border-radius: 18px; background: rgba(255, 255, 255, .78); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 10px 30px -14px rgba(17, 28, 27, .25); border: 1px solid rgba(17, 28, 27, .06); }
.logo { display: block; width: 104px; flex: none; }
.logo svg { width: 100%; height: auto; display: block; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a:not(.btn) { color: var(--muted); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.nav a:not(.btn):hover { color: var(--text); }
.nav .btn { padding: 11px 16px; font-size: 14px; }

/* Ouverture : dégradé doux et trame */
.hero { position: relative; margin-top: -76px; padding-block: 150px 64px; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 70% at 8% 30%, rgba(186, 243, 107, .30), transparent 70%),
    radial-gradient(55% 70% at 95% 20%, rgba(184, 213, 201, .75), transparent 70%),
    radial-gradient(50% 50% at 60% 100%, rgba(227, 247, 204, .6), transparent 70%),
    var(--paper); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(17, 28, 27, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 28, 27, .05) 1px, transparent 1px);
  background-size: 9px 9px; mask-image: linear-gradient(to bottom, #000 55%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.hero-copy { display: grid; gap: 22px; }
.hero-copy .cta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.reassure { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--muted); }
.reassure span { display: inline-flex; gap: 6px; align-items: center; }
.reassure svg { color: var(--accent-2); }

.stage { position: relative; padding: 28px 0 40px; }
.stage .shot { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid rgba(17, 28, 27, .08); background: var(--white); }
.float { position: absolute; display: grid; gap: 2px; padding: 11px 14px; border-radius: 12px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); box-shadow: var(--shadow-float); border: 1px solid rgba(17, 28, 27, .06); font-size: 13px; min-width: 200px; animation: drift 6s ease-in-out infinite; }
.float b { font-size: 13.5px; font-weight: 600; }
.float small { color: var(--muted); font-size: 12px; }
.float .row { display: flex; gap: 8px; align-items: center; }
.float .chip { font-family: var(--font-mono); font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: var(--todo-bg); color: var(--todo-fg); }
.float.f1 { top: 0; right: -8px; border-color: rgba(62, 138, 95, .45); box-shadow: 0 0 0 3px rgba(186, 243, 107, .35), var(--shadow-float); }
.float.f2 { top: 76px; right: -22px; animation-delay: -2s; }
.float.f3 { bottom: 6px; left: -18px; animation-delay: -4s; }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.pill { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 14px; border-radius: 14px; background: var(--ink-soft); color: var(--white); box-shadow: 0 16px 30px -14px rgba(17, 28, 27, .55); font-size: 14px; }
.pill .bars { display: inline-flex; gap: 3px; align-items: center; height: 20px; }
.pill .bars i { width: 3px; height: 8px; border-radius: 2px; background: var(--mint); animation: vu 1.1s ease-in-out infinite; }
.pill .bars i:nth-child(2) { animation-delay: -.2s; } .pill .bars i:nth-child(3) { animation-delay: -.5s; } .pill .bars i:nth-child(4) { animation-delay: -.7s; }
.pill .bars i:nth-child(5) { animation-delay: -.35s; } .pill .bars i:nth-child(6) { animation-delay: -.9s; } .pill .bars i:nth-child(7) { animation-delay: -.15s; }
.pill .meta { font-family: var(--font-mono); font-size: 12px; color: var(--seafoam); }
@keyframes vu { 0%, 100% { height: 6px; } 50% { height: 18px; } }
.stage .pill { position: absolute; right: 28px; bottom: -8px; z-index: 2; }

/* Rangées « comment ça marche » */
.rows { display: grid; gap: 96px; }
.feature { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.feature.flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.feature.flip .f-text { order: 2; }
.label.left { justify-content: flex-start; margin-bottom: 8px; }
.label.left::before { display: none; }
.f-text { display: grid; gap: 16px; }
.f-text .step { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); }
.f-text h3 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.1; font-weight: 700; }
.f-text p { color: var(--muted); font-size: 17px; max-width: 42ch; }
.f-visual { position: relative; border-radius: var(--radius-l); padding: 28px; background: linear-gradient(140deg, var(--mint-pale), #EEF4F0 55%, #E6EFEA); overflow: hidden; }
.f-visual .shot { margin: 0; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid rgba(17, 28, 27, .08); background: var(--white); }
.kbd { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--white); color: var(--text); white-space: nowrap; }
.todo { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--todo-bg); color: var(--todo-fg); font-size: 14px; font-weight: 500; white-space: nowrap; }
.dictation { display: grid; gap: 16px; align-content: center; min-height: 300px; }
.dictation .said { background: var(--white); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow-float); font-size: 16px; line-height: 1.6; color: var(--text); max-width: 34rem; }
.dictation .said mark { background: #D3E7DE; color: var(--text); border-radius: 3px; padding: 0 2px; }
.dictation .said small { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }

/* Calculateur */
.method { margin: 18px auto 0; max-width: 1000px; color: var(--muted); font-size: 14px; text-align: left; }
.method summary { cursor: pointer; font-weight: 600; color: var(--text); }
.method p { margin-top: 10px; max-width: 80ch; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Votre temps : la même phrase tapée puis dite, et le temps que la voix rend */
.measure { overflow-x: clip; }
.measure .method { max-width: 880px; }
.measure-stage { max-width: 880px; min-height: 440px; margin: 56px auto 0; text-align: left; }
.m-steps { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 44px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.m-steps span { display: inline-flex; align-items: center; gap: 8px; opacity: .55; transition: opacity .2s ease; }
.m-steps span::before { content: attr(data-n); color: var(--accent-2); }
.m-steps span.is-on, .m-steps span.is-done { opacity: 1; }
.m-steps span.is-on { color: var(--text); }
.m-steps span.is-done::before { content: "✓"; }
.m-screen { animation: m-in .35s ease both; }
@keyframes m-in { from { opacity: 0; transform: translateY(6px); } }
.m-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.m-meta b { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.m-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--mint-pale); color: var(--accent); letter-spacing: .04em; }
.m-type { position: relative; display: block; cursor: text; }
.m-phrase { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.28; font-weight: 600; letter-spacing: -0.025em; color: var(--text); text-wrap: pretty; }
.m-phrase .pending { color: #B3BEBA; }
.m-phrase .wrong { color: var(--todo-fg); background: var(--todo-bg); border-radius: 4px; }
.m-phrase .caret { display: inline-block; width: 3px; height: .95em; margin: 0 -1.5px; transform: translateY(.12em); border-radius: 2px; background: var(--accent-2); animation: m-caret 1s ease-in-out infinite; }
@keyframes m-caret { 50% { opacity: .2; } }
.m-type textarea { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; resize: none; cursor: text; }
.m-type:focus-within .m-phrase .caret { background: var(--accent); }
.m-track { height: 3px; margin-top: 26px; border-radius: 999px; background: var(--line); overflow: hidden; }
.m-track i { display: block; height: 100%; width: 100%; background: var(--accent-2); transform-origin: left; transition: transform .25s linear; }
.m-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 18px; font-size: 14px; color: var(--muted); }
.m-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 36px; }
.m-actions .btn svg { width: 17px; height: 17px; }
.link-btn { border: 0; background: none; padding: 2px; font: 600 14px var(--font-sans); color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { text-decoration-color: currentColor; }
.m-speak { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 44px; padding: 36px 24px 28px; border-top: 1px solid var(--line); text-align: center; }
.m-hold { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 22px 38px; border: 0; border-radius: 999px; background: var(--ink-soft); color: var(--white); font: 600 18px var(--font-sans); box-shadow: 0 6px 0 var(--ink), 0 18px 32px -14px rgba(17, 28, 27, .55); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .08s ease, box-shadow .08s ease, background .15s ease, color .15s ease; }
.m-hold svg { width: 22px; height: 22px; }
.m-hold:hover { background: var(--accent); }
.m-hold.is-held { transform: translateY(5px); background: var(--mint); color: var(--ink); box-shadow: 0 1px 0 #8FBF4F, 0 0 0 8px rgba(186, 243, 107, .35); }
.m-hold.is-held::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--mint); animation: m-ring 1.4s ease-out infinite; }
@keyframes m-ring { to { transform: scale(1.25, 1.6); opacity: 0; } }
.m-say { max-width: 46ch; font-size: 16px; color: var(--muted); }
.m-say strong { display: block; margin-bottom: 4px; text-wrap: balance; font-size: 18px; font-weight: 600; color: var(--text); }
.m-why { font-size: 13.5px; color: var(--muted); }
.m-listen { display: flex; align-items: center; gap: 16px; width: min(420px, 100%); }
.m-dot { position: relative; width: 12px; height: 12px; flex: none; border-radius: 999px; background: var(--accent-2); }
.m-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 2px solid var(--accent-2); opacity: .35; animation: m-pulse 1.4s ease-out infinite; }
@keyframes m-pulse { to { transform: scale(1.8); opacity: 0; } }
.m-wave { display: flex; align-items: center; gap: 3px; height: 40px; flex: 1; max-width: 360px; }
.m-wave i { flex: 1; max-width: 5px; height: 4px; border-radius: 3px; background: var(--accent-2); transition: height .08s linear; }
.m-listen b { font-family: var(--font-mono); font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.m-note { margin-top: 30px; padding: 14px 18px; border-radius: var(--radius-m); background: var(--todo-bg); color: var(--todo-fg); font-size: 14.5px; }
/* Résultat, sur la trame sombre */
.m-result { position: relative; display: grid; min-height: 460px; }
.m-result > * { grid-area: 1 / 1; min-width: 0; }
.m-race { display: flex; flex-direction: column; gap: 14px; align-self: center; }
.m-lane { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 3.5rem; gap: 16px; align-items: start; padding: 16px 20px; border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow-float); font-size: 16px; line-height: 1.55; }
.m-lane.voice { border-color: var(--ink-soft); background: var(--ink-soft); color: var(--dark-text); box-shadow: 0 18px 32px -16px rgba(17, 28, 27, .55); }
.m-lane .who { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.m-lane.voice .who { color: var(--mint); }
.m-lane .rest { color: transparent; }
.m-lane .cur { display: inline-block; width: 2px; height: 18px; margin-left: 1px; vertical-align: -3px; background: var(--text); }
.m-lane .clock { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.m-final { display: flex; flex-direction: column; align-items: center; text-align: center; }
.m-figure { position: relative; display: inline-block; font-size: clamp(96px, 15vw, 168px); line-height: .9; font-weight: 800; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; color: var(--text); }
.m-figure .glow { position: absolute; top: 50%; left: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 999px; background: radial-gradient(circle, rgba(186, 243, 107, .45), transparent 62%); pointer-events: none; }
.m-figure .num { position: relative; }
.m-figure svg { position: absolute; bottom: -10px; left: -4%; width: 108%; height: 28px; overflow: visible; }
.m-figure path { fill: none; stroke: var(--mint); stroke-linecap: round; stroke-width: 11; stroke-dasharray: 1; }
.m-caption { margin-top: 22px; font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: -0.02em; }
.m-caption .tag { display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 999px; vertical-align: 5px; background: var(--todo-bg); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--todo-fg); }
.m-speeds { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.m-speeds b { font-weight: 500; color: var(--text); }
.m-sentence { max-width: 30em; margin-top: 44px; font-size: clamp(20px, 2.3vw, 26px); line-height: 1.6; font-weight: 500; letter-spacing: -0.01em; color: var(--text); text-wrap: balance; }
.m-stepper { display: inline-flex; align-items: center; gap: 2px; margin: 0 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 1px 2px rgba(17, 28, 27, .06); vertical-align: 2px; line-height: 1; white-space: nowrap; }
.m-stepper button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 999px; background: #EEF2EF; font: 500 18px/1 var(--font-sans); color: var(--text); cursor: pointer; transition: background .15s ease, transform .1s ease; }
.m-stepper button:hover { background: var(--mint-pale); color: var(--accent); }
.m-stepper button:active { transform: scale(.92); }
.m-stepper button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.m-stepper b { padding: 0 10px; text-align: center; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.m-stepper b.is-bump { animation: m-bump .28s ease; }
@keyframes m-bump { 40% { transform: translateY(-3px) scale(1.08); } }
.m-big { display: block; margin: 10px 0 6px; font-size: clamp(40px, 5.6vw, 64px); line-height: 1.05; font-weight: 800; letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.m-year { color: var(--muted); }
.m-year b { color: var(--text); font-weight: 600; }
.m-final .m-actions { justify-content: center; margin-top: 34px; }
@media (max-width: 640px) {
  .measure-stage { margin-top: 36px; min-height: 380px; }
  .m-steps { gap: 6px 16px; margin-bottom: 30px; font-size: 10.5px; }
  .m-lane { grid-template-columns: minmax(0, 1fr) auto; }
  .m-lane .who { grid-column: 1 / -1; padding-top: 0; }
  .m-result { min-height: 520px; }
  .m-sentence { margin-top: 32px; }
  .m-speak { padding-inline: 0; }
  .m-hold { padding: 20px 30px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .measure, .m-screen, .m-phrase .caret, .m-dot::after, .m-hold.is-held::after { transition: none; animation: none; }
}
/* Partie sombre tramée */
.dark { background: var(--ink); color: var(--dark-text);
  background-image: linear-gradient(rgba(242, 244, 239, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(242, 244, 239, .04) 1px, transparent 1px);
  background-size: 9px 9px; }
.dark .sub { color: var(--dark-muted); }
.dark-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.dark-split .f-text p { color: var(--dark-muted); }
.ledger { display: grid; border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--dark-line); background: rgba(242, 244, 239, .03); box-shadow: 0 0 80px -30px rgba(186, 243, 107, .35); }
.ledger-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--dark-line); font-size: 15px; }
.ledger-row:first-child { border-top: 0; }
.ledger-head { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dark-muted); }
.where { font-family: var(--font-mono); font-size: 12.5px; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.where.local { background: rgba(186, 243, 107, .12); color: var(--mint); box-shadow: inset 0 0 0 1px rgba(186, 243, 107, .25); }
.where.option { background: rgba(242, 244, 239, .06); color: var(--dark-muted); }
.uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.use { display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: var(--radius-l); background: rgba(242, 244, 239, .035); border: 1px solid var(--dark-line); }
.use .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(186, 243, 107, .1); color: var(--mint); box-shadow: 0 0 28px -6px rgba(186, 243, 107, .45); }
.use h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.use p { color: var(--dark-muted); font-size: 15px; }
.use .said { font-size: 14px; color: var(--dark-text); background: rgba(242, 244, 239, .05); border-radius: 10px; padding: 10px 12px; }
.uses-note { margin-top: 18px; color: #6F837E; font-size: 13.5px; }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 760px; margin: 40px auto 0; }
.faq details { border: 1px solid var(--dark-line); border-radius: 14px; padding: 0 18px; background: rgba(242, 244, 239, .03); }
.faq summary { cursor: pointer; list-style: none; padding-block: 16px; font-weight: 500; font-size: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; line-height: 1; border: 1px solid var(--dark-line); color: var(--dark-text); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 18px; color: var(--dark-muted); max-width: 64ch; font-size: 15px; }

/* Prise de rendez-vous */
.book { position: relative; overflow: hidden; isolation: isolate; }
.book::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 60% at 15% 80%, rgba(186, 243, 107, .25), transparent 70%), radial-gradient(50% 60% at 90% 20%, rgba(184, 213, 201, .7), transparent 70%), var(--paper); }
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.book-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; color: var(--muted); font-size: 15.5px; }
.book-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; }
.book-list li::before { content: "✓"; color: var(--accent-2); font-weight: 700; }
form.form { display: grid; gap: 14px; padding: 26px; border-radius: var(--radius-l); background: rgba(255, 255, 255, .85); backdrop-filter: blur(10px); border: 1px solid var(--line); box-shadow: var(--shadow); }
.field { display: grid; gap: 6px; }
.field label { font-size: 13.5px; font-weight: 600; }
.field input, .field select { font: 400 15.5px var(--font-sans); color: var(--text); background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; width: 100%; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.form-note { font-size: 12.5px; color: var(--muted); text-align: center; }
.done { padding: 14px 16px; border-radius: 12px; background: var(--mint-pale); font-size: 14.5px; }

/* Version B : vidéo */
.vhero { position: relative; margin-top: -76px; padding-block: 150px 72px; overflow: hidden; isolation: isolate; text-align: center; }
.vhero::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(55% 60% at 10% 25%, rgba(186, 243, 107, .30), transparent 70%), radial-gradient(55% 60% at 92% 18%, rgba(184, 213, 201, .75), transparent 70%), var(--paper); }
.vhero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(17, 28, 27, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 28, 27, .05) 1px, transparent 1px);
  background-size: 9px 9px; mask-image: linear-gradient(to bottom, #000 45%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent); }
.vhero .wrap { display: grid; gap: 22px; justify-items: center; }
.video { position: relative; width: 100%; max-width: 940px; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: var(--ink); box-shadow: var(--shadow), 0 0 0 10px rgba(255, 255, 255, .55); display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; color: var(--white); font: inherit; margin-top: 10px; }
.video::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(242,244,239,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(242,244,239,.05) 1px, transparent 1px); background-size: 9px 9px; }
.video .scene { position: absolute; inset: 0; display: grid; place-items: center; }
.video .play { position: relative; display: grid; gap: 14px; justify-items: center; padding-inline: 20px; text-align: center; }
.video .disc { width: 80px; height: 80px; border-radius: 50%; background: var(--mint); display: grid; place-items: center; box-shadow: 0 0 0 12px rgba(186, 243, 107, .16), 0 0 60px rgba(186, 243, 107, .45); }
.video .disc svg { margin-left: 5px; }
.video .vlabel { font-weight: 600; font-size: 17px; }
.video .vmeta { font-family: var(--font-mono); font-size: 12px; color: var(--seafoam); }
.video .chapters { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; gap: 6px; }
.video .chapters span { flex: 1; height: 3px; border-radius: 2px; background: rgba(242, 244, 239, .2); }
.video .chapters span:first-child { background: var(--mint); }
.vsl-note { padding: 12px 16px; border-radius: 12px; background: var(--todo-bg); color: var(--todo-fg); font-size: 14px; max-width: 940px; }

/* Pied de page */
footer { padding-block: 34px 40px; border-top: 1px solid var(--line); background: var(--paper); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center; }
footer p { color: var(--muted); font-size: 13.5px; }
footer .base { font-weight: 600; color: var(--text); }

@media (max-width: 960px) {
  .hero-grid, .feature, .dark-split, .book-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .feature.flip { grid-template-columns: minmax(0, 1fr); }
  .feature.flip .f-text { order: 0; }
  .uses { grid-template-columns: minmax(0, 1fr); }
  .rows { gap: 72px; }
  .nav a:not(.btn) { display: none; }
  .section { padding-block: 72px; }
  .float.f2 { right: 0; } .float.f1 { right: 0; } .float.f3 { left: 0; }
}
@media (max-width: 520px) {
  body { font-size: 15.5px; }
  .hero, .vhero { padding-block: 124px 48px; }
  .row2 { grid-template-columns: minmax(0, 1fr); }
  .logo { width: 92px; }
  .navpill { padding-left: 16px; }
  .float { min-width: 0; font-size: 12px; padding: 9px 11px; }
  .float.f2 { display: none; }
  .f-visual { padding: 16px; }
  form.form { padding: 20px; }
  .pill .meta { display: none; }
  .hero-copy .cta-row .btn { width: 100%; }
  .for { font-size: 12.5px; padding: 5px 12px 5px 9px; }
  .video .vmeta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pill .bars i { animation: none; height: 14px; }
  .float { animation: none; }
  .btn { transition: none; }
}

/* Agenda Cal.com intégré à la place du formulaire de la maquette. */
.cal-box { min-height: 560px; border-radius: var(--radius-l); background: rgba(255, 255, 255, .85); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.cal-wait { padding: 26px; font-size: 14.5px; color: var(--muted); text-align: center; }