/* Polices embarquées avec l'app (dossier renderer/fonts/, à côté de ce
     fichier) — utilisées par la bande, l'aperçu et l'export vidéo. */
    @font-face {
      font-family: 'RS DejaVu Sans';
      src: url('fonts/DejaVuSans.ttf') format('truetype');
      font-weight: normal;
    }

    @font-face {
      font-family: 'RS DejaVu Sans';
      src: url('fonts/DejaVuSans-Bold.ttf') format('truetype');
      font-weight: bold;
    }

    @font-face {
      font-family: 'RS Liberation Sans';
      src: url('fonts/LiberationSans-Regular.ttf') format('truetype');
      font-weight: normal;
    }

    @font-face {
      font-family: 'RS Liberation Sans';
      src: url('fonts/LiberationSans-Bold.ttf') format('truetype');
      font-weight: bold;
    }

    @font-face {
      font-family: 'RS DejaVu Sans Condensed';
      src: url('fonts/DejaVuSansCondensed.ttf') format('truetype');
      font-weight: normal;
    }

    @font-face {
      font-family: 'RS DejaVu Sans Condensed';
      src: url('fonts/DejaVuSansCondensed-Bold.ttf') format('truetype');
      font-weight: bold;
    }

    @font-face {
      font-family: 'RS DejaVu Serif';
      src: url('fonts/DejaVuSerif.ttf') format('truetype');
      font-weight: normal;
    }

    @font-face {
      font-family: 'RS DejaVu Serif';
      src: url('fonts/DejaVuSerif-Bold.ttf') format('truetype');
      font-weight: bold;
    }

    @font-face {
      font-family: 'RS Liberation Serif';
      src: url('fonts/LiberationSerif-Regular.ttf') format('truetype');
      font-weight: normal;
    }

    @font-face {
      font-family: 'RS Liberation Serif';
      src: url('fonts/LiberationSerif-Bold.ttf') format('truetype');
      font-weight: bold;
    }

    @font-face {
      font-family: 'RS DejaVu Sans Mono';
      src: url('fonts/DejaVuSansMono.ttf') format('truetype');
      font-weight: normal;
    }

    @font-face {
      font-family: 'RS DejaVu Sans Mono';
      src: url('fonts/DejaVuSansMono-Bold.ttf') format('truetype');
      font-weight: bold;
    }
    /* Polices de bande ajoutées (TTF renommés « RS … » en interne pour l'export FFmpeg,
       voir fonts/LICENCES.txt) — Kalam et Caveat : cursives, façon Cappella / Mosaic. */
    @font-face {
      font-family: 'RS Kalam';
      src: url('fonts/Kalam-Regular.ttf') format('truetype');
      font-weight: normal;
    }
    @font-face {
      font-family: 'RS Kalam';
      src: url('fonts/Kalam-Bold.ttf') format('truetype');
      font-weight: bold;
    }
    @font-face {
      font-family: 'RS Caveat';
      src: url('fonts/Caveat-Regular.ttf') format('truetype');
      font-weight: normal;
    }
    @font-face {
      font-family: 'RS Caveat';
      src: url('fonts/Caveat-Bold.ttf') format('truetype');
      font-weight: bold;
    }
    @font-face {
      font-family: 'RS Roboto Condensed';
      src: url('fonts/RobotoCondensed-Regular.ttf') format('truetype');
      font-weight: normal;
    }
    @font-face {
      font-family: 'RS Roboto Condensed';
      src: url('fonts/RobotoCondensed-Bold.ttf') format('truetype');
      font-weight: bold;
    }
    @font-face {
      font-family: 'RS Open Sans';
      src: url('fonts/OpenSans-Regular.ttf') format('truetype');
      font-weight: normal;
    }
    @font-face {
      font-family: 'RS Open Sans';
      src: url('fonts/OpenSans-Bold.ttf') format('truetype');
      font-weight: bold;
    }
    @font-face {
      font-family: 'RS Nunito';
      src: url('fonts/Nunito-Regular.ttf') format('truetype');
      font-weight: normal;
    }
    @font-face {
      font-family: 'RS Nunito';
      src: url('fonts/Nunito-Bold.ttf') format('truetype');
      font-weight: bold;
    }
    @font-face {
      font-family: 'RS Noto Serif';
      src: url('fonts/NotoSerif-Regular.ttf') format('truetype');
      font-weight: normal;
    }
    @font-face {
      font-family: 'RS Noto Serif';
      src: url('fonts/NotoSerif-Bold.ttf') format('truetype');
      font-weight: bold;
    }
    @font-face {
      font-family: 'RS Courier Prime';
      src: url('fonts/CourierPrime-Regular.ttf') format('truetype');
      font-weight: normal;
    }
    @font-face {
      font-family: 'RS Courier Prime';
      src: url('fonts/CourierPrime-Bold.ttf') format('truetype');
      font-weight: bold;
    }

    :root {
      --bg-0: #15161A;
      --bg-1: #15161A;
      --bg-2: #18181e;
      --bg-3: #1D1E24; /* fond pour les boutons -- */
      --bg-4: #24262E;
      --border: rgba(36, 38, 46);
      --border-hi: rgb(255, 184,0);
      --text-1: #E2E8F0;
      --text-2: #FFB800;
      --text-3: #8E9AA8;
      --accent: #FFB800;
      --accent-dim: rgba(232, 200, 74, 0.15);
      --accent-2: #4a9be8;
      --accent-2-dim: rgba(74, 155, 232, 0.15);
      --red: #e84a4a;
      --green: #4ae8a0;
      --orange: #e8904a;
      --track-h: 50px;
      --header-h: 55px;
      --timeline-left: 300px;
      --timeline-area-h: 290px;
      --ruler-h: 18px;
      --vu-w: 34px;
      --font: 'inter',regular, sans-serif;
      --font-bold: 'inter', semi-bold, sans-serif;
      --mono: 'inter', monospace;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: var(--font);
      background: var(--bg-0);
      color: var(--text-1);
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      user-select: none;
    }

    /* ── HEADER ─────────────────────────────────────────── */
    #header {
      height: var(--header-h);
      background: var(--bg-1);
      border-bottom: 1px solid var(--border);
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 0 16px;
    }

    .logo {
      font-family: var(--font-bold);
      font-size: 20px;
      font-weight: 500;
      color: var(--text-1);
      letter-spacing: 0.05em;
      margin-right: 0px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
    }

    .logo span {
      color: var(--text-2);
    }

    .logo {
      display: flex;
      align-items: center;
    }

    .logo-img {
      height: 40px;
      width: auto;
      display: block;
    }

    .logo:hover {
      opacity: 0.85;
    }

    /* Badge « BETA » à côté du logo */
    .beta-badge {
      margin-left: 6px;
      padding: 1px 5px;
      border: 1px solid var(--accent);
      border-radius: 4px;
      color: var(--accent) !important;
      font-family: var(--font);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .08em;
      line-height: 1.4;
      align-self: center;
    }

    .menu-bar-left {
      grid-column: 1;
      justify-self: start;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .menu-onglet {
      position: relative;
      display: inline-flex;
      align-items: center;
      padding: 0px 0px;
      color: var(--text-3);
      font-family: var(--font);
      font-size: 12px;
      cursor: pointer;
      background: transparent;
      transition: all 0.15s;
    }

    /* ── Menu compte (réutilise le style .menu-onglet / .menu-dropdown) ── */
    .account-menu .menu-onglet {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .menu-dropdown.align-right {
      left: auto;
      right: 0;
    }

    .menu-onglet:hover,
    .menu-onglet.open {
      background: rgba(255, 255, 255, 0.08);
      border-color: var(--border);
      color: var(--text-1);
    }

    .menu-dropdown {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      min-width: 220px;
      background: var(--bg-2);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
      display: none;
      z-index: 1200;
      overflow: hidden;
    }

    .menu-onglet.open .menu-dropdown {
      display: block;
    }

    .menu-group {
      padding: 6px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .menu-group:last-child {
      border-bottom: none;
    }

    .menu-entry {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 12px;
      background: none;
      border: none;
      color: var(--text-1);
      text-align: left;
      font-size: 12px;
      cursor: pointer;
      font-family: var(--font);
    }

    .menu-entry:hover {
      background: rgba(255, 255, 255, 0.06);
    }

    .menu-entry .hint {
      color: var(--text-3);
      font-size: 10px;
    }
    .menu-sep {
      height: 1px;
      background: rgba(255, 255, 255, 0.06);
      margin: 4px 0;
    }

    /* ── Sous-menu en flyout (ex : Fichier ▸ Ouvrir récent) ───────────────
       Détaché de la structure des menus (voir index.html) et positionné en
       JS (getBoundingClientRect) : rester DANS .menu-dropdown le faisait
       rogner par son overflow:hidden (nécessaire là pour ses coins arrondis),
       le rendant invisible malgré un contenu bien généré. */
    .menu-entry-sub {
      position: relative;
    }

    .menu-flyout {
      min-width: 220px;
      max-width: 320px;
      max-height: 320px;
      overflow-y: auto;
      background: var(--bg-2);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
      z-index: 1300;
    }

    .menu-flyout .menu-entry {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .menu-center {
      grid-column: 2;
      justify-self: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

   
  .selector-bar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .session-edit-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.12s;
  }
  .session-edit-btn img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .6;
    pointer-events: none;
  }
  .session-edit-btn:hover { background: var(--bg-4); border-color: var(--border); }
  .session-edit-btn:hover img { opacity: 1; }

  /* --- Le déclencheur (pilule cliquable) --- */
  .selector {
    position: relative;
  }

  .selector__trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--pill-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    min-width: 220px;
    justify-content: space-between;
    transition: background 0.15s;
    user-select: none;
  }
  .selector__trigger:hover { background: var(--pill-bg-hover); }

  /* --- Le panneau déroulant --- */
  .selector__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 4px;
  overflow: hidden;
  z-index: 20;
}

.selector.open .selector__panel {
  display: block;
}

.selector__option {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}

.selector__option:hover {
  background: rgba(255,255,255,0.06);
}

.selector__empty {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-3);
}

    .account-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
    }

    .account-dot.off {
      background: var(--text-3);
    }

    .header-bar-right {
      grid-column: 3;
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    /* Bouton "Signaler un bug" (voir bug-report.js) */
    .header-bug-report-btn {
      padding: 5px 12px;
      margin-right: 10px;
      border-radius: 14px;
      border: 1px solid var(--accent);
      background: rgba(255, 184, 0, 0.12);
      color: var(--accent);
      font-family: var(--font);
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }

    .header-bug-report-btn:hover {
      background: var(--accent);
      color: #1a1608;
    }

     /* ── MAIN AREA ───────────────────────────────────────── */
    #main {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-height: 0;
    }

    #main-top {
      flex: 1 1 auto;
      display: flex;
      overflow: hidden;
      min-height: 0;
    }


    /* ── WORKSPACE — Vidéo + Timeline séparés ───────────── */
    #workspace {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-height: 0;
      width: 100%;
    }

    #Video-player {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-height: 0;
    }


    #video-main {
      flex: 1 1 auto;
      min-height: 260px;
      background: #000;
      position: relative;
      overflow: hidden;
      transition: height 0.12s ease;
    }

    #video-main video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    #video-main .video-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.6);
      flex-direction: column;
      gap: 10px;
    }

    #video-main .video-overlay-icon {
      font-size: 48px;
      opacity: 0.3;
    }

    #video-main .video-overlay p {
      font-size: 13px;
      color: var(--text-2);
      text-align: center;
      line-height: 1.6;
    }

    #video-main.drag-over {
      outline: 2px dashed var(--accent);
      outline-offset: -4px;
    }

    /* Glisser un fichier de dialogue (.srt/.csv/.detx…) sur la timeline (voir Script.js,
       import automatique par extension) — même repère visuel que le dépôt vidéo. */
    #timeline-area.drag-over {
      outline: 2px dashed var(--accent);
      outline-offset: -4px;
    }

    /* Aperçu sous-titre (Éditeur Sous-titres, voir _updateSubtitleOverlay
       dans Script.js) — masqué par défaut, affiché seulement quand cette vue
       est active ET qu'une réplique couvre le TC courant. */
    /* Apparence personnalisable (Options ▸ Sous-titres) via variables CSS —
       JS ne touche que ces variables (voir _applySubtitleOverlayStyle dans
       Script.js), les valeurs par défaut ci-dessous reproduisent EXACTEMENT
       l'apparence d'origine (non personnalisée). */
    #subtitle-overlay {
      position: absolute;
      left: 50%;
      bottom: var(--sub-ov-bottom, 8%);
      top: var(--sub-ov-top, auto);
      transform: var(--sub-ov-transform, translateX(-50%));
      max-width: 82%;
      padding: 6px 16px;
      background: var(--sub-ov-bg, rgba(0, 0, 0, 0.65));
      color: var(--sub-ov-color, #fff);
      font-family: var(--sub-ov-font, inherit);
      font-size: calc(var(--sub-ov-scale, 1) * clamp(14px, 2.2vw, 22px));
      font-weight: 600;
      text-align: center;
      line-height: 1.3;
      border-radius: 4px;
      pointer-events: none;
      z-index: 5;
      display: none;
      white-space: pre-wrap;
      -webkit-text-stroke: var(--sub-ov-stroke, 0px transparent);
    }
    #subtitle-overlay.sub-ov-pos-top { --sub-ov-top: 8%; --sub-ov-bottom: auto; --sub-ov-transform: translateX(-50%); }
    #subtitle-overlay.sub-ov-pos-middle { --sub-ov-top: 50%; --sub-ov-bottom: auto; --sub-ov-transform: translate(-50%, -50%); }
    #subtitle-overlay.sub-ov-pos-bottom { --sub-ov-top: auto; --sub-ov-bottom: 8%; --sub-ov-transform: translateX(-50%); }


    /* monitor-control-overlay */

    #monitor-control-overlay {
      flex: 1 1 auto;
      min-height: 70px;
      max-height: 70px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      background: black;
    }

    .tc-display {
      font-family: var(--mono);
      font-size: 30px;
      font-weight: 500;
      color: var(--accent);
      min-width: 120px;
      width: 180px;
      text-align: center;
      font-variant-numeric: tabular-nums; 

    }

    #Transport-video {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    #Monitor-controls {
      display: flex;
      align-items: center;
      gap: 20px;
      
    }

    .transport-btns {
      display: flex;
      gap: 15px;
      opacity: 0.9;
    }

    .tbtn-transport {
      width: 28px;
      height: 28px;
      border:none;
      background: transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-2);
    }

    .tbtn-transport img {
      height: 25px;
      width: auto;
      display: block;
      object-fit: contain;
    }


    .tbtn {
      width: 28px;
      height: 28px;
      background: var(--bg-3);
      border: 1px solid var(--border);
      border-radius: 5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-2);
      font-size: 12px;
      transition: all 0.15s;
    }

    .tbtn:hover {
      background: var(--bg-4);
      border-color: var(--border-hi);
      color: var(--text-1);
    }

    .tbtn.active {
      background: var(--accent-dim);
      border-color: var(--accent);
      color: var(--accent);
    }

    .tbtn.rec-btn.active {
      background: rgba(232, 74, 74, 0.2);
      border-color: var(--red);
      color: var(--red);
    }

    .tbtn.rec-btn.pending {
      background: rgba(232, 74, 74, 0.08);
      border-color: var(--red);
      color: var(--red);
      animation: rec-pending-pulse 1.1s ease-in-out infinite;
    }

    @keyframes rec-pending-pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.45;
      }
    }
    
    .mon-vol {
      display: flex;
      gap: 15px;
      opacity: 0.9;
      align-items: center;
      justify-content: center;
    }

    .custom-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 5px;
      border-radius: 10px;
      background: linear-gradient(
        to right, 
        var(--accent) 0%, 
        var(--accent) var(--val, 50%), 
        var(--bg-4) var(--val, 50%), 
        var(--bg-4) 100%);
      outline: none;
      cursor: pointer;
      
    }

    /* Son coupé (mute) : la partie remplie du curseur de volume passe en gris. */
    .custom-slider.muted {
      background: linear-gradient(
        to right,
        var(--text-3) 0%,
        var(--text-3) var(--val, 50%),
        var(--bg-4) var(--val, 50%),
        var(--bg-4) 100%);
    }

    .custom-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 0;
      height: 0;
    }

    .custom-slider::-moz-range-thumb {
      width: 0;
      height: 0;
      border: none;
    }

    #mon-mute-icon img {
      height: 20px;                  
      width: auto;
      display: block;
      object-fit: contain;
    }

    /* Bouton « Vue live » (barre d'outils centrale, après VF/VO) : libellé + icône */
    .live-view-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 4px 10px;
      background: var(--bg-3);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-3);          /* texte toujours blanc */
      text-transform: uppercase;     /* et en majuscules */
      letter-spacing: .04em;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: all 0.12s;
    }
    /* Fenêtre live ouverte : le bouton reste jaune (bordure, fond, icône) ; le texte reste blanc. */
    .live-view-btn.active {
      border-color: var(--accent, #fbb021);
      background: rgba(251, 176, 33, 0.16);
      color: var(--accent, #fbb021);   /* texte jaune aussi quand la fenêtre live est ouverte */
    }
    .live-view-btn.active img {
      opacity: 1;
      filter: brightness(0) saturate(100%) invert(72%) sepia(85%) saturate(1200%) hue-rotate(347deg) brightness(101%);
    }
    .live-view-btn img {
      height: 14px;
      width: auto;
      display: block;
      object-fit: contain;
      opacity: .8;
    }
    /* Centré dans l'espace libre entre VF/VO et le bouton de suivi de la tête de lecture :
       marges auto de part et d'autre ; le bouton de suivi n'a alors plus besoin de la sienne. */
    .tl-after-view > .live-view-btn { margin: 0; }
    .right-timeline-tools > #follow-lock-btn { margin-left: 0; }
    .live-view-btn:hover:not(.active) { border-color: var(--text-3); }
    .live-view-btn:hover img { opacity: 1; }

    /* ── TOOLS CONTROLS — Volume, Zoom, FPS ───────────── */

    /* Mise en page seulement : le texte du libellé ("FPS"/"VITESSE") est
       maintenant un <span class="mon-title">, même style que "ÉCOUTE AUDIO" /
       "RYTHMO" (voir .mon-title plus bas) pour une typo cohérente entre les
       4 groupes de cette barre d'outils. */
    #fps-container, #speed-container, #live-container {
      display:flex;
      align-items:center;
      gap:10px;
    }

    #fps-select {
      width: auto;
      field-sizing: content;
      background:var(--bg-3);
      border:1px solid var(--border);
      color:var(--text-1);
      font-family:var(--mono);
      font-size:12px;
      padding:3px;
      border-radius:4px;
      outline:none;
    }

    /* Menu déroulant maison du FPS (remplace visuellement #fps-select, qui
       reste la source de vérité en arrière-plan) — permet d'afficher une vraie
       icône vidéo à côté de la valeur détectée, impossible avec un <select>. */
    .fps-custom { position: relative; }
    .fps-custom-trigger {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--bg-3);
      border: 1px solid var(--border);
      color: var(--text-1);
      font-family: var(--mono);
      font-size: 12px;
      padding: 3px 8px;
      border-radius: 4px;
      cursor: pointer;
      transition: border-color .12s;
    }
    .fps-custom-trigger:hover { border-color: var(--border-hi); }
    .fps-custom-trigger::after {
      content: '';
      width: 0; height: 0;
      margin-left: 2px;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 4px solid var(--text-3);
    }
    /* « C » grisé : un .detx (Cappella, toujours 25 i/s) a été importé */
    .fps-detx-c {
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--text-3);
      opacity: .7;
    }
    .fps-video-icon {
      width: 13px;
      height: 13px;
      object-fit: contain;
      opacity: .55;
      filter: grayscale(1);
    }
    .fps-custom-panel {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      margin-top: 4px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
      z-index: 30;
      min-width: 100%;
    }
    .fps-custom.open .fps-custom-panel { display: block; }
    .fps-opt-row {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 7px 12px;
      background: none;
      border: none;
      color: var(--text-1);
      font-family: var(--mono);
      font-size: 12px;
      text-align: left;
      cursor: pointer;
      white-space: nowrap;
    }
    .fps-opt-row:hover { background: rgba(255,255,255,0.06); }
    .fps-opt-row.selected { color: var(--accent); }
    .fps-opt-row .fps-video-icon { margin-left: auto; }
    /* Le « C » Cappella suit la valeur ; s'il n'y a pas d'icône vidéo, il se cale à droite comme elle. */
    .fps-opt-row .fps-detx-c { margin-left: auto; }
    .fps-opt-row .fps-detx-c + .fps-video-icon { margin-left: 0; }

    .sep {
      width: 1px;
      height: 24px;
      background: var(--border);
    }

    .zoom-ctrl {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 11px;
      color: var(--text-3);
    }


    .zoom-ctrl .custom-slider {
      width: 110px;
    }

    .zoom-label {
      font-size: 11px;
      color: var(--text-3);
      /* Largeur fixe : sans ça, le nombre de chiffres change ("60px/s" →
         "400px/s") pendant un zoom molette et décale toute la toolbar à
         chaque cran, provoquant un effet de saccade visuelle. */
      display: inline-block;
      min-width: 46px;
    }

    .fps-badge {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--green);
      background: rgba(74, 232, 160, 0.1);
      border: 1px solid rgba(74, 232, 160, 0.2);
      border-radius: 4px;
      padding: 2px 6px;
    }

    /* ── RIGHT PANEL — panel dockable ────────────────────── */
    .panel-splitter-right {
      position: absolute;
      top: 0;
      left: 0px;
      width: 6px;
      height: 100%;
      cursor: col-resize;
      z-index: 10;
      background: transparent;
      transition: background;
    }

    .panel-splitter-right:hover {
      background: rgba(232, 200, 74, 0.5);
    }


    /* ── PANNEAU DROIT — largeur + allure ──────────────────────────── */
    #right-panel {
      position: relative;
      display: flex;
      flex-direction: column;
      background: var(--bg-1);
      border-left: 1px solid var(--border);
      /* pas de max-height : la colonne suit la hauteur de #main-top (qui varie avec la timeline) */
      min-height: 0;
      overflow: hidden;
    }

    #right-panel.has-tabs {
      flex: 0 0 350px;
      width: 350px;
      min-width: 230px;
      max-width: 560px;
    }

    /* Aucun panneau affiché à droite : la colonne disparaît complètement (largeur 0) et la vidéo prend toute la place.
       !important : la largeur imposée en ligne par un redimensionnement ou une disposition enregistrée ne doit pas la garder ouverte. */
    #right-panel:not(.has-tabs) {
      flex: 0 0 0 !important;
      width: 0 !important;
      min-width: 0 !important;
      border-left: none !important;
    }

    body.tab-dragging #right-panel:not(.has-tabs) {
      flex: 0 0 260px !important; 
      width: 260px !important; 
      border-left: 1px solid var(--border);
    }

    /* Pile verticale des deux zones */
    #right-stack { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

    .right-zone {
      flex: 1 1 0; min-height: 0; display: flex; flex-direction: column;
      overflow: hidden; border-top: 1px solid var(--border);
    }
    .right-zone:first-child { border-top: none; }
    .right-zone .panel-tabs { flex: 0 0 auto; }
    /* Pas de padding-top ici : un onglet ancré dans cette zone qui commence
       par une barre collée en haut (.roster-toolbar/.rep-toolbar) fournit
       lui-même son propre padding-top — voir leur commentaire. Un padding-top
       ici serait du contenu SCROLLABLE (pas un espace mort) qui continuerait
       de défiler AU-DESSUS de la barre collée une fois qu'on a scrollé, la
       laissant voir par-dessous. Les onglets SANS barre collée (#tab-props)
       compensent avec leur propre padding-top. */
    .right-zone .zone-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 12px 12px; }

    /* Zone vide : repliée hors drag ; cible de dépôt visible pendant un drag */
    .right-zone.empty { flex: 0 0 0; min-height: 0; border-top: none; overflow: hidden; }
    /* Seule zone affichée : occupe toute la hauteur, même si le splitter vertical lui avait fixé une hauteur */
    .right-zone.solo { flex: 1 1 0 !important; }
    .right-zone.empty .panel-tabs,
    .right-zone.empty .zone-content { display: none; }
    body.tab-dragging .right-zone.empty {
      flex: 0 0 40px; min-height: 40px;
      margin: 6px 8px; border: 1px dashed rgba(100, 180, 255, 0.35); border-radius: 8px;
      background: rgba(100, 180, 255, 0.04);
      display: flex; align-items: center; justify-content: center;
    }
    body.tab-dragging .right-zone.empty.drag-over {
      border-color: #64b4ff; background: rgba(100, 180, 255, 0.12);
    }

    /* Splitter de HAUTEUR entre la zone haute et la zone basse */
    .panel-splitter-v {
      flex: 0 0 6px; 
      cursor: row-resize; 
      background: transparent;
      transition: background ;
    }
    .panel-splitter-v:hover,
    .panel-splitter-v.dragging { 
      background: rgba(232, 200, 74, 0.5);
     }

    /* ── ONGLETS DOCKABLES ──────────────────────────────── */
    .ptab {
      flex: 1;
      padding: 10px 6px;
      font-size: 11px;
      font-weight: 600;
      text-align: center;
      color: var(--text-3);
      cursor: grab;
      border-bottom: 2px solid transparent;
      transition: background 0.1s, color 0.1s;
      user-select: none;
      position: relative;
      white-space: nowrap;
      text-transform: uppercase;
      background: #15161A;
    }

    .ptab::after {
      position: absolute;
      top: 3px;
      right: 3px;
      font-size: 8px;
      opacity: 0;
      transition: opacity 0.1s;
      pointer-events: none;
    }

    .ptab:hover::after {
      opacity: 0.4;
    }

    .ptab:hover {
      background: rgba(232, 200, 74, 0.08);
    }

    .ptab.active {
      background: var(--bg-2);
      color:var(--accent);
      font-weight: 600;
      border-bottom-color: var(--accent);
    }

    /* Même style jaune pour les onglets du panel droit */
    .ptab[data-side="right"] {
      color: var(--text-3);
    }

    .ptab[data-side="right"].active {
      background: var(--accent);
      color: #111;
      font-weight: 600;
    }

    /* Barre d'onglets en mode drop */
    .panel-tabs.drop-target-left {
      background: rgba(232, 200, 74, 0.08);
      outline: 2px dashed rgba(232, 200, 74, 0.5);
      outline-offset: -2px;
    }

    .panel-tabs.drop-target-right {
      background: rgba(232, 200, 74, 0.08);
      outline: 2px dashed rgba(232, 200, 74, 0.5);
      outline-offset: -2px;
    }

    /* Indicateur de drop zone (bande au bas) */
    .panel-drop-zone {
      display: none;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--accent);
      border-radius: 2px;
      z-index: 20;
    }

    .panel-drop-zone.visible {
      display: block;
    }

    /* ── LEFT PANEL — Propriétés/Marqueurs/Métadonnées ───── */

    #panel-left {
      flex: 0 0 300px;
      width: 300px;
      max-width: 420px;
      min-width: 230px;
      /* pas de max-height : la colonne suit la hauteur de #main-top (qui varie avec la timeline) */
      background: var(--bg-1);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
    }
    /* Colonne vide (tous ses onglets déplacés ailleurs) : repliée à largeur nulle hors glisser-
       déposer — même principe que .right-zone.empty. */
    #panel-left.empty { flex: 0 0 0; width: 0; min-width: 0; border-right: none; overflow: hidden; }
    #panel-left.empty > *:not(#left-drop-zone) { display: none; }
    /* Ne réapparaît (bande en pointillés) que quand la souris s'approche du bord gauche
       PENDANT un glisser (voir near-left-edge, Script.js) — pas pendant tout le glisser,
       sinon elle resterait affichée même pour un dépôt destiné à une autre zone. */
    body.tab-dragging.near-left-edge #panel-left.empty {
      flex: 0 0 44px; width: 44px; min-width: 44px;
      margin: 8px 6px; border: 1px dashed rgba(100, 180, 255, 0.35); border-radius: 8px;
      background: rgba(100, 180, 255, 0.04);
      display: flex; align-items: center; justify-content: center;
    }
    body.tab-dragging.near-left-edge #panel-left.empty.drag-over {
      border-color: #64b4ff; background: rgba(100, 180, 255, 0.12);
    }


    .panel-tabs {
      display: flex;
      justify-content: center;
      text-align: center;
      height:42px;
      flex-shrink: 0;
    }

    /* Splitter de largeur du panneau GAUCHE — harmonisé avec ceux de droite,
       repositionné sur le bord intérieur (droit), celui qu'il redimensionne. */
    .panel-splitter {
      position: absolute;
      top: 0;
      right: 0;
      left: auto;
      width: 6px;
      height: 100%;
      cursor: col-resize;
      z-index: 10;
      background: transparent;
      transition: background;
    }

    .panel-splitter:hover,
    .panel-splitter.dragging {
      background: rgba(232, 200, 74, 0.5);
    }

    /* ── POSITION DES PANNEAUX (glisser un onglet sur un bord de la vidéo, ou Paramètres ▸
       Général ▸ Interface — voir setPanelArrangement). L'ordre des colonnes est posé en style
       inline ; ici, bordures et poignées passent du côté de la vidéo. */
    body.pl-right-of-video #panel-left { border-right: none; border-left: 1px solid var(--border); }
    body.pl-right-of-video #panel-left.empty { border-left: none; }
    body.pl-right-of-video .panel-splitter { left: 0; right: auto; }
    body.rp-left-of-video #right-panel { border-left: none; border-right: 1px solid var(--border); }
    body.rp-left-of-video #right-panel:not(.has-tabs) { border-right: none !important; }
    body.rp-left-of-video .panel-splitter-right { left: auto; right: 0; }

    /* Bandes de dépôt sur les bords de la vidéo (uniquement pendant le glisser d'un onglet) :
       y lâcher un onglet colle toute sa colonne contre la vidéo de ce côté. */
    #workspace { position: relative; }
    .video-dock-zone {
      display: none;
      position: absolute; top: 8px; bottom: 8px; width: 44px; z-index: 60;
      border: 1px dashed rgba(100, 180, 255, 0.35); border-radius: 8px;
      background: rgba(100, 180, 255, 0.04);
      align-items: center; justify-content: center;
      color: rgba(100, 180, 255, 0.8); font-size: 11px; text-align: center; line-height: 1.3;
    }
    #video-dock-left { left: 8px; }
    #video-dock-right { right: 8px; }
    body.tab-dragging .video-dock-zone { display: flex; }
    .video-dock-zone.drag-over { border-color: #64b4ff; background: rgba(100, 180, 255, 0.12); color: #64b4ff; }

    /* ── onglet réplique - Liste des répliques  — */
    #repliques-list { 
      display: flex; 
      flex-direction: column; 
    }

    .rep-row {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 10px; cursor: pointer;
      border-radius: 8px;
      transition: background .1s;
    }
    .rep-row + .rep-row { margin-top: 1px; }
    .rep-row:hover { background: rgba(255, 255, 255, 0.04); }
    .rep-row.selected { background: rgba(255, 255, 255, 0.07); }

    .rep-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

    .rep-text {
      flex: 1; min-width: 0;
      color: var(--text-1);
      font-size: 12px; 
      line-height: 1.3;
      display: -webkit-box; 
      -webkit-line-clamp: 2; 
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .rep-idx {
      flex-shrink: 0; color: var(--text-3);
      font-family: var(--mono); font-size: 11px; letter-spacing: .03em;
    }

    /* Partie d'une réplique qui dépasse la limite de caractères configurée
       (Options ▸ Paramètre ▸ Sous-titres) — Éditeur Sous-titres uniquement,
       voir _subtitleSplitOverflow/_subtitleExcessChars dans Script.js. */
    .sub-overflow {
      color: var(--red, #e84a4a);
      text-decoration: underline;
      text-decoration-style: wavy;
      text-decoration-skip-ink: none;
    }

    /* Encart de contrôles du panneau Propriétés (Éditeur Sous-titres) :
       durée / vitesse de lecture + non-conformités — voir _refreshSubtitleChecks. */
    .sub-checks .sub-check-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 8px;
    }
    .sub-check-badge {
      font-size: 10px; font-weight: 700; letter-spacing: .04em;
      padding: 2px 7px; border-radius: 9px;
      color: var(--text-3); background: var(--bg-4);
    }
    .sub-check-badge.ok { color: var(--green, #4ae8a0); background: rgba(74, 232, 160, 0.12); }
    .sub-check-badge.warn { color: #f0a030; background: rgba(240, 160, 48, 0.14); }
    .sub-check-badge.bad { color: var(--red, #e84a4a); background: rgba(232, 74, 74, 0.16); }
    /* Valeur calculée : même gabarit que les champs IN/OUT, mais en lecture seule. */
    .sub-check-val {
      display: inline-block; box-sizing: border-box;
      width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      color: var(--text-1); cursor: default; user-select: text;
    }
    .sub-check-val.warn { color: #f0a030; border-color: rgba(240, 160, 48, 0.55); }
    .sub-check-val.bad { color: var(--red, #e84a4a); border-color: rgba(232, 74, 74, 0.6); background: rgba(232, 74, 74, 0.08); }
    /* Contrôle ignoré pour cette réplique (clic sur la valeur rouge, voir toggleSubtitleIgnore). */
    .sub-check-val.ignored { color: #f0a030; border-color: rgba(240, 160, 48, 0.55); border-style: dashed; }
    .sub-check-val.clickable { cursor: pointer; }
    .sub-check-val.clickable:hover { filter: brightness(1.25); }
    .sub-overflow.ignored, .sub-ignore-chars .sub-overflow { color: #f0a030; }

    /* Champ TEXTE VF de l'onglet propriétés en vue Éditeur Sous-titres :
       contenteditable (pas un <textarea>) pour pouvoir colorer en rouge
       uniquement la portion de texte qui dépasse la limite de caractères. */
    .sub-text-editable {
      overflow-y: auto;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    .sub-text-editable:empty::before {
      content: attr(data-placeholder);
      color: var(--text-3);
      pointer-events: none;
    }

    /* Input d'édition inline superposé à un bloc de la ligne condensée
       (Éditeur Sous-titres) — voir _subtitlesStartInlineEdit dans Script.js.
       Opaque pour recouvrir entièrement le texte déjà dessiné sur le canva
       en-dessous pendant la saisie. */
    .sub-inline-edit-input {
      position: absolute;
      box-sizing: border-box;
      background: var(--bg-2);
      border: 1px solid var(--accent);
      color: var(--text-1);
      font-family: var(--font);
      font-size: 12px;
      padding: 0 6px;
      border-radius: 3px;
      outline: none;
      z-index: 5;
    }

    /* ── ROSTER ACTIONS TOOLBAR ────────────────────────────────────── */
    /* Ancrée en haut du panneau (Marqueurs/Personnages) : reste visible
       pendant qu'on fait défiler la liste en dessous — voir aussi .rep-toolbar
       (Répliques). `position:sticky` s'ancre tout seul au bon conteneur à
       scroll (panneau gauche ou zone droite, selon où l'onglet est ancré).
       Son conteneur parent (#properties-panel / .zone-content) n'a PAS de
       padding-top (voir leur commentaire) : sans ça, ce padding aurait fait
       partie du contenu scrollable (pas un espace mort) et aurait continué de
       défiler AU-DESSUS de la barre une fois collée en haut, laissant un
       "trou" où la liste redevenait visible par-dessous. Ici la barre fournit
       elle-même son propre padding-top (12px, dans SA propre boîte, toujours
       couvert par son propre fond) — rien de scrollable au-dessus d'elle à
       laisser fuiter. Marge négative sur les côtés seulement (-12px) + padding
       +12px : étend juste la boîte (et son fond opaque) horizontalement
       jusqu'aux bords du panneau, sans rien déplacer visuellement. */
    .roster-toolbar {
      display: flex;
      flex-wrap: nowrap;
      gap: 6px;
      margin: 0 -12px 10px;
      padding: 12px 12px 0;
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--bg-1);
    }

    .roster-btn {
      flex: 1;
      min-width: 0;
      background: var(--bg-2);
      border: 1px solid var(--border);
      color: var(--text-2);
      font-family: var(--font);
      font-size: 11px;
      padding: 5px 8px;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.15s;
      text-align: center;
      white-space: nowrap;
    }

    .roster-btn:hover {
      border-color: var(--border-hi);
      color: var(--text-1);
    }

    .roster-btn.accent {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-dim);
    }

    .roster-btn.accent:hover {
      background: rgba(232, 200, 74, 0.25);
    }

    .roster-btn.danger:hover {
      border-color: var(--red);
      color: var(--red);
    }

    /* Bouton "Automation" (fenêtre d'effet + rangée du rack FX) : contour + texte en bleu
       quand la ligne d'automation est visuellement affichée (voir fxToggleAutomation) — couleur
       distincte du "on" jaune/accent générique, pour ne pas confondre "automation visible"
       avec "réglage activé". Un style d'ANNEAU (fond transparent), pas rempli comme .on. */
    .roster-btn.auto-active {
      border-color: var(--accent-2);
      color: var(--accent-2);
      background: rgba(74, 155, 232, 0.10);
    }
    .roster-btn.auto-active:hover {
      background: rgba(74, 155, 232, 0.2);
    }

    /* ── CHAR SELECT DROPDOWN (dans Propriétés) ──────────────────── */
    .char-select-wrap {
      position: relative;
      flex:auto 1;
    }

    .char-select-trigger {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      background: var(--bg-3);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 5px 8px;
      cursor: pointer;
      transition: border-color 0.15s;
      font-size: 12px;
      color: var(--text-1);
      font-family: var(--mono);
      user-select: none;
    }

    .char-select-trigger:hover {
      border-color: var(--border-hi);
    }

    .char-select-trigger.open {
      border-color: var(--accent);
    }

    .char-select-dropdown {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      background: var(--bg-2);
      border: 1px solid var(--border-hi);
      border-radius: 6px;
      z-index: 9999;
      max-height: 240px;
      overflow-y: auto;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
      display: none;
    }

    .char-select-dropdown.open {
      display: block;
    }

    .char-select-section {
      padding: 4px 0;
      border-bottom: 1px solid var(--border);
    }

    .char-select-section:last-child {
      border-bottom: none;
    }

    .char-select-section-label {
      font-size: 9px;
      font-weight: 600;
      color: var(--text-3);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 4px 10px 2px;
    }

    .char-select-option {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      cursor: pointer;
      transition: background 0.1s;
      font-size: 12px;
      font-family: var(--mono);
      color: var(--text-1);
    }

    .char-select-option:hover {
      background: var(--bg-3);
    }

    .char-select-option.active {
      background: var(--bg-4);
    }

    .char-select-option .opt-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .char-select-option .opt-name {
      flex: 1;
    }

    .char-select-option .opt-count {
      font-size: 10px;
      color: var(--text-3);
    }

    /* Panel marqueurs : liste des marqueurs — mêmes lignes .char-row que le
       panneau personnages, empilées normalement (pas de flex/align-items ici,
       qui empêchait les lignes de s'étirer sur toute la largeur et écrasait
       la pastille de couleur / le bouton supprimer). */

    .btn.btn-ghost {
      display: flex;
      background: var(--bg-2);
      border: 1px solid var(--border);
      color: var(--accent);
      font-family: var(--font);
      font-size: 11px;
      padding: 5px 8px;
      border-radius: 3px;
      cursor: pointer;
      transition: all 0.15s;
      text-align: center;
      margin-top: 8px;
      margin-bottom: 8px;
      font-size:12px;
    }


    /* Panel repliques : liste des répliques */

    

    #piste-select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;

      background-color: var(--bg-3);
      border: 1px solid var(--border);
      color: var(--text-1);
      font-family: var(--mono);
      font-size: 12px;
      
      padding: 4px 24px 4px 8px; 
      width: 100px;
      border-radius: 4px;
      outline: none;
      cursor: pointer;

      background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238a8f9d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: calc(100% - 12px) center;
    }

    /* ── ROLE PICKER (panneau Propriétés) ──────────────────────────── */
    .role-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      border-radius: 20px;
      border: 1.5px solid transparent;
      font-size: 10px;
      font-family: var(--font);
      font-weight: 500;
      cursor: pointer;
      transition: all 0.12s;
      background: var(--bg-3);
      color: var(--text-2);
      white-space: nowrap;
    }

    .role-pill:hover {
      border-color: currentColor;
      opacity: 0.9;
    }

    .role-pill.active {
      border-color: currentColor;
      background: var(--bg-4);
      color: var(--text-1);
    }

    .role-pill-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* Pas de padding-top ici — voir le commentaire de .right-zone .zone-content
       (même conteneur de scroll, même principe : #tab-props compense lui-même). */
    #properties-panel {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding: 0 12px 12px;
    }

    /* Onglet SANS barre collée en haut (pas de .roster-toolbar/.rep-toolbar) —
       compense le padding-top retiré de son conteneur de scroll (#properties-panel
       / .zone-content, selon la zone où il est ancré). */
    #tab-props {
      padding-top: 12px;
    }

    .prop-group {
      display: flex;
      flex-direction: column;
      margin-bottom: 16px;
      gap: 6px;
    }

    .prop-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--text-3);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .prop-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 7px;
    }

    .prop-row label {
      font-size: 12px;
      color: var(--text-3);
      flex: 1;
    }

    .prop-row-input-textarea label {
      font-size: 10px;
      font-weight: 800;
      color: var(--text-3);
    }

    /* Flèche discrète « réduire le champ » à côté de TEXTE VF / TEXTE VO (voir togglePropField). */
    .prop-row-input-textarea { display: flex; align-items: center; gap: 4px; }
    .prop-collapse-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 16px; height: 16px; padding: 0;
      background: none; border: none; border-radius: 3px;
      color: var(--text-3); opacity: .55; cursor: pointer;
      transition: opacity .15s, transform .15s, background .15s;
    }
    .prop-collapse-btn:hover { opacity: 1; background: var(--bg-4); }
    .prop-collapse-btn.collapsed { transform: rotate(-90deg); }

    .prop-input {
      background: var(--bg-3);
      border: 1px solid var(--border);
      color: var(--text-1);
      font-family: var(--mono);
      font-size: 12px;
      padding: 4px 4px;
      border-radius: 4px;
      width: 100px;
      text-align: left;
      outline: none;
      transition: border-color 0.15s;
    }
    

    .prop-input:focus {
      border-color: var(--accent);
    }

    /* Toolbar de recherche dans l'onglet répliques */

    .input-research {
      background: var(--bg-3) url('images/search-white.svg') no-repeat 9px center;
      background-size: 12px 12px;
      border: 1px solid var(--border);
      color: var(--text-3);
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 700;
      padding: 3px 8px 3px 30px;
      border-radius: 4px;
      width: 100%;
      text-align: left;
      outline: none;
      transition: border-color 0.15s;
      
    }

    .input-research:focus {
      border-color: var(--accent);
    }

    /* Ancrée en haut du panneau Répliques — voir .roster-toolbar pour le
       principe complet (Marqueurs/Personnages, même mécanique). */
    .rep-toolbar {
      display: flex;
      gap: 6px;
      margin: 0 -12px 10px;
      padding: 12px 12px 0;
      flex-wrap: wrap;
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--bg-1);
    }
    
    .rep-toolbar .input-research { 
      flex: 1; 
      min-width: 0; 
    }   

    .rep-mode-toggle {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }

    .rep-mode-btn {
      padding: 6px 7px;
      background: var(--bg-3);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text-3);
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: all .12s;
    }
    .rep-mode-btn:hover { 
      color: var(--text-1); 
      border-color: var(--text-3); 
    }

    .rep-mode-btn.active {
      background: var(--accent);
      color: #111;
      border-color: var(--accent);
    }

    /* ------------------------ */

    .color-swatch {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      border: 1px solid var(--border);
      cursor: pointer;
    }

    /* ── Sélecteur de personnage : select + bouton d'ajout + mini-formulaire ── */
    .char-picker {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 1;
      min-width: 0;
      justify-content: flex-end
    }

    .char-picker .prop-input {
      flex: 1;
      min-width: 66px;
    }

    .char-picker .char-add-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      aspect-ratio: 1 / 1;
      padding: 0;
      cursor: pointer;
    }

    .char-picker .prop-input,
    .char-picker .char-add-btn {
      box-sizing: border-box;
      height: 25px;
      line-height: 1;
      margin: 0;
    }

    .char-add-btn {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--bg-4);
      color: var(--text-1);
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.12s;
    }
    .char-add-btn:hover { background: var(--accent); color: #111; border-color: var(--accent); }

    /* Case « Voix off » : même bouton carré que le + des rôles, coche quand active */
    .voice-off-box { width: 16px; height: 16px; border-radius: 4px; padding: 0; position: relative; }
    .voice-off-box[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
    .voice-off-box[aria-checked="true"]::after {
      content: '';
      position: absolute;
      left: 4px; top: 1px;
      width: 4px; height: 8px;
      border: solid #111;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }

    .char-add-form {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .char-add-form .prop-input { flex: 1; min-width: 0; }
    .char-add-form input[type="color"] {
      flex-shrink: 0;
      width: 32px;
      height: 28px;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg-4);
      cursor: pointer;
    }
    .char-add-confirm {
      flex-shrink: 0;
      height: 28px;
      padding: 0 10px;
      border-radius: 6px;
      border: 1px solid var(--accent);
      background: var(--accent);
      color: #111;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }
    .char-add-confirm:hover { filter: brightness(1.08); }

    /* ── Panneau PERSONNAGES — lignes façon maquette ── */
    .char-empty { text-align: center; padding: 32px 16px; color: var(--text-3); font-size: 12px; }

    .char-row {
      position: relative;
      display: flex; align-items: center; gap: 12px;
      padding: 8px 10px; border-radius: 8px;
      transition: background .1s;
    }
    .char-row:hover { background: rgba(255, 255, 255, 0.05); }

    /* Pastille de couleur cliquable (input color masqué par-dessus) */
    .char-dot {
      position: relative;
      width: 11px; height: 11px; border-radius: 50%;
      flex-shrink: 0; cursor: pointer; overflow: hidden;
    }
    .char-dot input[type="color"] {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      opacity: 0; cursor: pointer;
      border: none; padding: 0; background: none;
    }

    /* Nom : input qui ressemble à du texte, éditable au clic */
    .char-name-edit {
      flex: 1; min-width: 0;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 4px;
      color: var(--text-1);
      font-size: 14px; font-family: inherit;
      padding: 2px 6px; outline: none;
      transition: border-color .12s, background .12s;
    }
    .char-name-edit:hover { border-color: var(--border); }
    .char-name-edit:focus { border-color: var(--accent); background: var(--bg-3); }

    /* Initiale à droite (masquée au survol pour laisser place au ✕) */
    .char-initial {
      flex-shrink: 0;
      width: 16px; text-align: center;
      color: var(--text-3);
      font-family: var(--mono); font-size: 13px;
    }
    .char-row:hover .char-initial { opacity: 0; }

    /* Bouton supprimer : apparaît au survol, à la place de l'initiale */
    .char-del {
      position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
      display: none;
      background: none; border: none; padding: 2px 5px; border-radius: 4px;
      color: var(--text-3); font-size: 13px; cursor: pointer;
    }
    .char-row:hover .char-del { display: block; }
    .char-del:hover { color: var(--red); }

    /* ── Panneau MARQUEURS — reprend la structure/le design du panneau
       personnages (.char-row/.char-dot/.char-name-edit), avec le timecode à la
       place de l'initiale. Le TC et le ✕ restent des éléments de flux normaux
       (pas de ✕ en position absolute superposé comme .char-del) : dans un
       panneau docké étroit, la marge réservée pour ce chevauchement faisait
       dépasser la ligne du panneau — ici tout se partage la largeur disponible
       et rétrécit normalement. */
    .char-row.marker-row { gap: 8px; }
    .char-row.marker-row.selected { background: rgba(255, 255, 255, 0.07); }

    .marker-tc {
      flex-shrink: 0;
      width: 12ch;
      text-align: center;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 4px;
      color: var(--text-2);
      font-family: var(--mono); font-size: 11px; letter-spacing: .02em;
      padding: 2px 3px;
      outline: none;
      transition: border-color .12s, background .12s, color .12s;
    }
    .marker-tc:hover { border-color: var(--border); }
    .marker-tc:focus { border-color: var(--accent); background: var(--bg-3); color: var(--text-1); }

    .marker-del {
      flex-shrink: 0;
      background: none; border: none; padding: 2px 3px; border-radius: 4px;
      color: var(--text-3); font-size: 13px; cursor: pointer;
    }
    .marker-del:hover { color: var(--red); background: rgba(255, 255, 255, 0.05); }

    /* ── TIMELINE AREA ───────────────────────────────────── */

    #timeline-area {

      height: var(--timeline-area-h);
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      background: var(--bg-0);

    }

    /* Poignée entre #main-top (vidéo/panneaux) et #timeline-area — glisser
       change UNIQUEMENT --timeline-area-h (voir _startTimelineAreaResize dans
       Script.js). #transport-timeline et #ruler-wrap ont tous deux
       flex-shrink:0 et seul #tracks-wrap est flex:1 à l'intérieur de
       #timeline-area : agrandir la zone n'étire donc jamais leurs proportions,
       seule la zone des pistes grandit. Le bas de #timeline-area reste ancré
       au footer car #main-top (au-dessus) est le seul élément flexible de la
       colonne #main — il absorbe seul la différence. */
    #timeline-area-resizer {
      height: 6px;
      margin-top: -3px;
      margin-bottom: -3px;
      cursor: ns-resize;
      position: relative;
      z-index: 5;
      flex-shrink: 0;
    }
    #timeline-area-resizer:hover {
      background: var(--accent);
      opacity: .5;
    }

    #transport-timeline {
      background: var(--bg-1);
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 10px 10px;
      gap: 20px;
      flex-shrink: 0;
      
    }

    .left-timeline-tools {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    /* Largeur FIXE (= largeur de la colonne de labels de pistes, voir la
       ruler juste en dessous) plutôt que dictée par son contenu : sinon,
       depuis que seul le bouton ACTIF affiche son texte (voir .view-toggle
       button plus bas), la largeur totale des 3 boutons varie selon lequel
       est actif — ce qui décalait le VU-mètre juste à droite (#master-vu) à
       chaque changement de vue. Largeur fixe → tout ce qui suit reste ancré,
       aligné avec le début de la ruler. */
    .left-timeline-tools .view-toggle {
      /* moins le padding de #transport-timeline (10px) et le gap (14px) : le VU-mètre qui suit démarre
         ainsi pile là où commence la timeline (fin de la colonne des entêtes de piste) */
      width: var(--timeline-left);
      flex-shrink: 0;
    }

    .middle-timeline-tools {
      display: flex;
      align-items: center;
      gap: 14px;
      margin: 0 auto;
    }

    .right-timeline-tools {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .follow-lock-btn {
      margin-left: auto;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: 1px solid transparent;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      color: var(--text-3);
      flex-shrink: 0;
      transition: all 0.12s;
    }

    /* Icône chaîne (verrouillé / déverrouillé). brightness(0) invert(1) force
       l'icône en blanc quel que soit le PNG source ; pleine quand le suivi est actif. */
    .follow-lock-btn img {
      width: 14px;
      height: 14px;
      object-fit: contain;
      display: block;
      pointer-events: none;
      filter: brightness(0) invert(1);
      opacity: .6;
    }
    .follow-lock-btn.active img { opacity: 1; }
    /* Icônes personnalisées (PNG 500×500 avec leur propre fond) : pas de filtre blanc, elles
       remplissent le bouton ; même atténuation au repos / pleine quand actif que les autres. */
    .follow-lock-btn img.icon-full { width: 100%; height: 100%; border-radius: 3px; object-fit: cover; filter: none; }
    .tools-group .follow-lock-btn img.icon-full { width: 25px; height: 25px; }
    .tools-group .follow-lock-btn { width: 27px; height: 27px; box-sizing: border-box; padding: 0; }
    /* Boutons à gauche du zoom (suivi de la tête de lecture, retour au point de départ) :
       boutons de 20px. */
    #follow-lock-btn, #play-return-lock-btn { width: 20px; height: 20px; box-sizing: border-box; padding: 0; border: 0; }   /* sans bordure : icône pleine taille */
    #follow-lock-btn img, #play-return-lock-btn img { width: 20px; height: 20px; }
    /* Survol : ces deux boutons n'ont pas de bordure (border: 0), le contour gris des autres
       boutons au survol est donc simulé par un outline décalé de 2px (n'écrase pas l'icône,
       ne change pas la taille). Même règle que les outils : rien au survol quand actif. */
    #follow-lock-btn:not(.active):hover, #play-return-lock-btn:not(.active):hover {
      outline: 1px solid var(--border-hi);
      outline-offset: 2px;
    }
    #follow-lock-btn:not(.active):hover img, #play-return-lock-btn:not(.active):hover img { opacity: 1; }

    .follow-lock-btn:hover {
      color: var(--text-1);
      border-color: var(--border-hi);
    }

    .follow-lock-btn.active {
      color: var(--accent);
      background: rgba(232, 200, 74, 0.14);
      border-color: var(--accent);
    }

    /* Barre #transport-timeline : icônes détourées (sans fond) → pas de pastille teintée
       ni de bordure quand le bouton est actif ; le fond reste celui de la barre et
       l'icône passe en jaune accent (voir juste en dessous). */
    #transport-timeline .follow-lock-btn.active,
    #transport-timeline .follow-lock-btn.active:hover {
      background: transparent;
      border-color: transparent;
    }
    /* Icône active en jaune accent (filtre SVG #tint-accent, voir index.html) : les icônes
       blanches sans fond passent d'abord par le filtre blanc, celles à fond sombre (icon-full) directement. */
    #transport-timeline .follow-lock-btn.active img { opacity: 1; filter: brightness(0) invert(1) url(#tint-accent); }
    #transport-timeline .follow-lock-btn.active img.icon-full { filter: url(#tint-accent); }

     /* ── RULER ───────────────────────────────────────────── */
    #ruler-wrap {
      display: grid;
      grid-template-columns: var(--vu-w) var(--timeline-left) minmax(0, 1fr);
      flex-shrink: 0;
      background: var(--bg-1);
      position: relative;
    }

    

    #ruler-canvas-wrap {
      position: relative;
      min-width: 0;
    }

    #ruler-canvas {
      display: block;
      box-sizing: content-box;
      padding-left:var(--timeline-left);
    }

    /* Superposés dans la zone morte à gauche du ruler (avant le padding-left
       du canvas, là où aucune graduation n'est dessinée) : ne touchent ni la
       taille ni la position de #ruler-canvas-wrap / #ruler-canvas. Taille
       standard de .follow-lock-btn (20px) — volontairement plus grands que
       la hauteur du ruler (18px), ils dépassent légèrement au lieu de la
       forcer à grandir. */
    #ruler-audio-toggles {
      position: absolute;
      left: 8px; top: 50%;
      transform: translateY(-50%);
      display: none;
      gap: 4px;
      z-index: 6;
    }
    #ruler-audio-toggles .follow-lock-btn {
      margin-left: 0;
    }

    /* Symétrique de #ruler-audio-toggles côté vue Rythmo (bande) — visible par
       défaut (masqué en vue Édition audio via setTimelineView). */
    #ruler-rythmo-toggles {
      position: absolute;
      left: 8px; top: 50%;
      transform: translateY(-50%);
      display: flex;
      gap: 4px;
      z-index: 6;
    }
    #ruler-rythmo-toggles .follow-lock-btn {
      margin-left: 0;
    }
    #ruler-subtitles-toggles {
      position: absolute;
      left: 8px; top: 50%;
      transform: translateY(-50%);
      gap: 4px;
      z-index: 6;
    }
    #ruler-subtitles-toggles .follow-lock-btn { margin-left: 0; }
    /* Boutons du ruler à icône détourée (sans fond) : actifs, fond plein --bg-1 (même
       teinte que les anciens PNG à fond #15161A, ex. le T) au lieu de la pastille jaune
       translucide ; seule la bordure accent signale l'état actif. */
    #ruler-audio-toggles .follow-lock-btn.active,
    #ruler-rythmo-toggles .follow-lock-btn.active,
    #ruler-subtitles-toggles .follow-lock-btn.active { background: var(--bg-1); }

    /* Bouton "+" ajouter une piste : sorti de #ruler-rythmo-toggles pour être
       aligné sur le bord droit de l'en-tête des pistes (#track-labels, large
       de var(--timeline-left)) plutôt que groupé à gauche avec les autres
       toggles — même zone morte, même logique de superposition. Sa visibilité
       (masqué en vue Édition audio) est pilotée avec le reste du groupe dans
       setTimelineView (audio-edit-ui.js). */
    #add-track-btn {
      position: absolute;
      left: calc(var(--timeline-left) - 8px);
      top: 50%;
      transform: translate(-100%, -50%);
      margin-left: 0;
      z-index: 6;
    }
    #add-track-btn:disabled {
      opacity: .3;
      cursor: not-allowed;
    }

    /* Les .follow-lock-btn ont margin-left:auto : sans ça, des boutons voisins se
       partagent l'espace libre et s'écartent. Seul le premier du groupe le garde. */
    #rect-select-mode-btn, #clip-cut-mode-btn, #clip-merge-mode-btn, #play-return-lock-btn { margin-left: 0; margin-right: 0; }   /* espacement uniforme : seul le gap du conteneur (14px) sépare les boutons */
    /* Groupe « Outils » : libellé centré en haut, flanqué de deux traits gris (gauche et droite) */
    .tools-slot { flex: none; display: flex; justify-content: center; position: relative; top: 4px; }   /* abaissé de 4px */
    .tools-group {
      position: relative;
      display: flex; align-items: center; gap: 14px;
      padding: 0 12px;   /* symétrique : les boutons restent centrés verticalement comme les autres éléments */
    }
    .tools-group-label {
      position: absolute; top: -9px; left: 0; right: 0;   /* déborde au-dessus : ne grandit pas la barre */
      display: flex; align-items: center; gap: 6px;
      font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
      color: var(--text-3); line-height: 1; pointer-events: none;
    }
    .tools-group-label::before, .tools-group-label::after {
      content: ''; flex: 1; height: 1px; background: var(--border-hi, #3a3f4d);
    }
    #rect-select-mode-btn, #clip-cut-mode-btn, #clip-merge-mode-btn { width: 30px; height: 30px; }   /* outils de sélection / coupe / fusion : 10px de plus que les autres boutons (20px) */

    /* Playhead */
    #playhead {
      position: absolute;
      height: 100vh;
      top: 0;
      width: 0px;
      background: var(--accent);
      pointer-events: none;
      z-index: 20;
    }

    #playhead::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);                  /* centré sur la barre, quelle que soit la largeur */
      width: 15px;
      height: var(--ruler-h, 18px);                 /* triangle jaune à la hauteur du ruler */
      background: var(--accent);
      clip-path: polygon(0 0, 100% 0, 50% 100%);    /* pointe vers le bas */
    }


    /* ── TRACKS SCROLL AREA ──────────────────────────────── */
    #tracks-wrap {
      flex: 1;
      overflow: hidden;
      display: flex;
      position: relative;
      min-height: 0;
      
    }

    /* Pas de scroll natif ici : #tracks-scroll (le canvas) et #track-labels
       n'ont pas forcément le même ratio scrollHeight/clientHeight (le canvas
       a une VRAIE scrollbar horizontale qui réduit sa hauteur utile, pas les
       en-têtes) — deux `overflow:auto` synchronisés par copie de scrollTop
       finissaient par dériver l'un de l'autre en descendant vers le bas
       (l'un touche son maximum avant l'autre → clampé plus tôt). #track-labels
       est donc en overflow:hidden ; son contenu (#track-labels-inner) est
       déplacé par transform: translateY, piloté à l'identique du scrollTop
       du canvas (voir renderTrackLabels/syncScroll dans Script.js) — un
       simple décalage visuel, jamais soumis à un maximum qui pourrait différer. */
    #track-labels {
      width: var(--timeline-left);
      flex-shrink: 0;
      overflow: hidden;
      border-right: 1px solid var(--border);
      background: var(--tl-bg, Black);
    }

    /* Scroll VERTICAL uniquement (nombre de pistes variable depuis l'ajout du
       bouton "+" — la molette sur la colonne des pistes était désactivée
       quand le nombre de pistes était fixe à 4). Le scroll HORIZONTAL vit
       maintenant sur #tracks-scroll (enfant, hauteur intrinsèque) : deux
       axes séparés plutôt qu'un seul avec les deux, sinon la scrollbar
       horizontale — collée au bas de LA FENÊTRE VISIBLE, pas à la fin du
       contenu — finit par recouvrir une piste dès qu'un scroll vertical est
       nécessaire (voir la note dans index.html). */
    #tracks-vscroll {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      min-height: 0;
    }

    /* Scroll HORIZONTAL uniquement, hauteur INTRINSÈQUE (pas de flex:1, pas
       de height fixe) : sans contrainte de hauteur, si sa VRAIE scrollbar
       native était visible, le navigateur l'ajouterait EN PLUS, sous le
       contenu (canvas), au lieu de la réserver À L'INTÉRIEUR d'une hauteur
       fixe. Si le total (pistes + scrollbar) dépasse la fenêtre de
       #tracks-vscroll, c'est LUI qui prend un scroll vertical (barre
       classique sur le bord droit, jamais par-dessus une piste).
       overflow-y:hidden : le scroll vertical est géré par le parent, pas ici.
       Scrollbar native cachée (scrollbar-width:none + ::-webkit-scrollbar) :
       c'est #tracks-hscrollbar, une barre CUSTOM hors de #tracks-wrap (voir
       index.html), qui pilote scrollLeft et reste visible en permanence,
       jamais recouverte par le scroll vertical de #tracks-vscroll. */
    #tracks-scroll {
      overflow-x: auto;
      overflow-y: hidden;
      position: relative;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
    }
    #tracks-scroll::-webkit-scrollbar {
      display: none;
    }

    /* ── Barre de défilement horizontale CUSTOM (voir index.html) ──────────
       Toujours sous #tracks-wrap, jamais dedans : contrairement à la vraie
       scrollbar de #tracks-scroll (masquée ci-dessus), elle ne peut jamais
       être recouverte par le scroll vertical des pistes. Décalée de
       var(--timeline-left) pour rester alignée sous le canvas, comme le
       ruler. Mise à jour/pilotée par updateHScrollbarUI (Script.js). */
    #tracks-hscrollbar {
      height: 12px;
      flex-shrink: 0;
      margin-left: var(--timeline-left);
      background: var(--bg-1);
      border-top: 1px solid var(--border);
      position: relative;
      cursor: pointer;
    }
    #tracks-hscrollbar-thumb {
      position: absolute;
      top: 2px;
      height: 8px;
      background: var(--bg-4);
      border-radius: 4px;
      cursor: grab;
      transition: background 0.12s;
    }
    #tracks-hscrollbar-thumb:hover {
      background: var(--border-hi);
    }
    #tracks-hscrollbar-thumb.dragging {
      background: var(--accent);
      cursor: grabbing;
    }

    /* ── Barre de défilement unifiée dans toute l'application ──────────
     Reprend l'apparence de celle de la bande rythmo, pour remplacer les
     barres natives (grises, épaisses) des modales et panneaux. */
    *::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    *::-webkit-scrollbar-track {
      background: var(--bg-1);
      border-radius: 4px;
    }

    *::-webkit-scrollbar-thumb {
      background: var(--bg-4);
      border-radius: 4px;
    }

    *::-webkit-scrollbar-thumb:hover {
      background: var(--border-hi);
    }

    *::-webkit-scrollbar-corner {
      background: var(--bg-1);
    }

    * {
      scrollbar-width: thin;
      scrollbar-color: var(--bg-4) var(--bg-1);
    }

    #tracks-vscroll::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    #tracks-vscroll::-webkit-scrollbar-track {
      background: var(--bg-1);
    }

    #tracks-vscroll::-webkit-scrollbar-thumb {
      background: var(--bg-4);
      border-radius: 4px;
    }

    #tracks-canvas-container {
      position: relative;
    }

    /* ── TRACK LABEL ─────────────────────────────────────── */
    .track-label {
      height: var(--track-h);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 12px;
      gap: 10px;
      cursor: pointer;
      transition: background 0.1s;
    }

    /* Poignée de redimensionnement ENTRE deux pistes (voir renderTrackLabels /
       _startTrackHeightDrag) : hauteur nette nulle dans le flux (6px de boîte
       compensés par -3px de marge de chaque côté) pour ne pas décaler les
       labels par rapport aux pistes du canvas — seule une zone de prise plus
       large (visuelle + hit-test) déborde par-dessus la bordure existante. */
    .track-height-resizer {
      height: 6px;
      margin-top: -3px;
      margin-bottom: -3px;
      cursor: ns-resize;
      position: relative;
      z-index: 5;
    }
    .track-height-resizer:hover {
      background: var(--accent);
      opacity: .5;
    }

    .track-label:hover { background: var(--bg-2); }
    .track-label.selected { background: var(--accent-dim); }
    .track-label.track-focused {
      outline: 1px solid var(--accent);
      outline-offset: -1px;
    }

    /* Conteneur de l'index de piste : au survol, l'index (01, 02…) cède la
       place au bouton "supprimer cette piste" (même principe que
       .char-row/.char-initial/.char-del pour les personnages). */
    .track-idx-wrap {
      position: relative;
      min-width: 16px;
      flex-shrink: 0;
    }
    .track-label:hover .track-idx-wrap .track-index { opacity: 0; }
    .track-label:hover .track-idx-wrap .track-del { display: block; }

    /* Index de piste : P1, P2, … (même format que l'onglet Effets) */
    .track-index {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 800;
      color: var(--tl-text-dim, var(--text-3));
      min-width: 16px;
      flex-shrink: 0;
      letter-spacing: .02em;
    }

    /* Bouton supprimer la piste : apparaît au survol, à la place de l'index */
    .track-del {
      position: absolute; left: 0; top: 50%; transform: translateY(-50%);
      display: none;
      background: none; border: none; padding: 0; margin: 0;
      color: var(--text-3); font-size: 12px; line-height: 1; cursor: pointer;
    }
    .track-del:hover { color: var(--red); }

    .track-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--tl-text, var(--text-1));
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex-shrink: 1;
    }

    .track-meta {
      font-size: 12px;
      color: var(--tl-text-dim, var(--text-3));
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* Groupe de boutons, poussé à droite */
    .track-btns {
      display: flex;
      gap: 6px;
      margin-left: auto;
      align-items: center;
      flex-shrink: 0;
    }

    /* Base : carré arrondi sombre, comme la maquette */
    .trkbtn {
      width: 22px;
      height: 22px;
      background: var(--bg-4);
      border: 1px solid transparent;
      border-radius: 4px;
      cursor: pointer;
      color: var(--text-3);
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: all 0.1s;
    }

    .trkbtn:hover {
      border-color: var(--border-hi);
      color: var(--text-1);
    }

    /* Boutons à icône PNG */
    .trkbtn.icon img {
      width: 13px;
      height: 13px;
      object-fit: contain;
      display: block;
      pointer-events: none;
    }

    /* Réglages / FX : icône blanche sur fond sombre ; icône noire sur fond jaune quand actif.
       (les deux variantes d'icône sont fournies, donc pas de filtre ici) */
    .trkbtn.fx.active {
      background: var(--accent);
      border-color: var(--accent);
    }

    /* Mute / Solo */
    .trkbtn.ms { font-size: 11px; }
    .trkbtn.ms.m.active {
      color: #fff;
      background: var(--red);
      border-color: var(--red);
    }
    .trkbtn.ms.s.active {
      color: #111;
      background: var(--green);
      border-color: var(--green);
    }

    /* Bouton d'enregistrement : pastille ronde (rouge quand armé) */
    .trkbtn.rec {
      border-radius: 20%;
      width: 22px;
      height: 22px;
    }
    .trkbtn.rec .rec-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--text-3);
      transition: all .12s;
    }
    .trkbtn.rec:hover .rec-dot { background: var(--red); }
    .trkbtn.rec.armed .rec-dot {
      background: var(--red);
      box-shadow: 0 0 6px rgba(232, 74, 74, .7);
    }

    /* Cadenas = afficher/masquer la piste en plein écran (live).
       brightness(0) invert(1) force l'icône en BLANC quel que soit le PNG source.
       Plein (visible) par défaut ; estompé + barré quand la piste est masquée. */
    .trkbtn.icon.fsvis { background: transparent; }   /* PNG détouré : pas de pastille grise --bg-4, fond de l'en-tête de piste */
    .trkbtn.icon.fsvis img {
      filter: brightness(0) invert(1);
    }
    .trkbtn.icon.fsvis.off {
      opacity: .4;
    }
    .trkbtn.icon.fsvis.off img {
      filter: brightness(0) invert(1) opacity(.9);
    }

    .fx-float {
      position: fixed;
      display: none;
      min-width: 340px;
      max-width: min(460px, calc(100vw - 40px));
      background: var(--bg-2);
      border: 1px solid var(--border-hi);
      border-radius: 8px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
      font-size: 12px;
      overflow: hidden;
    }

    .fx-float-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 10px;
      background: var(--bg-3);
      border-bottom: 1px solid var(--border);
      cursor: move;
      user-select: none;
    }

    /* Épingle (garder la fenêtre ouverte même en ouvrant un autre effet) — juste avant la croix. */
    .fx-pin-btn {
      flex: 0 0 auto;
      border: none;
      background: transparent;
      color: var(--text-3);
      line-height: 1;
      padding: 2px 6px;
      margin-left: 12px;   /* espace avec le titre, même quand il est long */
      margin-right: 2px;
      cursor: pointer;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: .55;
      transform: rotate(45deg);
    }
    .fx-pin-btn img {
      width: 14px; height: 14px;
      object-fit: contain;
      filter: brightness(0) invert(1);
    }
    .fx-pin-btn:hover { opacity: .9; background: var(--bg-4); }
    .fx-pin-btn.on { opacity: 1; transform: rotate(0deg); background: var(--accent); }
    .fx-pin-btn.on img { filter: brightness(0); }   /* icône sombre sur fond accent clair, épinglé */

    /* Presets (en-tête d'un effet, à gauche de l'épingle — voir _fxPresetFill) */
    .fx-preset { display: flex; align-items: center; gap: 2px; margin-left: 10px; flex-shrink: 0; cursor: default; }
    .fx-preset-label { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-right: 4px; }
    .fx-preset-select { width: 130px; font-size: 11px; padding: 2px 4px 2px 6px; height: 24px; display: flex; align-items: center; gap: 4px; cursor: pointer; text-align: left; }
    .fx-preset-cur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fx-preset-caret { flex-shrink: 0; font-size: 9px; color: var(--text-3); }
    /* Liste des presets (voir _fxPresetOpen) : au-dessus des fenêtres d'effets, croix par preset */
    .fx-preset-menu { z-index: 5100; min-width: 170px; max-height: 320px; overflow-y: auto; }
    .fx-preset-item { display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 4px; font-size: 12px; color: var(--text-1); cursor: pointer; }
    .fx-preset-item:hover { background: var(--bg-3); }
    .fx-preset-item.on { color: var(--accent); font-weight: 600; }
    .fx-preset-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fx-preset-del { flex-shrink: 0; width: 18px; height: 18px; padding: 0; border: none; border-radius: 3px; background: transparent;
                     color: var(--text-3); font-size: 14px; line-height: 1; cursor: pointer; opacity: .5; }
    .fx-preset-item:hover .fx-preset-del { opacity: 1; }
    .fx-preset-del:hover { color: var(--red); background: rgba(232, 74, 74, 0.15); }
    .fx-preset-sep { height: 1px; background: var(--border); margin: 3px 4px; }
    .fx-preset .fx-row-icon-btn { width: 24px; height: 24px; }
    .fx-preset .fx-row-icon-btn img { width: 14px; height: 14px; }

    .fx-float-title {
      flex: 1;          /* prend la place restante : épingle et croix restent groupées à droite */
      min-width: 0;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-1);
    }

    .fx-float-body {
      padding: 10px 12px;
      max-height: calc(100vh - 180px);
      overflow-y: auto;
    }

    .fx-slot {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 10px;
      margin-bottom: 6px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.03);
    }

    .fx-slot.bypassed {
      opacity: .5;
    }

    /* ── Sélecteur de piste : rangée de pastilles ──────────────────── */
    .fx-track-pills {
      display: flex;
      gap: 6px;
      margin-top: 12px;      /* espace entre l'en-tête du panneau et les pastilles de pistes */
      margin-bottom: 12px;
    }
    .fx-track-pill {
      flex: 1;
      min-width: 0;
      padding: 8px 4px;
      background: var(--bg-3);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-3);
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      transition: all .12s;
      /* Permet à .fx-track-pill-full / -short (ci-dessous) de réagir à SA
         propre largeur une fois rétréci par le flex:1 du parent — voir
         renderFxRack() dans audio-edit-ui.js. */
      container-type: inline-size;
      container-name: fxpill;
    }
    .fx-track-pill:hover { border-color: var(--border-hi); color: var(--text-1); }
    .fx-track-pill.active { border-color: var(--accent); color: var(--accent); }

    /* Glisser un effet d'une piste vers cette pastille (transfert / Alt = copie) */
    .fx-track-pill.fx-drop-target {
      border-color: var(--accent);
      background: rgba(232, 200, 74, 0.10);
      color: var(--accent);
    }

    /* Nom complet par défaut ; sous ~44px de large (panneau docké étroit +
       beaucoup de pistes), on bascule sur "P1"/"P2"… plutôt que de laisser le
       nom se tronquer en "Pi…" (illisible et peu informatif).
       pointer-events:none sur les deux : SANS ça, le survol de ce texte (qui
       remplit presque tout le bouton) fait basculer la cible géométrique du
       glisser-déposer du <button> vers ce <span> — dragenter/dragleave se
       déclenchent à CHAQUE frontière bouton/texte (comme mouseover/mouseout,
       pas mouseenter/mouseleave), et le <span> n'ayant pas de gestionnaire
       dragover, le survol paraît ignoré et le dépôt final est refusé par le
       navigateur. Voir fxTrackPillDragOver/Drop (audio-edit-ui.js). */
    .fx-track-pill-full {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      pointer-events: none;
    }
    .fx-track-pill-short { display: none; pointer-events: none; }
    @container fxpill (max-width: 44px) {
      .fx-track-pill-full { display: none; }
      .fx-track-pill-short { display: block; }
    }

    /* ── Ligne d'insert : pastille (bypass) + nom + % + icônes ────────── */
    .fx-row-dot {
      flex-shrink: 0;
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--text-1);
    }
    .fx-slot.bypassed .fx-row-dot { background: var(--text-3); }

    .fx-row-name {
      flex: 1;
      min-width: 0;
      cursor: pointer;
      color: var(--text-1);
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .fx-row-name:hover { color: var(--accent); }

    .fx-row-mix {
      flex-shrink: 0;
      font-family: var(--mono);
      font-size: 11px;
      color: var(--text-3);
    }

    .fx-row-icon-btn {
      flex-shrink: 0;
      width: 26px; height: 26px;
      background: none;
      border: none;
      border-radius: 5px;
      color: var(--text-2);
      font-size: 15px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .fx-row-icon-btn:hover { color: var(--text-1); background: var(--bg-3); }
    .fx-row-icon-btn.active { background: var(--accent); color: #111; }
    .fx-row-icon-btn.danger { color: var(--red); }
    /* Ligne d'automation affichée (voir fxToggleAutomation) : contour bleu, pas rempli comme
       .active — même code couleur que .roster-btn.auto-active, cohérent partout. */
    .fx-row-icon-btn.auto-active {
      border: 1px solid var(--accent-2);
      background: rgba(74, 155, 232, 0.10);
      color: var(--accent-2);
    }
    .fx-row-icon-btn.danger:hover { background: rgba(232, 74, 74, 0.16); }
    /* Bouton Automation (PNG détouré) : pas de fond, ni au survol ni actif — le fond de la
       ligne d'effet reste visible ; seule la bordure (bleue si active) signale l'état. */
    .fx-row-icon-btn.fx-auto-btn,
    .fx-row-icon-btn.fx-auto-btn:hover,
    .fx-row-icon-btn.fx-auto-btn.auto-active { background: transparent; }
    .fx-row-icon-btn.fx-auto-btn.auto-active img.icon-full { filter: url(#tint-accent-2); opacity: 1; }   /* icône bleue quand la ligne d'automation est affichée (filtre SVG, voir index.html) */

    .fx-row-icon-btn img {
      width: 16px; height: 16px;
      object-fit: contain;
      filter: brightness(0) invert(1);
      opacity: .75;
    }
    .fx-row-icon-btn:hover img { opacity: 1; }
    .fx-row-icon-btn img.icon-full { width: 22px; height: 22px; border-radius: 4px; filter: none; }
    .fx-row-icon-btn.active img.icon-full { filter: none; }
    .fx-row-icon-btn.active img { filter: brightness(0); opacity: 1; }   /* icône sombre sur fond accent clair */

    .fx-slot-menu {
      position: fixed;
      background: var(--bg-2);
      border: 1px solid var(--border-hi);
      border-radius: 6px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      padding: 4px;
      min-width: 210px;
    }

    /* ── Bouton pastille remplaçant <input type="color"> ──────────────── */
    .color-swatch-btn {
      display: inline-block;
      width: 26px; height: 26px;
      border-radius: 5px;
      border: 1px solid var(--border);
      cursor: pointer;
      vertical-align: middle;
      transition: border-color .12s;
    }
    .color-swatch-btn:hover { border-color: var(--border-hi); }

    /* ── Petite fenêtre « Assigner un rôle » (nouvelle réplique sans rôle) ─────
       Flottante, sans voile sur le fond : ne bloque pas l'application. */
    .role-pick-popover.hidden { display: none; }
    .role-pick-popover {
      position: fixed;
      z-index: 9100;   /* au-dessus de la visite guidée (tutorial.js, 9000-9001) pour rester utilisable pendant l'étape 3 */
      width: 250px;
      background: var(--bg-2);
      border: 1px solid var(--border-hi);
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      padding: 10px 12px;
    }
    .role-pick-hint {
      margin-top: 8px;
      font-size: 11px;
      font-style: italic;
      color: var(--text-3, #888);
    }

    /* ── Popover palette de couleurs ────────────────────────────────── */
    .color-picker-popover.hidden { display: none; }
    .color-picker-popover {
      position: fixed;
      background: var(--bg-2);
      border: 1px solid var(--border-hi);
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      padding: 8px;
    }
    .cp-grid {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 4px;
    }
    .cp-swatch {
      width: 18px; height: 18px;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 4px;
      cursor: pointer;
      transition: transform .1s;
    }
    .cp-swatch:hover { transform: scale(1.15); border-color: var(--text-1); }

    .cp-custom-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--border);
      cursor: pointer;
    }
    .cp-custom-swatch {
      position: relative;
      width: 22px; height: 22px;
      border-radius: 5px;
      border: 1px solid var(--border);
      background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
      flex-shrink: 0;
      overflow: hidden;
      cursor: pointer;
    }
    .cp-custom-swatch input[type="color"] {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      opacity: 0;
      border: none; padding: 0; cursor: pointer;
    }
    .cp-custom-label {
      font-size: 12px;
      color: var(--text-2);
    }

    .fx-mix-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
      padding-top: 9px;
      border-top: 1px solid var(--border);
    }

    /* Curseurs de la fenêtre d'effet : piste et poignée à bords droits (pas la pilule arrondie
       du reste de l'appli, .custom-slider) — look plus "console de studio". */
    .fx-slider {
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
      cursor: pointer;
    }
    .fx-slider::-webkit-slider-runnable-track {
      height: 4px;
      background: var(--bg-4);
      border-radius: 0;
    }
    .fx-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 10px;
      height: 16px;
      margin-top: -6px;
      background: var(--accent);
      border-radius: 0;
      border: none;
    }
    .fx-slider::-moz-range-track {
      height: 4px;
      background: var(--bg-4);
      border-radius: 0;
    }
    .fx-slider::-moz-range-thumb {
      width: 10px;
      height: 16px;
      background: var(--accent);
      border-radius: 0;
      border: none;
    }

    /* Seuil / Ratio du compresseur : colonne verticale à gauche du graphique (curseur
       "fader" tourné, même piste/poignée à bords droits que .fx-slider ci-dessus). */
    .fx-vfader-col {
      display: flex;
      gap: 14px;
      margin-bottom: 10px;
    }
    .fx-vfader {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      width: 46px;
    }
    .fx-vfader-track {
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .fx-vfader input[type="range"] {
      width: 130px;
      height: 16px;
      transform: rotate(-90deg);
    }
    .fx-vfader-label {
      font-size: 10px;
      color: var(--text-3);
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .fx-vfader-val {
      font-size: 11px;
      font-family: var(--mono);
      color: var(--text-2);
    }

    /* Bouton ON / BYP de la fenêtre d'effet : plein jaune quand actif, gris avec texte rouge
       quand contourné (bypass) — distinct visuellement du bouton Automation à côté. */
    .fx-onbyp-btn {
      flex: 0 0 64px;
      border: 1px solid var(--border);
      border-radius: 4px;
      font-family: var(--font);
      font-size: 11px;
      font-weight: 600;
      padding: 5px 8px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .fx-onbyp-btn.on {
      background: var(--accent);
      border-color: var(--accent);
      color: #1a1a1a;
    }
    .fx-onbyp-btn.byp {
      background: var(--bg-2);
      color: var(--red);
    }
    .fx-onbyp-btn.byp:hover { border-color: var(--red); }

    /* Réverbération (voir _rvWindowHtml) : titres de partie, boutons d'espace (même esprit que
       les petits boutons de l'égaliseur : bordure fine, jaune quand actif), rangées de potards. */
    .rv-sec-title {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--text-3);
      margin: 10px 0 6px;
    }
    .rv-sec-title:first-child { margin-top: 0; }
    /* Petit bouton d'option des fenêtres d'effets (bordure fine, jaune quand actif) */
    .fx-chip-btn {
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--bg-3);
      color: var(--text-2);
      font-family: var(--font);
      font-size: 10px;
      font-weight: 600;
      padding: 3px 8px;
      cursor: pointer;
      transition: all 0.12s;
    }
    .fx-chip-btn:hover:not(:disabled) { border-color: var(--text-3); color: var(--text-1); }
    .fx-chip-btn.on { background: var(--accent); border-color: var(--accent); color: #1a1a1a; }
    .fx-chip-btn:disabled { opacity: .35; cursor: default; }
    /* De-noise spectral (voir _dnWindowHtml) */
    .dn-mode-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
    .dn-mode-row .dn-learn-btn { margin-left: auto; }
    .dn-learn-btn.learning { background: var(--red); border-color: var(--red); color: #fff; animation: dn-pulse 1s ease-in-out infinite; }
    @keyframes dn-pulse { 50% { opacity: .65; } }
    .dn-hint { font-size: 10px; color: var(--text-3); margin-bottom: 6px; line-height: 1.35; }
    .rv-space-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
    .rv-space-select { width: 220px; flex: 0 0 auto; font-size: 12px; padding: 4px 6px; }
    .rv-knob-row { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 8px; }
    .rv-knob-row .fx-knob-wrap { width: 66px; }   /* libellés « Coupe-bas », « Fréq. grave » sur une ligne */
    .rv-knob-row .fx-knob-label { white-space: nowrap; }

    /* Égaliseur de la réverbe : ON/OFF général + 4 colonnes (ON/OFF, Fréquence, petits Gain / Q) */
    .rv-eq-head { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; }
    .rv-eq-bands { display: flex; gap: 6px; justify-content: space-between; margin-bottom: 8px; }
    .rv-eq-band { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
                  padding: 4px 2px; border: 1px solid var(--border); border-radius: 6px; background: rgba(255,255,255,0.02); }
    .rv-eq-band-head { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; white-space: nowrap; }
    .rv-eq-band-knobs { display: flex; align-items: center; gap: 2px; }
    .rv-eq-small { display: flex; flex-direction: column; gap: 2px; }
    /* Petit potard (Gain / Q à côté de la fréquence) */
    .fx-knob-wrap-sm { width: 40px; gap: 0; }
    .fx-knob-sm { width: 22px; height: 22px; }
    .fx-knob-sm::before { inset: 3px; }
    .fx-knob-sm::after { height: 7px; width: 1.5px; }
    .fx-knob-wrap-sm .fx-knob-label { font-size: 8px; }
    .fx-knob-wrap-sm .fx-knob-val { font-size: 9px; }

    /* Potards ronds (égaliseur — voir _eqBandSlidersHtml/_fxKnobDragStart) : remplacent les
       curseurs horizontaux pour tenir plusieurs réglages par bande sur une seule ligne compacte.
       Anneau en conic-gradient (portion pleine = valeur courante, 270° de -135° à +135°),
       disque intérieur pour l'effet "donut", petite aiguille tournée via la même variable. */
    .fx-knob-row {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin: 2px 0;
    }
    .fx-knob-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      width: 46px;
      flex-shrink: 0;
    }
    .fx-knob {
      --knob-frac: 0;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      position: relative;
      cursor: ns-resize;
      flex-shrink: 0;
      background: conic-gradient(from 135deg,
        var(--accent) calc(var(--knob-frac) * 270deg),
        var(--bg-4) calc(var(--knob-frac) * 270deg) 270deg,
        transparent 270deg 360deg);
    }
    .fx-knob::before {
      content: '';
      position: absolute;
      inset: 5px;
      border-radius: 50%;
      background: var(--bg-2);
      border: 1px solid var(--border);
    }
    .fx-knob::after {
      content: '';
      position: absolute;
      left: 50%; top: 50%;
      width: 2px; height: 11px;
      background: var(--text-1);
      border-radius: 1px;
      /* La barre pointe vers le BAS au repos (son origine de rotation est au centre du potard,
         en haut d'elle-même) : rotate(0) = plein sud (135°+180°... voir calcul ci-dessous), pas
         plein nord comme on pourrait le supposer. L'anneau conic-gradient (--knob-frac) part lui
         de 135° et balaie 270° dans le sens horaire — pour que l'aiguille pointe exactement sur
         la limite jaune/grise (et pas décalée de 90°, bug précédent), il faut -45deg au lieu de
         -135deg : bearing = 180 + (-45 + frac*270) = 135 + frac*270, identique à l'anneau. */
      transform-origin: 50% 0%;
      transform: translate(-50%, 0) rotate(calc(-45deg + var(--knob-frac) * 270deg));
    }
    .fx-knob:hover::before { border-color: var(--text-3); }
    .fx-knob-label {
      font-size: 9px;
      color: var(--text-3);
      text-align: center;
      line-height: 1.15;
    }
    .fx-knob-val {
      font-size: 10px;
      font-family: var(--mono);
      color: var(--text-2);
      text-align: center;
      cursor: text;
    }
    .fx-knob-val:hover { color: var(--text-1); }

    /* Champ de saisie superposé au double-clic sur un potard (voir _fxKnobEditStart) —
       position:fixed calée sur le potard via getBoundingClientRect, au-dessus de tout
       (fenêtres d'effet flottantes comprises). */
    .fx-knob-edit-input {
      position: fixed;
      z-index: 6000;
      height: 18px;
      background: var(--bg-1);
      border: 1px solid var(--accent);
      border-radius: 4px;
      color: var(--text-1);
      font-family: var(--mono);
      font-size: 10px;
      text-align: center;
      padding: 0 2px;
      outline: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }

    /* Plus de poignée dédiée : toute la ligne se glisse pour réordonner. */
    .fx-slot[draggable="true"] { cursor: grab; }
    .fx-slot[draggable="true"]:active { cursor: grabbing; }

    .fx-slot.fx-dragging {
      opacity: .45;
    }

    .fx-slot.fx-drop-target {
      border-color: var(--accent);
      background: rgba(232, 200, 74, 0.10);
    }

    .fx-float-head .roster-btn {
      padding: 1px 6px;
      font-size: 11px;
      line-height: 1.5;
    }

    .fx-float-head .roster-btn.on {
      background: rgba(232, 200, 74, 0.18);
      border-color: var(--accent);
      color: var(--accent);
    }

    #tab-fx .fx-slot {
      font-size: 11px;
    }

    .trkbtn.arm:hover {
      color: var(--red);
      border-color: var(--red);
    }

    .trkbtn.arm.armed {
      color: #fff;
      background: var(--red);
      border-color: var(--red);
      box-shadow: 0 0 0 1px var(--red), 0 0 8px rgba(232, 74, 74, .55);
      animation: armPulse 1.4s ease-in-out infinite;
    }

    @keyframes armPulse {

      0%,
      100% {
        box-shadow: 0 0 0 1px var(--red), 0 0 6px rgba(232, 74, 74, .45);
      }

      50% {
        box-shadow: 0 0 0 1px var(--red), 0 0 12px rgba(232, 74, 74, .9);
      }
    }

    /* Étiquette d'une piste armée : liseré rouge discret */
    .track-label.armed {
      box-shadow: inset 3px 0 0 var(--red);
    }



    /* ── VU-MÈTRE MASTER — horizontal, style slider ───────────────────────
   Le track est construit verticalement (la logique JS ne change pas :
   fill.style.height = X% et peak.style.bottom = Y%) puis pivoté de 90° :
   → remplissage gauche→droite, peak = position horizontale, dégradé
     vert (gauche/bas niveau) → ambre → rouge (droite/clip).            */
    #master-vu {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      background: var(--bg-1);
      position: relative;
      
    }

    .vu-icon {
      width: 15px;          
      height: 15px;
      line-height: 1;
      opacity: .8;
      flex-shrink: 0;
    }

    .vu-icon img {
      width: 100%;              
      height: 100%;
      object-fit: contain;
      display: block;
    }

    /* Emprise HORIZONTALE + rail vide (comme la partie non remplie du slider) */
    #master-vu-shell {
      position: relative;
      width: 150px;          
      height: 8px;           
      border-radius: 10px;
      background: var(--bg-4);
      flex-shrink: 0;
    }

    /* Le track réel, construit vertical puis pivoté à l'horizontale.
      width = épaisseur (→ hauteur visible), height = longueur (→ largeur). */
    #master-vu-track {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 8px;            /* == hauteur du shell */
      height: 150px;         /* == largeur du shell */
      transform: translate(-50%, -50%) rotate(90deg);
      transform-origin: center;
      border-radius: 10px;
      overflow: hidden;      /* borne le fill aux coins arrondis */
      background: transparent;
    }

    /* Remplissage : inchangé dans sa logique (height% piloté par le JS) */
    #master-vu-fill {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 0%;
      background: linear-gradient(180deg, #e84a4a 0%, #e8c84a 28%, #4ae8a0 60%, #34c98a 100%);
      background-size: 100% var(--master-vu-scale, 220px);
      background-position: bottom;
      transition: height .045s linear;
    }

    /* Peak-hold : inchangé (bottom% piloté par le JS) → trait vertical après rotation */
    #master-vu-peak {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: #fff;
      opacity: .85;
      transition: bottom .08s linear;
      pointer-events: none;
    }

    /* Voyant de clip : le glow doit rester visible → pas d'overflow qui le coupe */
    #master-vu-track.clip {
      box-shadow: 0 0 8px rgba(232, 74, 74, .6);
    }
    #master-vu-shell:has(#master-vu-track.clip) {
      box-shadow: 0 0 8px rgba(232, 74, 74, .6);
    }

    #master-vu.recording .vu-icon {
      color: var(--red);
      animation: armPulse 1.2s ease-in-out infinite;
    }

    #master-vu-db {
      /* largeur FIXE : sa valeur change en continu ("—", "-∞", "-12"…) et, sinon, élargit/rétrécit
         #master-vu, ce qui décale toute la barre d'outils quand la fenêtre est étroite */
      width: 22px;
      text-align: right;
      font-variant-numeric: tabular-nums;
      overflow: hidden;
      white-space: nowrap;
      font-size: 9px;
      font-family: var(--mono);
      color: var(--text-3);
      line-height: 1;
      letter-spacing: -.02em;
      flex-shrink: 0;
    }

      /* Conteneur global audio(Titre + Bouton bascule) */
    .mon-audio-group {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .mon-title {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.5px;
      color: var(--text-3, #7a828e);
      text-transform: uppercase;
    }

    /* La pilule englobante */
    .mon-toggle-pill {
      display: flex;
      align-items: center;
      background-color: var(--bg-2, #181a1f);
      border: 1px solid var(--border, #2a2e37);
      border-radius: 6px;
      padding: 2px 6px;
    }

    /* Boutons texte VO / VI */
    .mon-opt {
      background: transparent;
      border: none;
      color: #ffffff;
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      padding: 3px;
      cursor: pointer;
      transition: all 0.2s ease;
      outline: none;
    }

    /* Effet lumineux sur l'élément sélectionné (actif) */
    .mon-opt.active {
      color: var(--accent, #fbb021);
    }

    .mon-opt:hover:not(.active) {
      color: #dddddd;
    }

    /* Trait de séparation vertical entre VO et VI */
    .mon-sep {
      width: 1px;
      height: 14px;
      background-color: var(--border, #3a3f4d);
      margin: 0 2px;
    }

      /* Conteneur global rythmo version (Titre + Bouton bascule) */
    .mon-rythmo-group {
      display: flex;
      align-items: center;
      gap: 10px;
    }


    /* ── BASCULE DE VUE (Bande / Audio) ───────────────────────── */

    .view-toggle {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: transparent;
    }

    .view-toggle button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px;
      border-radius: 6px;
      border: 1px solid var(--border, #262930);
      background: #22242b;
      color: var(--text-1, #ffffff);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
      outline: none;
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* Force le texte intérieur à hériter de la couleur du bouton */
    .view-toggle button span {
      color: inherit;
      font-size: 12px;
      font-weight: 500;
      white-space: nowrap;
    }

    /* Seul le bouton ACTIF affiche son libellé — les deux autres restent
       icône seule, pour occuper moins de place dans la barre d'outils. */
    .view-toggle button:not(.active) span {
      display: none;
    }

    /* Icônes PNG personnalisées (fond intégré = fond de la barre d'outils) : le bouton prend le même
       fond et un padding réduit pour que l'icône remplisse le bouton, sans carré visible. */
    .view-toggle button { padding: 3px; background: var(--bg-0, #15161A); }
    .view-toggle button.active { padding-right: 12px; }
    .view-toggle button img,
    .view-toggle button .view-icon {
      width: 33px;
      height: 33px;
      border-radius: 4px;
      object-fit: contain;
      flex-shrink: 0;
      display: block;
    }

    /* Survol des boutons inactifs */
    .view-toggle button:hover:not(.active) {
      border-color: #3a3f4d;
    }

    /* Style spécifique au bouton ACTIF */
    .view-toggle button.active {
      border: 1px solid var(--accent, #fbb021);
      background: var(--bg-0, #0d0e11);
      color: var(--accent, #fbb021);
    }

    .view-toggle button .icon-active {
      display: none;
    }
    .view-toggle button .icon-default {
      display: block;
    }

    /* Quand le bouton est ACTIF (.active) : on inverse la visibilité */
    .view-toggle button.active .icon-default {
      display: none;
    }
    .view-toggle button.active .icon-active {
      display: block;
    }


    /* ── PROPRIÉTÉS DE PRISE (onglet Propriétés, vue Édition audio) ── */
    #take-props .tp-actions {
      display: flex;
      gap: 6px;
      margin-top: 10px;
    }

    #take-props .tp-gain-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #take-props .tp-gain-row .tp-gain-val {
      background: var(--bg-3);
      border: 1px solid var(--border);
      border-radius: 4px;
      font-family: var(--mono);
      font-size: 11px;
      color: var(--text-2);
      padding: 4px 6px;
      min-width: 44px;
      text-align: center;
      flex-shrink: 0;
    }

    #take-props .tp-mute-btn {
      flex-shrink: 0;
      background: var(--bg-3);
      border: 1px solid var(--border);
      border-radius: 4px;
      width: 26px; height: 24px;
      font-size: 13px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    #take-props .tp-mute-btn:hover { border-color: var(--border-hi); }
    #take-props .tp-mute-btn.on { background: rgba(232, 74, 74, 0.16); border-color: var(--red); }
    #take-props .tp-mute-btn img { height: 15px; width: auto; display: block; object-fit: contain; }

    /* Slider de gain : même widget que le volume du transport (.custom-slider),
       en gris pour rester secondaire par rapport aux contrôles de lecture. */
    #take-props .custom-slider.grey {
      flex: 1;
      background: linear-gradient(
        to right,
        var(--text-3) 0%,
        var(--text-3) var(--val, 50%),
        var(--bg-4) var(--val, 50%),
        var(--bg-4) 100%);
    }
    #take-props .tp-btn-icon {
      height: 13px;
      width: auto;
      display: inline-block;
      object-fit: contain;
      vertical-align: -2px;
      margin-right: 4px;
    }

    /* Boutons Ecouter / Supprimer / Couper : même style que
       les autres panels (VF/VO, + Ajouter) plutôt que .roster-btn. */
    #take-props .tp-actions .rep-mode-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #take-props .rep-mode-btn.danger {
      background: rgba(232, 74, 74, 0.16);
      border-color: rgba(232, 74, 74, 0.4);
      color: var(--red);
    }
    #take-props .rep-mode-btn.danger:hover {
      background: rgba(232, 74, 74, 0.28);
      border-color: var(--red);
    }

    #take-props .tp-fade-lbl {
      flex-shrink: 0;
      font-size: 10px;
      font-weight: 600;
      color: var(--text-3);
      letter-spacing: 0.04em;
    }
    #take-props .tp-fade-input {
      width: 52px;
      flex-shrink: 0;
      text-align: center;
    }

    #take-props .tp-tc-input {
      flex: 1;
      min-width: 0;
      text-align: center;
    }
    #take-props .tp-tc-arrow {
      flex-shrink: 0;
      color: var(--text-3);
      font-size: 12px;
    }

    /* ── ÉDITEUR DE FORME D'ONDE (section "Edition") ────────────────── */
    #take-edit-wrap {
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
    }
    #take-edit-canvas {
      display: block;
      width: 100%;
      height: 150px;
      cursor: crosshair;
    }
    /* Barre de défilement horizontale du clip audio (Édition), utile dès que
       le zoom rend le clip plus large que la zone visible. Même DA que les
       .custom-slider du reste de l'appli : piste fine arrondie sur --bg-4,
       curseur plein en --accent (juste avec un curseur de largeur variable
       au lieu d'un simple remplissage 0→valeur). */
    #take-edit-scrollbar {
      height: 5px;
      margin: 8px 0 2px;
      background: var(--bg-4);
      border-radius: 10px;
      position: relative;
      cursor: pointer;
    }
    #take-edit-scrollbar-thumb {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      min-width: 16px;
      background: var(--accent);
      border-radius: 10px;
      cursor: grab;
    }
    #take-edit-scrollbar-thumb:hover,
    #take-edit-scrollbar-thumb.dragging {
      opacity: .8;
      cursor: grabbing;
    }
    /* Séparateur discret entre deux blocs d'un panneau de propriétés (ex :
       entre les actions Ecouter/Supprimer et la section Edition, ou entre un
       champ et une zone de texte VF/VO). */
    .prop-sep {
      height: 1px;
      background: var(--border);
      margin: 12px 0;
      border: none;
    }

    /* ── CANVAS TRACKS ───────────────────────────────────── */
    #bande-canvas {
      display: block;
      cursor: crosshair;
    }

    /* ── CLIP EDITOR MODAL ───────────────────────────────── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
      backdrop-filter: blur(4px);
      padding: 20px;
      box-sizing: border-box;
    }

    .modal-overlay.hidden {
      display: none;
    }

    .modal {
      background: var(--bg-2);
      border: 1px solid var(--border-hi);
      border-radius: 10px;
      width: 580px;
      max-width: calc(100vw - 40px);
      /* Colonne flex : l'en-tête et le pied restent visibles, seul le CORPS
       défile — on ne perd donc jamais les boutons de validation. */
      max-height: calc(100vh - 40px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    }

    .modal>.modal-header,
    .modal>.modal-footer {
      flex: 0 0 auto;
    }

    .modal>.modal-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
    }

    .modal-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .modal-title {
      font-size: 14px;
      font-weight: 600;
    }

    /* Onglets internes à une modale (ex: Paramètre → Thème/Général) — TOUS
       sur une seule ligne (nowrap), voir aussi #app-params-modal .modal plus
       bas pour la taille fixe qui ne bouge plus en changeant d'onglet. */
    .modal-tabs {
      display: flex;
      flex-wrap: nowrap;          /* toujours sur UNE seule ligne */
      flex: 0 0 auto;
      gap: 6px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      overflow-x: auto;
    }
    /* Onglets en boutons distincts (comme les onglets des panneaux) : plus grands, bien séparés. */
    .modal-tab-btn {
      flex: 1 0 auto;             /* se répartissent sur la ligne, sans jamais passer à la ligne suivante */
      padding: 10px 14px;
      background: var(--bg-3);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-3);
      font-size: 13px;
      font-weight: 600;
      text-align: center;
      white-space: nowrap;
      cursor: pointer;
      transition: all .12s;
    }
    .modal-tab-btn:hover { color: var(--text-1); background: var(--bg-4); }
    .modal-tab-btn.active {
      color: var(--accent);
      background: rgba(255, 184, 0, 0.12);
      border-color: rgba(255, 184, 0, 0.45);
    }
    /* Chaque panneau remplit tout l'espace restant (colonne flex) et fait
       défiler SON PROPRE .modal-body en interne : la modale garde une taille
       fixe (voir #app-params-modal .modal) quel que soit l'onglet actif. */
    .modal-tab-panel {
      display: none;
      flex-direction: column;
      min-height: 0;
    }
    .modal-tab-panel.active { display: flex; flex: 1 1 auto; }
    .modal-tab-panel > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    .modal-tab-panel > .modal-footer { flex: 0 0 auto; }

    /* Taille FIXE (pas juste un plafond) pour la modale Paramètre : sinon
       chaque onglet, de hauteur de contenu différente, faisait "sauter" la
       fenêtre à chaque changement d'onglet. */
    #app-params-modal .modal {
      width: 720px;
      max-width: calc(100vw - 40px);
      height: 820px;   /* plus haut : plus d options visibles sans défiler ; plafonné par max-height sur les petits écrans */
      max-height: calc(100vh - 40px);
    }

    .modal-close {
      margin-left: auto;
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      background: var(--bg-4);
      border: 1px solid var(--border);
      border-radius: 4px;
      cursor: pointer;
      color: var(--text-2);
      font-size: 18px;
      line-height: 1;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .modal-body {
      padding: 20px;
    }

    .form-group {
      margin-bottom: 16px;
    }

    .form-label {
      font-size: 12px;
      color: var(--text-2);
      margin-bottom: 6px;
      display: block;
    }

    .form-input,
    .form-textarea {
      width: 100%;
      background: var(--bg-3);
      border: 1px solid var(--border);
      color: var(--text-1);
      font-family: var(--font);
      font-size: 13px;
      padding: 8px 12px;
      border-radius: 6px;
      outline: none;
      transition: border-color 0.15s;
    }

    .form-textarea {
      height: 80px;
      resize: vertical;
    }

    .form-input:focus,
    .form-textarea:focus {
      border-color: var(--accent);
    }

    .modal-footer {
      padding: 16px 20px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    .btn {
      padding: 8px 16px;
      border-radius: 3px;
      font-family: var(--font);
      font-size: 13px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .btn-primary {
      background: var(--accent-dim);
      border: 1px solid var(--accent);
      color: var(--accent);
      font-weight: 500;
    }

    .btn-primary:hover {
      background: rgba(232, 200, 74, 0.25);
    }

    /* ── EXPORT MODAL ────────────────────────────────────── */
    .export-option {
      background: var(--bg-3);
      border: 1px solid var(--border);
      border-radius: 5px;
      padding: 16px;
      margin-bottom: 10px;
      cursor: pointer;
      transition: all 0.15s;
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }

    .export-option:hover {
      border-color: var(--border-hi);
    }

    .export-option.selected {
      border-color: var(--accent);
      background: var(--accent-dim);
    }

    .export-option-icon {
      font-size: 24px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .export-option-title {
      font-size: 13px;
      font-weight: 500;
      margin-bottom: 3px;
    }

    .export-option-desc {
      font-size: 11px;
      color: var(--text-2);
      line-height: 1.4;
    }

    /* Boutons de choix de format (Horizontal 16:9 / Vertical 9:16) — pas de
       description, juste une icône + un titre : centrés (au lieu d'hériter
       l'alignement à gauche de .export-option, pensé pour les listes
       icône+titre+description) et agrandis pour rester lisibles. */
    .export-format-btn {
      flex-direction: row;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 8px;
      padding: 18px 16px;
    }
    .export-format-btn .export-option-icon {
      font-size: 32px;
      margin-top: 0;
    }
    .export-format-btn .export-option-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 0;
    }

    .progress-bar-wrap {
      background: var(--bg-3);
      border-radius: 4px;
      height: 6px;
      overflow: hidden;
      margin-top: 8px;
    }

    .progress-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      border-radius: 4px;
      transition: width 0.3s;
    }

    .progress-label {
      font-size: 11px;
      color: var(--text-2);
      margin-top: 6px;
      font-family: var(--mono);
    }

    /* ── IMPORT MODAL ────────────────────────────────────── */
    .import-format {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: var(--bg-3);
      border: 1px solid var(--border);
      border-radius: 6px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .import-format:hover {
      border-color: var(--border-hi);
    }

    .import-format input[type=radio] {
      accent-color: var(--accent);
    }

    .import-format-label {
      font-size: 12px;
    }

    .import-format-ext {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--accent);
      margin-left: auto;
    }

    /* ── STATUS BAR ──────────────────────────────────────── */
    #statusbar {
      height: 24px;
      background: var(--bg-2);
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 12px;
      gap: 16px;
      flex-shrink: 0;
      font-size: 11px;
      color: var(--text-3);
      font-family: var(--mono);
    }

    .status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 4px var(--green);
    }

    .btn-rec-unsaved-save {
      margin-left: 6px;
      border: 1px solid var(--red);
      background: transparent;
      color: var(--red);
      font-family: var(--font);
      font-size: 10px;
      font-weight: 600;
      padding: 1px 7px;
      border-radius: 3px;
      cursor: pointer;
    }
    .btn-rec-unsaved-save:hover { background: var(--red); color: #fff; }

    .shortcut-cat {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--accent);
      margin: 12px 2px 2px;
      padding-bottom: 4px;
      border-bottom: 1px solid var(--border);
    }

    .shortcut-cat:first-child {
      margin-top: 0;
    }

    .shortcut-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 6px 10px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.03);
    }

    .shortcut-row .shortcut-label {
      flex: 1;
      font-size: 13px;
      color: var(--text-1);
    }

    .shortcut-row .shortcut-label small {
      display: block;
      font-size: 10px;
      color: var(--text-3);
      margin-top: 2px;
    }

    .shortcut-controls {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .shortcut-input {
      width: 190px;
      flex-shrink: 0;
      padding: 6px 9px;
      border-radius: 4px;
      border: 1px solid var(--border);
      background: var(--bg-4);
      color: var(--accent);
      font-size: 12px;
      font-family: var(--mono);
      text-align: center;
      cursor: pointer;
      /* Aspect de BOUTON (relief léger) : c'est cliquable pour changer le raccourci */
      border-color: #4a4d58;   /* gris (var(--border-hi) est jaune) */
      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      transition: all 0.12s;
    }
    .shortcut-input:hover {
      background: var(--bg-3);
    }

    .shortcut-input:focus {
      outline: none;
      border-color: var(--text-3);   /* pendant la capture : contour gris plus clair, pas de jaune */
    }

    /* Petit bouton « rétablir » à gauche du champ ; grisé quand le raccourci est déjà celui par défaut. */
    /* Deux colonnes de raccourcis par option : principal et secondaire. */
    .shortcut-fields { display: flex; align-items: center; gap: 10px; }
    /* Raccourci partagé par deux options différentes : en rouge (seule la première reste active). */
    .shortcut-input.conflict { color: #ff5c5c; border-color: #b03a3a; }
    .shortcut-cell { position: relative; width: 190px; flex-shrink: 0; }
    .shortcut-fields .shortcut-input { width: 100%; box-sizing: border-box; }
    .shortcut-clear {
      position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
      width: 18px; height: 18px; padding: 0; border: 0; border-radius: 3px;
      background: transparent; color: var(--text-3); font-size: 14px; line-height: 1;
      cursor: pointer; opacity: 0; transition: opacity 0.12s;
    }
    .shortcut-cell:hover .shortcut-clear { opacity: .8; }
    .shortcut-clear:hover { color: var(--text-1); background: rgba(255, 255, 255, 0.08); }
    .shortcut-head { display: flex; align-items: center; gap: 10px; padding: 0 11px 4px; }
    .shortcut-head-spacer { flex: 1; }
    .shortcut-reset-spacer { width: 26px; flex-shrink: 0; }
    .shortcut-colhead { width: 190px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }

    .shortcut-reset {
      width: 26px;
      height: 26px;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border-radius: 4px;
      border: 1px solid var(--border);
      background: var(--bg-3);
      color: var(--text-2);
      font-size: 15px;
      line-height: 1;
      cursor: pointer;
      transition: all 0.12s;
    }
    .shortcut-reset:hover:not(:disabled) { color: var(--text-1); background: var(--bg-4); }
    .shortcut-reset:disabled { opacity: .25; cursor: default; }

    .shortcut-edit-hint {
      font-size: 10px;
      color: var(--accent-2);
      margin-top: 2px;
    }

    .shortcut-checkbox {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: var(--text-2);
    }

    .shortcut-checkbox input {
      accent-color: var(--accent);
    }

    .shortcut-modifier-group {
      padding: 4px 8px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.04);
    }

    #shortcuts-modal {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      z-index: 1500;
      background: rgba(0, 0, 0, 0.72);
      backdrop-filter: blur(4px);
      overflow: hidden;
    }

    #shortcuts-modal.hidden {
      display: none !important;
    }

    #shortcuts-modal .modal-title { font-size: 16px; }
    #shortcuts-modal .modal {
      width: min(880px, calc(100vw - 32px));
      max-height: calc(100vh - 40px);
      overflow-y: auto;
      border-radius: 10px;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    }

    /* Macros de texte (Options ▸ Macros) — mêmes styles de base que le modal
       Raccourcis (.shortcut-row/.shortcut-input/...), avec en plus un champ
       texte libre et un bouton de suppression par ligne. */
    #macros-modal {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      z-index: 1500;
      background: rgba(0, 0, 0, 0.72);
      backdrop-filter: blur(4px);
      overflow: hidden;
    }

    #macros-modal.hidden {
      display: none !important;
    }

    #macros-modal .modal {
      width: min(720px, calc(100vw - 32px));
      max-height: calc(100vh - 40px);
      overflow-y: auto;
      border-radius: 10px;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    }

    #macros-modal .modal-title { font-size: 16px; }
    /* Champ de texte d'une macro : mêmes proportions que les champs du menu Raccourcis */
    .macro-text-field {
      flex: 1;
      min-width: 0;
      padding: 6px 9px;
      border-radius: 4px;
      border: 1px solid var(--border);
      background: var(--bg-3);
      color: var(--text-1);
      font-size: 13px;
      font-family: "IBM Plex Sans", sans-serif;
    }
    .macro-text-field:focus { outline: none; border-color: var(--text-3); }

    .btn-icon-only {
      padding: 5px 8px !important;
      line-height: 1;
    }

    /* ── PÉRIPHÉRIQUES AUDIO ─────────────────────────────── */
    .audio-dev-row {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-bottom: 8px;
    }

    .audio-dev-row select.form-input {
      flex: 1;
    }

    .audio-dev-test-btn {
      padding: 8px 14px;
      border-radius: 6px;
      font-size: 12px;
      white-space: nowrap;
      background: var(--bg-3);
      border: 1px solid var(--border);
      color: var(--text-1);
      cursor: pointer;
      transition: all 0.15s;
    }

    .audio-dev-test-btn:hover {
      border-color: var(--border-hi);
    }

    .audio-dev-test-btn.active {
      background: rgba(232, 74, 74, 0.18);
      border-color: var(--red);
      color: var(--red);
    }

    .mic-meter-wrap {
      height: 10px;
      border-radius: 5px;
      background: var(--bg-3);
      border: 1px solid var(--border);
      overflow: hidden;
      margin-top: 8px;
    }

    .mic-meter-fill {
      height: 100%;
      width: 0%;
      border-radius: 5px;
      background: linear-gradient(90deg, var(--green), var(--accent), var(--red));
      transition: width 0.06s linear;
    }

    .audio-dev-note {
      font-size: 11px;
      color: var(--text-3);
      margin-top: 6px;
      line-height: 1.5;
    }

    .audio-dev-note.warn {
      color: var(--accent-2);
    }

    /* Export audio : résumé des sources en jaune, source indisponible en rouge ; cases sur une seule ligne */
    #aex-note { color: var(--accent); }
    #aex-note .aex-bad { color: var(--red); }
    #audio-export-modal .exp-check-row > span { width: 260px; white-space: nowrap; }

    /* Ligne case à cocher / radio, cohérente avec le reste des panels */
    .form-check {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--text-2);
      cursor: pointer;
      margin-bottom: 8px;
    }
    .form-check:last-child { margin-bottom: 0; }
    .form-check input[type="checkbox"],
    .form-check input[type="radio"] {
      accent-color: var(--accent);
      flex-shrink: 0;
    }

    .aes-mic-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }

    .aes-mic-row .aes-mic-track-name {
      flex: 0 0 110px;
      font-size: 12px;
      color: var(--text-2);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .aes-mic-row select.form-input {
      flex: 1;
      font-size: 12px;
      min-width: 0;
    }

    .aes-mic-row select.aes-mic-ch {
      flex: 0 0 84px;
    }

    /* Video playhead indicator bar */
    #video-progress-bar {
      flex-shrink: 0;
      width: 100%;
      height: 5px;
      background: rgba(255, 255, 255, 0.07);
      cursor: pointer;
      position: relative;
      display: flex;
      align-items: center;
      overflow: visible;
    }

    #video-progress-bar .progress-fill {
      height: 100%;
      background: linear-gradient(to right, var(--accent), #e8d858);
      width: 0%;
      pointer-events: none;
    }

    #video-progress-bar .progress-cursor {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: clamp(6px, 0%, calc(100% - 6px));
      width: 10px;
      height: 10px;
      margin-left: -5px;
      background: var(--accent);
      border-radius: 50%;
      box-shadow: 0 0 8px rgba(232, 200, 74, 0.8);
      cursor: grab;
      opacity: 0;
      transition: opacity 0.1s ease;
      border: 2px solid rgba(255, 255, 255, 0.3);
      pointer-events: none;
    }

    #video-progress-bar .progress-cursor:active {
      cursor: grabbing;
    }

    #video-progress-bar:hover .progress-cursor {
      opacity: 1;
    }

/* Export vidéo ▸ Éléments : texte à gauche, grande case dans le style de l'app */
.exp-check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-1);
  cursor: pointer;
}
.exp-check-row > span { width: 190px; flex-shrink: 0; }
.exp-chk {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  flex-shrink: 0;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}
.exp-chk:hover { border-color: var(--text-3); }
.exp-chk:checked { background: var(--accent); border-color: var(--accent); }
.exp-chk:checked::after {
  content: '';
  position: absolute;
  left: 50%; top: 46%;
  width: 6px; height: 11px;
  box-sizing: border-box;
  border: solid #111;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Champ numérique sans flèches natives + petit sélecteur ▲▼ personnalisé */
.exp-num { -moz-appearance: textfield; appearance: textfield; }
.exp-num::-webkit-inner-spin-button,
.exp-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.exp-stepper { display: flex; flex-direction: column; gap: 2px; }
.exp-stepper button {
  width: 20px; height: 13px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3); color: var(--text-2);
  border: 1px solid var(--border); border-radius: 3px; cursor: pointer;
}
.exp-stepper button:hover { color: var(--text-1); border-color: var(--text-3); }
.exp-stepper button:active { background: var(--accent); color: #111; border-color: var(--accent); }

/* ── Fenêtre « Paramètre » : même esprit que la fenêtre d'export — sections titrées, une option par
   ligne (libellé à gauche, contrôle à droite : champ, liste, case, curseur, bouton). ───────────── */
#app-params-modal .modal { width: min(880px, calc(100vw - 32px)); }
#app-params-modal .modal-title { font-size: 16px; }
/* Fenêtre « Métadonnées du projet » : même présentation que Paramètres, en plus étroit. */
#metadata-modal .modal, #create-project-modal .modal { width: min(560px, calc(100vw - 32px)); }
#metadata-modal .modal-title, #create-project-modal .modal-title { font-size: 16px; }
#metadata-modal .prm-label, #create-project-modal .prm-label { flex-basis: 220px; }
.prm-section {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);   /* sous-sections en jaune, options en blanc */
  margin: 20px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.prm-section:first-child { margin-top: 0; }
.prm-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* contrôles collés à droite de leur texte (et non repoussés au bord droit) */
  gap: 14px;
  min-height: 30px;
  margin-bottom: 8px;
  padding-left: 12px;
}
.prm-label { flex: 0 0 330px; min-width: 0; font-size: 13px; color: var(--text-1); }   /* largeur fixe : tous les contrôles alignés en colonne */
.prm-label .hint { margin-left: 4px; }
.prm-ctl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.prm-check { cursor: pointer; }
.prm-num { width: 84px; text-align: center; }
.prm-num-wide { width: 130px; text-align: center; }
.prm-sel { width: 230px; }
.prm-sel-sm { width: 150px; }
/* Configurations d'interface enregistrées : une pastille par configuration (clic = appliquer), × pour supprimer. */
.ui-slot { display: inline-flex; align-items: stretch; }
.ui-slot .rep-mode-btn { border-radius: 4px 0 0 4px; }
.ui-slot-del {
  border: 1px solid var(--border); border-left: none; border-radius: 0 4px 4px 0;
  background: var(--bg-3); color: var(--text-3); font-size: 14px; padding: 0 7px; cursor: pointer;
}
.ui-slot-del:hover { color: var(--red); }
.prm-subtitle { font-size: 12px; font-weight: 600; color: var(--text-2); margin: 4px 0 8px; }
/* Palette « Personnalisé » d'une édition : sous-menu imbriqué SOUS la ligne de cette édition. */
.mk-wrap { display: flex; gap: 18px; align-items: flex-start; }
.mk-fields { flex: 1; min-width: 0; }
.mk-preview { flex: none; width: 110px; height: 64px; border: 1px solid var(--border); border-radius: 6px; align-self: center; }
.mk-slider { width: 110px; }
.prm-sub-nested { margin: -2px 0 8px 12px; }
/* Note « Aucune configuration enregistrée » : sur sa propre ligne, sous le libellé. */
#ui-custom-note { display: block; margin-top: 2px; }
/* Sous-menu déroulant (thème de chaque édition) : légèrement en retrait, avec un filet à gauche. */
.prm-sub { margin: -2px 0 10px 12px; padding-left: 14px; border-left: 2px solid var(--border); }
.prm-expand {
  background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--text-2);
  font-size: 12px; padding: 5px 10px 5px 8px; cursor: pointer;
}
.prm-expand::before { content: '\25B8'; display: inline-block; margin-right: 6px; transition: transform .12s; }
.prm-expand.open::before { transform: rotate(90deg); }
.prm-expand:hover { color: var(--text-1); border-color: var(--text-3); }
/* « Réinitialiser » : même bouton que « Par édition » mais sans flèche. */
.prm-reset::before { content: none; }
.rep-mode-toggle .prm-reset { margin-left: 6px; }
.prm-reset { padding-left: 10px; }
.prm-unit { font-size: 12px; color: var(--text-3); }
.prm-slider { width: 220px; }
.prm-status { font-size: 12px; color: var(--text-2); }

/* Sous-sections en jaune (titres, colorés en ligne dans les modales d'export), options en BLANC. */
#export-modal-body .form-label,
#audio-export-modal .form-label,
#app-params-modal .form-label { color: var(--text-1); }
.mk-reset { display: inline-flex; vertical-align: middle; margin-left: 8px; border: none; background: none; color: var(--text-3); font-size: 11px; font-weight: 400; cursor: pointer; padding: 0; opacity: .7; }
.mk-reset:hover { color: var(--text-1); opacity: 1; }

.rep-row { user-select: none; }

/* Le texte visible d'une réplique en cours d'édition est dessiné sur le canvas ; l'<input>
   qui le superpose est réellement transparent (color:transparent) pour ne pas doubler ce
   rendu. Sans ce réglage, une sélection de texte à la souris (glisser) force le navigateur à
   afficher les lettres sélectionnées dans SA propre couleur par défaut, en taille naturelle,
   par-dessus le rendu (compressé/étiré) du canvas en dessous — d'où le texte dédoublé/décalé
   visible dès qu'on sélectionne dans un bloc avec une zone d'étirement (poignée Alt+clic). */
/* Texte transparent SEULEMENT quand une zone d'étirement est active (classe posée par
   updateInlineEditorPreview) : le texte réel est alors dessiné en double par le canvas
   (_drawStretchOverlay), donc afficher aussi le texte natif de l'input à la sélection le
   dédoublerait. Sans zone, l'input EST le seul rendu visible du texte (couleur normale) —
   le rendre transparent à la sélection le ferait purement et simplement disparaître. */
/* Fond ÉGALEMENT transparent (pas seulement le texte) en zone d'étirement : le surlignage
   natif du navigateur se positionne selon la largeur NATURELLE (non étirée) du champ invisible,
   qui ne correspond PAS à la position réelle du texte étiré dessiné par le canvas — il donnait
   l'impression d'une sélection à un endroit different de la sélection réelle (voir
   _drawSelectionOverlay, qui dessine le VRAI surlignage, aligné sur le rendu étiré). */
#inline-clip-editor.inline-editor-zoned::selection { color: transparent; background: transparent; }
#inline-clip-editor.inline-editor-zoned::-moz-selection { color: transparent; background: rgba(74, 144, 232, 0.35); }

/* Réplique vide en cours de saisie : indication « Insérez texte » en basse opacité,
   dans la couleur de la réplique (placeholder posé par startInlineClipEdit). */
#inline-clip-editor::placeholder { color: currentColor; opacity: 0.35; font-style: italic; }

/* ── Épingle des marqueurs + menu « marqueurs affichés dans cet éditeur » ── */
.markers-pin-group { display: flex; align-items: center; }
.marker-vis-caret {
  width: 12px;
  height: 20px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: var(--text-3);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
}
.marker-vis-caret:hover { color: var(--text-1); background: var(--bg-4); }
.marker-vis-menu.hidden { display: none; }
.marker-vis-menu {
  position: fixed;
  z-index: 9150;
  min-width: 220px;
  background: var(--bg-2);
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  padding: 8px 10px;
}
.marker-vis-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.marker-vis-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 13px;
  color: var(--text-1);
  cursor: pointer;
}
.marker-vis-row input { accent-color: var(--accent); cursor: pointer; }
.marker-vis-note {
  margin-top: 6px;
  font-size: 11px;
  font-style: italic;
  color: var(--text-3);
}

/* Mini-curseur VERTICAL de clip gain (carré en bas à gauche d'une prise, vue audio) */
.clip-gain-pop {
  position: fixed; z-index: 4500;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 5px 6px 7px;
  background: var(--bg-3, #1D1E24);
  border: 1px solid var(--border-hi, #3a3b42);
  border-radius: 7px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  user-select: none;
}
.clip-gain-pop .cgp-val { font: 10px "IBM Plex Mono", monospace; color: var(--text-1, #eee); min-width: 38px; text-align: center; }
.clip-gain-pop .cgp-track { position: relative; width: 16px; cursor: ns-resize; }
.clip-gain-pop .cgp-track::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: var(--bg-5, #3a3b42); }
.clip-gain-pop .cgp-zero { position: absolute; left: 2px; right: 2px; top: 50%; height: 1px; background: var(--text-3, #888); }
.clip-gain-pop .cgp-fill { position: absolute; left: 6px; width: 4px; border-radius: 2px; background: var(--accent, #e8c84a); }
.clip-gain-pop .cgp-thumb { position: absolute; left: 1px; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--accent, #e8c84a); border: 2px solid var(--bg-3, #1D1E24); box-shadow: 0 0 0 1px rgba(0,0,0,0.4); }

/* ── Signaler un bug (Aide ▸ Signaler un bug, voir bug-report.js) ── */
.bug-report-modal { width: min(560px, calc(100vw - 32px)); }
.bug-report-modal .modal-body { max-height: calc(100vh - 170px); overflow-y: auto; }
.bug-message { width: 100%; min-height: 130px; resize: vertical; font-family: inherit; line-height: 1.45; }
.bug-counter { text-align: right; font-size: 11px; color: var(--text-3); margin: 3px 0 12px; }
.bug-optional { font-size: 11px; font-weight: 400; color: var(--text-3); }
.bug-account-note { font-size: 12px; color: var(--text-3); margin-bottom: 12px; }
.bug-shot-btn { cursor: pointer; }
.bug-drop {
  border: 1.5px dashed var(--border);
  border-radius: 6px;
  background: var(--bg-3);
  padding: 14px;
  text-align: center;
  transition: border-color .12s, background .12s;
}
.bug-drop.dragover { border-color: var(--accent); background: rgba(255, 184, 0, 0.08); }
.bug-drop.has-shot { text-align: left; border-style: solid; }
.bug-drop-title { font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 3px; }
.bug-drop-actions { display: flex; justify-content: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.bug-shot-preview { display: flex; align-items: flex-start; gap: 12px; }
.bug-shot-preview img {
  max-width: 280px;
  max-height: 160px;
  border: 1px solid var(--border);
  border-radius: 4px;
  object-fit: contain;
  background: var(--bg-2);
}
.bug-shot-side { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bug-context { margin-top: 6px; font-size: 12px; color: var(--text-2, var(--text-1)); }
.bug-context summary { cursor: pointer; color: var(--text-3); }
.bug-context pre {
  max-height: 180px;
  overflow: auto;
  margin: 6px 0 0;
  padding: 8px 10px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
}
.bug-status { min-height: 18px; margin-top: 10px; font-size: 12px; color: var(--text-3); }
.bug-status.error { color: #e05a4a; }
.bug-done { text-align: center; padding: 22px 0 10px; }
.bug-done-icon { font-size: 30px; color: var(--accent); line-height: 1; }
.bug-done-title { margin: 10px 0 6px; font-size: 15px; font-weight: 600; color: var(--text-1); }


/* ── VU-mètre master VERTICAL (vue Édition audio uniquement) ───────────────
   Bloc opaque collé au bord gauche, pleine hauteur, superposé à la marge des entêtes de piste
   (ne décale rien : la géométrie timeline / ruler / playhead ne bouge pas). Le JS pilote toujours
   fill.height% et peak.bottom% : le track, construit vertical, n'est simplement plus pivoté. */
#tracks-wrap > #master-vu {
  display: none;
  position: absolute; left: 0; top: 0; bottom: 0; width: 20px; box-sizing: border-box;
  z-index: 6; pointer-events: none;
  flex-direction: column; align-items: center; gap: 0;
  padding: 8px 0;
  background: var(--bg-1); border-right: 1px solid var(--border);
}
#tracks-wrap.audio-view > #master-vu { display: flex; }
#tracks-wrap > #master-vu .vu-icon,
#tracks-wrap > #master-vu #master-vu-db { display: none; }
#tracks-wrap > #master-vu #master-vu-shell { width: 8px; height: 100%; flex: 1; }
#tracks-wrap > #master-vu #master-vu-track {
  width: 100%; height: 100%; top: 0; left: 0; transform: none;
}
#tracks-wrap > #master-vu #master-vu-fill { background-size: 100% 100%; }
#tracks-wrap.audio-view .track-label { padding-left: 28px; }   /* laisse la place à la bande VU */

/* Voyant de clip : petit bout rouge au-dessus du VU-mètre, allumé dès que l'entrée sature, éteint au clic.
   (#master-vu ignore la souris : seul ce voyant, une fois allumé, la reprend.) */
#master-vu-clip {
  position: absolute; top: -7px; left: -3px; right: -3px; height: 5px;
  border-radius: 2px; background: var(--red); box-shadow: 0 0 6px rgba(232, 74, 74, .85);
  opacity: 0; pointer-events: none; cursor: pointer; transition: opacity .1s;
}
#master-vu-clip::before { content: ''; position: absolute; inset: -5px -4px; }   /* zone de clic élargie */
#master-vu-clip.on { opacity: 1; pointer-events: auto; }

/* Boutons des règles (20px, taille standard) : remontés de 2px pour que leur bas reste dans la
   règle (--ruler-h, 18px) au lieu de mordre sur les pistes en dessous ; le haut déborde dans
   la marge de la barre d'outils, au-dessus. */
#ruler-audio-toggles, #ruler-rythmo-toggles, #ruler-subtitles-toggles { transform: translateY(calc(-50% - 2px)); }


/* ── Barre d'outils : [écoute · rythmo · outils] | onglets de vue (centrés) | [fps · vitesse · vue live] … [suivi · verrou · zoom] ── */
.left-timeline-tools { justify-content: flex-start; }   /* écoute + rythmo tout à gauche */
.left-timeline-tools > .tools-slot { flex: 1; min-width: 0; }   /* outils centrés dans l'espace entre RYTHMO et les onglets de vue */
.tl-center { display: flex; justify-content: center; }
.tl-center .view-toggle { width: var(--timeline-left); justify-content: center; flex-shrink: 0; }
.tl-right { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tl-after-view { display: flex; align-items: center; justify-content: center; gap: 14px; flex: 1; min-width: 0; }   /* le bloc FPS · VITESSE · VUE LIVE (écart de 14px conservé) est centré entre les onglets de vue et les outils de droite */
.tl-right > .right-timeline-tools { margin-left: 0; }

/* Bouton « Vue live » au format FPS / VITESSE : pas de flèche (ce n'est pas un menu), jaune quand activé */
.live-toggle-trigger::after { display: none; }
.live-toggle-trigger.active { border-color: var(--accent, #fbb021); color: var(--accent, #fbb021); background: rgba(251, 176, 33, 0.16); }
.follow-lock-btn.markers-pin-btn img.icon-full { width: 100%; height: 100%; }