/* ▼▼▼ POLICE DU SITE — POUR CHANGER LA POLICE, TOUT SE PASSE ICI (2 lignes) ▼▼▼
   1) La ligne @import ci-dessous CHARGE la police (mets le nom + les graisses).
   2) La variable --font-ui plus bas l'APPLIQUE partout. Garde le même nom.
   Exemple pour passer en Poppins :
     @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
     --font-ui: "Poppins", system-ui, sans-serif;
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* ============================================================================
   Clipika — base.css  ·  DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Principe : chaque SECTION reçoit une classe de thème (theme-son /
   theme-montage / theme-soustitres) qui définit la variable --accent.
   Les composants génériques (.card-param, .switch, input[range]...) lisent
   cette variable et adoptent AUTOMATIQUEMENT la bonne couleur.

   SOMMAIRE
     1. THÈMES (code couleur par section)          → .theme-*
     2. BASE GLOBALE · POLICE UI + DESIGN TOKENS   → :root (--fs-*, --space-*)
     3. SCROLLBARS
     4. SELECT PRO
     5. CARTES DE PARAMÈTRES                        → .card-param / .card-titre
     6. TYPOGRAPHIE (5 rôles de texte)             → .t-titre / .t-label / .t-value…
     7. GROUPES & CHAMPS DE RÉGLAGE                → .fieldset / .field
     8. BOUTONS DE SECTION                          → .btn-param / .btn-valider
     9. INTERRUPTEURS (toggle switch)               → .switch
    10. JAUGES (range, accent auto)                → .range-*
    11. MOCKUP TÉLÉPHONE                            → .mockup-telephone
    12. POP-UPS GÉANTES                             → .popup-*
    14. PILULES SÉLECTIONNABLES                     → .pilule
    15. COLONNE DE PARAMÈTRES · HAUTEUR ADAPTATIVE  → .colonne-parametres
    16. SÉLECTEUR DE LANGUE (drapeau du header)      → .lang-switcher
    17. RETOUR TACTILE (appareils sans souris)       → :active sous (hover:none)
    18. WINDOW CONTROLS OVERLAY (PWA)
    19. CLIPPING · jauge à 2 pointeurs, carte de la source → .jauge-duo / .carte-source
   ============================================================================ */


/* ============================================================================
   1. THÈMES — Code couleur par section
   Valeurs alignées sur la palette Tailwind.
   --accent      : couleur de texte / titres / sliders (teinte 400)
   --accent-fill : remplissages pleins, switch ON, bordures (teinte 500)
   --accent-soft : fonds doux des boutons (teinte 900)
   ============================================================================ */

/* 🎙️ Bruitage · Son · Voix IA — CYAN */
.theme-son {
    --accent:      #22d3ee; /* cyan-400 */
    --accent-fill: #06b6d4; /* cyan-500 */
    --accent-soft: #164e63; /* cyan-900 */
}

/* 🎬 Montage · Master · Médias — VIOLET */
.theme-montage {
    --accent:      #c084fc; /* purple-400 */
    --accent-fill: #a855f7; /* purple-500 */
    --accent-soft: #581c87; /* purple-900 */
}

/* 📝 Sous-titres — ORANGE / AMBRE */
.theme-soustitres {
    --accent:      #fbbf24; /* amber-400 */
    --accent-fill: #f59e0b; /* amber-500 */
    --accent-soft: #78350f; /* amber-900 */
}

/* ⚪ Thème neutre par défaut (reste de l'UI) — utilisé si aucune section */
:root {
    --accent:      #94a3b8; /* slate-400 */
    --accent-fill: #64748b; /* slate-500 */
    --accent-soft: #0f172a; /* slate-900 */
}


/* ============================================================================
   2. BASE GLOBALE  ·  POLICE UI + DESIGN TOKENS
   ----------------------------------------------------------------------------
   Les "tokens" = les valeurs de référence du design. On ne met JAMAIS de
   taille/espacement au hasard : on pioche toujours dans ces échelles.
   Pour rendre l'app plus aérée ou plus dense : on change ici, partout suit.
   ============================================================================ */

:root {
    /* — Échelle TYPOGRAPHIQUE (5 rôles, pas un de plus) — */
    --fs-titre:   1.25rem;   /* 20px — titre de carte / modale */
    --fs-section: 0.6875rem; /* 11px — titre d'un groupe de réglages (MAJ) */
    --fs-label:   0.75rem;   /* 12px — nom d'un réglage */
    --fs-value:   0.75rem;   /* 12px — la valeur affichée (80, 65%) */
    --fs-hint:    0.6875rem; /* 11px — petite aide grise */

    /* — Échelle d'ESPACEMENT (multiples de 4 : le "rythme" de l'app) — */
    --space-1: 0.25rem; /*  4px */
    --space-2: 0.5rem;  /*  8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem;    /* 16px */
    --space-6: 1.5rem;  /* 24px */

    /* — Densité « Confortable » : espacements de référence des composants — */
    --group-padding:   var(--space-4); /* 16px de padding dans un groupe   */
    --group-gap:       var(--space-4); /* 16px entre deux réglages (aéré)  */
    --field-gap:       var(--space-2); /*  8px entre le label et le curseur */

    /* — Police d'interface (voir l'@import tout en haut du fichier) — */
    --font-ui: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* — Rayons & couleurs de surface réutilisés — */
    --radius:       0.75rem; /* rounded-xl */
    --radius-lg:    1rem;    /* rounded-2xl */
    --surface-2:    #1e293b;               /* slate-800 — GROUPE surélevé (élévation),
                                              1 cran + clair que le panneau slate-900 */
    --border-soft:  #334155;               /* slate-700 — fin liseré du groupe surélevé */
}

/* Police d'interface : pilotée par --font-ui (définie dans :root, chargée par
   l'@import en haut du fichier). NB : ne concerne PAS les sous-titres, qui
   gardent leur propre police. */
body {
    font-family: var(--font-ui);
}

/* DEUX GRAS SEULEMENT (le reste = 400 normal) :
     • gras léger  = 500 (Roboto Medium) → titres, labels, valeurs
     • gras fort   = 700 (Roboto Bold)   → boutons, accents marqués
   On neutralise TOUS les utilitaires de graisse de Tailwind pour les
   faire retomber sur ces deux niveaux. Le préfixe `body` garantit la
   priorité sur Tailwind (font-black/bold…). */
body .font-thin,
body .font-light,
body .font-normal      { font-weight: 400; } /* normal */
body .font-medium,
body .font-semibold    { font-weight: 500; } /* gras léger */
body .font-bold,
body .font-extrabold,
body .font-black       { font-weight: 700; } /* gras fort */

/* Lissage des polices (anti-aliasing) */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* PRIORITÉ DE `.hidden` (interop Tailwind) :
   tailwind.css est chargé AVANT base.css. Sans cette règle, un composant
   maison en display:flex (ex. .fieldset) écraserait l'utilitaire .hidden
   (même spécificité, déclaré après) et l'élément resterait visible alors
   que le JS l'a « caché ». On garantit donc que .hidden cache toujours —
   comme le fait Bootstrap avec .d-none. */
.hidden { display: none !important; }

/* CONTREPARTIE INDISPENSABLE : comme .hidden est en !important, les utilitaires
   responsives d'affichage (ex. <nav class="hidden sm:flex">) ne pouvaient plus
   « rallumer » l'élément à leur breakpoint. On leur redonne la même priorité
   pour que le pattern Tailwind « hidden + sm:/md: » refonctionne (nav du header,
   séparateur, solde…). N'ajouter ici que les variantes réellement utilisées. */
@media (min-width: 640px) {
    .sm\:flex  { display: flex  !important; }
    .sm\:block { display: block !important; }
}
@media (min-width: 768px) {
    .md\:flex  { display: flex  !important; }
}


/* ============================================================================
   3. SCROLLBARS
   ============================================================================ */

::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; margin-block: 4px; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; transition: background 0.3s; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Réserve la place pour éviter les sauts de mise en page */
* { scrollbar-width: thin; scrollbar-color: #334155 transparent; }

/* Scrollbar invisible pour le conteneur de scènes */
#scenes-container::-webkit-scrollbar { width: 0; height: 0; }
#scenes-container { scrollbar-width: none; }

/* Utilitaire : masque la barre de défilement tout en gardant le scroll actif
   (ex. pop-up du générateur IA). */
.sans-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.sans-scrollbar::-webkit-scrollbar { width: 0; height: 0; }


/* ============================================================================
   4. SELECT PRO — flèche personnalisée
   ============================================================================ */

.select-pro {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.2em;
}


/* ============================================================================
   5. CARTES DE PARAMÈTRES
   Remplace : bg-slate-800 p-6 rounded-2xl border-2 border-<x>-500/50
              shadow-xl shadow-<x>-900/20
   ============================================================================ */

.card-param {
    background-color: #1e293b; /* slate-800 */
    padding: 1.5rem;           /* p-6 */
    border-radius: 1rem;       /* rounded-2xl */
    border: 2px solid color-mix(in srgb, var(--accent-fill) 50%, transparent);
    box-shadow: 0 20px 25px -5px color-mix(in srgb, var(--accent-soft) 20%, transparent),
                0 8px 10px -6px  color-mix(in srgb, var(--accent-soft) 20%, transparent);
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Variante padding réduit (cartes denses dans les modales) */
.card-param.is-compact { padding: 1rem; }

/* Titre de carte — adopte la couleur du thème */
.card-titre {
    font-size: 1.25rem;  /* text-xl */
    font-weight: 500;    /* gras léger */
    color: var(--accent);
    transition: color 0.3s;
}

/* En-tête carte (titre + switch alignés) */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem; /* mb-4 */
}

/* Texte/label dont la couleur suit le thème du conteneur
   (ex. titre de modale, label « Boost Audio » de la Voix IA). */
.txt-accent {
    color: var(--accent);
    transition: color 0.3s;
}


/* ============================================================================
   6. TYPOGRAPHIE — 5 rôles de texte (et JAMAIS de text-[9px] au hasard)
   Chaque texte de l'app doit être l'un de ces 5 rôles. C'est ce qui crée
   la cohérence : un "nom de réglage" a TOUJOURS la même tête, partout.
   ============================================================================ */

/* Titre de carte / modale */
.t-titre {
    font-size: var(--fs-titre);
    font-weight: 500;
    color: #fff;
    line-height: 1.2;
}

/* Titre d'un groupe de réglages (petit, MAJUSCULES, espacé) */
.t-section {
    font-size: var(--fs-section);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8; /* slate-400 — titre de groupe lisible */
}

/* Nom d'un réglage (le label devant un curseur, un select…) */
.t-label {
    font-size: var(--fs-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #cbd5e1; /* slate-300 — nom de réglage bien lisible (anti-fatigue) */
}

/* La valeur affichée (80, 65%, 1.08x…) */
.t-value {
    font-size: var(--fs-value);
    font-weight: 500;
    color: #fff;
    font-variant-numeric: tabular-nums; /* chiffres alignés = pro */
}

/* Petite aide / légende grise */
.t-hint {
    font-size: var(--fs-hint);
    font-weight: 400;
    color: #94a3b8; /* slate-400 — aide secondaire mais toujours lisible */
    line-height: 1.4;
}

/* Variantes DENSES de .t-label / .t-value (8px) — réservées aux grilles
   ultra-serrées des onglets d'animation du Master (Vitesse/Durée/Vol + valeur).
   Même rôle, taille réduite : on remplace les text-[8px] éparpillés par un
   nom unique sans changer le rendu. */
.t-label-xs {
    font-size: 0.5rem;          /* 8px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #cbd5e1;             /* slate-300 — 8px = besoin de + de contraste */
}
.t-value-xs {
    font-size: 0.5rem;          /* 8px */
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}


/* ============================================================================
   7. GROUPES & CHAMPS DE RÉGLAGE — le composant qui uniformise TOUT
   Hiérarchie : .card-param  >  .fieldset  >  .field
     .fieldset = un bloc thématique de réglages (fond, bord, padding réguliers)
     .field    = une ligne de réglage (label + sa valeur + le contrôle)
   NB : nommé .fieldset (et pas .group) pour ne PAS entrer en collision avec
   la classe utilitaire `group` de Tailwind (group-hover:).
   ============================================================================ */

/* Le sous-bloc de réglages — remplace les 6 recettes p-3/p-4/p-5 actuelles */
.fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--group-gap);
    padding: var(--group-padding);
    background-color: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* élévation douce : le groupe « flotte » */
}

/* Titre optionnel en tête de bloc (utilise .t-section) */
.fieldset > .t-section {
    margin-bottom: calc(var(--space-1) * -1); /* recolle au 1er champ */
}

/* Une ligne de réglage : label au-dessus, contrôle en dessous */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--field-gap);
}

/* La ligne label + valeur (alignés aux extrémités) */
.field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Variante : label et contrôle sur la MÊME ligne (switch, select court…) */
.field.is-inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/* Grille de 2 réglages côte à côte (ex. Zoom / Rotation) */
.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

/* Sélecteur de couleur standardisé (remplace les longues classes
   [&::-webkit-color-swatch…] répétées partout). */
.swatch {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    padding: 0;
    border: 0;
    outline: none;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
}
.swatch::-webkit-color-swatch-wrapper { padding: 0; }
.swatch::-webkit-color-swatch        { border: none; border-radius: 0.375rem; }
.swatch.is-lg { width: 2rem; height: 2rem; }


/* ============================================================================
   8. BOUTONS DE SECTION
   ============================================================================ */

/* Bouton doux thématisé — remplace :
   bg-<x>-900/30 hover:bg-<x>-600/50 border border-<x>-500/50
   rounded-xl text-<x>-400 hover:text-white font-bold ... */
.btn-param {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.75rem;
    font-weight: 500;
    color: var(--accent);
    background-color: color-mix(in srgb, var(--accent-soft) 30%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-fill) 50%, transparent);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    transition: background-color 0.25s, color 0.25s;
    cursor: pointer;
}
/* NB : tous les :hover de ce fichier sont sous @media (hover:hover) — au
   tactile, le hover « colle » après un tap (pas de survol au doigt). Le
   retour tactile est assuré par les règles :active de la section 17. */
@media (hover: hover) {
    .btn-param:hover {
        color: #fff;
        background-color: color-mix(in srgb, var(--accent-fill) 50%, transparent);
    }
}

/* Filtre segmenté à radios (ex. Médias : Tout / Vidéos / Images).
   Structure HTML cible (propre) :
     <label class="seg-item">
       <input type="radio" name="..." class="seg-input" checked>
       <span class="seg-btn">🔀 Tout</span>
     </label>
   Remplace le pavé répété 3× :
   px-6 py-2 rounded-lg text-sm font-bold text-slate-400 transition-all
   peer-checked:bg-purple-600 peer-checked:text-white peer-checked:shadow-lg
   hover:text-slate-200 flex items-center gap-2 */
.seg-item {
    position: relative;
    margin: 0;
    cursor: pointer;
}
.seg-input { position: absolute; opacity: 0; width: 0; height: 0; } /* sr-only */
.seg-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 1rem;   /* compact : moins haut que py-2 px-6, sans icône */
    border-radius: 0.5rem;    /* rounded-lg */
    font-size: 0.8125rem;     /* 13px — lisible mais sobre */
    font-weight: 700;
    color: #94a3b8;           /* slate-400 */
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}
@media (hover: hover) { .seg-btn:hover { color: #e2e8f0; } } /* slate-200 (état non sélectionné) */
/* État sélectionné — déclaré après :hover pour qu'il reste violet au survol */
.seg-input:checked + .seg-btn {
    background-color: #9333ea; /* purple-600 */
    color: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg */
}

/* Bouton plein de validation — remplace : bg-<x>-600 hover:bg-<x>-500 text-white */
.btn-valider {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.75rem;
    font-weight: 700;
    color: #fff;
    background-color: var(--accent-fill);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    transition: filter 0.2s;
    cursor: pointer;
}
@media (hover: hover) { .btn-valider:hover { filter: brightness(1.15); } }
/* État éphémère « enregistré » (feedback vert — ex. Automatisations) */
.btn-valider.is-saved { background-color: #10b981; } /* emerald-500 */

/* Variante DANGER — bouton « Supprimer » : MÊME gabarit que .btn-valider
   (hauteur, rayon, graisse) pour des rangées de boutons parfaitement alignées.
   Toujours placé À GAUCHE de l'action principale (Valider / Annuler) : la
   suppression est au même endroit dans toutes les fenêtres de tags. */
.btn-supprimer {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.75rem;
    font-weight: 700;
    color: #f87171;                              /* red-400 */
    background-color: rgba(127, 29, 29, 0.25);   /* red-900/25 */
    border: 1px solid rgba(239, 68, 68, 0.4);    /* red-500/40 */
    transition: background-color 0.2s, color 0.2s;
    cursor: pointer;
}
@media (hover: hover) {
    .btn-supprimer:hover { background-color: #dc2626; color: #fff; } /* red-600 */
}

/* Bouton « réinitialiser » discret — gris, SANS icône, uniforme partout.
   Remplace le pavé répété : w-full py-2 bg-slate-900 hover:bg-slate-700
   border border-slate-600 rounded-xl text-slate-400 hover:text-white
   text-[10px] uppercase font-bold transition */
.btn-reset {
    width: 100%;
    padding: 0.5rem;             /* py-2 */
    border-radius: 0.75rem;      /* rounded-xl */
    font-size: 0.625rem;         /* 10px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;              /* slate-400 */
    background-color: #0f172a;   /* slate-900 */
    border: 1px solid #475569;   /* slate-600 */
    transition: background-color 0.2s, color 0.2s;
    cursor: pointer;
}
@media (hover: hover) { .btn-reset:hover { background-color: #334155; color: #fff; } } /* slate-700 */


/* ============================================================================
   9. INTERRUPTEURS (toggle switch)
   Structure HTML cible (propre) :
     <label class="switch">
       <input type="checkbox" checked>
       <span class="switch-slider"></span>
     </label>
   Couleur ON = thème du conteneur parent (--accent-fill).
   ============================================================================ */

.switch {
    position: relative;
    display: inline-block;
    width: 2.75rem;   /* w-11 */
    height: 1.5rem;   /* h-6  */
    flex-shrink: 0;
    cursor: pointer;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* La piste */
.switch-slider {
    position: absolute;
    inset: 0;
    background-color: #475569; /* slate-600 (OFF) */
    border-radius: 9999px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
    transition: background-color 0.3s;
}

/* Le rond mobile */
.switch-slider::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 1.25rem;  /* w-5 */
    height: 1.25rem; /* h-5 */
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s;
}

/* État ON */
.switch input:checked + .switch-slider        { background-color: var(--accent-fill); }
.switch input:checked + .switch-slider::before { transform: translateX(20px); }

/* Variante "inversée" : coché = éteint (ex. bouton Muet de l'éditeur)
   Décoché (son activé)  → coloré + rond à DROITE (look ON)
   Coché   (son coupé)   → gris   + rond à GAUCHE (look OFF) */
.switch.is-inverted .switch-slider                        { background-color: var(--accent-fill); }
.switch.is-inverted .switch-slider::before                { transform: translateX(20px); }
.switch.is-inverted input:checked + .switch-slider        { background-color: #475569; }
.switch.is-inverted input:checked + .switch-slider::before{ transform: translateX(0); }


/* ============================================================================
   10. JAUGES (range) — accent automatique selon le thème
   Toute jauge placée dans un conteneur .theme-* prend la couleur d'accent
   sans aucune classe utilitaire.
   NB : on ne cible QUE les range. Les checkbox/color gardent leur classe
   Tailwind explicite (ex. cases cyan « Mots Actifs » dans une zone ambre).
   ============================================================================ */

[class*="theme-"] input[type="range"] {
    accent-color: var(--accent);
    cursor: pointer;
}

input[type="range"] { width: 100%; }

/* Échappatoire ponctuelle : forcer une couleur de jauge hors thème
   (ex. délai/volume « son » cyan au milieu d'une zone montage violette). */
.range-cyan   { accent-color: #22d3ee !important; }
.range-purple { accent-color: #c084fc !important; }
.range-amber  { accent-color: #fbbf24 !important; }


/* ============================================================================
   11. MOCKUP TÉLÉPHONE
   ============================================================================ */

.mockup-telephone {
    position: relative;
    background: #000;
    border: 10px solid #111111;       /* cadre noir mat fin */
    box-shadow:
        inset 0 0 4px rgba(0, 0, 0, 0.8),
        0 25px 50px -12px rgba(0, 0, 0, 0.7);
    transition: all 0.4s ease-in-out;
    overflow: hidden;
    margin: auto;
    flex-shrink: 0;
    display: flex;
}

/* Cadre métallique discret (brillance fine) */
.mockup-telephone::after {
    content: "";
    position: absolute;
    top: -8px; left: -8px; right: -8px; bottom: -8px;
    border-radius: inherit;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
    z-index: 10;
}

/* Bulle caméra (punch hole) */
.mockup-telephone::before {
    content: "";
    position: absolute;
    background: #080808;
    z-index: 999;
    transition: all 0.4s ease-in-out;
    pointer-events: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    box-shadow:
        inset 0 2px 2px rgba(0, 0, 0, 0.8),
        inset 0 -1.5px 2px rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.02);
}

/* Mode Portrait (9:16) */
.mockup-telephone.portrait {
    aspect-ratio: 9 / 16;
    height: 100%;
    max-height: 100%;
    width: auto;
    max-width: 100%;
    border-radius: 2.8rem;
}
.mockup-telephone.portrait::before {
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
}

/* Mode Paysage (16:9) */
.mockup-telephone.paysage {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    border-radius: 2.2rem;
}
.mockup-telephone.paysage::before {
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
}

/* Contenu interne plein cadre */
.mockup-telephone > div {
    width: 100%;
    height: 100%;
    flex: 1;
    border-radius: inherit;
    overflow: hidden;
}


/* ============================================================================
   12. POP-UPS GÉANTES
   ============================================================================ */

.popup-unifiee {
    width: 90vw !important;
    height: 85vh !important;
    max-width: none !important;
}

/* Zone gauche : aperçu centré et flexible */
.popup-preview-zone {
    flex: 1;
    min-width: 0; /* empêche l'aperçu de pousser la zone de droite */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: #0f172a;
}
.popup-preview-zone > div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Zone droite standard (Sous-titres, Éditeur, Master) */
.popup-settings-zone {
    width: 500px !important;
    flex-shrink: 0;
    background-color: #0f172a; /* slate-900 = canvas (les groupes slate-800 ressortent) */
    overflow-y: auto;
}

/* Zone droite spécifique Timeline (extra large) */
.popup-settings-timeline {
    width: 700px !important;
    flex-shrink: 0;
    background-color: #0f172a; /* slate-900 = canvas */
    overflow-y: auto;
}


/* ============================================================================
   13. MODALES — éléments communs (en-tête + bouton fermer)
   ----------------------------------------------------------------------------
   NB : l'OVERLAY et le CONTENEUR de modale gardent leurs utilitaires Tailwind
   dans le HTML car le JS y bascule `hidden` / `opacity-0` / `scale-95` pour
   les animations d'ouverture. On ne factorise QUE les parties 100 % statiques.
   ============================================================================ */

/* En-tête de modale : titre à gauche, bouton fermer à droite */
.modal-header {
    flex-shrink: 0;
    padding: 1rem;                        /* p-4 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #1e293b;     /* border-slate-800 */
    background-color: rgba(2, 6, 23, 0.5);/* bg-slate-950/50 */
}
.modal-header.is-lg { padding: 1.25rem; } /* p-5 */

/* ⬇️⬇️⬇️  LA CROIX DE FERMETURE DE TOUT LE SAAS  ⬇️⬇️⬇️
   Une seule source d'icône, partagée par les modales (.btn-fermer) ET le tiroir
   profil mobile (.tiroir-profil-fermer). Pour changer la croix PARTOUT, tu
   modifies UNIQUEMENT la ligne --croix-icone ci-dessous (puis tu bumps le ?v=
   de base.css dans les pages, cf. cache-busting). Rien d'autre à toucher. */
:root {
    --croix-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E");
}

/* Bouton « fermer » : croix de fermeture des modales / tiroirs / panneaux.
   Petit bouton rond ardoise avec le X dessiné en CSS (mask + --croix-icone).
   L'ancien emoji ❌ des <button class="btn-fermer"> est masqué (font-size:0),
   donc AUCUN HTML à toucher. */
.btn-fermer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    color: #94a3b8;            /* slate-400 → couleur du X */
    background: #1e293b;       /* slate-800 */
    border: 1px solid #334155; /* slate-700 */
    font-size: 0;              /* neutralise l'emoji ❌ présent dans le HTML */
    line-height: 0;
    cursor: pointer;
    transition: transform 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
}
.btn-fermer::before {
    content: "";
    width: 1.15rem;
    height: 1.15rem;
    background: currentColor;  /* le X hérite de `color` ci-dessus */
    -webkit-mask: var(--croix-icone) center / contain no-repeat;
            mask: var(--croix-icone) center / contain no-repeat;
}
@media (hover: hover) { .btn-fermer:hover { color: #fff; background: #334155; border-color: #475569; } }
.btn-fermer:active { transform: scale(0.92); }
.btn-fermer.is-lg          { width: 2.5rem; height: 2.5rem; }
.btn-fermer.is-lg::before  { width: 1.3rem; height: 1.3rem; }


/* ============================================================================
   14. PILULES SÉLECTIONNABLES (Pioche Aléatoire : transitions / caméra auto)
   ----------------------------------------------------------------------------
   État OFF = base ; état ON = .is-active. Le JS (montage-1-automatisations.js)
   ne bascule QUE la classe `is-active` (avant : 9 utilitaires Tailwind togglés).
   ============================================================================ */

.pilule {
    display: inline-flex;               /* centrage parfait du texte */
    align-items: center;
    justify-content: center;
    line-height: 1;                     /* supprime le décalage vertical */
    padding: 0.55rem 0.9rem;            /* espacement homogène autour du texte */
    border-radius: 0.5rem;              /* rounded-lg */
    border: 1px solid #475569;          /* slate-600 (OFF) */
    background-color: transparent;
    color: #94a3b8;                     /* slate-400 (OFF) */
    font-size: 11px;                    /* texte 11px */
    text-transform: uppercase;
    font-weight: 700;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    cursor: pointer;
}
/* survol état OFF : bordure + texte virent au violet */
@media (hover: hover) {
    .pilule:hover {
        border-color: rgba(168, 85, 247, 0.5); /* purple-500/50 */
        color: #c084fc;                        /* purple-400 */
    }
}
/* état ON : remplissage PLEIN (2026-07-07) — même langage visuel que les
   boutons/switchs actifs du SaaS, l'état coché se voit au premier coup d'œil */
.pilule.is-active {
    background-color: #9333ea;                /* purple-600, opaque */
    border-color: #a855f7;                    /* purple-500 */
    color: #fff;
}
/* survol état ON : fond plus lumineux */
@media (hover: hover) {
    .pilule.is-active:hover {
        background-color: #a855f7;            /* purple-500 */
    }
}


/* ============================================================================
   15. COLONNE DE PARAMÈTRES — HAUTEUR ADAPTATIVE (anti-scroll sur petit écran)
   ----------------------------------------------------------------------------
   Problème : sur un grand écran fixe, les 3 cartes de réglages tiennent dans la
   hauteur de la colonne. Sur un écran plus court (laptop/ThinkPad), elles
   dépassent → la colonne devient scrollable (lg:overflow-y-auto).
   Solution : sur grand écran (lg ≥ 1024px), on rend les ESPACEMENTS de cette
   colonne proportionnels à la hauteur de l'écran via clamp(min, …vh, max).
     • écran HAUT  → on atteint le `max` = exactement les valeurs d'origine
                     (le PC fixe ne change donc PAS d'un pixel).
     • écran COURT → les paddings/marges se compactent automatiquement pour que
                     l'INTÉGRALITÉ des paramètres reste visible sans scroll.
   Tout est scopé à `.colonne-parametres` : les cartes des modales (.card-param
   réutilisé ailleurs) ne sont PAS affectées.

   CALIBRAGE : les coefficients `vh` sont calés pour que le `max` (= valeurs
   d'origine) soit atteint dès ~950px de hauteur de fenêtre — donc un PC fixe
   reste identique — et pour que tout tienne sur un ThinkPad 1366×768 (~600px
   de fenêtre utile). `lg:overflow-y-auto` reste le filet de sécurité ultime
   pour les écrans encore plus courts (rien ne déborde sans scroll possible).
   ============================================================================ */

@media (min-width: 1024px) {

    /* Écart entre les cartes (compacte le `space-y-6` d'origine = 1.5rem). */
    .colonne-parametres.space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: clamp(0.6rem, 2.5vh, 1.5rem);
    }

    /* Padding intérieur des cartes (origine = 1.5rem). */
    .colonne-parametres .card-param {
        padding: clamp(0.85rem, 2.5vh, 1.5rem);
    }

    /* Marge sous l'en-tête de carte (titre + switch ; origine = 1rem). */
    .colonne-parametres .card-header {
        margin-bottom: clamp(0.5rem, 1.7vh, 1rem);
    }

    /* Espaceurs internes (sélecteurs de format/voix ; mb-4 = 1rem). */
    .colonne-parametres .mb-4 {
        margin-bottom: clamp(0.5rem, 1.7vh, 1rem);
    }

    /* Écart entre les 2 boutons de la carte Montage (mt-3 = 0.75rem). */
    .colonne-parametres .mt-3 {
        margin-top: clamp(0.4rem, 1.25vh, 0.75rem);
    }

    /* Hauteur des boutons de section (padding vertical ; origine = 0.75rem). */
    .colonne-parametres .btn-param {
        padding-top:    clamp(0.5rem, 1.25vh, 0.75rem);
        padding-bottom: clamp(0.5rem, 1.25vh, 0.75rem);
    }
}


/* ============================================================================
   16. SÉLECTEUR DE LANGUE (drapeau du header)               → .lang-switcher
   ----------------------------------------------------------------------------
   Le HTML pose juste <div data-lang-switcher></div> ; tout l'intérieur
   (bouton drapeau + menu déroulant) est généré par /js/i18n.js.
   ============================================================================ */
.lang-switcher {
    position: relative;
    display: inline-flex;
}

/* Bouton : un ROND avec le drapeau de la langue active (même gabarit que l'icône profil). */
.lang-btn {
    width: 2rem;                        /* = w-8 (icône profil) */
    height: 2rem;                       /* = h-8 */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1e293b;                 /* slate-800 */
    border: 1px solid #475569;          /* slate-600 (comme l'avatar) */
    border-radius: 9999px;             /* cercle parfait */
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s, transform .2s;
}
@media (hover: hover) {
    .lang-btn:hover {
        border-color: #22d3ee;         /* cyan-400 */
        transform: scale(1.08);
    }
}

/* Drapeau DANS le bouton rond : il remplit tout le cercle */
.lang-btn .lang-flag {
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
}

/* Le drapeau (générique, utilisé aussi dans le menu) */
.lang-flag {
    width: 22px;
    height: 16px;
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
    line-height: 0;
}
.lang-flag svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Menu déroulant des langues */
.lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    min-width: 160px;
    background: #1e293b;                 /* slate-800 */
    border: 1px solid #334155;          /* slate-700 */
    border-radius: 0.75rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    overflow: hidden;
    z-index: 100;
}
.lang-menu.hidden { display: none; }

.lang-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: transparent;
    border: none;
    color: #cbd5e1;                     /* slate-300 */
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .15s, color .15s;
}
@media (hover: hover) {
    .lang-option:hover {
        background: #334155;            /* slate-700 */
        color: #fff;
    }
}
.lang-option.is-active {
    color: #22d3ee;                    /* cyan-400 : langue actuellement choisie */
}
.lang-option.is-active .lang-nom::after {
    content: " ✓";
}


/* ============================================================================
   MASQUE BAS DU CHAMP « SCRIPT » (studio) — .script-fade
   ----------------------------------------------------------------------------
   La barre d'outils (Animation / Sons / Emotes) flotte en bas du champ de
   saisie. Sans fond, le texte qui défilait passait DERRIÈRE elle (illisible).
   Cette bande, TOUJOURS présente et de la couleur RÉELLE du champ, masque
   proprement le texte sous la barre : il « disparaît » en douceur en bas, et
   le haut du texte sort naturellement par le scroll.

   Couleur = empilement réel des fonds derrière le champ :
     texte-input slate-800/50  ›  scene-block slate-900/80  ›  panneau slate-800
     ≈ rgb(24, 34, 52).  Dégradé transparent en haut = fondu doux.

   Placée APRÈS .texte-input dans le DOM → au-dessus du texte ; les boutons,
   déclarés APRÈS elle, restent bien au-dessus (cliquables et lisibles).
   ============================================================================ */
.script-fade {
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;                          /* reste À L'INTÉRIEUR de la bordure */
    height: 2.75rem;                      /* < padding-bottom du champ (3rem) :
                                             couvre la barre, jamais le texte tapé */
    border-bottom-left-radius: 0.7rem;    /* épouse le rounded-xl du champ */
    border-bottom-right-radius: 0.7rem;
    pointer-events: none;                 /* ne bloque jamais le clic ni la frappe */
    background: linear-gradient(to top,
        rgb(24, 34, 52) 0%,
        rgb(24, 34, 52) 72%,
        rgba(24, 34, 52, 0) 100%);
}

/* À la souris, la barre d'outils (Animation / Sons / Emotes + 📋 copier) descend de
   3px : elle respirait trop du bas du champ. Uniquement à partir de 1024px, pour ne
   PAS bouger la version tactile — la bulle 📋 du mobile se cale sur le bottom-3 de la
   barre (cf. mobile.css). Surcharge le .bottom-3 de Tailwind (base.css est chargé
   après tailwind.css, à spécificité égale c'est le dernier qui gagne). */
@media (min-width: 1024px) {
    .barre-outils-script { bottom: 0.5625rem; }   /* 9px au lieu de 12 */
}



/* ============================================================================
   17. RETOUR TACTILE — appareils SANS souris (@media (hover: none))
   ----------------------------------------------------------------------------
   Au tactile, les :hover de ce fichier et les hover: de Tailwind sont
   désactivés (voir @media (hover:hover) + future.hoverOnlyWhenSupported dans
   tailwind.config.js) : sinon l'état de survol reste « collé » après un tap.
   En remplacement, le doigt reçoit un retour PENDANT la pression (:active) :
   même teinte que le survol souris, donc identité visuelle cohérente.
   ============================================================================ */
@media (hover: none) {
    .btn-param:active {
        color: #fff;
        background-color: color-mix(in srgb, var(--accent-fill) 50%, transparent);
        transition-duration: 0.05s;        /* réaction immédiate sous le doigt */
    }
    .btn-valider:active { filter: brightness(1.15); }
    .btn-supprimer:active { background-color: #dc2626; color: #fff; }
    .btn-reset:active   { background-color: #334155; color: #fff; }
    .pilule:active      { border-color: rgba(168, 85, 247, 0.5); color: #c084fc; }
    .pilule.is-active:active { background-color: #a855f7; color: #fff; }   /* purple-500, opaque comme l'état ON */
    .lang-option:active { background: #334155; color: #fff; }
    .btn-fermer:active  { color: #fff; background: #334155; border-color: #475569; }

    /* Supprime le voile gris/bleu que le WebView Android pose sur chaque tap :
       notre :active fait le travail, en plus joli et aux couleurs du thème. */
    button, a, label, [onclick] { -webkit-tap-highlight-color: transparent; }
}


/* ============================================================================
   18. ANIMATION D'OUVERTURE DES MENUS (fondu + léger zoom)  → façon SaaS pro
   ----------------------------------------------------------------------------
   Les petits menus déroulants (profil, langues, tiroir « Glisser pour inverser »,
   Générateur) apparaissaient « d'un coup ». On leur ajoute une micro-animation
   à l'ouverture, comme Notion / Linear / Stripe.
   ASTUCE CLÉ : on utilise une *animation* CSS (et non une *transition*). Une
   animation se déclenche quand l'élément passe de display:none à visible — donc
   AUCUNE modif JS : il suffit que l'élément perde sa classe .hidden.
   ============================================================================ */
@keyframes menuPop {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Popups présents sur TOUTES les tailles d'écran : sélecteur de langue +
   panneaux flottants du studio. transform-origin en haut-droite : ils s'ouvrent
   sous leur bouton, ancré à droite → le zoom part du bon coin. */
.lang-menu:not(.hidden),
#panneau-generateur:not(.hidden) {
    animation: menuPop 0.15s ease-out;
    transform-origin: top right;
}

/* Menu profil : UNIQUEMENT en desktop (≥ 1024px). En mobile c'est un TIROIR qui
   glisse déjà via translateX (voir mobile.css) → surtout pas d'animation
   concurrente qui écraserait la glissade. */
@media (min-width: 1024px) {
    #user-menu:not(.hidden) {
        animation: menuPop 0.15s ease-out;
        transform-origin: top right;
    }
}

/* Accessibilité (standard pro) : on coupe l'animation si l'utilisateur a demandé
   à réduire les mouvements au niveau de son système. */
@media (prefers-reduced-motion: reduce) {
    .lang-menu:not(.hidden),
    #panneau-generateur:not(.hidden),
    #user-menu:not(.hidden) {
        animation: none;
    }
}

/* =====================================================================
   BOUTON « APERÇU » (.btn-apercu-eye) — aperçu complet gratuit (sans crédit)
   Bouton NEUTRE et sobre (ardoise) avec une icône œil : il accompagne le CTA
   vert « Assembler » (l'assemblage, lui, coûte 1 crédit) sans lui voler la
   vedette. Placé À CÔTÉ du bouton d'assemblage.
   ===================================================================== */
.btn-apercu-eye {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.1rem;
    border-radius: 0.75rem;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    color: #cbd5e1;                          /* slate-300 */
    background: #1e293b;                      /* slate-800 */
    border: 1px solid #334155;               /* slate-700 */
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.btn-apercu-eye svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; opacity: .95; }
@media (hover: hover) {
    .btn-apercu-eye:hover {
        background: #263447;
        border-color: #475569;               /* slate-600 */
        color: #ffffff;
    }
}
.btn-apercu-eye:active { transform: scale(0.98); }

/* ---------------------------------------------------------------------
   CORBEILLE « TOUT SUPPRIMER » (.btn-vider-scenes) — 3ᵉ bouton de la barre
   d'action, collé à l'aperçu. Même gabarit que .btn-apercu-eye (hauteur,
   rayon, fond ardoise) pour que la rangée reste alignée au pixel ; le rouge
   de .btn-supprimer ne sort qu'AU SURVOL. Au repos c'est un bouton neutre :
   dans une barre où le geste attendu est le CTA vert, une corbeille rouge en
   permanence attirerait l'œil sur l'action la plus destructrice de l'écran.
   --------------------------------------------------------------------- */
.btn-vider-scenes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    color: #94a3b8;                          /* slate-400 */
    background: #1e293b;                     /* slate-800 */
    border: 1px solid #334155;               /* slate-700 */
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.btn-vider-scenes svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
@media (hover: hover) {
    .btn-vider-scenes:hover {
        color: #f87171;                          /* red-400 */
        background: rgba(127, 29, 29, 0.25);     /* red-900/25 */
        border-color: rgba(239, 68, 68, 0.4);    /* red-500/40 */
    }
}
/* Tactile : pas de survol sur un téléphone, donc le rouge arrive à l'appui. */
.btn-vider-scenes:active { transform: scale(0.98); color: #f87171; }

/* ---------------------------------------------------------------------
   LIGNE D'UN PERSONNAGE DU GÉNÉRATEUR — la corbeille et l'œil.
   Deux CARRÉS à la hauteur exacte du champ de nom voisin — 2,375 rem, soit
   py-2 (1 rem) + la ligne d'un text-sm (1,25 rem) + les deux bordures —
   pour que la ligne se termine par un bloc net et non par deux boutons de
   tailles différentes.
   Les couleurs vivent ICI et non plus en style inline : un inline aurait
   toujours battu le :hover, et les deux boutons n'auraient jamais réagi
   au survol comme le reste du studio.
   --------------------------------------------------------------------- */
.btn-perso-carre {
    width: 2.375rem;
    height: 2.375rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 0.6rem;
    border: 1px solid #334155;               /* slate-700 */
    background: #0f172a;                     /* slate-900 */
    color: #94a3b8;                          /* slate-400 */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.btn-perso-carre svg { width: 1.05rem; height: 1.05rem; display: block; }
.btn-perso-carre:disabled { color: #475569; cursor: not-allowed; }

/* 🗑 Corbeille : le rouge de toutes les suppressions du studio (cf. .btn-supprimer). */
@media (hover: hover) {
    .btn-perso-carre.est-corbeille:hover:not(:disabled) {
        color: #f87171;                          /* red-400 */
        background: rgba(127, 29, 29, 0.25);     /* red-900/25 */
        border-color: rgba(239, 68, 68, 0.4);    /* red-500/40 */
    }
}
.btn-perso-carre.est-corbeille:active:not(:disabled) { transform: scale(0.98); color: #f87171; }

/* ⚡ État « à styliser » : MÊME carré que l'œil qui le remplacera. Le bouton portait
   avant un libellé large (« 20 ⚡ ») : la ligne se réorganisait au moment où le
   personnage était dessiné, et les trois lignes n'étaient plus alignées entre elles
   selon que le portrait existait ou non. */
.btn-perso-carre.est-cout {
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    color: #22d3ee;                          /* cyan-400 */
    border-color: #22d3ee;
}
.btn-perso-carre.est-cout:disabled { color: #475569; border-color: #334155; }
@media (hover: hover) {
    .btn-perso-carre.est-cout:hover:not(:disabled) { background: #0e2a33; border-color: #67e8f9; color: #a5f3fc; }
}
.btn-perso-carre.est-cout:active:not(:disabled) { transform: scale(0.98); }

/* 👁 Œil : exactement le survol du bouton « Aperçu » des scènes (.btn-apercu-eye) —
   l'ardoise s'éclaircit et le trait passe au blanc. */
@media (hover: hover) {
    .btn-perso-carre.est-oeil:hover {
        background: #263447;
        border-color: #475569;                   /* slate-600 */
        color: #ffffff;
    }
}
.btn-perso-carre.est-oeil:active { transform: scale(0.98); color: #ffffff; }

/* =====================================================================
   LECTEUR COMPLET (modal d'aperçu du rendu) — TAILLE & FORMAT DE L'APERÇU
   La zone devient un « size container » : le mockup se dimensionne avec des
   unités cqw/cqh via min(), donc le ratio 9:16 / 16:9 est TOUJOURS exact
   (les règles génériques height:100% + max-width:100% pouvaient écraser le
   ratio quand la zone était plus large/étroite que le format — l'aperçu ne
   montrait alors plus le même cadrage que le rendu). Le 3ᵉ terme du min()
   plafonne la taille sur grand écran : aperçu élégant, pas envahissant.
   ===================================================================== */
#lecteur-complet-zone { container-type: size; }
#lecteur-complet-zone .mockup-telephone.portrait {
    height: min(100cqh, calc(100cqw * 16 / 9), 42rem);
    width: auto;
}
#lecteur-complet-zone .mockup-telephone.paysage {
    width: min(100cqw, calc(100cqh * 16 / 9), 60rem);
    height: auto;
}


/* =====================================================================
   VUE D'ENSEMBLE (mode compact / storyboard)
   ---------------------------------------------------------------------
   Piloté par la classe .mode-compact posée sur #scenes-container
   (basculerVueCompacte, gestionnaire-1-scenes.js §16). En mode compact,
   chaque .scene-block n'affiche plus que sa carte-résumé .scene-resume ;
   tout le détail (média, script, actions, transition) est masqué.
   S'applique à toutes les tailles d'écran (PC + mobile).
   ===================================================================== */

/* La carte-résumé est masquée en mode ÉDITION (défaut). */
.scene-resume { display: none; }

/* — Bascule : en mode compact, on masque le détail et on montre le résumé —
   … SAUF pour la scène « dépliée » (.scene-depliee) : le dézoom devient un mode
   à part où l'on ouvre UNE scène en grand tout en laissant les autres en petit
   (accordéon, une seule ouverte à la fois — cf. ouvrirSceneDepuisResume).
   La scène dépliée s'affiche EXACTEMENT comme une scène normale : sa carte-résumé
   est masquée et tout son contenu d'édition (n°, corbeille, média, script…) revient. */
#scenes-container.mode-compact .scene-wrapper:not(.scene-depliee) .scene-block > *:not(.scene-resume) { display: none; }
#scenes-container.mode-compact .scene-wrapper:not(.scene-depliee) > *:not(.scene-block) { display: none; }  /* sélecteur de transition sous la scène */
#scenes-container.mode-compact .scene-wrapper:not(.scene-depliee) .scene-resume { display: flex; }   /* résumé visible seulement quand REPLIÉE */

/* Espacements resserrés : plusieurs scènes visibles d'un coup (dézoom).
   La scène dépliée retrouve son padding d'édition normal (non ciblée ci-dessous). */
#scenes-container.mode-compact .scene-wrapper { margin-bottom: 0.6rem; }
#scenes-container.mode-compact .scene-wrapper:not(.scene-depliee) .scene-block { padding: 0; }
#scenes-container.mode-compact .scene-wrapper.scene-depliee { margin-bottom: 1.1rem; }

/* Petite flèche « réduire » : cachée en édition normale, visible UNIQUEMENT sur
   la scène ouverte en mode dézoom, juste à GAUCHE de la corbeille (top-4 right-4).
   Indique qu'on peut refermer la scène. */
.btn-reduire-scene { display: none; }
#scenes-container.mode-compact .scene-wrapper.scene-depliee .btn-reduire-scene {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 1rem;
    right: 2.75rem;                          /* corbeille à 1rem → flèche juste à sa gauche */
    z-index: 20;
    color: #64748b;                          /* slate-500, comme la corbeille au repos */
    transition: color .2s ease, transform .15s ease;
}
#scenes-container.mode-compact .scene-wrapper.scene-depliee .btn-reduire-scene svg { width: 1.25rem; height: 1.25rem; }
@media (hover: hover) {
    #scenes-container.mode-compact .scene-wrapper.scene-depliee .btn-reduire-scene:hover { color: #22d3ee; }  /* cyan léger, cohérent SaaS */
}
#scenes-container.mode-compact .scene-wrapper.scene-depliee .btn-reduire-scene:active { transform: scale(0.9); color: #22d3ee; }

/* — La carte-résumé (rangée horizontale, cliquable) — */
.scene-resume {
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 0.7rem;
    border-radius: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease;
    /* L'appui long sur la poignée ⠿ (armement du glisser, ~0,5 s sans preventDefault
       pour laisser scroller) déclenchait la SÉLECTION DE TEXTE native d'Android sur
       la carte. Une carte-résumé n'a rien à copier → sélection interdite partout. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
@media (hover: hover) {
    /* Survol : toute la carte prend un léger voile blanc transparent. La flèche
       et la poignée restent NEUTRES (plus de cyan) → survol uniforme, comme le
       reste de la scène. */
    .scene-resume:hover { background: rgba(148, 163, 184, 0.07); }
}
.scene-resume:active { background: rgba(148, 163, 184, 0.12); }

/* Poignée de glisser-déposer (réordonner les scènes dans la vue d'ensemble). */
.resume-grip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    align-self: stretch;
    color: #475569;                          /* slate-600 */
    cursor: grab;
    /* pan-y : sur mobile, un simple contact + glissement DÉFILE la page. Le glisser-
       réordonner ne s'active qu'après un APPUI LONG (~0,5 s, cf. gestionnaire-1 §16),
       qui bloque alors le scroll le temps du déplacement. */
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease;
}
.resume-grip:active { cursor: grabbing; }
.resume-grip svg { width: 1.1rem; height: 1.1rem; }
/* Poignée neutre au survol (plus de cyan) : c'est le voile blanc de toute la
   carte .scene-resume:hover qui sert de retour visuel. */

.resume-num {
    flex: 0 0 auto;
    width: 1.7rem;                           /* largeur FIXE (pas min-width) : un n° à 2 chiffres ne décale plus la ligne → pastilles alignées verticalement même au-delà de 10 scènes */
    text-align: center;
    font-weight: 900;
    font-size: 0.9rem;
    color: #64748b;                          /* slate-500 */
    font-variant-numeric: tabular-nums;
}

.resume-miniature {
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.6rem;
    overflow: hidden;
    background: #1e293b;                      /* slate-800 */
    border: 1px solid #334155;               /* slate-700 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.resume-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.resume-miniature-vide { color: #475569; }
.resume-miniature-vide svg { width: 1.5rem; height: 1.5rem; }

.resume-corps {
    flex: 1 1 auto;
    min-width: 0;                            /* autorise la troncature du script */
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.resume-script {
    font-size: 0.8rem;
    line-height: 1.25;
    color: #cbd5e1;                          /* slate-300 */
    display: -webkit-box;
    -webkit-line-clamp: 2;                   /* 2 lignes max, le reste tronqué */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.resume-script-vide { color: #64748b; font-style: italic; }

/* Storyboard : 5 colonnes de largeur FIXE et identique (Animation, Son, Emote,
   Voix, Transition, dans cet ordre). Un type absent = cellule vide → les pastilles
   présentes restent alignées verticalement d'une scène à l'autre. Rempli par
   majResumeScene (gestionnaire-1-scenes.js §16). minmax(0,…) laisse les 5 colonnes
   rétrécir ENSEMBLE sur mobile étroit sans casser l'alignement. */
.resume-badges {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 2.75rem));
    justify-content: start;
    align-items: center;
    gap: 0.3rem;
}
.resume-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;                 /* centré dans sa colonne fixe */
    width: 100%;                             /* remplit toute la cellule de grille */
    gap: 0.15rem;
    padding: 0.14rem 0.25rem;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    overflow: hidden;                        /* un compteur à 2 chiffres ne déborde jamais sur la colonne voisine */
    background: #0f172a;                      /* slate-900 */
    border: 1px solid #1e293b;
}
.resume-badge svg { width: 0.85rem; height: 0.85rem; flex-shrink: 0; }
.resume-badge-n { font-variant-numeric: tabular-nums; }
/* « Trou » : cellule réservée d'un type absent (occupe sa colonne, invisible). */
.resume-badge-vide { display: block; width: 100%; }
/* Couleurs par type (alignées sur les boutons d'action de la scène). */
.rb-fx   { color: #c084fc; border-color: rgba(192, 132, 252, 0.35); } /* animations — purple */
.rb-sfx  { color: #22d3ee; border-color: rgba(34, 211, 238, 0.35); }  /* sons — cyan */
.rb-em   { color: #fbbf24; border-color: rgba(251, 191, 36, 0.35); }  /* emotes — amber */
.rb-voix { color: #22d3ee; border-color: rgba(34, 211, 238, 0.35); }  /* voix (micro) — cyan (demande Alexy 2026-07-15) */
.rb-tr   { color: #94a3b8; border-color: rgba(148, 163, 184, 0.35); } /* transition — slate */

.resume-chevron {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    color: #475569;                          /* slate-600 */
    transition: transform .2s ease, color .2s ease;
}

/* Bref surlignage de la scène quand on y revient depuis la vue d'ensemble. */
.scene-surlignee .scene-block { animation: pulseScene 1.3s ease; }
@keyframes pulseScene {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
    25%      { box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.55); }
}

/* Bouton « vue d'ensemble » (dézoom) : PAS d'état actif (il ne « reste » jamais
   allumé). Comme partout dans le SaaS, le seul retour est un léger éclairage
   CYAN au survol / au clic (hover:border-cyan-500 / hover:text-cyan-400 dans
   index.html). La classe .is-active reste posée par le JS mais n'a plus d'effet
   de style ici — volontairement neutralisée. */

/* Scène en cours de déplacement : l'emplacement d'origine devient un « trou »
   en pointillés (on voit d'où elle part), et le fantôme suit le doigt avec une
   bordure BLANCHE fine + une ombre marquée (on voit bien qu'on la tient). */
#scenes-container.mode-compact .scene-wrapper.en-drag .scene-resume {
    opacity: 0.35;
    outline: 2px dashed #475569;             /* slate-600 : silhouette du trou */
    outline-offset: -2px;
    border-radius: inherit;
}
.scene-fantome {
    display: flex;                           /* le clone est hors de .mode-compact → forcer l'affichage */
    align-items: center;
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    margin: 0;
    background: #0f172a;                      /* slate-900 : carte soulevée */
    border: 1px solid #ffffff;               /* bordure blanche FINE = « attrapée » */
    border-radius: 0.9rem;
    box-shadow: 0 22px 48px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.25);
    transform: scale(1.04) rotate(-1deg);    /* légèrement soulevée + inclinée */
    opacity: 0.98;
}


/* =====================================================================
   ↻ L'ANCIENNE PASTILLE D'APERÇU (.btn-regen-apercu) A ÉTÉ RETIRÉE
   ---------------------------------------------------------------------
   Le bouton « image IA » de la scène ne vit plus dans le coin de l'aperçu
   mais dans la barre d'actions du média, avec importer / chercher /
   réglages (cf. .btn-image-ia dans index.html et majBoutonImageIA dans
   gestionnaire-3-ia.js). Il n'a donc plus de style à lui : il porte les
   mêmes classes Tailwind que ses trois voisines.

   Pourquoi il a bougé : dans l'aperçu, il ne savait que REFAIRE une image
   IA. Il sait maintenant aussi la CRÉER, donc il a un sens sur toutes les
   scènes — y compris celles à média importé, ce qui était l'objection qui
   l'avait renvoyé dans l'aperçu la première fois.
   ===================================================================== */


/* =====================================================================
   👁️ CHAMP MOT DE PASSE — LE BOUTON « AFFICHER »
   ---------------------------------------------------------------------
   Posé automatiquement par login.js sur chaque input[type=password] de la
   page : le HTML n'a rien à déclarer, et un futur champ en hérite tout
   seul. Le wrapper .champ-mdp est créé par le JS autour du champ.

   Icône dessinée en CSS (mask + --oeil-icone / --oeil-barre-icone), sur le
   même modèle que --croix-icone : une seule source par icône, et le bouton
   hérite de `color` pour l'état survolé. Pour changer l'œil PARTOUT, tu ne
   modifies que les deux lignes ci-dessous (puis tu bumps le ?v= de
   base.css dans les pages, cf. cache-busting).
   ===================================================================== */
:root {
    --oeil-icone:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.04 12.32a1.1 1.1 0 0 1 0-.64C3.42 7.5 7.36 4.5 12 4.5s8.57 3 9.96 7.18a1.1 1.1 0 0 1 0 .64C20.58 16.5 16.64 19.5 12 19.5s-8.57-3-9.96-7.18Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    --oeil-barre-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.98 8.22A10.5 10.5 0 0 0 2.04 11.68a1.1 1.1 0 0 0 0 .64C3.42 16.5 7.36 19.5 12 19.5c1.77 0 3.44-.44 4.9-1.21M6.23 6.23A10.45 10.45 0 0 1 12 4.5c4.64 0 8.57 3 9.96 7.18a1.1 1.1 0 0 1 0 .64 10.6 10.6 0 0 1-4.19 5.45M6.23 6.23 3 3m3.23 3.23 3.65 3.65m7.89 7.89L21 21m-3.23-3.23-3.65-3.65m0 0a3 3 0 1 1-4.24-4.24m4.24 4.24-4.24-4.24'/%3E%3C/svg%3E");
}

/* Le champ et son bouton partagent le même conteneur relatif. */
.champ-mdp { position: relative; }

/* Place pour le bouton : le texte du mot de passe ne passe jamais dessous. */
.champ-mdp > input { padding-right: 3.25rem; }

.champ-mdp > .oeil-mdp {
    position: absolute;
    top: 0;
    right: 0.5rem;
    height: 100%;              /* toute la hauteur du champ = grosse cible tactile */
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    color: #64748b;            /* slate-500, comme les libellés */
    cursor: pointer;
    transition: color 0.15s;
}
.champ-mdp > .oeil-mdp:hover,
.champ-mdp > .oeil-mdp:focus-visible { color: #22d3ee; }  /* cyan-400 de la marque */

.champ-mdp > .oeil-mdp::before {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background: currentColor;
    -webkit-mask: var(--oeil-icone) center / contain no-repeat;
            mask: var(--oeil-icone) center / contain no-repeat;
}
/* Mot de passe visible → l'œil est barré (l'icône dit ce qui se passera au clic
   suivant : re-masquer). */
.champ-mdp > .oeil-mdp[aria-pressed="true"]::before {
    -webkit-mask-image: var(--oeil-barre-icone);
            mask-image: var(--oeil-barre-icone);
}

/* ============================================================================
   18. WINDOW CONTROLS OVERLAY (PWA)
   Intégration des boutons système (fermer, agrandir) dans le header
   ============================================================================ */
@supports (padding-top: env(titlebar-area-y)) {
    #app-header header {
        -webkit-app-region: drag;
        app-region: drag;
        padding-left: env(titlebar-area-x, 0px);
        padding-right: calc(100vw - env(titlebar-area-width, 100vw) - env(titlebar-area-x, 0px));
    }
    
    /* Les éléments interactifs doivent être no-drag pour être cliquables */
    #app-header header a, 
    #app-header header button, 
    #app-header header [data-lang-switcher] {
        -webkit-app-region: no-drag;
        app-region: no-drag;
    }
}


/* ============================================================================
   19. CLIPPING — la jauge à deux pointeurs et la carte de la source
   ----------------------------------------------------------------------------
   Deux composants qui n'existaient nulle part ailleurs, écrits ici et pas en
   classes utilitaires parce qu'ils demandent des pseudo-éléments (::-*-thumb)
   que Tailwind ne sait pas produire.
   ============================================================================ */

/* ── LA JAUGE À DEUX POINTEURS ───────────────────────────────────────────────
   Deux <input type="range"> SUPERPOSÉS, pas un composant maison : on garde
   ainsi le clavier (flèches, Début/Fin), le tactile, et la lecture d'écran
   sans écrire une ligne de gestion d'événement.
   ⚠️ La ruse qui fait tout marcher : les inputs sont transparents et ne
   reçoivent AUCUN clic (pointer-events: none) — seuls leurs POUCES en
   reçoivent. Sans ça, celui du dessus intercepterait tout et le pointeur du
   dessous serait impossible à attraper. */
.jauge-duo {
    position: relative;
    height: 2rem;
    display: flex;
    align-items: center;
}

.jauge-duo-piste,
.jauge-duo-plage {
    position: absolute;
    height: 6px;
    border-radius: 999px;
    pointer-events: none;
}
.jauge-duo-piste { left: 0; right: 0; background: #1e293b; }   /* slate-800 */

/* La portion RETENUE, dans le dégradé de la marque. C'est elle qui fait
   comprendre la fourchette d'un coup d'œil, sans lire les chiffres. */
.jauge-duo-plage {
    background: linear-gradient(90deg, #06b6d4, #10b981);
    transition: left 0.08s linear, right 0.08s linear;
}

.jauge-duo input[type="range"] {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2rem;
    margin: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
.jauge-duo input[type="range"]:focus { outline: none; }

/* Pistes natives effacées : la piste visible est le <div> au-dessus. */
.jauge-duo input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
    border: none;
}
.jauge-duo input[type="range"]::-moz-range-track {
    height: 6px;
    background: transparent;
    border: none;
}

/* Le pouce. `margin-top` = (hauteur de piste − hauteur du pouce) / 2, sinon
   WebKit le pose SUR la piste au lieu de le centrer dessus. */
.jauge-duo input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 22px;
    height: 22px;
    margin-top: -8px;
    border-radius: 999px;
    background: #ffffff;
    border: 3px solid #06b6d4;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    cursor: grab;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.jauge-duo input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #ffffff;
    border: 3px solid #06b6d4;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    cursor: grab;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.jauge-duo input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); cursor: grabbing; }
.jauge-duo input[type="range"]:active::-moz-range-thumb     { transform: scale(1.15); cursor: grabbing; }

/* Le focus clavier doit se VOIR : c'est le seul repère de qui, des deux
   pointeurs, va bouger quand on appuie sur une flèche. */
.jauge-duo input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 5px rgba(34, 211, 238, 0.35);
}
.jauge-duo input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 5px rgba(34, 211, 238, 0.35);
}

/* 📱 Au doigt, un pouce de 22 px se rate. La cible passe à 28 px sur les
   appareils sans souris — c'est en dessous des 44 px recommandés, mais un
   pointeur de jauge s'attrape aussi en glissant, pas seulement en visant. */
@media (hover: none) {
    .jauge-duo input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -11px; }
    .jauge-duo input[type="range"]::-moz-range-thumb     { width: 28px; height: 28px; }
}

/* ── LA CARTE DE LA SOURCE ───────────────────────────────────────────────────
   Une réglette qui représente la vidéo entière, avec les extraits retenus
   posés à leur vraie place. Elle répond sans un mot à « est-ce qu'il a lu
   toute ma vidéo ou seulement le début ? ». */
.carte-source {
    position: relative;
    height: 2.5rem;
    border-radius: 0.6rem;
    background: #020617;                    /* slate-950 */
    border: 1px solid #1e293b;
    overflow: hidden;
}

.carte-source-segment {
    position: absolute;
    top: 5px;
    bottom: 5px;
    min-width: 4px;                          /* un extrait court reste cliquable */
    border-radius: 4px;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 800;
    color: rgba(2, 6, 23, 0.85);
    overflow: hidden;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.carte-source-segment:hover  { filter: brightness(1.25); }
.carte-source-segment:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px #22d3ee;
}

/* Retenu pour le rendu : liseré blanc à l'intérieur. Le même signal que la
   coche des cartes, pour qu'on n'ait pas à traduire d'une zone à l'autre. */
.carte-source-segment.est-choisi {
    box-shadow: inset 0 0 0 2px #ffffff;
}

/* ============================================================================
   🎮 L'ONGLET GAMING de /clipping
   ----------------------------------------------------------------------------
   ⚠️ EN CSS ORDINAIRE, PAS EN CLASSES TAILWIND INVENTÉES. Tailwind est COMPILÉ
   ici : une classe qui n'existe pas dans la feuille générée ne produit RIEN, et
   le bouton sort nu sans que rien ne le signale (cf. CLAUDE.md).
   ============================================================================ */

.onglet-mode {
    background: rgba(15, 23, 42, 0.6);
    border-color: #334155;
    color: #94a3b8;
}
.onglet-mode:hover { color: #e2e8f0; border-color: #475569; }

/* L'onglet actif porte le dégradé de la marque.
   ⚠️ TEXTE SOMBRE sur le dégradé cyan/emerald : en blanc le contraste tombe à
   2,43:1, illisible. Piège déjà payé, consigné dans CLAUDE.md. */
.onglet-mode[aria-selected="true"] {
    background: linear-gradient(90deg, #06b6d4, #10b981);
    border-color: transparent;
    color: #0f172a;
}

/* Le bouton de tracé d'une zone, pendant qu'on trace. */
.gaming-tracer.est-actif {
    border-color: #22d3ee;
    background: rgba(34, 211, 238, 0.12);
}

/* Pendant un tracé : le curseur dit qu'on dessine, et on empêche la sélection
   de texte — sans ça, glisser sur l'image surligne la page entière. */
#gaming-toile-cadre.en-trace { cursor: crosshair; }
#gaming-toile-cadre.en-trace * { user-select: none; }

/* L'histogramme des scores de corrélation. Ce n'est PAS de la décoration : deux
   populations nettement séparées = gabarit sain ; un continuum = le gabarit est
   mauvais, et aucun réglage de seuil ne le sauvera. */
.gaming-histo-barres {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 60px;
}
.gaming-histo-barres span {
    flex: 1;
    background: #334155;
    border-radius: 2px 2px 0 0;
    min-height: 1px;
}
.gaming-histo-barres span.au-dessus { background: #22d3ee; }