/* ==============================================================================================
   video-studio.css — design de "Naomi Video Studio" (28/08/2026, Phase C).

   Les tokens de couleur (:root) et le bloc "menu Espace abonné" (.nav-*, .hero-feature, etc.)
   sont repris À L'IDENTIQUE de video-editor.css / creer-video.html pour rester visuellement
   cohérents avec le reste du site — aucun fichier existant n'est modifié. Tout ce qui suit le
   repère "NAOMI VIDEO STUDIO — STYLES PROPRES" est nouveau et spécifique à ce module.
   ============================================================================================== */

:root {
  --bg:#000000; --panel:#12161f; --panel-2:#171c27; --border:#232a38; --ink:#e8e6df; --muted:#8b93a3;
  --gold:#e8a33d; --gold-2:#f4c368; --rose:#ff7a7a; --gold-soft: rgba(232,163,61,.10); --gold-glow: rgba(232,163,61,.35);
  --nav-bg-1: #070a13; --nav-bg-2: #0c1120; --nav-line: #1c2436; --nav-muted: #7c8aa8;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: 'Inter', sans-serif; min-height: 100vh; color: var(--ink);
  background: radial-gradient(ellipse 900px 500px at 50% 0%, rgba(232,163,61,0.10), transparent 60%), var(--bg);
}
.back-link { display: inline-block; color: var(--muted); text-decoration: none; font-size: 13px; margin-bottom: 18px; }
.back-link:hover { color: var(--gold); }

/* ------------------------------------------------------------------------------------------
   Menu "Espace abonné" (.nav-toggle / .nav-overlay / .nav-panel / .hero-feature / etc.) —
   copié tel quel depuis creer-video.html, voir ce fichier pour l'historique complet.
   ------------------------------------------------------------------------------------------ */
.top-fade-bar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; height: 20px;
  background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 55%, transparent 100%);
  z-index: 140; pointer-events: none;
}
.nav-toggle {
  position: fixed; top: 22px; left: 18px; z-index: 150; width: 42px; height: 42px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--ink); font-size: 19px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.15s ease;
}
.nav-toggle:hover { border-color: var(--gold); }
.nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 140; }
.nav-overlay.show { display: block; }
.nav-panel {
  position: fixed; top: 0; left: 0; height: 100vh; width: 292px; background: #000000;
  border-right: 1px solid #241f14; box-shadow: 10px 0 35px rgba(0,0,0,.32); z-index: 145;
  transform: translateX(-100%); transition: transform 0.2s ease; display: flex; flex-direction: column;
  padding: 20px 0 18px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #4a4030 transparent;
}
.nav-panel::-webkit-scrollbar { width: 4px; }
.nav-panel::-webkit-scrollbar-thumb { background: #4a4030; border-radius: 4px; }
.nav-panel::-webkit-scrollbar-track { background: transparent; }
.nav-panel.show { transform: translateX(0); }
.nav-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 20px; border-bottom: 1px solid #2a2419; margin-bottom: 16px; }
.nav-panel-header-inner { display: flex; align-items: center; gap: 12px; }
.nav-brand-mark {
  position: relative; width: 55px; height: 55px; flex-shrink: 0; border: 1px solid var(--gold); border-radius: 14px;
  background: rgba(232,163,61,.04); display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 28px;
  background-image: linear-gradient(135deg, #a9781f 0%, #f4c368 35%, #fff6d5 55%, #e8a33d 80%, #a9781f 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #f4c368;
}
.nav-panel-title { display: flex; align-items: baseline; gap: 6px; font-family: 'Fraunces', serif; font-weight: 600; font-size: 25px; letter-spacing: .3px; text-transform: uppercase; color: var(--ink); }
.nav-panel-title-accent { color: var(--gold); }
.nav-panel-sub { display: block; margin-top: 4px; font-size: 9.5px; letter-spacing: .5px; white-space: nowrap; text-transform: uppercase; color: #968c78; }
.nav-close { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid #2a2419; border-radius: 9px; color: var(--muted); cursor: pointer; transition: .2s; }
.nav-close:hover { color: var(--gold); border-color: rgba(232,163,61,.45); }
.nav-chevron { width: 15px; height: 15px; flex-shrink: 0; }
.nav-subscribe-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 50px; box-sizing: border-box;
  background: radial-gradient(ellipse at center, rgba(232,163,61,.22) 0%, rgba(232,163,61,.08) 50%, #050608 85%);
  color: #f4c368; text-decoration: none; text-align: center; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px;
  padding: 12px 14px; border-radius: 9px; border: 1px solid rgba(232,163,61,.55);
  box-shadow: 0 0 14px rgba(232,163,61,.16), inset 0 0 16px rgba(232,163,61,.15); cursor: pointer; transition: .2s;
}
.nav-subscribe-btn:hover {
  border-color: var(--gold); box-shadow: 0 0 20px rgba(232,163,61,.28), inset 0 0 20px rgba(232,163,61,.22);
  background: radial-gradient(ellipse at center, rgba(232,163,61,.3) 0%, rgba(232,163,61,.1) 50%, #050608 85%);
}
.nav-subscribe-icon-box { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 7px; background: #000000; border: 1px solid rgba(232,163,61,.35); }
.nav-subscribe-icon { width: 14px; height: 14px; flex-shrink: 0; color: #f4c368; }
.nav-panel-top { padding: 0 20px 18px; margin: 0 20px 16px; border-bottom: 1px solid #2a2419; display: flex; flex-direction: column; gap: 9px; }
.nav-panel-top-link { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 3px 0; background: none; color: #ffffff; text-align: center; font-family: 'Inter', sans-serif; font-size: 13.5px; border: none; cursor: pointer; }
.nav-panel-top-link:hover { color: var(--gold); }
.nav-panel-top-link-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px; background: #000000; border: 1px solid rgba(199,184,150,.2); color: #a39a8a; }
.nav-panel-top-link-icon svg { width: 12px; height: 12px; }
.nav-panel-top-link:hover .nav-panel-top-link-icon { border-color: rgba(232,163,61,.4); color: var(--gold); }
.nav-link {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 7px 5px; background: none;
  border: none; border-left: 2px solid transparent; border-radius: 8px; color: #ffffff; text-decoration: none;
  font-size: 13px; font-weight: 500; font-family: 'Inter', sans-serif; text-align: left; cursor: pointer;
  box-sizing: border-box; position: relative; transition: background .18s ease, border-color .18s ease;
}
.nav-link:hover, .nav-link:active { background: rgba(232,163,61,.06); border-left-color: transparent; color: var(--ink); }
.nav-lock-badge { margin-left: auto; opacity: 0.6; font-size: 12px; }
.icon {
  width: 28px; height: 28px; flex: 0 0 28px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #2a2419; border-radius: 8px; background: #000000; color: #968c78;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; transition: .18s;
}
.nav-link:hover .icon, .nav-link:active .icon { color: #f0b348; border-color: rgba(232,163,61,.75); box-shadow: 0 0 10px rgba(232,163,61,.12); }
.section-title { padding: 3px 6px 10px; font-family: 'Inter', sans-serif; font-size: 9px; color: #a89a7f; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.nav-menu-list { padding: 15px 8px 0; }
.nav-menu-card {
  border: 1.5px solid transparent; border-radius: 11px;
  background: linear-gradient(#16140F, #16140F) padding-box, linear-gradient(135deg, #fff6d5 0%, #f4c368 35%, #c98f2e 70%, #6b4a15 100%) border-box;
  padding: 0 10px 9px; overflow: hidden;
}
.nav-card-header {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 2px; margin-bottom: 5px;
  border-bottom: 1px solid rgba(232,163,61,.45); font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #e8a33d; transition: text-shadow .2s ease;
}
.nav-menu-card--gold-light .nav-card-header { border-bottom-color: rgba(244,195,104,.48); color: #f4c368; }
.nav-menu-card--gold-dark .nav-card-header { border-bottom-color: rgba(169,120,31,.45); color: #c99031; }
.nav-card-icon { font-size: 13px; flex-shrink: 0; }
.nav-card-icon svg { width: 13px; height: 13px; display: block; color: inherit; }
.nav-card-body { display: flex; flex-direction: column; gap: 2px; }
.nav-menu-card--gold-light .icon { border-color: rgba(244,195,104,.4); }
.nav-menu-card--gold-dark .icon { border-color: rgba(169,120,31,.4); }
.nav-menu-card--gold-light .nav-link:hover, .nav-menu-card--gold-light .nav-link:active { background: rgba(244,195,104,.10); border-left-color: transparent; }
.nav-menu-card--gold-light .nav-link:hover .icon, .nav-menu-card--gold-light .nav-link:active .icon { color: #f4c368; border-color: #f4c368; box-shadow: 0 0 10px rgba(244,195,104,.35); }
.nav-menu-card--gold-dark .nav-link:hover, .nav-menu-card--gold-dark .nav-link:active { background: rgba(169,120,31,.10); border-left-color: transparent; }
.nav-menu-card--gold-dark .nav-link:hover .icon, .nav-menu-card--gold-dark .nav-link:active .icon { color: #a9781f; border-color: #a9781f; box-shadow: 0 0 10px rgba(169,120,31,.35); }
.nav-account-stack { border: 1px solid #2a2419; border-radius: 14px; padding: 3px; max-height: 480px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #4a4030 transparent; }
.nav-account-stack::-webkit-scrollbar { width: 4px; }
.nav-account-stack::-webkit-scrollbar-thumb { background: #4a4030; border-radius: 4px; }
.nav-account-stack::-webkit-scrollbar-track { background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .nav-account-stack { display: flex; flex-direction: column; }
  .nav-account-stack .nav-menu-card { max-height: 56px; overflow: hidden; transition: max-height .45s cubic-bezier(.22,.8,.32,1), box-shadow .35s ease; }
  .nav-account-stack .nav-menu-card:not(:first-child) { border-top: 1px solid #2a2419; }
  .nav-account-stack .nav-menu-card:hover, .nav-account-stack .nav-menu-card:focus-within { max-height: 320px; overflow-y: auto; box-shadow: 0 10px 22px rgba(0,0,0,.35); }
}
@media (hover: none) {
  .nav-account-stack { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; max-height: none !important; overflow: visible !important; }
  .nav-account-stack .nav-menu-card { display: block !important; width: 100% !important; flex: 0 0 auto !important; }
  .nav-account-stack .nav-menu-card { max-height: 56px; overflow: hidden; transition: max-height .45s cubic-bezier(.22,.8,.32,1), box-shadow .35s ease; }
  .nav-account-stack .nav-menu-card:not(:first-child) { border-top: 1px solid #2a2419; }
  .nav-account-stack .nav-menu-card.is-open { max-height: 2000px !important; overflow-y: visible; box-shadow: 0 10px 22px rgba(0,0,0,.35); }
  .nav-account-stack .nav-menu-card--gold-light.is-open { box-shadow: 0 10px 22px rgba(0,0,0,.35), 0 0 14px rgba(244,195,104,.35); }
  .nav-account-stack .nav-menu-card--gold-dark.is-open { box-shadow: 0 10px 22px rgba(0,0,0,.35), 0 0 14px rgba(169,120,31,.35); }
}
.hero-feature { max-width: none; width: 100%; }
.hero-feature-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.hero-feature-icon { width: 38px; height: 38px; margin: 0; flex-shrink: 0; border-radius: 10px; background: #000000; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--gold); }
.hero-feature-icon svg { width: 18px; height: 18px; }
.hero-feature-icon-logo { font-family: 'Fraunces', serif; font-weight: 700; font-size: 15px; }
.hero-feature h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 14px; margin: 0; color: var(--ink); }
.hero-feature p { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 0; margin-left: 50px; }
a.hero-feature { text-decoration: none; color: inherit; }
.nav-feature-list { padding: 12px 8px 4px; display: flex; flex-direction: column; gap: 8px; }
.nav-feature-list .hero-feature {
  display: flex; flex-direction: column; align-items: flex-start; min-height: 50px; padding: 8px 10px; border: 1px solid transparent;
  border-radius: 11px; background: linear-gradient(#16140F, #16140F) padding-box, linear-gradient(135deg, #fff6d5 0%, #f4c368 35%, #c98f2e 70%, #6b4a15 100%) border-box;
  cursor: pointer; transition: border-color .2s ease, background .2s ease;
}
.nav-feature-list .hero-feature:hover, .nav-feature-list .hero-feature:focus-visible { border-color: rgba(232,163,61,.5); background: rgba(232,163,61,.045); }
.nav-feature-list .hero-feature-head { width: 100%; margin-bottom: 0; }
.nav-feature-list .hero-feature-icon { width: 32px; height: 32px; flex: 0 0 32px; border-color: rgba(232,163,61,.35); }
.nav-feature-list .hero-feature h3 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13.5px; color: #ffffff; }
.nav-feature-list .hero-feature p {
  display: block; max-height: 0; opacity: 0; overflow: hidden; margin: 0 0 0 46px; font-family: 'Inter', sans-serif;
  font-size: 12px; line-height: 1.45; color: var(--muted); transition: max-height .35s ease, opacity .3s ease .05s, margin-top .35s ease;
}
.nav-feature-list .hero-feature:hover p, .nav-feature-list .hero-feature:focus-visible p { max-height: 120px; opacity: 1; margin-top: 6px; }
.nav-divider { height: 1px; flex-shrink: 0; background: #2e2818; margin: 8px 12px 0; }
.nav-divider--gold { background: linear-gradient(90deg, transparent, rgba(232,163,61,.6), transparent); margin: 10px 12px; height: 1px; }
.nav-help-card { margin: 10px 8px 0; padding: 11px 10px 10px; border: 1.5px solid transparent; border-radius: 11px; background: linear-gradient(#16140F, #16140F) padding-box, linear-gradient(135deg, #fff6d5 0%, #f4c368 35%, #c98f2e 70%, #6b4a15 100%) border-box; }
.nav-help-title { display: flex; align-items: center; gap: 8px; color: #f0b348; font-size: 12px; font-weight: 700; }
.nav-help-icon { color: #f0b348; font-size: 12px; }
.nav-help-sub { margin: 3px 0 9px 0; color: #968c78; font-size: 11px; }
.nav-help-btn { min-height: 32px; padding: 6px 9px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(232,163,61,.45); border-radius: 8px; background: rgba(232,163,61,.045); color: #e8a33d; text-decoration: none; font-size: 11px; font-weight: 700; }
.nav-help-btn:hover { background: rgba(232,163,61,.10); border-color: #e8a33d; }
.nav-reopen-btn {
  display: none; position: fixed; top: 22px; left: 18px; z-index: 146; width: 42px; height: 42px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--gold); color: var(--gold); align-items: center; justify-content: center;
  cursor: pointer; transition: box-shadow 0.15s ease;
}
.nav-reopen-btn:hover { box-shadow: 0 0 0 3px rgba(232,163,61,.28); }
@media (min-width: 861px) {
  body { padding-left: 292px; transition: padding-left 0.2s ease; }
  .nav-toggle { display: none; }
  .nav-overlay { display: none !important; }
  .nav-panel { transform: translateX(0); box-shadow: none; }
  .nav-close { display: none; }
  body.nav-desktop-collapsed { padding-left: 0; }
  body.nav-desktop-collapsed .nav-panel { transform: translateX(-100%); }
  body.nav-desktop-collapsed .nav-reopen-btn { display: flex; }
  .nav-close { display: flex; }
}

/* ==============================================================================================
   NAOMI VIDEO STUDIO — STYLES PROPRES (tout ce qui suit est nouveau, spécifique à video-studio.html)
   ============================================================================================== */

.vs-wrap { max-width: 1400px; margin: 0 auto; padding: 70px 22px 90px; }

.vs-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.vs-header { max-width: 680px; margin: 0 0 30px; }
.vs-header-logo { width: 250px; height: auto; flex-shrink: 0; transform: translateY(-20.5%); }
.vs-eyebrow { color: var(--gold); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 10px; }
.vs-header h1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(26px, 3.6vw, 36px); margin: 0 0 10px; }
.vs-header p { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.6; }
.vs-header-note { color: var(--muted); font-size: 12px; margin: 10px 0 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); }

/* --- Fil conducteur (Phase F, bloc 5) : guide cliquable, pas un assistant bloquant. --- */
.vs-guide { margin: 0 0 22px; }
.vs-guide-list {
  list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 6px; overflow-x: auto;
  scrollbar-width: thin; scrollbar-color: #3a3324 transparent;
}
.vs-guide-step { flex: 0 0 auto; }
.vs-guide-step-btn {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px 7px 7px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--panel-2); color: var(--muted);
  font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.vs-guide-step-btn:hover { border-color: var(--gold); color: var(--ink); }
.vs-guide-step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border); font-size: 10px; font-weight: 700;
  flex-shrink: 0; color: inherit;
}
.vs-guide-step.done .vs-guide-step-btn { border-color: rgba(232,163,61,.35); }
.vs-guide-step.done .vs-guide-step-num { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-2); }
.vs-guide-step.current .vs-guide-step-btn { border-color: var(--gold); color: var(--gold-2); background: var(--gold-soft); }
.vs-guide-step.current .vs-guide-step-num { background: var(--gold); border-color: var(--gold); color: #1a1204; }
.vs-guide-step-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.vs-guide-flash { animation: vsGuideFlash 1.1s ease; }
@keyframes vsGuideFlash {
  0% { box-shadow: 0 0 0 3px var(--gold-glow); }
  100% { box-shadow: 0 0 0 0 rgba(232,163,61,0); }
}

.vs-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.vs-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vs-col-left, .vs-col-right { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3a3324 transparent; }
/* .vs-col-left uniquement (29/08/2026) : le 1er panneau ("Modèle" — catégories, style visuel, les
   50 cartes) devient l'unique zone qui défile, en absorbant tout l'espace disponible dans la
   colonne ; le 2e panneau ("Tes photos") garde sa taille naturelle et reste donc toujours
   entièrement visible juste en dessous, jamais poussé hors champ. min-height:0 est nécessaire ici
   : sans lui, un enfant flex ne peut jamais devenir plus petit que son contenu, et ne défilerait
   donc jamais réellement. N'affecte pas .vs-col-right (musique/voix/logo), qui garde son
   comportement de défilement d'ensemble actuel. */
.vs-col-left > .vs-panel:first-child { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3a3324 transparent; }
.vs-col-left > .vs-panel:last-child { flex: 0 0 auto; }

.vs-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px 16px; }
.vs-panel h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 15.5px; margin: 0 0 8px; display: flex; align-items: center; gap: 9px; }
.vs-panel-hint { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0 0 12px; }
.vs-step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold-soft); border: 1px solid var(--gold); color: var(--gold-2); font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.vs-mini-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 14px; margin: 0 0 8px; color: var(--muted); }
.vs-section-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 14px 0 6px; }
.vs-empty-hint { color: var(--muted); font-size: 12px; margin: 0; }

/* --- 1. Modèles (50 → 3 en Phase C), carte avec aperçu animé --- */
/* Correction de mise en page (29/08/2026, demande explicite de Laurence, 2e passe — remplace la
   1re tentative qui plafonnait uniquement .vs-template-grid) : la colonne de gauche (.vs-col-left)
   contient deux panneaux empilés — "1. Modèle" (catégories + style visuel + les 50 cartes) et
   "2. Tes photos". Laurence veut que SEUL le premier panneau défile ("les styles visuels"), et que
   "Tes photos" reste FIXE, toujours entièrement visible juste en dessous, sans jamais avoir besoin
   de défiler pour l'atteindre. On rend donc le panneau "1. Modèle" flexible (il absorbe tout
   l'espace restant dans .vs-col-left et défile en interne dès que son contenu dépasse), et le
   panneau "2. Tes photos" garde sa taille naturelle — voir la règle .vs-col-left > .vs-panel
   plus bas dans ce fichier. Pur CSS, aucune incidence sur video-studio.js ni sur le moteur. */
.vs-template-grid { display: flex; flex-direction: column; gap: 10px; }
.vs-template-card {
  position: relative; text-align: left; cursor: pointer; border-radius: 12px; border: 1.5px solid var(--border);
  background: var(--panel-2); padding: 10px; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease;
  font-family: 'Inter', sans-serif; color: inherit; display: flex; gap: 10px; align-items: stretch;
  flex-shrink: 0; /* .vs-template-grid a maintenant sa propre hauteur plafonnée (voir plus haut) :
                      sans ceci, flexbox écrase chaque carte pour la faire "tenir" au lieu de
                      simplement faire défiler la liste — la carte doit garder sa taille naturelle. */
}
.vs-template-card:hover { border-color: var(--gold); }
.vs-template-card.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 18px var(--gold-glow); }
.vs-template-preview { position: relative; width: 54px; aspect-ratio: 9/16; border-radius: 7px; overflow: hidden; flex-shrink: 0; background: #05070c; }
.vs-template-preview .vs-cue-text, .vs-template-preview .vs-cue-logo { display: none; } /* base : texte masqué par défaut (le logo l'est toujours, trop petit) — la règle .vs-preview-demo plus bas révèle le texte pour toutes les cartes (29/08/2026, elles reçoivent désormais toutes cette classe) ; ceci reste un filet de sécurité si une carte ne l'obtenait pas */
/* Emplacement photo vide, dans la miniature carte UNIQUEMENT : un bloc coloré abstrait (couleur du
   preset actuellement choisi + léger dégradé) à la place du texte "Choisis une photo" — trop petit
   et trop abstrait à l'échelle d'une carte. Le texte réel du placeholder (utilisé tel quel dans le
   grand aperçu de l'éditeur) n'est pas supprimé : il est seulement masqué ici. */
.vs-template-preview .vs-cue-media-placeholder {
  color: transparent;
  font-size: 0;
  padding: 0;
  background:
    linear-gradient(155deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.22) 100%),
    var(--preset-accent);
}
/* Aperçu carte UNIQUEMENT : la marge de -12% sur .vs-cue-media-inner (règle de base plus bas dans ce
   fichier) sert de zone tampon pour le pan/zoom "Ken Burns" (jusqu'à scale(1.12) / translate(2%),
   cf. CAMERA_MOVES dans vs-transitions.js) afin que l'animation ne révèle jamais de bord vide.
   Dans la toute petite vignette (54px de large), cette marge se traduit en zoom permanent excessif :
   même une cue en camera:'none' hérite de ce -12% et affiche une photo bien plus recadrée que
   nécessaire. On réduit la marge à -6% ici (assez pour rester sûr avec les mêmes amplitudes de
   caméra, vérifié) sans toucher au moteur, aux coordonnées frame.x/y/w/h ni au vrai éditeur. */
.vs-template-preview .vs-cue-media-inner { inset: -6%; }
/* Vignettes "faux visuels + texte" (vs-preview-demo) — d'abord E12 seul (prototype), puis
   généralisée par étapes, puis (29/08/2026, demande explicite de Laurence : "transformer les 50
   vignettes en véritables démonstrations visuelles") posée sur les 50 cartes sans exception
   (video-studio.js n'a plus de liste d'ids qui gate l'injection). Révèle le texte (masqué par la
   règle générale ci-dessus, conservée comme filet de sécurité si une carte ne reçoit
   exceptionnellement pas cette classe) et établit son propre contexte de container-query pour que
   la taille du texte (unités cqw, voir .vs-text-size-*) reste proportionnée à cette toute petite
   largeur — exactement comme dans le grand aperçu de l'éditeur (#vsStage) — plutôt que de se
   dimensionner par rapport à la fenêtre. */
.vs-preview-demo { container-type: inline-size; }
.vs-preview-demo .vs-cue-text { display: block; }
/* CORRECTION VISUELLE E12 (29/08/2026, demande explicite de Laurence) — UNIQUEMENT la vignette
   d'E12 (classe posée par video-studio.js seulement quand PORTRAIT_PROTOTYPE_IDS contient le
   template, aujourd'hui E12 seul). Constat : la zone d'E12 (50% de largeur) est bien plus étroite
   que le ratio natif des deux vraies photos (300×400) — `cover` doit donc rogner sur les CÔTÉS
   (jamais en haut/bas, la hauteur est déjà entièrement préservée par construction). Plutôt que de
   figer un recadrage statique, on fait légèrement PANORAMIQUER le point de vue horizontalement :
   la photo entre, glisse doucement pour révéler le visage, marque un temps d'arrêt dessus, puis
   amorce un léger retour — mouvement continu, doux, jamais un simple saut. `background-position`
   uniquement (jamais `transform`) : le panoramique de l'animation Ken Burns du moteur (sur
   `transform`, propriété différente, voir vs-transitions.js, non modifiée) continue de tourner
   sans aucune interférence. Un panoramique par `background-position` reste TOUJOURS à l'intérieur
   de l'image déjà dimensionnée par `cover` : aucun risque de bord vide, quelle que soit la valeur. */
@keyframes vsE12FacePan {
  0%   { background-position-x: 38%; }
  30%  { background-position-x: 50%; }
  70%  { background-position-x: 50%; }
  100% { background-position-x: 38%; }
}
.vs-preview-e12-facepan .vs-cue-media-inner { animation: vsE12FacePan 9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .vs-preview-e12-facepan .vs-cue-media-inner { animation: none; background-position-x: 50%; }
}
.vs-template-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.vs-template-code { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--gold-2); letter-spacing: .06em; }
.vs-template-name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.vs-template-desc { font-size: 11px; color: var(--muted); line-height: 1.4; }
.vs-template-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.vs-template-badge { font-size: 9.5px; padding: 2px 6px; border-radius: 5px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--muted); }

/* --- 2. Photos --- */
.vs-photo-import {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px; margin-bottom: 12px;
  border: 1.5px dashed var(--border); border-radius: 10px; color: var(--muted); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.vs-photo-import:hover { border-color: var(--gold); color: var(--gold-2); }
.vs-photo-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.vs-photo-thumb { position: relative; width: 58px; height: 58px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--panel-2); flex-shrink: 0; cursor: pointer; }
.vs-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-photo-thumb.in-use { border-color: var(--gold); }
.vs-photo-thumb-remove { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; border: none; background: rgba(0,0,0,0.65); color: #fff; font-size: 9px; line-height: 16px; padding: 0; cursor: pointer; }

/* --- Emplacements photo / rôles texte d'une scène (sélecteur au sein d'un onglet) --- */
.vs-slot-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.vs-slot-chip {
  padding: 6px 10px; border-radius: 7px; border: 1.5px solid var(--border); background: var(--panel-2);
  color: var(--muted); font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.vs-slot-chip.active { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-2); }
.vs-scene-photo-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.vs-scene-photo-opt { width: 42px; height: 42px; border-radius: 7px; overflow: hidden; border: 1.5px solid var(--border); cursor: pointer; background: var(--panel-2); flex-shrink: 0; padding: 0; }
.vs-scene-photo-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-scene-photo-opt.selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }

.vs-mini-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin: 12px 0 5px; font-weight: 700; }
.vs-mini-label:first-of-type { margin-top: 0; }
.vs-category-filter, .vs-preset-picker { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }

/* --- Réglage avec boutons +/- à côté du curseur (photo : position/zoom/rotation) --- */
.vs-field-with-steppers { display: flex; align-items: center; gap: 6px; }
.vs-field-with-steppers input[type="range"] { flex: 1; }
.vs-stepper-btn {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 6px; border: 1px solid var(--border); background: var(--panel-2);
  color: var(--ink); font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.vs-stepper-btn:hover { border-color: var(--gold); color: var(--gold-2); }
.vs-char-counter { font-size: 10px; color: var(--muted); text-align: right; margin-top: 3px; }
.vs-char-counter.is-warning { color: var(--gold-2); }

/* --- Colonne centre : scène (stage) --- */
.vs-stage-shell { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vs-stage {
  position: relative; width: 100%; max-width: 300px; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden;
  background: #05070c; border: 1px solid var(--border); box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  container-type: inline-size;
}
.vs-cue { position: absolute; }
.vs-cue.vs-cue-hidden { display: none; }
.vs-cue-media { overflow: hidden; }
.vs-cue-media-inner { position: absolute; inset: -12%; background-size: cover; background-position: center; will-change: transform; }
.vs-cue-media-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; text-align: center; padding: 14px; background: #0d1119; }
.vs-cue-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: var(--preset-vignette, none); }
.vs-decor-divider { position: absolute; z-index: 3; }
.vs-decor-vertical { top: 0; bottom: 0; }
.vs-decor-horizontal { left: 0; right: 0; }

.vs-cue-text {
  z-index: 4; max-width: 92%; max-height: 72%; white-space: pre-wrap; overflow-wrap: break-word;
  font-weight: 600; line-height: 1.18; text-wrap: balance; overflow: hidden;
}
.vs-text-size-s { font-size: 4.2cqw; }
.vs-text-size-m { font-size: 5.6cqw; }
.vs-text-size-l { font-size: 7.4cqw; }
.vs-text-size-xl { font-size: 9.4cqw; }
.vs-text-shadow { text-shadow: 0 2px 10px rgba(0,0,0,0.55); }
.vs-text-outline { -webkit-text-stroke: 0.6px rgba(0,0,0,0.55); }

.vs-cue-logo { z-index: 5; display: flex; align-items: center; justify-content: center; }
.vs-cue-logo img { width: 100%; height: auto; display: block; }
.vs-cue-logo-placeholder {
  width: 100%; aspect-ratio: 1; border-radius: 6px; border: 1.5px dashed rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center; font-size: 3.2cqw; color: var(--muted);
  background: rgba(255,255,255,0.04);
}

.vs-stage-controls { display: flex; align-items: center; gap: 9px; width: 100%; max-width: 300px; }
.vs-icon-btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2);
  color: var(--ink); font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  flex-shrink: 0; transition: border-color .15s ease;
}
.vs-icon-btn:hover { border-color: var(--gold); color: var(--gold-2); }
.vs-progress-track { flex: 1; height: 5px; border-radius: 3px; background: var(--panel-2); border: 1px solid var(--border); overflow: hidden; }
.vs-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); }
.vs-time-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }

/* --- Timeline en bas : scènes dérivées, sélectionnables --- */
.vs-timeline-block { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.vs-timeline { display: flex; gap: 6px; }
.vs-timeline-scene {
  flex: 1; min-width: 0; background: var(--panel-2); border: 1.5px solid var(--border); border-radius: 9px;
  padding: 8px 9px; cursor: pointer; transition: border-color .15s ease; display: flex; flex-direction: column; gap: 4px;
}
.vs-timeline-scene:hover { border-color: rgba(232,163,61,.5); }
.vs-timeline-scene.active { border-color: var(--gold); background: var(--gold-soft); box-shadow: 0 0 0 1px var(--gold); }
.vs-timeline-scene-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); }
.vs-timeline-scene-icons { display: flex; gap: 5px; flex-wrap: wrap; font-size: 12px; }
.vs-timeline-scene-icons span { opacity: .85; }

/* --- Colonne droite : personnalisation --- */
.vs-subtabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.vs-subtab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-size: 12px; font-weight: 600; padding: 6px 4px 8px; cursor: pointer; font-family: 'Inter', sans-serif; }
.vs-subtab:hover { color: var(--ink); }
.vs-subtab.active { color: var(--gold-2); border-bottom-color: var(--gold); }
.vs-subtab-panel[hidden] { display: none; }

/* --- Réglages avancés (repliés par défaut) : utilisé dans les panneaux Photo/Texte/Logo pour
   séparer les réglages essentiels (toujours visibles) des réglages plus fins (repliés, mais
   toujours accessibles) — Phase F, bloc 4. --- */
.vs-advanced-toggle {
  display: flex; align-items: center; gap: 7px; width: 100%; margin: 14px 0 10px; padding: 8px 10px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; color: var(--muted);
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; text-align: left; cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.vs-advanced-toggle:hover { border-color: var(--gold); color: var(--gold-2); }
.vs-advanced-toggle-icon { font-size: 9px; transition: transform .18s ease; flex-shrink: 0; }
.vs-advanced-toggle[aria-expanded="true"] .vs-advanced-toggle-icon { transform: rotate(180deg); }
.vs-advanced-content { padding-top: 2px; }
.vs-advanced-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.vs-field { margin-bottom: 13px; }
.vs-field:last-child { margin-bottom: 0; }
.vs-field label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.vs-field-head { display: flex; justify-content: space-between; align-items: baseline; }
.vs-field-value { color: var(--gold-2); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; }
.vs-field input[type="range"] { width: 100%; accent-color: var(--gold); }
.vs-field input[type="text"], .vs-field textarea, .vs-field select {
  width: 100%; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; color: var(--ink);
  font-family: 'Inter', sans-serif; font-size: 13px; padding: 8px 10px; resize: vertical; box-sizing: border-box;
}
.vs-field input[type="color"] { width: 100%; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); cursor: pointer; padding: 2px; }
.vs-btn-row { display: flex; gap: 6px; flex-wrap: wrap; }
.vs-toggle-btn {
  flex: 1; min-width: 56px; padding: 7px 8px; border-radius: 7px; border: 1px solid var(--border); background: var(--panel-2);
  color: var(--muted); font-size: 11px; font-weight: 600; cursor: pointer; text-align: center; transition: border-color .15s ease, color .15s ease;
}
.vs-toggle-btn:hover { border-color: var(--gold); color: var(--ink); }
.vs-toggle-btn.active { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-2); }

.vs-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9px; padding: 9px 14px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; cursor: pointer; transition: .2s; width: 100%;
}
.vs-btn-ghost { border: 1px solid var(--border); background: var(--panel-2); color: var(--ink); }
.vs-btn-ghost:hover { border-color: var(--gold); color: var(--gold-2); }
.vs-btn-ghost:disabled { opacity: .5; cursor: default; }
.vs-reset-btn { margin-top: 4px; }
.vs-logo-preview { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; background: rgba(255,255,255,0.05); margin-left: 8px; display: inline-block; vertical-align: middle; }

/* --- Musique / Voix --- */
.vs-music-category { margin-bottom: 8px; }
.vs-music-category-title { font-size: 11px; color: var(--gold-2); font-weight: 600; margin: 0 0 4px; }
.vs-music-track { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); margin-bottom: 4px; }
.vs-music-track.unavailable { opacity: 0.5; }
.vs-music-track-name { flex: 1; font-size: 12px; font-weight: 600; }
.vs-music-track-note { font-size: 10px; color: var(--muted); }
.vs-audio-preview { width: 100%; margin: 8px 0; height: 34px; }

/* --- ✨ IA --- */
.vs-textarea { width: 100%; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; color: var(--ink); font-family: 'Inter', sans-serif; font-size: 13px; padding: 9px 10px; resize: vertical; margin-bottom: 10px; box-sizing: border-box; }
.vs-btn-gold {
  display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(232,163,61,.55);
  background: radial-gradient(ellipse at center, rgba(232,163,61,.22) 0%, rgba(232,163,61,.08) 50%, #050608 85%);
  color: #f4c368; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13.5px; padding: 10px 14px;
  border-radius: 9px; cursor: pointer; transition: .2s; width: 100%;
}
.vs-btn-gold:hover { border-color: var(--gold); box-shadow: 0 0 16px rgba(232,163,61,.22); }
.vs-btn-gold:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
.vs-ai-overwrite-confirm { margin-top: 10px; padding-top: 4px; }
.vs-ai-overwrite-confirm .vs-hint-status { margin-top: 0; margin-bottom: 8px; }
.vs-hint-status { font-size: 11.5px; color: var(--muted); margin: 8px 0 0; line-height: 1.5; min-height: 1em; }
.vs-hint-status.is-error { color: var(--rose); }
.vs-hint-status.is-ok { color: var(--gold-2); }

/* --- Barre d'export --- */
.vs-export-bar { margin-top: 22px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }
.vs-export-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vs-export-bar-text { display: flex; flex-direction: column; gap: 2px; }
.vs-export-bar-text strong { font-family: 'Fraunces', serif; font-weight: 500; font-size: 15px; }
.vs-export-bar-text span { color: var(--muted); font-size: 12.5px; }
.vs-btn-large { font-size: 14.5px; padding: 13px 22px; width: auto; }

/* --- Résultat du rendu réel (Phase 6, bloc 1) --- */
.vs-export-result { margin-top: 14px; }
.vs-export-result video { width: 100%; max-width: 260px; border-radius: 10px; display: block; }
.vs-export-result a { display: inline-block; margin-top: 8px; color: var(--gold-2); font-size: 12.5px; text-decoration: underline; }

/* --- Accessibilité : focus clavier visible sur tous les contrôles personnalisés du Studio ---
   Aucun de ces éléments ne masquait le contour de focus par défaut, mais un contour explicite et
   cohérent (plutôt que le rendu par défaut, très variable d'un navigateur à l'autre) est plus
   fiable pour la navigation au clavier. N'affecte que :focus-visible (clavier), jamais un simple
   clic à la souris, pour ne rien changer visuellement à l'usage normal. */
.vs-toggle-btn:focus-visible, .vs-stepper-btn:focus-visible, .vs-icon-btn:focus-visible,
.vs-slot-chip:focus-visible, .vs-template-card:focus-visible, .vs-subtab:focus-visible,
.vs-btn:focus-visible, .vs-btn-gold:focus-visible, .vs-photo-thumb-remove:focus-visible,
.vs-scene-photo-opt:focus-visible, .vs-timeline-scene:focus-visible, .vs-photo-import:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

/* --- Responsive --- */
@media (max-width: 1180px) {
  .vs-layout { grid-template-columns: 260px minmax(0, 1fr) 300px; }
}
@media (max-width: 980px) {
  .vs-layout { grid-template-columns: 1fr; }
  .vs-col-left, .vs-col-right { position: static; max-height: none; }
  .vs-timeline { flex-wrap: wrap; }
  /* Ordre demandé pour mobile/tablette : Templates -> Édition (personnalisation) -> Aperçu.
     Sur grand écran, l'ordre visuel normal (gauche/centre/droite) reste inchangé. */
  .vs-col-left { order: 1; }
  .vs-col-right { order: 2; }
  .vs-col-center { order: 3; }
}
@media (max-width: 560px) {
  .vs-wrap { padding: 66px 14px 70px; }
  .vs-header-row { flex-direction: column; }
  .vs-header-logo { width: 110px; }
}