/* Motionable — landing. DA provisoire v3 : règles dans DESIGN.md
   Thème clair par défaut ; ?theme=sombre pour la version sombre. */
:root {
  /* Page (clair) */
  --bg: #f5f4ef;             /* blanc cassé, pas du blanc pur */
  --surface: #ffffff;
  --surface-2: #ecebe4;
  --ink: #0d1612;            /* noir vert */
  --ink-2: #3e4c45;          /* secondaire : vert-gris foncé, teinté */
  --line: rgba(13, 22, 18, .1);
  --line-2: rgba(13, 22, 18, .18);
  --accent-text: #0e9a52;    /* vert lisible sur fond clair */

  /* Vert Motionable */
  --vert: #34e57f;
  --vert-2: #1fc46e;
  --vert-clair: #a6f7c8;
  --vert-encre: #04140a;

  /* Écrans du produit : toujours vert très sombre */
  --deep: #0b1511;
  --deep-2: #12241c;
  --deep-ink: #eef3ef;
  --deep-ink-2: #b6c8bf;
  --deep-line: rgba(238, 243, 239, .1);
  --deep-line-2: rgba(238, 243, 239, .2);
  --rec: #ff4b3e;

  --display: "Familjen Grotesk", "Schibsted Grotesk", sans-serif;
  --text: "Schibsted Grotesk", system-ui, sans-serif;
  --video: "Archivo", "Arial Narrow", sans-serif; /* uniquement dans les vidéos */

  --r-s: 12px; --r-m: 16px; --r-w: 22px; --r-l: 28px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --press: .16s;             /* appui sur un bouton */
  --pad: clamp(16px, 4vw, 56px);
  --shadow: 0 1px 0 rgba(13, 22, 18, .04), 0 30px 60px -30px rgba(13, 22, 18, .35);
  color-scheme: light;
}
:root[data-theme="sombre"] {
  --bg: #0a100d;
  --surface: #111a16;
  --surface-2: #17221d;
  --ink: #eef3ef;
  --ink-2: #b6c8bf;
  --line: rgba(238, 243, 239, .1);
  --line-2: rgba(238, 243, 239, .2);
  --accent-text: #34e57f;
  --shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
::selection { background: var(--vert); color: var(--vert-encre); }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; }
img, svg { display: block; }
a { color: inherit; text-underline-offset: 3px; }
p { margin: 0; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: var(--r-s); background: var(--vert); color: var(--vert-encre); font-weight: 600; }
.skip:focus { top: 12px; }
.hp { position: absolute; left: -9999px; }

/* ---------- Titres ---------- */
h1, h2 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.035em; line-height: 1; text-wrap: balance; }
h1 { font-size: clamp(56px, min(6.6vw, 12svh), 108px); letter-spacing: -.045em; }
h1 em { font-style: normal; color: var(--accent-text); }
h2 { font-size: clamp(36px, 4.2vw, 60px); }
h3 { margin: 0; font: 600 19px/1.25 var(--text); letter-spacing: -.01em; }
.sub { margin-top: 16px; font-size: 19px; color: var(--ink-2); }

/* ---------- Navigation ---------- */
.nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--pad); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 21px/1 var(--display); letter-spacing: -.03em; }
.mark { width: 30px; height: 30px; color: var(--vert); }
:root:not([data-theme="sombre"]) .nav .mark, :root:not([data-theme="sombre"]) .foot .mark { color: var(--vert-2); }

/* ---------- Boutons et champs ---------- */
.btn {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  height: 54px; padding: 0 24px; border-radius: var(--r-m);
  background: var(--vert); color: var(--vert-encre);
  font: 600 16.5px/1 var(--text); text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px -8px rgba(13, 22, 18, .5);
  transition: transform var(--press) var(--ease-out), background-color .2s;
}
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-1px); background: #4cee90; } }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-small { height: 40px; padding: 0 16px; border-radius: var(--r-s); font-size: 14.5px; }

.waitlist { margin-top: 34px; max-width: 520px; }
.field { display: flex; gap: 8px; padding: 6px; border: 1px solid var(--line-2); border-radius: calc(var(--r-m) + 6px); background: var(--surface); box-shadow: 0 1px 2px rgba(13, 22, 18, .04); transition: border-color .2s var(--ease-out); }
.field:focus-within { border-color: var(--accent-text); }
.field input { flex: 1; min-width: 0; height: 54px; padding: 0 14px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 17px/1 var(--text); caret-color: var(--accent-text); }
.field input::placeholder { color: color-mix(in srgb, var(--ink-2) 70%, transparent); }
.form-note { margin-top: 12px; min-height: 1.4em; font-size: 14.5px; color: var(--ink-2); }
.form-note.ok { color: var(--accent-text); font-weight: 600; }
.form-note.err { color: #c2341f; }
:root[data-theme="sombre"] .form-note.err { color: #ffa092; }
.waitlist.done .field { border-color: var(--accent-text); }

/* ---------- 1. Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(28px, 4vw, 64px); max-width: 1400px; margin: 0 auto; min-height: calc(100svh - 70px); padding: clamp(20px, 4vh, 56px) var(--pad) clamp(56px, 9vh, 110px); }
.lead { margin-top: 26px; max-width: 26ch; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.4; color: var(--ink); }
/* Les 5 étapes, séparées par des traits fins */
.pipeline { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; font: 500 15px/1 var(--text); color: var(--ink-2); }
.pipeline li { display: inline-flex; align-items: center; }
.pipeline li + li::before { content: ""; width: 1px; height: 14px; margin: 0 14px; background: var(--line-2); }

/* La fenêtre Motionable : un écran du produit, vert très sombre */
.app { margin: 0; overflow: hidden; border-radius: var(--r-w); color: var(--deep-ink); background: radial-gradient(120% 90% at 85% 0%, #17362a 0%, transparent 55%), linear-gradient(165deg, var(--deep-2), var(--deep) 60%); box-shadow: inset 0 0 0 1px var(--deep-line), var(--shadow); }
.app figcaption { padding: 0 20px 16px; font-size: 13px; color: var(--deep-ink-2); opacity: .8; }
.app-bar { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--deep-line); font: 500 14px/1 var(--text); }
.app-bar .mark { width: 20px; height: 20px; color: var(--vert); }
.app-state { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--vert-clair); }
.app-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--vert); }
.app-body { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "in out"; justify-items: center; align-items: end; gap: clamp(16px, 2.4vw, 36px); padding: clamp(18px, 2.2vw, 30px) clamp(18px, 2.2vw, 30px) 8px; }
.col { display: grid; justify-items: start; gap: 10px; }
.col-in { grid-area: in; }
.col-out { grid-area: out; }
.tag { display: inline-flex; align-items: baseline; gap: 8px; font: 600 13.5px/1 var(--text); }
.tc { font: 500 12.5px/1 var(--text); font-variant-numeric: tabular-nums; color: var(--deep-ink-2); }
.col-out .tag::before { content: ""; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--vert); }

.phone {
  --w: clamp(140px, min(14vw, calc((100svh - 420px) * 9 / 19.5)), 230px);
  position: relative; width: var(--w); aspect-ratio: 9 / 19.5;
  padding: calc(var(--w) * .03); border-radius: calc(var(--w) * .15);
  background: linear-gradient(160deg, #2b3430, #0b0f0d 40%, #1a211e);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 50px -26px rgba(0, 0, 0, .9);
}

.screen { container-type: inline-size; position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--w) * .12); background: #000; isolation: isolate; }
.frame { position: absolute; inset: 0; transform-origin: 50% 38%; will-change: transform; filter: saturate(1.15) contrast(1.06); }
.phone-brut .frame { filter: saturate(.4) contrast(.88) brightness(.9); }
.room { position: absolute; inset: -6%; filter: blur(6px); background: radial-gradient(40% 30% at 18% 22%, rgba(255, 196, 120, .55), transparent 70%), radial-gradient(35% 45% at 88% 30%, rgba(120, 170, 255, .35), transparent 70%), linear-gradient(180deg, #3b3027 0%, #241d18 60%, #18130f 100%); }
.person { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; }
.giant { position: absolute; left: 50%; top: 13%; transform: translateX(-50%) scale(.96); font: 900 26cqw/.8 var(--video); font-stretch: 62%; letter-spacing: -.01em; color: var(--vert); opacity: 0; filter: blur(8px); transition: opacity .55s var(--ease-out), filter .55s var(--ease-out), transform .7s var(--ease-out); }
.giant.on { opacity: .95; filter: none; transform: translateX(-50%) scale(1); }
.subs { position: absolute; left: 6%; right: 6%; top: 64%; text-align: center; color: #fff; font: 900 10.5cqw/1.12 var(--video); font-stretch: 78%; text-transform: uppercase; }
.subs .w { display: inline-block; margin: 0 .1em; padding: 0 .08em; border-radius: 3px; opacity: 0; transform: scale(.94); filter: blur(4px); text-shadow: 0 2px 10px rgba(0, 0, 0, .6); transition: opacity .3s var(--ease-out), transform .4s var(--ease-out), filter .3s var(--ease-out), background .15s, color .15s; }
.subs .w.in { opacity: 1; transform: none; filter: none; }
.subs .w.now { background: var(--vert); color: var(--vert-encre); text-shadow: none; }
.card-pop { position: absolute; left: 8%; top: 30%; display: flex; align-items: center; gap: 2.5cqw; padding: 3.2cqw 4.4cqw; border-radius: 4cqw; background: #f4efe6; color: #15120f; font: 700 5.4cqw/1 var(--text); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .8); opacity: 0; transform: translateY(8px) scale(.94) rotate(-4deg); filter: blur(4px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), filter .5s var(--ease-out); }
.card-pop svg { width: 6.5cqw; height: 6.5cqw; }
.card-pop b { font-size: 6.6cqw; }
.card-pop.on { opacity: 1; transform: rotate(-4deg); filter: none; }
.rec { position: absolute; top: 7cqw; left: 7cqw; display: flex; align-items: center; gap: 2cqw; font: 700 5.5cqw/1 var(--text); letter-spacing: .04em; color: rgba(244, 239, 230, .9); }
.rec i { width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: var(--rec); animation: blink 1.4s steps(2) infinite; }
.sfx { position: absolute; top: 7cqw; right: 7cqw; display: flex; align-items: end; gap: 1.2cqw; height: 7cqw; }
.sfx i { width: 1.6cqw; height: 100%; border-radius: 1cqw; background: #f4efe6; opacity: .85; transform: scaleY(.3); transform-origin: bottom; transition: transform .35s var(--ease-out); }
.sfx.hit i:nth-child(1) { transform: scaleY(.7); } .sfx.hit i:nth-child(2) { transform: none; } .sfx.hit i:nth-child(3) { transform: scaleY(.55); } .sfx.hit i:nth-child(4) { transform: scaleY(.85); }
.sfx.hit i { transition-duration: .06s; }
.silence { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 2.4cqw 4cqw; border-radius: 3cqw; background: rgba(12, 11, 10, .72); font: 600 5cqw/1 var(--text); color: #e4d8c5; opacity: 0; transition: opacity .25s; }
.silence.on { opacity: 1; }

/* Les 5 réglages à cocher */
.layers { display: block; grid-column: 1 / -1; justify-self: stretch; width: 100%; margin: 4px 0 8px; padding: 0; border: 0; border-top: 1px solid var(--deep-line); min-width: 0; }
.layers legend { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 0 10px; font: 600 14.5px/1.3 var(--text); }
.layers legend span { font: 500 12.5px/1.3 var(--text); color: var(--deep-ink-2); }
.layer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.layers label { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 8px 0; cursor: pointer; }
.layers input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.layers .box { flex: none; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid var(--deep-line-2); border-radius: 5px; background: no-repeat center / 12px; transition: background-color .2s, border-color .2s; }
.layers input:checked ~ .box { border-color: var(--vert); background-color: var(--vert); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2304140a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.layers .name { font: 600 14.5px/1.25 var(--text); }
.layers .desc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* lue par les lecteurs d'écran */
.layers input:not(:checked) ~ .name { color: var(--deep-ink-2); }
.layers input:focus-visible ~ .box { outline: 2px solid var(--deep-ink); outline-offset: 2px; }
.layers label:hover .box { border-color: var(--vert); }

/* ---------- Sections ---------- */
section { max-width: 1400px; margin: 0 auto; padding: clamp(80px, 12vh, 140px) var(--pad); }

/* 2. Comment ça marche */
.how h2 { max-width: 14ch; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 52px 0 0; padding: 0; list-style: none; }
.step { padding: 14px 14px 26px; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.step h3 { margin: 24px 10px 0; }
.step p { max-width: 32ch; margin: 10px 10px 0; color: var(--ink-2); }
.mock { height: 132px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: calc(var(--r-l) - 8px); color: var(--deep-ink); background: linear-gradient(165deg, var(--deep-2), var(--deep)); }
.mock-drop { flex-direction: column; }
.mock-drop svg { width: 26px; height: 26px; color: var(--vert); }
.file { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--r-s); background: rgba(238, 243, 239, .08); font: 500 14px/1 var(--text); }
.file svg { width: 16px; height: 16px; color: var(--vert); }
.chip { padding: 9px 13px; border: 1px solid var(--deep-line-2); border-radius: 999px; font: 600 14px/1 var(--text); color: var(--deep-ink-2); }
.chip.on { border-color: var(--vert); background: var(--vert); color: var(--vert-encre); }
.mock-get { flex-direction: column; }
.bar { width: 78%; height: 6px; overflow: hidden; border-radius: 6px; background: rgba(238, 243, 239, .1); }
.bar i { display: block; width: 100%; height: 100%; background: var(--vert); transform-origin: left; }
.how.seen .bar i { animation: fill 2.4s var(--ease-out) both; }
@keyframes fill { from { transform: scaleX(0); } }

/* 3. Timeline (écran du produit) */
.edit { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); grid-template-areas: "copy tl" "list tl"; gap: 28px clamp(28px, 5vw, 80px); align-items: start; }
.edit-copy { grid-area: copy; }
.edit-copy p { max-width: 42ch; margin-top: 22px; color: var(--ink-2); }
/* L'éditeur : vidéo 16:9 + timeline calée dessus */
.editor { grid-area: tl; overflow: hidden; border-radius: var(--r-l); color: var(--deep-ink); background: radial-gradient(90% 60% at 100% 0%, #17362a, transparent 60%), linear-gradient(165deg, var(--deep-2), var(--deep) 60%); box-shadow: inset 0 0 0 1px var(--deep-line), var(--shadow); }
.player { container-type: inline-size; position: relative; margin: 16px 16px 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #000; isolation: isolate; }
.pframe { position: absolute; inset: 0; transform-origin: 46% 40%; will-change: transform; filter: saturate(1.12) contrast(1.05); }
.room-wide { background: radial-gradient(30% 45% at 12% 30%, rgba(255, 196, 120, .5), transparent 70%), radial-gradient(28% 50% at 92% 35%, rgba(52, 229, 127, .18), transparent 70%), radial-gradient(40% 40% at 70% 80%, rgba(120, 170, 255, .2), transparent 70%), linear-gradient(180deg, #33291f, #1b1612); }
.pframe .person { left: 30%; right: auto; width: 34%; bottom: -8%; }
.big { position: absolute; right: 7%; top: 22%; font: 900 15cqw/.8 var(--video); font-stretch: 62%; letter-spacing: -.01em; color: var(--vert); opacity: 0; filter: blur(8px); transform: scale(.96); transition: opacity .5s var(--ease-out), filter .5s var(--ease-out), transform .6s var(--ease-out); }
.big.on { opacity: 1; filter: none; transform: none; }
.lower { position: absolute; left: 5%; bottom: 25%; display: grid; gap: .5cqw; padding: 1.4cqw 2.2cqw 1.6cqw; border-left: .6cqw solid var(--vert); background: rgba(10, 16, 13, .82); opacity: 0; transform: translateX(-2cqw); filter: blur(3px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), filter .5s var(--ease-out); }
.lower b { font: 700 2.6cqw/1 var(--text); color: #fff; }
.lower span { font: 500 1.9cqw/1 var(--text); color: #b6c8bf; }
.lower.on { opacity: 1; transform: none; filter: none; }
.psubs { position: absolute; left: 10%; right: 10%; bottom: 7%; margin: 0; text-align: center; color: #fff; font: 900 4.4cqw/1.1 var(--video); font-stretch: 78%; text-transform: uppercase; }
.psubs .w { display: inline-block; margin: 0 .1em; padding: 0 .08em; border-radius: 3px; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); opacity: 0; transform: scale(.94); transition: opacity .25s var(--ease-out), transform .35s var(--ease-out), background .15s, color .15s; }
.psubs .w.in { opacity: 1; transform: none; }
.psubs .w.now { background: var(--vert); color: var(--vert-encre); text-shadow: none; }
.psfx { top: 4cqw; right: 4cqw; height: 3cqw; gap: .6cqw; }
.psfx i { width: .8cqw; }
.ptc { position: absolute; left: 3.5cqw; top: 3.5cqw; font: 600 1.8cqw/1 var(--text); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .85); }
.timeline { position: relative; padding: 18px 18px 20px 118px; }
.ruler { display: flex; justify-content: space-between; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--deep-line); font: 500 12px/1 var(--text); font-variant-numeric: tabular-nums; color: var(--deep-ink-2); }
.tracks { display: grid; gap: 12px; }
.track { position: relative; height: 34px; transition: opacity .3s; }
.track.off { opacity: .28; }
.track::before { content: attr(data-label); position: absolute; right: calc(100% + 16px); top: 50%; transform: translateY(-50%); white-space: nowrap; font: 600 13px/1 var(--text); color: var(--deep-ink-2); }
.track b { position: absolute; top: 3px; bottom: 3px; left: calc(var(--s) * 100%); width: calc((var(--e) - var(--s)) * 100%); border: 1px solid var(--deep-line-2); border-radius: 7px; background: rgba(238, 243, 239, .06); transition: background .2s, border-color .2s; }
.track b.dot { top: 11px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; }
.track b.on { border-color: var(--vert); background: var(--vert); }
.playhead { position: absolute; top: 14px; bottom: 14px; left: 118px; width: 2px; border-radius: 2px; background: var(--deep-ink); }
.playhead::before { content: ""; position: absolute; top: -4px; left: -5px; width: 12px; height: 12px; border-radius: 3px; background: var(--deep-ink); }
.edit-list { grid-area: list; display: grid; margin: 8px 0 0; padding: 0; list-style: none; }
.edit-list li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.edit-list li:last-child { border-bottom: 1px solid var(--line); }
.edit-list b { min-width: 104px; font-weight: 600; color: var(--ink); }

/* 4. Kits */
.kits h2 { max-width: 14ch; }
.shelf { display: grid; grid-template-columns: auto auto 1fr; align-items: end; gap: clamp(20px, 3vw, 44px); margin-top: 56px; }
.kit { max-width: 420px; }
.kit:last-child { max-width: 560px; }
.kit h3 { margin-top: 22px; }
.kit p { max-width: 34ch; margin-top: 8px; color: var(--ink-2); }
.status { display: inline-block; margin-top: 14px; font: 600 13.5px/1 var(--text); color: var(--ink-2); }
.status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--ink-2); opacity: .5; vertical-align: 1px; }
.status.live { color: var(--accent-text); }
.status.live::before { background: var(--vert-2); opacity: 1; }
.kit-screen { container-type: inline-size; position: relative; overflow: hidden; border-radius: var(--r-l); background: #000; box-shadow: 0 0 0 7px #161d1a, 0 0 0 8px rgba(255, 255, 255, .06), var(--shadow); transition: transform .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .kit:hover .kit-screen { transform: translateY(-6px); } }
.kit-meta, .kit-clip { aspect-ratio: 9 / 16; height: clamp(340px, 30vw, 430px); }
.kit-meta { display: grid; align-content: center; justify-items: center; padding: 20px; background: #1f4fd6; }
.kit-meta span { position: relative; font-family: var(--video); text-transform: uppercase; line-height: .9; }
.k-l1 { justify-self: start; margin-left: 8%; font-weight: 600; font-size: 8.5cqw; font-stretch: 90%; color: #dbe6ff; }
.k-l2 { font-weight: 900; font-size: 24cqw; font-stretch: 62%; color: #fff; }
.k-l3 { justify-self: end; margin-right: 8%; font-weight: 600; font-size: 8.5cqw; font-stretch: 90%; color: #dbe6ff; }
.kit-clip { display: grid; grid-template-rows: 1fr 1fr; }
.kit-clip .cam { display: block; }
.kit-clip .cam.a { background: linear-gradient(#2c2620, #191512); }
.kit-clip .cam.b { border-top: 2px solid #fff; background: linear-gradient(#1f2329, #121417); }
.kit-clip .title-box { position: absolute; left: 10%; right: 10%; top: 44%; transform: translateY(-50%); padding: 4cqw 5cqw; border-radius: 6px; background: #fff; color: #111; font: 800 7.4cqw/1.05 var(--text); text-align: center; }
.kit-intro { aspect-ratio: 16 / 10; display: grid; place-items: center; background: #13110f; }
.kit-intro .type { justify-self: start; padding-left: 10%; font: 900 9cqw/.95 var(--video); font-stretch: 68%; text-transform: uppercase; color: #fff; }
.kit-intro .type::after { content: ""; display: inline-block; width: .5em; height: .08em; margin-left: .1em; vertical-align: .1em; background: #f0c040; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* 5. FAQ */
.faq { max-width: 900px; }
.faq h2 { margin-bottom: 30px; }
details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { position: relative; padding: 22px 40px 22px 0; list-style: none; cursor: pointer; font: 600 19px/1.3 var(--text); }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; border-right: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease-out); }
details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
details p { max-width: 60ch; padding: 0 0 24px; color: var(--ink-2); }

/* 6. Dernier appel : le seul grand aplat vert */
.final { display: grid; justify-items: center; width: calc(100% - 2 * var(--pad)); max-width: 1300px; margin: 0 auto clamp(40px, 8vh, 90px); padding: clamp(64px, 11vh, 120px) clamp(20px, 4vw, 56px); border-radius: calc(var(--r-l) + 12px); background: radial-gradient(80% 120% at 20% 0%, #5cf09e, transparent 60%), linear-gradient(165deg, var(--vert), var(--vert-2)); color: var(--vert-encre); text-align: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.final .waitlist { width: 100%; }
.final .field { border-color: transparent; background: var(--vert-encre); }
.final .field input { color: #eef3ef; }
.final .field input::placeholder { color: #8fa79b; }
.final .field:focus-within { border-color: #fff; }
.final .btn { background: #fff; color: var(--vert-encre); box-shadow: none; }
.final .form-note { color: #0b3a21; }
.final .form-note.ok { color: var(--vert-encre); }
.final .form-note.err { color: #6b0d05; }

/* Pied de page */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; max-width: 1400px; margin: 0 auto; padding: 8px var(--pad) 40px; }
.foot nav { display: flex; gap: 22px; font-size: 14.5px; color: var(--ink-2); }

/* Apparition au défilement */
.reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out), filter .8s var(--ease-out); }
.reveal.seen { opacity: 1; transform: none; filter: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { max-width: 720px; }
  .phone { --w: min(230px, 30vw); }
}
@media (max-width: 1000px) {
  .steps { grid-template-columns: 1fr; }
  .edit { grid-template-columns: 1fr; grid-template-areas: "copy" "tl" "list"; }
  .shelf { grid-template-columns: auto auto; }
  .kit:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: clamp(48px, 15vw, 64px); }
  .pipeline { font-size: 14px; }
  .pipeline li + li::before { margin: 0 10px; }
  .field { flex-direction: column; }
  .field .btn { width: 100%; }
  .app-body { padding: 16px 16px 4px; }
  .phone { --w: 38vw; }
  .layers { margin: 2px 0 6px; }
  .layer-row { justify-content: flex-start; gap: 2px 16px; }
  .timeline { padding-left: 92px; }
  .playhead { left: 92px; }
  .track::before { right: calc(100% + 10px); font-size: 11.5px; }
  .shelf { grid-template-columns: 1fr; }
  .kit-meta, .kit-clip { width: min(300px, 100%); height: auto; }
  .edit-list b { min-width: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-property: opacity, color, background-color, border-color, box-shadow !important; transition-duration: .2s !important; transition-delay: 0s !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
}

/* ===================== v3.1 : navigation, rythme, fonctionnalités ===================== */

/* Navigation */
.nav { gap: 24px; border-bottom: 1px solid var(--line); }
.links { display: flex; gap: 4px; margin-left: auto; }
.links a { padding: 9px 12px; border-radius: 10px; font: 500 15px/1 var(--text); color: var(--ink-2); text-decoration: none; transition: color .2s, background .2s; }
.links a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav .btn-small { margin-left: 8px; }
html { scroll-padding-top: 80px; }

/* Rythme : sections plus serrées, bandes blanches pleine largeur */
section { padding-block: clamp(64px, 10vh, 112px); }
.band { max-width: none; padding-inline: max(var(--pad), calc((100% - 1400px) / 2 + var(--pad))); background: var(--surface); border-block: 1px solid var(--line); }
.band .step { background: var(--bg); }
:root[data-theme="sombre"] .band { background: #0e1512; }

/* Mosaïque de fonctionnalités */
.features h2 { max-width: 16ch; }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.tile { display: flex; flex-direction: column; padding: 12px 12px 24px; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.tile h3 { margin: 22px 10px 0; }
.tile p { max-width: 40ch; margin: 8px 10px 0; color: var(--ink-2); }
.tile .vis { container-type: inline-size; position: relative; height: 170px; overflow: hidden; border-radius: calc(var(--r-l) - 8px); color: var(--deep-ink); background: radial-gradient(80% 90% at 100% 0%, #17362a, transparent 60%), linear-gradient(165deg, var(--deep-2), var(--deep) 65%); }
.t-subs { grid-column: span 4; }
.t-formats { grid-column: span 2; }
.t-images, .t-sound, .t-control { grid-column: span 2; }
.t-time { grid-column: span 6; }
.t-time .vis { height: 120px; }

/* Sous-titres : karaoké en boucle */
.kar { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: .1em .3em; margin: 0; padding: 0 8%; font: 900 clamp(26px, 7cqw, 52px)/1.1 var(--video); font-stretch: 78%; text-transform: uppercase; color: #fff; }
.kar span { padding: 0 .08em; border-radius: 4px; animation: kar 5s calc(var(--i) * .55s) infinite; }
@keyframes kar { 0%, 10% { background: var(--vert); color: var(--vert-encre); } 11%, 100% { background: transparent; color: #fff; } }

/* Formats */
.t-formats .vis { display: flex; align-items: center; justify-content: center; gap: 16px; }
.fmt { display: grid; place-items: center; border: 1.5px solid var(--deep-line-2); border-radius: 8px; background: rgba(238, 243, 239, .05); font: 600 13px/1 var(--text); }
.fmt.v { width: 62px; aspect-ratio: 9 / 16; border-color: var(--vert); color: var(--vert-clair); }
.fmt.h { width: 128px; aspect-ratio: 16 / 9; }

/* Images */
.t-images .img { position: absolute; top: 26px; width: 34%; aspect-ratio: 4 / 3; border-radius: 8px; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .8); }
.i1 { left: 10%; transform: rotate(-6deg); background: linear-gradient(135deg, #5b7a6c, #20352c); }
.i2 { left: 33%; top: 18px !important; z-index: 1; background: linear-gradient(135deg, #c9b18a, #6d5638); }
.i3 { left: 56%; transform: rotate(5deg); background: linear-gradient(135deg, #7d8db3, #2b3550); }
.rights { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(238, 243, 239, .07); font: 500 12.5px/1.2 var(--text); }
.rights .box { flex: none; width: 15px; height: 15px; border-radius: 4px; background: var(--vert) no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2304140a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Sons : forme d'onde, coups en vert */
.wave { position: absolute; inset: 22px 16px; display: flex; align-items: center; gap: 3px; }
.wave i { flex: 1; height: calc(var(--h) * 100%); border-radius: 2px; background: rgba(238, 243, 239, .28); }
.wave i:nth-child(9), .wave i:nth-child(23), .wave i:nth-child(36) { background: var(--vert); height: 100%; }

/* Contrôle : interrupteurs */
.t-control .vis { display: grid; align-content: center; gap: 2px; padding: 14px 18px; }
.sw { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font: 500 14px/1 var(--text); color: var(--deep-ink-2); }
.sw + .sw { border-top: 1px solid var(--deep-line); }
.sw::after { content: ""; width: 30px; height: 18px; border-radius: 9px; background: rgba(238, 243, 239, .18) radial-gradient(circle at 9px 50%, #eef3ef 6px, transparent 6.5px); }
.sw.on { color: var(--deep-ink); }
.sw.on::after { background: var(--vert) radial-gradient(circle at 21px 50%, var(--vert-encre) 6px, transparent 6.5px); }

/* Prête en quelques minutes : la chaîne */
.run { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 0 clamp(16px, 3cqw, 40px); list-style: none; }
.run li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font: 500 14px/1 var(--text); color: var(--deep-ink-2); }
.run li + li::before { content: ""; width: clamp(12px, 3cqw, 44px); height: 1px; margin-right: 8px; background: var(--deep-line-2); }
.run .ok::after { content: ""; order: -1; width: 16px; height: 16px; border-radius: 50%; background: rgba(52, 229, 127, .18) no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2334e57f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.run .go { padding: 9px 12px; border-radius: 10px; background: var(--vert); color: var(--vert-encre); font-weight: 600; }

@media (max-width: 1000px) {
  .links { display: none; }
  .nav .btn-small { margin-left: auto; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-subs, .t-time { grid-column: span 2; }
  .t-formats, .t-images, .t-sound, .t-control { grid-column: span 1; }
  .run { flex-wrap: wrap; align-content: center; justify-content: flex-start; row-gap: 12px; }
  .run li + li::before { display: none; }
  .t-time .vis { height: auto; min-height: 130px; padding: 18px 0; }
  .t-time .run { position: static; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .t-subs, .t-time, .t-formats, .t-images, .t-sound, .t-control { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .kar span { animation: none; } .kar span:nth-child(3) { background: var(--vert); color: var(--vert-encre); } }

/* ===================== Galerie des styles (juste après le haut) ===================== */
.styles { padding-top: clamp(24px, 4vh, 48px); }
.styles-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 32px; }
.styles-ctrl { display: flex; align-items: center; gap: 8px; }
.nav-btn { appearance: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; transition: background .2s, border-color .2s; }
.nav-btn:hover { border-color: var(--ink-2); }
.nav-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-ghost { appearance: none; height: 44px; padding: 0 18px; margin-left: 6px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 15px/1 var(--text); cursor: pointer; transition: background .2s, border-color .2s; }
.btn-ghost:hover { border-color: var(--ink-2); }
.styles.all .nav-btn { visibility: hidden; }

.style-list { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 19vw, 262px); gap: 14px; margin: 34px calc(-1 * var(--pad)) 0; padding: 4px var(--pad) 18px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; }
.style-list::-webkit-scrollbar { display: none; }
.styles.all .style-list { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; }
.style { position: relative; scroll-snap-align: start; cursor: default; }
.sv { container-type: inline-size; position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 22px; background: #000; isolation: isolate; box-shadow: var(--shadow); transition: transform .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .style:hover .sv { transform: translateY(-4px); } }
.style:first-child .sv { outline: 2px solid var(--ink); outline-offset: 3px; }
.sv .room { inset: -6%; }
.sv .person { width: 100%; bottom: 0; }
.sv::after { content: ""; position: absolute; inset: 55% 0 0; z-index: 3; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); pointer-events: none; }
.sl { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 4; display: grid; justify-items: center; gap: 6px; margin: 0; color: #fff; text-align: center; }
.sl b { font: 600 15.5px/1.1 var(--text); }
.st { font: 500 12px/1 var(--text); color: rgba(255, 255, 255, .72); }
.st.live { padding: 5px 9px; border-radius: 999px; background: var(--vert); color: var(--vert-encre); font-weight: 600; }
.styles-note { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }

/* Insta Meta : bleu, duo de tailles, texte au-dessus de la tête */
.s-meta .room { background: radial-gradient(60% 40% at 50% 25%, #3d78ff, transparent 70%), linear-gradient(#1b3fa8, #0a1a4a); }
.o-meta { position: absolute; top: 12%; left: 8%; right: 8%; z-index: 1; display: grid; margin: 0; font-family: var(--video); text-transform: uppercase; line-height: .88; color: #fff; }
.o-meta span { font: 600 8.6cqw/1 var(--video); font-stretch: 90%; color: #dbe6ff; }
.o-meta span:last-child { justify-self: end; }
.o-meta b { font: 900 25cqw/.85 var(--video); font-stretch: 60%; }

/* Réaction : gros mot bleu derrière la tête, sous-titres karaoké */
.s-react .room { background: radial-gradient(50% 40% at 30% 25%, rgba(255, 210, 160, .45), transparent 70%), linear-gradient(#2f2a26, #15120f); }
.o-behind { position: absolute; top: 20%; left: 50%; z-index: 0; transform: translateX(-50%); font: 900 25cqw/.8 var(--video); font-stretch: 60%; color: #3b7bff; white-space: nowrap; }
.s-react .person { z-index: 1; }
.o-subs { position: absolute; left: 6%; right: 6%; top: 68%; z-index: 2; margin: 0; text-align: center; font: 900 10cqw/1 var(--video); font-stretch: 80%; text-transform: uppercase; color: #fff; }
.o-subs i { font-style: normal; color: #6ea2ff; }

/* Cinéma : bandes noires, serif italique */
.s-cine .room { filter: blur(8px) saturate(.7) sepia(.25); }
.s-cine .sv::before { content: ""; position: absolute; inset: 0; z-index: 2; border-block: 11cqw solid #000; pointer-events: none; }
.o-cine { position: absolute; left: 0; right: 0; top: 50%; z-index: 2; display: grid; justify-items: center; gap: 2cqw; margin: 0; text-align: center; color: #fff; }
.o-cine em { font: italic 600 12cqw/.95 "Bodoni Moda", serif; }
.o-cine span { font: 500 4.6cqw/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }

/* Clipping : deux caméras empilées, titre blanc */
.s-clip .sv { display: grid; grid-template-rows: 1fr 1fr; }
.half { position: relative; overflow: hidden; }
.half.b { border-top: 2px solid #fff; }
.half.b .room { filter: blur(6px) hue-rotate(160deg); }
.o-title { position: absolute; left: 9%; right: 9%; top: 50%; z-index: 2; transform: translateY(-50%); margin: 0; padding: 3.5cqw 4cqw; border-radius: 5px; background: #fff; color: #111; text-align: center; font: 800 7.2cqw/1.08 var(--text); }

/* Collage : papiers déchirés et scotch */
.s-collage .room { background: radial-gradient(50% 40% at 70% 30%, rgba(255, 220, 170, .5), transparent 70%), linear-gradient(#3a5a8a, #1b2c47); }
.o-tape { position: absolute; top: 10%; left: 6%; z-index: 2; padding: 2cqw 4cqw; background: #f1ead9; color: #1b1b1b; transform: rotate(-4deg); font: 700 7cqw/1 "Courier New", monospace; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
.o-paper { position: absolute; top: 22%; right: 6%; z-index: 2; padding: 3cqw 5cqw; background: #8fd18a; color: #102010; transform: rotate(5deg); font: 900 11cqw/1 var(--video); font-stretch: 70%; text-transform: uppercase; clip-path: polygon(0 6%, 12% 0, 30% 5%, 52% 0, 74% 6%, 100% 2%, 97% 50%, 100% 96%, 78% 100%, 55% 94%, 30% 100%, 8% 95%, 0 100%, 3% 50%); }

/* Manga : noir et blanc, trame, bulle */
.s-manga .sv { filter: grayscale(1) contrast(1.4); }
.s-manga .sv::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle, rgba(0, 0, 0, .55) 1px, transparent 1.4px) 0 0 / 5px 5px; mix-blend-mode: multiply; }
.o-bubble { position: absolute; top: 12%; right: 8%; z-index: 2; padding: 4cqw 6cqw; border: 2px solid #000; border-radius: 50%; background: #fff; color: #000; font: 900 10cqw/1 var(--video); font-stretch: 75%; text-transform: uppercase; }
.o-bubble::after { content: ""; position: absolute; left: 22%; bottom: -5cqw; border: 3cqw solid transparent; border-top: 5cqw solid #000; }

/* Vlog musique : image chaude, gros titre, coupes sur le beat */
.s-vlog .room { background: radial-gradient(60% 50% at 50% 30%, rgba(255, 170, 90, .7), transparent 70%), linear-gradient(#5a3a22, #1d130c); }
.o-vlog { position: absolute; left: 7%; bottom: 22%; z-index: 2; font: 900 17cqw/.85 var(--video); font-stretch: 62%; text-transform: uppercase; color: #fff; mix-blend-mode: difference; }
.o-beat { position: absolute; inset: 0; z-index: 2; background: repeating-linear-gradient(90deg, transparent 0 22%, rgba(255, 255, 255, .9) 22% 23%, transparent 23% 46%); opacity: .0; animation: beat 1.2s steps(1) infinite; }
@keyframes beat { 0%, 85% { opacity: 0; } 86%, 92% { opacity: .5; } }

/* Intro podcast : texte qui s'écrit, curseur jaune */
.s-intro .room { filter: blur(8px) brightness(.55); }
.o-type { position: absolute; left: 8%; right: 8%; top: 40%; z-index: 2; margin: 0; font: 900 11cqw/.95 var(--video); font-stretch: 68%; text-transform: uppercase; color: #fff; }
.o-type::after { content: ""; display: inline-block; width: .45em; height: .08em; margin-left: .08em; background: #f0c040; animation: blink 1s steps(2) infinite; }

@media (max-width: 640px) {
  .style-list { grid-auto-columns: 62vw; }
  .styles.all .style-list { grid-template-columns: 1fr 1fr; gap: 10px; }
  .styles-ctrl .nav-btn { display: none; }
  .btn-ghost { margin-left: 0; }
}

/* ===================== Galerie v2 : vraies vidéos + barre de défilement ===================== */
.style-list { --h: clamp(300px, 26vw, 400px); display: flex; gap: 14px; grid-auto-flow: unset; grid-auto-columns: unset; }
.style { flex: none; width: calc(var(--h) * 9 / 16); }
.style.wide { width: calc(var(--h) * 16 / 9); }
.style .sv { aspect-ratio: auto; height: var(--h); }
.styles.all .style-list { display: flex; flex-wrap: wrap; overflow: visible; }
.styles.all .style-list { --h: clamp(300px, 26vw, 380px); }
.sv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.style:first-child .sv { outline: 2px solid var(--ink); outline-offset: 3px; }

/* La barre horizontale, à glisser */
.style-track { position: relative; height: 6px; margin: 4px 0 0; border-radius: 6px; background: var(--line); cursor: pointer; touch-action: none; }
.style-track .thumb { position: absolute; top: -4px; bottom: -4px; left: 0; width: 20%; border-radius: 8px; background: var(--ink); cursor: grab; transition: background .2s; }
.style-track .thumb::before { content: ""; position: absolute; inset: 4px 0; border-radius: 6px; background: inherit; }
.style-track .thumb { background: transparent; }
.style-track .thumb::before { background: var(--ink); }
.style-track.drag .thumb { cursor: grabbing; }
.styles.all .style-track { display: none; }
.styles-note { margin-top: 14px; }

@media (max-width: 640px) {
  .style-list { --h: 360px; }
  .style.wide { width: min(calc(var(--h) * 16 / 9), 86vw); }
  .styles.all .style-list { --h: 300px; }
  .styles.all .style, .styles.all .style.wide { width: calc(50% - 7px); }
  .styles.all .style.wide { width: 100%; }
  .styles.all .style.wide .sv { height: auto; aspect-ratio: 16 / 9; }
}

/* ===================== v4 : haut centré, interrupteurs, regroupement ===================== */
/* Haut de page centré façon outil : titre → interrupteurs → comparaison → inscription */
.hero { display: flex; flex-direction: column; align-items: center; min-height: 0; gap: 0; padding-top: clamp(28px, 5vh, 64px); padding-bottom: clamp(48px, 8vh, 96px); text-align: center; }
.hero h1 { font-size: clamp(52px, min(6.4vw, 10svh), 96px); }
.toggles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 0; padding: 0; border: 0; }

/* L'interrupteur (même dessin partout) */
.toggle { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch { position: relative; flex: none; width: 36px; height: 22px; border-radius: 11px; background: color-mix(in srgb, var(--ink) 18%, transparent); transition: background .25s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .22s var(--ease-out), background .2s; }
.toggle input:checked ~ .switch { background: var(--vert-2); }
.toggle input:checked ~ .switch::after { transform: translateX(14px); background: var(--vert-encre); }
.toggle input:focus-visible ~ .switch { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.toggle input:not(:checked) ~ .name { color: var(--ink-2); }
.toggles .toggle { padding: 10px 12px 10px 18px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(13, 22, 18, .05); font: 600 15.5px/1 var(--text); }

/* Comparaison plus petite, centrée */
.hero .app { width: min(100%, 560px); margin-top: 28px; text-align: left; }
.hero .app-body { padding-bottom: 18px; }
.hero .phone { --w: clamp(140px, min(15vw, calc((100svh - 520px) * 9 / 19.5)), 196px); }
.hero .app figcaption { text-align: center; }
.hero .waitlist { width: min(100%, 520px); margin-top: 28px; }
.hero .form-note { text-align: center; }

/* Timeline : court texte + interrupteurs expliqués */
.byline { margin-top: 18px; font: 600 clamp(20px, 1.8vw, 24px)/1.3 var(--display); letter-spacing: -.02em; color: var(--accent-text); }
.edit-list { margin: 12px 0 0; padding: 0; border: 0; }
.edit-list .hint { margin-bottom: 8px; font-size: 15px; color: var(--ink-2); }
.toggle.row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 13px 0; border-top: 1px solid var(--line); }
.toggle.row:last-child { border-bottom: 1px solid var(--line); }
.toggle.row .name { font: 600 16px/1.2 var(--text); }
.toggle.row .desc { font-size: 15px; color: var(--ink-2); }
.edit-list li { display: none; }
.pblank { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 1.4cqw 2.4cqw; border-radius: 1.6cqw; background: rgba(12, 11, 10, .75); font: 600 2.4cqw/1 var(--text); color: #e4d8c5; opacity: 0; transition: opacity .2s; }
.pblank.on { opacity: 1; }

/* Mosaïque : 5 cases */
.t-images, .t-sound { grid-column: span 3; }

/* Trois gestes : titre sur une ligne + « 0 connaissance » */
.how h2 { max-width: none; }
.how-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 40px; }
.how-head .sub { margin: 0; font-size: clamp(17px, 1.4vw, 20px); }
.no-skill { display: inline-flex; align-items: center; gap: 14px; padding: 10px 22px 10px 12px; border-radius: 20px; background: linear-gradient(165deg, var(--deep-2), var(--deep)); color: var(--deep-ink); }
.ns-zero { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--vert); color: var(--vert-encre); font: 600 34px/1 var(--display); letter-spacing: -.04em; }
.no-skill span:last-child { text-align: left; font: 600 16px/1.25 var(--text); }

@media (max-width: 1000px) {
  .t-images, .t-sound { grid-column: span 1; }
}
@media (max-width: 640px) {
  .toggles .toggle { padding: 8px 10px 8px 14px; font-size: 14.5px; }
  .hero .phone { --w: 38vw; }
  .toggle.row { grid-template-columns: 96px minmax(0, 1fr) auto; }
}

/* ===================== v5 : piste B3 — verre dépoli, la lumière vient du résultat ===================== */
:root { --glass: rgba(255, 255, 255, .58); --glass-edge: rgba(255, 255, 255, .75); --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root[data-theme="sombre"] { --glass: rgba(22, 32, 28, .55); --glass-edge: rgba(255, 255, 255, .08); }

/* Les écrans du produit passent en clair : leurs textes suivent l'encre de la page */
.app, .editor, .mock, .tile .vis { --deep-ink: var(--ink); --deep-ink-2: var(--ink-2); --deep-line: var(--line); --deep-line-2: var(--line-2); }
.app, .editor {
  position: relative; color: var(--ink);
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(1.35); backdrop-filter: blur(24px) saturate(1.35);
  box-shadow: inset 0 0 0 1px var(--glass-edge), inset 0 1px 0 rgba(255, 255, 255, .9), 0 30px 60px -30px rgba(13, 22, 18, .35);
}
.app::after, .editor::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: .07; mix-blend-mode: multiply; background-image: var(--noise); background-size: 160px; }
.app > *, .editor > * { position: relative; z-index: 1; }
.app-bar .mark { color: var(--vert-2); }
.app-state { color: var(--accent-text); }

/* La lumière : derrière la vidéo montée (haut de page) */
.hero { position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -2; left: 50%; top: 22%; width: min(980px, 140%); height: 78%; transform: translateX(-38%); pointer-events: none;
  background: radial-gradient(22% 36% at 60% 52%, rgba(52, 229, 127, .8), transparent 70%), radial-gradient(11% 20% at 60% 47%, rgba(225, 255, 238, .95), transparent 70%), radial-gradient(38% 46% at 66% 64%, rgba(31, 196, 110, .32), transparent 75%);
  filter: blur(32px); }
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .14; mix-blend-mode: soft-light; background-image: var(--noise); background-size: 160px; }
.hero .col-in .phone { filter: saturate(.7) brightness(.92); }

/* La lumière : derrière le lecteur (section éditeur) */
.edit { position: relative; isolation: isolate; }
.edit::before { content: ""; position: absolute; z-index: -2; right: 2%; top: 4%; width: 62%; height: 70%; pointer-events: none;
  background: radial-gradient(30% 34% at 58% 36%, rgba(52, 229, 127, .6), transparent 70%), radial-gradient(14% 18% at 58% 32%, rgba(225, 255, 238, .85), transparent 70%);
  filter: blur(36px); }
.edit::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .12; mix-blend-mode: soft-light; background-image: var(--noise); background-size: 160px; }

/* Timeline en clair */
.track b { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.track b.on { background: var(--vert); border-color: var(--vert-2); }
.track b.dot.on { background: var(--vert-2); }
.playhead, .playhead::before { background: var(--ink); }

/* Étapes : petits écrans clairs */
.mock { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.band .mock { background: var(--bg); }
.file { background: var(--surface-2); }
.mock-drop svg, .file svg { color: var(--vert-2); }
.bar { background: var(--surface-2); }

/* Mosaïque : écrans clairs, une lumière douce dans un coin, grain */
.tile .vis { color: var(--ink); background: radial-gradient(70% 90% at 100% 0%, rgba(52, 229, 127, .16), transparent 60%), var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.tile .vis::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .1; mix-blend-mode: multiply; background-image: var(--noise); background-size: 160px; }
.t-subs .vis { color: #fff; background: radial-gradient(60% 80% at 80% 10%, rgba(52, 229, 127, .25), transparent 60%), linear-gradient(165deg, #1a2420, #0c1210); }
.fmt { background: var(--surface); }
.fmt.v { color: var(--accent-text); border-color: var(--vert-2); }
.rights { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.wave i { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.wave i:nth-child(9), .wave i:nth-child(23), .wave i:nth-child(36) { background: var(--vert-2); }
.run .ok::after { background-color: rgba(31, 196, 110, .16); }
/* grain limité à la zone de lumière (le reste de la page reste propre) */
.hero::after { opacity: .22; -webkit-mask: radial-gradient(34% 40% at calc(50% + 140px) 62%, #000 20%, transparent 72%); mask: radial-gradient(34% 40% at calc(50% + 140px) 62%, #000 20%, transparent 72%); }
.edit::before { right: -6%; top: -8%; width: 74%; height: 90%; background: radial-gradient(34% 36% at 66% 34%, rgba(52, 229, 127, .7), transparent 70%), radial-gradient(16% 18% at 66% 30%, rgba(225, 255, 238, .9), transparent 70%), radial-gradient(40% 40% at 80% 60%, rgba(31, 196, 110, .3), transparent 75%); }
.edit::after { opacity: .22; -webkit-mask: radial-gradient(36% 46% at 76% 34%, #000 20%, transparent 72%); mask: radial-gradient(36% 46% at 76% 34%, #000 20%, transparent 72%); }

html { overflow-x: clip; }
.hero, .edit { overflow-x: clip; }

/* ===== Chaîne « Prête en quelques minutes » : barre de progression ===== */
.t-time .vis { height: auto; min-height: 132px; display: grid; align-items: center; padding: 26px clamp(16px, 3vw, 40px); }
.run { position: static; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; gap: 0; margin: 0; padding: 0; list-style: none; }
.run li { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; white-space: normal; padding: 0 4px; }
.run li + li::before { content: none; }
.run .ok::after { content: none; }
/* la ligne qui relie au rond précédent */
.run li:not(:first-child)::after { content: ""; position: absolute; top: 11px; right: 50%; width: 100%; height: 2px; margin-right: 11px; background: linear-gradient(90deg, var(--vert-2) 50%, var(--line-2) 50%) 100% 0 / 200% 100%; animation: run-line 6s var(--ease-out) infinite; animation-delay: calc(var(--i) * .7s - .35s); z-index: 0; }
.run .node { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-2); animation: run-node 6s var(--ease-out) infinite; animation-delay: calc(var(--i) * .7s); }
.run .node::after { content: ""; width: 12px; height: 12px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2304140a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); opacity: 0; animation: run-check 6s var(--ease-out) infinite; animation-delay: calc(var(--i) * .7s); }
.run .lbl { font: 500 14px/1.25 var(--text); color: var(--ink-2); }
.run .last .node { width: 30px; height: 30px; margin-top: -3px; }
.run .last .lbl { font-weight: 700; color: var(--ink); }
@keyframes run-node { 0% { background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-2); } 6%, 92% { background: var(--vert); box-shadow: inset 0 0 0 2px var(--vert-2); } 100% { background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-2); } }
@keyframes run-check { 0% { opacity: 0; transform: scale(.85); } 6%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes run-line { 0% { background-position: 100% 0; } 8%, 92% { background-position: 0 0; } 100% { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .run .node { background: var(--vert); box-shadow: inset 0 0 0 2px var(--vert-2); }
  .run .node::after { opacity: 1; }
  .run li:not(:first-child)::after { background: var(--vert-2); }
}
@media (max-width: 1000px) {
  .t-time .run { position: static; }
}
@media (max-width: 640px) {
  .run { grid-template-columns: 1fr; gap: 14px; }
  .run li { grid-template-columns: 30px 1fr; justify-items: start; align-items: center; text-align: left; }
  .run .node { justify-self: center; }
  .run li:not(:first-child)::after { top: auto; bottom: 100%; right: auto; left: 14px; width: 2px; height: 14px; margin: 0 0 -1px; background: linear-gradient(180deg, var(--vert-2) 50%, var(--line-2) 50%) 0 100% / 100% 200%; animation-name: run-line-v; }
  @keyframes run-line-v { 0% { background-position: 0 100%; } 8%, 92% { background-position: 0 0; } 100% { background-position: 0 100%; } }
}

/* ===================== Variante « règles Joseph » (?da=joseph) — à comparer, pas validée ===================== */
h2 em { font-style: normal; }            /* par défaut : aucun changement visible */
:root[data-da="joseph"] {
  /* 60-30-10 tiré du vert : principale = vert foncé, secondaire = vert clair terne, accent = vert vif */
  --ink: #12301f;            /* principale (foncée) */
  --ink-2: #3f5c4c;
  --sage: #b9dcc7;           /* secondaire (claire, terne) */
  --sage-soft: #e4f1e8;
  --accent-text: #11924f;
}
/* Typo : sans principale + serif italique secondaire, en couleur d'accent */
:root[data-da="joseph"] h1 em, :root[data-da="joseph"] h2 em { font-family: "Bodoni Moda", Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: -.02em; color: var(--accent-text); }
:root[data-da="joseph"] .final h2 em { color: var(--vert-encre); }
/* La secondaire prend ses 30 % : bandes, interrupteurs, écrans clairs */
:root[data-da="joseph"] .band { background: var(--sage-soft); border-color: rgba(18, 48, 31, .08); }
:root[data-da="joseph"] .toggles .toggle { background: var(--sage-soft); box-shadow: inset 0 0 0 1px rgba(18, 48, 31, .12); }
:root[data-da="joseph"] .switch { background: var(--sage); }
:root[data-da="joseph"] .tile .vis { background: radial-gradient(70% 90% at 100% 0%, rgba(52, 229, 127, .18), transparent 60%), var(--sage-soft); }
:root[data-da="joseph"] .step { background: #fff; }
:root[data-da="joseph"] .btn-ghost, :root[data-da="joseph"] .nav-btn { background: var(--sage-soft); }
:root[data-da="joseph"] .style-track { background: var(--sage); }
:root[data-da="joseph"] .track b { background: rgba(185, 220, 199, .45); }

/* ===================== Page Styles ===================== */
.pill { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: var(--sage-soft, var(--surface-2)); color: var(--ink-2); font: 600 12.5px/1 var(--text); white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line); }
.pill-on { background: var(--vert); color: var(--vert-encre); box-shadow: none; }
.sp-head { padding-bottom: 8px; text-align: center; }
.sp-head .sub { margin: 18px auto 0; max-width: 48ch; }
.sp-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 26px; font-size: 15px; color: var(--ink-2); }
.sp-legend p { display: inline-flex; align-items: center; gap: 10px; }
.sp-cat { padding-top: 28px; }
.sp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.seg button { appearance: none; border: 0; padding: 10px 16px; border-radius: 999px; background: none; color: var(--ink-2); font: 600 14.5px/1 var(--text); cursor: pointer; transition: background .2s, color .2s; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.sp-count { font-size: 14.5px; color: var(--ink-2); }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.sp-loading { color: var(--ink-2); }
.sp-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 20px 40px -32px rgba(13, 22, 18, .4); }
.sp-card.wide { grid-column: span 2; }
.sp-media { position: relative; aspect-ratio: 9 / 12; background: #0c1210; overflow: hidden; }
.sp-card.wide .sp-media { aspect-ratio: 16 / 9; }
.sp-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-body { display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 22px; flex: 1; }
.sp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sp-top h3 { font: 600 22px/1.15 var(--display); letter-spacing: -.02em; }
.sp-pitch { color: var(--ink); }
.sp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-tags span { padding: 5px 9px; border-radius: 8px; background: var(--bg); font: 500 12.5px/1 var(--text); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.sp-adds { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--ink-2); }
.sp-adds li { display: flex; gap: 9px; }
.sp-adds li::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; background: rgba(31, 196, 110, .18) no-repeat center / 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2311924f' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sp-last { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.sp-last b { color: var(--ink); font-weight: 600; }
.sp-try { align-self: flex-start; display: inline-flex; align-items: center; text-decoration: none; }

.sp-jhead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 60px; align-items: start; }
.sp-rule { padding: 20px 22px; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sp-rule h3 { font-size: 17px; }
.sp-rule ol { margin: 10px 0 0; padding-left: 20px; color: var(--ink-2); display: grid; gap: 4px; }
.sp-log { margin: 36px 0 0; padding: 0; list-style: none; }
.sp-log li { display: grid; grid-template-columns: 110px 160px 80px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); }
.sp-log li:last-child { border-bottom: 1px solid var(--line); }
.sp-log time { font: 600 14.5px/1.3 var(--text); }
.sp-log a { font-weight: 600; text-decoration: none; }
.sp-log a:hover { text-decoration: underline; }
.sp-log .pill { justify-self: start; }
.sp-log p { color: var(--ink-2); }
.sp-select { width: 100%; height: 54px; margin-bottom: 10px; padding: 0 16px; border: 0; border-radius: calc(var(--r-m) + 6px); background: var(--vert-encre); color: #eef3ef; font: 500 16px/1 var(--text); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23a6f7c8' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; }

@media (max-width: 760px) {
  .sp-card.wide { grid-column: auto; }
  .sp-jhead { grid-template-columns: 1fr; }
  .sp-log li { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .sp-log li a { grid-column: 1; }
  .sp-log li .pill { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .sp-log li p { grid-column: 1 / -1; }
}
.pill-mid { background: var(--sage, #b9dcc7); color: var(--ink); box-shadow: none; }
.pill-soft { background: transparent; }
.sp-bases .sub { margin-top: 14px; }
.sp-base-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 34px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.sp-base-list li { padding: 22px 20px 6px 0; }
.sp-base-list li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.sp-base-list h3 { font: 600 18px/1.2 var(--display); letter-spacing: -.02em; }
.sp-base-list h3::before { content: ""; display: block; width: 22px; height: 22px; margin-bottom: 14px; border-radius: 7px; background: var(--vert) no-repeat center / 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2304140a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sp-base-list p { margin-top: 8px; font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 1000px) { .sp-base-list { grid-template-columns: 1fr 1fr; } .sp-base-list li, .sp-base-list li + li { padding: 18px 16px 14px 0; border-left: 0; border-bottom: 1px solid var(--line); } }
@media (max-width: 560px) { .sp-base-list { grid-template-columns: 1fr; } }

a.btn-ghost { display: inline-flex; align-items: center; text-decoration: none; }

.sp-top { flex-direction: column; align-items: flex-start; gap: 8px; }

/* ===================== Page Styles v2 : cartes compactes ===================== */
.ratio { display: inline-block; flex: none; border: 1.5px solid currentColor; border-radius: 3px; opacity: .8; }
.ratio.h { width: 16px; height: 10px; }
.ratio.v { width: 9px; height: 15px; }
.sp-group { display: flex; align-items: center; gap: 10px; margin: 30px 0 14px; font: 600 15px/1 var(--text); color: var(--ink-2); }
.sp-group:first-child { margin-top: 0; }
.sp-grid-h { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-grid-v { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.sp-card.wide { grid-column: auto; }
.sp-media { aspect-ratio: 9 / 13; }
.sp-media .sp-new { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 6px 10px; border-radius: 999px; background: var(--vert); color: var(--vert-encre); font: 600 12px/1 var(--text); }
.sp-body { gap: 8px; padding: 14px 16px 16px; }
.sp-top { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; }
.sp-top h3 { font-size: 19px; }
.sp-pitch { font-size: 15px; line-height: 1.4; }
.sp-sign { font-size: 13.5px; color: var(--ink-2); }
.sp-adds, .sp-last { display: none; }
.sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }
.sp-tags { gap: 5px; }
.sp-tags span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: 12px; }
.sp-try { flex: none; padding: 9px 14px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 600 13.5px/1 var(--text); text-decoration: none; transition: transform var(--press) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .sp-try:hover { transform: translateY(-1px); } }
.sp-try:active { transform: scale(.97); }
.sp-log li { grid-template-columns: 90px 170px 70px minmax(0, 1fr); }
.sp-flag { font: 600 12px/1 var(--text); color: var(--accent-text); }
@media (max-width: 860px) { .sp-grid-h { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .sp-grid-v { grid-template-columns: 1fr 1fr; gap: 10px; } .sp-grid-v .sp-pitch { font-size: 14px; } .sp-grid-v .sp-foot { flex-direction: column; align-items: flex-start; } }

.sp-flag { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.sp-flag:not(:empty)::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vert-2); }

.sp-top .pill { max-width: 100%; white-space: normal; }

.sp-opt { font-size: 13px; color: var(--ink); }

/* ===== Page Styles : ce que tu pourras ajouter ===== */
.sp-add { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px clamp(32px, 5vw, 80px); align-items: center; position: relative; isolation: isolate; overflow-x: clip; }
.sp-add::before { content: ""; position: absolute; z-index: -2; right: 0; top: 10%; width: 55%; height: 80%; pointer-events: none; background: radial-gradient(30% 40% at 60% 55%, rgba(52, 229, 127, .45), transparent 70%); filter: blur(36px); }
.sp-add .sub { margin-top: 16px; max-width: 42ch; }
.sp-rights { margin-top: 24px; max-width: 46ch; padding: 14px 16px; border-radius: var(--r-m); background: var(--sage-soft, var(--surface-2)); color: var(--ink-2); font-size: 15px; }
.sp-rights b { color: var(--ink); }
.sp-upload { width: 100%; }
.sp-files { margin: 0; padding: 6px 18px; list-style: none; }
.sp-files li { display: grid; grid-template-columns: 44px 130px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.sp-files li:first-child { border-top: 0; }
.sp-files .ft { display: grid; place-items: center; height: 26px; border-radius: 7px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font: 700 10.5px/1 var(--text); letter-spacing: .04em; color: var(--ink-2); }
.sp-files b { font-weight: 600; }
.sp-files span:last-child { color: var(--ink-2); }
.sp-check { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 18px 18px; border-top: 1px solid var(--line); font: 600 14.5px/1.3 var(--text); }
.sp-check .box { flex: none; width: 18px; height: 18px; border-radius: 5px; background: var(--vert) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2304140a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (max-width: 900px) { .sp-add { grid-template-columns: 1fr; } .sp-add::before { width: 100%; top: 40%; } }
@media (max-width: 560px) { .sp-files li { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; } .sp-files li > span:last-child { grid-column: 2; } .sp-files .ft { grid-row: span 2; } }

/* Bouton son sur les démos qui ont une musique */
.sp-sound { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px 8px 10px; border: 0; border-radius: 999px; background: rgba(12, 17, 15, .62); color: #fff; font: 600 13px/1 var(--text); cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s; }
.sp-sound:hover { background: rgba(12, 17, 15, .8); }
.sp-sound svg { width: 18px; height: 18px; }
.sp-sound .on { display: none; }
.sp-sound[aria-pressed="true"] { background: var(--vert); color: var(--vert-encre); }
.sp-sound[aria-pressed="true"] .on { display: inline; }
.sp-sound[aria-pressed="true"] .off { display: none; }

/* ===================== v6 : galerie en accroche, comparaison dessous ===================== */
.hero.hero-gallery { display: block; min-height: 0; text-align: center; padding-bottom: clamp(24px, 4vh, 48px); }
.hero.hero-gallery::before, .hero.hero-gallery::after { content: none; }
.hero-gallery .styles { margin-top: clamp(18px, 3vh, 32px); text-align: left; }
.hero-gallery .styles-head { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.hero-gallery .styles-head .sub { margin-top: 8px; }
.hero-gallery h2.pick { font-size: clamp(26px, 2.6vw, 36px); }
.hero-gallery .style-list { margin-top: 24px; }
.hero-gallery .styles-note { text-align: center; }

.compare { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; isolation: isolate; overflow-x: clip; padding-top: clamp(48px, 8vh, 96px); }
.compare .app { width: min(100%, 560px); margin-top: 28px; text-align: left; }
.compare .app-body { padding-bottom: 18px; }
.compare .phone { --w: clamp(140px, min(15vw, calc((100svh - 420px) * 9 / 19.5)), 196px); }
.compare .col-in .phone { filter: saturate(.7) brightness(.92); }
.compare .app figcaption { text-align: center; }
.compare .waitlist { width: min(100%, 520px); margin-top: 28px; }
.compare .form-note { text-align: center; }
.compare::before { content: ""; position: absolute; z-index: -2; left: 50%; top: 28%; width: min(980px, 140%); height: 70%; transform: translateX(-38%); pointer-events: none;
  background: radial-gradient(22% 36% at 60% 52%, rgba(52, 229, 127, .8), transparent 70%), radial-gradient(11% 20% at 60% 47%, rgba(225, 255, 238, .95), transparent 70%), radial-gradient(38% 46% at 66% 64%, rgba(31, 196, 110, .32), transparent 75%);
  filter: blur(32px); }
.compare::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: soft-light; background-image: var(--noise); background-size: 160px;
  -webkit-mask: radial-gradient(34% 34% at calc(50% + 140px) 58%, #000 20%, transparent 72%); mask: radial-gradient(34% 34% at calc(50% + 140px) 58%, #000 20%, transparent 72%); }
@media (max-width: 640px) { .compare .phone { --w: 38vw; } }
@media (max-width: 640px) {
  .hero-gallery .styles-ctrl { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .hero-gallery .btn-ghost { height: 40px; padding: 0 13px; margin: 0; font-size: 13.5px; white-space: nowrap; }
}

/* ===================== Studio (app) — maquette du 2026-11-03 ===================== */
.seg button[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.seg button:disabled { opacity: .45; cursor: not-allowed; }
.seg-sm button { padding: 8px 13px; font-size: 13.5px; }
.studio-page { min-height: 100svh; }
.studio-page .nav { gap: 18px; }
.st-proto { margin: 0 auto 0 8px; padding: 6px 12px; border-radius: 999px; background: var(--sage-soft, var(--surface-2)); font: 500 13px/1.2 var(--text); color: var(--ink-2); }
.studio-page .links { margin-left: 0; }

.studio { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "title stage" "panel stage"; column-gap: clamp(24px, 3.5vw, 56px); row-gap: 0; max-width: 1400px; margin: 0 auto; padding: clamp(12px, 3vh, 36px) var(--pad) 48px; align-items: start; }
.studio .st-step { max-width: none; }
.studio .st-stage { max-width: none; margin: 0; }
.studio [hidden] { display: none !important; }
.st-title { grid-area: title; font-size: clamp(40px, 3.6vw, 56px); margin-bottom: 8px; }
.st-panel { grid-area: panel; min-width: 0; }
.st-stage { grid-area: stage; }
.studio:not([data-phase="reglages"]) .st-go { display: none; }
.studio:not([data-phase="reglages"]) #st-view { display: none; }
.st-state { margin-left: auto; }

/* Les étapes, séparées par des traits fins */
.st-step { margin: 0; padding: 26px 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
#s-rush { border-top: 0; padding-top: 22px; }
.st-h { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 14px; padding: 0; font: 600 19px/1.2 var(--text); letter-spacing: -.01em; }
.st-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-2); background: no-repeat center / 11px; transition: background-color .3s, box-shadow .3s; }
.st-step.done .st-dot { background-color: var(--vert); box-shadow: inset 0 0 0 2px var(--vert-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2304140a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#s-style .st-dot, #s-opts .st-dot { background-color: var(--vert); box-shadow: inset 0 0 0 2px var(--vert-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2304140a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.st-opt { margin-left: 2px; font: 500 13.5px/1 var(--text); color: var(--ink-2); }
.st-opts > legend { float: left; }
.st-opts > legend + * { clear: both; }
.st-hint { margin: -6px 0 6px; font-size: 15px; color: var(--ink-2); }
.st-label { font: 600 14.5px/1.2 var(--text); }
.st-link { appearance: none; padding: 0; border: 0; background: none; color: #0b7340; font: 600 14.5px/1.3 var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.st-link:hover { color: var(--ink); }

/* 1. Dépôt */
.st-drop { display: grid; justify-items: center; gap: 6px; padding: 30px 20px; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-2); text-align: center; cursor: pointer; transition: box-shadow .3s var(--ease-out), background .3s; }
.st-drop svg { width: 30px; height: 30px; margin-bottom: 6px; color: var(--vert-2); transition: transform .5s var(--ease-out); }
.st-drop:hover, .st-drop.over { box-shadow: inset 0 0 0 2px var(--vert-2); }
.st-drop.over { background: var(--sage-soft, var(--surface-2)); }
.st-drop.over svg { transform: translateY(-4px); }
.st-drop:focus-within { box-shadow: inset 0 0 0 2px var(--accent-text); }
.st-drop-main { font: 600 18px/1.2 var(--display); letter-spacing: -.02em; }
.st-drop-sub { font-size: 14.5px; color: var(--ink-2); }
.st-drop-sub u { color: #0b7340; text-underline-offset: 3px; }
.st-sample { display: block; margin-top: 12px; font-weight: 500; color: var(--ink-2); }
.st-file { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.st-thumb { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; background: #0c1210; filter: saturate(.4); }
.st-thumb.is-sample { background: radial-gradient(40% 30% at 22% 26%, rgba(255, 196, 120, .55), transparent 70%), radial-gradient(30% 34% at 50% 58%, #2a1f19, transparent 72%), linear-gradient(180deg, #3b3027, #18130f); }
.st-file-info { display: grid; gap: 3px; min-width: 0; }
.st-file-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15.5px/1.2 var(--text); }
.st-file-info span { font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* 2. Style */
.st-styles { display: flex; gap: 10px; overflow-x: auto; margin: 0 -6px; padding: 4px 6px 8px; scroll-snap-type: x mandatory; scroll-padding: 6px; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.st-styles::-webkit-scrollbar { display: none; }
.st-styles.end { -webkit-mask: none; mask: none; }
.st-style { appearance: none; flex: none; display: grid; gap: 8px; width: 104px; padding: 6px 6px 10px; border: 0; border-radius: 18px; background: none; color: var(--ink); text-align: left; cursor: pointer; scroll-snap-align: start; transition: background .25s, box-shadow .25s; }
.st-style:hover { background: var(--surface); }
.st-style[aria-checked="true"] { background: var(--surface); box-shadow: inset 0 0 0 2px var(--vert-2), 0 10px 24px -16px rgba(13, 22, 18, .45); }
.st-poster { display: grid; place-items: center; height: 120px; overflow: hidden; border-radius: 12px; background: #0c1210; }
.st-poster img { width: 100%; height: 100%; object-fit: cover; }
.st-poster.h img { height: auto; aspect-ratio: 16 / 9; }
.st-sname { padding: 0 4px; font: 600 14px/1.2 var(--text); }
.st-loading { color: var(--ink-2); font-size: 15px; }
.st-soon { margin-top: 4px; font-size: 13.5px; color: var(--ink-2); }
.st-pitch { margin-top: 12px; font-size: 15.5px; }
.st-pitch span { display: block; margin-top: 2px; font-size: 14.5px; color: var(--ink-2); }
.st-format { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 18px; }

/* 3. Ajouts : interrupteurs en liste */
.st-optlist .toggle.row { grid-template-columns: 116px minmax(0, 1fr) auto; padding: 12px 0; }
.st-optlist .toggle.row:first-child { border-top: 0; }
.st-optlist .toggle.row:last-child { border-bottom: 0; }

/* 4. Consignes */
.st-area { position: relative; }
.st-area textarea { display: block; width: 100%; min-height: 104px; padding: 14px 16px 30px; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--surface); color: var(--ink); font: 400 16px/1.5 var(--text); resize: vertical; caret-color: var(--accent-text); transition: border-color .3s var(--ease-out); }
.st-area textarea:focus { outline: 0; border-color: var(--accent-text); }
.st-area textarea::placeholder { color: var(--ink-2); opacity: .9; }
.st-count { position: absolute; right: 14px; bottom: 9px; font: 500 12.5px/1 var(--text); font-variant-numeric: tabular-nums; color: var(--ink-2); pointer-events: none; }
.st-ideas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.st-idea { appearance: none; padding: 8px 13px; border: 0; border-radius: 999px; background: var(--sage-soft, var(--surface-2)); color: var(--ink); font: 500 14px/1 var(--text); cursor: pointer; transition: background .2s; }
.st-idea:hover { background: var(--sage, var(--line-2)); }
.st-idea[aria-pressed="true"] { background: var(--sage, var(--line-2)); color: var(--ink-2); }
.st-imgs { margin-top: 18px; }
.st-addimg { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); font: 600 14.5px/1.2 var(--text); cursor: pointer; transition: box-shadow .2s; }
.st-addimg:hover, .st-addimg:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent-text); }
.st-addimg svg { width: 22px; height: 22px; color: var(--accent-text); }
.st-addimg small { margin-left: 4px; font-weight: 500; font-size: 13.5px; color: var(--ink-2); }
.st-imglist { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.st-imglist:empty { display: none; }
.st-imglist li { display: inline-flex; align-items: center; gap: 8px; max-width: 220px; padding: 4px 4px 4px 4px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; }
.st-imglist img { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; }
.st-imglist span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-imglist button { appearance: none; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 7px; background: none; color: var(--ink-2); cursor: pointer; }
.st-imglist button:hover { background: var(--surface-2); color: var(--ink); }
.st-imglist svg { width: 15px; height: 15px; }
.st-rights { position: relative; display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font: 600 14.5px/1.3 var(--text); cursor: pointer; }
.st-rights input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.st-rights .box { flex: none; width: 20px; height: 20px; border: 1.5px solid var(--line-2); border-radius: 6px; background: var(--surface) no-repeat center / 13px; transition: background-color .2s, border-color .2s; }
.st-rights input:checked + .box { border-color: var(--vert-2); background-color: var(--vert); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2304140a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.st-rights input:focus-visible + .box { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* Barre de lancement, collée en bas de la colonne */
.st-go { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 4px calc(var(--pad) * -.5) 0; padding: 14px calc(var(--pad) * .5) 18px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.st-sum { display: flex; flex-wrap: wrap; gap: 4px 0; min-width: 0; font-size: 14.5px; color: var(--ink-2); }
.st-sum span { font-weight: 600; color: var(--ink); }
.st-sum span + span::before { content: ""; display: inline-block; width: 1px; height: 12px; margin: 0 10px; vertical-align: -1px; background: var(--line-2); }
.st-sum.err { color: #c2341f; }
.st-go .btn { flex: none; }
.btn[disabled] { opacity: 1; cursor: not-allowed; background: color-mix(in srgb, var(--ink) 10%, transparent); color: color-mix(in srgb, var(--ink) 45%, transparent); box-shadow: none; transform: none; }
.studio[data-phase="run"] .st-panel, .studio[data-phase="done"] .st-panel { opacity: .5; transition: opacity .5s var(--ease-out); }

/* Colonne de droite : la scène en verre, la lumière vient de la vidéo */
.st-stage { --glow: .8; --run: 0; position: sticky; top: 84px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; isolation: isolate; padding: 18px clamp(16px, 2.4vw, 32px) 26px; border-radius: var(--r-l); background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(1.35); backdrop-filter: blur(24px) saturate(1.35); box-shadow: inset 0 0 0 1px var(--glass-edge), inset 0 1px 0 rgba(255, 255, 255, .9), 0 30px 60px -30px rgba(13, 22, 18, .35); }
.st-stage > * { position: relative; z-index: 1; }
.st-light { position: absolute !important; z-index: 0 !important; inset: 4% -2% 6%; pointer-events: none; opacity: var(--glow); transform: scale(calc(.8 + var(--glow) * .25)); transition: opacity .9s var(--ease-out), transform 1.2s var(--ease-out);
  background: radial-gradient(50% 44% at 50% 48%, rgba(52, 229, 127, .95), transparent 72%), radial-gradient(26% 24% at 50% 40%, rgba(225, 255, 238, 1), transparent 70%), radial-gradient(64% 54% at 50% 64%, rgba(31, 196, 110, .55), transparent 76%);
  filter: blur(30px); }
.st-light::after { content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: soft-light; background-image: var(--noise); background-size: 160px; -webkit-mask: radial-gradient(45% 45% at 50% 50%, #000 30%, transparent 75%); mask: radial-gradient(45% 45% at 50% 50%, #000 30%, transparent 75%); }
.studio[data-phase="run"] .st-light { opacity: calc(.35 + var(--run) * .65); }
.studio[data-phase="done"] .st-light { opacity: 1; transform: scale(1.08); }
.studio:not([data-phase="reglages"]) .st-device:not([data-fmt="16:9"]) { --h: clamp(340px, calc(100svh - 400px), 560px); }
.st-stage-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.st-state { display: inline-flex; align-items: center; gap: 8px; font: 600 13.5px/1 var(--text); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.st-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); }
.st-state.run i { background: var(--vert-2); animation: pulse .9s var(--ease-in-out) infinite alternate; }
.st-state.ok { color: #0b7340; }
.st-state.ok i { background: var(--vert); }

/* L'appareil : 9:16, 4:5 ou 16:9 */
.st-device { --h: clamp(380px, calc(100svh - 300px), 620px); position: relative; height: var(--h); aspect-ratio: 9 / 16; padding: calc(var(--h) * .012); border-radius: calc(var(--h) * .06); background: linear-gradient(160deg, #2b3430, #0b0f0d 40%, #1a211e); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 40px 60px -30px rgba(0, 0, 0, .7); transition: aspect-ratio .6s var(--ease-out); }
.st-device[data-fmt="4:5"] { aspect-ratio: 4 / 5; --h: clamp(300px, calc(100svh - 360px), 480px); }
.st-device[data-fmt="16:9"] { aspect-ratio: 16 / 9; height: auto; width: min(100%, 680px); --h: 360px; border-radius: 22px; }
.st-screen { container-type: inline-size; position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--h) * .05); background: #000; isolation: isolate; }
.st-device[data-fmt="16:9"] .st-screen { border-radius: 16px; }
.st-screen video, .st-fake { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 38%; }
.st-fake { overflow: hidden; }
[data-view="rush"] .st-screen video, [data-view="rush"] .st-fake { filter: saturate(.45) contrast(.9) brightness(.92); transition: filter .6s var(--ease-out); }
[data-view="rush"] .graded .st-screen video, [data-view="rush"] .graded .st-fake { filter: saturate(1.15) contrast(1.06); }
[data-view="rush"] .zoom-on .st-screen video, [data-view="rush"] .zoom-on .st-fake { animation: st-zoom 7s var(--ease-out) infinite; }
.st-device[data-fmt="16:9"] .st-fake .person { left: 32%; width: 36%; bottom: -10%; }
.st-device[data-fmt="4:5"] .st-fake .person { left: 12%; width: 76%; bottom: -14%; }
@keyframes st-zoom { 0%, 38% { transform: scale(1); } 46%, 70% { transform: scale(1.12); } 78%, 100% { transform: scale(1); } }

/* Calques simulés (seulement sur ton rush) */
.st-layers { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; }
[data-view="rush"] .st-layers { opacity: 1; }
.st-giant { position: absolute; left: 50%; top: 14%; margin: 0; transform: translateX(-50%) scale(.96); font: 900 22cqw/.8 var(--video); font-stretch: 62%; color: var(--vert); opacity: 0; filter: blur(8px); transition: opacity .55s var(--ease-out), filter .55s var(--ease-out), transform .7s var(--ease-out); }
.anim-on .st-giant { opacity: .95; filter: none; transform: translateX(-50%) scale(1); }
.st-subs { position: absolute; left: 6%; right: 6%; top: 66%; margin: 0; text-align: center; color: #fff; font: 900 9.5cqw/1.12 var(--video); font-stretch: 78%; text-transform: uppercase; opacity: 0; transition: opacity .3s; }
.st-device[data-fmt="16:9"] .st-subs { top: auto; bottom: 9%; font-size: 4.6cqw; }
.st-device[data-fmt="16:9"] .st-giant { font-size: 12cqw; top: 18%; }
.subs-on .st-subs { opacity: 1; }
.st-subs .w { display: inline-block; margin: 0 .08em; padding: 0 .08em; border-radius: 3px; opacity: 0; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); transition: opacity .25s var(--ease-out), background .15s, color .15s; }
.st-subs .w.in { opacity: 1; }
.st-subs .w.now { background: var(--vert); color: var(--vert-encre); text-shadow: none; }
.st-rec { position: absolute; top: 5cqw; left: 6cqw; display: flex; align-items: center; gap: 2cqw; font: 700 4.6cqw/1 var(--text); letter-spacing: .04em; color: rgba(244, 239, 230, .9); opacity: 0; transition: opacity .3s; }
.st-rec i { width: 2.8cqw; height: 2.8cqw; border-radius: 50%; background: var(--rec); animation: blink 1.4s steps(2) infinite; }
.brut .st-rec { opacity: 1; }
.st-device[data-fmt="16:9"] .st-rec { font-size: 2.2cqw; top: 3cqw; left: 3cqw; }

/* Pendant le montage : un balayage vert descend sur l'image */
.st-progress { position: absolute; inset: 0; pointer-events: none; }
.st-scan { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--run) * 100%); background: linear-gradient(180deg, transparent 0 calc(100% - 3px), var(--vert) calc(100% - 3px)); }
.st-caption { margin: 0; font-size: 13.5px; color: var(--ink-2); text-align: center; }

/* Suivi */
.st-run, .st-done { width: min(100%, 560px); display: grid; gap: 14px; justify-items: center; }
.st-runlist { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; margin: 0; padding: 0; list-style: none; }
.st-runlist li { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; font: 500 13px/1.2 var(--text); color: var(--ink-2); }
.st-runlist li:not(:first-child)::before { content: ""; position: absolute; top: 9px; right: 50%; width: 100%; height: 2px; margin-right: 10px; background: var(--line-2); transition: background .4s; }
.st-runlist li.ok:not(:first-child)::before, .st-runlist li.now:not(:first-child)::before { background: var(--vert-2); }
.st-node { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-2); background-repeat: no-repeat; background-position: center; background-size: 11px; transition: background-color .3s, box-shadow .3s; }
.st-runlist li.now .st-node { box-shadow: inset 0 0 0 2px var(--vert-2), 0 0 0 5px rgba(52, 229, 127, .18); }
.st-runlist li.now { color: var(--ink); font-weight: 600; }
.st-runlist li.ok .st-node { background-color: var(--vert); box-shadow: inset 0 0 0 2px var(--vert-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2304140a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.st-runlist li.ok { color: var(--ink); }
.st-runlist li.skip { opacity: .4; text-decoration: line-through; text-decoration-thickness: 1px; }
.st-bar { width: 100%; height: 6px; overflow: hidden; border-radius: 6px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.st-bar i { display: block; height: 100%; background: var(--vert-2); transform: scaleX(0); transform-origin: left; }
.st-run-note { max-width: 44ch; text-align: center; font-size: 14.5px; color: var(--ink-2); }

/* Résultat */
.st-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.st-actions .btn { gap: 10px; }
.st-actions .btn svg { width: 20px; height: 20px; }
.st-actions .btn-ghost { height: 54px; margin: 0; padding: 0 20px; border-radius: var(--r-m); }
.st-versions { width: 100%; margin: 0; padding: 0; list-style: none; }
.st-versions li { display: flex; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.st-versions b { min-width: 28px; color: var(--ink); font-variant-numeric: tabular-nums; }
.st-versions li.cur b { color: #0b7340; }

@media (prefers-reduced-motion: reduce) {
  .st-light, .st-device, .st-drop svg { transition: none; }
  [data-view="rush"] .zoom-on .st-screen video { animation: none; transform: scale(1.06); }
}
@media (max-width: 1000px) {
  .studio { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "title" "stage" "panel"; row-gap: 16px; }
  .st-stage { position: relative; top: 0; }
  .st-title { margin: 0; }
  .st-device { --h: min(62svh, 520px); }
  .st-proto { display: none; }
}
@media (max-width: 640px) {
  .studio-page .links { display: none; }
  .studio { padding-top: 8px; gap: 20px; }
  .st-stage { padding: 14px 12px 18px; margin: 0 -8px; }
  .st-device { --h: min(46svh, 400px); }
  .st-device[data-fmt="16:9"] { width: 100%; }
  .st-runlist { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .st-runlist li:nth-child(4)::before { display: none; }
  .st-optlist .toggle.row { grid-template-columns: 1fr auto; grid-template-areas: "n s" "d s"; row-gap: 2px; }
  .st-optlist .toggle.row .name { grid-area: n; }
  .st-optlist .toggle.row .desc { grid-area: d; font-size: 14px; }
  .st-optlist .toggle.row .switch { grid-area: s; }
  .st-format .seg { width: 100%; justify-content: space-between; }
  .st-format .seg button { flex: 1; padding: 10px 6px; font-size: 13.5px; }
  .st-go { flex-direction: column; align-items: stretch; gap: 10px; margin: 4px -16px 0; padding: 12px 16px 16px; }
  .st-go .btn { width: 100%; }
  .st-actions { width: 100%; }
  .st-actions > * { flex: 1 1 100%; }
}

/* ===== Studio : rendu fixe par style, lecteur interactif, retouches façon Frame.io (2026-11-03) ===== */
.st-render { display: grid; gap: 2px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
.st-render b { font-weight: 600; color: var(--ink); }

/* Lecteur */
.st-ctrl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: min(100%, 680px); }
.st-play { appearance: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--ink); color: var(--bg); cursor: pointer; transition: transform .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .st-play:hover { transform: scale(1.05); } }
.st-play:active { transform: scale(.94); }
.st-play svg { width: 18px; height: 18px; }
.st-scrub { --p: 0; position: relative; height: 28px; cursor: pointer; touch-action: none; }
.st-scrub::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.st-fill { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; width: calc(var(--p) * 100%); border-radius: 4px; background: var(--vert-2); }
.st-knob { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(13, 22, 18, .35), inset 0 0 0 2px var(--vert-2); }
.st-scrub:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: 6px; }
.st-marks { position: absolute; inset: 0; pointer-events: none; }
.st-mark { appearance: none; position: absolute; top: -12px; display: grid; place-items: center; width: 20px; height: 20px; margin-left: -10px; padding: 0; border: 0; border-radius: 6px 6px 6px 1px; background: var(--ink); color: var(--bg); font: 700 11px/1 var(--text); cursor: pointer; pointer-events: auto; transition: transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .st-mark:hover { transform: translateY(-2px); } }
.st-tc { font: 600 13.5px/1 var(--text); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }

/* Couche de retouche posée sur l'image */
.st-annot { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.review .st-annot { pointer-events: auto; cursor: crosshair; touch-action: none; }
.st-zone { position: absolute; border: 2px solid var(--vert); border-radius: 6px; background: rgba(52, 229, 127, .14); box-shadow: 0 0 0 1px rgba(4, 20, 10, .5); }
.st-pin { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 0 2px rgba(4, 20, 10, .55), 0 4px 10px -2px rgba(0, 0, 0, .5); }
.st-zone[data-n]::before, .st-pin[data-n]::before { content: attr(data-n); position: absolute; display: grid; place-items: center; font: 700 11px/1 var(--text); color: var(--vert-encre); }
.st-pin[data-n]::before { inset: 0; }
.st-zone[data-n]::before { left: -2px; top: -22px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px 6px 6px 1px; background: var(--vert); }
.st-zone.draft, .st-pin.draft { animation: st-draft 1.4s var(--ease-out) infinite alternate; }
@keyframes st-draft { to { opacity: .7; } }

/* Panneau de retouches */
.st-actions .btn-ghost[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.st-fix { display: grid; gap: 12px; width: 100%; padding: 16px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.st-fix-help { font-size: 14.5px; color: var(--ink-2); }
.st-fix-help b { font-weight: 600; color: var(--ink); }
.st-compose { display: grid; gap: 8px; }
.st-compose-head { display: flex; align-items: center; gap: 10px; font: 500 14px/1 var(--text); color: var(--ink-2); }
.st-compose-head .st-link { margin-left: auto; font-size: 13.5px; }
.st-tcb { display: inline-grid; place-items: center; min-width: 46px; height: 24px; padding: 0 7px; border-radius: 7px; background: var(--ink); color: var(--bg); font: 600 12.5px/1 var(--text); font-variant-numeric: tabular-nums; }
.st-compose textarea { min-height: 64px; padding-bottom: 14px; }
.st-compose .btn { justify-self: end; }
.st-cmts { display: grid; margin: 0; padding: 0; list-style: none; }
.st-cmts:empty { display: none; }
.st-cmts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-top: 1px solid var(--line); }
.st-cmt { appearance: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 4px; border: 0; background: none; color: var(--ink); text-align: left; font: 500 14.5px/1.35 var(--text); cursor: pointer; border-radius: 8px; }
.st-cmt:hover { background: var(--surface-2); }
.st-cmt-zone { font-size: 12.5px; color: var(--ink-2); }
.st-cmt-del { appearance: none; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); cursor: pointer; }
.st-cmt-del:hover { background: var(--surface-2); color: var(--ink); }
.st-cmt-del svg { width: 15px; height: 15px; }
#st-fix-send { width: 100%; }
@media (max-width: 640px) {
  .st-ctrl { gap: 10px; }
  .st-cmt { grid-template-columns: auto minmax(0, 1fr); }
  .st-cmt-zone { display: none; }
}
@media (prefers-reduced-motion: reduce) { .st-zone.draft, .st-pin.draft { animation: none; } }
.studio:not([data-phase="reglages"]) .st-stage { position: relative; top: 0; }
.st-actions .btn, .st-actions .btn-ghost { height: 50px; padding: 0 18px; font-size: 15px; }

/* ===== Studio v3 (retours Raph 03/11) : lumière seulement derrière la vidéo, retouches toujours ouvertes ===== */
.st-light { display: none; }
.st-device::before { content: ""; position: absolute; z-index: -1; inset: -14% -12%; border-radius: 50%; pointer-events: none; opacity: var(--glow); transition: opacity .9s var(--ease-out);
  background: radial-gradient(50% 50% at 50% 50%, rgba(52, 229, 127, .75), transparent 72%), radial-gradient(26% 26% at 50% 46%, rgba(225, 255, 238, .9), transparent 70%);
  filter: blur(28px); }
.st-device[data-fmt="16:9"]::before { inset: -18% -8%; }
.studio[data-phase="run"] .st-device::before { opacity: calc(.3 + var(--run) * .7); }
.studio[data-phase="done"] .st-device::before { opacity: .9; }
.st-fix-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.st-fix-top h3 { font: 600 18px/1.2 var(--display); letter-spacing: -.02em; }
.st-price { font: 600 13.5px/1.2 var(--text); color: var(--ink); font-variant-numeric: tabular-nums; }
.st-price span { font-weight: 500; color: var(--ink-2); }
.st-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.st-attach-label { margin-right: 2px; font: 600 13.5px/1 var(--text); color: var(--ink-2); }
.st-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px 7px 9px; border-radius: 999px; background: var(--sage-soft, var(--surface-2)); font: 500 13.5px/1 var(--text); cursor: pointer; transition: background .2s; }
.st-chip:hover, .st-chip:focus-within { background: var(--sage, var(--line-2)); }
.st-chip svg { width: 16px; height: 16px; color: #0b7340; }
.st-files { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.st-files:empty { display: none; }
.st-files li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; }
.st-files li span { flex: none; padding: 3px 7px; border-radius: 6px; background: var(--surface-2); font-weight: 600; font-size: 12px; }
.st-files li button { appearance: none; display: grid; place-items: center; width: 26px; height: 26px; margin-left: auto; border: 0; border-radius: 7px; background: none; color: var(--ink-2); cursor: pointer; }
.st-files li button:hover { background: var(--surface-2); color: var(--ink); }
.st-files svg { width: 14px; height: 14px; }
.st-fix .st-rights { margin-top: 0; font-size: 14px; }
.st-rights.need .box { border-color: #c2341f; }
.st-rights.need span:last-child { color: #c2341f; }
.st-cmt-text small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-2); }
.st-cmt-text i { font-style: normal; color: var(--ink-2); }
.st-stage > .st-device { z-index: auto; }

/* Barre « vidéo prête » : on n'est jamais bloqué après le montage */
.st-locked { grid-area: bar; display: grid; gap: 12px; margin-top: 16px; padding: 16px 18px; border-radius: 20px; background: var(--sage-soft, var(--surface-2)); box-shadow: inset 0 0 0 1px rgba(18, 48, 31, .08); }
.st-locked p { font: 500 15px/1.4 var(--text); }
.st-locked-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.st-locked .btn-ghost { height: 40px; margin: 0; padding: 0 16px; border-radius: var(--r-s); font-size: 14.5px; }
.studio { grid-template-rows: auto auto 1fr; grid-template-areas: "title stage" "bar stage" "panel stage"; }
@media (max-width: 1000px) {
  .studio { grid-template-rows: none; grid-template-areas: "title" "stage" "bar" "panel"; }
  .st-locked { margin-top: 0; }
}
.st-attach-hint { font-size: 13px; color: var(--ink-2); }

/* Réglages : ajouter musique / images / document */
.st-imgs .st-label { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.st-addrow { display: flex; flex-wrap: wrap; gap: 8px; }
.st-imglist em { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 7px; background: var(--surface-2); font: 600 11.5px/1 var(--text); font-style: normal; }

/* Pastille de suivi */
.st-float { appearance: none; position: fixed; z-index: 30; left: 50%; bottom: 20px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font: 600 14.5px/1 var(--text); font-variant-numeric: tabular-nums; cursor: pointer; box-shadow: 0 18px 40px -16px rgba(13, 22, 18, .6); transform: translateX(-50%); animation: st-float-in .5s var(--ease-out); }
.st-float i { width: 8px; height: 8px; border-radius: 50%; background: var(--vert); animation: pulse .9s var(--ease-in-out) infinite alternate; }
.st-float.ok i { animation: none; }
.st-float b { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--vert); color: var(--vert-encre); font-weight: 600; }
.st-float svg { width: 15px; height: 15px; }
@keyframes st-float-in { from { opacity: 0; transform: translate(-50%, 12px); filter: blur(4px); } }
@media (min-width: 1001px) { .st-float { left: calc(var(--pad) + 270px); } }
@media (prefers-reduced-motion: reduce) { .st-float, .st-float i { animation: none; } }
.st-stage, .st-panel { scroll-margin-top: 84px; }

/* Coût estimé sur le bouton, styles à venir en cartes */
.st-fix-title { font: 600 18px/1.2 var(--display); letter-spacing: -.02em; }
.st-send { flex-direction: column; gap: 4px; height: auto; min-height: 54px; padding: 10px 24px; }
.st-send small { font: 400 12.5px/1.2 var(--text); opacity: .75; }
.st-style.soon { cursor: default; }
.st-style.soon:hover { background: none; }
.st-style.soon .st-poster img { filter: grayscale(1) brightness(.7); opacity: .55; }
.st-style.soon .st-sname { color: var(--ink-2); }
.st-poster { position: relative; }
.st-soon-tag { position: absolute; left: 6px; bottom: 6px; padding: 4px 7px; border-radius: 6px; background: var(--bg); color: var(--ink); font: 600 11.5px/1 var(--text); }

/* Ce que la vidéo contient déjà */
.st-already { margin: 16px 0 0; padding: 14px 16px; border: 0; border-radius: var(--r-m); background: var(--sage-soft, var(--surface-2)); min-width: 0; }
.st-already legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; font: 600 15px/1.2 var(--text); }
.st-already-list { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.st-already .st-rights { margin: 0; align-items: flex-start; font-weight: 500; font-size: 14.5px; }
.st-already .st-rights .box { margin-top: 1px; }
.st-already small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-2); }
.st-already-more { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.st-already-more .st-link { font-size: 14px; }
.toggle.row.already .desc::after { content: " Déjà dans ta vidéo."; font-weight: 600; color: var(--ink); }
@media (max-width: 640px) { .st-already-list { grid-template-columns: 1fr; } }

/* Landing : carte de dépôt interactive + bouton studio dans la nav */
.nav-ghost { margin-left: 8px; padding: 9px 12px; border-radius: 10px; font: 600 14.5px/1 var(--text); color: var(--ink); text-decoration: none; transition: background .2s; }
.nav-ghost:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav-ghost + .btn-small { margin-left: 4px; }
.drop-live { gap: 6px; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow .35s var(--ease-out), background-color .35s var(--ease-out); }
.drop-live svg { transition: transform .5s var(--ease-out); }
.drop-live:hover, .drop-live.over { box-shadow: inset 0 0 0 2px var(--vert-2); }
.drop-live.over svg { transform: translateY(-3px); }
@media (hover: hover) and (pointer: fine) { .drop-live:hover svg { transform: translateY(-3px); } }
.drop-live.over { background-color: var(--sage-soft, var(--surface-2)); }
.drop-live:focus-within { box-shadow: inset 0 0 0 2px var(--accent-text); }
.drop-live.sending { opacity: .6; pointer-events: none; }
.drop-live.bad { box-shadow: inset 0 0 0 2px #c2341f; }
.drop-main { font: 600 15.5px/1.2 var(--text); color: var(--ink); }
.drop-sub { font-size: 13.5px; color: var(--ink-2); }
.drop-sub u { color: #0b7340; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .drop-live svg { transition: none; } }
@media (max-width: 1000px) { .nav-ghost { display: none; } .nav .btn-small { margin-left: auto; } }

/* Aperçu sur le rush : textes sobres (retour Raph 03/11 : plus de fond vert ni de capitales condensées) */
.st-giant { top: 16%; font: 600 15cqw/.95 var(--display); font-stretch: normal; letter-spacing: -.04em; color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, .45); }
.anim-on .st-giant { opacity: 1; }
.st-device[data-fmt="16:9"] .st-giant { font-size: 8cqw; top: 14%; }
.st-subs { font: 600 6.6cqw/1.25 var(--display); font-stretch: normal; letter-spacing: -.01em; text-transform: none; }
.st-device[data-fmt="16:9"] .st-subs { font-size: 3.4cqw; }
.st-subs .w { margin: 0 .04em; padding: 0; border-radius: 0; color: rgba(255, 255, 255, .62); text-shadow: 0 2px 14px rgba(0, 0, 0, .55); transition: opacity .25s var(--ease-out), color .2s; }
.st-subs .w.now { background: none; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.st-subs .w, .st-subs .w.in { opacity: 1; }

/* Textes dans les vidéos de la landing : même DA sobre que le studio (retour Raph 03/11)
   blanc, typo du site, ombre douce ; plus de fond vert, de capitales condensées ni de carte penchée */
.giant { top: 15%; font: 600 17cqw/.95 var(--display); font-stretch: normal; letter-spacing: -.04em; color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, .45); }
.giant.on { opacity: 1; }
.subs { top: 66%; font: 600 7.4cqw/1.25 var(--display); font-stretch: normal; letter-spacing: -.01em; text-transform: none; }
.subs .w { margin: 0 .04em; padding: 0; border-radius: 0; color: rgba(255, 255, 255, .62); text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.subs .w.now { background: none; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.big { font: 600 9cqw/.95 var(--display); font-stretch: normal; letter-spacing: -.04em; color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, .45); }
.psubs { font: 600 3.4cqw/1.25 var(--display); font-stretch: normal; letter-spacing: -.01em; text-transform: none; }
.psubs .w { margin: 0 .04em; padding: 0; border-radius: 0; color: rgba(255, 255, 255, .62); text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.psubs .w.now { background: none; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.card-pop { gap: 2cqw; padding: 2.6cqw 3.8cqw; border-radius: 3.2cqw; background: rgba(12, 16, 14, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font: 600 5cqw/1 var(--text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 30px -14px rgba(0, 0, 0, .7); transform: translateY(8px) scale(.96); }
.card-pop.on { transform: none; }
.card-pop svg { color: #fff; }
.lower { border-left: 0; border-radius: 1.2cqw; background: rgba(12, 16, 14, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.kar { font: 600 clamp(22px, 5.6cqw, 40px)/1.25 var(--display); font-stretch: normal; letter-spacing: -.01em; text-transform: none; gap: .1em .26em; }
.kar span { padding: 0; border-radius: 0; color: rgba(255, 255, 255, .55); animation-name: kar-sobre; }
@keyframes kar-sobre { 0%, 10% { color: #fff; } 11%, 100% { color: rgba(255, 255, 255, .55); } }
@media (prefers-reduced-motion: reduce) { .kar span:nth-child(3) { background: none; color: #fff; } }
:root[data-da="joseph"] .kar span { color: rgba(18, 48, 31, .32); animation-name: kar-ink; }
@keyframes kar-ink { 0%, 10% { color: #12301f; } 11%, 100% { color: rgba(18, 48, 31, .32); } }
@media (prefers-reduced-motion: reduce) { :root[data-da="joseph"] .kar span:nth-child(3) { color: #12301f; } }

/* Page Styles : question visible au-dessus du choix de style */
.sp-pick-label { display: block; margin-bottom: 10px; font: 600 15.5px/1.3 var(--text); color: var(--vert-encre); text-align: center; }

/* Fin d'adresse email écrite pour de vrai (email-suggest.js) : même couleur que le texte, à peine teintée */
.email-auto.has-suggest::selection { background: rgba(52, 229, 127, .22); color: var(--sel-ink, currentColor); }

/* Barème : crédits en plus, compteur de fichiers, maximum atteint */
.st-extra { margin-top: 8px; font: 500 13.5px/1.3 var(--text); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.st-filecount { margin-left: auto; font: 500 13px/1 var(--text); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.st-addimg.full, .st-chip.full { opacity: .45; cursor: not-allowed; }
.st-attach-hint.err { color: #c2341f; }
#st-launch { min-width: 210px; }
.st-notes-foot { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; }
.st-notes-foot .st-extra { margin: 0; }
.st-notes-foot .st-count { position: static; margin-left: auto; }
#st-notes { padding-bottom: 14px; }

/* Mosaïque (retours Raph 03/11) : 3 cartes égales + la chaîne, sous-titres neutres, images lisibles, icônes des étapes */
.t-subs, .t-images, .t-sound { grid-column: span 2; }
.kar { font-size: clamp(20px, 4.4cqw, 30px); }
.kar span { animation-name: kar-in; animation-duration: 6s; animation-delay: calc(var(--i) * .45s); }
:root[data-da="joseph"] .kar span { animation-name: kar-in-ink; }
@keyframes kar-in { 0% { color: rgba(255, 255, 255, .16); } 5%, 70% { color: #fff; } 80%, 100% { color: rgba(255, 255, 255, .16); } }
@keyframes kar-in-ink { 0% { color: rgba(18, 48, 31, .16); } 5%, 70% { color: #12301f; } 80%, 100% { color: rgba(18, 48, 31, .16); } }
@media (prefers-reduced-motion: reduce) { .kar span, :root[data-da="joseph"] .kar span { animation: none; color: #12301f; } }
.t-images .img { display: grid; place-items: center; }
.t-images .img svg { width: 30%; height: auto; color: rgba(255, 255, 255, .75); }
.t-images .rights { z-index: 3; }
.run .ico { width: 20px; height: 20px; color: var(--ink-2); }
.run .last .ico { color: var(--ink); }
@media (max-width: 1000px) { .t-subs { grid-column: span 2; } .t-images, .t-sound { grid-column: span 1; } }
@media (max-width: 640px) {
  .t-subs, .t-images, .t-sound { grid-column: auto; }
  .run li { grid-template-columns: 30px 22px 1fr; gap: 10px; }
  .run .ico { width: 18px; height: 18px; }
}

/* Studio : barre à glisser sous les styles, aperçu vertical au format iPhone */
.st-track { margin: 6px 0 4px; }
.st-styles { scroll-snap-type: none; }
.st-device { aspect-ratio: 9 / 19.5; border-radius: calc(var(--h) * .07); padding: calc(var(--h) * .011); }
.st-device .st-screen { border-radius: calc(var(--h) * .06); }
.st-device[data-fmt="16:9"] { aspect-ratio: 16 / 9; border-radius: 22px; }
.st-device[data-fmt="16:9"] .st-screen { border-radius: 16px; }
.st-device:not([data-fmt="16:9"]) .st-screen video { object-fit: contain; }
.st-device:not([data-fmt="16:9"]) .st-screen::after { content: ""; position: absolute; z-index: 4; top: 2.2%; left: 50%; width: 30%; height: 2.6%; border-radius: 99px; background: #000; transform: translateX(-50%); pointer-events: none; }

/* ===================== Pages de l'app : nav commune, Mes vidéos, Crédits, Connexion, Compte (2026-11-03) ===================== */
.app-page { min-height: 100svh; }
.app-nav { gap: 14px; }
.app-nav .st-proto { margin: 0 auto 0 8px; }
.app-links { margin-left: 0; }
.app-links a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.app-credits { display: inline-flex; align-items: baseline; gap: 5px; padding: 9px 12px; border-radius: 10px; background: var(--sage-soft, var(--surface-2)); font: 500 14px/1 var(--text); color: var(--ink-2); text-decoration: none; font-variant-numeric: tabular-nums; transition: background .2s; }
.app-credits b { font-weight: 700; color: var(--ink); }
.app-credits:hover, .app-credits[aria-current="page"] { background: var(--sage, var(--line-2)); }
.app-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--bg); font: 700 14px/1 var(--display); text-decoration: none; }
.app-avatar[aria-current="page"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--vert-2); }

.app-main { max-width: 980px; margin: 0 auto; padding: clamp(20px, 4vh, 44px) var(--pad) 80px; }
.app-main section { max-width: none; margin: 0; padding: 0; }
.app-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; }
.app-head h1 { font-size: clamp(40px, 4vw, 60px); }
.app-new { gap: 8px; }
.app-new svg { width: 16px; height: 16px; }
.app-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 28px 0 8px; }
.app-count { font-size: 14px; color: var(--ink-2); }
.app-section { margin-top: 44px !important; }
.app-h2 { margin-bottom: 14px; font: 600 20px/1.2 var(--display); letter-spacing: -.02em; }
.app-hint { font-size: 15px; color: var(--ink-2); }

/* Mes vidéos : une liste, pas une grille de cartes */
.vd-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.vd-item { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.vd-thumb { display: grid; place-items: center; width: 92px; height: 92px; overflow: hidden; border-radius: 14px; background: #0c1210; }
.vd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vd-thumb.h img { height: auto; aspect-ratio: 16 / 9; }
.vd-info { display: grid; gap: 4px; min-width: 0; }
.vd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16.5px/1.3 var(--text); }
.vd-meta { font-size: 14px; color: var(--ink-2); }
.vd-state { display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; font: 600 13.5px/1 var(--text); font-variant-numeric: tabular-nums; }
.vd-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--vert-2); }
.vd-state.vd-ok { color: #0b7340; }
.vd-state.vd-run { color: var(--ink-2); }
.vd-state.vd-run i { animation: pulse .9s var(--ease-in-out) infinite alternate; }
.vd-bar { display: block; width: min(240px, 100%); height: 4px; margin-top: 6px; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.vd-bar i { display: block; height: 100%; background: var(--vert-2); transform-origin: left; }
.vd-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 8px; }
.vd-versions { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.vd-versions button { appearance: none; min-width: 34px; height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: none; color: var(--ink-2); font: 600 13px/1 var(--text); cursor: pointer; }
.vd-versions button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.vd-dl, .vd-fix { gap: 7px; }
.vd-dl svg, .vd-fix svg { width: 16px; height: 16px; }
.vd-fix { display: inline-flex; align-items: center; height: 40px; margin: 0; padding: 0 14px; border-radius: var(--r-s); font-size: 14.5px; text-decoration: none; }
.vd-empty { padding: 40px 0; text-align: center; color: var(--ink-2); }
.vd-empty a { color: #0b7340; font-weight: 600; }

/* Crédits */
.cr-solde { margin-top: 24px !important; padding: 26px 28px; border-radius: var(--r-l); background: var(--sage-soft, var(--surface-2)); }
.cr-left { font: 600 clamp(26px, 3vw, 36px)/1.15 var(--display); letter-spacing: -.03em; }
.cr-left b { font-variant-numeric: tabular-nums; }
.cr-equiv { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.cr-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cr-pack { appearance: none; position: relative; display: grid; gap: 6px; justify-items: start; padding: 20px; border: 0; border-radius: 20px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .25s; }
.cr-pack:hover { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.cr-pack[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--vert-2), 0 12px 26px -18px rgba(13, 22, 18, .5); }
.cr-tag { position: absolute; top: 14px; right: 14px; padding: 4px 8px; border-radius: 6px; background: var(--vert); color: var(--vert-encre); font: 600 11.5px/1 var(--text); }
.cr-amount { font: 600 28px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cr-amount small { font: 500 14px/1 var(--text); letter-spacing: 0; color: var(--ink-2); }
.cr-eq { font-size: 14px; color: var(--ink-2); }
.cr-price { margin-top: 8px; font: 600 16px/1 var(--text); }
.cr-price small { font-weight: 500; font-size: 13px; color: var(--ink-2); }
.cr-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 16px; }
.cr-note { font-size: 14px; color: var(--ink-2); }
.cr-note.warn { color: #9a5b00; }
.cr-bareme { margin: 14px 0 0; border-top: 1px solid var(--line); }
.cr-bareme div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cr-bareme dt { color: var(--ink); }
.cr-bareme dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-hist { width: 100%; border-collapse: collapse; font-size: 15px; }
.cr-hist th { padding: 0 0 10px; text-align: left; font: 600 13px/1 var(--text); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.cr-hist td { padding: 12px 0; border-bottom: 1px solid var(--line); }
.cr-hist td:first-child { width: 120px; color: var(--ink-2); }
.cr-hist .num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.cr-hist .num.plus { color: #0b7340; }

/* Connexion */
.lg { display: grid; place-items: center; min-height: calc(100svh - 70px); padding: 32px var(--pad) 64px; }
.lg-box { width: min(100%, 460px); max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: center; }
.lg-box h1 { font-size: clamp(40px, 5vw, 56px); }
.lg-sub { margin-top: 14px; font-size: 16px; color: var(--ink-2); }
.lg-sub b { color: var(--ink); }
.lg-google { appearance: none; width: 100%; height: 54px; margin-top: 28px; border: 0; border-radius: var(--r-m); background: var(--surface); color: var(--ink); font: 600 16px/1 var(--text); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .2s; }
.lg-google:hover { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.lg-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-size: 13.5px; color: var(--ink-2); }
.lg-or::before, .lg-or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.lg-form { margin: 0; max-width: none; }
.lg-form .form-note { text-align: left; }
.lg-legal { margin-top: 18px; font-size: 13px; color: var(--ink-2); }
.lg-legal a { color: inherit; }
.lg-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 16px; background: var(--sage-soft, var(--surface-2)); color: #0b7340; }
.lg-icon svg { width: 26px; height: 26px; }
.lg-open { margin-top: 26px; }
.lg-again { margin-top: 18px; font-size: 14px; color: var(--ink-2); }

/* Compte */
.ac-rows { border-bottom: 1px solid var(--line); padding-bottom: 8px !important; }
.ac-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.ac-label { font-size: 13.5px; color: var(--ink-2); }
.ac-value { font: 600 16.5px/1.3 var(--text); }
.ac-btn { display: inline-flex; align-items: center; height: 40px; margin: 0; padding: 0 16px; border-radius: var(--r-s); font-size: 14.5px; text-decoration: none; }
.ac-email-form { margin: 4px 0 12px; max-width: 520px; }
.ac-toggle { grid-template-columns: 150px minmax(0, 1fr) auto; }
.ac-toggle:last-child { border-bottom: 0; }
.ac-end { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.ac-delete { appearance: none; padding: 0; border: 0; background: none; color: #b0321d; font: 600 14.5px/1 var(--text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ac-confirm { flex-basis: 100%; padding: 16px 18px; border-radius: 16px; background: #fbeeea; color: #5c1d12; }
.ac-confirm p { font-size: 14.5px; }
.ac-confirm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.ac-confirm input { height: 40px; padding: 0 12px; border: 1px solid rgba(92, 29, 18, .25); border-radius: 10px; background: #fff; font: 600 15px/1 var(--text); letter-spacing: .04em; }
.ac-delete-go { appearance: none; height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: #b0321d; color: #fff; font: 600 14.5px/1 var(--text); cursor: pointer; }
.ac-delete-go:disabled { opacity: .4; cursor: not-allowed; }

@media (max-width: 1000px) {
  .app-nav .st-proto { display: none; }
  .app-links { display: flex !important; order: 3; flex-basis: 100%; overflow-x: auto; margin: 0 -8px; }
  .app-nav { flex-wrap: wrap; }
  .app-credits { margin-left: auto; }
}
@media (max-width: 640px) {
  .vd-item { grid-template-columns: 72px minmax(0, 1fr); }
  .vd-thumb { width: 72px; height: 72px; }
  .vd-acts { grid-column: 1 / -1; justify-content: start; }
  .cr-packs { grid-template-columns: 1fr; }
  .ac-toggle { grid-template-columns: 1fr auto; grid-template-areas: "n s" "d s"; }
  .ac-toggle .name { grid-area: n; } .ac-toggle .desc { grid-area: d; } .ac-toggle .switch { grid-area: s; }
}

.app-main .cr-solde { padding: 26px 28px; }
.app-links a, .app-credits { white-space: nowrap; }
.app-nav .st-proto { white-space: nowrap; }
@media (max-width: 1240px) { .app-nav .st-proto { display: none; } .app-links { margin-left: auto; } }

/* Compte dans la nav : menu sous l'avatar (session.js) */
.acct { position: relative; }
button.app-avatar { appearance: none; border: 0; cursor: pointer; }
.app-avatar:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.acct-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; display: grid; min-width: 220px; padding: 6px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 24px 48px -20px rgba(13, 22, 18, .45); transform-origin: top right; animation: acct-in .18s var(--ease-out); }
.acct-menu[hidden] { display: none; }
@keyframes acct-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
.acct-who { display: grid; gap: 2px; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font: 600 14.5px/1.2 var(--text); }
.acct-who span { font: 500 13px/1.2 var(--text); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.acct-menu a, .acct-menu button { appearance: none; display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 500 14.5px/1.2 var(--text); text-align: left; text-decoration: none; cursor: pointer; }
.acct-menu a:hover, .acct-menu button:hover, .acct-menu a:focus-visible, .acct-menu button:focus-visible { background: var(--surface-2); outline: none; }
.acct-menu a[aria-current="page"] { font-weight: 700; }
.acct-out { margin-top: 4px; border-top: 1px solid var(--line) !important; border-radius: 0 0 10px 10px !important; color: #b0321d !important; }
.nav.signed-in .app-credits { margin-left: 12px; }
@media (min-width: 1001px) { .app-nav .app-credits { margin-left: 12px; } }
.nav.signed-in .btn-small { margin-left: 4px; }
@media (prefers-reduced-motion: reduce) { .acct-menu { animation: none; } }
@media (max-width: 640px) { .nav.signed-in .app-credits { display: none; } .nav.signed-in .btn-small { margin-left: auto; } }
.links a, .nav-ghost { white-space: nowrap; }

/* Vrai dépôt : email dans la barre de lancement, messages d'envoi et d'attente */
.st-go { flex-wrap: wrap; }
.st-email { flex: 1 1 100%; }
.st-email input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink); font: 500 15px/1 var(--text); caret-color: var(--accent-text); transition: border-color .3s var(--ease-out); }
.st-email input:focus { outline: 0; border-color: var(--accent-text); }
.st-run-real { max-width: 46ch; text-align: center; font-size: 15px; line-height: 1.5; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.st-run-real b { color: var(--ink); }
.st-run-real a, .st-run-real .st-link { color: #0b7340; font-weight: 600; }

/* Atelier (équipe) : une carte blanche par commande, vignette du rush, retouches mises en avant (2026-11-04) */
.at-login { max-width: 520px; margin-top: 24px; }
.at-login .app-hint { margin-bottom: 14px; }
.at-tools { display: flex; align-items: center; gap: 14px; }
.at #at-filter b { margin-left: 6px; font-weight: 600; opacity: .6; font-variant-numeric: tabular-nums; }
.at-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 10px 0 0; padding: 0; list-style: none; }
.at-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 22px; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 24px 48px -34px rgba(13, 22, 18, .45); }
.at-head { display: grid; grid-template-columns: 156px minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.at-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: radial-gradient(120% 90% at 70% 10%, #1b3428, #0b1511 70%); color: rgba(238, 243, 239, .55); }
.at-thumb svg { width: 26px; height: 26px; }
.at-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.at-thumb video.ko { display: none; }
.at-size { position: absolute; right: 6px; bottom: 6px; padding: 4px 6px; border-radius: 6px; background: rgba(11, 21, 17, .74); color: #eef3ef; font: 600 11.5px/1 var(--text); font-variant-numeric: tabular-nums; }
.at-state { display: inline-flex; align-items: center; gap: 7px; font: 600 13.5px/1 var(--text); color: var(--ink-2); }
.at-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.s-deposee .at-state, .s-retouche .at-state { color: #0b7340; }
.s-deposee .at-state i, .s-retouche .at-state i { background: var(--vert-2); }
.s-en_cours .at-state i { background: #7fae93; animation: pulse .9s var(--ease-in-out) infinite alternate; }
.s-prete .at-state i { background: var(--ink); }
.s-annulee .at-state { color: #a3341f; }
.s-annulee .at-state i { background: #d4513a; }
.s-envoi .at-state i { animation: pulse .9s var(--ease-in-out) infinite alternate; }
.at-style { margin-top: 8px; font: 600 25px/1.05 var(--display); letter-spacing: -.03em; }
.at-meta { margin-top: 7px; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.at-ver { align-self: start; padding: 7px 11px; border-radius: 999px; background: var(--sage-soft, var(--surface-2)); font: 600 13px/1 var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.at-ver.none { background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.at-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.at-block + .at-block { margin-top: 20px; }
.at-label { margin: 0 0 9px; font: 600 13px/1.2 var(--text) !important; color: var(--ink-2); }
.at-label b { color: var(--ink); font-variant-numeric: tabular-nums; }
.at-files { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.at-file { display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 7px 7px 7px 13px; border-radius: 14px; background: var(--bg); }
.at-file > svg { flex: none; width: 18px; height: 18px; color: var(--ink-2); }
.at-file span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14.5px/1.3 var(--text); }
.at-file small { margin-left: 6px; color: var(--ink-2); font-size: 13px; }
.at-get { display: inline-flex; flex: none; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 600 13.5px/1 var(--text); text-decoration: none; transition: box-shadow .2s; }
.at-get:hover { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.at-get svg { width: 15px; height: 15px; }
.at-get.icon { width: 34px; padding: 0; justify-content: center; }
.at-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.at-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: var(--sage-soft, var(--surface-2)); font: 600 13.5px/1 var(--text); }
.at-chip.deja { background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font-weight: 500; }
.at-chip.deja svg { width: 13px; height: 13px; }
.at-quote { padding: 14px 16px; border-radius: 16px; background: var(--bg); font: 400 15.5px/1.5 var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.at-none { font-size: 14.5px; color: var(--ink-2); }
.at-fixes { padding: 18px 20px; border-radius: 20px; background: var(--sage-soft, var(--surface-2)); }
.at-fixes .at-label { color: var(--ink); }
.at-fixes ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.at-fix { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid rgba(18, 48, 31, .1); }
.at-fix:first-child { border-top: 0; padding-top: 2px; }
.at-fix .st-tcb { grid-row: span 2; }
.at-fix p { font: 500 15.5px/1.4 var(--text); }
.at-fix small { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--ink-2); }
.at-fix small a { color: #0b7340; font-weight: 600; }
.at-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.at-select select { appearance: none; height: 42px; padding: 0 38px 0 14px; border: 0; border-radius: 12px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%233f5c4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 600 14px/1 var(--text); cursor: pointer; }
.at-select select:hover { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.at-progress { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 120px; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.at-pbar { display: none; width: min(200px, 100%); height: 4px; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.at-pbar i { display: block; height: 100%; background: var(--vert-2); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out); }
.at-progress.on .at-pbar { display: block; }
.at-send { gap: 8px; height: 46px; margin-left: auto; padding: 0 20px; border-radius: var(--r-m); font-size: 15px; cursor: pointer; }
.at-send svg { width: 17px; height: 17px; }
.at-send:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.at-wait { margin-left: auto; font-size: 14px; color: var(--ink-2); }
@media (max-width: 760px) {
  .at-card { padding: 16px; gap: 16px; border-radius: 22px; }
  .at-head { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
  .at-ver { grid-column: 2; justify-self: start; margin-top: -6px; }
  .at-style { font-size: 21px; }
  .at-grid { grid-template-columns: minmax(0, 1fr); }
  .at-fixes { padding: 14px 16px; }
  .at-select, .at-select select { width: 100%; }
  .at-send { width: 100%; justify-content: center; margin-left: 0; }
  .at-progress { flex-basis: 100%; }
}

/* Mouvement : règles d'Emil Kowalski + passe impeccable (2026-11-04)
   Appui = scale(.97) en 160 ms, survol réservé à la souris, états en cours qui pulsent,
   apparitions en léger décalage dans une même section, « Réduire les animations » garde les fondus. */
@keyframes pulse { from { opacity: 1; } to { opacity: .3; } }
.btn-ghost, .nav-btn, .seg button, .cr-pack, .lg-google, .at-get, .st-idea, .st-chip, .st-addimg, .app-credits, .sp-sound, .nav-ghost {
  transition: transform var(--press) var(--ease-out), background-color .2s, border-color .2s, box-shadow .2s, color .2s;
}
.btn-ghost:active, .nav-btn:active, .seg button:active, .cr-pack:active, .lg-google:active, .at-get:active, .st-idea:active, .st-chip:active, .st-addimg:active, .app-credits:active, .sp-sound:active, .nav-ghost:active { transform: scale(.97); }
.st-style { transition: transform var(--press) var(--ease-out), background-color .2s, box-shadow .2s; }
.st-style:active { transform: scale(.98); }
.st-float { transition: transform var(--press) var(--ease-out); }
.st-float:active { transform: translateX(-50%) scale(.97); }
.reveal.seen { transition-delay: var(--d, 0s); }
html { scrollbar-color: color-mix(in srgb, var(--ink) 26%, transparent) transparent; }

/* Pages légales (conditions, remboursement, confidentialité, mentions, accessibilité) + contrastes (2026-11-04) */
.legal { max-width: 720px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--pad) 96px; }
.legal h1 { font-size: clamp(44px, 7vw, 76px); }
.legal-maj { margin: 18px 0 8px; font-size: 14.5px; color: var(--ink-2); }
.legal-draft { display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 6px; background: var(--sage-soft, var(--surface-2)); color: var(--ink); font-weight: 600; }
.legal section { padding: 26px 0 4px; border-top: 1px solid var(--line); margin-top: 26px; }
.legal h2 { font: 600 21px/1.25 var(--display); letter-spacing: -.02em; margin: 0 0 10px; }
.legal p, .legal li { max-width: 68ch; color: var(--ink-2); font-size: 16.5px; }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 10px; }
.legal ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; }
.legal li::marker { color: var(--accent-text); }
.legal b { color: var(--ink); font-weight: 600; }
.legal a { color: #0b7340; text-decoration-thickness: 1px; }
.legal-todo { padding: 0 3px; border-radius: 4px; background: #fbe9a6; color: #4a3a00; }
.foot nav { flex-wrap: wrap; row-gap: 8px; }
.foot nav a[aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: none; }
.st-legal { margin-top: 10px; font-size: 13px; color: var(--ink-2); text-align: right; }
.st-legal a, .cr-note a { color: inherit; }
.app-state { color: #0b7340; }
@media (max-width: 760px) { .st-legal { text-align: left; } }
.st-device:not(.st-ready) { transition: none; }

/* ===================== Page introuvable (404) (2026-11-05) ===================== */
.lost { min-height: calc(100svh - 300px); display: flex; flex-direction: column; justify-content: center; }
.lost p { margin-top: 18px; font-size: 19px; }
.lost-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.lost-actions .btn-ghost { margin-left: 0; display: inline-flex; align-items: center; text-decoration: none; }

/* ===================== Nav connectée : un seul groupe à droite (2026-11-05) =====================
   Crédits, bouton et avatar collés ensemble, même hauteur (40 px) ; « + » = acheter des crédits. */
.nav.signed-in, .app-nav { column-gap: 8px; }
.nav.signed-in .brand, .app-nav .brand { margin-right: 16px; }
.nav.signed-in .links a, .app-nav .links a { white-space: nowrap; }
.nav.signed-in .app-credits, .app-nav .app-credits { height: 40px; align-items: center; gap: 5px; padding: 0 5px 0 14px; border-radius: var(--r-s); }
.nav.signed-in .app-credits { margin-left: 12px; }
@media (min-width: 1001px) { .app-nav .app-credits { margin-left: 12px; } }
.app-credits::after { content: "+"; display: grid; place-items: center; width: 30px; height: 30px; margin-left: 5px; border-radius: 9px; background: var(--surface, #fff); color: var(--ink); font: 600 17px/1 var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.nav.signed-in .btn-small, .app-nav .btn-small { margin-left: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.nav .app-avatar { width: 40px; height: 40px; font-size: 15px; }
@media (max-width: 1000px) { .nav.signed-in .app-credits { margin-left: auto; } }
@media (max-width: 640px) { .nav.signed-in .btn-small { margin-left: auto; } }
@media (max-width: 640px) {
  /* Téléphone : le logo seul (le nom reste lu par les lecteurs d'écran), pour que crédits, bouton et avatar tiennent sur une ligne */
  .nav.signed-in .brand span, .app-nav .brand span { display: none; }
  .nav.signed-in .brand, .app-nav .brand { margin-right: 0; }
}

/* ===================== Choix du style : une rangée par format, cartes plus grandes, démos qui jouent (2026-11-05) ===================== */
.st-styles { display: grid; gap: 22px; overflow: visible; margin: 0; padding: 0; -webkit-mask: none; mask: none; }
.st-fmt { display: grid; gap: 8px; min-width: 0; }
.st-fmt-h { display: flex; align-items: center; gap: 9px; margin: 0; font: 600 15px/1.2 var(--text); color: var(--ink); }
.st-fmt-h span { font-weight: 500; color: var(--ink-2); }
.st-fmt-h i { flex: none; display: block; border: 1.8px solid currentColor; border-radius: 3px; }
.st-fmt-h i.v { width: 10px; height: 16px; }
.st-fmt-h i.h { width: 17px; height: 11px; }
.st-styles-row { display: flex; gap: 10px; overflow-x: auto; margin: 0 -6px; padding: 4px 6px 8px; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.st-styles-row::-webkit-scrollbar { display: none; }
.st-styles-row.end { -webkit-mask: none; mask: none; }
.st-styles-row .st-style { width: 156px; gap: 10px; padding: 6px 6px 12px; }
.st-styles-row .st-style:has(.st-poster.h) { width: 288px; }
.st-styles-row .st-poster { height: auto; aspect-ratio: 9 / 16; border-radius: 12px; }
.st-styles-row .st-poster.h { aspect-ratio: 16 / 9; }
.st-poster video { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-style.soon .st-poster video { filter: grayscale(1) brightness(.7); opacity: .55; }
.st-styles-row .st-sname { font-size: 15px; }
.st-fmt .st-track { margin: 0; }
@media (max-width: 640px) {
  .st-styles-row .st-style { width: 136px; }
  .st-styles-row .st-style:has(.st-poster.h) { width: 248px; }
}

/* ===================== Avis du client sur la vidéo livrée (2026-11-05) ===================== */
.st-avis { display: grid; gap: 12px; width: 100%; padding: 16px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.st-notes, .st-avis-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.st-notes button, .st-avis-tags button { appearance: none; border: 0; cursor: pointer; color: var(--ink); font: 600 14.5px/1 var(--text); transition: transform var(--press) var(--ease-out), background-color .2s, color .2s; }
.st-notes button { height: 40px; padding: 0 15px; border-radius: 999px; background: var(--sage-soft, var(--surface-2)); }
.st-notes button[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.st-avis-tags button { height: 34px; padding: 0 12px; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 500; font-size: 14px; }
.st-avis-tags button[aria-pressed="true"] { background: var(--sage, var(--line-2)); box-shadow: inset 0 0 0 1px transparent; font-weight: 600; }
.st-notes button:active, .st-avis-tags button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .st-notes button:not([aria-checked="true"]):hover { background: var(--sage, var(--line-2)); }
  .st-avis-tags button:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1px var(--ink-2); }
}
.st-avis-more { display: grid; gap: 10px; }
.st-avis-q { font: 600 15px/1.3 var(--text); }
#st-avis-text { display: block; width: 100%; min-height: 72px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--surface); color: var(--ink); font: 400 15.5px/1.5 var(--text); resize: vertical; caret-color: var(--accent-text); }
#st-avis-text:focus { outline: 0; border-color: var(--accent-text); }
#st-avis-text::placeholder { color: var(--ink-2); opacity: .9; }
.st-avis-hint { font-size: 14px; color: var(--ink-2); }
.st-avis .btn-small { justify-self: start; }
.st-avis-ok { font: 600 15px/1.4 var(--text); color: #0b7340; }

/* ===================== Atelier : chiffres et avis des clients (2026-11-05) ===================== */
.at-stats { display: grid; gap: 18px; margin: 0 0 28px; padding: 22px 24px; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.at-stats-title { font: 600 21px/1.2 var(--display); letter-spacing: -.02em; }
.at-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.at-kpis div { padding: 14px 16px; border-radius: 16px; background: var(--sage-soft, var(--surface-2)); }
.at-kpis dt { font: 600 13px/1.2 var(--text); color: var(--ink-2); }
.at-kpis dd { margin: 8px 0 0; font: 600 28px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.at-kpis dd small { font: 500 13px/1 var(--text); letter-spacing: 0; color: var(--ink-2); }
.at-styles-wrap { overflow-x: auto; }
.at-styles-tab { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.at-styles-tab th, .at-styles-tab td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.at-styles-tab thead th { font: 600 13px/1.2 var(--text); color: var(--ink-2); }
.at-styles-tab tbody th { font-weight: 600; }
.at-styles-tab td:last-child { white-space: normal; min-width: 180px; color: var(--ink-2); }
.at-voices ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.at-voices li { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--bg); }
.at-voices li span { font: 600 13px/1.2 var(--text); color: var(--ink-2); }
.at-voices q { font-size: 15px; line-height: 1.45; quotes: "« " " »"; overflow-wrap: anywhere; }
.at-voices li.n1 span, .at-avis.n1 .at-note { color: #a3341f; }
.at-voices li.n3 span, .at-avis.n3 .at-note { color: #0b7340; }
.at-avis { display: grid; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.at-avis .at-label { margin: 0 !important; }
.at-note { font: 600 16px/1.2 var(--text); }
.at-avis .at-chips { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 640px) { .at-stats { padding: 18px 16px; } .at-kpis { grid-template-columns: 1fr 1fr; } }
.at-stats, .at-stats > * { min-width: 0; }
.app-main .at-stats { margin: 0 0 28px; padding: 22px 24px; }
@media (max-width: 640px) { .app-main .at-stats { padding: 18px 16px; } }

/* ===================== Tarifs : 4 formules (prix provisoires, 2026-11-05) ===================== */
.pricing-sub { margin-top: 16px; max-width: 54ch; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
.plan { display: flex; flex-direction: column; gap: 20px; padding: 26px 24px 24px; border-radius: var(--r-l); background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -44px rgba(13, 22, 18, .35); }
.plan header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; }
.plan h3 { font: 600 24px/1.1 var(--display); letter-spacing: -.03em; }
.plan-tag { padding: 5px 9px; border-radius: 999px; background: var(--vert); color: var(--vert-encre); font: 600 12px/1 var(--text); }
.plan-pour { grid-column: 1 / -1; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.plan-prix { display: flex; align-items: baseline; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.plan-prix b { font: 600 clamp(40px, 4vw, 52px)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.plan-prix span { font-size: 15px; color: var(--ink-2); }
.plan-vol { font-size: 16.5px; }
.plan-vol b { font-weight: 700; }
.plan-vol small { display: block; margin-top: 5px; font-size: 14px; color: var(--ink-2); }
.plan-plus { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.35; }
.plan-plus li { display: flex; gap: 9px; }
.plan-plus svg { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--accent-text); }
.plan-go { margin: auto 0 0; display: inline-flex; align-items: center; justify-content: center; width: 100%; text-decoration: none; }
.plan .btn-ghost.plan-go { height: 48px; margin-left: 0; border-radius: var(--r-m); }
.plan-hi { background: #12301f; color: #eef3ef; box-shadow: 0 40px 80px -40px rgba(13, 22, 18, .6); }
.plan-hi .plan-pour, .plan-hi .plan-prix span, .plan-hi .plan-vol small { color: rgba(238, 243, 239, .72); }
.plan-hi .plan-prix { border-top-color: rgba(238, 243, 239, .14); }
.plan-hi .plan-plus svg { color: var(--vert); }
.plan-hi .btn { height: 48px; }
.pricing-note { margin-top: 24px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 1100px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .plans { grid-template-columns: minmax(0, 1fr); } .plan { padding: 22px 20px 20px; } }

/* Page Crédits : les 4 formules */
.cr-packs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cr-name { font: 600 15px/1.2 var(--text); color: var(--ink-2); }
.cr-eq b { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .cr-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cr-packs { grid-template-columns: minmax(0, 1fr); } }
.cr-packs .cr-price { margin-top: 2px; font: 500 14px/1.3 var(--text); color: var(--ink-2); }

/* ===================== Tarifs : bascule Mensuel / Annuel (2026-11-05) ===================== */
.pricing-seg { margin-top: 28px; }
.pricing-seg + .plans { margin-top: 22px; }
.seg [data-bill] span { margin-left: 7px; padding: 3px 7px; border-radius: 999px; background: var(--sage-soft, var(--surface-2)); color: #0b7340; font: 600 12px/1 var(--text); }
.seg [data-bill][aria-pressed="true"] span { background: var(--vert); color: var(--vert-encre); }
.plan-an { margin-top: -12px; font-size: 13.5px; color: var(--ink-2); }
.plan-hi .plan-an { color: rgba(238, 243, 239, .72); }
.cr-bill { margin-bottom: 14px; }

/* Page Crédits : le barème en crédits ET en euros (2026-11-05) */
.cr-rate { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.cr-rate b { color: var(--ink); font-weight: 600; }
.cr-bareme dd { text-align: right; }
.cr-bareme dd small { display: block; margin-top: 3px; font: 500 13px/1.2 var(--text); color: var(--ink-2); }
@media (max-width: 640px) { .cr-bareme dd { white-space: normal; } }
/* Formule à changer dans la phrase du barème */
.cr-pick { display: inline-block; }
.cr-pick select { appearance: none; -webkit-appearance: none; margin: 0 1px; padding: 4px 26px 4px 10px; border: 0; border-radius: 9px; background: var(--sage-soft, var(--surface-2)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2312301f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center / 11px; color: var(--ink); font: 700 15px/1.2 var(--text); cursor: pointer; transition: background-color .2s; }
.cr-pick select:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .cr-pick select:hover { background-color: var(--sage, var(--line-2)); } }
.cr-bareme dt small { display: block; margin-top: 3px; font: 500 13px/1.2 var(--text); color: var(--ink-2); }
.cr-free { display: inline-block; padding: 5px 11px; border-radius: 999px; background: var(--vert); color: var(--vert-encre); font: 700 14.5px/1 var(--text); }

/* ===================== Page Crédits : barème visuel (2026-11-05) =====================
   Deux groupes, les crédits en gros dans leur colonne, les euros dans une colonne à part. */
.cr-tarif { --cols: minmax(0, 1fr) 132px 96px; display: grid; gap: 14px; margin-top: 18px; }
.cr-head { display: grid; grid-template-columns: var(--cols); gap: 16px; padding: 0 20px; font: 600 12.5px/1 var(--text); color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.cr-head span:not(:first-child) { text-align: right; }
.cr-group { padding: 6px 20px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.app-main .cr-group { margin: 0; padding: 6px 20px; }
.cr-group h3 { padding: 14px 0 6px; font: 600 15px/1.2 var(--text); color: #0b7340; }
.cr-group dl { margin: 0; }
.cr-row { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.cr-row dt { font: 600 16px/1.3 var(--text); color: var(--ink); }
.cr-row dt small { display: block; margin-top: 3px; font: 400 13.5px/1.35 var(--text); color: var(--ink-2); }
.cr-row dd { margin: 0; text-align: right; }
.cr-cr { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.cr-cr b { font: 600 26px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.cr-cr span:not(.cr-free) { font: 500 13px/1 var(--text); color: var(--ink-2); }
.cr-eur { font: 600 16px/1 var(--text); color: var(--ink); font-variant-numeric: tabular-nums; }
.cr-cr .cr-free { padding: 7px 12px; font-size: 14px; }
@media (max-width: 640px) {
  .cr-tarif { --cols: minmax(0, 1fr) auto 64px; }
  .cr-head, .cr-group, .app-main .cr-group { padding-left: 14px; padding-right: 14px; }
  .cr-row { gap: 10px; }
  .cr-cr b { font-size: 22px; }
  .cr-cr span:not(.cr-free) { display: none; }
  .cr-eur { font-size: 14.5px; }
}
.cr-eur { font-variant-numeric: normal; }
.cr-head span { white-space: nowrap; }

/* ===================== Essai gratuit avec filigrane (2026-11-05) ===================== */
.st-essai { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; width: 100%; padding: 14px 16px; border-radius: 20px; background: var(--sage-soft, var(--surface-2)); }
.st-essai p { flex: 1 1 260px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.st-essai b { color: var(--ink); }
.at-essai { margin-top: 8px; padding: 7px 11px; border-radius: 10px; background: #fbe9a6; color: #4a3a00; font-size: 13.5px; }
.at-essai a { color: inherit; font-weight: 600; }

/* ===================== Studio : lecteur du rush + consignes posées sur l'image (2026-11-05) ===================== */
/* Sur le rush : plus de calques simulés (mots géants, sous-titres, zoom, couleurs), on voit la vraie vidéo */
[data-view="rush"] .st-layers { display: none; }
[data-view="rush"] .zoom-on .st-screen video, [data-view="rush"] .graded .st-screen video { animation: none !important; transform: none !important; filter: none !important; }
.pinning .st-annot { pointer-events: auto; cursor: crosshair; touch-action: none; }
.st-ctrl { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.st-mute { appearance: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--sage-soft, var(--surface-2)); color: var(--ink); cursor: pointer; transition: transform var(--press) var(--ease-out), background-color .2s; }
.st-mute svg { width: 18px; height: 18px; }
.st-mute[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.st-mute:active { transform: scale(.94); }
.st-pins { display: grid; gap: 10px; width: min(100%, 680px); padding: 14px 16px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.st-pins-help { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.st-pins-help b { color: var(--ink); font-weight: 600; }
.st-pin-compose { display: grid; gap: 8px; }
.st-pin-row { display: flex; gap: 8px; }
.st-pin-row input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--surface); color: var(--ink); font: 400 15px/1 var(--text); caret-color: var(--accent-text); }
.st-pin-row input:focus { outline: 0; border-color: var(--accent-text); }
.st-pin-row .btn-small:disabled { opacity: .5; cursor: not-allowed; }
.st-cmt-go { appearance: none; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 4px; border: 0; border-radius: 8px; background: none; color: var(--ink); text-align: left; font: 500 14.5px/1.35 var(--text); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .st-cmt-go:hover { background: var(--surface-2); } }
.st-cmt-z { flex: none; padding: 3px 7px; border-radius: 6px; background: var(--sage-soft, var(--surface-2)); font: 600 12px/1 var(--text); color: #0b7340; }
.st-cmt-t { min-width: 0; overflow-wrap: anywhere; }
/* Atelier : consignes posées sur le rush */
.at-label-sub { margin-top: 14px !important; }
.at-reperes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.at-reperes li { display: flex; align-items: flex-start; gap: 10px; }
.at-reperes p { font-size: 15px; line-height: 1.4; }
.at-reperes small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-2); }

/* ===================== Galerie « Voir tous les styles » : rangée par format (2026-11-05) =====================
   Paysages d'abord, deux par ligne ; puis les verticaux, quatre par ligne. Titres de groupe ajoutés par app.js. */
.style-group { display: none; }
.styles.all .style-list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px 14px; }
.styles.all .style, .styles.all .style.wide { width: auto; grid-column: span 3; order: 3; }
.styles.all .style.wide { grid-column: span 6; order: 1; }
.styles.all .style .sv { height: auto; aspect-ratio: 9 / 16; }
.styles.all .style.wide .sv { aspect-ratio: 16 / 9; }
.styles.all .style-group { display: flex; align-items: baseline; gap: 10px; grid-column: 1 / -1; margin-top: 10px; font: 600 17px/1.2 var(--text); color: var(--ink); }
.styles.all .style-group span { font-weight: 500; font-size: 15px; color: var(--ink-2); }
.styles.all .g-h { order: 0; margin-top: 0; }
.styles.all .g-v { order: 2; }
.styles.all .style:first-child .sv { outline: 0; }
@media (max-width: 900px) {
  .styles.all .style { grid-column: span 4; }
  .styles.all .style.wide { grid-column: span 12; }
}
@media (max-width: 640px) {
  .styles.all .style, .styles.all .style.wide { width: auto; }
  .styles.all .style { grid-column: span 6; }
  .styles.all .style.wide .sv { height: auto; }
}

/* ===================== Trois gestes : ligne de progression 1 → 2 → 3 (2026-11-05) ===================== */
.steps-rail { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; margin: 48px 0 -30px; }
.steps-rail::before, .steps-rail::after { content: ""; position: absolute; top: 50%; left: calc(100% / 6); right: calc(100% / 6); height: 2px; margin-top: -1px; border-radius: 2px; }
.steps-rail::before { background: var(--sage, var(--line-2)); }
.steps-rail::after { background: var(--vert-2); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out); }
.steps-rail.go::after { transform: scaleX(1); }
.sr-node { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--sage, var(--line-2)); color: var(--ink-2); font: 700 13px/1 var(--text); font-variant-numeric: tabular-nums; transition: background-color .3s, color .3s, box-shadow .3s; }
.steps-rail.go .sr-node { background: var(--vert); color: var(--vert-encre); box-shadow: 0 0 0 4px var(--bg); }
.steps-rail.go .sr-node:nth-child(2) { transition-delay: .5s; }
.steps-rail.go .sr-node:nth-child(3) { transition-delay: 1s; }
.steps-rail + .steps { margin-top: 44px; }
.band .sr-node { background: var(--sage-soft, var(--bg)); }
.band .steps-rail.go .sr-node { box-shadow: 0 0 0 4px var(--sage-soft, var(--bg)); }
@media (prefers-reduced-motion: reduce) { .steps-rail::after { transition: none; } }
/* Téléphone : cartes empilées → le numéro passe sur chaque carte */
@media (max-width: 760px) {
  .steps-rail { display: none; }
  .steps { counter-reset: geste; margin-top: 36px; }
  .step { position: relative; counter-increment: geste; }
  .step::before { content: counter(geste); position: absolute; top: -12px; left: 18px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--vert); color: var(--vert-encre); font: 700 13px/1 var(--text); }
}

/* ===================== Page Nouveautés (ex-Styles, 2026-11-05) ===================== */
.nv-soon .sub, .nv-news .sub { margin-top: 12px; color: var(--ink-2); }
.nv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 32px; }
.nv-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -44px rgba(13, 22, 18, .35); }
.nv-card.wide { grid-column: span 2; }
.nv-media { position: relative; aspect-ratio: 4 / 5; background: #0c1210; }
.nv-card.wide .nv-media { aspect-ratio: 16 / 9; max-height: none; }
.nv-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
.nv-body { display: grid; gap: 8px; align-content: start; padding: 16px 18px 18px; }
.nv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 18px/1.2 var(--display); letter-spacing: -.02em; }
.nv-pitch { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.nv-fmt { display: flex; align-items: center; gap: 7px; font: 600 13px/1 var(--text); color: var(--ink-2); }
.nv-fmt .ratio.v { width: 9px; height: 15px; } .nv-fmt .ratio.h { width: 16px; height: 10px; }
.nv-go { justify-self: start; margin: 6px 0 0 !important; display: inline-flex; align-items: center; text-decoration: none; }
.nv-log { display: grid; gap: 0; margin: 30px 0 0; padding: 0; list-style: none; }
.nv-log li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 16px 0; border-top: 1px solid var(--line); }
.nv-log li:last-child { border-bottom: 1px solid var(--line); }
.nv-when { display: flex; align-items: center; gap: 8px; font: 600 14.5px/1.3 var(--text); color: var(--ink-2); }
.sp-new-tag { padding: 3px 8px; border-radius: 999px; background: var(--vert); color: var(--vert-encre); font: 600 11.5px/1 var(--text); }
.nv-what { font-size: 16px; line-height: 1.5; }
.nv-what a { font-weight: 600; color: var(--ink); text-decoration: none; margin-right: 4px; }
@media (hover: hover) and (pointer: fine) { .nv-what a:hover { text-decoration: underline; } }
@media (max-width: 640px) {
  .nv-card.wide { grid-column: auto; }
  .nv-log li { grid-template-columns: 1fr; gap: 4px; }
}

/* ===================== Cases Sous-titres et Images : vraies scènes avec une silhouette (2026-11-05) =====================
   Sous-titres façon Insta Meta (gras + italique, par deux mots, qui bougent) ; images détourées derrière la personne. */
.tile p { max-width: 62ch; }
.tile .vis.vid { height: 210px; color: #fff; background: #0c1210; box-shadow: none; }
:root[data-da="joseph"] .tile .vis.vid { background: #0c1210; }
.t-sound .vis { height: 210px; }
.vid .scene { position: absolute; inset: 0; background: radial-gradient(45% 60% at 22% 30%, rgba(255, 214, 160, .22), transparent 70%), radial-gradient(40% 55% at 82% 25%, rgba(52, 229, 127, .2), transparent 70%), linear-gradient(170deg, #26332d, #0c1210 75%); }
.vid .scene::after { content: ""; position: absolute; left: 12%; top: 10%; width: 22%; height: 48%; border-radius: 6px; background: linear-gradient(180deg, rgba(255, 240, 215, .16), rgba(255, 240, 215, .03)); filter: blur(2px); }
.vid .who { position: absolute; left: 50%; bottom: -8%; z-index: 2; width: auto; height: 104%; transform: translateX(-50%); filter: drop-shadow(0 0 18px rgba(0, 0, 0, .5)); }
.vid::after { opacity: .14 !important; mix-blend-mode: overlay !important; }
/* Sous-titres : deux mots à la fois, gras + italique, ils entrent en montant */
.cap { position: absolute; left: 0; right: 0; top: 60%; z-index: 3; height: 2.6em; margin: 0; font-size: clamp(19px, 5.4cqw, 30px); text-align: center; }
.cap .c { position: absolute; left: 4%; right: 4%; top: 0; opacity: 0; transform: translateY(.35em) scale(.94); text-shadow: 0 3px 16px rgba(0, 0, 0, .65); animation: cap-beat 4.8s var(--ease-out) infinite; }
.cap .c2 { animation-delay: 1.6s; } .cap .c3 { animation-delay: 3.2s; }
.cap b { font: 800 1em/1.1 "Archivo", var(--display); letter-spacing: -.02em; color: #fff; }
.cap em { font: italic 500 1.14em/1 "Bodoni Moda", Georgia, serif; color: var(--vert); }
@keyframes cap-beat { 0% { opacity: 0; transform: translateY(.35em) scale(.94); } 6%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-.2em); } }
/* Images détourées : elles flottent derrière la tête, la personne passe devant */
.roto .img { position: absolute; z-index: 1; top: 14% !important; width: 30%; aspect-ratio: 4 / 3; border-radius: 9px; box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .8); animation: roto-float 6s var(--ease-in-out) infinite alternate; }
.roto .i1 { left: 8%; --r: -7deg; transform: rotate(var(--r)); }
.roto .i2 { left: 35%; top: 6% !important; --r: 2deg; transform: rotate(var(--r)); animation-delay: -2s; }
.roto .i3 { left: 62%; --r: 6deg; transform: rotate(var(--r)); animation-delay: -4s; }
@keyframes roto-float { from { transform: translateY(0) rotate(var(--r)); } to { transform: translateY(-7px) rotate(calc(var(--r) * -.6)); } }
.roto .who { height: 92%; bottom: -14%; }
.roto .rights { z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .cap .c, .roto .img { animation: none; }
  .cap .c2 { opacity: 1; transform: none; }
}
/* Silhouette plus lisible : contre-jour derrière la tête, liseré clair, plus grande */
.vid .scene::before { content: ""; position: absolute; left: 50%; top: 38%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(52, 229, 127, .28), rgba(52, 229, 127, .08) 60%, transparent); }
.vid .who { height: 132%; bottom: -54%; filter: brightness(1.7) saturate(.9) drop-shadow(0 0 1.5px rgba(255, 236, 214, .55)) drop-shadow(0 0 20px rgba(52, 229, 127, .25)); }
.cap { top: 58%; }
.roto .who { height: 140%; bottom: -66%; }
.roto .img { top: 12% !important; width: 32%; }
.roto .i1 { left: 6%; } .roto .i2 { left: 34%; top: 4% !important; } .roto .i3 { left: 62%; }
.vid .who { height: 315px; bottom: -66px; }
.cap { top: 60%; }
.roto .who { height: 330px; bottom: -96px; }

/* ===================== Barre de l'app : deux onglets collés au logo, crédits + avatar à droite (2026-11-05) =====================
   « Nouvelle vidéo » et « Mes vidéos » sont deux vues du même espace : un seul bloc d'onglets, aligné à gauche comme dans un outil. */
.app-nav .app-links { display: flex; gap: 2px; margin: 0 0 0 4px !important; padding: 4px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.app-nav .app-links a { padding: 8px 15px; border-radius: 999px; font-weight: 600; color: var(--ink-2); }
.app-nav .app-links a[aria-current="page"] { background: var(--ink); color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .app-nav .app-links a:not([aria-current="page"]):hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); } }
.app-nav .app-credits { margin-left: auto !important; }
.app-nav .st-proto { display: none; }
@media (max-width: 1000px) {
  .app-nav .app-links { order: 3; flex-basis: auto; width: max-content; max-width: 100%; margin: 4px 0 0 !important; }
}
/* « Ton rush » cliqué sans rush : la zone de dépôt brille deux fois */
@keyframes st-nudge { 0%, 100% { box-shadow: inset 0 0 0 1px var(--line-2); } 25%, 75% { box-shadow: inset 0 0 0 2px var(--vert-2), 0 0 0 6px rgba(52, 229, 127, .18); } 50% { box-shadow: inset 0 0 0 1px var(--line-2); } }
.nudge { animation: st-nudge 1.2s var(--ease-in-out) .35s; }
.st-notify { flex: 1 1 100%; margin-top: 0; font-weight: 500; }
.st-notify small { font-size: 13.5px; color: var(--ink-2); }

/* ===================== Consignes : les idées dans le cadre, sur une bande réservée en bas (2026-11-05) ===================== */
.st-notes-box { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--surface); transition: border-color .3s var(--ease-out); }
.st-notes-box:focus-within { border-color: var(--accent-text); }
.st-notes-box textarea { min-height: 96px; padding: 14px 16px 10px; border: 0 !important; border-radius: var(--r-m) var(--r-m) 0 0; background: transparent; resize: vertical; }
.st-notes-bar { display: flex; align-items: flex-end; gap: 10px; padding: 10px 12px 12px; border-top: 1px dashed var(--line-2); }
.st-notes-box .st-ideas { flex: 1; margin: 0; gap: 6px; }
.st-notes-box .st-idea { padding: 7px 11px; font-size: 13.5px; }
.st-notes-box .st-count { position: static; flex: none; padding-bottom: 6px; }
.st-notes-foot:has(.st-extra[hidden]) { display: none; }
.st-addrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.st-formats { flex: 1 1 220px; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }

/* Sous-titres mot par mot (façon Insta Meta) : un seul mot à l'écran, il claque puis laisse la place ; le dernier tient plus longtemps */
.cap-w { height: 1.4em; font-size: clamp(24px, 7.6cqw, 40px); }
.cap-w .w { position: absolute; left: 0; right: 0; top: 0; z-index: 3; opacity: 0; text-align: center; text-shadow: 0 3px 16px rgba(0, 0, 0, .7); animation: cap-word 4.4s calc(var(--i) * .5s) infinite; }
.cap-w b.w { font: 800 1em/1.1 "Archivo", var(--display); letter-spacing: -.02em; color: #fff; }
.cap-w em.w { font: italic 500 1.2em/1 "Bodoni Moda", Georgia, serif; color: var(--vert); }
.cap-w .w.last { animation-name: cap-word-last; }
@keyframes cap-word { 0% { opacity: 0; transform: scale(.82); } 2% { opacity: 1; transform: scale(1.06); } 4% { transform: scale(1); } 10.5% { opacity: 1; } 11.4%, 100% { opacity: 0; transform: scale(1); } }
@keyframes cap-word-last { 0% { opacity: 0; transform: scale(.82); } 2% { opacity: 1; transform: scale(1.08); } 4% { transform: scale(1); } 40% { opacity: 1; } 42%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cap-w .w { animation: none; } .cap-w .w.last { opacity: 1; } }

/* ===================== Trois gestes : vraies illustrations + liens (2026-11-05) ===================== */
.step { display: flex; flex-direction: column; }
.step-link { align-self: flex-start; margin: 14px 10px 0; padding-top: 2px; font: 600 15px/1.2 var(--text); color: #0b7340; text-decoration: none; border-bottom: 1.5px solid currentColor; }
.step-link span { display: inline-block; transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .step-link:hover span { transform: translateX(3px); } }
.step p { flex: 1; }
.mock-cards, .mock-ready { height: 150px; flex-wrap: nowrap; overflow: hidden; }
/* Cartes de styles en éventail, celle du milieu choisie */
.mock-cards { position: relative; gap: 0; }
.sc { position: absolute; top: 50%; left: 50%; width: 66px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 10px; background: #0c1210; box-shadow: 0 10px 22px -12px rgba(13, 22, 18, .6); transition: transform .45s var(--ease-out); }
.sc img { width: 100%; height: 100%; object-fit: cover; }
.sc b { position: absolute; left: 0; right: 0; bottom: 6px; color: #fff; font: 700 9.5px/1 var(--text); text-align: center; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.sc1 { transform: translate(-50%, -50%) translateX(-58px) rotate(-9deg) scale(.88); filter: saturate(.7) brightness(.85); }
.sc3 { transform: translate(-50%, -50%) translateX(58px) rotate(9deg) scale(.88); filter: saturate(.7) brightness(.85); }
.sc2 { z-index: 2; transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 0 0 2.5px var(--vert-2), 0 14px 28px -12px rgba(13, 22, 18, .6); }
.sc-ok { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--vert); color: var(--vert-encre); }
.sc-ok svg { width: 12px; height: 12px; }
@media (hover: hover) and (pointer: fine) {
  .step:hover .sc1 { transform: translate(-50%, -50%) translateX(-72px) rotate(-12deg) scale(.88); }
  .step:hover .sc3 { transform: translate(-50%, -50%) translateX(72px) rotate(12deg) scale(.88); }
}
/* Vidéo prête : un téléphone + ce qu'on reçoit */
.mock-ready { gap: 18px; }
.ph { position: relative; flex: none; width: 66px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 12px; background: #0c1210; box-shadow: 0 0 0 3px #12301f, 0 14px 28px -12px rgba(13, 22, 18, .6); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #12301f; }
.ph-play svg { width: 12px; height: 12px; margin-left: 2px; }
.ready { display: grid; gap: 8px; justify-items: start; }
.ready-state { display: inline-flex; align-items: center; gap: 7px; font: 600 13.5px/1 var(--text); color: var(--ink); }
.ready-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 0 3px rgba(52, 229, 127, .25); }
.mock-ready .file { font-size: 13px; padding: 7px 10px; }
.ready-dl { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; background: var(--vert); color: var(--vert-encre); font: 600 13px/1 var(--text); }
.ready-dl svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .sc { transition: none; } }
.steps .mock { height: 150px; }
/* Illustrations cliquables comme la zone de dépôt : contour vert au survol */
.mock-link { text-decoration: none; color: inherit; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow .35s var(--ease-out); }
.mock-link:hover { box-shadow: inset 0 0 0 2px var(--vert-2); }
@media (hover: hover) and (pointer: fine) { .mock-ready:hover .ph { transform: translateY(-3px); } }
.ph { transition: transform .5s var(--ease-out); }

/* Sous-titres « smooth from bottom » : petites phrases gras + italique serif, chaque mot monte doucement du bas, l'un après l'autre.
   Cycle 6 s : 3 phrases de 2 s ; la phrase s'efface, la suivante arrive. */
.cap-st { height: 1.4em; font-size: clamp(20px, 6cqw, 32px); }
.cap-st .cph { position: absolute; left: 3%; right: 3%; top: 0; z-index: 3; text-align: center; opacity: 0; animation: st-phrase 6s calc(var(--p) * 2s) infinite; }
.cap-st b, .cap-st em { display: inline-block; opacity: 0; text-shadow: 0 3px 16px rgba(0, 0, 0, .7); animation: st-from-bottom 6s calc(var(--p) * 2s + var(--i) * .18s) infinite; }
.cap-st b { font: 800 1em/1.1 "Archivo", var(--display); letter-spacing: -.02em; color: #fff; }
.cap-st em { font: italic 500 1.16em/1 "Bodoni Moda", Georgia, serif; color: var(--vert); }
@keyframes st-phrase { 0% { opacity: 1; transform: none; } 29% { opacity: 1; transform: none; } 33.3% { opacity: 0; transform: translateY(-.25em); } 100% { opacity: 0; } }
@keyframes st-from-bottom { 0% { opacity: 0; transform: translateY(.6em); filter: blur(3px); } 7% { opacity: 1; transform: none; filter: blur(0); } 100% { opacity: 1; transform: none; filter: blur(0); } }
.cap-st b, .cap-st em { animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { .cap-st .cph, .cap-st b, .cap-st em { animation: none; } .cap-st .cph:first-child, .cap-st .cph:first-child b, .cap-st .cph:first-child em { opacity: 1; } }
/* Correctif : les mots repartent EXACTEMENT avec leur phrase (même horloge), le décalage mot à mot est dans les étapes de l'animation.
   Avant, chaque mot avait son propre retard : au redémarrage, il restait affiché un instant puis revenait (effet « pop par-dessus »). */
.cap-st b, .cap-st em { animation: st-w0 6s calc(var(--p) * 2s) infinite cubic-bezier(.22, 1, .36, 1); }
.cap-st .cph > :nth-child(2) { animation-name: st-w1; }
.cap-st .cph > :nth-child(3) { animation-name: st-w2; }
@keyframes st-w0 { 0% { opacity: 0; transform: translateY(.6em); filter: blur(3px); } 7%, 100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes st-w1 { 0%, 3% { opacity: 0; transform: translateY(.6em); filter: blur(3px); } 10%, 100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes st-w2 { 0%, 6% { opacity: 0; transform: translateY(.6em); filter: blur(3px); } 13%, 100% { opacity: 1; transform: none; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .cap-st b, .cap-st em { animation: none; } }

/* ===================== La silhouette prend vie (2026-11-05) =====================
   Elle respire, porte le logo, et la case Sous-titres est « montée » : un zoom coupé à chaque phrase (calé sur les sous-titres, cycle 6 s). */
.vid .actor { position: absolute; left: 50%; bottom: -66px; z-index: 2; height: 315px; aspect-ratio: 300 / 533; transform: translateX(-50%); transform-origin: 50% 32%; }
.roto .actor { height: 330px; bottom: -96px; }
.vid .actor .who { position: absolute; inset: 0; left: 0; bottom: 0; width: 100%; height: 100%; transform-origin: 50% 100%; transform: none;
  filter: brightness(1.7) saturate(.9) drop-shadow(0 0 1.5px rgba(214, 255, 230, .7)) drop-shadow(0 0 16px rgba(52, 229, 127, .45));
  animation: who-breathe 3.4s var(--ease-in-out) infinite alternate; }
.who-mark { position: absolute; left: 50%; top: 64%; width: 12%; transform: translateX(-50%); color: var(--vert); filter: drop-shadow(0 0 6px rgba(52, 229, 127, .7)); animation: who-breathe 3.4s var(--ease-in-out) infinite alternate; }
.roto .who-mark { display: none; }
@keyframes who-breathe { from { scale: 1 1; } to { scale: 1.012 1.02; } }
/* Zoom coupé à chaque phrase : large → serré → moyen (comme un vrai montage, pas de rebond) */
.t-subs .scene { transform-origin: 50% 40%; animation: cam-cut-bg 6s infinite; }
.t-subs .actor { animation: cam-cut 6s infinite; }
@keyframes cam-cut { 0%, 33.2% { transform: translateX(-50%) scale(1); } 33.3%, 66.5% { transform: translateX(-50%) scale(1.12); } 66.6%, 100% { transform: translateX(-50%) scale(1.05); } }
@keyframes cam-cut-bg { 0%, 33.2% { transform: scale(1); } 33.3%, 66.5% { transform: scale(1.12); } 66.6%, 100% { transform: scale(1.05); } }
.t-subs .scene, .t-subs .actor { animation-timing-function: linear; }
@media (prefers-reduced-motion: reduce) { .vid .actor, .vid .actor .who, .who-mark, .t-subs .scene { animation: none; } }
.cap-st { top: 50%; }
.t-subs .who-mark { top: 71%; width: 11%; }
.vid .actor .who-mark { z-index: 3; }

/* ===================== Page Crédits : mêmes cartes que les Tarifs de l'accueil (2026-11-05) ===================== */
.cr-plans { margin-top: 16px; }
.cr-plans .plan-on:not(.plan-hi) { box-shadow: inset 0 0 0 2px var(--vert-2), 0 30px 60px -44px rgba(13, 22, 18, .35); }
.cr-plans .plan-hi.plan-on { box-shadow: 0 0 0 3px var(--vert-2), 0 40px 80px -40px rgba(13, 22, 18, .6); }
.cr-plans .plan-go { appearance: none; border: 0; cursor: pointer; }
.cr-plans .btn-ghost.plan-go { border: 1px solid var(--line-2); }
.cr-plans .plan-go[aria-pressed="true"] { pointer-events: none; }
.cr-buy { margin-top: 18px; }
@media (max-width: 1100px) { .cr-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cr-plans { grid-template-columns: minmax(0, 1fr); } }
.plan-an { min-height: 1.35em; }

/* ===================== Page « Ma banque » (B-rolls + images du client, 2026-11-05) ===================== */
.bq-intro { max-width: 68ch; margin-top: 10px; }
.app-main .bq-sec { margin-top: 34px; }
.bq-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.bq-count { margin-left: 8px; font: 600 14px/1 var(--text); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bq-add { cursor: pointer; gap: 6px; }
.bq-add svg { width: 16px; height: 16px; }
.bq-add.full { opacity: .45; pointer-events: none; }
.bq-rule { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.bq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.bq-empty { grid-column: 1 / -1; padding: 22px; border-radius: 16px; border: 1.5px dashed var(--line-2); color: var(--ink-2); font-size: 15px; text-align: center; }
.bq-item { position: relative; display: grid; gap: 8px; }
.bq-vis { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: #0c1210; box-shadow: inset 0 0 0 1px var(--line); }
.bq-grid-img .bq-vis { background: var(--sage-soft, var(--surface-2)); }
.bq-vis img { width: 100%; height: 100%; object-fit: cover; }
.bq-grid-img .bq-vis img { object-fit: contain; padding: 10px; }
.bq-dur { position: absolute; right: 6px; bottom: 6px; padding: 3px 6px; border-radius: 6px; background: rgba(11, 21, 17, .74); color: #eef3ef; font: 600 11.5px/1 var(--text); font-variant-numeric: tabular-nums; }
.bq-item p { display: grid; gap: 2px; min-width: 0; padding: 0 2px; }
.bq-item p span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px/1.3 var(--text); }
.bq-item small { font-size: 12.5px; color: var(--ink-2); }
.bq-del { appearance: none; position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); cursor: pointer; box-shadow: 0 2px 8px rgba(13, 22, 18, .25); }
.bq-del svg { width: 14px; height: 14px; }
.bq-note { margin-top: 18px; font-size: 14.5px; }
.bq-note.warn { color: #9a5b00; }
.bq-note a { color: inherit; font-weight: 600; }
.bq-proto { margin-top: 26px; font-size: 13px; color: var(--ink-2); }

/* Studio : choisir dans sa banque (gratuit, hors fichiers joints) */
.st-bank { margin-top: 16px; }
.st-bank .st-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.st-bank-link { margin-left: auto; font: 600 13.5px/1 var(--text); color: #0b7340; }
.st-bank-grid { display: flex; gap: 8px; overflow-x: auto; margin: 10px 0 0; padding: 2px 2px 6px; list-style: none; scrollbar-width: thin; }
.st-bank-grid:empty { display: none; }
.st-bank-item { appearance: none; position: relative; display: block; flex: none; width: 92px; aspect-ratio: 16 / 10; overflow: hidden; padding: 0; border: 0; border-radius: 10px; background: #0c1210; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); transition: transform var(--press) var(--ease-out), box-shadow .2s; }
.st-bank-item.image { background: var(--sage-soft, var(--surface-2)); }
.st-bank-item img { width: 100%; height: 100%; object-fit: cover; }
.st-bank-item.image img { object-fit: contain; padding: 8px; }
.st-bank-item .k { position: absolute; left: 5px; bottom: 5px; padding: 2px 5px; border-radius: 5px; background: rgba(11, 21, 17, .74); color: #eef3ef; font: 600 10.5px/1 var(--text); }
.st-bank-item .ok { position: absolute; top: 5px; right: 5px; display: none; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--vert); color: var(--vert-encre); }
.st-bank-item .ok svg { width: 12px; height: 12px; }
.st-bank-item[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--vert-2); }
.st-bank-item[aria-pressed="true"] .ok { display: grid; }
.st-bank-item:active { transform: scale(.97); }
.st-bank-empty { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.st-bank-empty a { color: #0b7340; font-weight: 600; }
.plan { cursor: pointer; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .plan:hover { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .plan:hover { transform: none; } }
/* Page Crédits plus large : 4 cartes à l'aise (même largeur que sur l'accueil) */
.page-credits .app-main { max-width: 1240px; }
.plan-an:empty { display: none; }

/* Banque : enregistrer sur nos serveurs, avancement par fichier et temps estimé (2026-11-05) */
.bq-save { position: sticky; top: 76px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 22px; padding: 14px 16px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--vert-2), 0 18px 36px -24px rgba(13, 22, 18, .45); }
.bq-save-t { font: 600 15.5px/1.3 var(--text); }
.bq-save-est { margin-top: 3px; font-size: 14px; color: var(--ink-2); }
.bq-save .btn:disabled { opacity: .5; cursor: progress; }
.bq-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .25); }
.bq-prog i { position: absolute; inset: 0; background: var(--vert); transform: scaleX(0); transform-origin: left; }
.bq-item.ready .bq-prog { display: none; }
.bq-st { font-weight: 600; color: #9a5b00; }
.bq-item.busy .bq-st { color: var(--ink); }
.bq-item.ready .bq-st { color: #0b7340; }
.bq-item.busy .bq-del { display: none; }

/* Banque : intro en 3 points courts */
.bq-intro { display: grid; gap: 6px; max-width: 62ch; margin: 14px 0 0; padding: 0; list-style: none; font-size: 16px; color: var(--ink-2); }
.bq-intro li { position: relative; padding-left: 18px; }
.bq-intro li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--vert-2); }
.bq-err { margin-top: 8px; }
.bq-err:empty { display: none; }

/* Bouton « Lancer le montage » grisé mais cliquable (ramène au dépôt du rush) */
#st-launch.is-off { cursor: pointer; background: color-mix(in srgb, var(--ink) 10%, transparent); color: color-mix(in srgb, var(--ink) 45%, transparent); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { #st-launch.is-off:hover { transform: none; background: color-mix(in srgb, var(--ink) 14%, transparent); } }
@keyframes nudge-text { 0%, 100% { color: var(--ink-2); } 30%, 70% { color: #9a5b00; } }
.nudge-text { animation: nudge-text 1.2s var(--ease-in-out); }

/* ===================== Studio : bouton « i » des styles + fenêtre aperçu / conseils (2026-11-06) ===================== */
.st-sw { position: relative; flex: none; }
.st-info { appearance: none; position: absolute; top: 12px; left: 12px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #12301f; cursor: pointer; box-shadow: 0 2px 10px rgba(13, 22, 18, .3); transition: transform var(--press) var(--ease-out), background-color .2s; }
.st-info svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .st-info:hover { background: var(--vert); } }
.st-info:active { transform: scale(.94); }
.st-dlg { width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 40px); margin: auto; padding: 0; border: 0; border-radius: var(--r-l); background: var(--surface); color: var(--ink); box-shadow: 0 40px 100px -30px rgba(13, 22, 18, .6); overflow: auto; }
.st-dlg::backdrop { background: rgba(10, 18, 14, .55); backdrop-filter: blur(4px); }
.st-dlg[open] { animation: dlg-in .22s var(--ease-out); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.st-dlg-box { position: relative; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 26px; padding: 22px; }
.st-dlg.wide .st-dlg-box { grid-template-columns: minmax(0, 1fr); }
.st-dlg-media { position: relative; align-self: start; aspect-ratio: 9 / 16; max-height: 70vh; overflow: hidden; border-radius: 18px; background: #0c1210; }
.st-dlg.wide .st-dlg-media { aspect-ratio: 16 / 9; max-height: none; }
.st-dlg-media video { width: 100%; height: 100%; object-fit: cover; }
.st-dlg-sound { appearance: none; position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #12301f; cursor: pointer; }
.st-dlg-sound svg { width: 18px; height: 18px; }
.st-dlg-sound[aria-pressed="true"] { background: var(--vert); }
.st-dlg-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-right: 30px; }
.st-dlg.wide .st-dlg-body { padding-right: 0; }
.st-dlg-fmt { display: flex; align-items: center; gap: 8px; font: 600 13.5px/1 var(--text); color: var(--ink-2); }
.st-dlg-fmt .ratio.v { width: 9px; height: 15px; } .st-dlg-fmt .ratio.h { width: 16px; height: 10px; }
.st-dlg h2 { font: 600 30px/1.1 var(--display); letter-spacing: -.03em; }
.st-dlg-pitch { font-size: 16.5px; line-height: 1.45; color: var(--ink-2); }
.st-dlg-adds { display: flex; flex-wrap: wrap; gap: 6px; }
.st-dlg-adds span { padding: 6px 10px; border-radius: 999px; background: var(--sage-soft, var(--surface-2)); font: 600 13px/1 var(--text); }
.st-dlg-tipsbox { margin-top: 6px; padding: 16px 18px; border-radius: 16px; background: var(--sage-soft, var(--surface-2)); }
.st-dlg-tipsbox h3 { font: 600 16px/1.2 var(--display); }
.st-dlg-tips { display: grid; gap: 9px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.4; }
.st-dlg-tips li { display: flex; gap: 9px; }
.st-dlg-tips svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: #0b7340; }
.st-dlg-soft { margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.st-dlg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; }
.st-dlg-actions .btn-ghost { margin-left: 0; }
.st-dlg-soon { font: 600 14.5px/1 var(--text); color: var(--ink-2); }
.st-dlg-x { appearance: none; position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--sage-soft, var(--surface-2)); color: var(--ink); cursor: pointer; }
.st-dlg-x svg { width: 16px; height: 16px; }
@media (max-width: 700px) {
  .st-dlg-box { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 16px; }
  .st-dlg-media { max-height: 46vh; justify-self: center; width: auto; }
  .st-dlg-body { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .st-dlg[open] { animation: none; } }

/* Attente : estimation + « Faire un nouveau montage » ; Mes vidéos : temps restant (2026-11-06) */
.st-eta { color: #0b7340; white-space: nowrap; }
.st-next { display: block; margin-top: 14px; }
.st-next .btn-ghost { display: inline-flex; align-items: center; gap: 6px; margin: 0; text-decoration: none; }
.st-next svg { width: 16px; height: 16px; }
.vd-eta { display: block; margin-top: 4px; font: 600 13.5px/1.3 var(--text); color: #0b7340; }

/* Cartes de formules : ce qui n'est pas inclus, avec une croix grisée (2026-11-06) */
.plan-plus li.no { color: color-mix(in srgb, var(--ink) 38%, transparent); }
.plan-plus li.no svg { color: color-mix(in srgb, var(--ink) 30%, transparent); }
.plan-hi .plan-plus li.no { color: rgba(238, 243, 239, .38); }
.plan-hi .plan-plus li.no svg { color: rgba(238, 243, 239, .3); }
/* Cartes alignées : la phrase sous le nom occupe toujours 2 lignes, les lignes de fonctions tombent au même niveau */
.plan-pour { min-height: 2.8em; }
@media (max-width: 640px) { .plan-pour { min-height: 0; } }

/* Page Crédits : recharges (crédits en plus de la formule) */
.cr-recharges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.cr-rec { appearance: none; display: grid; gap: 6px; justify-items: start; padding: 18px 20px; border: 0; border-radius: 20px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .2s, transform var(--press) var(--ease-out); }
.cr-rec.hi { box-shadow: inset 0 0 0 1.5px var(--vert-2); }
.cr-rec.on { box-shadow: inset 0 0 0 2.5px var(--vert-2), 0 12px 26px -18px rgba(13, 22, 18, .5); }
.cr-rec:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .cr-rec:hover { box-shadow: inset 0 0 0 1.5px var(--ink-2); } .cr-rec.on:hover { box-shadow: inset 0 0 0 2.5px var(--vert-2); } }
.cr-rec-n { font: 500 15px/1 var(--text); color: var(--ink-2); }
.cr-rec-n b { font: 600 28px/1 var(--display); letter-spacing: -.03em; color: var(--ink); margin-right: 4px; }
.cr-rec-eq { font-size: 13.5px; color: var(--ink-2); }
.cr-rec-prix { margin-top: 6px; font: 700 18px/1 var(--text); }
@media (max-width: 640px) { .cr-recharges { grid-template-columns: minmax(0, 1fr); } }

/* Recharges : mêmes cartes que les formules, 3 colonnes */
.cr-plans.cr-recharges { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 960px; }
.topup-n b { font-variant-numeric: tabular-nums; }
.topup-n span { font-size: 17px; }
.cr-plans .topup.plan-on:not(.plan-hi) { box-shadow: inset 0 0 0 2px var(--vert-2), 0 30px 60px -44px rgba(13, 22, 18, .35); }
@media (max-width: 900px) { .cr-plans.cr-recharges { grid-template-columns: minmax(0, 1fr); max-width: 460px; } }

/* ===================== Onglets de l'app sur téléphone : les trois tiennent sans être coupés (2026-11-08) ===================== */
@media (max-width: 520px) {
  .app-nav .app-links { width: 100%; }
  .app-nav .app-links a { flex: 1 1 auto; padding: 8px 10px; font-size: 14px; text-align: center; }
}