@layer modules{
/* 33-video-editor.css · L'app Vidéo (51-video-editor.js), la coquille de l'éditeur par scènes et calques (CDC_LOT2_APPVIDEO
   A4, 2026-11-04), dans la DA commune du Studio (CDC_DA_COMMUNE) : la rangée d'outils, les panneaux (.panneau-app), les
   champs (.champ-app), les listes (.liste-app) et le pied (.pied-app) sont ceux du Tableur et du Document
   (22c-studio-outils.css). Ne reste ici que ce qui est propre à la Vidéo : les trois colonnes, la scène posée sur le fond
   de page (.page-fond) comme une page du Document, son transport, les groupes de scènes, la médiathèque, les timelines.
   Aucune couleur en dur : tout vient des jetons. Jusqu'au 2026-11-04, la feuille dessinait le générateur de « cartes ». */

.vid{ --vid-tl-h:176px; --vid-piste-nom:120px; display:flex; flex-direction:column; height:100%; min-height:560px; overflow:hidden; background:var(--card); color:var(--txt); }
.vid-chargement{ padding:var(--sp-40); text-align:center; color:var(--mut); font-size:var(--fs-base); }
.vid-outils{ flex:none; }
.vid-espace{ flex:1 1 auto; min-width:var(--sp-8); }
.vid-nom{ font-size:var(--fs-md); font-weight:var(--fw-medium); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
/* Les listes de la rangée et du transport gardent la largeur de leur choix le plus long (la règle de formulaire globale les étirait). */
.vid .dhsel{ flex:none; width:auto; }

/* Trois colonnes pleine hauteur : les scènes et la médiathèque, la scène, son détail. */
.vid-corps{ flex:1; min-height:0; display:grid; grid-template-columns:var(--panneau-l) minmax(0,1fr) var(--panneau-l-droit); }
@media (max-width:860px){ .vid-corps{ grid-template-columns:minmax(0,1fr); grid-auto-rows:auto minmax(320px,1fr) auto; } }
.vid-corps.vid-depot{ outline:2px dashed var(--accent); outline-offset:-4px; }
.vid-scenes{ overflow:auto; }

/* Le Main frame, en tête du panneau gauche ; puis les scènes, libres ou dans leurs groupes repliables. */
.vid-main{ width:100%; text-align:left; border:0; background:none; font:inherit; color:inherit; cursor:pointer; }
.vid-main[aria-selected="true"]{ background:var(--outils-accent-doux); color:var(--accent-texte); }
.vid-main svg.ic{ flex:none; }
.vid-tete-gestes{ display:flex; gap:var(--sp-1); flex:none; }
.vid-liste{ display:flex; flex-direction:column; }
.vid-li{ cursor:pointer; }
.vid-li.vid-cible, .vid-groupe-tete.vid-cible{ box-shadow:inset 0 2px 0 var(--accent); }
.vid-sw{ width:28px; height:28px; flex:none; border-radius:var(--radius-sm); border:1px solid var(--line); box-sizing:border-box; }
.vid-li-b{ display:flex; flex-direction:column; min-width:0; flex:1; }
.vid-li-n{ font-size:var(--fs-md); font-weight:var(--fw-medium); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vid-li-d{ font-size:var(--fs-xs); color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Les gestes d'une scène n'apparaissent qu'au survol : toujours là, ils réduisaient le nom. */
.vid-li-acts{ display:none; gap:var(--sp-1); flex:none; }
.vid-li:hover .vid-li-acts, .vid-li:focus-within .vid-li-acts{ display:flex; }
.vid-groupe-tete{ display:flex; align-items:center; gap:var(--sp-6); width:100%; padding:var(--sp-6) var(--sp-12); border:0; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.vid-groupe-tete .vid-li-n{ flex:1; }
.vid-groupe-corps{ padding-left:var(--sp-12); }
.vid-groupe-corps[hidden]{ display:none; }
.vid-vide{ padding:var(--sp-6) var(--sp-12); margin:0; }

/* La médiathèque : en grille (vignettes) ou en liste ; un envoi en cours a sa jauge. */
/* La ligne des filtres a sa hauteur avant que DHSelect n'habille la liste : rien ne glisse à l'ouverture (squelettes_ui, 2026-11-04). */
.vid-media-filtres{ display:flex; align-items:center; gap:var(--sp-6); height:var(--outils-h); padding:0 var(--sp-12); margin-bottom:var(--sp-8); box-sizing:content-box; }
.vid-media-filtres select:not(.dhsel-native){ height:var(--outils-h); flex:none; width:84px; }
.vid-media-filtres .dhsel{ min-width:84px; }
.vid-media-q{ flex:1; min-width:0; height:var(--outils-h); box-sizing:border-box; }
.vid-medias > .vid-vide{ grid-column:1 / -1; padding:var(--sp-4) 0; }   /* le message vide prend toute la largeur de la grille */
.vid-medias{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-8); padding:0 var(--sp-12) var(--sp-12); }
.vid-medias.vid-medias-liste{ grid-template-columns:minmax(0,1fr); gap:var(--sp-2); }
.vid-media{ display:flex; flex-direction:column; gap:var(--sp-4); min-width:0; position:relative; }
.vid-medias-liste .vid-media{ flex-direction:row; align-items:center; gap:var(--sp-8); }
.vid-media-vis{ display:grid; place-items:center; aspect-ratio:16/9; border-radius:var(--radius-sm); background:var(--bg2); overflow:hidden; color:var(--mut); }
.vid-medias-liste .vid-media-vis{ width:48px; flex:none; }
.vid-media-vis img{ width:100%; height:100%; object-fit:cover; display:block; }
.vid-jauge{ position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--line); border-radius:var(--radius-pill); overflow:hidden; }
.vid-jauge span{ display:block; height:100%; background:var(--accent); }
.vid-composants{ padding-bottom:var(--sp-12); }

/* La scène : l'aperçu posé sur le fond de page, à l'ombre de page, au format du projet ; son transport dessous. */
.vid-centre{ display:flex; flex-direction:column; min-width:0; min-height:0; }
.vid-scene{ flex:1; display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; padding:var(--sp-24); box-sizing:border-box; overflow:hidden; }
#ve-canvas{ display:block; max-width:100%; max-height:100%; width:auto; height:100%; box-shadow:var(--page-ombre); }
.vid-importe video{ max-width:100%; max-height:100%; background:var(--page-encre); box-shadow:var(--page-ombre); }
/* Le transport est une rangée d'outils de la DA (.outils) : sa hauteur est celle de la rangée, la silhouette la reprend. */
.vid-transport{ flex:none; border-top:1px solid var(--line2); border-bottom:0; }
.vid-temps{ font-size:var(--fs-sm); font-variant-numeric:tabular-nums; color:var(--txt); white-space:nowrap; }

/* Les timelines : la règle, une piste par calque (le bloc dit son temps), la tête de lecture ; la timeline du calque dessous. */
.vid-timelines{ flex:none; height:var(--vid-tl-h); display:flex; flex-direction:column; border-top:1px solid var(--line2); background:var(--card); min-height:0; }
/* B4 : la timeline du calque ouverte s'ajoute sous celle de la scène, sans l'écraser (vu au banc du 2026-11-05 : la scène tombait à 0 px). */
.vid-timelines:has(> .vid-tl-calque:not([hidden])){ height:calc(var(--vid-tl-h) + 150px); }
.vid-tl-tete{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-8); padding:var(--sp-4) var(--sp-12); }
.vid-tl{ position:relative; flex:1; min-height:0; padding:0 var(--sp-12); overflow:auto; scroll-padding-top:20px; scroll-padding-left:var(--vid-piste-nom); }
/* B3 : le contenu se zoome en largeur (style posé par le code), la timeline défile ; les noms des pistes restent collés à gauche. */
.vid-tl-contenu{ position:relative; display:flex; flex-direction:column; min-height:100%; min-width:100%; }
.vid-tl-regle{ position:sticky; top:0; z-index:4; background:var(--card); flex:none; height:20px; margin-left:var(--vid-piste-nom); border-bottom:1px solid var(--line); cursor:pointer; }
.vid-tl-grad{ position:absolute; top:2px; transform:translateX(-50%); font-size:var(--fs-xs); color:var(--mut); white-space:nowrap; font-variant-numeric:tabular-nums; }
.vid-tl-grad:first-child{ transform:none; }
.vid-tl-pistes{ flex:1; }
.vid-piste{ position:relative; display:flex; align-items:center; height:26px; border-bottom:1px solid var(--line2); }
.vid-piste[aria-selected="true"]{ background:var(--outils-accent-doux); }
.vid-piste-nom{ position:sticky; left:0; z-index:2; background:var(--card); align-self:stretch; display:flex; align-items:center; flex:none; width:var(--vid-piste-nom); font-size:var(--fs-xs); color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:var(--sp-8); box-sizing:border-box; }
.vid-bloc{ position:absolute; top:4px; bottom:4px; border-radius:var(--radius-xs); background:color-mix(in srgb, var(--accent) 28%, transparent); border:1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  font-size:var(--fs-xs); color:var(--txt); padding:0 var(--sp-6); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; box-sizing:border-box; }
.vid-tl-tete-lecture{ position:absolute; top:0; bottom:0; width:1px; background:var(--accent); pointer-events:none; z-index:3; }
.vid-tl-aimant{ position:absolute; top:0; bottom:0; width:0; border-left:1px dashed var(--warn); pointer-events:none; z-index:3; }
.vid-tl-aimant[hidden]{ display:none; }
.vid-piste .vid-bloc[data-bloc]{ cursor:grab; touch-action:none; }
.vid-bloc-vis{ position:absolute; inset:0; display:flex; overflow:hidden; pointer-events:none; opacity:.55; color:var(--accent); }
.vid-bloc-vis img{ flex:1 1 0; min-width:0; height:100%; object-fit:cover; }
.vid-bloc-vis .vid-onde{ position:absolute; left:0; right:0; bottom:0; width:100%; height:18px; }
.vid-bord{ position:absolute; top:0; bottom:0; width:6px; cursor:ew-resize; z-index:1; }
.vid-bord-debut{ left:0; }
.vid-bord-fin{ right:0; }
.vid-piste[aria-selected="true"] .vid-bloc{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.vid-marqueur{ position:absolute; top:0; height:100%; z-index:1; background:var(--card); padding:0 var(--sp-4); border-left:2px solid var(--warn); font-size:var(--fs-xs); color:var(--txt); white-space:nowrap; cursor:default; }
.vid-tl-gestes{ display:inline-flex; align-items:center; gap:var(--sp-2); }
.vid-tl-gestes[hidden]{ display:none; }
.vid-tl-tete-lecture[hidden]{ display:none; }
.vid-tl-calque{ flex:none; max-height:160px; overflow:auto; border-top:1px solid var(--line2); padding:0 var(--sp-12); }
.vid-tl-calque[hidden]{ display:none; }
.vid-cle{ position:absolute; top:50%; z-index:3; width:9px; height:9px; translate:-50% -50%; background:var(--accent); transform:rotate(45deg); cursor:ew-resize; touch-action:none; }
/* B4 : la timeline du calque. Une clé d'un préréglage est creuse ; la clé choisie est cerclée. */
.vid-cle-pre{ background:var(--card); box-shadow:inset 0 0 0 2px var(--accent); }
.vid-cle[aria-selected="true"]{ outline:2px solid var(--txt); outline-offset:1px; }
.vid-anim-outils{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-6) var(--sp-12); padding:var(--sp-6) 0; }
.vid-anim-outils select{ max-width:200px; }
.vid-anim-cle{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--sp-6) var(--sp-12); }
.vid-anim-cle .champ-ligne{ display:flex; flex-direction:row; align-items:center; gap:var(--sp-6); margin:0; }
.vid-anim-cle .champ-ligne > span{ font-size:var(--fs-xs); color:var(--mut); white-space:nowrap; }
.vid-anim-cle input[type="number"]{ width:64px; }
.vid-anim-cle input[type="text"]{ width:160px; }
.vid-puce-pre{ display:inline-flex; align-items:center; gap:var(--sp-4); padding:0 var(--sp-4) 0 var(--sp-8); border-radius:var(--radius-pill); background:var(--outils-accent-doux); font-size:var(--fs-xs); }
.vid-puce-pre button{ display:inline-flex; padding:var(--sp-2); border:0; background:none; color:inherit; cursor:pointer; }
.vid-anim-defile{ overflow:hidden; }
.vid-anim-lignes{ min-width:100%; }
.vid-piste-prop{ cursor:copy; }
.vid-piste-prop .vid-piste-nom{ gap:var(--sp-6); justify-content:space-between; }
.vid-anim-plage{ position:absolute; top:6px; bottom:6px; border-radius:var(--radius-xs); background:var(--line2); pointer-events:none; }
.vid-cle-poser{ flex:none; width:9px; height:9px; margin-right:var(--sp-6); padding:0; border:1px solid var(--accent); background:none; transform:rotate(45deg); cursor:pointer; }
.vid-cle-poser:hover{ background:var(--accent); }
.vid-trajectoire{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; overflow:visible; }
.vid-trajectoire polyline{ fill:none; stroke:var(--accent); stroke-width:1.5; stroke-dasharray:4 3; }
.vid-trajectoire circle{ fill:var(--card); stroke:var(--accent); stroke-width:1.5; }

/* La vue Scène (B1) : la Toile tient le centre et la colonne de droite ; son panneau gauche (pages, calques) s'efface, les
   calques sont dans la timeline ; son inspecteur a la largeur du panneau droit de la DA. En lecture, le canvas du
   compositeur passe devant elle, au centre, sur le fond de page. */
.vid-corps.vid-avec-toile .vid-centre{ grid-column:2 / 4; }
.vid-corps.vid-avec-toile .vid-insp{ display:none; }
.vid-corps.vid-avec-toile .vid-scene{ padding:0; position:relative; }
/* La Toile pose .gph-host (35-graph.css : relative, 480 px au moins) sur son hôte : l'id l'emporte, l'hôte remplit la scène. */
#ve-toile.vid-toile{ position:absolute; inset:0; height:auto; min-height:0; display:flex; min-width:0; }
#ve-toile.vid-toile[hidden]{ display:none; }
.vid-toile > .gph{ flex:1; min-width:0; min-height:0; }
/* La disposition des panneaux de la Toile tient à trois jetons (37b § 3.1) : sans panneau gauche, l'inspecteur à la largeur
   du panneau droit de la DA et collé au bord comme les autres panneaux de la Vidéo (la silhouette le retrouve à 2 px). */
.vid-toile .gph-video{ --studio-gauche-l:0px; --studio-retrait:0px; --studio-droite-l:var(--panneau-l-droit); }
.vid-toile .gph-video .gph-left{ display:none; }
.vid-corps.vid-avec-toile #ve-canvas{ position:absolute; inset:0; margin:auto; z-index:2; visibility:hidden; }
.vid-corps.vid-avec-toile .vid-scene.vid-en-lecture #ve-canvas{ visibility:visible; }
.vid-corps.vid-avec-toile .vid-scene.vid-en-lecture::before{ content:""; position:absolute; inset:0; z-index:1; background:var(--page-fond, var(--bg2)); }
/* Les réglages de la scène, en ligne dans l'en-tête de sa timeline. */
.vid-tl-scene{ display:flex; align-items:center; gap:var(--sp-12); margin-left:var(--sp-16); min-width:0; }
.vid-tl-scene .champ-ligne{ display:flex; flex-direction:row; align-items:center; gap:var(--sp-6); margin:0; }
.vid-tl-scene .champ-ligne > span{ font-size:var(--fs-xs); color:var(--mut); white-space:nowrap; }
.vid-tl-scene input[type="text"]{ width:160px; }
.vid-tl-scene input[type="number"]{ width:72px; }
.vid-tl-scene input[type="color"]{ width:40px; padding:0; }

/* Les réglages d'un calque de média (B2), en ligne dans la timeline du calque. */
.vid-media-reglages{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-8) var(--sp-16); padding:var(--sp-6) 0; }
.vid-media-reglages .champ-ligne{ display:flex; flex-direction:row; align-items:center; gap:var(--sp-6); margin:0; }
.vid-media-reglages .champ-ligne > span{ font-size:var(--fs-xs); color:var(--mut); white-space:nowrap; }
.vid-media-reglages input[type="number"]{ width:72px; }
.vid-recadrage{ display:inline-flex; align-items:center; gap:var(--sp-4); }
.vid-recadrage input{ width:56px; }

/* Les réglages : trois couleurs côte à côte. */
.vid-pied{ gap:var(--sp-16); }
.vid-pied #ve-format-pied{ margin-left:auto; }
.vid-couleurs{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-6); }
}

/* D1, D2 : le Main frame. Un bloc se tire pour l'ordonner ; une jonction (losange) se choisit, pleine quand elle porte une transition. */
.vid-bloc-main{ cursor:grab; touch-action:none; display:flex; align-items:center; }
.vid-bloc-main[aria-selected="true"]{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.vid-bloc-tire{ z-index:3; opacity:.85; cursor:grabbing; }
.vid-jonction{ position:absolute; top:50%; z-index:2; width:12px; height:12px; padding:0; translate:-50% -50%; transform:rotate(45deg); border:1px solid var(--accent); background:var(--card); cursor:pointer; }
.vid-jonction-pleine{ background:var(--accent); }
.vid-jonction[aria-pressed="true"]{ outline:2px solid var(--txt); outline-offset:1px; }
.vid-main-ajout{ display:flex; padding:var(--sp-6) 0 var(--sp-6) var(--vid-piste-nom); }
.vid-main-ajout select{ max-width:260px; }

/* F1, F2 : la progression de l'export, dans la rangée d'outils. */
.vid-export{ display:inline-flex; align-items:center; gap:var(--sp-8); font-size:var(--fs-xs); color:var(--mut); font-variant-numeric:tabular-nums; }
.vid-export[hidden]{ display:none; }

/* B5 : les effets du calque, une ligne par effet dans l'ordre où ils s'appliquent. */
.vid-effets{ border-bottom:1px solid var(--line2); padding-bottom:var(--sp-4); }
.vid-effet{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4) var(--sp-12); padding:var(--sp-4) 0; }
.vid-effet .champ-ligne{ display:flex; flex-direction:row; align-items:center; gap:var(--sp-6); margin:0; }
.vid-effet .champ-ligne > span{ font-size:var(--fs-xs); color:var(--mut); white-space:nowrap; }
.vid-effet input[type="number"]{ width:64px; }
.vid-effet .vid-effet-nom > span{ color:var(--txt); font-weight:var(--fw-strong); }

/* B6 : la piste de sous-titres, ses lignes en petits blocs dans le bloc ; leur saisie dans la timeline du calque. */
.vid-st-bloc{ position:absolute; top:3px; bottom:3px; border-radius:var(--radius-xs); background:color-mix(in srgb, var(--accent) 55%, transparent); }
.vid-st-lignes{ display:flex; flex-direction:column; gap:var(--sp-4); padding-bottom:var(--sp-6); }
.vid-st-ligne{ display:grid; grid-template-columns:72px 72px 1fr auto; align-items:center; gap:var(--sp-6); }
.vid-st-ligne textarea{ resize:vertical; min-height:28px; }

/* B7 : les onglets de la Vidéo dans l'inspecteur du Design ont ses pièces : un champ est celui du Studio (.studio-champ, 37b),
   à la hauteur de ses champs ; les rangées passent en colonne dans la largeur du panneau. */
.gph .gph-insp-hote :is(input[type="number"], input[type="text"], select, textarea){ box-sizing:border-box; height:var(--studio-ctl-h); padding:0 var(--sp-8); border:0;
  border-radius:var(--radius-sm); background:var(--studio-champ); box-shadow:none; color:var(--txt); font:inherit; font-size:var(--fs-sm); }
.gph .gph-insp-hote textarea{ height:auto; min-height:var(--studio-ctl-h); padding:var(--sp-4) var(--sp-8); }
.gph .gph-insp-hote :is(.vid-anim-outils, .vid-effet, .vid-media-reglages, .vid-anim-cle){ flex-direction:column; align-items:stretch; flex-wrap:nowrap; }
.gph .gph-insp-hote :is(.champ-ligne){ justify-content:space-between; }
.gph .gph-insp-hote select{ max-width:none; width:100%; }
.gph .gph-insp-hote .vid-effet{ padding:var(--sp-8) 0; border-top:1px solid var(--line2); }

/* C1-C3 : l'instance d'une scène ou d'un composant, ses surcharges par calque du maître. */
.vid-surcharges{ display:flex; flex-direction:column; gap:var(--sp-6); padding:var(--sp-6) 0; }
.vid-sur{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4) var(--sp-8); padding:var(--sp-6) 0; border-top:1px solid var(--line2); }
.vid-sur .champ-ligne{ display:flex; flex-direction:row; align-items:center; gap:var(--sp-6); margin:0; }
.vid-sur .champ-ligne > span{ font-size:var(--fs-xs); color:var(--mut); }
.vid-composants{ display:flex; flex-direction:column; gap:var(--sp-4); }
/* La liste « Poser une scène » (et le bouton que DHSelect pose à sa place) a la taille fixe des pièces de l'en-tête : remplie
   après coup, elle poussait la rangée de 8 px et la grandissait de 5 (squelettes_ui, 2026-11-05). */
#ve-tl-poser-scene, .vid-tl-gestes .dhsel-trigger{ width:170px; max-width:170px; height:var(--studio-ctl-h, 28px); box-sizing:border-box; padding-block:0; }
.vid-tl-gestes{ height:var(--studio-ctl-h, 28px); }
/* Le bouton que DHSelect pose à sa place : le texte des pièces de l'en-tête (da_style_ui : 12 ou 13 px, il en avait 13,5). */
.vid-tl-gestes .dhsel{ --dhs-fs:var(--fs-sm); --dhs-py:0; }

/* D3 : les pistes globales du Main frame, dans le panneau des réglages. */
.vid-piste-globale{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-8); }

/* D4 : les temps de la musique dans la règle (un trait fin, sous les graduations). */
.vid-rythme{ position:absolute; bottom:0; width:1px; height:6px; background:var(--accent); opacity:.7; pointer-events:none; }

/* E2, E3 : le mixage, une ligne par source ; le master et son vu-mètre. */
.vid-mix{ display:flex; flex-direction:column; gap:var(--sp-4); padding:var(--sp-6) 0; }
.vid-mix-ligne, .vid-mix-master{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4) var(--sp-12); padding:var(--sp-4) 0; border-bottom:1px solid var(--line2); }
.vid-mix .champ-ligne{ display:flex; flex-direction:row; align-items:center; gap:var(--sp-6); margin:0; }
.vid-mix .champ-ligne > span{ font-size:var(--fs-xs); color:var(--mut); white-space:nowrap; }
.vid-mix input[type="number"]{ width:64px; }
.vid-vumetre{ position:relative; display:inline-flex; align-items:center; width:160px; height:var(--sp-12); border-radius:var(--radius-xs); background:var(--line2); overflow:hidden; }
.vid-vu-barre{ position:absolute; inset:0 auto 0 0; width:0; background:var(--ok); }
.vid-vu-barre[data-rouge="true"]{ background:var(--warn); }
.vid-vu-txt{ position:relative; padding:0 var(--sp-6); font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }
.vid-mesure{ font-size:var(--fs-xs); color:var(--mut); }

/* F3 : le panneau d'export sous son bouton, la file d'attente. */
.vid-export-ancre{ position:relative; display:inline-flex; }
.vid-export-panneau{ position:absolute; top:calc(100% + var(--sp-4)); right:0; z-index:20; width:340px; padding:var(--sp-12); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:var(--sp-8); }
.vid-export-panneau[hidden]{ display:none; }
.vid-export-grille{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); }
.vid-export-actes{ display:flex; gap:var(--sp-8); flex-wrap:wrap; }
.vid-file{ display:flex; flex-direction:column; gap:var(--sp-4); max-height:180px; overflow:auto; }
.vid-file-ligne{ display:grid; grid-template-columns:1fr auto; gap:var(--sp-2) var(--sp-8); align-items:center; padding:var(--sp-4) 0; border-top:1px solid var(--line2); }
.vid-file-ligne .vid-li-d{ grid-column:1; font-size:var(--fs-xs); color:var(--mut); }
.vid-file-ligne[data-etat="echec"] .vid-li-d{ color:var(--warn); }

/* G2 : la plage d'export dans la règle ; l'aide des raccourcis. */
.vid-io{ position:absolute; top:0; height:100%; width:0; border-left:2px solid var(--accent); pointer-events:none; }
.vid-io-a{ border-left-style:dashed; }
.vid-aide{ position:absolute; right:var(--sp-16); bottom:var(--sp-16); z-index:30; width:320px; max-height:70%; overflow:auto; padding:var(--sp-12); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); }
.vid-aide-tete{ display:flex; align-items:center; justify-content:space-between; }
.vid-aide-liste{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4) var(--sp-12); margin:var(--sp-8) 0 0; font-size:var(--fs-sm); }
.vid-aide-liste dd{ margin:0; color:var(--mut); }
.vid-aide kbd{ font:inherit; font-size:var(--fs-xs); padding:0 var(--sp-4); border-radius:var(--radius-xs); background:var(--line2); }