/* css/design-system/ibiza1cut.css
   Ibiza1Cut — éditeur vidéo à timeline multi-pistes (composants ic-*, 100 % tokens).
   Le « plateau vidéo » (aperçu) est noir par nature, indépendant du thème :
   tokens locaux --ic-canvas / --ic-on-canvas (même logique que --ve-canvas du Video Editor). */

/* La page de l'éditeur est un ENFANT FLEX de .main (colonne, 100vh via .main--app) :
   c'est flex:1 qui lui donne toute la hauteur sous la topbar (height:100% ne se
   résout pas ici) — panneaux et timeline remplissent alors la colonne. */
.ic-page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);

    /* Largeur des en-têtes de piste. SOURCE UNIQUE : timeline.js lit cette
       valeur pour placer la tête de lecture, la ligne d'aimantation et les
       calculs de défilement. Une divergence entre le CSS et le JS décalerait
       la tête de lecture du temps réel. */
    --ic-head-w: 184px;
}

/* ══════ Accueil : liste des projets ══════ */

.ic-home-grid {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* ══════ Éditeur : chutier PLEINE HAUTEUR à gauche ; à droite, plateau + inspecteur
   avec la timeline dessous (hauteur ajustable par la poignée .ic-resizer). ══════ */

.ic-editor {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--sp-3);
}
.ic-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    gap: var(--sp-2);
    position: relative; /* ancre du Studio de narration (toute la hauteur) */
    overflow: hidden;   /* le tiroir fermé attend hors-champ à gauche */
}
.ic-workrow {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--sp-3);
}

/* STUDIO DE NARRATION : tiroir large glissant par-dessus TOUTE la colonne
   (plateau + timeline). Modèle Video Express : IA → retouche → voix. */
.ic-narration {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(720px, 100%);
    z-index: 60;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg, var(--shadow));
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    transform: translateX(-110%);
    transition: transform var(--t-base);
}
.ic-narration.is-open { transform: none; }
.ic-narration__text {
    flex: 1 1 auto;
    min-height: 120px;
    resize: none;
    font-size: var(--fs-body);
    line-height: 1.5;
}
.ic-narration__subs {
    flex: 0 1 32%;
    min-height: 60px;
    overflow-y: auto;
}

/* Bloc de relecture (traduction EN/ES — lecture seule, l'original reste intact). */
.ic-nar-translation {
    flex: 0 1 26%;
    min-height: 54px;
    overflow-y: auto;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface-2);
    padding: var(--sp-2);
    font-size: var(--fs-sm);
    white-space: pre-wrap;
}

/* Le sélecteur de police maison (.ic-fontpick / .ic-fontpop) vit désormais dans
   css/design-system/font-picker.css — module PARTAGÉ avec les Global Settings. */

/* Résumé de la narration dans l'onglet Voix (cliquable → studio). */
.ic-nar-excerpt {
    font-size: var(--fs-xs);
    color: var(--c-text);
    white-space: pre-wrap;
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--sp-2);
    cursor: pointer;
}
.ic-nar-excerpt:hover { border-color: var(--c-border-strong); }
.ic-nar-excerpt.is-empty { color: var(--c-text-faint); }
@media (max-width: 1100px) {
    .ic-editor { grid-template-columns: 240px minmax(0, 1fr); }
    .ic-workrow { grid-template-columns: minmax(0, 1fr) 240px; }
}

/* Poignée de redimensionnement de la timeline (glisser verticalement). */
.ic-resizer {
    flex: 0 0 auto;
    height: 10px;
    margin: calc(-1 * var(--sp-1)) 0;
    cursor: row-resize;
    position: relative;
    touch-action: none;
}
.ic-resizer::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background: var(--c-border-strong);
    transition: background var(--t-fast), width var(--t-fast);
}
.ic-resizer:hover::after,
.ic-resizer.is-dragging::after {
    background: var(--c-text);
    width: 96px;
}

.ic-panel,
.ic-inspector {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-3);
    overflow-y: auto;
    min-height: 0;
}
.ic-panel { position: relative; padding-top: var(--sp-5); }

/* Chutier RÉTRACTABLE : on n'en a besoin que ponctuellement — replié, il ne
   laisse qu'une colonne fine avec le bouton pour le rouvrir. */
.ic-panel__collapse {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2;
}
.ic-panel__collapse:hover { background: var(--c-surface-2); color: var(--c-text); }
.ic-editor.is-panel-collapsed { grid-template-columns: 44px minmax(0, 1fr); }
.ic-editor.is-panel-collapsed .ic-panel {
    padding: var(--sp-1);
    overflow: hidden;
}
.ic-editor.is-panel-collapsed .ic-panel > :not(.ic-panel__collapse) { display: none; }
.ic-editor.is-panel-collapsed .ic-panel__collapse {
    position: static;
    margin: 2px auto 0;
}

/* Ligne de sous-titre retouchable (onglet Voix) */
.ic-subline {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-bottom: var(--sp-1);
}
.ic-subline__tc {
    flex: 0 0 auto;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-faint);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    cursor: pointer;
}
.ic-subline__tc:hover { background: var(--c-surface-2); color: var(--c-text); }

/* Onglets du chutier : version COMPACTE — 4 onglets doivent tenir dans la colonne
   de 300 px (240 px sous 1100 px, où l'icône seule est masquée). */
.ic-panel .tabs {
    display: flex;
    gap: 2px;
}
.ic-panel .tabs .tab {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--sp-1) 2px;
    font-size: var(--fs-xs);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 1100px) {
    .ic-panel .tabs .tab i { display: none; }
}

.ic-panel__title {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-text-faint);
    margin: var(--sp-2) 0 var(--sp-1);
}

/* ══════ Plateau (aperçu) ══════ */

.ic-stagewrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    min-height: 0;
}

.ic-stage {
    --ic-canvas: #000;
    --ic-on-canvas: #fff;
    position: relative;
    overflow: hidden;
    background: var(--ic-canvas);
    border-radius: var(--radius);
    height: 100%;
    max-width: 100%;
    min-height: 0;
    aspect-ratio: var(--ic-ar, 9 / 16);
    flex: 1 1 auto;
}

.ic-stage__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
.ic-stage__media.is-active { display: block; }

.ic-stage__text {
    position: absolute;
    width: max-content;
    max-width: 92%;
    text-align: center;
    /* left + transform posés en inline par preview.js (position X libre + animations) */
    pointer-events: none;
    color: var(--ic-on-canvas);
    font-weight: 800;
    line-height: 1.15;
    text-shadow: 0 0 6px rgba(0,0,0,.75), 2px 2px 2px rgba(0,0,0,.5);
    white-space: pre-wrap;
    display: none;
    z-index: 40;
}
.ic-stage__text.is-active { display: block; }

/* Habillage (overlay PNG des Global Settings) : étiré au cadre, comme au rendu. */
.ic-stage__media.is-overlay { object-fit: fill; }

/* Titre animé sur le plateau : conteneur à la taille NATIVE du template,
   centré à (xPct, yPct) et mis à l'échelle par transform (miroir du rendu ffmpeg). */
.ic-stage__lottie {
    position: absolute;
    display: none;
    pointer-events: none;
    transform-origin: center;
    z-index: 35; /* au-dessus des vidéos, sous les textes */
}
.ic-stage__lottie.is-active { display: block; }
.ic-stage__lottie svg { display: block; }
.ic-stage__lottie-missing {
    background: var(--c-danger-soft);
    color: var(--c-danger);
    font-size: var(--fs-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    width: max-content;
}

/* Galerie « Titre de marque » (panneau flottant, vignettes animées) */
.ic-titlepop {
    position: fixed;
    z-index: 1100;
    width: 460px;
    max-width: calc(100vw - 16px);
    max-height: 70vh;
    overflow-y: auto;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg, var(--shadow));
    padding: var(--sp-2);
}
.ic-titlepop__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
}
.ic-titlepop__tile {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: #14161c; /* plateau sombre, indépendant du thème (cf. --ic-canvas) */
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.ic-titlepop__tile:hover { border-color: var(--c-border-strong); outline: 2px solid var(--c-text); outline-offset: 1px; }
.ic-titlepop__tile video { width: 100%; display: block; max-height: 140px; object-fit: contain; }
.ic-titlepop__name {
    font-size: var(--fs-xs);
    color: var(--c-text);
    background: var(--c-surface);
    padding: 3px 8px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-stage__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--ic-on-canvas);
    opacity: .45;
    font-size: var(--fs-sm);
    text-align: center;
    padding: var(--sp-4);
}

/* Barre de transport sous l'aperçu. */
.ic-transport {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    justify-content: center;
}
.ic-transport__time {
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    min-width: 9ch;
    text-align: center;
}

/* ══════ Timeline ══════ */

.ic-timeline {
    flex: 0 0 auto;
    height: var(--ic-tl-h, 260px); /* ajustée par la poignée, mémorisée par utilisateur */
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ic-tl-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--c-border);
    flex-wrap: wrap;
}

.ic-tl-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto; /* horizontal (temps) ET vertical (pistes nombreuses) */
    position: relative;
}

.ic-tl-inner {
    position: relative;
    width: max-content;
    min-width: 100%;
}

/* Règle temporelle */
.ic-ruler {
    display: flex;
    border-bottom: 1px solid var(--c-border);
    height: 28px;
}
.ic-ruler__lane {
    position: relative;
    flex: 1 0 auto;
    cursor: pointer;
}
.ic-ruler__tick {
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 6px;
    background: var(--c-border-strong);
}
.ic-ruler__tick--major { height: 10px; }
.ic-ruler__label {
    position: absolute;
    bottom: 10px;
    transform: translateX(-50%);
    font-size: var(--fs-xs);
    color: var(--c-text-faint);
    pointer-events: none;
}

/* Pistes */
.ic-track {
    display: flex;
    border-bottom: 1px solid var(--c-border);
}
.ic-track:last-child { border-bottom: 0; }

.ic-track__head {
    /* min-width:0 est INDISPENSABLE : sans lui, la valeur automatique
       (min-content) l'emporte sur la base flex et l'en-tête s'élargit au gré de
       son libellé et du nombre de boutons. Les en-têtes faisaient alors 116,
       132, 139… px selon les lignes, et chaque piste commençait à un x
       différent : l'axe du temps n'était plus le même d'une ligne à l'autre. */
    flex: 0 0 var(--ic-head-w, 184px);
    min-width: 0;
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--c-surface-2);
    border-right: 1px solid var(--c-border);
    padding: var(--sp-1) var(--sp-2);
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}
.ic-track__head .ic-track__name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--fw-semibold);
}
/* Nom de piste : cliquable (double-clic ou Entrée) pour renommer. */
.ic-track__head .ic-track__name { cursor: text; }
.ic-track__head .ic-track__name:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 1px;
    border-radius: var(--radius-sm);
}

/* Champ d'édition du nom : il occupe exactement la place du libellé pour que la
   ligne ne bouge pas au moment où l'on renomme. */
.ic-track__rename {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text);
    font: inherit;
    font-weight: var(--fw-semibold);
    padding: 0 var(--sp-1);
    height: 22px;
}
.ic-track__rename:focus { outline: none; }

/* Gabarit FIXE : les pictos n'ont pas tous la même chasse (œil, haut-parleur,
   croix). Sans largeur imposée, les contrôles d'une ligne à l'autre se
   décalaient de quelques pixels — assez pour que l'œil le voie. */
.ic-track__mute {
    border: 0;
    background: transparent;
    color: var(--c-text-faint);
    cursor: pointer;
    padding: 0;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

/* Place réservée du bouton « supprimer », absent sur une piste qui contient des
   clips : sans elle, l'œil et le haut-parleur sautaient d'un cran selon les
   lignes. */
.ic-track__slot {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
}
.ic-track__mute:hover { background: var(--c-surface); color: var(--c-text); }
.ic-track__mute.is-muted { color: var(--c-danger); }

.ic-track__lane {
    position: relative;
    flex: 1 0 auto;
    height: var(--ic-track-h, 46px); /* zoom vertical : posé en inline par timeline.js */
}

/* Pictos de nature de piste : micro = vert, texte = jaune (ambre lisible dans les
   deux thèmes), vidéo = bleu. Utilisés dans les en-têtes de piste et le menu + Piste. */
.ic-kind--audio { color: var(--c-success); }
.ic-kind--text  { color: var(--c-warning); }
.ic-kind--video { color: var(--c-info); }
/* Cible de dépôt pendant un déplacement inter-pistes */
.ic-track__lane.is-dropover { background: var(--accent-soft); }

/* Ligne de lecture (traverse règle + pistes) */
.ic-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--c-danger);
    z-index: 4;
    pointer-events: none;
}

/* Clips */
.ic-clip {
    position: absolute;
    top: 5px;
    bottom: 5px;
    border-radius: 6px;
    border: 1px solid var(--c-border-strong);
    background: var(--c-surface-2);
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: var(--fs-xs);
    color: var(--c-text);
    cursor: grab;
    user-select: none;
    overflow: hidden;
    touch-action: none;
}
/* Même code couleur que les pictos de piste : visuel (vidéo/image) = bleu,
   audio = vert, texte = jaune. */
.ic-clip--video,
.ic-clip--image { background: color-mix(in srgb, var(--c-info) 20%, var(--c-surface)); border-color: var(--c-info); }
.ic-clip--audio { background: color-mix(in srgb, var(--c-success) 22%, var(--c-surface)); border-color: var(--c-success); }
.ic-clip--text  { background: color-mix(in srgb, var(--c-warning) 26%, var(--c-surface)); border-color: var(--c-warning); }
/* Titre animé (template After Effects) : famille texte (jaune), motif étoilé discret. */
.ic-clip--title {
    background: color-mix(in srgb, var(--c-warning) 32%, var(--c-surface));
    border-color: var(--c-warning);
    font-weight: var(--fw-semibold);
}
/* Sélection : contour neutre inversé (l'accent jaune AI.biza est illisible en trait fin sur fond clair). */
.ic-clip.is-selected { outline: 2px solid var(--c-text); outline-offset: 1px; z-index: 2; }
.ic-clip.is-dragging { opacity: .75; cursor: grabbing; z-index: 3; }

.ic-clip__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    position: relative;
    z-index: 1;
}
/* Le badge de jonction occupe le début du clip : le nom commence après lui,
   sinon ses premières lettres passent dessous. */
.ic-clip:has(.ic-clip__transbadge) .ic-clip__label { margin-left: 21px; }
/* Idem pour le badge son, en bas à droite. */
.ic-clip:has(.ic-clip__audiobadge) .ic-clip__label { margin-right: 18px; }

/* Habillage des clips : mosaïque (image), frise d'images extraites (vidéo, calée
   sur l'axe temporel de la source) et forme d'onde (audio). Le libellé passe sur
   un voile sombre : il repose sur un MÉDIA, pas sur le thème — tokens locaux
   façon plateau vidéo (--ic-canvas). */
.ic-clip.has-thumb,
.ic-clip.has-strip,
.ic-clip.has-wave {
    --ic-scrim: rgba(0, 0, 0, .55);
    --ic-on-scrim: #fff;
    background-repeat: repeat-x;
}
.ic-clip.has-thumb {
    background-size: auto 100%;
    background-position: left center;
}
.ic-clip.has-thumb .ic-clip__label,
.ic-clip.has-strip .ic-clip__label {
    background: var(--ic-scrim);
    color: var(--ic-on-scrim);
    padding: 0 6px;
    border-radius: 4px;
}

/* Poignée de volume sur les clips audio : ligne horizontale glissable (bas = 0 %,
   milieu = 100 %, haut = 200 %). Le libellé % n'apparaît que pendant le glissement. */
.ic-clip__vol {
    position: absolute;
    left: 0;
    right: 0;
    height: 14px;
    margin-top: -7px;
    cursor: ns-resize;
    z-index: 2;
    touch-action: none;
}
.ic-clip__vol::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -1px;
    height: 2px;
    background: var(--c-text);
    opacity: .7;
}
.ic-clip__vol:hover::before,
.ic-clip__vol.is-active::before { opacity: 1; }
.ic-clip__vol-label {
    display: none;
    position: absolute;
    right: 4px;
    bottom: 9px;
    font-size: var(--fs-xs);
    line-height: 1.4;
    background: var(--ic-scrim, rgba(0, 0, 0, .55));
    color: var(--ic-on-scrim, #fff);
    padding: 0 4px;
    border-radius: 4px;
    white-space: nowrap;
}
.ic-clip__vol.is-active .ic-clip__vol-label { display: inline-block; }

/* Poignées de fondu audio : zone atténuée en dégradé + point glissable au coin haut.
   Traduit en afade (entrée/sortie) à l'export. */
.ic-clip__fadezone {
    position: absolute;
    top: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}
.ic-clip__fadezone--l {
    left: 0;
    background: linear-gradient(to right, var(--ic-scrim, rgba(0, 0, 0, .55)), transparent);
}
.ic-clip__fadezone--r {
    right: 0;
    background: linear-gradient(to left, var(--ic-scrim, rgba(0, 0, 0, .55)), transparent);
}
.ic-clip__fadedot {
    position: absolute;
    top: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c-surface);
    border: 2px solid var(--c-text);
    cursor: ew-resize;
    z-index: 5;             /* au-dessus des poignées : les coins HAUTS sont au fondu */
    touch-action: none;
}
.ic-clip__fadedot--l { left: 0; }
.ic-clip__fadedot--r { right: 0; }
.ic-clip__fadedot:hover,
.ic-clip__fadedot.is-active { background: var(--c-text); }
.ic-clip__fadedot .ic-clip__vol-label { bottom: auto; top: 12px; right: auto; left: 0; }
.ic-clip__fadedot.is-active .ic-clip__vol-label { display: inline-block; }

/* Badge de JONCTION cliquable (bord gauche du clip vidéo) : ouvre le sélecteur
   de transition directement à la jonction (geste CapCut). */
.ic-clip__transbadge {
    position: absolute;
    top: 50%;
    /* ⚠ `.ic-clip` est en `overflow: hidden` : ce badge NE PEUT PAS déborder à
       gauche du clip (il serait invisible ET incliquable). Il se range donc
       DANS le clip, juste après les 9 px réservés au rognage — à cheval sur le
       bord, il recouvrait la poignée d'entrée sur toute la hauteur utile. */
    left: 11px;
    transform: translate(0, -50%);
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 50%;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    color: var(--c-text-faint);
    display: grid;
    place-items: center;
    font-size: 9px;
    z-index: 3;             /* sous les poignées, au-dessus de la barre de volume */
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--t-fast);
}
.ic-clip:hover .ic-clip__transbadge,
.ic-clip.is-selected .ic-clip__transbadge,
.ic-clip__transbadge.is-on { opacity: 1; }
.ic-clip__transbadge:hover { color: var(--c-text); border-color: var(--c-text); }
/* Transition posée : badge inversé, toujours visible. */
.ic-clip__transbadge.is-on {
    background: var(--c-text);
    color: var(--c-bg);
    border-color: var(--c-text);
}

/* Badge SON (bas-gauche du clip vidéo) : l'état du son de la vidéo se lit et se
   bascule directement sur le clip. Toujours visible dans les deux états — une
   vidéo muette doit se repérer d'un coup d'œil, sans survol ni inspecteur. */
.ic-clip__audiobadge {
    position: absolute;
    /* En bas à DROITE : à gauche il recouvrait la poignée de rognage d'entrée,
       et décalé vers l'intérieur il chevauchait le badge de jonction — un clip
       ne fait que 36 px de haut, deux pastilles n'y tiennent pas l'une sous
       l'autre. `right: 12px` dégage les 9 px du rognage de sortie. */
    right: 12px;
    bottom: 3px;
    width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 50%;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    color: var(--c-text-faint);
    display: grid;
    place-items: center;
    font-size: 8px;
    z-index: 3;             /* sous les poignées, au-dessus de la barre de volume */
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.ic-clip__audiobadge:hover { color: var(--c-text); border-color: var(--c-text); }
/* Son conservé : badge inversé — même langage que la transition posée. */
.ic-clip__audiobadge.is-on {
    background: var(--c-text);
    color: var(--c-bg);
    border-color: var(--c-text);
}
/* Source sans piste audio : badge inerte (le clic explique, il ne bascule rien). */
.ic-clip__audiobadge.is-silent {
    opacity: .45;
    cursor: help;
}
.ic-clip__audiobadge.is-silent:hover { color: var(--c-text-faint); border-color: var(--c-border-strong); }

/* Sélecteur de transitions : VIGNETTES ANIMÉES (deux calques A/B, l'animation
   approxime l'effet). Primaires en tête, secondaires derrière « Plus de transitions ». */
.ic-ttiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: var(--sp-1);
    margin-bottom: var(--sp-1);
}
.ic-ttile {
    position: relative;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    padding: 3px 3px 1px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: stretch;
}
.ic-ttile:hover { border-color: var(--c-border-strong); }
.ic-ttile.is-active { outline: 2px solid var(--c-text); outline-offset: 1px; }
/* Mini-plateau : calque sortant sombre (A, dans le flux) recouvert par le calque
   entrant teinté (B, animé) — couleurs indépendantes du thème, comme le plateau vidéo. */
.ic-ttile__a {
    display: block;
    height: 34px;
    border-radius: 3px;
    background: linear-gradient(135deg, #3a3f4a, #23262e);
}
.ic-ttile__b {
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    height: 34px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--c-info), color-mix(in srgb, var(--c-info) 45%, #fff));
}
.ic-ttile__ico {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 11px;
    z-index: 1;
}
.ic-ttile__label {
    font-size: 9px;
    line-height: 1.2;
    color: var(--c-text-muted);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ic-ttiles__more {
    border: 0;
    background: transparent;
    color: var(--c-info);
    font-size: var(--fs-xs);
    padding: 2px 0;
    cursor: pointer;
    display: block;
    margin-bottom: var(--sp-1);
}

/* Popover de jonction (badge cliquable) */
.ic-transpop {
    position: fixed;
    z-index: 1100;
    width: 320px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg, var(--shadow));
    padding: var(--sp-2);
}

/* Trait « fantôme » au point de collage pendant un glissement */
.ic-snapline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--c-info);
    z-index: 5;
    pointer-events: none;
}

/* Repère de dépôt : la place visée est prise
   ------------------------------------------
   Trois signes pendant le glissé, jamais visibles quand la place est libre :
   le contour en pointillé montre CE QU'ON VISE, le clip en cause s'allume,
   et la phrase dit où ça se posera. Sans quoi le clip se cale ailleurs sans
   explication — et un geste inexpliqué se lit comme un défaut. */
.ic-drop-ghost {
    position: absolute;
    top: 2px;
    bottom: 2px;
    border: 2px dashed var(--c-warning);
    border-radius: var(--radius-sm);
    pointer-events: none;   /* pas de fond : il masquerait le clip qu'il désigne */
    z-index: 6;
}

.ic-clip.is-blocking {
    outline: 2px solid var(--c-warning);
    outline-offset: -2px;
}

.ic-drop-hint {
    position: fixed;        /* hors de la timeline : jamais rognée par le défilement */
    padding: 2px var(--sp-2);
    border-radius: var(--radius-sm);
    background: var(--c-warning);
    color: var(--c-on-gold);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1200;
    box-shadow: var(--shadow);
}

/* Menu contextuel des clips (clic droit) */
.ic-ctx {
    position: fixed;
    z-index: 1100;
    min-width: 210px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg, var(--shadow));
    padding: var(--sp-1);
    display: flex;
    flex-direction: column;
}
.ic-ctx__item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    border: 0;
    background: transparent;
    color: var(--c-text);
    font-size: var(--fs-sm);
    text-align: left;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.ic-ctx__item i { width: 16px; text-align: center; color: var(--c-text-muted); }
.ic-ctx__item:hover:not(:disabled) { background: var(--c-surface-2); }
.ic-ctx__item:disabled { opacity: .45; cursor: default; }
.ic-ctx__item--danger,
.ic-ctx__item--danger i { color: var(--c-danger); }
.ic-ctx__item--danger:hover:not(:disabled) { background: var(--c-danger-soft); }
.ic-ctx__sep {
    height: 1px;
    background: var(--c-border);
    margin: var(--sp-1) 0;
}

/* Poignées de ROGNAGE : les 9 px de chaque extrémité leur appartiennent.
   Ordre de priorité assumé sur les bords d'un clip (le plus haut gagne) :
     points de fondu (coins HAUTS, z-index 5)
     > poignées de rognage (toute la hauteur, z-index 4)
     > badges transition et son (z-index 3)
     > barre de volume (pleine largeur, z-index 2).
   ⚠ Sans cet ordre, la poignée d'ENTRÉE était recouverte par le badge de
   jonction (au milieu) et par le badge son (en bas) : le clip ne se rognait
   plus que par la fin — défaut signalé le 13/08/2026. La symétrie des deux
   extrémités est une propriété à préserver, elle se vérifie au banc. */
.ic-clip__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 9px;
    cursor: ew-resize;
    z-index: 4;
}
.ic-clip__handle--l { left: 0; border-left: 3px solid transparent; }
.ic-clip__handle--r { right: 0; border-right: 3px solid transparent; }
.ic-clip.is-selected .ic-clip__handle--l { border-left-color: var(--c-text); }
.ic-clip.is-selected .ic-clip__handle--r { border-right-color: var(--c-text); }

/* ══════ Chutier (panneau médias) ══════ */

.ic-dropzone {
    border: 2px dashed var(--c-border);
    border-radius: var(--radius);
    padding: var(--sp-3);
    text-align: center;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.ic-dropzone.is-dragover {
    border-color: var(--c-border-strong);
    background: var(--accent-soft);
}
.ic-dropzone__browse {
    color: var(--c-info);
    text-decoration: underline;
    cursor: pointer;
}

.ic-asset {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    margin-top: var(--sp-2);
    cursor: grab; /* glissable vers une piste de la timeline */
}
.ic-asset.is-dragging { opacity: .6; }
.ic-asset__thumb {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--c-surface-2);
    display: grid;
    place-items: center;
    color: var(--c-text-faint);
    overflow: hidden;
}
.ic-asset__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Vignette d'overlay : fond damier pour voir les PNG clairs/transparents. */
.ic-asset__thumb--overlay {
    background:
        repeating-conic-gradient(var(--c-surface-2) 0% 25%, var(--c-surface) 0% 50%)
        0 0 / 12px 12px;
}
.ic-asset__thumb--overlay img { object-fit: contain; }
.ic-asset__main { flex: 1 1 auto; min-width: 0; }
.ic-asset__name {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ic-asset__meta { font-size: var(--fs-xs); color: var(--c-text-faint); }
.ic-asset__actions { display: flex; gap: 4px; }
.ic-asset__btn {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: var(--fs-xs);
}
.ic-asset__btn:hover { background: var(--c-surface-2); color: var(--c-text); }
.ic-asset__btn--danger:hover { background: var(--c-danger-soft); color: var(--c-danger); border-color: var(--c-danger); }

/* Résultats Zetta */
.ic-zetta-result {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-xs);
}
.ic-zetta-result:hover { background: var(--c-surface-2); }

/* ══════ Inspecteur ══════ */

.ic-field { margin-bottom: var(--sp-2); }
.ic-field label {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-text-faint);
    margin-bottom: 2px;
}

/* Empilement sous 900px : tout en une colonne, plateau d'abord, poignée masquée. */
@media (max-width: 900px) {
    .ic-editor {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
    .ic-workrow { grid-template-columns: 1fr; }
    .ic-stagewrap { order: -1; min-height: 320px; }
    .ic-panel { max-height: 40vh; }
    .ic-resizer { display: none; }
    .ic-timeline { height: auto; }
}