@layer modules{
/* ════════ Atelier « Vidéo » (onglet Édition) - assets/js/51-video-editor.js ════════ */

/* Cadre unifié (façon Figma : un seul cadre, panneaux jointifs - plus de bento) */
.ve{ display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:var(--radius,9px);
  overflow:hidden; background:var(--card); }
.ve-loading{ padding:var(--sp-40); text-align:center; color:var(--muted); font-size:var(--fs-base); }

/* Barre supérieure fine (retour + titre à gauche · générer + plein-écran à droite) */
.ve-topbar{ display:flex; align-items:center; gap:var(--sp-10); padding:var(--sp-6) var(--sp-12); border-bottom:1px solid var(--line); background:var(--card); flex:0 0 auto; }
.ve-title{ display:inline-flex; align-items:center; gap:var(--sp-6); font-weight:var(--fw-bold); }
.ve-title svg{ width:18px; height:18px; }
.ve-spacer{ flex:1; }
.ve-ctl{ display:inline-flex; align-items:center; gap:var(--sp-6); font-size:var(--fs-md); color:var(--mut); white-space:nowrap; }
.ve-ctl select, .ve-ctl input{ font:inherit; padding:var(--sp-4) var(--sp-6); border:1px solid var(--line);
  border-radius:var(--radius); background:var(--card2); color:var(--txt); }
.ve-ctl input[type=number]{ width:54px; }

.ve-body{ display:grid; grid-template-columns:230px 1fr 280px; gap:0; align-items:stretch; min-height:480px; }
@media (max-width:1100px){ .ve-body{ grid-template-columns:1fr; } }

/* Colonne scènes (jointive : diviseur à droite) */
.ve-scenes{ background:var(--card); border:0; border-right:1px solid var(--line); border-radius:0;
  padding:var(--sp-8); display:flex; flex-direction:column; gap:var(--sp-6); min-height:0; }
.ve-scenes-h{ display:flex; align-items:center; justify-content:space-between; font-weight:var(--fw-bold); padding:var(--sp-2) var(--sp-4); }
.ve-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-6); max-height:60vh; overflow:auto; }
.ve-li{ display:flex; align-items:center; gap:var(--sp-8); padding:var(--sp-6); border:1px solid var(--line);
  border-radius:var(--radius); cursor:pointer; background:var(--bg); transition:border-color .12s,box-shadow .12s; }
.ve-li:hover{ border-color:var(--accent); }
.ve-li.on{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent); }
.ve-li-sw{ width:30px; height:30px; border-radius:var(--radius); flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.ve-li-b{ display:flex; flex-direction:column; min-width:0; flex:1; }
.ve-li-n{ font-weight:var(--fw-strong); font-size:var(--fs-md); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ve-li-d{ font-size:var(--fs-xs); color:var(--muted); }
.ve-li-acts{ display:flex; gap:var(--sp-2); opacity:.55; }
.ve-li:hover .ve-li-acts, .ve-li.on .ve-li-acts{ opacity:1; }
.ve-ico{ border:0; background:transparent; color:inherit; cursor:pointer; padding:var(--sp-2); border-radius:var(--radius-sm); line-height:0; }
.ve-ico:hover{ background:color-mix(in srgb,var(--accent) 14%,transparent); }
.ve-ico[disabled]{ opacity:.3; cursor:default; }
.ve-ico svg{ width:14px; height:14px; }
.ve-total{ font-size:var(--fs-sm); color:var(--muted); text-align:center; padding-top:var(--sp-4); border-top:1px dashed var(--line); }

/* Scène (relative → ancre le dock flottant) */
.ve-stage{ position:relative; display:flex; align-items:center; justify-content:center; min-height:0; }
.ve-canvas-wrap{ width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:repeating-conic-gradient(#0000 0 25%, color-mix(in srgb,var(--line) 40%,transparent) 0 50%) 0 0/22px 22px,
            var(--card2);
  border:0; border-radius:0; padding:var(--sp-16); box-sizing:border-box; }
#ve-canvas{ max-width:100%; max-height:62vh; width:auto; height:auto; border-radius:var(--radius);
  box-shadow:var(--elev-2); }

/* Dock flottant (bas-centre du canevas, façon Figma) : nav de scènes + réglages d'export */
.ve-dock{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:6;
  display:flex; align-items:center; gap:var(--sp-8); padding:var(--sp-6) var(--sp-8); border-radius:var(--radius);
  background:color-mix(in srgb,var(--card) 90%,transparent); border:1px solid var(--line);
  box-shadow:var(--elev-2);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px); max-width:calc(100% - 24px); }
html[data-theme="light"] .ve-dock{ box-shadow:var(--elev-2); }
.ve-dock-grp{ display:flex; align-items:center; gap:var(--sp-8); }
.ve-dock-sep{ width:1px; align-self:stretch; margin:var(--sp-2) var(--sp-2); background:var(--line); }
.ve-dock-ic{ width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:var(--radius);
  background:transparent; color:var(--txt); cursor:pointer; }
.ve-dock-ic:hover{ background:var(--bg2); }
.ve-dock-ic:disabled{ opacity:.35; cursor:default; }
.ve-dock-ic svg.ic{ width:16px; height:16px; }
.ve-dock-pos{ font-size:var(--fs-sm); font-weight:var(--fw-strong); color:var(--txt); min-width:78px; text-align:center; font-variant-numeric:tabular-nums; }

/* Inspecteur (jointif : diviseur à gauche) */
.ve-insp{ background:var(--card); border:0; border-left:1px solid var(--line); border-radius:0;
  padding:var(--sp-12); display:flex; flex-direction:column; gap:var(--sp-10); overflow-y:auto; min-height:0; }
.ve-insp-h{ font-weight:var(--fw-bold); }
.ve-fld{ display:flex; flex-direction:column; gap:var(--sp-4); font-size:var(--fs-md); color:var(--muted); }
.ve-fld span{ display:flex; justify-content:space-between; }
.ve-fld input[type=text], .ve-fld textarea, .ve-fld select{ font:inherit; color:var(--fg,#111);
  padding:var(--sp-6) var(--sp-8); border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); }
.ve-fld textarea{ resize:vertical; }
.ve-fld input[type=range]{ width:100%; }
.ve-row{ display:flex; gap:var(--sp-8); }
.ve-col{ flex:1; display:flex; flex-direction:column; gap:var(--sp-4); font-size:var(--fs-sm); color:var(--muted); align-items:center; }
.ve-col input[type=color]{ width:100%; height:30px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg); padding:var(--sp-2); cursor:pointer; }

/* Résultat (jointif : diviseur en haut) */
.ve-result{ background:var(--card); border:0; border-top:1px solid var(--line); border-radius:0; padding:var(--sp-12);
  display:flex; flex-direction:column; gap:var(--sp-10); }
.ve-result-h{ display:flex; align-items:center; gap:var(--sp-8); }
.ve-result-h svg{ width:16px; height:16px; }
.ve-result-v{ width:100%; max-height:60vh; border-radius:var(--radius); background:#000; }

}