/* ════════════════════════════════════════════════════════════
   AgfaRythmo — vitrine : illustrations en CSS.
   Construites avec les formes de l'application (bande, répliques, appareils).
   Règle du guide DA : la hiérarchie se lit à la profondeur. Ce qui contient est
   CREUSÉ (fond plus sombre, ombre interne, liseré clair en bas) ; un seul objet
   par illustration est posé en RELIEF. Pas de dégradés « gonflés ».
   Tout est décoratif (aria-hidden) : le texte porte le sens.
   Les vidéos, les écrans et les châssis d'appareils restent sombres dans les
   deux thèmes : ce sont des objets, pas de l'interface.
   ════════════════════════════════════════════════════════════ */

:root{
  --v-price-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9b6ff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
:root[data-theme="light"]{
  --v-price-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b34c4' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* ── Creux et relief, une fois pour toutes ──────────────── */
.dig{background:var(--da-slot);border:1px solid rgba(var(--da-shade-rgb),calc(.45*var(--da-shade-k)));
  box-shadow:inset 0 2px 5px rgba(var(--da-shade-rgb),calc(.6*var(--da-shade-k))),0 1px 0 rgba(var(--da-glint-rgb),calc(.04*var(--da-glint-k)))}
.raised{background:var(--da-card);border:1px solid rgba(var(--da-edge-rgb),calc(.08*var(--da-edge-k)));
  box-shadow:0 16px 40px -24px rgba(var(--da-shade-rgb),calc(.55*var(--da-shade-k)))}

/* ── La bande miniature : un logement creusé ────────────── */
.mini{position:relative;display:grid;gap:4px;padding:6px;border-radius:8px;
  background:var(--da-slot);border:1px solid rgba(var(--da-shade-rgb),calc(.45*var(--da-shade-k)));
  box-shadow:inset 0 2px 5px rgba(var(--da-shade-rgb),calc(.6*var(--da-shade-k))),0 1px 0 rgba(var(--da-glint-rgb),calc(.04*var(--da-glint-k)))}
.mini__line{position:relative;height:16px;background:var(--band-bg);border-radius:3px;overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(var(--da-shade-rgb),calc(.5*var(--da-shade-k)))}
.mini__blk{position:absolute;top:2px;bottom:2px;border-radius:2px;background:var(--c,#7c3aed)}
.mini__blk::after{content:"";position:absolute;left:14%;right:14%;top:50%;height:2px;margin-top:-1px;
  background:rgba(255,255,255,.5);border-radius:2px}
.mini__blk--ghost{background:transparent;border:1px dashed rgba(var(--band-hint-rgb),.7)}
.mini__blk--ghost::after{background:rgba(var(--band-hint-rgb),.5)}
.mini__cut{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--band-scene);
  box-shadow:0 0 6px var(--band-scene);opacity:.85;z-index:2}
.mini__head{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--band-cursor-a);
  box-shadow:var(--band-head-glow);z-index:3}
.mini__hint{position:absolute;top:0;height:7px;z-index:1;
  background:
    linear-gradient(180deg,rgba(var(--band-hint-rgb),.95),rgba(var(--band-hint-rgb),0)) top left / 2px 7px no-repeat,
    linear-gradient(180deg,rgba(var(--band-hint-rgb),.75),rgba(var(--band-hint-rgb),0)) top right / 2px 4px no-repeat,
    linear-gradient(90deg,rgba(var(--band-hint-rgb),.3),rgba(var(--band-hint-rgb),.06)) top left / 100% 1px no-repeat}

/* ── L'écran d'un projet : vidéo + bande ─────────────────── */
.app{display:grid;gap:8px;padding:8px;background:var(--da-bg);border-radius:10px;
  grid-template-rows:auto auto;align-content:start;height:100%}
.app__video{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;
  background:
    radial-gradient(60% 80% at 30% 60%,rgba(14,116,144,.4),transparent 70%),
    radial-gradient(50% 70% at 75% 40%,rgba(124,58,237,.3),transparent 70%),
    #10151f;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.04)}
.app__tc{position:absolute;left:8px;bottom:6px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;
  color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
.app__people{position:absolute;top:6px;right:6px;display:flex}
.ava{width:16px;height:16px;border-radius:999px;border:2px solid var(--da-bg);background:var(--c,#7c3aed);
  margin-left:-5px}
.ava--big{width:26px;height:26px;margin-left:-7px}

/* ── Appareils : proportions réelles ─────────────────────
   Portable 16:10, tablette 4:3, téléphone 9:19,5. Le châssis est en relief
   (l'objet posé), l'écran à l'intérieur est creusé. */
.dev{position:relative}
.dev__screen{background:#0a0d15;overflow:hidden;
  box-shadow:0 26px 46px -28px rgba(var(--da-shade-rgb),calc(.95*var(--da-shade-k))),0 0 0 1px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.07)}
.dev--laptop .dev__screen{aspect-ratio:16/10;border-radius:10px 10px 3px 3px;padding:6px}
.dev--laptop::after{content:"";display:block;height:8px;margin:0 -6%;border-radius:0 0 9px 9px;
  background:#1d2434;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 18px -12px rgba(var(--da-shade-rgb),calc(.9*var(--da-shade-k)))}
/* Tablette (silhouette iPad) */
.dev--tablet .dev__screen{
  position:relative;
  aspect-ratio:4/3;border-radius:12px;padding:6px;
  background:#141926;
  border:1px solid rgba(var(--da-shade-rgb),calc(.65*var(--da-shade-k)));
  box-shadow:
    0 20px 42px -16px rgba(var(--da-shade-rgb),calc(.95*var(--da-shade-k))),
    0 0 0 1px rgba(var(--da-glint-rgb),calc(.09*var(--da-glint-k)));
}
.dev--tablet .app{
  height:100%;padding:6px;gap:5px;border-radius:8px;
}
.dev--tablet .mini{
  padding:4px 6px;gap:3px;border-radius:5px;height:fit-content;
}
.dev--tablet .mini__line{height:10px}

/* Téléphone abstrait (silhouette iPhone moderne épurée) */
.dev--phone .dev__screen{
  position:relative;
  aspect-ratio:9/19.5;border-radius:13px;padding:4px;
  background:#141926;
  border:1px solid rgba(var(--da-shade-rgb),calc(.65*var(--da-shade-k)));
  box-shadow:
    0 16px 32px -14px rgba(var(--da-shade-rgb),calc(.95*var(--da-shade-k))),
    0 0 0 1px rgba(var(--da-glint-rgb),calc(.09*var(--da-glint-k)));
  display:flex;flex-direction:column;
}
/* Dynamic island discrète */
.dev--phone .dev__screen::before{
  content:"";display:block;width:28%;height:3px;margin:1px auto 4px;border-radius:99px;
  background:#05070b;box-shadow:0 0 0 .5px rgba(255,255,255,.08);flex-shrink:0;
}
.dev--phone .app{
  flex:1;padding:4px;gap:4px;border-radius:9px;background:var(--da-bg);
  display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;
}
.dev--phone .app__video{
  aspect-ratio:16/9;border-radius:5px;flex-shrink:0;
}
.dev--phone .mini{
  padding:3px 4px;gap:2px;border-radius:5px;height:fit-content;flex:0 0 auto;
}
.dev--phone .mini__line{height:7px}

/* ── Le visuel du hero ──────────────────────────────────── */
.hero__visual{position:relative;padding:10px 0 22px 6%}
.hero__visual::before{content:"";position:absolute;inset:-12% -6% 0 0;pointer-events:none;
  background:radial-gradient(58% 55% at 62% 45%,rgba(132,85,246,.18),transparent 70%)}
.hero__visual > *{position:relative}
.hero__visual .dev--laptop{width:100%}
.hero__visual .dev--phone{position:absolute;left:0;bottom:0;width:15%;transform:rotate(-4deg);transform-origin:bottom left}

/* ── Le cadre d'une illustration : un grand logement ────── */
.illu{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;
  background:var(--da-slot);border:1px solid rgba(var(--da-shade-rgb),calc(.45*var(--da-shade-k)));
  box-shadow:inset 0 2px 6px rgba(var(--da-shade-rgb),calc(.7*var(--da-shade-k))),0 1px 0 rgba(var(--da-glint-rgb),calc(.04*var(--da-glint-k)));
  display:flex;align-items:center;justify-content:center;padding:clamp(18px,4%,36px)}
.illu > *{width:100%;position:relative}
.illu--video{aspect-ratio:16/9}
.illu--auto{aspect-ratio:auto;min-height:0}

/* ── Partout : trois appareils, un même projet ──────────── */
.trio{display:grid;grid-template-columns:1fr .54fr .2fr;gap:4%;align-items:end}
.trio__link{position:absolute;left:17%;right:4%;top:15%;height:0;border-top:1px dashed rgba(var(--v-teal-rgb),.4)}
.trio__link::before,.trio__link::after{content:"";position:absolute;top:-3px;width:6px;height:6px;border-radius:99px;
  background:rgb(var(--v-teal-rgb));box-shadow:0 0 8px rgba(var(--v-teal-rgb),.8)}
.trio__link::before{left:0}.trio__link::after{right:0}

/* ── Édition : une réplique qu'on tire, les personnages ─── */
.edit{display:grid;gap:14px}
.edit .mini__line{height:22px}
.edit .mini__blk--active{outline:2px solid var(--band-cursor-a);outline-offset:1px}
.edit .mini__blk--active::before{content:"";position:absolute;right:-4px;top:-3px;bottom:-3px;width:6px;border-radius:2px;
  background:var(--band-cursor-a);box-shadow:var(--band-handle-glow)}
.edit__tc{position:absolute;padding:2px 6px;border-radius:4px;background:#fff;color:#111;
  font-family:var(--mono);font-size:10px;font-weight:600;font-variant-numeric:tabular-nums;z-index:4;white-space:nowrap;
  box-shadow:0 6px 14px -6px rgba(var(--da-shade-rgb),calc(.9*var(--da-shade-k)))}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;
  background:var(--da-slot);border:1px solid rgba(var(--da-shade-rgb),calc(.45*var(--da-shade-k)));
  box-shadow:inset 0 1px 3px rgba(var(--da-shade-rgb),calc(.55*var(--da-shade-k))),0 1px 0 rgba(var(--da-glint-rgb),calc(.03*var(--da-glint-k)));
  font-size:11px;color:var(--da-ink-muted)}
.chip i{width:9px;height:9px;border-radius:2px;background:var(--c)}
.chip .kbd{font-size:9px;padding:0 .35em;line-height:1.5}

/* ── À plusieurs : deux personnes sur la même bande ─────── */
.duo{position:relative;display:grid;gap:14px}
.duo .mini__line{height:22px}
.cur{position:absolute;top:0;bottom:0;width:2px;background:var(--c);z-index:5}
.cur span{position:absolute;top:-20px;left:0;padding:2px 6px;border-radius:4px 4px 4px 0;background:var(--c);
  color:#fff;font-size:10px;font-weight:600;white-space:nowrap}
.duo__people{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--da-ink-muted)}
.duo__people .avas{display:flex;padding-left:7px}

/* ── Débuts de dialogue ──────────────────────────────────
   Le tooltip est le seul objet en relief : il flotte au-dessus de la bande,
   juste sur le repère survolé, la pointe du curseur à son pied. */
.hints{display:grid;gap:14px}
.hints .mini{overflow:visible;margin-top:78px}
.hints .mini__line{height:22px;overflow:visible}
.hints .mini__hint{height:11px;top:-1px}
.mini__hint--hover{background:
    linear-gradient(180deg,rgba(var(--band-hint-rgb),1),rgba(var(--band-hint-rgb),.05)) top left / 2px 100% no-repeat,
    linear-gradient(180deg,rgba(var(--band-hint-rgb),.9),rgba(var(--band-hint-rgb),0)) top right / 2px 60% no-repeat,
    linear-gradient(180deg,rgba(var(--band-hint-rgb),.26),rgba(var(--band-hint-rgb),.03)) top left / 100% 100% no-repeat}
.tip{position:absolute;bottom:calc(100% + 14px);display:grid;gap:2px;padding:8px 10px;border-radius:8px;
  background:var(--da-card);border:1px solid rgba(var(--v-teal-rgb),.3);
  box-shadow:0 16px 34px -20px rgba(var(--da-shade-rgb),calc(.9*var(--da-shade-k)));font-size:11px;color:var(--da-ink);z-index:8;white-space:nowrap}
.tip b{color:var(--v-teal-ink);font-weight:600}
.tip small{color:var(--da-ink-faint);font-size:10px}
.tip::after{content:"";position:absolute;left:16px;bottom:-5px;width:9px;height:9px;transform:rotate(45deg);
  background:var(--da-card);border-right:1px solid rgba(var(--v-teal-rgb),.3);border-bottom:1px solid rgba(var(--v-teal-rgb),.3)}
.pointer{position:absolute;width:15px;height:15px;fill:#fff;stroke:#0a0d15;stroke-width:1.2;z-index:9;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.85))}
.legend{display:flex;gap:20px;flex-wrap:wrap;margin:0;padding:0;list-style:none;font-size:11px;color:var(--da-ink-muted)}
.legend li{display:flex;align-items:center;gap:8px}
.legend__blk{width:16px;height:9px;border-radius:2px;background:#7c3aed}
.legend__hint{width:16px;height:9px;border-left:2px solid rgb(var(--band-hint-rgb));border-top:1px solid rgba(var(--band-hint-rgb),.5)}

/* ── Personnages ────────────────────────────────────────── */
.cast{display:grid;gap:8px}
.cast__row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:8px 10px;border-radius:8px;
  background:var(--da-slot);border:1px solid rgba(var(--da-shade-rgb),calc(.45*var(--da-shade-k)));
  box-shadow:inset 0 1px 3px rgba(var(--da-shade-rgb),calc(.55*var(--da-shade-k))),0 1px 0 rgba(var(--da-glint-rgb),calc(.03*var(--da-glint-k)));
  font-size:12px;color:var(--da-ink)}
.cast__row i{width:13px;height:13px;border-radius:4px;background:var(--c)}
.cast__row--ghost{border-style:dashed;border-color:rgba(var(--da-edge-rgb),calc(.14*var(--da-edge-k)));color:var(--da-ink-muted);
  background:transparent;box-shadow:none}
.cast__row .kbd{font-size:10px}

/* ── Changements de plan ────────────────────────────────── */
.cuts{display:grid;gap:8px}
.cuts__film{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
.cuts__film i{aspect-ratio:16/9;border-radius:3px;background:#1b2231;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.cuts__film i:nth-child(3n){background:#16202b}
.cuts .mini__line{height:20px}

/* ── Annuler, rétablir ──────────────────────────────────── */
.undo{display:grid;gap:10px}
.undo__row{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.undo__row .kbd{font-size:10px;white-space:nowrap}
.undo .mini__line{height:20px}
.undo__row--dim{opacity:.45}

/* ── Liste des 4 tâches serveur ─────────────────────────── */
.srv-tasks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:16px}
.srv-tasks li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.srv-tasks b{display:block;color:var(--da-ink-strong);font-weight:600;font-size:.95rem;margin-bottom:2px}
.srv-tasks span{font-size:.88rem;color:var(--da-ink-muted);line-height:1.45}

/* ── Le noyau des modales (.modal-core) ────────────────────
   Deux paliers de profondeur : les rives en verre teinté, le logement traversant neutre
   et creux, la règle graduée au plancher, et le glyphe avec son triple halo lumineux. */
.modal-core{
  --size:44px;
  --rive:5px;
  --glyph:20px;
  --glow:1;
  --core-tray:rgba(168,177,201,.11);
  --core-tick:rgba(var(--da-edge-rgb),.24);
  --core-slot:rgba(8,10,22,.45);

  position:relative;flex-shrink:0;display:grid;place-items:center;
  width:var(--size);height:var(--size);color:var(--raw,var(--da-violet));
  background:var(--core-tray);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:0;border-radius:.82rem;overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(var(--da-shade-rgb),calc(.5*var(--da-shade-k))),
    0 1px 0 rgba(255,255,255,.04)}

.modal-core::before{content:"";position:absolute;left:0;right:0;top:var(--rive);bottom:var(--rive);
  z-index:1;background:var(--core-slot);
  box-shadow:inset 0 1px 3px rgba(var(--da-shade-rgb),calc(.72*var(--da-shade-k))),
    0 1px 0 rgba(255,255,255,.055)}

.modal-core::after{content:"";position:absolute;left:0;right:0;bottom:var(--rive);height:4px;
  z-index:2;background:repeating-linear-gradient(90deg,var(--core-tick) 0 1px,transparent 1px 5px)}

.modal-core svg{position:relative;z-index:3;width:var(--glyph);height:var(--glyph);
  color:var(--raw,var(--da-violet));
  filter:drop-shadow(0 0 2px color-mix(in srgb,currentColor calc(80%*var(--glow)),transparent))
    drop-shadow(0 0 7px color-mix(in srgb,currentColor calc(45%*var(--glow)),transparent))
    drop-shadow(0 0 15px color-mix(in srgb,currentColor calc(26%*var(--glow)),transparent))}

@supports (color:color-mix(in srgb,red,blue)){
  .modal-core{
    --core-tray:color-mix(in srgb,var(--raw,var(--da-violet)) 12%,transparent);
    --core-tick:color-mix(in srgb,var(--raw,var(--da-violet)) 42%,transparent);
  }
}

:where(:root[data-theme='light']) .modal-core{
  --core-slot:rgba(15,23,42,.07);
  --glow:.35;
}

/* ── Assistants : reproduction fidèle de RythmoProgress ──── */
.srv-preview{display:grid;gap:0;width:100%;background:var(--da-card);
  border:1px solid rgba(var(--da-edge-rgb),calc(.08*var(--da-edge-k)));
  border-radius:14px;padding:clamp(16px,3.5vw,26px);
  box-shadow:0 16px 36px -12px rgba(var(--da-shade-rgb),calc(.7*var(--da-shade-k))),
    inset 0 1px 0 rgba(var(--da-glint-rgb),calc(.06*var(--da-glint-k)))}

.srv-preview .hdr-num{display:flex;align-items:center;gap:14px;margin-bottom:15px}
.srv-preview .hdr-num .big{color:var(--da-ink-strong);line-height:.9;font-variant-numeric:tabular-nums;
  font-size:36px;font-weight:750;letter-spacing:-.05em}
.srv-preview .hdr-num .big em{font-style:normal;font-size:16px;font-weight:650;color:var(--da-ink-faint);margin-left:2px}
.srv-preview .hdr-num .mt{min-width:0}
.srv-preview .hdr-num .kicker{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--da-violet-pale);font-weight:700}
.srv-preview .hdr-num__titre{font-size:14px;font-weight:600;margin:3px 0 0;color:var(--da-ink-strong);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Gouttière du rail */
.srv-preview .rp-tray{position:relative;display:flex;padding:7px;background:var(--da-tray);
  border:1px solid rgba(var(--da-edge-rgb),.05);border-radius:999px;
  box-shadow:inset 0 1px 3px rgba(var(--da-shade-rgb),calc(.55*var(--da-shade-k))),0 1px 0 rgba(var(--da-glint-rgb),calc(.04*var(--da-glint-k)))}

.srv-preview .rp-flow{position:relative;z-index:1;flex:1;height:14px;border-radius:999px;
  background:var(--da-slot);overflow:hidden}

.srv-preview .f-done{position:absolute;left:0;top:0;height:100%;border-radius:999px;
  background:#4c3968;overflow:hidden}
@supports (color: color-mix(in srgb, red, blue)) {
  .srv-preview .f-done{background:color-mix(in srgb, var(--da-violet) 40%, var(--da-tray))}
}

.srv-preview .f-head{position:absolute;right:0;top:0;height:100%;width:80px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0,var(--da-violet) 100%);
  animation:rp-pulse 1.7s linear infinite}

@keyframes rp-pulse{
  0%{width:48px;filter:brightness(1);animation-timing-function:cubic-bezier(.16,.86,.32,1)}
  24%{width:110px;filter:brightness(1.2);animation-timing-function:cubic-bezier(.36,0,.62,1)}
  100%{width:48px;filter:brightness(1)}
}

.srv-preview .rp-cut{position:absolute;top:0;bottom:0;z-index:3;width:3px;background:var(--da-tray);
  transform:translateX(-50%);pointer-events:none}

.srv-preview .rp-zones{position:absolute;inset:7px;z-index:2;pointer-events:none;border-radius:999px;overflow:hidden}
.srv-preview .rp-zone{position:absolute;top:0;bottom:0;border-radius:0;background:rgba(var(--da-edge-rgb),.14)}

.srv-preview .rp-ph{position:absolute;inset:0 7px;z-index:6;pointer-events:none}
.srv-preview .rp-ph b{position:absolute;top:50%;width:3px;height:28px;background:transparent;
  transform:translate(-50%,-50%)}
.srv-preview .rp-ph b::after{content:"";position:absolute;inset:0;border-radius:3px;background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.5),0 0 3px rgba(var(--da-shade-rgb),calc(.6*var(--da-shade-k)))}

/* Couleurs respectives des étapes */
.srv-preview .step-audio    { --step-c: #818cf8; }
.srv-preview .step-voice    { --step-c: #e879f9; }
.srv-preview .step-text     { --step-c: #c084fc; }
.srv-preview .step-speakers { --step-c: #06b6d4; }
.srv-preview .step-timecodes{ --step-c: #34d399; }

.srv-preview .rp-legend{display:flex;gap:7px;padding:0 7px;margin-top:10px}
.srv-preview .rp-legend span{min-width:0;font-size:11px;line-height:1.25;color:var(--da-ink-faint);
  text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:5px}

.srv-preview .step-dot{display:inline-block;width:6px;height:6px;border-radius:99px;
  background:var(--step-c);flex-shrink:0;opacity:.4}

.srv-preview .rp-legend span.done{color:var(--step-c);opacity:.85}
.srv-preview .rp-legend span.done .step-dot{opacity:.85;box-shadow:0 0 6px var(--step-c)}

.srv-preview .rp-legend span.cur{color:var(--da-ink-strong);font-weight:700;
  text-shadow:0 0 10px rgba(192,132,252,.35)}
.srv-preview .rp-legend span.cur .step-dot{opacity:1;box-shadow:0 0 8px var(--step-c);
  transform:scale(1.25)}

.srv-preview .rp-cap{display:flex;justify-content:space-between;gap:12px;padding:0 7px;
  font-size:11.5px;color:var(--da-ink-faint);margin-top:12px;font-variant-numeric:tabular-nums}
.srv-preview .rp-cap b{color:var(--da-ink);font-weight:600}

/* ── Import d'une vidéo ─────────────────────────────────── */
.upload{display:grid;grid-template-columns:38% 1fr;gap:14px;align-items:center;height:100%}
.upload__thumb{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;
  background:
    radial-gradient(60% 80% at 30% 60%,rgba(14,116,144,.4),transparent 70%),
    radial-gradient(50% 70% at 75% 40%,rgba(124,58,237,.3),transparent 70%),
    #10151f;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.04)}
.upload__meta{display:grid;gap:6px;font-size:11px;color:var(--da-ink-faint);font-family:var(--mono)}
.upload__meta b{color:var(--da-ink);font-weight:600;font-family:var(--sans);font-size:12px}
.upload__bar{display:block;height:8px;border-radius:999px;background:var(--da-tray);position:relative;overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(var(--da-shade-rgb),calc(.55*var(--da-shade-k))),0 1px 0 rgba(var(--da-glint-rgb),calc(.04*var(--da-glint-k)));margin-top:2px}
.upload__bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:72%;border-radius:999px;
  background:var(--da-ardoise)}

/* ── Les trois temps de fabrication (conforme au Guide DA §8 & §11) ──────────
   Grand écran studio interactif sans cartes SaaS : sélecteur en pilule inspiré
   de ModalTabs.vue, cadre cinématographique stable, matières et repères
   authentiques de l'application. Zéro barre néon de chargement. ── */
.studio-flow{display:grid;gap:clamp(16px,2.2vw,24px);margin-top:clamp(16px,2vw,24px)}

/* Sélecteur d'onglets en pilule (reproduit ModalTabs.vue) */
.studio-flow__nav{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:4px;
  border-radius:999px;background:var(--da-slot);
  border:1px solid rgba(var(--da-edge-rgb),calc(.06*var(--da-edge-k)));
  box-shadow:inset 0 1px 3px rgba(var(--da-shade-rgb),calc(.5*var(--da-shade-k)));
  margin:0 auto;max-width:100%;overflow-x:auto;scrollbar-width:none;
}
.studio-flow__nav::-webkit-scrollbar{display:none}

/* La pastille active glissante (comme la nav dynamique du header) */
.studio-flow__indicator{
  position:absolute;z-index:1;top:4px;bottom:4px;border-radius:999px;
  background:var(--da-card);
  border:1px solid rgba(var(--da-edge-rgb),calc(.08*var(--da-edge-k)));
  box-shadow:0 4px 14px -6px rgba(var(--da-shade-rgb),calc(.6*var(--da-shade-k)));
  pointer-events:none;opacity:0;
  transition:left .45s var(--da-ease),width .45s var(--da-ease),opacity .2s var(--da-ease);
}
.studio-flow__indicator.is-visible{opacity:1}

.studio-flow__tab{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:9px;padding:8px 18px 10px;border-radius:999px;
  background:transparent;border:1px solid transparent;cursor:pointer;
  color:var(--da-ink-muted);font-family:var(--sans);font-size:.84rem;font-weight:600;
  white-space:nowrap;transition:color .25s var(--da-ease);
}
.studio-flow__tab:hover{color:var(--da-ink-strong)}
.studio-flow__tab.is-active{
  color:var(--da-ink-strong);
}
.studio-flow__num{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  color:var(--da-violet-pale);font-weight:700;
}

/* Rail de vie sur la bordure de la pilule glissante : identique à NotificationItem.vue (§8 Guide DA) */
.studio-flow__tab-life{
  position:absolute;inset:-1px;pointer-events:none;overflow:visible;
  width:calc(100% + 2px);height:calc(100% + 2px);border-radius:inherit;
}
.studio-flow__tab-life rect{
  fill:none;
  stroke:var(--da-violet-pale);
  stroke-width:2;
  stroke-linecap:round;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--da-violet-pale) 75%,transparent));
}

/* Le grand écran studio posé dans la section creusée */
.studio-flow__screen{
  background:var(--da-bg);
  border:1px solid var(--da-rule);
  border-radius:16px;
  box-shadow:0 20px 48px -20px rgba(var(--da-shade-rgb),calc(.8*var(--da-shade-k))),
    inset 0 1px 0 rgba(var(--da-glint-rgb),calc(.06*var(--da-glint-k)));
  padding:clamp(16px,2.5vw,28px);
}

.studio-panel{
  display:none;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(20px,3vw,36px);align-items:center;
}
.studio-panel.is-active{
  display:grid;
  animation:studio-fade .3s var(--da-ease) forwards;
}
@keyframes studio-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Cadre cinématographique creusé (identique à .illu) */
.studio-frame{
  position:relative;aspect-ratio:16/9;width:100%;border-radius:14px;overflow:hidden;
  background:var(--da-slot);
  border:1px solid rgba(var(--da-shade-rgb),calc(.45*var(--da-shade-k)));
  box-shadow:inset 0 2px 6px rgba(var(--da-shade-rgb),calc(.7*var(--da-shade-k))),
             0 1px 0 rgba(var(--da-glint-rgb),calc(.04*var(--da-glint-k)));
  display:flex;align-items:center;justify-content:center;
}
.studio-frame--image{
  padding:clamp(8px,1.2vw,14px);
}
.studio-frame--image picture{
  display:block;width:100%;height:100%;border-radius:8px;overflow:hidden;
  box-shadow:0 8px 24px -10px rgba(var(--da-shade-rgb),calc(.8*var(--da-shade-k))),
             0 0 0 1px rgba(var(--da-edge-rgb),calc(.1*var(--da-edge-k)));
}
.studio-frame img{
  width:100%;height:100%;object-fit:cover;object-position:center top;display:block;
}

/* Étape 1 : Zone de dépôt vidéo & formats supportés (miroir de CreateProjectModal.vue) */
.studio-frame--drop{
  padding:clamp(10px,1.5vw,18px);
}
.drop-zone{
  width:100%;height:100%;max-width:440px;margin:0 auto;
  border:2px dashed rgba(var(--da-edge-rgb),calc(.18*var(--da-edge-k)));
  border-radius:10px;background:rgba(var(--da-card-rgb),.55);
  box-shadow:0 4px 14px -6px rgba(var(--da-shade-rgb),calc(.5*var(--da-shade-k))),
             0 0 0 1px rgba(var(--da-edge-rgb),calc(.06*var(--da-edge-k)));
  padding:clamp(12px,1.8vw,18px);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  text-align:center;gap:10px;
  transition:border-color .25s var(--da-ease),box-shadow .25s var(--da-ease);
}
.drop-zone:hover{
  border-color:rgba(132,85,246,.55);
  box-shadow:0 8px 20px -6px rgba(var(--da-shade-rgb),calc(.6*var(--da-shade-k))),
    0 0 0 1px rgba(132,85,246,.25);
}
.drop-zone__center{
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.drop-zone__icon{
  width:48px;height:48px;border-radius:14px;
  background:linear-gradient(135deg,rgba(56,189,248,.16),rgba(132,85,246,.22));
  border:1px solid rgba(132,85,246,.28);
  color:var(--da-violet-pale);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px -4px rgba(132,85,246,.3);
}
.drop-zone__icon svg{width:24px;height:24px}
.drop-zone__title{
  font-size:.92rem;font-weight:650;color:var(--da-ink-strong);margin:0;line-height:1.3;
}
.drop-zone__sub{
  font-size:.76rem;color:var(--da-ink-muted);margin:0;
}
.drop-zone__formats{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;width:100%;
}
.drop-badge{
  font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.04em;
  padding:4px 9px;border-radius:6px;
  background:var(--da-card);border:1px solid rgba(var(--da-edge-rgb),calc(.1*var(--da-edge-k)));
  color:var(--da-ink);box-shadow:0 2px 4px rgba(var(--da-shade-rgb),calc(.3*var(--da-shade-k)));
  display:inline-flex;align-items:center;gap:4px;
}
.drop-badge--primary{
  color:var(--da-violet-pale);border-color:rgba(132,85,246,.35);
  background:rgba(var(--da-violet-pale-rgb),.09);
}
.drop-zone__meta{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;
  padding-top:10px;border-top:1px solid rgba(var(--da-edge-rgb),calc(.08*var(--da-edge-k)));
  width:100%;font-family:var(--mono);font-size:.68rem;color:var(--da-ink-muted);
}
.drop-zone__meta-item{
  display:inline-flex;align-items:center;gap:5px;
}
.drop-zone__meta-item i{
  width:5px;height:5px;border-radius:50%;background:var(--v-teal-ink);
}

/* Étape 2 : Visuel de l'éditeur rythmo */
.studio-editor{display:flex;flex-direction:column;height:100%}
.studio-editor__band{
  background:var(--band-bg);border-top:1px solid var(--da-rule);
  padding:8px 10px;display:grid;gap:5px;position:relative;
}
.studio-editor__head{
  position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--band-cursor-a);
  box-shadow:var(--band-cursor-shadow);z-index:4;
}
.studio-editor__line{
  position:relative;height:24px;background:rgba(0,0,0,.25);border-radius:3px;overflow:hidden;
}
.studio-editor__line .mini__blk{top:2px;bottom:2px}
.studio-editor__active-blk{
  position:absolute;top:2px;bottom:2px;border-radius:2px;background:#7c3aed;
  outline:2px solid #fff;outline-offset:1px;
}
.studio-editor__active-blk::before{
  content:"";position:absolute;right:-4px;top:-3px;bottom:-3px;width:6px;border-radius:2px;
  background:#fff;box-shadow:var(--band-handle-glow);
}
.studio-editor__active-blk::after{
  content:"ANNA — Tu as encore oublié tes clés ?";
  position:absolute;left:8px;top:50%;transform:translateY(-50%);
  font-family:'Lexend',var(--sans);font-size:10.5px;color:#fff;white-space:nowrap;
}
.studio-editor__tip{
  position:absolute;top:100%;left:50%;transform:translate(-50%,4px);
  padding:2px 6px;border-radius:4px;background:#fff;color:#0a0d15;
  font-family:var(--mono);font-size:9.5px;font-weight:700;z-index:5;white-space:nowrap;
  box-shadow:0 4px 10px rgba(0,0,0,.5);
}
.studio-editor__split-blk{
  position:absolute;top:2px;bottom:2px;border-radius:2px;background:#0e7490;
  display:flex;align-items:center;padding-left:8px;
}
.studio-editor__split-blk::after{
  content:"LOUIS — Je les avais dans ma poche.";
  font-family:'Lexend',var(--sans);font-size:10.5px;color:#fff;white-space:nowrap;
}
.studio-editor__split-bar{
  position:absolute;top:0;bottom:0;left:54%;width:2px;background:#fff;box-shadow:0 0 4px rgba(255,255,255,.8);
}

/* Étape 3 : Menu d'export fidèle à l'application (ExportDropdown.vue) */
.studio-frame--menu{
  padding:clamp(10px,1.5vw,18px);
}
.studio-frame--menu .export-demo{
  max-width:390px;width:100%;margin:0 auto;
}

/* Volet éditorial textuel (droite) */
.studio-info{display:grid;gap:16px}
.studio-info__title{
  font-family:var(--display);font-size:clamp(1.2rem,2vw,1.55rem);font-weight:600;
  line-height:1.2;color:var(--da-ink-strong);margin:0;letter-spacing:-.02em;
}
.studio-info__lead{
  color:var(--da-ink-muted);font-size:.94rem;line-height:1.6;margin:0;
}
.studio-list{
  list-style:none;padding:0;margin:4px 0 0;display:grid;gap:12px;
}
.studio-item{
  padding-top:12px;border-top:1px solid var(--da-rule);
  display:grid;gap:3px;
}
.studio-item:first-child{border-top:0;padding-top:0}
.studio-item__head{
  display:flex;align-items:center;gap:10px;
}
.studio-item__title{
  font-size:.94rem;font-weight:600;color:var(--da-ink-strong);margin:0;
}
.studio-item__tag{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--da-violet-pale);margin-left:auto;
}
.studio-item__ext{
  font-family:var(--mono);font-size:.72rem;font-weight:700;
  color:var(--da-violet-pale);background:rgba(var(--da-violet-pale-rgb),.12);
  border:1px solid rgba(var(--da-violet-pale-rgb),.25);
  padding:2px 7px;border-radius:4px;line-height:1;
}
.studio-item__desc{
  font-size:.85rem;color:var(--da-ink-muted);line-height:1.55;margin:0;
}

/* Raccourcis clavier épurés */
.studio-keys{
  display:flex;flex-wrap:wrap;gap:10px 14px;padding-top:6px;
}
.studio-key{
  display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--da-ink);
}

@media (max-width:960px){
  .studio-panel{grid-template-columns:1fr;gap:24px}
  .studio-flow__tab{padding:7px 12px;font-size:.78rem}
}

/* ── Export : lecteur, et le sélecteur de placement ──────
   Les cartes et les mini-schémas sont ceux de ProjectSettingsModal.vue
   (.pos-card / .dg), aux mêmes valeurs. */
.player{display:grid;gap:10px}
.player__frame{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;
  background:
    radial-gradient(60% 80% at 30% 60%,rgba(14,116,144,.4),transparent 70%),
    radial-gradient(50% 70% at 75% 40%,rgba(124,58,237,.3),transparent 70%),
    #10151f;box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.player__frame .mini{position:absolute;left:0;right:0;bottom:0;border-radius:0;background:rgba(0,0,0,.5);border:0;
  box-shadow:none;padding:5px 8px}
.player__bar{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;color:var(--da-ink-muted)}
.player__bar i{flex:1;height:4px;border-radius:99px;background:var(--da-tray);position:relative;
  box-shadow:inset 0 1px 2px rgba(var(--da-shade-rgb),calc(.55*var(--da-shade-k)))}
.player__bar i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:38%;background:var(--da-ardoise);border-radius:99px}

.posgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.posgrid > :nth-child(5){grid-column:1/-1}
.pos-card{display:flex;gap:11px;align-items:center;text-align:left;padding:10px;border-radius:.7rem;
  background:var(--da-slot);border:1px solid var(--da-rule);box-shadow:inset 0 1px 2px rgba(var(--da-shade-rgb),calc(.4*var(--da-shade-k)))}
.pos-card.on{background:var(--da-card);border-color:rgba(132,85,246,.5);
  box-shadow:0 12px 26px -16px rgba(var(--da-shade-rgb),calc(.8*var(--da-shade-k))),0 0 0 1px rgba(132,85,246,.22)}
.pos-card .txt{display:flex;flex-direction:column;min-width:0}
.pos-card .txt .h{font-size:.8rem;font-weight:650;color:var(--da-ink)}
.pos-card.on .txt .h{color:var(--da-ink-strong)}
.pos-card .txt .d{font-size:.66rem;color:var(--da-ink-faint);line-height:1.3;margin-top:1px}
.dg{width:52px;height:38px;border-radius:.35rem;background:#000;flex-shrink:0;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);overflow:hidden}
.dg .vid{width:100%;flex:1;border-radius:2px;background:linear-gradient(135deg,#243049,var(--da-tray));min-height:0}
.dg .band{width:100%;height:8px;border-radius:2px;background:#b9a7f5;margin-top:2px}
.dg.full .vid{width:68%}
.dg.over{padding:0}
.dg.over .vid{width:100%;height:100%;border-radius:.35rem}
.dg.over .band{position:absolute;left:0;right:0;bottom:0;width:100%;height:9px;margin:0;border-radius:0;opacity:.92}
.dg.vidw{padding:5px}
.dg.vidw .vid,.dg.vidw .band{width:78%}
.dg.contained{padding:6px;background:#05070c}
.dg.contained .inner{width:100%;height:100%;border-radius:2px;background:#000;display:flex;flex-direction:column;
  padding:2px;gap:1px}
.dg.contained .vid{flex:1}
.dg.contained .band{height:6px;margin-top:0}
.dg.audio{padding:0}
.dg.audio .vid{display:none}
.dg.audio .band{height:100%;margin:0;border-radius:.35rem;display:flex;align-items:center;justify-content:center;gap:2px}
.dg.audio .band i{width:2px;background:rgba(15,19,30,.55);border-radius:2px}
.dl{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;
  border-top:1px solid rgba(var(--da-shade-rgb),calc(.6*var(--da-shade-k)));box-shadow:inset 0 1px 0 rgba(var(--da-glint-rgb),calc(.07*var(--da-glint-k)))}
.file{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;
  background:var(--da-slot);border:1px solid rgba(var(--da-shade-rgb),calc(.45*var(--da-shade-k)));
  box-shadow:inset 0 1px 3px rgba(var(--da-shade-rgb),calc(.55*var(--da-shade-k))),0 1px 0 rgba(var(--da-glint-rgb),calc(.03*var(--da-glint-k)));
  font-family:var(--mono);font-size:11px;color:var(--da-ink)}
.file::before{content:"";width:9px;height:12px;border-radius:2px;background:var(--da-violet-pale)}
.dl__btn{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-size:11px;font-weight:600;
  color:var(--da-ink);background:rgba(101,115,144,.2);border:1px solid rgba(101,115,144,.35)}
.dl__btn::after{content:"↓";margin-left:6px;color:var(--da-violet-pale)}

/* ── Aucun service tiers : deux logements côte à côte ───── */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:clamp(32px,4vw,56px) 0 0;padding:0;list-style:none}
.facts li{position:relative;display:grid;gap:10px;padding:clamp(24px,3vw,34px);border-radius:1.15rem;overflow:hidden;
  background:var(--da-slot);border:0;
  /* Tout en inset : une ombre externe serait peinte hors du clip et barrerait
     le glyphe d'un liseré clair au ras du bord bas. */
  box-shadow:inset 0 0 0 1px rgba(var(--da-shade-rgb),calc(.45*var(--da-shade-k))),inset 0 2px 6px rgba(var(--da-shade-rgb),calc(.6*var(--da-shade-k))),
             0 1px 0 rgba(var(--da-glint-rgb),calc(.04*var(--da-glint-k)))}

.facts b{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.03em;
  color:var(--da-ink-strong);line-height:1.05}
.facts span{font-size:.95rem;color:var(--da-ink-muted);line-height:1.6;max-width:34ch}
/* Le glyphe n'est pas creusé : c'est de la matière restée à la hauteur de la
   page, un îlot au milieu de la cavité. D'où sa couleur, celle du fond de page,
   son liseré clair sur le dessus et l'ombre qu'il porte au fond du logement.
   Le bord du bloc le rogne : dehors, il rejoint la page, de même couleur. */
.facts .engr{right:-26px;top:50%;bottom:auto;left:auto;transform:translateY(-50%);
  width:152px;height:152px;z-index:1;clip-path:inset(0 26px 0 0);
  /* Pas de gravure ici : le glyphe fait partie du fond du logement, une simple
     nuance plus claire, sans liseré ni ombre. */
  stroke:var(--da-bg);stroke-width:2.4;
  /* Creusé sur tout son contour : une ombre serrée tout autour du trait, plus
     un liseré clair en dessous. L'entaille continue hors du bloc, sur la page. */
  filter:drop-shadow(0 -1px 0 rgba(var(--da-glint-rgb),calc(.07*var(--da-glint-k)))) drop-shadow(0 3px 6px rgba(var(--da-shade-rgb),calc(.65*var(--da-shade-k))))}
/* Le bouclier est plus étroit que le serveur : il sort un peu plus. */
.facts li:nth-child(2) .engr{right:-34px;clip-path:inset(0 34px 0 0)}

/* ── Le prix : une carte unique, posée en relief ────────── */
#prix{scroll-margin-top:70px}
.price{display:grid;grid-template-columns:minmax(230px,.55fr) 1fr;gap:clamp(28px,5vw,64px);align-items:start;
  padding:clamp(28px,4vw,48px);border-radius:1.4rem;
  /* Un panneau posé dans un creux : plus clair que la section qui le porte,
     liseré en haut, ombre portée dessous. */
  background:var(--da-panel);border:1px solid rgba(var(--da-edge-rgb),calc(.09*var(--da-edge-k)));
  box-shadow:inset 0 1px 0 rgba(var(--da-glint-rgb),calc(.06*var(--da-glint-k))),0 34px 64px -34px rgba(var(--da-shade-rgb),calc(.9*var(--da-shade-k)));max-width:940px}
.price__zero{display:grid;gap:4px;grid-column:1;grid-row:1}
.price__inc{grid-column:2;grid-row:1/3}
.price__zero b{font-family:var(--display);font-weight:600;font-size:clamp(3.6rem,9vw,6rem);line-height:.85;
  letter-spacing:-.05em;color:var(--da-ink-strong)}
.price__zero span{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--da-ink-faint);line-height:1.7}
.price__list{margin:0;padding:0;list-style:none;display:grid;gap:0}
.price__list li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;padding:11px 0;
  font-size:.98rem;color:var(--da-ink);border-top:1px solid rgba(var(--da-shade-rgb),calc(.35*var(--da-shade-k)));box-shadow:inset 0 1px 0 rgba(var(--da-glint-rgb),calc(.07*var(--da-glint-k)))}
.price__list li:first-child{border-top:0;box-shadow:none;padding-top:0}
.price__list li::before{content:"";width:18px;height:18px;border-radius:999px;align-self:center;
  background:var(--da-slot);box-shadow:inset 0 1px 2px rgba(var(--da-shade-rgb),calc(.7*var(--da-shade-k)));
  background-image:var(--v-price-check);
  background-size:10px 10px;background-position:center;background-repeat:no-repeat}
.price__later{margin-top:18px;font-size:.86rem;color:var(--da-ink-faint);line-height:1.6;max-width:46ch}
/* Le soutien est creusé dans la carte du prix, comme un logement de l'app (.da-hollow). */
.price__don{margin-top:24px;padding:18px 20px;display:grid;gap:14px;justify-items:start;
  background:var(--da-slot-veil);border:1px solid rgba(var(--da-shade-rgb),calc(.4*var(--da-shade-k)));border-radius:14px;box-shadow:var(--da-hollow)}
.price__don p{margin:0;font-size:.9rem;color:var(--da-ink-muted);line-height:1.6;max-width:46ch}
.price__cta{grid-column:1;grid-row:2;display:grid;gap:14px;align-content:end;
  margin-top:clamp(24px,3vw,34px);padding-top:clamp(24px,3vw,34px);
  border-top:1px solid rgba(var(--da-shade-rgb),calc(.35*var(--da-shade-k)));box-shadow:inset 0 1px 0 rgba(var(--da-glint-rgb),calc(.07*var(--da-glint-k)))}
.price__cta p{font-size:.92rem;color:var(--da-ink-muted);line-height:1.65}
.price__cta .actions{margin-top:4px;gap:10px}
.price__note{font-size:.82rem !important;color:var(--da-ink-faint) !important;line-height:1.5 !important;margin:2px 0 0 !important}

/* ── Icônes gravées dans le fond ─────────────────────────
   Le glyphe est creusé dans la page : trait à peine plus sombre que le fond,
   liseré clair en dessous. Grand, discret, derrière le texte. */
.engr{position:absolute;z-index:0;pointer-events:none;
  width:150px;height:150px;fill:none;stroke:var(--v-engrave);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 0 rgba(var(--da-glint-rgb),calc(.055*var(--da-glint-k)))) drop-shadow(0 -1px 0 rgba(var(--da-shade-rgb),calc(.55*var(--da-shade-k))))}
.words li,.access__gains li,.facts li{position:relative;isolation:isolate}
.words li > *:not(.engr),.access__gains li > *:not(.engr){position:relative;z-index:1}
.facts li > *:not(.engr){position:relative;z-index:3}
.words li{padding-bottom:150px}
.words li .engr{left:50%;transform:translateX(-50%);bottom:-10px;top:auto;width:150px;height:150px}
/* Page accès : l'icône mord sur le début du texte, dans la marge que lui laisse
   la ligne (padding-left de .access__gains li). */
.access__gains li .engr{left:-22px;right:auto;top:50%;transform:translateY(-50%);width:108px;height:108px}
.ico{width:16px;height:16px;fill:none;stroke:var(--da-violet-pale);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:980px){
  .hero__visual{padding:10px 0 22px clamp(20px, 5vw, 36px);max-width:560px;margin:28px 0 0 clamp(10px, 3vw, 20px)}
  .hero__visual::before{inset:-12% 0 0 0}
  .hero__visual .dev--phone{left:clamp(4px, 1.5vw, 10px)}
  .words li{padding-bottom:110px}
  .words li .engr{width:110px;height:110px}
  .posgrid{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .price{grid-template-columns:1fr;gap:24px}
  .price__zero,.price__inc,.price__cta{grid-column:1;grid-row:auto}
}

/* ── Synchro labiale : barre interne entre deux segments ──
   Le | dans le texte crée cette barre coulissante.
   Elle est distincte du mini__cut (changement de plan) :
   elle est blanche, plus courte, et ne sort pas du bloc. */
.lipsync{display:grid;gap:14px}
.lipsync__line{height:26px}
.mini__split{position:absolute;top:0;bottom:0;width:3px;background:rgba(255,255,255,.9);
  border-radius:1px;z-index:4;box-shadow:0 0 5px rgba(255,255,255,.35)}

/* ── Palette d'annotations ──────────────────────────────── */
.anns{display:grid;gap:12px}
.anns__grid{display:flex;flex-wrap:wrap;gap:7px}
.anns__label{font-size:11px;color:var(--da-ink-faint)}
.ann-chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:3px;
  font-size:11px;font-family:var(--sans);color:rgba(255,255,255,.9);white-space:nowrap;
  position:relative}
/* Même ligne blanche que les mini__blk : cohérence visuelle avec la bande. */
.ann-chip::after{content:"";position:absolute;left:12%;right:12%;top:50%;height:2px;margin-top:-1px;
  background:rgba(255,255,255,.38);border-radius:2px}

/* ── Vitesse suggérée ────────────────────────────────────── */
.vspeed{display:grid;gap:12px;font-size:12px;color:var(--da-ink)}
.vspeed__head{display:flex;justify-content:space-between;align-items:center}
.vspeed__head b{color:var(--da-ink-strong);font-weight:600}
.vspeed__val{font-family:var(--mono);font-size:11px;color:var(--da-ink-muted)}
.vspeed__row{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;
  color:var(--da-ink-faint)}
.vspeed__track{position:relative;flex:1;height:8px;border-radius:999px;background:var(--da-tray);
  box-shadow:inset 0 1px 3px rgba(var(--da-shade-rgb),calc(.55*var(--da-shade-k))),
    0 1px 0 rgba(var(--da-glint-rgb),calc(.04*var(--da-glint-k)))}
/* La partie parcourue : position actuelle à 32 % (≈ 1,2×). */
.vspeed__fill{position:absolute;left:0;top:0;bottom:0;width:32%;background:var(--da-ardoise);
  border-radius:999px}
/* Le pouce à la position actuelle. */
.vspeed__thumb{position:absolute;top:50%;left:32%;transform:translate(-50%,-50%);
  width:14px;height:14px;border-radius:99px;background:var(--da-card);
  border:2px solid rgba(201,182,255,.55);
  box-shadow:0 2px 6px rgba(var(--da-shade-rgb),calc(.6*var(--da-shade-k)))}
/* Le point de suggestion (≈ 1,4×, à 52 %). */
.vspeed__suggest{position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  width:9px;height:9px;border-radius:99px;background:var(--da-violet);
  box-shadow:0 0 0 3px rgba(132,85,246,.2),0 0 0 6px rgba(132,85,246,.08)}
.vspeed__suggest::after{content:"1,4× suggéré";position:absolute;bottom:calc(100% + 8px);
  left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9px;font-family:var(--sans);
  color:var(--da-violet-pale);padding:3px 8px;background:var(--da-card);
  border:1px solid rgba(132,85,246,.28);border-radius:5px;
  box-shadow:0 4px 10px rgba(var(--da-shade-rgb),calc(.5*var(--da-shade-k)))}
/* Note texte sous le curseur : chiffre clé de la suggestion. */
.vspeed__note{font-size:11px;color:var(--da-ink-faint);padding:9px 11px;border-radius:8px;
  background:var(--da-slot);line-height:1.55;
  border:1px solid rgba(var(--da-shade-rgb),calc(.35*var(--da-shade-k)));
  box-shadow:inset 0 1px 2px rgba(var(--da-shade-rgb),calc(.4*var(--da-shade-k)))}
.vspeed__note b{color:var(--da-ink);font-weight:600}

/* ── Médias réels autonomes (captures d'écran & vidéo démo sans conteneur) ── */
.media-shot{display:block;width:100%;border-radius:12px;overflow:hidden;
  border:1px solid rgba(var(--da-edge-rgb),calc(.09*var(--da-edge-k)));
  box-shadow:0 18px 48px -14px rgba(var(--da-shade-rgb),calc(.85*var(--da-shade-k))),
    0 1px 0 rgba(var(--da-glint-rgb),calc(.06*var(--da-glint-k)))}
.media-shot img,
.media-shot video{display:block;width:100%;height:auto}

@media (max-width:600px){
  .srv-preview{padding:14px}
  .srv-preview .hdr-num .big{font-size:28px}
  .srv-preview .rp-legend span{font-size:9.5px}
}

/* ── Menu d'export fidèle à ExportDropdown / DropdownMenu ── */
.export-demo{display:grid;gap:8px;width:100%;max-width:370px;margin:0 auto}

.export-demo__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 12px;background:var(--da-slot);border:1px solid rgba(var(--da-edge-rgb),.07);
  border-radius:9px;font-size:11px}
.export-demo__proj{font-weight:600;color:var(--da-ink-muted);font-family:var(--mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.export-demo__btn{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;
  background:rgba(var(--da-edge-rgb),.09);border:1px solid rgba(var(--da-edge-rgb),.14);
  border-radius:6px;color:var(--da-ink-strong);font-weight:600;font-size:11px}
.export-demo__btn svg{width:13px;height:13px}

.export-menu{width:100%;padding:4px;background:rgba(var(--da-card-rgb),.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(var(--da-edge-rgb),.09);border-radius:12px;
  box-shadow:0 16px 40px -16px rgba(var(--da-shade-rgb),calc(.8*var(--da-shade-k))),
    inset 0 1px 0 rgba(var(--da-glint-rgb),calc(.06*var(--da-glint-k)));display:grid;gap:2px}

.export-menu .dml{padding:4px 8px 1px;font-size:9px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--da-ink-faint)}

.export-menu .dmi{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:8px;
  background:transparent;border:1px solid transparent;color:inherit;text-align:left;
  transition:background .12s}
.export-menu .dmi:hover{background:rgba(var(--da-edge-rgb),.06)}

.export-menu .dmi-emphasis{background:rgba(56,189,248,.12);border-color:rgba(56,189,248,.25)}
.export-menu .dmi-emphasis:hover{background:rgba(56,189,248,.18)}

.export-menu .dmi-icon{width:17px;height:17px;flex-shrink:0;color:var(--dmi-color,var(--da-violet-pale));
  display:flex;align-items:center;justify-content:center}
.export-menu .dmi-icon svg{width:100%;height:100%}

.export-menu .dmi-body{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.export-menu .dmi-label{font-size:11.5px;font-weight:600;color:var(--da-ink-strong)}
.export-menu .dmi-desc{font-size:9.5px;color:var(--da-ink-muted);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.export-menu .dmi-tag{font-family:var(--mono);font-size:8.5px;font-weight:700;
  padding:2px 5px;border-radius:4px;background:rgba(var(--da-shade-rgb),calc(.35*var(--da-shade-k)));
  color:var(--dmi-color,var(--da-ink-muted));border:1px solid rgba(var(--da-edge-rgb),.08);flex-shrink:0}