/* ============================================================
 * SOS Video Studio — Theme tokens (defaults)
 *
 * Specificite 0 (:where) -> n'importe quel override d'hote
 * (CRM, app, etc.) gagne automatiquement par cascade.
 *
 * Voir docs/THEMING.md pour la liste complete des tokens
 * exposes et exemples d'override.
 *
 * Palette par defaut : dark mode sobre, accent bleu doux.
 * ============================================================ */
:where(:root) {
    /* Surfaces */
    --svs-bg:        #0e0f14;  /* fond principal */
    --svs-surface:   #181a23;  /* surface (panels, modals) */
    --svs-surface-2: #232633;  /* surface elevee (hover, headers) */

    /* Text */
    --svs-text:       #e6e8ef;  /* texte principal */
    --svs-text-muted: #8a92a6;  /* texte secondaire, labels */

    /* Borders */
    --svs-border: #2d3142;

    /* Accent */
    --svs-accent: #5b9dff;  /* accent unique (boutons, selection, focus) */
}

/* ============================================================
 * Composants editeur video
 * ============================================================ */
.editor-container {
    display: grid;
    grid-template-columns: var(--lib-width, 250px) 6px 1fr 6px var(--tools-width, 280px);
    /* 2 rows : preview/tools/library en haut (prend tout sauf timeline),
       timeline en bas (35% min, peut grossir si bcp de pistes). */
    grid-template-rows: 1fr minmax(220px, 35%);
    gap: 0 0;
    /* Hauteur disponible : tout l'espace - la toolbar fixed bottom.
       L'hote (CRM, header de page) peut overrider via --svs-host-offset. */
    height: calc(100vh - 56px - var(--svs-host-offset, 0px));
    min-height: 500px;
    min-width: 1180px;
    box-sizing: border-box;
}
/* grid-row: 1 uniquement. Avec `1 / 3`, la bibliotheque revendiquait aussi la
   cellule (ligne 2, colonne 1), deja occupee par .editor-timeline qui s'etend
   sur toutes les colonnes. CSS Grid ne signale pas ce conflit : les deux se
   superposent, et l'ordre DOM fait peindre la timeline par-dessus. Resultat :
   la liste de medias continuait derriere la timeline (295 px masques mesures
   en 1600x900), ce qui donnait l'impression qu'elle passait sous le reste.
   Le commentaire de .editor-container disait deja l'intention : library en
   haut, timeline en bas. */
.editor-container > .editor-library { grid-column: 1; grid-row: 1; }
.editor-container > #splitter-left { grid-column: 2; grid-row: 1; }
.editor-container > .editor-preview { grid-column: 3; grid-row: 1; }
.editor-container > #splitter-right { grid-column: 4; grid-row: 1; }
.editor-container > .editor-tools { grid-column: 5; grid-row: 1; }
.editor-container > .editor-timeline { grid-column: 1 / -1; grid-row: 2; }
/* Panel splitter handle */
.panel-splitter {
    width: 6px;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.15s;
    user-select: none;
    touch-action: none;
}
.panel-splitter:hover, .panel-splitter.active {
    background: var(--svs-accent);
    border-radius: 3px;
}
.panel-splitter::after {
    content: '⋮';
    color: var(--svs-text-muted);
    font-size: 0.7em;
}
.panel-splitter:hover::after, .panel-splitter.active::after { color: #fff; }
@media (max-width: 1200px) {
    .editor-container {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto auto;
        height: auto;
    }
    .editor-container > * { grid-column: 1 !important; grid-row: auto !important; }
    .panel-splitter { display: none; }
}

/* Media Library */
.editor-library {
    background: var(--svs-surface);
    border-radius: 10px;
    padding: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    min-height: 0; /* respecte la grid */
}
.svs-panel-tabs {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
}
.svs-left-panel-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.svs-right-panel-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--svs-surface);
    padding-bottom: 8px;
}
.svs-panel-tab {
    border: 1px solid var(--svs-border);
    border-radius: 6px;
    background: var(--svs-bg);
    color: var(--svs-text-muted);
    cursor: pointer;
    min-height: 32px;
    padding: 6px 4px;
    font-size: 0.74em;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.svs-panel-tab:hover {
    color: var(--svs-text);
    border-color: var(--svs-accent);
}
.svs-panel-tab.active {
    background: var(--svs-accent);
    border-color: var(--svs-accent);
    color: #fff;
}
.hidden-panel-tab {
    display: none !important;
}
.svs-left-project-pane {
    display: none;
    min-height: 0;
    overflow-y: auto;
}
.editor-library.show-project-pane .library-header,
.editor-library.show-project-pane .library-tabs,
.editor-library.show-project-pane .library-items {
    display: none;
}
.editor-library.show-project-pane .svs-left-project-pane {
    display: block;
}
.svs-project-card {
    border: 1px solid var(--svs-border);
    border-radius: 8px;
    background: var(--svs-bg);
    padding: 12px;
}
.svs-project-label {
    color: var(--svs-text-muted);
    font-size: 0.76em;
    margin-bottom: 6px;
}
.svs-project-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}
.svs-project-actions .tool-btn {
    margin-bottom: 0;
    padding: 8px 6px;
    font-size: 0.78em;
}
.svs-project-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 12px;
}
.svs-project-stats span {
    border-radius: 6px;
    background: var(--svs-surface);
    color: var(--svs-text-muted);
    padding: 7px 6px;
    text-align: center;
    font-size: 0.72em;
}
.library-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.library-title {
    font-weight: 600;
    color: var(--svs-text);
}
/* Badge de version : discret mais toujours visible. Il répond à une question
   opérationnelle précise — « est-ce que la correction que je viens de pousser
   est bien celle que j'ai sous les yeux, ou est-ce le cache du navigateur ? » */
.svs-version-badge {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--svs-bg);
    border: 1px solid var(--svs-border);
    color: var(--svs-text-muted);
    font-size: 0.68em;
    font-weight: 500;
    letter-spacing: 0.02em;
    vertical-align: middle;
    cursor: help;
    user-select: text; /* Julien doit pouvoir copier le numéro pour me le donner */
}
/* Filtres dossier + tri. Les médias sont déjà rangés par projet sur le disque
   (data/media/<projet>/) ; sans ces sélecteurs l'interface affichait tout à
   plat, tous projets confondus. */
.library-folder-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    margin-bottom: 10px;
}
.library-folder-select,
.library-sort-select {
    width: 100%;
    min-width: 0;
    padding: 5px 8px;
    background: var(--svs-bg);
    color: var(--svs-text);
    border: 1px solid var(--svs-border);
    border-radius: 6px;
    font-size: 0.8em;
    cursor: pointer;
}
.library-folder-select:focus,
.library-sort-select:focus {
    outline: 2px solid var(--svs-accent);
    outline-offset: -1px;
}
.library-import {
    padding: 6px 12px;
    background: var(--svs-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85em;
}
.library-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.library-tab {
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85em;
    background: var(--svs-bg);
    color: var(--svs-text-muted);
}
/* Onglet actif : fond clair, donc texte SOMBRE. Avec color:#fff le contraste
   tombait a 1.22:1 (blanc sur blanc casse) alors que le minimum lisible est
   4.5:1 ; le libelle du filtre actif etait invisible en theme sombre. */
.library-tab.active {
    background: var(--svs-text);
    color: var(--svs-bg);
    font-weight: 600;
}
.library-items {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 6px;
    align-content: start;
    /* La derniere rangee etait tranchee net au ras du bord : rien ne disait
       que la liste continuait, ca donnait l'impression que les vignettes
       debordaient sur la timeline. Le fondu et la marge basse rendent la
       coupure lisible comme un "ca continue", pas comme un bug d'affichage. */
    padding-bottom: 10px;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
}
/* Liste entierement visible : pas de fondu, il ne masquerait rien d'utile. */
.library-items.no-fade {
    -webkit-mask-image: none;
            mask-image: none;
}
.library-item {
    aspect-ratio: 16/9;
    border-radius: 6px;
    overflow: hidden;
    cursor: grab;
    position: relative;
    background: #000;
}
.library-item:hover {
    outline: 2px solid var(--svs-accent);
}
.library-item img, .library-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.library-item.previewing {
    outline: 2px solid #27ae60;
}
.library-item-preview {
    display: none;
    position: absolute;
    top: 4px;
    right: 30px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.72);
    color: #fff;
    cursor: pointer;
    font-size: 10px;
    line-height: 22px;
    padding: 0;
    z-index: 10;
}
.library-item:hover .library-item-preview {
    display: block;
}
.library-item-duration {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75em;
}
.library-item-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent 0%, rgba(0,0,0,0.85) 60%);
    color: #fff;
    /* Reserve a droite la place du badge de duree, pose au meme endroit :
       sans ca, un nom long passait DESSOUS et devenait illisible (mesure :
       757 px2 de recouvrement sur chaque vignette). L'ellipsis se declenche
       donc avant le badge, et non au bord de la vignette. */
    padding: 16px 52px 5px 6px;
    font-size: 0.8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.library-item-type {
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.65em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.library-item-type.video { background: #3498db; color: #fff; }
.library-item-type.image { background: #27ae60; color: #fff; }
.library-item-type.audio { background: #9b59b6; color: #fff; }
/* Bouton supprimer média — visible au hover */
.library-item-delete {
    display: none;
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(231, 76, 60, 0.9);
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    line-height: 22px;
    text-align: center;
    z-index: 10;
    padding: 0;
    transition: background 0.15s;
}
.library-item-delete:hover { background: #c0392b; }
.library-item:hover .library-item-delete { display: block; }

/* Modale raccourcis clavier */
.shortcuts-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
.shortcuts-modal-overlay.active { display: flex; }
.shortcuts-modal {
    background: var(--svs-bg);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 28px 32px;
    max-width: 640px;
    width: 95%;
    max-height: 80vh;
    overflow-y: auto;
    color: var(--svs-text);
}
.shortcuts-modal h3 {
    margin: 0 0 20px;
    font-size: 1.1em;
    color: var(--svs-accent);
    display: flex;
    align-items: center;
    gap: 10px;
}
.shortcuts-close {
    position: absolute;
    top: 14px; right: 18px;
    background: none; border: none;
    font-size: 1.4em; color: #aaa;
    cursor: pointer; line-height: 1;
}
.shortcuts-close:hover { color: #fff; }
.shortcuts-section {
    margin-bottom: 20px;
}
.shortcuts-section-title {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--svs-text-muted);
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.shortcuts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 20px;
}
.shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.85em;
    padding: 3px 0;
}
.shortcut-label { color: var(--svs-text-muted); }
.shortcut-keys {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}
.kbd {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 0.85em;
    font-family: monospace;
    color: #e0e0e0;
    white-space: nowrap;
}

/* Upload serveur — indicateur de progression dans l'item */
.library-item-upload-progress {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
    border-radius: 6px;
}
.library-item-upload-bar-wrap {
    width: 70%;
    height: 5px;
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}
.library-item-upload-bar {
    height: 100%;
    background: var(--svs-accent);
    border-radius: 3px;
    transition: width 0.2s;
}
.library-item-upload-label {
    color: #fff;
    font-size: 0.7em;
    margin-top: 4px;
}
/* Badge "cloud" sur les médias déjà uploadés serveur */
.library-item-cloud {
    position: absolute;
    bottom: 4px;
    left: 4px;
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    line-height: 1;
}

/* Multi-sélection clips */
.timeline-clip.multi-selected {
    outline: 2px solid #f39c12 !important;
    outline-offset: 1px;
    box-shadow: 0 0 0 3px rgba(243,156,18,0.25);
}
.timeline-clip.multi-selected::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(243,156,18,0.12);
    pointer-events: none;
}
/* Badge compteur de sélection dans la toolbar */
#multi-select-bar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    background: rgba(243,156,18,0.15);
    border: 1px solid rgba(243,156,18,0.4);
    border-radius: 6px;
    color: #f39c12;
    font-size: 0.82em;
    font-weight: 600;
}
#multi-select-bar.visible { display: flex; }
#multi-select-bar button {
    background: rgba(243,156,18,0.2);
    border: 1px solid rgba(243,156,18,0.4);
    color: #f39c12;
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    font-size: 0.85em;
    transition: background 0.15s;
}
#multi-select-bar button:hover { background: rgba(243,156,18,0.4); }
#multi-select-bar button.danger { color: #e74c3c; border-color: rgba(231,76,60,0.4); background: rgba(231,76,60,0.15); }
#multi-select-bar button.danger:hover { background: rgba(231,76,60,0.35); }

/* Toast notifications */
.ve-toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.ve-toast {
    background: var(--svs-surface);
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.85em;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
    animation: ve-toast-in 0.3s ease;
    max-width: 380px;
    border-left: 3px solid var(--svs-accent);
}
.ve-toast.success { border-left-color: #27ae60; }
.ve-toast.error { border-left-color: #e74c3c; }
.ve-toast.info { border-left-color: #3498db; }
.ve-toast.leaving {
    animation: ve-toast-out 0.3s ease forwards;
}
@keyframes ve-toast-in {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes ve-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(40px); }
}

/* Preview Area - CENTRAL */
.editor-preview {
    background: #000;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: auto;
    min-height: 350px;
}
.preview-canvas-wrapper {
    position: relative;
    display: inline-block;
}
.preview-canvas {
    background: #1a1a1a;
    transform-origin: center center;
    position: relative;
    z-index: 1;
}
.overlay-canvas {
    position: absolute;
    z-index: 2;
    pointer-events: auto;
}
/* Ensure controls sit above the overlay canvas */
.preview-zoom-bar { z-index: 10 !important; }
.preview-format { z-index: 10 !important; }
.fullscreen-btn { z-index: 10 !important; }
.preview-zoom-bar {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
    background: rgba(0,0,0,0.7);
    padding: 4px 8px;
    border-radius: 20px;
    z-index: 5;
    align-items: center;
}
.preview-zoom-btn {
    padding: 3px 8px;
    border: none;
    background: transparent;
    color: #aaa;
    font-size: 0.75em;
    cursor: pointer;
    border-radius: 10px;
    white-space: nowrap;
}
.preview-zoom-btn:hover, .preview-zoom-btn.active {
    background: var(--svs-accent);
    color: #fff;
}
.preview-zoom-bar input[type="range"] {
    width: 60px;
    height: 4px;
    accent-color: var(--svs-accent);
}
/* Inline SVG icons */
.vi { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.vi svg { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; }
.vi-sm svg { width: 0.85em; height: 0.85em; }
.vi-lg svg { width: 1.2em; height: 1.2em; }
.tools-section-title .vi { margin-right: 4px; }
.timeline-btn .vi { margin-right: 2px; }
.preview-btn .vi svg { width: 16px; height: 16px; }

.preview-controls {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    background: rgba(0,0,0,0.7);
    padding: 8px 16px;
    border-radius: 30px;
    z-index: 10;
}
.preview-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.2);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    backdrop-filter: blur(4px);
    transition: background 0.15s, transform 0.1s;
}
.preview-btn:hover {
    background: var(--svs-accent);
    color: #fff;
    transform: scale(1.1);
}
.preview-btn svg { fill: currentColor; }
.preview-time {
    color: #fff;
    font-size: 0.85em;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-family: monospace;
}
.preview-format {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 6px;
}
.format-btn {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(0,0,0,0.5);
    color: #fff;
    cursor: pointer;
    font-size: 0.75em;
}
.format-btn.active {
    background: var(--svs-accent);
    border-color: var(--svs-accent);
}
.fullscreen-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(0,0,0,0.5);
    color: #fff;
    cursor: pointer;
    font-size: 0.9em;
}
.fullscreen-btn:hover {
    background: rgba(255,255,255,0.2);
}
.editor-preview.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    border-radius: 0;
    min-height: 100vh;
}
.editor-preview.fullscreen .preview-canvas {
    max-width: 100%;
    max-height: calc(100vh - 100px);
}
/* Timeline buttons */
.timeline-btn {
    padding: 4px 8px;
    border: 1px solid var(--svs-border);
    border-radius: 4px;
    background: var(--svs-bg);
    color: var(--svs-text);
    cursor: pointer;
    font-size: 0.85em;
}
.timeline-btn:hover {
    background: var(--svs-surface-2);
    border-color: var(--svs-accent);
}
/* Clip label */
.clip-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Waveform */
.waveform-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.5;
}
/* Vignette des clips video : pendant visuel de la waveform. */
.thumb-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.9;
    border-radius: inherit;
}
/* Le clip video a un degrade bleu vif en fond : laisse tel quel, il noie la
   vignette (mesure : image bien peinte, mais illisible a l'ecran). Des qu'une
   vignette est posee, on neutralise ce fond au profit de l'image. */
.timeline-clip.has-thumb {
    background: #1a1a1a;
}
/* Voile sombre sous le libelle pour qu'il reste lisible sur une image claire. */
.timeline-clip.has-thumb .clip-label {
    position: relative;
    z-index: 2;
    padding: 0 4px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.55);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* Tools Panel - Compact */
.editor-tools {
    background: var(--svs-surface);
    border-radius: 10px;
    padding: 12px;
    overflow-y: auto;
    max-height: calc(100vh - 280px);
    min-width: 200px;
}
.tools-section {
    margin-bottom: 12px;
    border: 1px solid var(--svs-surface-2);
    border-radius: 8px;
    overflow: hidden;
}
.tools-section.collapsed .tools-section-content {
    display: none;
}
.tools-section-title {
    font-weight: 600;
    font-size: 0.85em;
    color: var(--svs-text);
    padding: 10px 12px;
    background: var(--svs-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    user-select: none;
    border-bottom: 1px solid var(--svs-surface-2));
    transition: background 0.15s;
}
.tools-section-title:hover {
    background: var(--svs-surface-2);
}
.tools-section.collapsed .tools-section-title {
    border-bottom-color: transparent;
}
.tools-section-title span {
    font-size: 1.1em;
}
.tools-section-title::after {
    content: '▼';
    margin-left: auto;
    font-size: 0.7em;
    transition: transform 0.2s;
}
.tools-section.collapsed .tools-section-title::after {
    transform: rotate(-90deg);
}
.tools-section-content {
    padding: 12px;
    transition: opacity 0.15s;
}
.tools-section.collapsed .tools-section-content {
    opacity: 0;
}
.tool-row {
    margin-bottom: 10px;
}
.tool-label {
    font-size: 0.8em;
    color: var(--svs-text);
    margin-bottom: 4px;
    font-weight: 500;
}
.tool-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--svs-surface-2);
    border-radius: 6px;
    background: var(--svs-bg);
    color: var(--svs-text);
    font-size: 0.9em;
}
.tool-input:focus {
    outline: none;
    border-color: var(--svs-accent);
}
.tool-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--svs-surface-2);
    border-radius: 6px;
    background: var(--svs-bg);
    color: var(--svs-text);
    font-size: 0.9em;
    transition: border-color 0.15s;
}
.tool-select:focus {
    outline: none;
    border-color: var(--svs-accent);
}
.tool-select:disabled, .tool-slider:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}
.tool-slider {
    width: 100%;
    margin-top: 4px;
    accent-color: var(--svs-accent);
}
.tool-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.15s, transform 0.1s;
}
.tool-btn.primary {
    background: var(--svs-accent);
    color: #fff;
}
/* Meme defaut que .library-tab.active : fond clair + texte blanc = 1.22:1. */
.tool-btn.secondary {
    background: var(--svs-text);
    color: var(--svs-bg);
}
.tool-btn.danger {
    background: #e74c3c;
    color: #fff;
}
.tool-btn:hover {
    opacity: 0.85;
}
.tool-btn:active {
    transform: scale(0.97);
}


/* Music Library */
.music-list {
    max-height: 150px;
    overflow-y: auto;
}
.music-item {
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
}
.music-item:hover {
    background: var(--svs-surface-2);
}
.music-item.active {
    background: var(--svs-accent);
    color: #fff;
}

/* ========== WORKSPACE UX ========== */
.svs-welcome-panel {
    position: absolute;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(12, 14, 18, 0.76);
    backdrop-filter: blur(6px);
}
.svs-welcome-panel.hidden {
    display: none;
}
.svs-welcome-shell {
    position: relative;
    width: min(620px, 100%);
    border: 1px solid var(--svs-border);
    border-radius: 8px;
    background: var(--svs-bg);
    padding: 24px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.svs-welcome-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--svs-border);
    border-radius: 6px;
    background: var(--svs-surface);
    color: var(--svs-text);
    cursor: pointer;
}
.svs-welcome-kicker {
    color: var(--svs-accent);
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}
.svs-welcome-shell h2 {
    margin: 6px 0 8px;
    color: var(--svs-text);
    font-size: 1.6em;
}
.svs-welcome-shell p {
    margin: 0 0 18px;
    color: var(--svs-text-muted);
    line-height: 1.4;
}
.svs-welcome-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.svs-welcome-actions .tool-btn {
    margin-bottom: 0;
}
.svs-welcome-actions .tool-btn.secondary {
    border: 1px solid var(--svs-border);
    background: var(--svs-surface);
    color: var(--svs-text);
}

.clip-inspector-panel {
    border: 1px solid var(--svs-border);
    border-radius: 8px;
    background: var(--svs-bg);
    padding: 12px;
    margin: 0 0 12px;
}
.clip-inspector-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
}
.clip-inspector-title {
    color: var(--svs-text);
    font-size: 0.95em;
    font-weight: 700;
    line-height: 1.25;
}
.clip-inspector-meta {
    color: var(--svs-text-muted);
    font-size: 0.76em;
    margin-top: 2px;
}
.clip-inspector-empty p {
    margin: 8px 0 0;
    color: var(--svs-text-muted);
    font-size: 0.82em;
    line-height: 1.35;
}
.clip-inspector-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
}
.clip-inspector-stats span {
    padding: 6px;
    border-radius: 6px;
    background: var(--svs-surface);
    color: var(--svs-text-muted);
    font-size: 0.72em;
    text-align: center;
}
.clip-inspector-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.clip-inspector-grid label {
    color: var(--svs-text-muted);
    font-size: 0.72em;
}
.clip-inspector-grid .tool-input {
    margin-top: 4px;
    font-size: 0.9em;
}
.clip-inspector-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
}
.clip-inspector-actions .tool-btn {
    margin-bottom: 0;
    padding: 8px 6px;
    font-size: 0.8em;
}
.clip-inspector-actions .tool-btn.secondary {
    border: 1px solid var(--svs-border);
    background: var(--svs-surface-2);
    color: var(--svs-text);
}

/* ========== TIMELINE ========== */
.editor-timeline {
    grid-column: 1 / -1;
    background: var(--svs-surface);
    border-radius: 10px;
    padding: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0; /* respecte la grid */
}
.timeline-snap-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #FFD700;
    z-index: 20;
    pointer-events: none;
    display: none;
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.6);
}
.preview-canvas.checkerboard {
    background-image: repeating-conic-gradient(#333 0% 25%, #444 0% 50%);
    background-size: 16px 16px;
}
.timeline-zoom {
    display: flex;
    align-items: center;
    gap: 8px;
}
.timeline-zoom input {
    width: 100px;
}
.timeline-ruler-row {
    margin-bottom: 4px;
}
.timeline-ruler {
    flex: 1;
    min-width: 0;
    height: 24px;
    background: var(--svs-bg);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}
.timeline-ruler-marks {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
}
.ruler-mark {
    flex-shrink: 0;
    border-left: 1px solid var(--svs-border);
    font-size: 0.7em;
    color: var(--svs-text-muted);
    padding-left: 4px;
    padding-top: 2px;
}
.timeline-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--svs-accent);
    z-index: 10;
    cursor: ew-resize;
    box-shadow: 0 0 6px rgba(255, 85, 0, 0.5);
}
.timeline-playhead-guide {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--svs-accent);
    z-index: 8;
    pointer-events: none;
    box-shadow: 0 0 6px rgba(255, 85, 0, 0.45);
}
.timeline-playhead::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -8px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 10px solid var(--svs-accent);
}
.timeline-playhead::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -8px;
    width: 18px;
    cursor: ew-resize;
}
/* Render zone (in/out points) */
.render-zone-bar {
    position: absolute;
    top: 0; bottom: 0;
    background: rgba(255, 85, 0, 0.12);
    pointer-events: none;
    z-index: 1;
}
.render-zone-outside-left, .render-zone-outside-right {
    position: absolute;
    top: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 1;
}
.render-zone-handle {
    position: absolute;
    top: -2px; bottom: -2px;
    width: 8px;
    cursor: ew-resize;
    z-index: 5;
    border-radius: 2px;
    background: var(--svs-accent);
    opacity: 0.8;
    transition: opacity 0.15s;
}
.render-zone-handle:hover, .render-zone-handle.active { opacity: 1; }
.render-zone-handle.in { left: 0; border-radius: 3px 0 0 3px; }
.render-zone-handle.out { right: 0; border-radius: 0 3px 3px 0; }
.render-zone-label {
    position: absolute;
    top: -16px;
    font-size: 0.6em;
    color: var(--svs-accent);
    white-space: nowrap;
    pointer-events: none;
}
.render-zone-handle.in .render-zone-label { left: 0; }
.render-zone-handle.out .render-zone-label { right: 0; }
.timeline-tracks {
    user-select: none;
    -webkit-user-select: none;
    overflow-x: auto;
    overflow-y: auto;
    flex: 1; /* prend toute la hauteur dispo dans editor-timeline */
    min-height: 0;
}
.timeline-tracks-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 100%; /* etire au moins jusqu'au bord droit, scroll au-dela */
}
.timeline-track {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%; /* etire chaque ligne pour que track-content remplisse la largeur dispo */
}
.track-label {
    width: 108px;
    min-width: 108px;
    font-size: 0.75em;
    color: var(--svs-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    position: sticky;
    left: 24px;
    z-index: 6;
    background: var(--svs-surface);
}
.track-content {
    flex: 1 1 auto;
    min-width: 0; /* permet au flex de respecter la width inline du JS sans deborder */
    height: 50px;
    background: var(--svs-bg);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}
.track-content.video { box-shadow: inset 3px 0 0 #3498db; }
.track-content.audio { box-shadow: inset 3px 0 0 #9b59b6; }
.track-content.text { box-shadow: inset 3px 0 0 #e67e22; }
.track-content.subtitle { box-shadow: inset 3px 0 0 #1abc9c; }
.track-content.drag-over-track {
    outline: 2px solid var(--svs-accent);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--svs-accent) 12%, transparent);
}
.track-content.drag-denied-track {
    outline: 2px solid #e74c3c;
    outline-offset: -2px;
}

/* Track remove button */
.track-remove {
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--svs-text-muted);
    cursor: pointer;
    font-size: 0.75em;
    opacity: 0.5;
    transition: all 0.15s;
}
.track-remove:hover {
    opacity: 1;
    color: #e74c3c;
}

/* Preview transform handles */
.preview-transform-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.preview-element {
    position: absolute;
    pointer-events: auto;
    cursor: move;
    border: 2px solid transparent;
    transition: border-color 0.15s;
}
.preview-element:hover,
.preview-element.selected {
    border-color: var(--svs-accent);
}
.preview-element .resize-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--svs-accent);
    border: 2px solid #fff;
    border-radius: 2px;
    cursor: nwse-resize;
    display: none;
}
.preview-element.selected .resize-handle {
    display: block;
}
.preview-element .resize-handle.se {
    right: -6px;
    bottom: -6px;
}
.preview-element .resize-handle.nw {
    left: -6px;
    top: -6px;
    cursor: nwse-resize;
}
.preview-element .resize-handle.ne {
    right: -6px;
    top: -6px;
    cursor: nesw-resize;
}
.preview-element .resize-handle.sw {
    left: -6px;
    bottom: -6px;
    cursor: nesw-resize;
}

/* Timeline Clips */
.timeline-clip {
    position: absolute;
    top: 4px;
    bottom: 4px;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: move;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 0.75em;
    color: #fff;
    overflow: visible;
    white-space: nowrap;
    user-select: none;
}
.clip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.timeline-clip.video-clip {
    background: linear-gradient(135deg, #3498db, #2980b9);
}
.timeline-clip.image-clip {
    background: linear-gradient(135deg, #27ae60, #1e8449);
}
.timeline-clip.audio-clip {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}
.timeline-clip.text-clip {
    background: linear-gradient(135deg, #e67e22, #d35400);
}
.timeline-clip.subtitle-clip {
    background: linear-gradient(135deg, #1abc9c, #16a085);
}
.timeline-clip.color-clip {
    /* fond par défaut ; remplacé en ligne par la couleur réelle du clip */
    background: linear-gradient(135deg, #555, #333);
    border: 1px dashed rgba(255, 255, 255, 0.35);
}
.timeline-clip:hover {
    outline: 2px solid #fff;
}
.timeline-clip.selected {
    outline: 2px solid var(--svs-accent);
    box-shadow: 0 0 8px rgba(255, 85, 0, 0.4);
}
.clip-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    background: rgba(255,255,255,0.15);
    transition: background 0.15s;
}
.clip-handle:hover {
    background: rgba(255,255,255,0.45);
}
.clip-handle.left { left: 0; border-radius: 4px 0 0 4px; }
.clip-handle.right { right: 0; border-radius: 0 4px 4px 0; }
.clip-trim-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0.3;
    z-index: 0;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 3px,
        rgba(255,255,255,0.15) 3px,
        rgba(255,255,255,0.15) 6px
    );
}
.clip-trim-indicator.left {
    border-right: 2px dashed rgba(255,255,255,0.6);
    border-radius: 4px 0 0 4px;
}
.clip-trim-indicator.right {
    border-left: 2px dashed rgba(255,255,255,0.6);
    border-radius: 0 4px 4px 0;
}
.clip-thumbnail {
    width: 40px;
    height: 100%;
    object-fit: cover;
    margin-right: 8px;
    border-radius: 2px;
}

/* Subtitles Editor */
.subtitles-list {
    max-height: 400px;
    overflow-y: auto;
    margin-top: 10px;
}
.subtitle-item {
    padding: 8px 10px;
    border: 1px solid var(--svs-surface-2);
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 0.8em;
    position: relative;
    background: var(--svs-bg);
    transition: border-color 0.15s;
}
.subtitle-item:hover {
    border-color: var(--svs-accent);
}
.subtitle-item.active {
    border-color: var(--svs-accent);
    box-shadow: inset 3px 0 0 var(--svs-accent);
    background: color-mix(in srgb, var(--svs-accent) 8%, var(--svs-bg));
}
.subtitle-item-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}
.subtitle-item-time {
    font-family: monospace;
    color: var(--svs-text-muted);
    font-size: 0.8em;
    display: flex;
    align-items: center;
    gap: 2px;
}
.subtitle-item-time input {
    width: 52px;
    font-family: monospace;
    font-size: 0.8em;
    padding: 2px 4px;
    border: 1px solid var(--svs-surface-2);
    border-radius: 4px;
    background: var(--svs-surface);
    color: var(--svs-text);
    text-align: center;
}
.subtitle-item-text textarea {
    width: 100%;
    min-height: 42px;
    resize: vertical;
    font-size: 0.9em;
    padding: 6px 8px;
    border: 1px solid var(--svs-surface-2);
    border-radius: 4px;
    background: var(--svs-surface);
    color: var(--svs-text);
    box-sizing: border-box;
    margin-bottom: 6px;
    font-family: inherit;
}
.subtitle-style-row {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 4px 6px;
    align-items: center;
    font-size: 0.8em;
}
.subtitle-style-row label {
    color: var(--svs-text-muted);
    white-space: nowrap;
    font-size: 0.85em;
}
.subtitle-style-row input[type="number"] {
    width: 100%;
    min-width: 40px;
    padding: 2px 4px;
    border: 1px solid var(--svs-surface-2);
    border-radius: 3px;
    background: var(--svs-surface);
    color: var(--svs-text);
    font-size: 0.9em;
}
.subtitle-style-row input[type="color"] {
    width: 28px;
    height: 24px;
    border: 1px solid var(--svs-surface-2);
    border-radius: 3px;
    padding: 1px;
    cursor: pointer;
    background: var(--svs-surface);
}
.subtitle-style-row select {
    grid-column: 1 / -1;
    padding: 3px 6px;
    border: 1px solid var(--svs-surface-2);
    border-radius: 4px;
    background: var(--svs-surface);
    color: var(--svs-text);
    font-size: 0.9em;
}
.subtitle-item-actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
}
.subtitle-item-actions button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.85em;
    color: var(--svs-text-muted);
}
.subtitle-item-actions button:hover {
    background: var(--svs-surface-2);
    color: var(--svs-accent);
}
.subtitle-item-text {
    color: var(--svs-text);
}
.subtitle-item-text textarea {
    width: 100%;
    min-height: 32px;
    padding: 4px 6px;
    border: 1px solid var(--svs-surface-2);
    border-radius: 4px;
    background: var(--svs-surface);
    color: var(--svs-text);
    font-size: 0.95em;
    resize: vertical;
    font-family: inherit;
}
.subtitle-style-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.subtitle-style-row label {
    font-size: 0.8em;
    color: var(--svs-text-muted);
    white-space: nowrap;
}
.subtitle-style-row input[type="number"] {
    width: 50px;
}
.subtitle-style-row input[type="color"] {
    width: 28px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--svs-surface-2);
    border-radius: 3px;
    cursor: pointer;
}
.subtitle-style-row select {
    max-width: 100px;
}
.subtitle-defaults {
    border: 1px solid var(--svs-surface-2);
    border-radius: 8px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    background: rgba(0,0,0,0.06);
}
.subtitle-defaults-title {
    font-size: 0.75em;
    font-weight: 600;
    color: var(--svs-text-muted);
    margin-bottom: 6px;
}

/* Export Modal */
.export-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.export-modal.active {
    display: flex;
}
.export-content {
    background: var(--svs-bg);
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    max-width: 500px;
}
.export-title {
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--svs-text);
}
.export-progress {
    margin: 20px 0;
}
.export-progress-bar {
    height: 8px;
    background: var(--svs-surface-2);
    border-radius: 4px;
    overflow: hidden;
}
.export-progress-fill {
    height: 100%;
    background: var(--svs-accent);
    width: 0%;
    transition: width 0.3s;
}
.export-step-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 14px 0 8px;
}
.export-step {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 6px 7px;
    border-radius: 6px;
    background: var(--svs-surface);
    color: var(--svs-text-muted);
    font-size: 0.72em;
}
.export-step-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--svs-border);
}
.export-step.active {
    color: var(--svs-text);
    background: rgba(255, 85, 0, 0.12);
}
.export-step.active .export-step-dot {
    background: var(--svs-accent);
    box-shadow: 0 0 0 3px rgba(255, 85, 0, 0.16);
}
.export-step.done .export-step-dot {
    background: #2ecc71;
}
.export-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 10px;
    color: var(--svs-text-muted);
    font-size: 0.78em;
}
.export-metrics span {
    padding: 6px;
    border-radius: 6px;
    background: var(--svs-surface);
    text-align: center;
}
.export-status {
    text-align: center;
    margin-top: 10px;
    color: var(--svs-text-muted);
    font-size: 0.9em;
}

/* Volume Meter */
.volume-meter-wrapper {
    padding: 8px 12px 4px;
    border-bottom: 1px solid var(--svs-surface-2);
}
.volume-meter-container {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 32px;
    padding: 4px 2px;
    background: rgba(0,0,0,0.15);
    border-radius: 6px;
}
.volume-bar {
    flex: 1;
    min-width: 3px;
    background: #27ae60;
    border-radius: 2px 2px 0 0;
    transition: height 0.06s ease-out;
}

/* Track Locked */
.track-lock-btn {
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.75em;
    opacity: 0.4;
    transition: all 0.15s;
    padding: 0;
}
.track-lock-btn:hover {
    opacity: 1;
}
.track-lock-btn.locked {
    opacity: 1;
    color: var(--svs-accent);
}
.track-dup-btn, .track-move-btn {
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.75em;
    opacity: 0.4;
    transition: all 0.15s;
    padding: 0;
}
.track-dup-btn:hover, .track-move-btn:hover {
    opacity: 1;
    color: var(--svs-accent);
}
.track-move-btn {
    font-size: 0.65em;
    line-height: 1;
}
.track-move-btn:disabled {
    opacity: 0.12;
    cursor: default;
    pointer-events: none;
}
.track-content.locked-track {
    opacity: 0.45;
    pointer-events: none;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(255,85,0,0.06) 4px,
        rgba(255,85,0,0.06) 8px
    );
    filter: grayscale(0.5);
}

/* Rule of thirds grid — drawn directly on canvas in renderPreview() */

/* Track reorder drag handle */
.track-drag-handle {
    width: 16px;
    min-width: 16px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--svs-text-muted);
    opacity: 0.35;
    position: sticky;
    left: 0;
    z-index: 7;
    background: var(--svs-surface);
    font-size: 0.7em;
    letter-spacing: 1px;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.track-drag-handle:hover { opacity: 1; }
.track-drag-handle:active { cursor: grabbing; }
.timeline-track.dragging-track {
    opacity: 0.4;
    background: var(--svs-surface-2);
    border-radius: 6px;
}
.timeline-track.drag-over-track {
    border-top: 2px solid var(--svs-accent);
}

/* Transition badge on clips */
.clip-transition-badge {
    position: absolute;
    top: 2px;
    right: 12px;
    background: rgba(255,255,255,0.25);
    color: #fff;
    font-size: 0.7em;
    padding: 1px 4px;
    border-radius: 3px;
    pointer-events: none;
    line-height: 1.2;
}

/* Missing media indicator */
.timeline-clip.missing-media {
    background: repeating-linear-gradient(
        -45deg,
        #c0392b,
        #c0392b 5px,
        #922b21 5px,
        #922b21 10px
    ) !important;
    animation: missing-pulse 2s ease-in-out infinite;
}
@keyframes missing-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.clip-missing-label {
    font-weight: bold;
    font-size: 0.75em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Auto-save card in projects */
.project-card.autosave-card {
    border: 1px dashed var(--svs-accent);
}
.project-card.autosave-card .project-card-name::before {
    content: '⟲ ';
    color: var(--svs-accent);
}

/* Color picker row */
.color-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.color-row input[type="color"] {
    width: 36px;
    height: 30px;
    border: 1px solid var(--svs-surface-2);
    border-radius: 4px;
    padding: 2px;
    cursor: pointer;
    background: var(--svs-bg);
}
.color-row label {
    font-size: 0.8em;
    color: var(--svs-text-muted);
}

/* Project list */
.project-list-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.project-list-modal.active {
    display: flex;
}
.project-list-content {
    background: var(--svs-bg);
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
}
.project-list-title {
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--svs-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.project-card {
    border: 1px solid var(--svs-surface-2);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.15s;
}
.project-card:hover {
    border-color: var(--svs-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.project-card-thumb {
    height: 120px;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.project-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.project-card-info {
    padding: 10px;
}
.project-card-name {
    font-weight: 500;
    font-size: 0.9em;
    color: var(--svs-text);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.project-card-date {
    font-size: 0.75em;
    color: var(--svs-text-muted);
}
.project-card-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}
.project-card-actions button {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--svs-surface-2);
    border-radius: 4px;
    background: var(--svs-bg);
    color: var(--svs-text);
    cursor: pointer;
    font-size: 0.75em;
}
.project-card-actions button:hover {
    background: var(--svs-surface-2);
}
/* Drop overlay for external file drag & drop */
.video-page-wrapper {
    position: relative;
}
.editor-drop-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255, 85, 0, 0.15);
    border: 4px dashed var(--svs-accent);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.editor-drop-overlay.active {
    display: flex;
}
.editor-drop-overlay-text {
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 20px 40px;
    border-radius: 14px;
    font-size: 1.2em;
    font-weight: 600;
}
.editor-container {
    position: relative;
}
.project-card-actions button.delete:hover {
    background: #e74c3c;
    color: #fff;
    border-color: #e74c3c;
}

/* Export settings grid */
.export-settings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.export-setting {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.export-setting label {
    font-size: 0.8em;
    color: var(--svs-text-muted);
}

/* Crop/Rotate controls */
.transform-controls {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.transform-btn {
    padding: 6px 10px;
    border: 1px solid var(--svs-surface-2);
    border-radius: 4px;
    background: var(--svs-bg);
    color: var(--svs-text);
    cursor: pointer;
    font-size: 0.85em;
}
.transform-btn:hover {
    border-color: var(--svs-accent);
    background: var(--svs-surface-2);
}
.transform-btn.active {
    background: var(--svs-accent);
    color: #fff;
    border-color: var(--svs-accent);
}
/* ============================================================
 * Generic modal (templates, settings, etc.)
 * Remplace l'ancienne classe .yt-player-modal qui etait abusivement
 * utilisee par le moteur pour des modals non-YouTube.
 * ============================================================ */
.svs-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    align-items: center;
    justify-content: center;
}
.svs-modal.active {
    display: flex;
}
.svs-modal-content {
    position: relative;
    width: 90%;
    max-width: 960px;
    background: var(--svs-surface);
    color: var(--svs-text);
    border-radius: 12px;
    padding: 24px;
    max-height: 80vh;
    overflow-y: auto;
}
.svs-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: var(--svs-text-muted);
    font-size: 28px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s;
    line-height: 1;
    padding: 4px 8px;
}
.svs-modal-close:hover {
    opacity: 1;
    color: var(--svs-text);
}

/* ============================================================
 * Modale maison de confirmation / saisie
 *
 * Remplace confirm() et prompt() du navigateur, qui cassaient
 * l'identite visuelle (fenetre grise systeme au milieu d'une UI
 * sombre) et bloquaient le thread. Voir svsAsk() dans editor.js.
 * ============================================================ */
.svs-ask-content {
    max-width: 420px;
    width: 90%;
    padding: 22px 24px 18px;
}
.svs-ask-title {
    margin: 0 0 8px;
    font-size: 1.05em;
    color: var(--svs-text);
}
.svs-ask-message {
    margin: 0 0 16px;
    font-size: 0.9em;
    line-height: 1.45;
    color: var(--svs-text-muted);
}
.svs-ask-message:empty {
    display: none;
}
.svs-ask-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    margin-bottom: 16px;
    border: 1px solid var(--svs-border);
    border-radius: 6px;
    background: var(--svs-bg);
    color: var(--svs-text);
    font-size: 0.95em;
}
.svs-ask-input:focus {
    outline: none;
    border-color: var(--svs-accent);
}
.svs-ask-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.svs-ask-btn {
    padding: 7px 16px;
    border: 1px solid var(--svs-border);
    border-radius: 6px;
    background: var(--svs-surface-2);
    color: var(--svs-text);
    cursor: pointer;
    font-size: 0.9em;
}
.svs-ask-btn:hover {
    border-color: var(--svs-accent);
}
.svs-ask-btn.primary {
    background: var(--svs-accent);
    border-color: var(--svs-accent);
    color: #fff;
}
.svs-ask-btn.primary:hover {
    filter: brightness(1.1);
}
/* Action destructrice : le bouton principal doit alerter, pas inviter. */
.svs-ask-btn.primary.danger {
    background: #e74c3c;
    border-color: #e74c3c;
}

/* ============================================================
 * Tooltips custom (data-tooltip="...")
 *
 * Plus jolis et plus utiles que les title="" natifs (delai 0.7s
 * incompressible, style ugly natif OS). Auto-positionnement haut
 * par defaut, fallback bas si pas la place. Fade 150ms.
 * Compatibles raccourcis : `data-tooltip="Texte [Ctrl+Z]"` colore
 * la partie entre crochets en accent.
 * ============================================================ */
.svs-tooltip {
    position: fixed;
    z-index: 100000;
    background: #0e0f14;
    color: #e6e8ef;
    border: 1px solid #2d3142;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.78em;
    font-weight: 500;
    line-height: 1.35;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    max-width: 280px;
    white-space: normal;
}
.svs-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}
.svs-tooltip kbd {
    display: inline-block;
    margin: 0 2px;
    padding: 1px 5px;
    background: var(--svs-accent);
    color: #fff;
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.2;
}
.svs-tooltip::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.svs-tooltip[data-pos="top"]::after {
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 5px solid #0e0f14;
}
.svs-tooltip[data-pos="bottom"]::after {
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 5px solid #0e0f14;
}

/* ============================================================
 * Timeline toolbar fixee bas de l'ecran
 * Toujours visible quel que soit le scroll de la page hote.
 * Hauteur = 56px (synchronise avec padding-bottom .editor-container).
 * ============================================================ */
.timeline-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: 56px;
    background: var(--svs-surface);
    border-top: 1px solid var(--svs-border);
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}
.timeline-toolbar .toolbar-sep {
    width: 1px;
    height: 20px;
    background: var(--svs-border);
    flex-shrink: 0;
}
.timeline-toolbar .toolbar-spacer {
    flex: 1 1 auto; /* pousse tout ce qui suit a droite */
}
/* Pastille « modifications non enregistrees » : visible sans etre criarde,
   affichee uniquement quand le projet a des changements non sauvegardes. */
.timeline-toolbar .unsaved-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    margin-right: 4px;
    border: 1px solid var(--svs-warning, #d68a1e);
    border-radius: 4px;
    color: var(--svs-warning, #d68a1e);
    background: transparent;
    font-size: 0.78em;
    white-space: nowrap;
    flex-shrink: 0;
}
.timeline-toolbar .track-add {
    /* Boutons '+ piste' a gauche : visuellement distincts */
    border: 1px solid var(--svs-border);
    color: var(--svs-text-muted);
    background: transparent;
    font-size: 0.85em;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.15s;
}
.timeline-toolbar .track-add:hover {
    border-color: var(--svs-accent);
    color: var(--svs-accent);
    background: var(--svs-surface-2);
}
.timeline-toolbar .toolbar-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78em;
    color: var(--svs-text-muted);
    cursor: pointer;
    user-select: none;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background 0.15s;
}
.timeline-toolbar .toolbar-toggle:hover {
    background: var(--svs-surface-2);
    color: var(--svs-text);
}
.timeline-toolbar .toolbar-toggle input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}
.timeline-toolbar .timeline-zoom {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78em;
    color: var(--svs-text-muted);
}
.timeline-toolbar .timeline-zoom input[type="range"] {
    width: 120px;
}
.timeline-toolbar .timeline-btn-zone {
    border: 2px solid var(--svs-accent);
    color: var(--svs-accent);
    font-weight: 600;
    padding: 4px 10px;
    background: transparent;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.timeline-toolbar .timeline-btn-zone:hover {
    background: var(--svs-accent);
    color: #fff;
}
.timeline-toolbar .timeline-btn-zone.active {
    background: var(--svs-accent);
    color: #fff;
}

/* (note : les boutons '+ piste' sont dans .timeline-toolbar a gauche
    via .track-add ci-dessus. Le spacer du ruler reste vide.) */

/* ============================================================
 * Scrollbars modernes (dark, fins, hover accent)
 * S'applique a tout element scrollable dans le moteur SVS.
 * Compatible Chromium/WebKit + Firefox.
 * ============================================================ */
.editor-container *,
.timeline-toolbar *,
.svs-modal-content,
.svs-modal {
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--svs-border) transparent;
}
.editor-container *::-webkit-scrollbar,
.timeline-toolbar *::-webkit-scrollbar,
.svs-modal-content::-webkit-scrollbar,
.svs-modal::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.editor-container *::-webkit-scrollbar-track,
.timeline-toolbar *::-webkit-scrollbar-track,
.svs-modal-content::-webkit-scrollbar-track,
.svs-modal::-webkit-scrollbar-track {
    background: transparent;
}
.editor-container *::-webkit-scrollbar-thumb,
.timeline-toolbar *::-webkit-scrollbar-thumb,
.svs-modal-content::-webkit-scrollbar-thumb,
.svs-modal::-webkit-scrollbar-thumb {
    background: var(--svs-border);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color 0.15s;
}
.editor-container *::-webkit-scrollbar-thumb:hover,
.timeline-toolbar *::-webkit-scrollbar-thumb:hover,
.svs-modal-content::-webkit-scrollbar-thumb:hover,
.svs-modal::-webkit-scrollbar-thumb:hover {
    background: var(--svs-accent);
    background-clip: content-box;
}
.editor-container *::-webkit-scrollbar-corner,
.timeline-toolbar *::-webkit-scrollbar-corner {
    background: transparent;
}

/* ===== Muet / Solo par piste ===== */
.track-audio-btn {
    width: 16px;
    height: 16px;
    border: 1px solid var(--svs-border);
    border-radius: 3px;
    background: transparent;
    color: var(--svs-text-muted);
    font-size: 0.62em;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
    transition: all 0.15s;
}
.track-audio-btn:hover {
    color: var(--svs-text);
    border-color: var(--svs-text-muted);
}
.track-mute-btn.active {
    background: #e74c3c;
    border-color: #e74c3c;
    color: #fff;
}
.track-solo-btn.active {
    background: #f1c40f;
    border-color: #f1c40f;
    color: #1a1a1a;
}

/* ===== Badge vitesse de clip ===== */
.clip-speed-badge {
    position: absolute;
    top: 2px;
    left: 12px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 0.68em;
    padding: 1px 4px;
    border-radius: 3px;
    pointer-events: none;
    line-height: 1.2;
    z-index: 2;
}

/* ===== Indicateurs de fondu audio (triangles) ===== */
.clip-fade-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    max-width: 100%;
}
.clip-fade-indicator.left {
    left: 0;
    background: linear-gradient(to bottom right, rgba(0,0,0,0.55) 49.5%, transparent 50.5%);
}
.clip-fade-indicator.right {
    right: 0;
    background: linear-gradient(to bottom left, rgba(0,0,0,0.55) 49.5%, transparent 50.5%);
}

/* ===== Clips groupés ===== */
.timeline-clip.grouped {
    outline: 1px dashed rgba(255,255,255,0.55);
    outline-offset: -3px;
}
.clip-inspector-group {
    color: var(--svs-accent);
}

/* ===== Marqueurs timeline ===== */
.timeline-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: #f39c12;
    cursor: pointer;
    z-index: 4;
}
.timeline-marker:hover {
    width: 4px;
    margin-left: -2px;
}
.timeline-marker-flag {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #f39c12;
    color: #1a1a1a;
    font-size: 0.62em;
    font-weight: 600;
    line-height: 1.3;
    padding: 0 4px 0 3px;
    border-radius: 0 4px 4px 0;
    pointer-events: none;
}
.svs-project-card + .svs-project-card {
    margin-top: 10px;
}
.svs-marker-add {
    float: right;
    padding: 0 7px;
    line-height: 1.3;
}
.svs-marker-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.svs-marker-time {
    border: none;
    background: transparent;
    color: var(--svs-accent);
    font-size: 0.75em;
    font-family: monospace;
    cursor: pointer;
    padding: 2px;
    flex: 0 0 auto;
}
.svs-marker-time:hover {
    text-decoration: underline;
}
.svs-marker-name {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
    padding: 4px 6px;
    font-size: 0.78em;
}
.svs-marker-delete {
    border: none;
    background: transparent;
    color: var(--svs-text-muted);
    cursor: pointer;
    font-size: 0.9em;
    padding: 2px 4px;
    flex: 0 0 auto;
}
.svs-marker-delete:hover {
    color: #e74c3c;
}
.svs-marker-empty {
    color: var(--svs-text-muted);
    font-size: 0.72em;
    margin: 0;
}

/* ===== Keyframes de volume — enveloppe inspecteur ===== */
.clip-kf-section {
    border-top: 1px solid var(--svs-border);
    margin-top: 8px;
    padding-top: 8px;
}
.clip-kf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.76em;
    color: var(--svs-text-muted);
    margin-bottom: 6px;
}
.clip-kf-add, .clip-kf-clear {
    padding: 3px 7px;
    font-size: 0.9em;
    margin: 0 0 0 4px;
    width: auto;
}
.clip-kf-labels {
    display: grid;
    grid-template-columns: 1fr 1fr 20px;
    gap: 6px;
    font-size: 0.68em;
    color: var(--svs-text-muted);
    margin-bottom: 3px;
}
.clip-kf-row {
    display: grid;
    grid-template-columns: 1fr 1fr 20px;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
}
/* Ligne de keyframe VISUEL : colonne d'easing en plus (les lignes volume
   restent à 3 colonnes). */
.clip-kf-row-anim {
    grid-template-columns: 1fr 1fr 1.2fr 20px;
}
.clip-kf-labels-anim {
    grid-template-columns: 1fr 1fr 1.2fr 20px;
}
.clip-kf-ease {
    margin-bottom: 0;
    padding: 3px 4px;
    font-size: 0.74em;
    min-width: 0;
}
.clip-kf-ease:disabled {
    opacity: 0.4;
}
.clip-kf-row .tool-input {
    margin-bottom: 0;
    padding: 4px 6px;
    font-size: 0.8em;
}
.clip-kf-del {
    border: none;
    background: transparent;
    color: var(--svs-text-muted);
    cursor: pointer;
    font-size: 1em;
    padding: 0;
}
.clip-kf-del:hover { color: #e74c3c; }
.clip-kf-empty {
    font-size: 0.72em;
    color: var(--svs-text-muted);
}

/* ===== Enveloppe de volume dessinée sur le clip ===== */
.clip-volume-envelope {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}
.clip-volume-envelope polyline {
    fill: none;
    stroke: #f1c40f;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}
.clip-volume-envelope circle {
    fill: #f1c40f;
    stroke: #1a1a1a;
    stroke-width: 0.5;
    vector-effect: non-scaling-stroke;
}

/* ===== Rôle audio (ducking) ===== */
.track-role-btn {
    font-size: 0.7em;
    line-height: 1;
}
.track-role-btn.role-voice.active {
    background: #2980b9;
    border-color: #2980b9;
}
.track-role-btn.role-music.active {
    background: #16a085;
    border-color: #16a085;
}

/* ===== Keyframes visuels — section animation inspecteur ===== */
.clip-anim-props {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}
.clip-anim-add {
    padding: 3px 7px;
    font-size: 0.82em;
    margin: 0;
    width: auto;
}
.clip-anim-prop {
    border-top: 1px dashed var(--svs-border);
    margin-top: 6px;
    padding-top: 6px;
}
.clip-anim-badge {
    position: absolute;
    top: 2px;
    left: 30px;
    color: #f1c40f;
    font-size: 0.72em;
    pointer-events: none;
    line-height: 1.2;
    text-shadow: 0 0 2px rgba(0,0,0,0.7);
    z-index: 2;
}

/* ===== Boutons zoom pas-à-pas (centrés playhead) ===== */
.timeline-zoom-step {
    padding: 2px 8px;
    font-size: 1.05em;
    line-height: 1;
    min-width: 24px;
}