/* Number go up · page produit de Sovran.
   Identité Sovran : noir, blanc cassé, Archivo, accent fluo très ponctuel.
   Mise en page : grille de 12 colonnes pleine largeur, grands titres alignés sur la marge.
   Pas de filets ni de légendes en petite typo système : on sépare par l'espace et par des aplats. */
:root {
  --bg: #000;
  --elev: #0c0c0c;
  --elev-2: #151515;
  --ink: #ededea;
  --ink-soft: #b3b3ad;
  --ink-mute: #77776f;
  --accent: #d9ff3a;
  --claude: #d97757;
  --supabase: #3fcf8e;
  --font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --m: clamp(20px, 3.6vw, 56px);     /* marge de page */
  --gut: clamp(12px, 1.5vw, 24px);   /* gouttière de la grille */
  --ease: cubic-bezier(.22, 1, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* lu par les moteurs et les lecteurs d'écran, invisible */
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--accent); color: #000; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); }

/* ---------- En-tête ---------- */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; gap: 28px; padding: 18px var(--m); transition: background .3s var(--ease); }
.bar.on { background: rgba(0, 0, 0, .82); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); }
.brand { display: flex; align-items: center; color: var(--ink); }
.brand .crochet { height: 26px; transform: none; }
.brand .crochet .arr { animation: none; }   /* la flèche ne monte qu'au survol : le héros anime déjà le logo */
@media (prefers-reduced-motion: no-preference) { .brand:hover .crochet .arr { animation: monte 2.4s cubic-bezier(.65, 0, .35, 1) infinite; } }
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; font-size: 15px; color: var(--ink-soft); white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav .nav-demo { padding: 8px 16px; margin: -8px 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ink-mute); color: var(--ink); transition: box-shadow .2s var(--ease); }   /* un bouton, pas un lien : la démo se mérite d'un email */
.nav .nav-demo:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px; background: var(--ink); color: #000; font-weight: 600; font-size: 15px; transition: background .2s var(--ease); white-space: nowrap; }
.pill:hover { background: var(--accent); }

/* ---------- Héro ---------- */
.hero { padding: clamp(150px, 16vw, 232px) var(--m) 0; }   /* deux fois l'espace sous la barre : la page respire */
.kicker { font-size: 15px; color: var(--ink-mute); margin-bottom: 18px; }
.title { font-size: clamp(64px, 10.6vw, 202px); line-height: .86; letter-spacing: -.055em; font-weight: 500; margin-left: -.05em; white-space: nowrap; }
/* Le logo : « Number go » puis des crochets où la flèche monte, sort en haut à droite et revient par le bas. */
.logo { display: inline-flex; align-items: center; gap: .14em; }
.crochet { height: .92em; width: auto; flex: none; transform: translateY(.04em); }
.crochet .arr { color: var(--accent); animation: monte 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes monte { 0%, 45%, 100% { transform: translate(0, 0); opacity: 1; } 70% { transform: translate(180px, -180px); opacity: 0; } 71% { transform: translate(-180px, 180px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .crochet .arr { animation: none; } }
.hero-row { margin-top: clamp(22px, 2.4vw, 36px); align-items: end; }
.lead { grid-column: 1 / span 6; font-size: clamp(21px, 1.75vw, 28px); line-height: 1.22; letter-spacing: -.015em; max-width: 30ch; }
.hero-side { grid-column: 8 / span 5; display: flex; flex-direction: column; align-items: flex-end; gap: 22px; text-align: right; }
/* Accroche de l'accueil : plus large, trois lignes au plus ; le « Ready for » se range dans les quatre dernières colonnes. */
.lead-w { grid-column: 1 / span 8; max-width: 62ch; }
.lead-w + .hero-side { grid-column: 9 / span 4; }
.ready { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
.ready > span { font-size: 15px; color: var(--ink-mute); }
.mark { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.mark svg { width: 28px; height: 28px; flex: none; }

/* Haut de page : l'app à gauche (2/3), Claude à droite (1/3). Quatre scènes jouées l'une après l'autre : un bulletin
   de souscription qui crée une ligne et fait monter le NAV, un reporting qui ajoute un point de MRR, une migration
   Airtable qui range 43 fichiers et relève ce qu'il faut renouveler, un acte de cession qui donne le net de chaque
   associé. Les demandes s'empilent à droite, l'app suit à gauche. Investi en pointillé, pour le lire sans la couleur. */
.live { margin-top: clamp(32px, 3.6vw, 56px); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gut); height: clamp(540px, 42vw, 640px); }
.lv-app, .lv-cl { background: var(--elev); border-radius: 20px; min-height: 0; }
.lv-app { display: flex; flex-direction: column; min-width: 0; padding: clamp(18px, 2.2vw, 32px); }
.lv-cl { min-width: 0; }   /* les onglets qui défilent ne doivent pas élargir la colonne */
.lv-tabs { position: relative; display: flex; gap: 4px; margin: -6px 0 0 -10px; overflow-x: auto; scrollbar-width: none; }   /* trop étroit pour tous les onglets : ils défilent, l'onglet en cours reste en vue */
.lv-tabs::-webkit-scrollbar { display: none; }
.lv-tabs span { flex: none; white-space: nowrap; position: relative; overflow: hidden; font-size: 14px; color: var(--ink-mute); border-radius: 999px; padding: 7px 14px; transition: color .3s var(--ease), background .3s var(--ease); }
.lv-tabs span.on { color: var(--ink); background: #1a1a18; }
.lv-tabs i { position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.lv-tabs span.on i { animation: lv-prog var(--d, 11s) linear forwards; }
.live.still .lv-tabs i { display: none; }
@keyframes lv-prog { to { transform: scaleX(1); } }
.lv-scenes { position: relative; flex: 1; min-height: 0; margin-top: clamp(16px, 2vw, 26px); overflow: hidden; }
.lv-s { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s linear .45s; }
.lv-s.on { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.lv-hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.lv-k { font-size: 14px; color: var(--ink-mute); margin-bottom: 8px; }
.lv-n { font-size: clamp(34px, 4.6vw, 76px); line-height: .95; letter-spacing: -.045em; font-weight: 500; white-space: nowrap; }
.lv-n .cur { color: var(--ink-mute); }
.lv-sub { margin-top: 10px; font-size: 15px; color: var(--ink-soft); }
.lv-r { text-align: right; }
.lv-i { font-size: clamp(22px, 2.3vw, 36px); line-height: 1; letter-spacing: -.03em; font-weight: 500; }
.lv-i .cur { color: var(--ink-mute); }
.lv-dlt { color: var(--accent); opacity: 0; transition: opacity .4s var(--ease); }
.lv-kpi.done .lv-dlt { opacity: 1; }
.lv-chart { position: relative; flex: 1; min-height: 120px; margin-top: 18px; }
.lv-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; font-family: var(--font); }
.lv-chart .gl { stroke: #1e1e1c; }
.lv-chart .gt, .lv-chart .xt { fill: var(--ink-mute); font-size: 12px; }
.lv-chart .xt { text-anchor: middle; }
.lv-chart .inv { fill: none; stroke: #8a8a82; stroke-width: 1.5; stroke-dasharray: 4 4; }
.lv-chart .tv { fill: none; stroke: var(--accent); stroke-width: 2; }
.lv-chart .mrr { fill: none; stroke: #8f93f5; stroke-width: 2; stroke-linejoin: round; }
.lv-chart .mk { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .3s var(--ease), transform .5s var(--ease); }
.lv-chart .mk.on { opacity: 1; transform: none; }
.lv-chart .mk circle { fill: var(--elev); stroke: var(--accent); stroke-width: 2; }
.lv-chart .mk.dead circle { stroke: var(--ink-mute); }
.lv-chart .mk.q circle { stroke: #8f93f5; }
.lv-chart .mk text { font-size: 14px; text-anchor: middle; }
.lv-chart .hd { fill: var(--accent); filter: drop-shadow(0 0 8px rgba(217, 255, 58, .6)); }
.lv-chart .tk { opacity: 0; transition: opacity .25s var(--ease); }
.lv-chart .tk.on { opacity: 1; }
.lv-chart .tk rect { fill: #161614; stroke: #2a2a26; }
.lv-chart .tk text { fill: var(--ink); font-size: 13px; text-anchor: middle; }
.lv-rows { flex: none; height: 104px; overflow: hidden; margin-top: 14px; }
.lv-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 16px; align-items: center; height: 48px; margin-bottom: 4px; padding: 0 14px; border-radius: 12px; background: #141412; font-size: 14px; color: var(--ink-mute); }
.lv-row b { color: var(--ink); font-weight: 500; margin-right: 6px; }
.lv-row span:nth-child(2) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lv-new { height: 0; margin-bottom: 0; opacity: 0; transition: height .5s var(--ease), margin .5s var(--ease), opacity .5s var(--ease), background 1.2s var(--ease); }
.done .lv-new { height: 48px; margin-bottom: 4px; opacity: 1; }
.flash .lv-new { background: #23240f; }
.lv-dos { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); gap: clamp(14px, 1.8vw, 24px); }
.lv-tree { min-height: 0; overflow: hidden; padding: 14px 12px; border-radius: 14px; background: #121210; }
.lv-ent { margin-bottom: 14px; font-size: 12px; color: var(--ink-mute); }
.lv-ent b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.lv-fold { list-style: none; margin: 6px 0 0; padding: 0; }
.lv-fold li { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 0; overflow: hidden; opacity: 0; font-size: 13px; color: var(--ink-soft); white-space: nowrap; transition: height .3s var(--ease), opacity .3s var(--ease); }
.lv-fold li.on { height: 29px; opacity: 1; }
.lv-fold li span { flex: none; color: var(--ink-mute); }
.lv-dz { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.lv-dz-h { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.lv-st { display: flex; gap: clamp(18px, 3vw, 44px); margin: 12px 0 12px; font-size: 12px; color: var(--ink-mute); }
.lv-st b { display: block; font-size: clamp(22px, 2vw, 30px); line-height: 1.15; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.lv-st i { font-style: normal; color: var(--ink-mute); }
.lv-st .lv-mis { color: #ec6a5e; }
.lv-dl { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 3px; }
.lv-dl p { flex: none; display: flex; align-items: center; gap: 10px; height: 33px; padding: 0 8px; border-radius: 10px; font-size: 13px; white-space: nowrap; transition: background .6s var(--ease); }
.lv-dl p.fl { background: #1c1d10; }
.lv-dl b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--ink); }
.lv-dl em { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-style: normal; color: var(--ink-mute); opacity: 0; transition: opacity .3s var(--ease); }
.lv-dl p.ok em, .lv-dl p.no em, .lv-dl p.got em { opacity: 1; }
.lv-dl .pl { flex: none; width: 66px; padding: 3px 0; border-radius: 999px; text-align: center; font-size: 11.5px; color: #ec6a5e; background: #2a1412; box-shadow: inset 0 0 0 1px #5a2621; transition: color .3s, background .3s, box-shadow .3s; }
.lv-dl p.ok .pl { color: #3dba84; background: #10261a; box-shadow: inset 0 0 0 1px #1f5a3a; }
.lv-dl p.op .pl { color: var(--ink-mute); background: none; box-shadow: inset 0 0 0 1px #2a2a26; }
.lv-dl p.no b, .lv-dl p.no em, .lv-dl p.op b { font-style: italic; color: var(--ink-soft); }
.lv-list { display: flex; flex-direction: column; justify-content: flex-end; max-height: 154px; overflow: hidden; margin: 0 0 2px 21px; }
.lv-list p { flex: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; line-height: 22px; color: var(--ink-soft); animation: lv-in .2s var(--ease) both; }
.lv-list p::before { content: '+ '; color: var(--ink-mute); }
/* Scène Exits : la vue de pointage d'une sortie. En-tête et chiffres, tuiles, puis la table des associés, rognée en bas. */
.lv-xh { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 18px); }
.lv-logo { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #1c1c1a; font-size: 11px; font-weight: 600; color: var(--ink-mute); }
.lv-xt { flex: 1; min-width: 0; }
.lv-tag { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 999px; vertical-align: 2px; font-size: 11px; font-weight: 500; color: #000; background: var(--accent); white-space: nowrap; }
.lv-xt .lv-k { margin: 2px 0 0; font-size: 13px; }
.lv-xf { flex: none; display: flex; gap: clamp(14px, 2.2vw, 30px); text-align: right; }
.lv-xf span { display: block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
.lv-xf b { display: block; margin-top: 5px; font-size: clamp(16px, 1.55vw, 22px); line-height: 1.1; font-weight: 500; letter-spacing: -.02em; white-space: nowrap; }
.lv-xf .x-m { color: #3dba84; }
.lv-xf small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-mute); }
.lv-xk { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 16px; }
.lv-xk p { min-width: 0; padding: 11px 14px; border-radius: 12px; background: #121210; font-size: 12px; color: var(--ink-mute); }
.lv-xk b { display: block; margin: 4px 0 2px; font-size: clamp(16px, 1.45vw, 20px); font-weight: 500; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.lv-xk b i { font-style: normal; color: var(--ink-mute); }
.lv-xk em { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-style: normal; }
.lv-xg { flex: 1; min-height: 0; overflow: hidden; margin-top: 14px; }
.lv-xr { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; align-items: center; margin: 0; padding: 7px 10px; border-radius: 10px; font-size: 13px; transition: background .6s var(--ease); }
.lv-xr.hd { padding-top: 0; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); }
.lv-xr > span { min-width: 0; }
.lv-xr > span:nth-child(n+2) { text-align: right; }
.lv-xr b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; color: var(--ink); }
.lv-xr b.e { font-weight: 400; color: var(--ink-mute); }
.lv-xr small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; color: var(--ink-mute); }
.lv-xr.fl { background: #1c1d10; }
/* Levée d'un fonds et distribution d'un fonds : le même cadre que la sortie (en-tête, tuiles, tableau) */
.lv-fbar { flex: none; height: 6px; margin-top: 14px; border-radius: 6px; background: #1c1c1a; overflow: hidden; }
.lv-fbar i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--accent); }
.lv-xr b.lv-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; }
.lv-pill.ok { color: #3dba84; background: rgba(61, 186, 132, .12); }
.lv-pill.soft { color: #e3b341; background: rgba(227, 179, 65, .12); }
.lv-pill.out { color: var(--ink-mute); background: #1c1c1a; }
.lv-xr.out > span:first-child b, .lv-xr.out > span:nth-child(3) b { text-decoration: line-through; color: var(--ink-mute); }
.lv-fund .lv-xr { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, .9fr); }
.lv-fund .lv-xr > span:nth-child(2) { text-align: left; }
.lv-cl { display: flex; flex-direction: column; padding: clamp(16px, 1.8vw, 24px); }
.lv-cl-h { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.lv-cl-h svg { width: 18px; height: 18px; flex: none; color: var(--claude); }
.lv-cl-h.busy svg { animation: lv-spin 2.4s linear infinite; }
.lv-run { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; color: var(--ink-mute); opacity: 0; transition: opacity .25s var(--ease); }
.lv-cl-h.busy .lv-run { opacity: 1; animation: lv-run .3s var(--ease) both; }
@keyframes lv-run { from { opacity: 0; transform: translateX(-4px); } }
.lv-run b { font-weight: 500; color: var(--ink-soft); }
.lv-run .dots i { display: inline-block; width: 3px; height: 3px; margin-left: 3px; vertical-align: 2px; border-radius: 50%; background: currentColor; animation: lv-dot 1.2s ease-in-out infinite both; }
.lv-run .dots i:first-child { margin-left: 4px; }
.lv-run .dots i:nth-child(2) { animation-delay: .2s; }
.lv-run .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes lv-dot { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
.lv-msgs { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; margin: 18px 0; }   /* marge, pas de padding : ce qui déborde est coupé sous l'en-tête */
.lv-msgs > * { animation: lv-in .4s var(--ease) both; }
@keyframes lv-in { from { opacity: 0; transform: translateY(8px); } }
.lv-u { align-self: flex-end; max-width: 92%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: #1c1c1a; font-size: 14px; line-height: 1.45; }
.lv-file { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: #262624; font-size: 12.5px; color: var(--ink-soft); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lv-file b { flex: none; font-size: 10px; font-weight: 700; color: #000; background: var(--ink-soft); border-radius: 4px; padding: 2px 4px; }
.lv-file svg { flex: none; width: 16px; height: 16px; color: var(--ink-soft); }
.lv-a { display: flex; flex-direction: column; gap: 7px; }
.lv-step { display: flex; align-items: center; gap: 9px; font-size: 13px; line-height: 1.35; color: var(--ink-mute); animation: lv-in .35s var(--ease) both; }
.lv-step .ic { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink-mute); border-right-color: transparent; animation: lv-spin .8s linear infinite; }
.lv-step.ok .ic { animation: none; border: 0; position: relative; }
.lv-step.ok .ic::before { content: '✓'; position: absolute; inset: -3px 0 0; font-size: 12px; color: var(--accent); }
@keyframes lv-spin { to { transform: rotate(360deg); } }
.lv-step svg { flex: none; width: 14px; height: 14px; color: var(--ink-soft); }
.lv-mail { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 4px 21px; padding: 10px 12px; border-radius: 12px; background: #1c1c1a; animation: lv-in .35s var(--ease) both; }
.lv-mail-t { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.lv-mail-t svg { flex: none; width: 15px; height: 15px; color: var(--ink-soft); }
.lv-mail-t b { font-weight: 500; }
.lv-mail-f { padding-left: 23px; font-size: 12.5px; color: var(--ink-mute); }
.lv-mail .lv-file { margin-top: 6px; }
.lv-doc { gap: 4px; }
.lv-doc .lv-mail-t { margin-bottom: 3px; }
.lv-doc .lv-mail-t i { flex: none; font-style: normal; font-size: 10px; font-weight: 700; color: #000; background: var(--ink-soft); border-radius: 4px; padding: 2px 4px; }
.lv-doc .lv-mail-t b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lv-doc-r { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.4; }
.lv-doc-r span { flex: none; width: 96px; color: var(--ink-mute); }
.lv-doc-r b { min-width: 0; font-weight: 500; color: var(--ink-soft); }
.lv-txt { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.lv-in { display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 10px 14px; border-radius: 14px; background: #141412; box-shadow: inset 0 0 0 1px #262624; transition: box-shadow .2s var(--ease); }
.lv-in.has { box-shadow: inset 0 0 0 1px #3a3a35; }
.lv-in-f:empty { display: none; }
.lv-in-f .lv-file { display: inline-flex; margin: 0; max-width: 100%; animation: lv-in .3s var(--ease) both; }
.lv-in-r { display: flex; align-items: flex-end; gap: 10px; }
.lv-in-t { flex: 1; min-width: 0; min-height: 28px; padding-top: 4px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.lv-in-t .ph { color: var(--ink-mute); }
.lv-in-t .caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--ink); }
.lv-send { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #262624; color: var(--ink-mute); font-size: 14px; font-weight: 600; transition: background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease); }
.lv-in.has .lv-send { background: var(--accent); color: #000; }
.lv-in.go .lv-send { transform: scale(.88); }
@media (max-width: 1100px) {
  .live { grid-template-columns: 1fr; height: auto; }
  .lv-app { height: 520px; }
  .lv-cl { height: 340px; }
}


/* ---------- Sections ---------- */
.sec { padding: clamp(110px, 12vw, 190px) var(--m) 0; }
.sec-h { align-items: start; margin-bottom: clamp(36px, 4.4vw, 64px); }
.sec-t { grid-column: 1 / span 8; font-size: clamp(46px, 6.2vw, 108px); line-height: .9; letter-spacing: -.045em; font-weight: 500; }
.sec-a { grid-column: 9 / span 4; justify-self: end; text-align: right; color: var(--ink-soft); font-size: 17px; line-height: 1.4; padding-top: 10px; max-width: 30ch; }

/* Agent-Native App : la bande jaune, le positionnement du produit */
.ps { margin-top: clamp(110px, 12vw, 190px); background: var(--accent); color: #000; padding: clamp(64px, 8vw, 128px) var(--m) clamp(60px, 7vw, 112px); }
.ps ::selection { background: #000; color: var(--accent); }
.ps-k { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; letter-spacing: -.01em; margin-bottom: clamp(20px, 2.4vw, 34px); }
.ps-k .crochet { height: 1.25em; transform: none; }   /* le crochet du logo, en noir sur le jaune */
.ps .crochet .arr { color: #000; }
.ps-t { grid-column: 1 / -1; font-size: clamp(54px, 8.6vw, 164px); line-height: .88; letter-spacing: -.052em; font-weight: 500; margin-left: -.04em; }
.ps-l { grid-column: 1 / span 8; margin-top: clamp(26px, 3vw, 44px); font-size: clamp(22px, 2vw, 30px); line-height: 1.3; letter-spacing: -.015em; max-width: 40ch; }
.ps-c { position: relative; margin-top: clamp(56px, 6.4vw, 104px); row-gap: 40px; }
.ps-arrow { position: absolute; right: 0; bottom: calc(100% + clamp(20px, 2.4vw, 40px)); width: clamp(220px, 25vw, 500px); height: auto; color: #000; opacity: .075; pointer-events: none; }   /* la flèche du logo, ton sur ton */
.ps-c > div { grid-column: span 4; }
.ps-c h3 { font-size: clamp(24px, 2.1vw, 32px); line-height: 1.05; letter-spacing: -.025em; font-weight: 500; margin-bottom: 14px; }
.ps-c p { font-size: 17px; line-height: 1.5; color: rgba(0, 0, 0, .72); max-width: 40ch; }
.ps-c a { display: inline-block; margin-top: 16px; font-size: 17px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }

/* Modules : une carte par module, capture en haut */
.mods .mod { grid-column: span 6; background: var(--elev); border-radius: 20px; padding: 14px 14px 28px; display: flex; flex-direction: column; gap: 22px; }
/* Carte composée : le panneau de l'app plein cadre, en 16:9. Une liste trop longue est rognée en bas et son cadre
   (.pane) redessine les coins arrondis et le bord de l'app. --w = largeur du panneau dans l'app (px CSS) : rayon
   (18 px) et gouttière (20 px) de l'app suivent l'échelle de la capture. */
.comp { aspect-ratio: 16 / 9; display: flex; flex-direction: column; container-type: inline-size; }
.pane { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; background: #222225; border-radius: calc(100cqi * 18 / var(--w)); }
.pane::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--ring-w, 1px) var(--ring, #333338); pointer-events: none; }
.pane img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pane-nat { flex: none; }   /* panneau entier, à sa hauteur ; le suivant prend la place qui reste */
.pane-nat img { height: auto; }
.pane + .pane { margin-top: calc(100cqi * 20 / var(--w)); }
.mod-b { padding: 0 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; align-items: start; }
.mod h3 { font-size: clamp(26px, 2.4vw, 38px); line-height: 1; letter-spacing: -.03em; font-weight: 500; }
.mod p { color: var(--ink-soft); font-size: 16px; line-height: 1.5; }
/* La sixième case des modules, sur le jaune : l'outil s'agrandit à la demande. Les add-ons en préparation
   dans un bloc plus léger, en trois colonnes. */
.mod.more { background: var(--accent); color: #000; justify-content: space-between; gap: clamp(20px, 2vw, 28px); padding: clamp(26px, 2.6vw, 40px); transition: background .2s var(--ease); }
.mod.more:hover { background: #e3ff6b; }
.mod.more ::selection { background: #000; color: var(--accent); }
.mod.more h3 { font-size: clamp(40px, 4vw, 64px); line-height: .92; letter-spacing: -.05em; }
.mod.more .more-t p { margin-top: clamp(12px, 1.2vw, 18px); color: rgba(0, 0, 0, .72); font-size: 17px; line-height: 1.45; max-width: 50ch; }
.more-t strong { color: #000; font-weight: 600; }
.more-soon { background: rgba(0, 0, 0, .07); border-radius: 14px; padding: clamp(16px, 1.6vw, 22px); }
.mod.more .more-k { color: rgba(0, 0, 0, .55); font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.more-ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); }
.more-ul li { display: flex; flex-direction: column; gap: 4px; }
.more-ul i { font-style: normal; font-size: 12px; color: rgba(0, 0, 0, .5); }
.more-ul b { font-size: 17px; line-height: 1.2; letter-spacing: -.01em; font-weight: 600; }
.more-ul span { font-size: 14px; line-height: 1.4; color: rgba(0, 0, 0, .68); }
.more-l { font-size: 17px; font-weight: 600; }
.more-l span { display: inline-block; transition: transform .2s var(--ease); }
.mod.more:hover .more-l span { transform: translateX(4px); }
@media (max-width: 640px) { .more-ul { grid-template-columns: 1fr; } }
.nav a[aria-current] { color: var(--ink); }
.inc li a:hover b { color: var(--accent); }

/* Ready for Claude & Supabase */
.p { grid-column: 1 / -1; background: var(--elev); border-radius: 20px; padding: clamp(26px, 2.8vw, 44px); }
.p .mark { font-size: clamp(34px, 3.2vw, 52px); gap: 16px; }
.p .mark svg { width: clamp(38px, 3.4vw, 54px); height: clamp(38px, 3.4vw, 54px); }
.claude-l > p, .supa-l > p { color: var(--ink-soft); font-size: 18px; line-height: 1.5; max-width: 46ch; }
.claude { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); }
.claude-l { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.claude-r { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; }   /* les cartes s'étirent jusqu'au bas du texte de gauche */
.req { background: var(--elev-2); border-radius: 14px; padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.req-t { display: flex; gap: 8px; color: var(--ink-soft); }
.req-t svg { width: 18px; height: 18px; }
.req-a { font-family: var(--mono); font-size: 18px; line-height: 1.4; color: var(--ink); }
.req-a::before { content: '> '; color: var(--claude); }
.req-o { font-size: 12px; line-height: 1.5; color: var(--ink-mute); }
/* Section Claude : une carte qui a son clip porte un petit ▶ ; au survol, le clip prend la place du texte de la colonne
   de gauche, sous le titre (script en bas de index.html). Le bloc garde sa taille, aucune carte n'est cachée. */
.claude-l { position: relative; }
.claude-l > :not(.mark):not(.req-pv) { transition: opacity .22s var(--ease); }
.claude-l.pv-on > :not(.mark):not(.req-pv) { opacity: 0; }
.req[data-v] .req-t::after { content: ''; margin-left: auto; align-self: center; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; opacity: .55; transition: opacity .2s var(--ease); }
.req[data-v] { transition: background .2s var(--ease); }
.req[data-v]:hover { background: #1c1c1c; }   /* la carte dont le clip joue, à peine plus claire */
.req[data-v]:hover .req-t::after { opacity: 1; }
.req-pv { position: absolute; left: 0; right: 0; top: 0; margin: 0; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--elev-2); box-shadow: 0 0 0 1px #2a2a2a; opacity: 0; transform: translateY(6px); transition: opacity .22s var(--ease), transform .22s var(--ease); pointer-events: none; }
.claude-l.pv-on .req-pv { opacity: 1; transform: none; }
.req-pv video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .req-pv { transform: none; } }
@media (hover: none) { .req[data-v] .req-t::after { display: none; } }   /* pas de survol sur un écran tactile : pas de promesse de clip */
.tools { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.tools > span { font-size: 15px; color: var(--ink-mute); }
.tools-i { display: flex; flex-wrap: wrap; gap: 18px; color: var(--ink-soft); }
.tools-i svg { width: 26px; height: 26px; }
.uc-cta { align-self: flex-start; margin-top: 8px; }   /* le bouton d'achat, la flèche à la place du prix */
.supa { margin-top: var(--gut); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.supa-l { display: flex; flex-direction: column; gap: 22px; }
/* Une fois branché : la sécurité, chez l'acheteur, aux standards de Supabase */
.supa-then { margin-top: 10px; }
.supa-then h3 { font-size: clamp(22px, 1.8vw, 28px); line-height: 1.08; letter-spacing: -.03em; font-weight: 500; max-width: 21ch; }
.supa-then p { margin-top: 14px; color: var(--ink-soft); font-size: 18px; line-height: 1.5; max-width: 46ch; }
.supa-r { display: flex; flex-direction: column; gap: 12px; }
.safe { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.safe li { background: var(--elev-2); border-radius: 14px; padding: 18px 18px 20px; display: flex; flex-direction: column; }
.safe svg { width: 28px; height: 28px; color: var(--ink); margin-bottom: 18px; }
.safe b { font-size: 17px; line-height: 1.2; letter-spacing: -.015em; font-weight: 500; }
.safe span { margin-top: 4px; font-size: 14px; line-height: 1.35; color: var(--ink-mute); }

/* Prix : le titre vit dans le panneau, un seul bouton d'achat qui porte le prix */
.price { background: var(--elev); border-radius: 24px; padding: clamp(30px, 4vw, 64px); align-items: end; }
.price-l { grid-column: span 6; }
.price-t { font-size: clamp(40px, 4.6vw, 84px); line-height: .92; letter-spacing: -.045em; font-weight: 500; }
.price-s { margin-top: 20px; color: var(--ink-soft); font-size: 18px; line-height: 1.45; max-width: 32ch; }
.price-r { grid-column: 8 / span 5; padding-bottom: 6px; }
.inc { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.inc li { font-size: 17px; line-height: 1.4; color: var(--ink-soft); padding-left: 26px; position: relative; }
.inc li::before { content: '+'; position: absolute; left: 0; top: -1px; color: var(--ink); font-weight: 600; }
.inc li b { color: var(--ink); font-weight: 500; }
.buy-w { margin-top: clamp(34px, 3.4vw, 52px); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.buy { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-width: min(100%, 340px); padding: 18px 26px; border-radius: 999px; background: var(--accent); color: #000; font-size: 18px; font-weight: 600; transition: background .2s var(--ease); }
.buy:hover { background: var(--ink); }
.buy-p { font-weight: 500; padding-left: 20px; box-shadow: inset 1px 0 0 rgba(0, 0, 0, .22); }
.buy-n { font-size: 14px; color: var(--ink-mute); padding-left: 26px; }
.buy.sm { min-width: 0; gap: 14px; padding: 10px 20px; font-size: 15px; }   /* le même bouton, à la taille du header */
.buy.sm .buy-p { padding-left: 14px; }
/* Bouton Buy en bêta (buy.js) : le vrai prix, une étiquette de remise qui bouge de temps en temps, « Email copied » à la
   place du libellé après la copie, et une bulle dessous qui dit d'écrire. */
.buy { position: relative; }
.buy > span:not(.buy-tag):not(.buy-ok) { transition: opacity .25s var(--ease), transform .25s var(--ease); }
.buy-tag { position: absolute; top: -12px; right: 16px; padding: 3px 9px; border-radius: 999px; background: var(--ink); color: #000; font-size: 11px; font-weight: 600; line-height: 1.3; white-space: nowrap; transform: rotate(3deg); pointer-events: none; }
.buy.sm .buy-tag { top: -10px; right: -12px; padding: 2px 7px; font-size: 10px; }
.buy-ok { position: absolute; inset: 0; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; transform: translateY(8px); transition: opacity .25s var(--ease), transform .25s var(--ease); pointer-events: none; }
.buy-ok svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.buy.copied { background: var(--ink); }
.buy.copied > span:not(.buy-tag):not(.buy-ok) { opacity: 0; transform: translateY(-8px); }
.buy.copied .buy-ok { opacity: 1; transform: none; }
.buy.copied .buy-ok path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: buy-draw .45s .12s var(--ease) forwards; }
@keyframes bp-stamp { from { opacity: 0; transform: rotate(-8deg) scale(1.7); } to { opacity: 1; transform: rotate(-2deg); } }
@keyframes bp-glow { from { box-shadow: 0 0 0 0 rgba(217, 255, 58, .45); } to { box-shadow: 0 0 0 10px rgba(217, 255, 58, 0); } }
@keyframes bp-in { from { opacity: 0; transform: translateY(-12px) scale(.9) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
@keyframes bp-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bp-time { to { transform: scaleX(0); } }
@keyframes buy-draw { to { stroke-dashoffset: 0; } }
@keyframes buy-tag { 0%, 84%, 100% { transform: rotate(3deg); } 88% { transform: rotate(-6deg) translateY(-2px); } 92% { transform: rotate(8deg); } 96% { transform: rotate(1deg); } }
@media (prefers-reduced-motion: no-preference) { .buy-tag { animation: buy-tag 6s ease-in-out infinite; } }

/* Pied */
.end { padding: clamp(120px, 13vw, 200px) var(--m) 0; }
.end-t { grid-column: 1 / -1; font-size: clamp(56px, 9vw, 168px); line-height: .86; letter-spacing: -.05em; font-weight: 500; }
.foot { margin-top: clamp(90px, 10vw, 150px); padding: 28px var(--m) 36px; background: var(--elev); color: var(--ink-mute); font-size: 14px; line-height: 1.6; }
.foot .f1 { grid-column: span 5; } .foot .f2 { grid-column: span 4; } .foot .f3 { grid-column: span 3; text-align: right; padding-top: 38px; }
.foot a:hover { color: var(--ink); }
/* Une ligne de logos de même hauteur (26 + 12 px) au-dessus de f1 et f2 : les trois textes partent de la même ligne. */
.f-logo, .f-marks { display: flex; align-items: center; height: 26px; margin-bottom: 12px; }
.f-logo { width: fit-content; gap: 10px; color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
.f-logo img { width: 26px; height: 26px; }
.f-marks { gap: 14px; }
.f-marks svg { width: 22px; height: 22px; }

/* Page des add-ons : un panneau par add-on, la demande sur mesure en jaune */
.ao-sec { padding-top: clamp(56px, 6vw, 96px); }
.ao-list { display: flex; flex-direction: column; gap: var(--gut); }
.ao { background: var(--elev); border-radius: 20px; padding: clamp(26px, 2.8vw, 44px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.ao-l { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ao-tag { font-size: 14px; font-weight: 600; color: #000; background: var(--ink-soft); border-radius: 999px; padding: 6px 14px; }
.ao h2 { font-size: clamp(38px, 4vw, 68px); line-height: .95; letter-spacing: -.045em; font-weight: 500; }
.ao-l p { color: var(--ink-soft); font-size: 18px; line-height: 1.5; max-width: 46ch; }
.ao-r { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Ce que fait un add-on : des tuiles (titre, une phrase), et pour la due diligence ce qu'elle lit puis ses six axes,
   chacun avec sa source. */
.ft { padding: 18px 18px 20px; border-radius: 14px; background: var(--elev-2); }
.ft b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.ft p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-mute); }
.ao-k { font-size: 14px; color: var(--ink-mute); margin-bottom: 12px; }
.ao-dd { grid-template-columns: 1fr; gap: 26px; }
.dd-src { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dd-src li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--elev-2); font-size: 15px; }
.dd-src svg { width: 16px; height: 16px; color: var(--ink-soft); }
.dd-ax { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dd-ax li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 18px 16px; border-radius: 14px; background: var(--elev-2); }
.dd-ax b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.dd-ax span { font-size: 14px; line-height: 1.5; color: var(--ink-mute); }
.dd-ax i { margin-top: 4px; padding: 3px 9px; border-radius: 6px; background: #222220; font-size: 12px; font-style: normal; color: var(--ink-soft); }
.ao-ask { background: var(--accent); color: #000; border-radius: 20px; padding: clamp(32px, 4vw, 64px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
.ao-ask ::selection { background: #000; color: var(--accent); }
.ao-ask h2 { font-size: clamp(46px, 6.2vw, 108px); line-height: .9; letter-spacing: -.05em; font-weight: 500; }
.ao-ask-l p { margin-top: clamp(20px, 2.4vw, 32px); font-size: clamp(19px, 1.6vw, 24px); line-height: 1.35; letter-spacing: -.01em; max-width: 40ch; }
.ao-ask-r { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ao-ask-btn { display: inline-flex; gap: 10px; padding: 18px 28px; border-radius: 999px; background: #000; color: var(--accent); font-size: 18px; font-weight: 600; transition: background .2s var(--ease), color .2s var(--ease); }
.ao-ask-btn:hover { background: var(--ink); color: #000; }

/* Page Demo : un email, puis la démo (formulaire Netlify « ngu-demo ») */
/* Cadre d'une capture d'écran de l'app (fond de la page Demo) : coins arrondis, l'image remplit le cadre sans se déformer. */
.shot { margin: 0; border-radius: 16px; overflow: hidden; background: var(--elev); box-shadow: 0 0 0 1px #1c1c1c, 0 40px 80px -30px rgba(0, 0, 0, .9); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
/* L'outil en fond, dans sa fenêtre (le cadre .shot), à peu près à l'échelle réelle et à peine visible :
   il se devine derrière le titre et le formulaire. */
.try-main { position: relative; isolation: isolate; }
.try-bg { position: absolute; z-index: -1; top: clamp(150px, 15vw, 210px); right: var(--m); width: min(1120px, 66vw); opacity: .22; -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 92%); mask-image: linear-gradient(to bottom, #000 45%, transparent 92%); pointer-events: none; }
.try-bg .shot { aspect-ratio: 16 / 10; }
.try-sec { padding-top: clamp(48px, 5vw, 80px); }
.try { background: var(--accent); color: #000; border-radius: 20px; padding: clamp(26px, 2.8vw, 44px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: start; }   /* sur le jaune, comme la carte Add-ons */
.try ::selection { background: #000; color: var(--accent); }
.try-f { display: flex; flex-direction: column; gap: 14px; }
.try-f, .try-l { min-width: 0; }   /* sinon la grille ne rétrécit pas sous la largeur du champ et la page déborde */
.try-f > label { font-size: 15px; font-weight: 500; color: rgba(0, 0, 0, .78); }
/* Le champ porte le filet, le bouton vit dedans. */
.try-row { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 24px; border-radius: 999px; background: #000; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); transition: box-shadow .2s var(--ease); }
.try-row:focus-within { box-shadow: 0 0 0 4px rgba(0, 0, 0, .18); }
.try-row input { flex: 1; min-width: 0; font: inherit; font-size: 18px; color: var(--ink); background: transparent; border: 0; padding: 10px 0; outline: none; }
.try-row input::placeholder { color: var(--ink-mute); }
.try-row .pill { flex: none; border: 0; font-family: inherit; font-size: 16px; padding: 13px 22px; cursor: pointer; background: var(--accent); }
.try-row .pill:hover { background: var(--ink); }
.try-row .pill:disabled { opacity: .6; cursor: progress; }
.try-n { font-size: 14px; color: rgba(0, 0, 0, .62); max-width: 52ch; }
.try-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; color: rgba(0, 0, 0, .72); font-size: 16px; line-height: 1.45; }
.try-l strong { display: block; color: #000; font-weight: 600; }
/* La fenêtre de remerciement du formulaire (try/) : elle entre avec un rebond, « Thanks! » lettre à lettre, quelques
   confettis, puis la coche se dessine et le reste suit. */
.ty { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s var(--ease); }
.ty.on { opacity: 1; }
.ty-card { position: relative; width: min(420px, 100%); padding: 32px 30px 28px; border-radius: 22px; background: #161614; box-shadow: 0 0 0 1px #2a2a27, 0 30px 80px rgba(0, 0, 0, .6); font-size: 17px; line-height: 1.45; color: var(--ink-soft); }
.ty-card p { margin: 0; }
.ty.on .ty-card { animation: bp-in .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.ty-h { margin-bottom: 16px !important; font-size: clamp(44px, 6vw, 60px); line-height: 1; font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.ty-h .wd { display: inline-block; white-space: nowrap; }
.ty-h .l { display: inline-block; }
.ty.on .ty-h .l { animation: ty-l .5s calc(.15s + var(--i) * .05s) cubic-bezier(.34, 1.56, .64, 1) both; }
.ty-c { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); }
.ty-c svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ty-b { margin-top: 6px !important; color: var(--accent); }
.ty-s { margin-top: 16px !important; color: var(--ink-mute); }
.ty.on .ty-c { animation: bp-up .35s .55s var(--ease) both; }
.ty.on .ty-c path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: buy-draw .45s .7s var(--ease) forwards; }
.ty-h.long { font-size: clamp(36px, 4.6vw, 48px); }
.ty-m { font-weight: 600; color: var(--ink); }
.ty-mail { display: inline-block; margin-left: 6px; padding: 1px 8px; border: 1px solid #3a3a36; border-radius: 7px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; user-select: all; }   /* l'adresse, facile à sélectionner */
.ty-a { display: inline-block; margin-top: 14px; padding: 9px 16px; border-radius: 999px; background: var(--accent); color: #000; font-weight: 600; }
.ty.on .ty-ln { animation: bp-up .35s calc(.78s + var(--k) * .2s) var(--ease) both; }
.ty-stamp { display: inline-block; margin-left: 2px; padding: 1px 8px; border: 1.5px solid var(--accent); border-radius: 7px; font-weight: 600; white-space: nowrap; transform: rotate(-2deg); }
.ty.on .ty-stamp { animation: bp-stamp .5s 1.25s cubic-bezier(.34, 1.56, .64, 1) both, bp-glow 1.6s 1.75s ease-out; }
.ty-t { position: absolute; left: 22px; right: 22px; bottom: 10px; height: 3px; border-radius: 3px; background: var(--accent); transform-origin: left; }
.ty.on .ty-t { animation: bp-time 8s linear forwards; }
.ty-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #232320; color: var(--ink-soft); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.ty-x:hover { background: var(--accent); color: #000; }
.ty-cf { position: absolute; top: 46px; left: 60px; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); opacity: 0; pointer-events: none; }
.ty.on .ty-cf { animation: ty-cf .9s calc(.4s + var(--d)) cubic-bezier(.2, .7, .3, 1) forwards; }
/* Ancrée sous un bouton (Buy) : pas de voile, plus petite, plus rapide. */
.ty.at { inset: auto; display: block; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ty.at .ty-card { width: 100%; padding: 20px 20px 26px; border-radius: 18px; font-size: 15px; transform-origin: top center; }
.ty.at.on .ty-card { animation-duration: .4s; }
.ty.at .ty-h, .ty.at .ty-h.long { margin-bottom: 10px !important; padding-right: 30px; font-size: 30px; letter-spacing: -.02em; }
.ty.at.on .ty-h .l { animation-duration: .35s; animation-delay: calc(.05s + var(--i) * .022s); }
.ty.at .ty-x { top: 9px; right: 9px; width: 28px; height: 28px; font-size: 17px; }
.ty.at .ty-c svg { width: 18px; height: 18px; }
.ty.at .ty-cf { top: 30px; left: 40px; width: 6px; height: 6px; }
.ty.at.on .ty-cf { animation-duration: .7s; animation-delay: calc(.15s + var(--d)); }
.ty.at.on .ty-c { animation-delay: .28s; }
.ty.at.on .ty-c path { animation-delay: .36s; }
.ty.at.on .ty-ln { animation-delay: calc(.4s + var(--k) * .12s); }
.ty.at.on .ty-stamp { animation-delay: .6s, 1s; }
.ty.at .ty-s { margin-top: 10px !important; }
.ty.at .ty-t { left: 18px; right: 18px; bottom: 10px; }
@keyframes ty-l { from { opacity: 0; transform: translateY(24px) rotate(8deg) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes ty-cf { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .ty.on .ty-card, .ty.on .ty-h .l, .ty.on .ty-c, .ty.on .ty-ln, .ty.on .ty-stamp { animation: none; } .ty-cf { display: none; } }

@media (max-width: 1100px) {
  .lead, .lead-w, .hero-side, .lead-w + .hero-side { grid-column: 1 / -1; }
  .hero-side { align-items: flex-start; text-align: left; }
  .ready { justify-content: flex-start; }
  .sec-t { grid-column: 1 / -1; }
  .sec-a { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .ps-l, .ps-c > div { grid-column: 1 / -1; }
  .ao, .ao-ask, .try { grid-template-columns: 1fr; }
  .ps-arrow { display: none; }
  .mods .mod { grid-column: 1 / -1; }
  .claude, .supa { grid-template-columns: 1fr; }
  .price-l, .price-r { grid-column: 1 / -1; }
  .price-r { margin-top: 36px; }
  .foot .f1, .foot .f2, .foot .f3 { grid-column: 1 / -1; text-align: left; }
  .foot .f3 { padding-top: 0; }
}
@media (max-width: 760px) { .title { font-size: 15vw; } }
@media (max-width: 640px) {
  .bar { gap: 18px; }
  .nav { gap: 18px; font-size: 14px; }
  .nav .nav-demo { padding: 6px 12px; margin: -6px 0; }
  .bar .buy { gap: 10px; padding: 9px 14px; font-size: 14px; }
  .bar .buy-p { padding-left: 10px; }
  .lv-hd { flex-direction: column; align-items: flex-start; gap: 12px; }
  .lv-r { display: flex; align-items: baseline; gap: 10px; text-align: left; }
  .lv-r .lv-sub { margin-top: 0; }
  .lv-app { height: 560px; }
  .lv-cl { height: 470px; }
  .lv-dos { grid-template-columns: 1fr; }
  .lv-tree { display: none; }   /* sur un téléphone, le dossier seul */
  .lv-dl em { display: none; }
  .lv-row { grid-template-columns: minmax(0, 1fr) auto; }
  .lv-row span:first-child { display: none; }
  .lv-xh { flex-wrap: wrap; }
  .lv-xf { width: 100%; flex-wrap: wrap; gap: 10px 22px; text-align: left; }
  .lv-xf span { font-size: 10px; letter-spacing: .03em; }
  .lv-xk { display: none; }   /* sur un téléphone, la cascade seule */
  .lv-xr { grid-template-columns: minmax(0, 1fr) auto auto; }
  .lv-xr > span:nth-child(2), .lv-xr > span:nth-child(3) { display: none; }
  .lv-fund .lv-xr { grid-template-columns: minmax(0, 1fr) auto auto; }
  .lv-fund .lv-xr > span:nth-child(3) { display: block; }
  .lv-fund .lv-xr > span:nth-child(5) { display: none; }
  .mod-b { grid-template-columns: 1fr; gap: 10px; }
  .claude-r { grid-template-columns: 1fr; }
  .ao-r, .dd-ax { grid-template-columns: 1fr; }
  .safe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-t, .sec-a { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .bar .buy-p { display: none; }   /* le menu tient sur un téléphone : le prix reste dans la page */
  .bar .buy-ok .t { display: none; }   /* le bouton n'y montre que « Buy » : la coche seule après la copie */
  .try-row { padding-left: 18px; }
  .try-row input { font-size: 16px; }   /* 16 px : en dessous, l'iPhone zoome sur le champ */
  .try-b-x { display: none; }      /* « Open → » : le champ garde la place de l'adresse */
}

/* ---------- Page des use cases ---------- */
.uc-hero .kicker a { color: var(--ink-soft); }
.uc-hero .kicker a:hover { color: var(--ink); }
.uc-hero .hero-side { align-items: flex-end; }
.uc-hero .tools { align-items: flex-end; text-align: right; }
.uc-sec { padding-top: clamp(64px, 7vw, 110px); }
.uc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(26px, 3vw, 40px); }
.uc-pills button { font: inherit; font-size: 15px; color: var(--ink-soft); background: var(--elev); border: 0; border-radius: 999px; padding: 10px 16px; cursor: pointer; display: inline-flex; gap: 8px; align-items: baseline; transition: background .2s var(--ease), color .2s var(--ease); }
.uc-pills button span { color: var(--ink-mute); font-size: 13px; }
.uc-pills button:hover { color: var(--ink); }
.uc-pills button.on { background: var(--ink); color: #000; }
.uc-pills button.on span { color: #555; }
.uc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.uc { background: var(--elev); border-radius: 18px; padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 12px; }
.uc[hidden] { display: none; }
.uc-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.uc-c { font-size: 13px; color: var(--ink-mute); }
.uc .req-a { font-size: 15px; }
.uc-v { margin: -10px -10px 8px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--elev-2); }
.uc-v video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1100px) { .uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .uc-hero .hero-side, .uc-hero .tools { align-items: flex-start; text-align: left; } }
@media (max-width: 640px) { .uc-grid { grid-template-columns: 1fr; } }