/* =====================================================================
   Studio Shorts : le style (version 2)
   Idée : un studio clair et aérien. Fond pastel doux, panneaux
   blancs qui flottent, boutons en pilule, un seul dégradé vif
   pour les actions « magiques » (IA, export). Thème sombre en option.
   ===================================================================== */

:root {
    --fond: #F6F5F2;
    --surface: #FFFFFF;
    --surface-2: #F2F1EE;
    --surface-3: #E8E7E3;
    --verre: rgba(255, 255, 255, 0.62);
    --verre-bord: rgba(255, 255, 255, 0.85);
    --ligne: rgba(20, 20, 30, 0.07);
    --ligne-forte: rgba(20, 20, 30, 0.13);

    --texte: #111218;
    --texte-doux: #5E6271;
    --texte-faible: #969AA6;

    --encre: #111218;
    --encre-survol: #2B2C35;
    --sur-encre: #FFFFFF;

    --accent: #6A4BFF;
    --accent-doux: rgba(106, 75, 255, 0.10);
    --accent-anneau: rgba(106, 75, 255, 0.28);
    --magie: linear-gradient(115deg, #6A4BFF 0%, #B04BFF 42%, #FF5C8D 78%, #FF8A4C 100%);
    --lueur: rgba(160, 80, 255, 0.45);

    --rouge: #E5484D;
    --vert: #1E9E62;
    --orange: #E8860C;

    --ombre-1: 0 1px 2px rgba(18, 18, 28, 0.04), 0 1px 6px rgba(18, 18, 28, 0.04);
    --ombre-2: 0 1px 2px rgba(18, 18, 28, 0.05), 0 14px 34px -12px rgba(18, 18, 28, 0.12);
    --ombre-3: 0 30px 70px -20px rgba(18, 18, 28, 0.30);

    --vague-1: rgba(255, 176, 138, 0.42);
    --vague-2: rgba(186, 160, 255, 0.36);
    --vague-3: rgba(136, 200, 255, 0.40);

    --police: 'Geist Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    color-scheme: light;
}

:root[data-theme="dark"] {
    --fond: #0C0C10;
    --surface: #16161C;
    --surface-2: #1E1E25;
    --surface-3: #2A2A33;
    --verre: rgba(22, 22, 28, 0.66);
    --verre-bord: rgba(255, 255, 255, 0.07);
    --ligne: rgba(255, 255, 255, 0.07);
    --ligne-forte: rgba(255, 255, 255, 0.13);

    --texte: #F4F4F7;
    --texte-doux: #A3A6B2;
    --texte-faible: #6E717D;

    --encre: #F4F4F7;
    --encre-survol: #FFFFFF;
    --sur-encre: #0C0C10;

    --accent: #8C76FF;
    --accent-doux: rgba(140, 118, 255, 0.16);
    --accent-anneau: rgba(140, 118, 255, 0.35);

    --ombre-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --ombre-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px -14px rgba(0, 0, 0, 0.6);
    --ombre-3: 0 30px 80px -20px rgba(0, 0, 0, 0.8);

    --vague-1: rgba(255, 120, 90, 0.12);
    --vague-2: rgba(130, 90, 255, 0.20);
    --vague-3: rgba(60, 140, 255, 0.14);

    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    height: 100%;
}

body {
    position: relative;
    background: var(--fond);
    color: var(--texte);
    font-family: var(--police);
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
}

/* Le fond pastel, comme une lumière douce */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 620px at 4% -12%, var(--vague-1), transparent 62%),
        radial-gradient(820px 600px at 55% -24%, var(--vague-2), transparent 62%),
        radial-gradient(900px 760px at 108% 28%, var(--vague-3), transparent 62%);
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ic {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

h2 {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 620;
    letter-spacing: -0.02em;
}


/* =====================================================================
   Grille : menu | milieu | aperçu
   ===================================================================== */

.app {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr) minmax(380px, 31vw);
    height: 100vh;
}


/* ---------- Menu (panneau en verre) ---------- */

.menu {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin: 12px 0 12px 12px;
    padding: 20px 14px 16px;
    border: 1px solid var(--verre-bord);
    border-radius: 26px;
    background: var(--verre);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    box-shadow: var(--ombre-2);
    overflow-y: auto;
}

.marque {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 2px 8px;
    color: var(--texte);
    text-decoration: none;
}

/* Logo : un carré dégradé avec un écran 9:16 blanc */
.marque-icone {
    position: relative;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 11px;
    background: var(--magie);
    box-shadow: 0 6px 16px -6px var(--lueur), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.marque-icone span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 13px;
    height: 21px;
    border: 2.2px solid #fff;
    border-radius: 4px;
    transform: translate(-50%, -50%);
}

.marque-icone span::after {
    content: '';
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 3px;
    height: 3px;
    border-radius: 2px;
    background: #fff;
}

.marque-nom {
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -0.03em;
}

.menu-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-titre {
    margin: 16px 12px 6px;
    font-size: 12px;
    font-weight: 550;
    color: var(--texte-faible);
}

.menu-titre:first-child {
    margin-top: 0;
}

.menu-lien {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--texte-doux);
    font-size: 14.5px;
    font-weight: 540;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.menu-lien:hover {
    background: var(--surface-2);
    color: var(--texte);
}

.menu-lien.actif {
    background: var(--surface);
    border-color: var(--ligne);
    color: var(--texte);
    box-shadow: var(--ombre-1);
}

.menu-lien.actif .ic {
    color: var(--accent);
}

.menu-bas {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.menu-note {
    margin: 0 10px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--texte-faible);
}

/* Choix du thème clair / sombre */
.theme {
    display: flex;
    gap: 2px;
    padding: 3px;
    margin: 0 6px;
    border-radius: 999px;
    background: var(--surface-2);
    align-self: flex-start;
}

.theme button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--texte-faible);
    cursor: pointer;
}

.theme button.choisi {
    background: var(--surface);
    color: var(--texte);
    box-shadow: var(--ombre-1);
}

.theme .ic {
    width: 16px;
    height: 16px;
}


/* ---------- Milieu ---------- */

.centre {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-y: auto;
    position: relative;
}

.entete {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 30px 40px 4px;
}

.entete-projet {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.nom-projet {
    min-width: 0;
    width: 100%;
    max-width: 520px;
    padding: 2px 10px;
    margin-left: -10px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    font-size: 30px;
    font-weight: 640;
    letter-spacing: -0.035em;
    field-sizing: content;
    transition: background-color 0.15s, border-color 0.15s;
}

@supports (field-sizing: content) {
    .nom-projet {
        width: auto;
        min-width: 6ch;
    }
}

.nom-projet:hover {
    background: var(--verre);
}

.nom-projet:focus {
    border-color: var(--ligne-forte);
    background: var(--surface);
    outline: none;
}

/* Petite pastille d'état de la sauvegarde */
.etat-sauvegarde {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    background: var(--verre);
    border: 1px solid var(--ligne);
    font-size: 12.5px;
    font-weight: 520;
    color: var(--texte-doux);
}

.etat-sauvegarde:empty {
    display: none;
}

.etat-sauvegarde::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--texte-faible);
}

.etat-sauvegarde[data-etat="ok"]::before {
    background: var(--vert);
}

.etat-sauvegarde[data-etat="encours"]::before {
    background: var(--orange);
}

.etat-sauvegarde[data-etat="erreur"]::before {
    background: var(--rouge);
}


/* ---------- Étapes (barre en pilule) ---------- */

.etapes {
    position: sticky;
    top: 0;
    z-index: 5;
    flex: none;
    display: flex;
    margin: 0;
    padding: 16px 40px 14px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.etapes-piste {
    display: flex;
    gap: 2px;
    padding: 5px;
    border-radius: 999px;
    background: var(--verre);
    border: 1px solid var(--verre-bord);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--ombre-1);
}

.etapes li {
    flex: none;
    list-style: none;
}

.etape {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px 7px 7px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--texte-doux);
    font-size: 14px;
    font-weight: 540;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.etape:hover {
    color: var(--texte);
    background: var(--surface-2);
}

.etape-num {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--texte-doux);
    font-size: 12px;
    font-weight: 620;
    font-variant-numeric: tabular-nums;
}

.etape.faite .etape-num {
    background: var(--accent-doux);
    color: var(--accent);
}

.etape.active {
    background: var(--encre);
    color: var(--sur-encre);
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.35);
}

.etape.active .etape-num {
    background: rgba(255, 255, 255, 0.18);
    color: var(--sur-encre);
}

:root[data-theme="dark"] .etape.active .etape-num {
    background: rgba(0, 0, 0, 0.12);
}


/* ---------- Panneaux et cartes ---------- */

.panneaux {
    flex: 1;
    width: 100%;
    max-width: 860px;
    padding: 12px 40px 40px;
}

.panneau {
    display: none;
}

.panneau.visible {
    display: block;
    animation: apparition 0.28s ease-out;
}

@keyframes apparition {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.carte {
    background: var(--surface);
    border: 1px solid var(--ligne);
    border-radius: 24px;
    padding: 26px 28px;
    margin-bottom: 16px;
    box-shadow: var(--ombre-2);
}

.carte-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.carte-tete h2 {
    margin: 0;
}

.compteur {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 12.5px;
    font-weight: 550;
    color: var(--texte-doux);
}

.compteur:empty {
    display: none;
}

.aide {
    margin: -6px 0 18px;
    color: var(--texte-doux);
    font-size: 14px;
    max-width: 66ch;
}

.aide.petite {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--texte-faible);
}

.vide-message {
    margin: 8px 0 0;
    padding: 28px 22px;
    border: 1.5px dashed var(--ligne-forte);
    border-radius: 18px;
    color: var(--texte-doux);
    text-align: center;
    font-size: 14px;
}

.grille-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 6px;
}

.rangee-boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.sous-reglages {
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--surface-2);
}

.sous-reglages > :last-child {
    margin-bottom: 0;
}


/* ---------- Boutons (pilules) ---------- */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border: 1px solid var(--ligne-forte);
    border-radius: 999px;
    background: var(--surface);
    color: var(--texte);
    font-size: 14px;
    font-weight: 560;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--ombre-1);
    transition: background-color 0.15s, transform 0.15s, box-shadow 0.15s, filter 0.15s;
}

.bouton:hover {
    background: var(--surface-2);
}

.bouton:active {
    transform: scale(0.98);
}

/* Bouton principal : noir (blanc en thème sombre) */
.bouton-accent {
    background: var(--encre);
    border-color: var(--encre);
    color: var(--sur-encre);
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
}

.bouton-accent:hover {
    background: var(--encre-survol);
    border-color: var(--encre-survol);
}

/* Bouton « magique » : l'IA et l'export */
.bouton-magique {
    position: relative;
    border: 0;
    background: var(--magie);
    color: #fff;
    box-shadow: 0 10px 26px -10px var(--lueur), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.bouton-magique:hover {
    background: var(--magie);
    filter: brightness(1.07) saturate(1.05);
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -10px var(--lueur), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.bouton-magique:active {
    transform: scale(0.98);
}

.bouton-discret {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--texte-doux);
}

.bouton-discret:hover {
    background: var(--surface-2);
    color: var(--texte);
}

.bouton-petit {
    height: 34px;
    padding: 0 14px;
    font-size: 13.5px;
}

.bouton-petit .ic {
    width: 16px;
    height: 16px;
}

.bouton-grand {
    height: 54px;
    padding: 0 30px;
    font-size: 16px;
}

.bouton:disabled,
.bouton.desactive {
    opacity: 0.45;
    pointer-events: none;
}


/* ---------- Champs ---------- */

.champ {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr) 56px;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.champ-colonne {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.champ-nom {
    font-size: 13.5px;
    font-weight: 540;
    color: var(--texte-doux);
}

.champ output {
    justify-self: end;
    min-width: 44px;
    padding: 2px 8px;
    border-radius: 8px;
    background: var(--surface-2);
    font-size: 12.5px;
    font-weight: 560;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

select,
.zone-texte,
.zone-texte-ligne,
.lien-video input,
.coupe input,
.segment input,
.segment textarea,
.clip input {
    width: 100%;
    border: 1px solid var(--ligne-forte);
    border-radius: 12px;
    background: var(--surface);
    color: var(--texte);
    transition: border-color 0.15s, box-shadow 0.15s;
}

select {
    height: 42px;
    padding: 0 38px 0 14px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23969AA6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
}

.zone-texte {
    display: block;
    padding: 14px 16px;
    resize: vertical;
    font-size: 16px;
    line-height: 1.45;
    border-radius: 16px;
}

.zone-texte-ligne {
    height: 42px;
    padding: 0 14px;
}

select:focus,
.zone-texte:focus,
.zone-texte-ligne:focus,
.lien-video input:focus,
.coupe input:focus,
.segment input:focus,
.segment textarea:focus,
.clip input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-anneau);
    outline: none;
}

::placeholder {
    color: var(--texte-faible);
}

/* Curseurs (range) : piste fine, remplie en violet */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 22px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    --pct: 50%;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--accent) var(--pct), var(--surface-3) var(--pct));
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -7px;
    border: 0;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.22);
    transition: transform 0.12s;
}

input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.15);
}

input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: var(--surface-3);
}

input[type="range"]::-moz-range-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--accent);
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.22);
}

input[type="range"]:focus-visible {
    outline: none;
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--accent-anneau), 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* Choix en onglets (comme sur iPhone) */
.choix {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
    border-radius: 14px;
    background: var(--surface-2);
    align-self: flex-start;
}

.choix button {
    min-height: 34px;
    padding: 6px 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--texte-doux);
    font-size: 13.5px;
    font-weight: 540;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.choix button:hover {
    color: var(--texte);
}

.choix button.choisi {
    background: var(--surface);
    color: var(--texte);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
}

:root[data-theme="dark"] .choix button.choisi {
    background: var(--surface-3);
}

.choix-large {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.choix-large button {
    text-align: left;
    padding: 10px 14px;
}

/* Cadrage : 4 grandes cartes avec un mini dessin */
.choix-cartes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    margin-bottom: 22px;
    background: transparent;
    align-self: stretch;
}

.choix-cartes button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 18px 8px 14px;
    border: 1px solid var(--ligne);
    border-radius: 18px;
    background: var(--surface-2);
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.choix-cartes button:hover {
    transform: translateY(-2px);
    background: var(--surface);
    box-shadow: var(--ombre-2);
}

.choix-cartes button.choisi {
    background: var(--surface);
    color: var(--texte);
    box-shadow: 0 0 0 2px var(--accent), var(--ombre-2);
}

.mini {
    position: relative;
    width: 32px;
    height: 56px;
    border-radius: 7px;
    border: 2px solid currentColor;
    overflow: hidden;
    opacity: 0.85;
}

.choix-cartes button.choisi .mini {
    color: var(--accent);
    opacity: 1;
}

.mini::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 34%;
    transform: translateY(-50%);
    background: currentColor;
    opacity: 0.85;
}

.mini-flou {
    background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(127, 127, 127, 0.3) 4px 8px);
}

.mini-remplir::after {
    top: 0;
    height: 100%;
    transform: none;
    opacity: 0.5;
}

.mini-partage::after {
    top: 0;
    height: 50%;
    transform: none;
}

.mini-partage::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    opacity: 0.3;
    background: currentColor;
}

/* Interrupteur (comme sur iPhone) */
.interrupteur {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin: 6px 22px 6px 0;
    font-size: 14px;
    font-weight: 520;
    cursor: pointer;
    user-select: none;
}

.interrupteur input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.interrupteur-piste {
    position: relative;
    width: 40px;
    height: 24px;
    flex: none;
    border-radius: 12px;
    background: var(--surface-3);
    transition: background-color 0.2s;
}

.interrupteur-piste::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.2);
}

.interrupteur input:checked + .interrupteur-piste {
    background: var(--accent);
}

.interrupteur input:checked + .interrupteur-piste::after {
    transform: translateX(16px);
}

.interrupteur input:focus-visible + .interrupteur-piste {
    box-shadow: 0 0 0 4px var(--accent-anneau);
}

.interrupteur-petit {
    margin: 0;
    font-size: 13px;
    color: var(--texte-doux);
}

.interrupteurs {
    display: flex;
    flex-wrap: wrap;
    margin: 8px 0 4px;
}

/* Couleurs : pastilles rondes */
.couleurs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 14px;
}

.couleur {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px 5px 5px;
    border: 1px solid var(--ligne-forte);
    border-radius: 999px;
    background: var(--surface);
    font-size: 13.5px;
    font-weight: 540;
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.couleur:hover {
    box-shadow: var(--ombre-1);
}

.couleur input {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

.couleur input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.couleur input::-webkit-color-swatch {
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
}

.couleur input::-moz-color-swatch {
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
}


/* ---------- Importer ---------- */

.depot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 20px 36px;
    border: 1.5px dashed var(--ligne-forte);
    border-radius: 22px;
    background:
        radial-gradient(400px 160px at 50% 0%, var(--accent-doux), transparent 70%),
        var(--surface-2);
    text-align: center;
    transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
}

.depot.survol {
    border-color: var(--accent);
    background:
        radial-gradient(500px 220px at 50% 0%, var(--accent-anneau), transparent 70%),
        var(--surface-2);
    transform: scale(1.01);
}

.depot-icone {
    width: 56px;
    height: 56px;
    padding: 15px;
    margin-bottom: 6px;
    border-radius: 18px;
    background: var(--magie);
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    box-shadow: 0 12px 24px -10px var(--lueur);
}

.depot-titre {
    margin: 4px 0 0;
    font-size: 18px;
    font-weight: 620;
    letter-spacing: -0.02em;
}

.depot-aide {
    margin: 0 0 16px;
    font-size: 13.5px;
    color: var(--texte-doux);
}

.depot-compact {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px;
}

.depot-compact .depot-icone {
    width: 44px;
    height: 44px;
    padding: 11px;
    margin: 0;
    border-radius: 14px;
}

.depot-compact .depot-titre {
    margin: 0;
    font-size: 15px;
}

.fichier-charge {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 14px 12px 12px;
    border-radius: 20px;
    background: var(--surface-2);
}

.fichier-vignette {
    width: 54px;
    height: 96px;
    border-radius: 12px;
    object-fit: cover;
    background: #000;
    flex: none;
    box-shadow: var(--ombre-2);
}

.fichier-texte {
    flex: 1;
    min-width: 0;
}

.fichier-nom {
    margin: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fichier-infos {
    margin: 2px 0 0;
    font-size: 13.5px;
    color: var(--texte-doux);
}

.lien-video {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.lien-video input {
    height: 42px;
    padding: 0 16px;
    border-radius: 999px;
}

#aideLien {
    margin: 12px 0 0;
}

.fichier-ligne {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 16px;
    flex-wrap: wrap;
}

.fichier-ligne-nom {
    flex: 1;
    min-width: 120px;
    font-size: 14px;
    color: var(--texte-doux);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ---------- État de l'IA ---------- */

.etat-ia {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--accent-doux);
}

.etat-ia.carte {
    margin-top: 0;
    padding: 18px 22px;
    background: var(--surface);
}

.etat-ia-texte {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 540;
}

.etat-ia.ok {
    background: rgba(30, 158, 98, 0.10);
}

.etat-ia.ok .etat-ia-texte {
    margin: 0;
    color: var(--vert);
}

.etat-ia.erreur {
    background: rgba(229, 72, 77, 0.09);
}

.etat-ia.erreur .etat-ia-texte {
    margin: 0;
    color: var(--rouge);
}

.etat-ia.ok .barre,
.etat-ia.erreur .barre {
    display: none;
}

.barre {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--surface-3);
    overflow: hidden;
}

.barre-remplie {
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: var(--magie);
    transition: width 0.25s;
}

.barre.indefinie .barre-remplie {
    width: 30%;
    animation: va-et-vient 1.3s ease-in-out infinite;
}

@keyframes va-et-vient {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(340%); }
}

.barre-grande {
    height: 10px;
    border-radius: 5px;
}


/* ---------- Cartes de style ---------- */

.modeles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.modele {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 6px 6px 12px;
    border: 1px solid var(--ligne);
    border-radius: 20px;
    background: var(--surface);
    color: var(--texte-doux);
    font-size: 13.5px;
    font-weight: 560;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s, color 0.18s;
}

.modele canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 15px;
}

.modele:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombre-2);
    color: var(--texte);
}

.modele.choisi {
    color: var(--texte);
    box-shadow: 0 0 0 2px var(--accent), 0 12px 28px -12px var(--accent-anneau);
}

.modeles-titre {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 18px;
}


/* ---------- Segments de sous-titres ---------- */

.barre-outils {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.segments {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.segment {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 34px;
    gap: 12px;
    align-items: start;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: var(--surface-2);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.segment.actif {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-anneau);
}

.segment-temps {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.segment-aller {
    height: 30px;
    border: 0;
    border-radius: 10px;
    background: var(--encre);
    color: var(--sur-encre);
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.segment-aller:hover {
    background: var(--accent);
    color: #fff;
}

.segment input {
    height: 30px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.segment textarea {
    min-height: 70px;
    padding: 9px 12px;
    resize: vertical;
    font-size: 15px;
    line-height: 1.45;
    border-radius: 14px;
}

.segment-supprimer {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--texte-faible);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.segment-supprimer:hover {
    background: rgba(229, 72, 77, 0.12);
    color: var(--rouge);
}


/* ---------- Clips du classement ---------- */

.liste-clips {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.clip {
    position: relative;
    display: grid;
    grid-template-columns: 14px 58px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 20px;
    background: var(--surface-2);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.clip.actif {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-anneau);
}

.clip-vignette {
    position: relative;
    width: 58px;
    height: 103px;
    border-radius: 12px;
    background: #000;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--ombre-2);
}

.clip-vignette img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.clip-rang {
    position: absolute;
    left: 5px;
    top: 5px;
    min-width: 28px;
    padding: 2px 7px;
    border-radius: 8px;
    background: var(--magie);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
}

.clip-infos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.clip-infos .etiquette {
    height: 40px;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 560;
}

.clip-temps {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--texte-doux);
}

.clip-temps input {
    width: 74px;
    height: 32px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 13px;
    text-align: center;
}

.clip-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.clip-actions button {
    width: 34px;
    height: 30px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--texte-doux);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.clip-actions button:hover {
    background: var(--surface);
    color: var(--texte);
}

.clip-actions button.supprimer:hover {
    background: rgba(229, 72, 77, 0.12);
    color: var(--rouge);
}

.clip-actions button:disabled {
    opacity: 0.3;
    pointer-events: none;
}


/* ---------- Couper ---------- */

.coupe {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.coupe-bloc {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px;
    border-radius: 18px;
    background: var(--surface-2);
}

.coupe input {
    height: 42px;
    padding: 0 14px;
    font-variant-numeric: tabular-nums;
}

#dureeCoupe {
    margin: 16px 0 0;
}


/* ---------- Exporter ---------- */

.resume {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 22px;
}

.resume div {
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--surface-2);
}

.resume dt {
    font-size: 12.5px;
    color: var(--texte-doux);
}

.resume dd {
    margin: 2px 0 0;
    font-size: 19px;
    font-weight: 640;
    letter-spacing: -0.02em;
}

.export-zone {
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.export-progression {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.export-progression .barre {
    width: 100%;
}

.export-chiffres {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-weight: 620;
    font-variant-numeric: tabular-nums;
}

#resteExport {
    color: var(--texte-doux);
    font-weight: 500;
}

.export-resultat {
    display: flex;
    gap: 20px;
    margin-top: 24px;
    padding: 14px;
    border-radius: 22px;
    background: var(--surface-2);
}

.export-resultat video {
    width: 150px;
    aspect-ratio: 9 / 16;
    border-radius: 14px;
    background: #000;
    flex: none;
    box-shadow: var(--ombre-2);
}

.export-resultat-infos {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    padding-top: 6px;
}

.export-resultat-infos .bouton {
    margin-top: 10px;
}


/* ---------- Mes projets ---------- */

.projets-tete {
    margin: 18px 0 22px;
}

.titre-page {
    font-size: 34px;
    font-weight: 650;
    letter-spacing: -0.04em;
    margin-bottom: 6px;
}

.projets-tete .aide {
    margin: 0;
}

.grille-projets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.projet {
    display: flex;
    flex-direction: column;
    padding: 6px;
    border: 1px solid var(--ligne);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--ombre-2);
    transition: transform 0.18s;
}

.projet:hover {
    transform: translateY(-3px);
}

.projet.courant {
    box-shadow: 0 0 0 2px var(--accent), var(--ombre-2);
}

.projet-image {
    aspect-ratio: 4 / 3;
    border-radius: 17px;
    background:
        radial-gradient(120px 90px at 30% 20%, rgba(140, 100, 255, 0.5), transparent 70%),
        #16151C;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.projet-image img {
    height: 92%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.6);
}

.projet-corps {
    padding: 12px 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.projet-nom {
    margin: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.projet-infos {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--texte-doux);
}

.projet-boutons {
    display: flex;
    gap: 6px;
}

.projet-boutons .bouton {
    flex: 1;
}


/* ---------- Navigation du bas ---------- */

.navigation {
    position: sticky;
    bottom: 0;
    flex: none;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    max-width: 860px;
    width: 100%;
    padding: 30px 40px 20px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--fond) 62%);
}

.navigation .bouton {
    pointer-events: auto;
    height: 44px;
    padding: 0 22px;
    box-shadow: var(--ombre-2);
}

.navigation .bouton:not(.bouton-accent) {
    background: var(--verre);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}


/* =====================================================================
   Aperçu (à droite) : une scène avec le téléphone qui flotte
   ===================================================================== */

.apercu {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 12px 12px 12px 0;
    padding: 20px 24px 20px;
    border: 1px solid var(--verre-bord);
    border-radius: 28px;
    background: var(--verre);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    box-shadow: var(--ombre-2);
    min-height: 0;
    overflow: hidden;
}

.apercu-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.apercu-tete h2 {
    margin: 0;
}

.ecran {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Lueur colorée derrière le téléphone */
.ecran::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 62%;
    height: 58%;
    transform: translate(-50%, -46%);
    border-radius: 50%;
    background: var(--magie);
    filter: blur(70px);
    opacity: 0.42;
    pointer-events: none;
}

.telephone {
    position: relative;
    border-radius: 30px;
    background: #000;
    box-shadow:
        0 0 0 7px #121318,
        0 0 0 8px rgba(255, 255, 255, 0.12),
        0 40px 80px -24px rgba(20, 10, 60, 0.55);
    overflow: hidden;
}

.telephone canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.ecran-vide {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 30px;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    font-size: 14px;
}

/* Zones où YouTube met ses boutons */
.zones {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.zone {
    position: absolute;
    display: grid;
    place-items: center;
    background: repeating-linear-gradient(135deg, rgba(255, 92, 141, 0.3) 0 8px, rgba(255, 92, 141, 0.12) 8px 16px);
    border: 1px dashed rgba(255, 92, 141, 0.85);
}

.zone span {
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 11px;
    font-weight: 560;
}

.zone-droite {
    right: 0;
    top: 47%;
    bottom: 17%;
    width: 16%;
}

.zone-droite span {
    writing-mode: vertical-rl;
}

.zone-bas {
    left: 0;
    right: 0;
    bottom: 0;
    height: 17%;
}

/* Lecteur : une barre en pilule qui flotte */
.lecteur {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 12px;
    border-radius: 22px;
    background: var(--surface);
    border: 1px solid var(--ligne);
    box-shadow: var(--ombre-2);
}

.barre-temps {
    width: 100%;
}

.lecteur-boutons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rond {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--texte);
    cursor: pointer;
    transition: background-color 0.15s, transform 0.15s;
}

.rond:hover {
    background: var(--surface-3);
}

.rond:active {
    transform: scale(0.94);
}

.rond-lecture {
    width: 46px;
    height: 46px;
    background: var(--encre);
    color: var(--sur-encre);
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.55);
}

.rond-lecture:hover {
    background: var(--encre-survol);
}

.rond-lecture .ic {
    width: 19px;
    height: 19px;
}

.temps {
    flex: 1;
    padding-left: 6px;
    font-size: 14px;
    font-weight: 560;
    font-variant-numeric: tabular-nums;
}

.temps-sep {
    margin: 0 6px;
    color: var(--texte-faible);
}

#tempsTotal {
    color: var(--texte-doux);
}


/* ---------- Notifications ---------- */

.notifications {
    position: fixed;
    left: 50%;
    top: 22px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    transform: translateX(-50%);
    pointer-events: none;
}

.notification {
    max-width: min(480px, 90vw);
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--encre);
    color: var(--sur-encre);
    font-size: 14px;
    font-weight: 540;
    box-shadow: var(--ombre-3);
    animation: arrivee 0.25s cubic-bezier(0.3, 0.7, 0.4, 1.2);
}

.notification.erreur {
    background: var(--rouge);
    color: #fff;
    border-radius: 18px;
}

.notification.ok {
    background: var(--vert);
    color: #fff;
}

@keyframes arrivee {
    from { opacity: 0; transform: translateY(-10px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

/* Les vraies vidéos sont cachées (on les dessine dans le canvas) */
.medias {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 2px;
    height: 2px;
    overflow: hidden;
    opacity: 0.01;
    pointer-events: none;
}

.medias video,
.medias audio {
    width: 2px;
    height: 2px;
}


/* =====================================================================
   Écrans plus petits
   ===================================================================== */

@media (max-width: 1240px) {
    .app {
        grid-template-columns: 84px minmax(0, 1fr) 360px;
    }

    .marque-nom,
    .menu-titre,
    .menu-note,
    .menu-lien span {
        display: none;
    }

    .marque,
    .menu-lien {
        justify-content: center;
    }

    .menu {
        padding: 18px 10px;
        align-items: center;
    }

    .menu-lien {
        padding: 12px;
    }

    .menu-nav {
        gap: 8px;
    }

    .theme {
        flex-direction: column;
        margin: 0;
        align-self: center;
    }

    .choix-cartes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .entete,
    .etapes,
    .panneaux,
    .navigation {
        padding-left: 28px;
        padding-right: 28px;
    }
}

@media (max-width: 860px) {
    .app {
        grid-template-columns: 1fr;
        height: auto;
    }

    .menu {
        flex-direction: row;
        align-items: center;
        margin: 10px 10px 0;
        padding: 8px 12px;
        border-radius: 20px;
        overflow: visible;
    }

    .menu-nav {
        flex-direction: row;
        margin-left: auto;
    }

    .menu-bas {
        margin-top: 0;
    }

    .theme {
        flex-direction: row;
    }

    .apercu {
        order: -1;
        margin: 10px 10px 0;
        height: 74vh;
        padding: 14px 16px;
    }

    .centre {
        overflow: visible;
    }

    .entete,
    .etapes,
    .panneaux,
    .navigation {
        padding-left: 14px;
        padding-right: 14px;
    }

    .entete {
        flex-wrap: wrap;
        padding-top: 22px;
    }

    .nom-projet {
        font-size: 24px;
    }

    .carte {
        padding: 20px 18px;
        border-radius: 22px;
    }

    .champ {
        grid-template-columns: 92px minmax(0, 1fr) 50px;
        gap: 10px;
    }

    .grille-2,
    .coupe,
    .resume {
        grid-template-columns: 1fr;
    }

    .modeles,
    .modeles-titre {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .export-resultat {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ---------- Coller des liens TikTok (classement) ---------- */

.liens-clips {
    padding: 6px;
    border: 1px solid var(--ligne-forte);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--ombre-1);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.liens-clips:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-anneau);
}

.liens-clips-zone {
    display: flex;
    gap: 10px;
    padding: 10px 12px 0;
}

.liens-clips-icone {
    margin-top: 3px;
    color: var(--texte-faible);
}

.liens-clips textarea {
    flex: 1;
    min-height: 70px;
    padding: 0;
    border: 0;
    background: transparent;
    resize: vertical;
    font-size: 15px;
    line-height: 1.6;
    outline: none;
}

.liens-clips-bas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 6px 6px 14px;
}

.liens-clips-bas .aide {
    margin: 0;
}

.liens-clips-bas .aide.erreur {
    color: var(--rouge);
}

.separateur {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0;
    color: var(--texte-faible);
    font-size: 13px;
}

.separateur::before,
.separateur::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ligne-forte);
}


/* ---------- Barre de coupe (pellicule + poignées) ---------- */

.coupe-barre {
    display: flex;
    flex-direction: column;
    gap: 8px;
    user-select: none;
    -webkit-user-select: none;
}

.coupe-piste {
    position: relative;
    height: 56px;
    margin: 0 16px;
    touch-action: none;
    cursor: pointer;
}

.coupe-pellicule {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background-color: #1C1B24;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Ce qu'on coupe devient sombre */
.coupe-ombre {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(12, 12, 18, 0.62);
    backdrop-filter: grayscale(0.6);
    -webkit-backdrop-filter: grayscale(0.6);
}

.coupe-ombre-gauche {
    left: 0;
    border-radius: 10px 0 0 10px;
}

.coupe-ombre-droite {
    right: 0;
    border-radius: 0 10px 10px 0;
}

/* Le cadre de la partie gardée */
.coupe-selection {
    position: absolute;
    top: -3px;
    bottom: -3px;
    border-top: 3px solid var(--accent);
    border-bottom: 3px solid var(--accent);
    cursor: grab;
}

.coupe-barre.glisse .coupe-selection {
    cursor: grabbing;
}

.coupe-poignee {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 16px;
    padding: 0;
    border: 0;
    background: var(--accent);
    display: grid;
    place-items: center;
    cursor: ew-resize;
    touch-action: none;
    transition: filter 0.15s;
}

.coupe-poignee:hover {
    filter: brightness(1.12);
}

.coupe-poignee:focus-visible {
    outline: 2px solid var(--texte);
    outline-offset: 1px;
}

.coupe-poignee span {
    width: 3px;
    height: 20px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.95);
}

.coupe-poignee-debut {
    transform: translateX(-100%);
    border-radius: 10px 0 0 10px;
}

.coupe-poignee-fin {
    border-radius: 0 10px 10px 0;
}

/* La ligne blanche qui suit la lecture */
.coupe-tete {
    position: absolute;
    top: -6px;
    bottom: -6px;
    width: 3px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* La bulle avec le temps pendant qu'on glisse */
.coupe-bulle {
    position: absolute;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    padding: 4px 9px;
    border-radius: 8px;
    background: var(--encre);
    color: var(--sur-encre);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--ombre-2);
}

.coupe-infos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    font-size: 12.5px;
    color: var(--texte-doux);
    font-variant-numeric: tabular-nums;
}

.coupe-texte-duree {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--accent-doux);
    color: var(--accent);
    font-weight: 620;
}

.coupe-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.coupe-actions .aide {
    margin: 0;
}

.coupe-boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Dans la liste des clips, la barre prend toute la largeur */
.clip-infos .coupe-barre {
    margin-top: 4px;
}

.clip-infos .coupe-piste {
    height: 48px;
}



/* ---------- Ordre d'apparition et numéros (classement) ---------- */

.ordre-apparition {
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: 20px;
    background: var(--surface-2);
}

.ordre-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.ordre-tete .choix {
    background: var(--surface-3);
}

:root[data-theme="dark"] .ordre-tete .choix {
    background: var(--surface);
}

/* La suite des clips : #3 > #1 > #5 */
.sequence {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.sequence .aide {
    margin: 0;
}

.sequence-clip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 190px;
    padding: 5px 12px 5px 5px;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    background: var(--surface);
    color: var(--texte);
    font-size: 13px;
    font-weight: 520;
    cursor: pointer;
    box-shadow: var(--ombre-1);
    transition: transform 0.15s;
}

.sequence-clip:hover {
    transform: translateY(-1px);
}

.sequence-clip strong {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--encre);
    color: var(--sur-encre);
    font-size: 12.5px;
    font-weight: 700;
}

.sequence-clip.premier strong {
    background: var(--magie);
    color: #fff;
}

.sequence-clip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sequence-clip:not(:has(span)) {
    padding-right: 5px;
}

.sequence-fleche {
    display: grid;
    place-items: center;
    color: var(--texte-faible);
}

.sequence-fleche .ic {
    width: 15px;
    height: 15px;
}

.ordre-apparition > .aide {
    margin: 12px 0 0;
}

/* Les pastilles du numéro dans chaque clip */
.rang-choix {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.rang-titre {
    margin-right: 4px;
    font-size: 12.5px;
    font-weight: 550;
    color: var(--texte-doux);
}

.rang-pastille {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--ligne-forte);
    border-radius: 50%;
    background: var(--surface);
    color: var(--texte-doux);
    font-size: 12.5px;
    font-weight: 620;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: transform 0.12s, background-color 0.12s, color 0.12s;
}

.rang-pastille:hover {
    color: var(--texte);
    border-color: var(--accent);
    transform: scale(1.08);
}

.rang-pastille.choisi {
    border-color: transparent;
    background: var(--magie);
    color: #fff;
    box-shadow: 0 6px 14px -6px var(--lueur);
}

/* Ordre de passage sur la vignette (1er, 2e…) */
.clip-ordre {
    position: absolute;
    left: 5px;
    bottom: 5px;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

/* La poignée pour glisser un clip */
.clip-poignee {
    display: grid;
    grid-template-columns: repeat(2, 4px);
    grid-auto-rows: 4px;
    gap: 3px;
    align-content: center;
    justify-content: center;
    align-self: stretch;
    margin-left: 2px;
    border-radius: 8px;
    cursor: grab;
    touch-action: none;
}

.clip-poignee span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--texte-faible);
    box-shadow: 7px 0 0 var(--texte-faible);
    grid-column: 1;
}

.clip-poignee:hover span {
    background: var(--accent);
    box-shadow: 7px 0 0 var(--accent);
}

.clip.deplace {
    opacity: 0.45;
}

.clip.cible-avant::before,
.clip.cible-apres::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-anneau);
}

.clip.cible-avant::before {
    top: -7px;
}

.clip.cible-apres::after {
    bottom: -7px;
}