/* Banc de montage. La liste des projets suit le thème global (clair) ; l'éditeur est un espace
   de travail sombre : les tokens sont redéfinis localement sous .nle-editor et toutes les couleurs
   (y compris celles lues par les canvas via getComputedStyle) viennent d'ici. */

/* Titres du générique (29 octobre 2026) : même police que le rendu Skia côté serveur */
@font-face { font-family: 'Barlow Condensed'; src: url('/assets/fonts/BarlowCondensed-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/assets/fonts/BarlowCondensed-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face {
  font-family: 'Landasans';
  src: url('/assets/Landasans-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Liste des projets (thème global) ---------- */
.nle-list .nle-list-row { cursor: pointer; }
.nle-list .nle-list-row:hover td { background: var(--hover, rgba(0,0,0,.03)); }
.nle-list .nle-list-name { font-weight: 500; }
.nle-list .nle-col-actions { width: 1%; white-space: nowrap; text-align: right; }
.nle-list-empty { color: var(--text-2); padding: var(--space-4) 0; }
.nle-lock { color: var(--warn); }

/* ---------- Éditeur : tokens locaux ---------- */
/* Espace de travail sombre (23 octobre 2026, banc modernisé) : typographie, rayons, ombres et teintes repris de la charte
   du site (tokens.css), surfaces en couches, boutons et panneaux en pastilles. Les canvas lisent ces variables. */
.nle-editor {
  --bg: #0a0c12; --surface: #11141b; --surface-2: #181c26; --surface-3: #222736; --surface-4: #2c3243;
  --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.16);
  --text: #e8ebf1; --text-2: #a6afc0; --text-3: #6f7889;
  --accent: #4d8df0; --accent-strong: #7fb0ff; --accent-soft: rgba(77,141,240,.16); --brand: #0957d0; --on-accent: #ffffff;
  --hover: rgba(255,255,255,.06); --active: rgba(255,255,255,.1);
  --ok: #4cc38a; --warn: #f0b429; --danger: #ef5350; --info: #4d8df0; --focus: #7fb0ff;
  --focus-ring: 0 0 0 3px rgba(77,141,240,.35);
  --radius-s: 6px; --radius: 9px; --radius-l: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 4px 14px rgba(0,0,0,.35);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.55);
  /* Habillage repris de Final Cut Pro et DaVinci Resolve (1er novembre 2026) : clips bleu désaturé / vert sarcelle en
     pastilles arrondies avec bandeau de nom, contour de sélection jaune (Final Cut), tête de lecture rouge, timecodes
     en afficheur encastré (Resolve), barre de couleur de piste dans les en-têtes (Resolve). Le moteur n'a pas changé. */
  --nle-playhead: #E42A16;
  --nle-tl-bg: #090b10; --nle-tl-lane: #10131a; --nle-tl-lane-alt: #0d1016;
  --nle-clip-video: #3a66b4; --nle-clip-video-sel: #5584d6;
  --nle-clip-audio: #1f7a58; --nle-clip-audio-sel: #2c9a70;
  --nle-clip-image: #55627c; --nle-clip-image-sel: #6d7c99;
  --nle-clip-sel: #f6c84c; --nle-clip-band: rgba(0,0,0,.22);
  --nle-clip-text: #ffffff; --nle-wave: rgba(255,255,255,.62);
  --nle-io: rgba(77,141,240,.14); --nle-marker: #f0b429; --nle-ghost: rgba(77,141,240,.35);
  --nle-locked: rgba(255,255,255,.05); --nle-disabled: rgba(0,0,0,.5);
  --nle-monitor-msg-bg: #11141b;
  color-scheme: dark;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.nle-editor * { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--surface-4) transparent; }
.nle-editor ::-webkit-scrollbar { width: 10px; height: 10px; }
.nle-editor ::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 6px; border: 2px solid var(--surface); }
.nle-editor ::-webkit-scrollbar-track { background: transparent; }
.nle-editor :focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nle-error { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.nle-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.nle-wrap { word-break: break-all; }
.is-warn { color: var(--warn); }
.nle-link { color: var(--accent); margin-left: var(--space-2); }

/* boutons : pastilles sur surface, état enfoncé en teinte douce, primaire plein */
.nle-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 30px; padding: 0 11px; border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease), transform 120ms var(--ease-out);
}
.nle-btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
.nle-btn:active { background: var(--surface-4); transform: translateY(1px); }
.nle-btn:disabled { opacity: .4; cursor: default; transform: none; }
.nle-btn[aria-pressed="true"] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent-strong); }
.nle-btn-icon { width: 30px; padding: 0; }
.nle-btn .nle-icon { color: var(--text-2); }
.nle-btn:hover .nle-icon, .nle-btn[aria-pressed="true"] .nle-icon { color: inherit; }
.nle-btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.nle-btn-ghost:hover { background: var(--hover); border-color: transparent; color: var(--text); }
.nle-btn-ghost[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); border-color: transparent; }
.nle-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.nle-btn-primary .nle-icon { color: inherit; }
.nle-btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.nle-btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: transparent; }
.nle-btn-danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.nle-btn-sm { min-height: 26px; padding: 0 8px; font-size: 12px; }
.nle-btn-key { font-family: var(--mono); font-weight: 600; min-width: 30px; padding: 0 7px; }
.nle-icon { display: inline-flex; }
.nle-icon svg { display: block; }

/* champs */
.nle-input {
  min-height: 30px; padding: 0 9px; border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--bg); color: var(--text); font: inherit; font-size: 13px; width: 100%;
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.nle-input:hover { border-color: var(--border-strong); }
.nle-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.nle-input-sm { min-height: 26px; font-size: 12px; }
.nle-input-num { width: 72px; text-align: right; }
.nle-range { width: 100%; accent-color: var(--accent); }
.nle-editor input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }
.nle-editor select.nle-input { appearance: auto; }
.nle-form { display: flex; flex-direction: column; gap: var(--space-3); min-width: 320px; }
.nle-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-2); }
.nle-field .nle-input { color: var(--text); }

/* dialogues */
.nle-dialog { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-l); padding: 0; min-width: 360px; max-width: 90vw; box-shadow: var(--shadow-lg); }
.nle-dialog::backdrop { background: rgba(3, 5, 10, .6); backdrop-filter: blur(2px); }
.nle-dialog-form { padding: var(--space-5) var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.nle-dialog-title { margin: 0; font-family: var(--font-heading); font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.nle-dialog-text { margin: 0; color: var(--text-2); line-height: 1.45; }
.nle-dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.nle-dialog-light { background: var(--surface); color: var(--text); font-family: var(--font); }
.nle-dialog-light .nle-form { gap: var(--space-4); }
.nle-dialog-light .nle-btn { min-height: 36px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); background: transparent; font: inherit; cursor: pointer; }
.nle-dialog-light .nle-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.nle-dialog-light .nle-btn-ghost { border-color: transparent; color: var(--text-2); }
.nle-dialog-light .field > span { font-size: 13px; font-weight: 500; color: var(--text-2); }

/* ---------- Barre d'état ---------- */
.nle-statusbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); height: 48px; padding: 0 var(--space-3); background: linear-gradient(180deg, var(--surface-2), var(--surface)); border-bottom: 1px solid var(--border); flex: 0 0 auto; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 0 rgba(0,0,0,.35); position: relative; z-index: 2; }
.nle-statusbar-left, .nle-statusbar-right, .nle-statusbar-mid { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.nle-statusbar-right { justify-content: flex-end; }
.nle-project-name { background: transparent; border: 1px solid transparent; border-radius: var(--radius-s); color: var(--text); font: inherit; font-family: var(--font-heading); font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; padding: 3px 8px; min-width: 120px; max-width: 360px; }
.nle-project-name:hover { border-color: var(--border-strong); background: var(--hover); }
.nle-project-name:focus { border-color: var(--accent); outline: none; background: var(--surface-2); box-shadow: var(--focus-ring); }
.nle-save-state { color: var(--text-3); font-size: 12px; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* les boutons de panneaux restent sur une ligne : c'est le texte du milieu qui se tronque, jamais la barre qui s'empile */
.nle-statusbar-right, .nle-panel-toggles { flex-wrap: nowrap; white-space: nowrap; flex-shrink: 0; }
.nle-panel-toggles { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); margin-right: var(--space-2); }
.nle-panel-toggles .nle-btn { border-color: transparent; background: transparent; color: var(--text-2); min-height: 26px; }
.nle-panel-toggles .nle-btn:hover { background: var(--hover); color: var(--text); }
.nle-panel-toggles .nle-btn[aria-pressed="true"] { background: var(--surface-4); color: var(--text); box-shadow: var(--shadow-sm); }
.nle-panel-toggles .nle-btn[aria-pressed="true"] .nle-icon { color: var(--accent-strong); }
.nle-export-state { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--text-2); padding-left: var(--space-3); border-left: 1px solid var(--border); white-space: nowrap; }
.nle-progress { width: 120px; height: 6px; accent-color: var(--accent); }
.is-readonly .nle-project-name { pointer-events: none; }

/* ---------- Disposition ---------- */
.nle-workspace { display: grid; grid-template-rows: minmax(160px, 50%) 6px minmax(140px, 1fr); flex: 1 1 auto; min-height: 0; }
.nle-top { display: grid; grid-template-columns: 300px 6px minmax(0,1fr) minmax(0,1fr) 6px 300px; min-height: 0; }
.nle-bottom { display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
.nle-top > [hidden] { display: none !important; } /* panneau replié : hors de la grille, malgré le display des classes */
.nle-gutter { background: #05070a; position: relative; }
.nle-gutter-v { cursor: col-resize; }
.nle-gutter-h { cursor: row-resize; }
.nle-gutter::after { content: ''; position: absolute; inset: 0; margin: auto; background: var(--border-strong); border-radius: 2px; opacity: 0; transition: opacity 120ms var(--ease); }
.nle-gutter-v::after { width: 2px; height: 28px; }
.nle-gutter-h::after { height: 2px; width: 28px; }
.nle-gutter:hover::after, .nle-gutter:active::after { opacity: 1; background: var(--accent); }
.nle-panel-head { display: flex; align-items: center; gap: var(--space-2); height: 38px; padding: 0 var(--space-3); border-bottom: 1px solid var(--border); flex: 0 0 auto; min-width: 0; background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.nle-panel-title { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.nle-panel-title .nle-icon { color: var(--accent-strong); }

/* ---------- Chutier ---------- */
.nle-bin { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); border-right: 1px solid var(--border); }
.nle-bin .nle-panel-head { gap: var(--space-2); }
.nle-tabs { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: var(--radius); }
.nle-tab { background: transparent; border: 0; border-radius: 6px; color: var(--text-2); font: inherit; font-size: 12px; font-weight: 500; padding: 4px 9px; cursor: pointer; transition: background-color 120ms var(--ease), color 120ms var(--ease); }
.nle-tab:hover { color: var(--text); background: var(--hover); }
.nle-tab[aria-selected="true"] { color: var(--text); background: var(--surface-4); box-shadow: var(--shadow-sm); }
.nle-bin-search { flex: 1 1 auto; min-width: 60px; min-height: 28px; font-size: 12px; border-radius: 999px; padding-left: 12px; }
.nle-bin-url-bar { flex-wrap: wrap; }
.nle-bin-url-bar .nle-bin-url { flex: 1 1 160px; min-width: 120px; min-height: 28px; font-size: 12px; }
.nle-bin-check { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); cursor: pointer; }
.nle-bin-hint { color: var(--text-3); font-size: 11.5px; margin: 0 var(--space-1) var(--space-2); }
.nle-card-pending { opacity: .85; }
.nle-bin-body { flex: 1 1 auto; overflow: auto; padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.nle-bin-bar { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--text-2); min-height: 28px; }
.nle-bin-bar .nle-input { width: auto; }
.nle-bin-count { flex: 1 1 auto; }
.nle-bin-month { flex: 1 1 auto; text-align: center; text-transform: capitalize; color: var(--text); font-weight: 600; }
.nle-days { display: flex; flex-wrap: wrap; gap: 3px; }
.nle-day { width: 30px; height: 28px; border: 1px solid transparent; border-radius: var(--radius-s); background: var(--surface-2); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.nle-day:hover { background: var(--surface-3); }
.nle-day[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.nle-groups { display: flex; flex-direction: column; gap: var(--space-3); }
.nle-group-title { margin: 6px 2px 2px; font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.nle-cards { display: flex; flex-direction: column; gap: 3px; }
.nle-bin { --bin-thumb: 72px; } /* taille des vignettes du chutier, réglable (29 octobre 2026) */
.nle-card { animation: rise-in .2s var(--ease-out) both; transition: background-color .12s var(--ease), transform .12s var(--ease-out), box-shadow .12s var(--ease), border-color .12s var(--ease); display: grid; grid-template-columns: var(--bin-thumb, 72px) 1fr auto; gap: var(--space-2); align-items: center; padding: 5px; border-radius: var(--radius); border: 1px solid transparent; cursor: grab; }
.nle-card:hover { background: var(--surface-2); }
.nle-card.is-selected { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.nle-card:active { cursor: grabbing; }
.nle-card-thumb { position: relative; width: var(--bin-thumb, 72px); height: calc(var(--bin-thumb, 72px) * 0.5625); background: #000; border-radius: 5px; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.nle-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.nle-card-thumb-fallback { font-size: 11px; color: var(--text-3); }
/* Timelines du projet dans le chutier : vignette = cadre au format (16:9, 9:16, 1:1, 4:5) */
.nle-bin-section { margin-bottom: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.nle-bin-section-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.nle-card-seq { cursor: pointer; }
.nle-card-thumb-seq { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 32%, #0b0e14), #0b0e14); }
.nle-seq-frame { display: block; border: 1.5px solid rgba(255,255,255,.85); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.4); width: 32px; height: 18px; }
.nle-seq-frame-9-16 { width: 14px; height: 25px; }
.nle-seq-frame-1-1 { width: 22px; height: 22px; }
.nle-seq-frame-4-5 { width: 20px; height: 25px; }
.nle-card-dur { position: absolute; right: 3px; bottom: 3px; font-family: var(--mono); font-size: 10px; background: rgba(0,0,0,.72); color: #fff; padding: 1px 4px; border-radius: 4px; }
.nle-card-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nle-card-name { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nle-card-sub { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nle-status.is-direct { color: var(--text-3); }
.nle-status.is-ready { color: var(--ok); }
.nle-status.is-busy { color: var(--warn); }
.nle-status.is-missing { color: var(--danger); }
.nle-empty { color: var(--text-3); font-size: 12.5px; margin: var(--space-3) var(--space-1); }

/* ---------- Moniteurs ---------- */
.nle-monitor { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); border-right: 1px solid var(--border); position: relative; }
.nle-monitor[data-focus="true"] .nle-panel-head { box-shadow: inset 0 -2px 0 var(--accent); }
.nle-monitor-name { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
.nle-rate { font-family: var(--mono); font-size: 11px; font-weight: 700; color: #f6c84c; background: rgba(246,200,76,.14); padding: 1px 8px; border-radius: 999px; letter-spacing: .03em; }
.nle-rate:empty { display: none; }
.nle-monitor-view { flex: 1 1 auto; min-height: 0; background: #000; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
/* Visionneuse à la Final Cut : scène noire en pastille arrondie, légèrement en retrait du panneau (1er novembre 2026) */
.nle-editor .nle-monitor > .nle-monitor-view, .nle-editor .nle-pgm-stage > .nle-monitor-view { margin: 8px 10px 0; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 8px 24px -8px rgba(0,0,0,.7); }
.nle-editor .nle-monitor-view.is-fullscreen { margin: 0; border-radius: 0; box-shadow: none; }
.nle-editor .nle-monitor { background: linear-gradient(180deg, var(--surface) 0%, #0d1017 100%); }
.nle-editor .nle-vu { margin: 8px 10px 0 0; border-left: 0; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
/* Poignées du moniteur source (glisser : son seul / image seule) et plein écran du programme */
.nle-src-handles { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; opacity: .55; transition: opacity .15s var(--ease); }
.nle-monitor-view:hover .nle-src-handles, .nle-src-handles:focus-within { opacity: 1; }
.nle-src-handle { cursor: grab; background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.25); color: #fff; backdrop-filter: blur(4px); }
.nle-src-handle:active { cursor: grabbing; }
.nle-pgm-full { position: absolute; right: 8px; bottom: 8px; opacity: 0; background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.25); color: #fff; transition: opacity .15s var(--ease); backdrop-filter: blur(4px); }
.nle-monitor-view:hover .nle-pgm-full, .nle-pgm-full:focus-visible { opacity: 1; }
.nle-monitor-view.is-fullscreen { background: #000; }
.nle-monitor-view.is-fullscreen .nle-program-canvas { max-width: 100vw; max-height: 100vh; }
/* Scène programme : la vue et, à sa droite, le VU-mètre (masquable par la bascule « VU ») */
.nle-pgm-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; }
.nle-pgm-stage > .nle-monitor-view { flex: 1 1 auto; }
.nle-vu { animation: fade-in .2s var(--ease-out) both; flex: 0 0 52px; width: 52px; background: #0b0e14; border-left: 1px solid var(--border); position: relative; }
.nle-vu[hidden] { display: none; }
.nle-vu-canvas { display: block; width: 100%; height: 100%; }
.nle-source-video, .nle-program-canvas { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; display: block; }
.nle-program-canvas { width: auto; height: auto; }
.nle-monitor-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-2); background: var(--surface); font-size: 13px; padding: var(--space-3); text-align: center; }
.nle-monitor-msg[hidden] { display: none; }
.nle-scrub { position: relative; height: 8px; margin: 10px var(--space-3) 0; background: var(--surface-3); border-radius: 999px; cursor: pointer; box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
.nle-scrub:hover { background: var(--surface-4); }
.nle-scrub-range { position: absolute; top: 0; bottom: 0; background: var(--accent); opacity: .55; border-radius: 999px; }
.nle-scrub-range[hidden] { display: none; }
.nle-scrub-head { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--nle-playhead, #E42A16); box-shadow: 0 0 0 1px rgba(0,0,0,.4); } /* repli : hors du banc (lecteur des émissions, du fonds), la variable n'existe pas */
.nle-monitor-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2); padding: 6px var(--space-3); }
.nle-monitor-bar .nle-tc:last-child { text-align: right; }
.nle-tc { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.nle-tc-dim { color: var(--text-3); }
/* Afficheurs de timecode à la Resolve : encastrés, chiffres espacés (1er novembre 2026) */
.nle-editor .nle-monitor-bar > .nle-tc { display: inline-block; padding: 3px 9px; border-radius: 6px; background: #07090d; border: 1px solid var(--border); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); letter-spacing: .05em; font-size: 12.5px; font-weight: 500; color: #e9ecf2; }
.nle-editor .nle-monitor-bar > .nle-tc-dim { color: var(--text-3); }
.nle-editor .nle-monitor-bar > .nle-tc:last-child { justify-self: end; }
.nle-transport { display: flex; gap: 3px; justify-content: center; }
.nle-transport .nle-btn { min-width: 32px; min-height: 30px; border-color: transparent; background: transparent; }
.nle-transport .nle-btn:hover { background: var(--surface-3); }
.nle-transport .nle-btn .nle-icon { color: var(--text); }
/* Transport en pastille (Final Cut) : fond discret, lecture au milieu un peu plus grande */
.nle-editor .nle-monitor-bar .nle-transport { gap: 1px; padding: 2px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.nle-editor .nle-monitor-bar .nle-transport .nle-btn { border-radius: 999px; min-height: 28px; }
.nle-editor .nle-monitor-bar .nle-transport .nle-btn:hover { background: var(--surface-4); }
.nle-editor .nle-monitor-bar .nle-transport .nle-btn[title^="Lecture"], .nle-editor .nle-monitor-bar .nle-transport .nle-btn[title^="Pause"] { min-width: 40px; }
.nle-editor .nle-monitor-bar .nle-transport .nle-btn[title^="Lecture"] .nle-icon svg, .nle-editor .nle-monitor-bar .nle-transport .nle-btn[title^="Pause"] .nle-icon svg { width: 18px; height: 18px; }
.nle-monitor-actions { display: flex; gap: var(--space-2); justify-content: center; padding: 0 var(--space-3) var(--space-2); }
.nle-media-host { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.nle-media-host video { width: 1px; height: 1px; }
/* iOS : l'hôte reste dans l'écran, petit et presque transparent, sinon WebKit ne décode plus les images (son seul) */
.nle-media-host.is-ios { position: fixed; left: 6px; bottom: 6px; width: 64px; height: 36px; opacity: .02; z-index: 1; overflow: hidden; pointer-events: none; }
.nle-media-host.is-ios video { width: 64px; height: 36px; object-fit: cover; }

/* ---------- Inspecteur ---------- */
.nle-inspector { overflow: auto; background: var(--surface); padding: var(--space-2) var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.nle-insp-section { display: flex; flex-direction: column; gap: 5px; padding: var(--space-2) var(--space-3) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.nle-insp-title { display: flex; align-items: center; gap: 7px; margin: 2px 0 4px; font-family: var(--font-heading); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--text); }
.nle-insp-title::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-soft); }
.nle-insp-row { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: var(--space-2); min-height: 26px; font-size: 12.5px; }
.nle-insp-row-col { grid-template-columns: 1fr; }
.nle-insp-label { color: var(--text-2); }
.nle-insp-value { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nle-insp-value.nle-wrap { white-space: normal; }
.nle-insp-row.is-warn .nle-insp-value { color: var(--warn); }
.nle-insp-num { display: inline-flex; align-items: center; gap: 4px; }
.nle-unit { color: var(--text-3); font-size: 11px; }
.nle-insp-gain { display: grid; grid-template-columns: 1fr 64px; align-items: center; gap: 6px; }
.nle-insp-inline { display: flex; gap: 4px; align-items: center; }
.nle-insp-origin { color: var(--text-3); font-size: 11px; }
.nle-insp-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.nle-insp-note { margin: 0; font-size: 12px; color: var(--text-3); line-height: 1.4; }
.nle-inspector .nle-input-sm { width: 100%; }
.nle-inspector .nle-input { background: var(--surface); }

/* ---------- Barre d'outils timeline ---------- */
.nle-toolbar { display: flex; align-items: center; gap: var(--space-2); height: 42px; padding: 0 var(--space-2); border-bottom: 1px solid var(--border); flex: 0 0 auto; background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.nle-toolbar-group { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.nle-toolbar-group .nle-btn { border-color: transparent; background: transparent; min-height: 26px; }
.nle-toolbar-group .nle-btn:hover { background: var(--hover); }
.nle-toolbar-group .nle-btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.nle-toolbar-group .nle-btn[aria-pressed="true"] .nle-icon { color: inherit; }
.nle-toolbar-spacer { flex: 1 1 auto; }
.nle-tc-input { width: 118px; min-height: 28px; text-align: center; background: #07090d; border: 1px solid var(--border); border-radius: var(--radius-s); color: #e9ecf2; font-size: 13px; letter-spacing: .05em; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.nle-tc-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

/* ---------- Timeline ---------- */
.nle-tl { display: grid; grid-template-columns: 150px 1fr; grid-template-rows: minmax(0, 1fr) 12px; flex: 1 1 auto; min-height: 0; background: var(--nle-tl-bg); }
.nle-tl-hscroll-corner { background: var(--surface); border-right: 1px solid var(--border-strong); border-top: 1px solid var(--border); }
.nle-tl-hscroll { overflow-x: scroll; overflow-y: hidden; height: 12px; background: var(--surface); border-top: 1px solid var(--border); scrollbar-width: thin; scrollbar-color: var(--surface-4) transparent; }
.nle-tl-hscroll::-webkit-scrollbar { height: 12px; }
.nle-tl-hscroll::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 6px; border: 3px solid var(--surface); }
.nle-tl-hscroll::-webkit-scrollbar-track { background: transparent; }
.nle-tl-hscroll-inner { height: 1px; }
.nle-tl-headers { position: relative; overflow: hidden; border-right: 1px solid var(--border-strong); background: var(--surface); }
.nle-tl-head-ruler { height: var(--nle-ruler-h, 28px); display: flex; align-items: center; justify-content: flex-end; padding: 0 4px; border-bottom: 1px solid var(--border-strong); background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); position: relative; z-index: 1; }
.nle-tl-head-body { position: relative; height: calc(100% - var(--nle-ruler-h, 28px)); overflow: hidden; }
.nle-tl-head { position: absolute; left: 0; right: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 6px 0 12px; border-bottom: 1px solid var(--border); background: linear-gradient(90deg, var(--surface-2), var(--surface)); }
/* barre de couleur de piste à la Resolve : bleu vidéo, vert audio, éteinte sur une piste désactivée */
.nle-tl-head::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--nle-clip-video-sel); }
.nle-tl-head[data-kind="audio"]::before { background: var(--nle-clip-audio-sel); }
.nle-tl-head[data-kind="subtitle"]::before { background: #3fb3a4; }
/* Piste de sous-titres dans le programme (3 novembre 2026) : zone cliquable sur la réplique dessinée, champ de saisie à sa place, bouton « + » quand rien sous la tête */
.nle-pgm-sub-hit { position: absolute; z-index: 2; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 6px; cursor: text; outline: none; }
.nle-pgm-sub-hit:hover, .nle-pgm-sub-hit:focus-visible { box-shadow: inset 0 0 0 1px rgba(63,179,164,.75); background: rgba(63,179,164,.08); }
.nle-pgm-sub-hit[hidden] { display: none; }
.nle-pgm-sub-edit { position: absolute; z-index: 4; box-sizing: border-box; margin: 0; border: 2px solid #3fb3a4; border-radius: 4px; background: rgba(0,0,0,.72); color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; text-align: center; resize: none; overflow: hidden; outline: none; box-shadow: 0 4px 18px rgba(0,0,0,.5); }
.nle-pgm-sub-edit[hidden] { display: none; }
.nle-pgm-sub-add { position: absolute; left: 8px; bottom: 8px; z-index: 2; opacity: 0; background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.25); color: #fff; transition: opacity .15s var(--ease); backdrop-filter: blur(4px); }
.nle-monitor-view:hover .nle-pgm-sub-add, .nle-pgm-sub-add:focus-visible { opacity: 1; }
.nle-pgm-sub-add[hidden] { display: none !important; }
.nle-tl-head.is-off::before { opacity: .3; }
/* poignée de la frontière vidéo / audio */
.nle-btn-trackh { font-size: 11px; letter-spacing: -1px; }
.nle-tl-split { position: absolute; left: 0; right: 0; height: 13px; cursor: row-resize; z-index: 2; touch-action: none; } /* zone de saisie élargie (29 octobre 2026) */
.nle-tl-split::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--border-strong); }
.nle-tl-split::after { content: ''; position: absolute; left: 50%; top: 4px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--border-strong); opacity: .9; }
.nle-tl-split:hover::before, .nle-tl-split:active::before { height: 3px; top: 5px; background: var(--accent); }
.nle-tl-split:hover::after, .nle-tl-split:active::after { background: var(--accent); }
.nle-tl-head.is-locked { background: repeating-linear-gradient(45deg, transparent 0 8px, var(--nle-locked) 8px 12px); }
.nle-tl-head.is-off .nle-tl-head-name { color: var(--text-3); }
.nle-tl-head.is-solo .nle-tl-head-name { color: var(--accent-strong); }
.nle-tl-head-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12px; letter-spacing: .03em; color: var(--text-2); }
.nle-tl-head:hover .nle-tl-head-name { color: var(--text); }
.nle-tl-head-btns { display: flex; gap: 1px; }
.nle-tl-head-btns .nle-btn { min-height: 24px; width: 26px; padding: 0; border-color: transparent; background: transparent; }
.nle-tl-head-btns .nle-btn:hover { background: var(--surface-3); }
.nle-tl-head-btns .nle-btn-key { width: auto; min-width: 24px; padding: 0 5px; font-size: 11px; }
.nle-tl-lanes { position: relative; overflow: hidden; min-width: 0; }
.nle-tl-canvas { display: block; outline: none; }
.nle-tl-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }

@media (prefers-reduced-motion: no-preference) {
  .nle-btn, .nle-tab, .nle-card, .nle-day { transition: background-color 120ms, color 120ms, border-color 120ms; }
}

@media (max-width: 1100px) {
  /* les colonnes de la grille sont posées par applyLayout (index.js), qui réduit chutier et inspecteur à 240 px sous
     1100 px : la règle !important d'ici forçait six colonnes même panneaux repliés, et le moniteur programme restait
     coincé dans un quart de la largeur (signalement 132, 27 octobre 2026) */
  .nle-insp-row { grid-template-columns: 80px 1fr; }
}

.nle-hint { font-size: 12px; color: var(--text-2); margin: 2px 0 0; line-height: 1.4; }

/* ---------- Chutier : progs ---------- */
.nle-card-actions { display: flex; align-items: center; gap: 2px; }
.nle-card-actions:empty { display: none; }
.nle-card[draggable="false"] { cursor: default; }
.nle-bin-bar select.nle-input-sm { max-width: 160px; }

/* Menu contextuel */
.nle-ctx { animation: menu-in .13s var(--ease-out) both; transform-origin: top left; position: fixed; z-index: 1000; min-width: 220px; padding: 5px; max-height: calc(100vh - 12px); overflow-y: auto; overscroll-behavior: contain; /* long menu (Effets) : défile au lieu de sortir de l'écran, 29 octobre 2026 */ background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 13px; color: var(--text); }
.nle-ctx-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nle-ctx-item { transition: background-color .1s var(--ease); }
.nle-ctx-item:hover, .nle-ctx-item:focus-visible { background: var(--hover); outline: none; }
.nle-ctx-item[disabled] { opacity: .45; cursor: default; }
.nle-ctx-item.is-danger { color: var(--danger); }
.nle-ctx-item kbd { font: 11px var(--mono); color: var(--text-3); }
.nle-ctx-sep { border: 0; border-top: 1px solid var(--border); margin: 4px 6px; }
.nle-ctx-header { padding: 6px 10px 2px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.nle-ctx-header:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 8px; }

/* ---------- Inspecteur : effets ---------- */
.nle-fx { display: flex; flex-direction: column; gap: 3px; padding: 4px 6px 6px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface-2); }
.nle-fx.is-off { opacity: .6; }
.nle-fx-head { display: flex; align-items: center; gap: 6px; min-height: 24px; }
.nle-fx-name { flex: 1 1 auto; font-weight: 500; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nle-fx-btns { display: flex; gap: 0; }
.nle-fx-btns .nle-btn { min-height: 22px; min-width: 22px; padding: 0 4px; }
.nle-fx-param { min-height: 22px; }
.nle-fx-param .nle-insp-label { font-size: 12px; }
.nle-fx-val { font-size: 11.5px; text-align: right; }

/* ---------- Lecteur de précision partagé (public/js/player.js) ---------- */
.player { border: 1px solid var(--border); border-right: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; outline: none; }
.player:focus-visible { box-shadow: 0 0 0 2px var(--focus); }
.player-view { aspect-ratio: 16 / 9; cursor: pointer; }
.player-view .nle-monitor-msg { pointer-events: none; }
.player-tc-group { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.player-marks { align-items: center; flex-wrap: wrap; padding-top: var(--space-1); }
.player-tc-field { width: 108px; text-align: center; }
.player .nle-monitor-bar, .player .nle-monitor-actions { background: var(--surface); }
.nle-field-check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
.nle-field-check input[type="checkbox"] { margin: 0; }

/* ---------- Téléphone et tablette étroite : montage tactile ---------- */
.nle-mobile { display: none; }
.nle-sheet-scrim { display: none; }
@media (max-width: 899px) {
  .nle-statusbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; padding: 0 6px; height: 44px; }
  .nle-statusbar-mid { display: none; }
  .nle-project-name { min-width: 0; max-width: 100%; }
  /* La gouttière masquée ne prend plus de cellule : deux rangées, moniteur puis timeline. */
  .nle-workspace { grid-template-rows: auto minmax(0, 1fr) !important; } /* les gouttières posent un style en ligne */
  .nle-top { grid-template-columns: none !important; }
  .nle-gutter { display: none; }
  .nle-top { display: flex; flex-direction: column; position: relative; }
  .nle-top > .nle-monitor { display: none; }
  .nle-top > .nle-monitor-program { display: flex; }
  .nle-editor[data-mon="source"] .nle-top > .nle-monitor-source { display: flex; }
  .nle-editor[data-mon="source"] .nle-top > .nle-monitor-program { display: none; }
  .nle-top .nle-monitor-view { aspect-ratio: 16 / 9; flex: 0 0 auto; max-height: 38vh; }
  .nle-top .nle-pgm-stage { flex: 0 0 auto; }
  .nle-top .nle-vu { display: none; }
  .nle-monitor-bar, .nle-monitor-actions { flex-wrap: wrap; row-gap: 4px; }
  .nle-monitor-actions .nle-btn, .nle-transport .nle-btn { min-height: 40px; min-width: 40px; }
  .nle-bin, .nle-inspector { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: min(72vh, 620px); z-index: 60; display: none; border-top: 1px solid var(--border-strong); border-right: 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .55); }
  .nle-editor[data-sheet="bin"] .nle-bin, .nle-editor[data-sheet="inspector"] .nle-inspector { display: flex; }
  .nle-editor[data-sheet] .nle-sheet-scrim { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, .45); }
  .nle-toolbar { flex-wrap: wrap; gap: 4px; padding: 4px; height: auto; }
  .nle-toolbar .nle-btn { min-height: 40px; min-width: 40px; }
  .nle-toolbar-spacer { display: none; }
  .nle-toolbar-group:nth-child(3) { display: none; } /* marqueur, désolidariser : au clavier ou en menu */
  .nle-toolbar .nle-btn[title^="Zoom arrière"], .nle-toolbar .nle-btn[title^="Zoom avant"] { display: none; } /* pincement */
  .nle-mobile { display: flex; gap: 4px; }
  .nle-tl { grid-template-columns: 84px 1fr; }
  .nle-tl-head { padding: 0 4px 0 6px; font-size: 11px; gap: 2px; }
  .nle-card { grid-template-columns: var(--bin-thumb, 64px) 1fr; }
  .nle-card > :last-child { grid-column: 1 / -1; }
}
.nle-col-thumb { width: 104px; }
.nle-thumb { display: block; width: 96px; height: 54px; object-fit: cover; border-radius: 4px; background: #000; }

/* Chutier : sous-clips (cartes indentées sous leur média, glissables) */
.nle-subclip { margin-left: 14px; border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.nle-subclip .nle-card-thumb { width: calc(var(--bin-thumb, 72px) - 14px); }
.nle-subclip-name { cursor: text; }
.nle-subclip-rename { width: 100%; }
@media (max-width: 899px) { .nle-subclip { margin-left: 8px; } }

/* Inspecteur : édition des répliques d'un plan */
.nle-dialog-wide { width: min(760px, 92vw); }
.nle-srt-form { max-height: 60vh; overflow: auto; }
.nle-srt-cue { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px; align-items: start; }
.nle-srt-tc { font-size: 11px; color: var(--text-3); padding-top: 6px; }
.nle-srt-text { width: 100%; resize: vertical; font: inherit; font-size: 13px; }

/* recadrage intelligent (inspecteur) */
.nle-reframe { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 2px; }
.nle-reframe-subjects { display: flex; flex-direction: column; gap: 4px; }
.nle-reframe-faces { display: flex; flex-wrap: wrap; gap: 6px; }
.nle-reframe-face { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text-2); font: inherit; font-size: 11px; cursor: pointer; min-width: 48px; }
.nle-reframe-face img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; background: #000; }
.nle-reframe-auto { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; background: var(--surface-3); font-size: 11px; }
.nle-reframe-face.is-selected { border-color: var(--accent); color: var(--text); }
/* plans (segments entre deux coupes) du recadrage intelligent */
.nle-reframe-segs { display: flex; flex-direction: column; gap: 2px; margin: 2px 0; max-height: 220px; overflow: auto; }
.nle-reframe-segrow { display: flex; align-items: stretch; gap: 2px; }
.nle-reframe-segrow > .nle-reframe-seg { flex: 1; min-width: 0; }
.nle-reframe-seg-x { flex: 0 0 22px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface-2); color: var(--text-3); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; }
.nle-reframe-seg-x:hover { color: var(--danger, #e5484d); border-color: currentColor; }
.nle-reframe-seg { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 6px; padding: 3px 6px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface-2); color: var(--text-2); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.nle-reframe-seg:hover { border-color: var(--text-3); }
.nle-reframe-seg.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); color: var(--text); }
.nle-reframe-seg .nle-reframe-seg-n { font-weight: 600; color: var(--text); }
.nle-reframe-seg .nle-reframe-seg-subject { font-size: 11px; color: var(--text-3); }
.nle-reframe-seg.is-selected .nle-reframe-seg-subject { color: var(--text); }
.nle-reframe-choice { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--accent); border-radius: var(--radius-s); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }

/* Timelines du projet : vrai bandeau d'onglets (une ligne, onglet actif souligné, « + » en bout, menu ⋯ sur l'actif) */
.nle-seqbar { display: flex; align-items: flex-end; gap: 2px; padding: 6px 8px 0; background: linear-gradient(180deg, var(--bg), var(--surface)); border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; min-height: 36px; }
.nle-seqbar::-webkit-scrollbar { height: 6px; }
.nle-seqtab { transition: background-color .14s var(--ease), color .14s var(--ease); display: inline-flex; align-items: center; gap: 2px; position: relative; flex: 0 0 auto; max-width: 260px; border-radius: 7px 7px 0 0; color: var(--text-2); transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease); }
.nle-seqtab:hover { background: var(--hover); color: var(--text); }
.nle-seqtab.is-active { background: var(--surface-2); color: var(--text); }
.nle-seqtab.is-active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
.nle-seqtab-name { border: 0; background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 500; padding: 7px 10px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; border-radius: 7px 7px 0 0; }
.nle-seqtab.is-active .nle-seqtab-name { font-weight: 600; }
.nle-seqtab-menu { border: 0; background: transparent; color: var(--text-3); font: inherit; font-size: 14px; line-height: 1; padding: 6px 8px 6px 2px; cursor: pointer; border-radius: 6px; }
.nle-seqtab-menu:hover { color: var(--text); background: var(--active); }
.nle-seqbar > .nle-btn { align-self: center; margin-left: 4px; }

/* ---------- Export : dialogue en sections, cartes de format ; mise en file dans l'encodeur ---------- */
.nle-dialog-export { min-width: 560px; max-width: 720px; }
.nle-export { display: flex; flex-direction: column; gap: var(--space-4); }
.nle-export-sec { display: flex; flex-direction: column; gap: var(--space-2); }
.nle-export-sec h3 { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.nle-export-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.nle-export-row[hidden] { display: none; } /* les champs PeerTube restent cachés tant que la case n'est pas cochée (27 octobre 2026) */
.nle-export-formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nle-export-card { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .12s var(--ease), background-color .12s var(--ease), transform .12s var(--ease-out), box-shadow .12s var(--ease); }
.nle-export-card:hover:not([disabled]) { border-color: var(--accent); transform: translateY(-1px); }
.nle-export-card.is-on { border-color: var(--accent); background: var(--blue-light); box-shadow: inset 0 0 0 1px var(--accent); }
.nle-export-card[disabled] { opacity: .45; cursor: not-allowed; }
.nle-export-card strong { font-size: 14px; }
.nle-export-card span { font-size: 12px; color: var(--text-2); }
.nle-export-card em { font-size: 11px; font-style: normal; color: var(--text-3); }
.nle-queue-list { display: flex; flex-direction: column; gap: 6px; }
.nle-queue-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.nle-queue-row:has(input:checked) { border-color: var(--accent); background: var(--blue-light); }
.nle-queue-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nle-queue-name small { font-weight: 400; color: var(--text-3); }
.nle-queue-subs { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
/* Suivi d'export : carte flottante */
.nle-export-panel { position: absolute; right: 14px; bottom: 14px; z-index: 40; width: min(420px, calc(100% - 28px)); padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border-strong); box-shadow: 0 16px 40px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 8px; font-size: 13px; animation: rise-in .22s var(--ease-out) both; }
.nle-export-panel[hidden] { display: none; }
.nle-export-panel.is-ok { border-color: color-mix(in srgb, var(--ok) 60%, transparent); }
.nle-export-panel.is-warn { border-color: color-mix(in srgb, var(--danger) 60%, transparent); }
.nle-export-head { display: flex; align-items: center; gap: 8px; }
.nle-export-head strong { white-space: nowrap; }
.nle-export-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.nle-export-close { margin-left: auto; }
.nle-export-progress { display: flex; align-items: center; gap: 10px; }
.nle-export-bar { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.nle-export-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent)); transition: width .4s var(--ease-out); }
.nle-export-pct { min-width: 4ch; text-align: right; }
.nle-export-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--text-2); font-size: 12px; }
.nle-export-meta.is-warn { color: var(--danger); }
.nle-export-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.nle-export-actions:empty { display: none; }
.nle-btn.nle-btn-sm, a.nle-btn { display: inline-flex; align-items: center; text-decoration: none; }

/* Formats liés : bascule 16:9 ⇄ 9:16 à droite des onglets de timeline */
.nle-fmt-toggle { display: inline-flex; margin-left: auto; border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px; gap: 2px; background: var(--surface-2); }
.nle-fmt { border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 11.5px; font-weight: 600; padding: 2px 10px; border-radius: 999px; cursor: pointer; transition: background-color .12s var(--ease), color .12s var(--ease); }
.nle-fmt:hover { color: var(--text); background: var(--hover); }
.nle-fmt.is-on { background: var(--accent); color: #fff; }
.nle-fmt.is-empty { color: var(--text-3); font-weight: 500; }
.nle-queue-opts { display: inline-flex; gap: 6px; }

/* Export : étendue saisie (début / fin en timecode) */
.nle-input-tc { width: 12ch; font-variant-numeric: tabular-nums; }
.nle-input.is-invalid { border-color: var(--danger, #e5484d); }

/* Chutier : dépôt de fichiers depuis le Finder */
.nle-bin { position: relative; }
.nle-bin.is-dropping::after { content: 'Déposer ici : les fichiers sont copiés dans Mon espace puis ajoutés au chutier'; position: absolute; inset: 6px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; border: 2px dashed var(--accent, #4d8df0); border-radius: 8px; background: rgba(77,141,240,.12); color: var(--text, #fff); font-weight: 500; pointer-events: none; z-index: 5; }
.nle-bin-upload { margin: 6px 8px; padding: 6px 8px; border-radius: 6px; background: rgba(77,141,240,.15); font-size: 12px; }
.nle-bin-upload { display: grid; gap: 4px; }
.nle-bin-upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nle-bin-upload-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.nle-bin-upload-fill { height: 100%; width: 0; background: #4d8df0; transition: width .2s linear; }
.nle-bin-upload-stats { opacity: .8; font-variant-numeric: tabular-nums; }

/* Panneau d'export : une carte par tâche (formats multiples), empilées */
.nle-export-panel .nle-export-card { padding: 8px 0; border-top: 1px solid var(--border); }
.nle-export-panel .nle-export-card:first-child { border-top: 0; padding-top: 0; }
.nle-export-total { display: grid; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.nle-export-total.is-single { padding-bottom: 4px; border-bottom: 0; }
.nle-export-total .nle-export-head strong { font-size: 14px; }
.nle-export-bar.is-total { height: 12px; }
.nle-export-item { display: grid; gap: 5px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.nle-export-item .nle-export-name { color: var(--text); font-weight: 600; }
.nle-export-state { font-style: normal; font-size: 11px; color: var(--text-3); white-space: nowrap; }
.nle-export-item.is-active { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.nle-export-item.is-ok .nle-export-state { color: var(--ok, #2f9e44); }
.nle-export-item.is-warn .nle-export-state { color: var(--danger, #e5484d); }
.nle-export-item.is-muted { opacity: .7; }
.nle-field-wide { grid-column: 1 / -1; }

/* Mix magique : rôle du son dans l'inspecteur (22 octobre 2026) */
.nle-role-seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.nle-role-btn { appearance: none; border: 0; border-right: 1px solid var(--border); background: transparent; color: var(--text-2); font: inherit; font-size: 12px; padding: 4px 8px; cursor: pointer; }
.nle-role-btn:last-child { border-right: 0; }
.nle-role-btn:hover { background: var(--surface-2, rgba(255,255,255,.06)); color: var(--text); }
.nle-role-btn.is-on { background: var(--accent); color: #fff; }
.nle-insp-note.is-warn { color: var(--warn, #e0a030); }
.nle-mix-form { display: grid; gap: 10px; min-width: min(460px, 80vw); }
.nle-mix-field { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 10px; font-size: 13px; }
.nle-mix-report { max-height: 60vh; overflow: auto; }
.nle-mix-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.nle-mix-table th { text-align: left; font-weight: 600; color: var(--text-3); padding: 4px 8px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface, inherit); }
.nle-mix-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.nle-mix-table td:first-child { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nle-mix-table tr.is-warn td:last-child { color: var(--warn); }

/* Double image du raccord et du glissement (22 octobre 2026) */
.nle-twoup { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #000; z-index: 3; pointer-events: none; }
.nle-twoup[hidden] { display: none; }
.nle-twoup-side { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; }
.nle-twoup-video, .nle-twoup-img { width: 100%; height: 100%; object-fit: contain; }
.nle-twoup-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.nle-twoup-label { font-weight: 600; }
.nle-twoup-side.is-black::after { content: 'Noir'; color: rgba(255,255,255,.4); font-size: 12px; }

/* Liste des montages en cartes (28 octobre 2026) */
.nle-list-sub { margin: 2px 0 0; color: var(--text-2); font-size: 13px; }
.nle-list-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0 var(--space-4); }
.nle-list-search { flex: 1 1 220px; max-width: 360px; }
.nle-list-sort { width: auto; }
.nle-list-count { color: var(--text-3); font-size: 12.5px; margin-left: auto; }
.nle-scope { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.nle-scope-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; }
.nle-scope-btn:hover { color: var(--text); }
.nle-scope-btn.is-on { background: var(--accent); color: #fff; font-weight: 600; }
.nle-scope-n { font-size: 11.5px; opacity: .8; font-variant-numeric: tabular-nums; }
.nle-proj-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.nle-proj-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); background: var(--surface); overflow: hidden; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.nle-proj-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.10)); border-color: var(--accent); }
.nle-proj-card.is-locked { opacity: .85; }
.nle-proj-card-media { position: relative; aspect-ratio: 16 / 9; background: var(--surface-3, #111); }
.nle-proj-card-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.nle-proj-card-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 13px; background: var(--surface-2); }
.nle-proj-card-dur, .nle-proj-card-lock { position: absolute; bottom: 8px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; background: rgba(0,0,0,.65); backdrop-filter: blur(4px); }
.nle-proj-card-dur { right: 8px; }
.nle-proj-card-lock { left: 8px; background: rgba(180, 40, 40, .8); }
.nle-proj-card-lock.is-me { background: rgba(30, 110, 60, .85); }
.nle-proj-card-body { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3) var(--space-3) var(--space-2); }
.nle-proj-card-name { font-weight: 600; font-size: 14.5px; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.nle-proj-card-name:hover { text-decoration: underline; }
.nle-proj-card-facts { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--text-2); font-size: 12.5px; }
.nle-proj-card-chip { padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 11.5px; font-weight: 500; }
.nle-proj-card-dates { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--text-3); font-size: 12px; }
.nle-proj-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
.nle-proj-card-owner { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; font-weight: 500; }

/* Médias sans image (radios) : le visuel audio couvre la vidéo invisible (signalement 137, 28 octobre 2026) */
.player-view.is-audio .nle-source-video { opacity: 0; pointer-events: none; }

/* Inspecteur : clips générés (29 octobre 2026) */
.nle-insp-text { width: 100%; font: inherit; font-size: 12px; resize: vertical; }
.nle-insp-select { font: inherit; font-size: 12px; }
.nle-insp-color { width: 28px; height: 22px; padding: 0; border: 1px solid var(--nle-border, #333); background: none; }
.nle-insp-check { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }

/* Projet à partir d'un modèle (29 octobre 2026) */
.nle-tpl-items { display: flex; flex-direction: column; gap: 4px; max-height: 30vh; overflow: auto; }
.nle-tpl-item { display: flex; gap: 8px; align-items: center; font-size: 12.5px; }

/* Chutier : dossiers et réglage de la taille des vignettes (29 octobre 2026) */
/* Chutier : arborescence à la Finder (29 octobre 2026). Retour d'Antoine le même jour : indentation peu lisible, pas de
   triangle visible → retrait de 22 px par niveau, lignes-guides verticales par niveau, triangle toujours affiché,
   dossier ouvert avec icône ouverte, médias rattachés par un trait au dossier parent, « tout déplier / replier ». */
.nle-tree { --tree-step: 22px; --tree-line: color-mix(in srgb, var(--text-3) 45%, transparent); display: flex; flex-direction: column; gap: 1px; padding: 2px 0 8px; min-height: 80px; border-radius: var(--radius); }
.nle-tree.is-drop { outline: 2px dashed var(--accent); outline-offset: -2px; }
.nle-tree-row { position: relative; display: grid; grid-template-columns: 18px 18px 1fr auto; align-items: center; gap: 4px; padding: 5px 6px 5px calc(8px + var(--lvl, 0) * var(--tree-step)); border-radius: 6px; font-size: 12.5px; color: var(--text-2); cursor: default; user-select: none; border: 1px solid transparent;
  background-image: repeating-linear-gradient(to right, transparent 0 15px, var(--tree-line) 15px 16px, transparent 16px var(--tree-step)); background-size: calc(var(--lvl, 0) * var(--tree-step)) 100%; background-repeat: no-repeat; background-position: 8px 0; }
.nle-tree-row:hover { background-color: var(--surface-2); color: var(--text); }
.nle-tree-row.is-selected { background-color: var(--accent-soft); color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.nle-tree-row.is-drop { outline: 2px dashed var(--accent); outline-offset: -1px; }
.nle-tree-row.is-dragging { opacity: .5; }
.nle-tree-root { grid-template-columns: 18px 1fr auto auto auto; font-weight: 600; color: var(--text); background-image: none; border-bottom: 1px solid var(--border); border-radius: 6px 6px 0 0; margin-bottom: 2px; }
.nle-tree-tools { display: inline-flex; gap: 0; }
.nle-tree-tools .nle-btn { font-size: 10px; letter-spacing: -1px; color: var(--text-3); }
.nle-tree-tri { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; color: var(--text-2); padding: 0; cursor: pointer; transition: transform .12s var(--ease-out), background-color .12s; }
.nle-tree-tri:hover { background: var(--surface-3, var(--surface-2)); color: var(--text); border-color: var(--accent); }
.nle-tree-row.is-open > .nle-tree-tri { transform: rotate(90deg); }
.nle-tree-tri.is-leaf { visibility: visible; opacity: .3; cursor: default; }
.nle-tree-ico { display: inline-flex; color: var(--accent); }
.nle-tree-row.is-open > .nle-tree-ico { color: color-mix(in srgb, var(--accent) 75%, #fff); }
.nle-tree-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nle-tree-n { font-size: 11px; color: var(--text-3); font-family: var(--mono); padding: 0 6px; border-radius: 999px; background: var(--surface-2); min-width: 18px; text-align: center; }
.nle-tree-item { position: relative; padding-left: calc(8px + var(--lvl, 0) * var(--tree-step) + 18px); display: flex; flex-direction: column; gap: 3px;
  background-image: repeating-linear-gradient(to right, transparent 0 15px, var(--tree-line) 15px 16px, transparent 16px var(--tree-step)); background-size: calc(var(--lvl, 0) * var(--tree-step)) 100%; background-repeat: no-repeat; background-position: 8px 0; }
.nle-tree-item.is-child::before { content: ''; position: absolute; left: calc(8px + (var(--lvl, 0) - 1) * var(--tree-step) + 15px); top: 50%; width: calc(var(--tree-step) - 4px); height: 1px; background: var(--tree-line); }
.nle-tree-item .nle-card { background-color: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.nle-tree-where { font-size: 10.5px; color: var(--text-3); padding: 0 0 4px 24px; }
.nle-bin-folders { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 0 6px; }
.nle-bin-folder { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; }
.nle-bin-folder:hover { color: var(--text); border-color: var(--accent); }
.nle-bin-folder.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }
.nle-bin-folder.is-drop { outline: 2px dashed var(--accent); outline-offset: 1px; }
.nle-bin-folder-n { opacity: .75; font-size: 11px; }
.nle-bin-zoom { width: 70px; height: 4px; accent-color: var(--accent); }

/* ---- Panneau GFX (3 novembre 2026) : bibliothèque d'habillage commune, ancrée à droite de la timeline ---- */
.nle-bottom-row { display: flex; flex: 1 1 auto; min-height: 0; min-width: 0; }
.nle-bottom-row > .nle-tl { min-width: 0; }
.nle-gfx { flex: 0 0 340px; width: 340px; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--surface); border-left: 1px solid var(--border-strong); }
.nle-gfx[hidden] { display: none !important; }
.nle-gfx .nle-panel-head { gap: var(--space-2); }
.nle-gfx-sub { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nle-spacer { flex: 1 1 auto; }
.nle-gfx-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-3); }
.nle-gfx-empty { margin: var(--space-3); font-size: 12px; color: var(--text-3); }
.nle-gfx-col-head { display: flex; align-items: baseline; gap: 6px; padding: 2px 4px 6px; }
.nle-gfx-col-title { font-family: var(--font-heading); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.nle-gfx-col-n { font-size: 11px; color: var(--text-3); }
.nle-gfx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nle-gfx-card { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 5px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; transition: border-color .12s var(--ease), background-color .12s var(--ease), transform .12s var(--ease-out); }
.nle-gfx-card:hover, .nle-gfx-card:focus-visible { border-color: var(--accent); background: var(--surface-3); outline: none; }
.nle-gfx-card:active { transform: scale(.985); }
.nle-gfx-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background: repeating-conic-gradient(#1a1e28 0 25%, #12151d 0 50%) 0 0 / 16px 16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.nle-gfx-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.nle-gfx-thumb video { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; display: block; pointer-events: none; opacity: 0; transition: opacity .15s var(--ease); background: #000; }
/* version de lecture au matte : la moitié gauche (couleur) seule est montrée, sur fond noir */
.nle-gfx-thumb video.is-matte { width: 200%; object-fit: cover; object-position: left center; clip-path: inset(0 50% 0 0); left: 0; }
.nle-gfx-card:hover .nle-gfx-thumb video { opacity: 1; }
.nle-gfx-dur { position: absolute; right: 4px; bottom: 4px; padding: 1px 5px; border-radius: 4px; font-size: 10.5px; font-variant-numeric: tabular-nums; background: rgba(0,0,0,.6); color: #fff; }
.nle-gfx-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nle-gfx-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nle-gfx-sub2 { font-size: 10.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nle-gfx-place { align-self: flex-start; }
@media (max-width: 1100px) { .nle-gfx { flex-basis: 260px; width: 260px; } .nle-gfx-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .nle-gfx { display: none !important; } }
/* GFX : rangement (soir du 3 novembre 2026) — fil d'Ariane, dossiers, import, écoute */
.nle-gfx-crumbs { display: flex; align-items: center; gap: 4px; padding: 6px 8px 2px; font-size: 12px; min-width: 0; overflow: hidden; }
.nle-gfx-crumb { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: var(--radius); border: 1px solid transparent; background: transparent; color: var(--text-2); font: inherit; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.nle-gfx-crumb:hover { background: var(--hover); color: var(--text); }
.nle-gfx-crumb.is-current { color: var(--text); font-weight: 600; }
.nle-gfx-crumb.is-drop, .nle-gfx-folder.is-drop { border-color: var(--accent); background: var(--accent-soft); }
.nle-gfx-crumb-sep { color: var(--text-3); }
.nle-gfx-folders { display: flex; flex-direction: column; gap: 3px; }
.nle-gfx-folder { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; font-size: 12.5px; }
.nle-gfx-folder:hover, .nle-gfx-folder:focus-visible { border-color: var(--accent); outline: none; }
.nle-gfx-folder .nle-icon { color: var(--accent-strong); flex: 0 0 auto; }
.nle-gfx-folder-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.nle-gfx-folder-n { font-size: 11px; color: var(--text-3); }
.nle-gfx-folder-menu { border: 0; background: transparent; color: var(--text-3); font: inherit; cursor: pointer; padding: 0 4px; border-radius: 4px; }
.nle-gfx-folder-menu:hover { background: var(--hover); color: var(--text); }
.nle-gfx-folder.is-dragging, .nle-gfx-card.is-dragging { opacity: .5; }
.nle-gfx-card-actions { display: flex; align-items: center; gap: 4px; }
.nle-gfx-listen { margin-left: auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent; color: var(--text-2); cursor: pointer; }
.nle-gfx-listen:hover { color: var(--text); border-color: var(--accent); }
.nle-gfx-card.is-listening .nle-gfx-listen { background: var(--accent); color: #fff; border-color: var(--accent); }
.nle-gfx-card.is-listening .nle-gfx-thumb video { opacity: 1; }
.nle-gfx.is-dropping .nle-gfx-body { outline: 2px dashed var(--accent); outline-offset: -6px; background: var(--accent-soft); }
.nle-gfx-upload { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; padding: 6px 8px; border-radius: var(--radius); background: var(--accent-soft); font-size: 12px; }
.nle-gfx-upload-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nle-gfx-upload-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--surface-4); overflow: hidden; }
.nle-gfx-upload-fill { height: 100%; width: 0; background: var(--accent); transition: width .2s linear; }
.nle-gfx-upload-fill.is-working { animation: nle-gfx-pulse 1.2s ease-in-out infinite; }
@keyframes nle-gfx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.nle-gfx-upload-stat { font-size: 11px; color: var(--text-3); }

/* Transformation (inspecteur, bloc permanent — 4 novembre 2026) */
.nle-tf { gap: 4px; }
.nle-tf-head { display: flex; align-items: center; gap: 8px; }
.nle-tf-head .nle-insp-title { flex: 1; margin: 0; }
.nle-tf-switch { position: relative; display: inline-block; width: 30px; height: 16px; flex: none; }
.nle-tf-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.nle-tf-knob { position: absolute; inset: 0; border-radius: 8px; background: var(--border); transition: background .15s; }
.nle-tf-knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); transition: transform .15s; }
.nle-tf-switch input:checked + .nle-tf-knob { background: #e5484d; }
.nle-tf-switch input:checked + .nle-tf-knob::after { transform: translateX(14px); }
.nle-tf-switch input:disabled + .nle-tf-knob { opacity: .5; }
.nle-tf-row .nle-tf-ctl { display: flex; align-items: center; gap: 4px; min-width: 0; }
.nle-tf-xy { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.nle-tf-axis { font-size: 11px; color: var(--text-3); width: 10px; text-align: center; }
.nle-tf-num { width: 64px; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
.nle-tf-range { flex: 1; min-width: 40px; }
.nle-tf-link, .nle-tf-flip { width: 24px; height: 22px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); color: var(--text-2); font-size: 12px; cursor: pointer; padding: 0; }
.nle-tf-link.is-on, .nle-tf-flip.is-on { background: var(--accent-soft, rgba(60,120,255,.2)); color: var(--accent); border-color: var(--accent); }
.nle-tf-reset { flex: none; width: 22px; padding: 0; font-size: 13px; }
.nle-tf-reset.is-idle { opacity: .35; }
.nle-tf.is-off .nle-tf-row { opacity: .55; }
/* piste cible du collage (clic sur l'en-tête) */
.nle-tl-head { cursor: pointer; }
.nle-tl-head.is-target { box-shadow: inset 3px 0 0 var(--accent); }
.nle-tl-head.is-target .nle-tl-head-name { color: var(--accent); font-weight: 700; }
/* sélection liée désactivée : maillon barré */
.nle-linked-btn.is-off { opacity: .55; text-decoration: line-through; }

/* Cadre de transformation dans le programme (4 novembre 2026) */
.nle-xform { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.nle-xform-body { fill: rgba(255,255,255,0.001); pointer-events: all; cursor: move; }
.nle-xform-outline { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 4; pointer-events: none; }
.nle-xform-corner { fill: #fff; stroke: var(--accent); stroke-width: 2; pointer-events: all; cursor: nwse-resize; }
.nle-xform-corner[data-i="1"], .nle-xform-corner[data-i="3"] { cursor: nesw-resize; }
.nle-xform-rotline { stroke: var(--accent); stroke-width: 1.5; pointer-events: none; }
.nle-xform-rot { fill: var(--accent); stroke: #fff; stroke-width: 2; pointer-events: all; cursor: grab; }
.nle-xform-anchor { stroke: #fff; stroke-width: 1.5; fill: none; pointer-events: none; opacity: .8; }
.nle-xform.is-dragging .nle-xform-rot { cursor: grabbing; }
.nle-xform.is-dragging .nle-xform-outline { stroke-dasharray: none; }
.nle-xform-edge { fill: #fff; stroke: var(--accent); stroke-width: 2; pointer-events: all; }
.nle-xform-edge[data-e="l"], .nle-xform-edge[data-e="r"] { cursor: ew-resize; }
.nle-xform-edge[data-e="t"], .nle-xform-edge[data-e="b"] { cursor: ns-resize; }
.nle-xform.is-alt .nle-xform-edge, .nle-xform.is-alt .nle-xform-corner { cursor: crosshair; fill: var(--accent); }

/* Versions du projet (instantanés, 5 novembre 2026) */
.nle-dialog-versions { max-width: min(900px, 94vw); }
.nle-dialog-versions .nle-form { min-width: min(820px, 90vw); }
.nle-dialog-light .nle-btn-sm { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
.nle-versions-bar { display: flex; gap: var(--space-2); align-items: center; }
.nle-versions-note-input { flex: 1 1 auto; min-width: 0; }
.nle-versions { max-height: min(60vh, 520px); overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.nle-versions-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.nle-versions-table td { padding: 7px 10px; border-top: 1px solid var(--border); vertical-align: top; }
.nle-versions-table tr:first-child td { border-top: 0; }
.nle-versions-table tr.is-current td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.nle-versions-when { white-space: nowrap; font-weight: 500; }
.nle-versions-tag { display: block; font-size: 11px; color: var(--accent); font-weight: 500; }
.nle-versions-kind { color: var(--text-2); white-space: nowrap; }
.nle-versions-note { color: var(--text); font-style: italic; white-space: normal; max-width: 260px; }
.nle-versions-meta { color: var(--text-3); font-size: 12px; }
.nle-versions-actions { white-space: nowrap; text-align: right; }
.nle-versions-actions .nle-btn + .nle-btn { margin-left: 4px; }

/* Repères du programme (signalement 150, 5 novembre 2026) */
.nle-guides { position: absolute; pointer-events: none; z-index: 1; overflow: visible; }
.nle-guides[hidden] { display: none; }
.nle-guides line, .nle-guides rect { fill: none; stroke-width: 1px; }
.nle-guide-center { stroke: rgba(255, 255, 255, .35); }
.nle-guide-center-mark { stroke: var(--accent, #ff6a3d); stroke-width: 2px; }
.nle-guide-third { stroke: rgba(255, 255, 255, .28); stroke-dasharray: 6 6; }
.nle-guide-safe-action { stroke: rgba(255, 220, 90, .75); }
.nle-guide-safe-title { stroke: rgba(120, 220, 255, .8); stroke-dasharray: 8 5; }
.nle-guide-social { fill: rgba(0, 0, 0, .32); stroke: rgba(255, 255, 255, .25); stroke-dasharray: 4 4; }
.nle-pgm-guides[aria-pressed="true"] { color: var(--accent); }
.nle-monitor-view.is-fullscreen .nle-guides { z-index: 1; }