@font-face {
  font-family: 'Manrope';
  src: url('/static/fonts/manrope-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

[data-kl-theme="light"] { --kl-page:#F7F8FA; --kl-surface:#FFFFFF; --kl-surface2:#F7F8FA; --kl-rail:#FFFFFF; --kl-border:#E5E7EB; --kl-borderS:#D1D5DB; --kl-text:#111827; --kl-text2:#6B7280; --kl-text3:#9CA3AF; --kl-hover:#EDEFF3; --kl-shadow:0 12px 28px rgba(16,24,40,.12); --kl-shadowS:0 1px 2px rgba(16,24,40,.06); --kl-stage:#0E1116; }
[data-kl-theme="dark"] { --kl-page:#0E1116; --kl-surface:#171A21; --kl-surface2:#1C2029; --kl-rail:#12151C; --kl-border:#242A33; --kl-borderS:#2A2F3A; --kl-text:#F3F4F6; --kl-text2:#9CA3AF; --kl-text3:#6B7280; --kl-hover:#1C2029; --kl-shadow:0 12px 28px rgba(0,0,0,.5); --kl-shadowS:0 1px 2px rgba(0,0,0,.3); --kl-stage:#05070A; }

@keyframes kl-spin { to { transform: rotate(360deg); } }
@keyframes kl-fade { from { opacity:0; } to { opacity:1; } }
@keyframes kl-drawer { from { transform:translateY(100%); } to { transform:translateY(0); } }
@keyframes kl-slide { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }

* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; }
body { font-family:'Manrope', system-ui, sans-serif; -webkit-font-smoothing:antialiased; background:var(--kl-page); color:var(--kl-text); overflow:hidden; }

.kl-scroll::-webkit-scrollbar { width:8px; height:8px; }
.kl-scroll::-webkit-scrollbar-thumb { background:#B7BCC6; border-radius:99px; }
.kl-railscroll::-webkit-scrollbar { width:0; height:0; }

#kstudio { height:100dvh; display:flex; flex-direction:column; background:var(--kl-page); }

.kst-topbar { display:flex; align-items:center; gap:14px; height:60px; padding:0 20px; background:var(--kl-surface); border-bottom:1px solid var(--kl-border); flex-shrink:0; z-index:30; }
.kst-logo { width:30px; height:30px; border-radius:9px; background:#111827; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.kst-brand { font-size:16px; font-weight:800; color:var(--kl-text); letter-spacing:-0.02em; }
.kst-headinfo { display:flex; align-items:center; gap:10px; min-width:0; }
.kst-file { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 11px; border:1px solid transparent; border-radius:9px; background:transparent; cursor:pointer; font-family:inherit; max-width:280px; }
.kst-file:hover { background:var(--kl-hover); }
.kst-filename { font-size:14px; font-weight:700; color:var(--kl-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kst-status { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; }
.kst-status-dot { width:7px; height:7px; border-radius:50%; background:var(--kl-text3); }
.kst-status-txt { font-size:13px; font-weight:700; color:var(--kl-text3); white-space:nowrap; }
.kst-status.is-live .kst-status-dot, .kst-status.is-live .kst-status-txt { background:#2563EB; color:#2563EB; }
.kst-status.is-live .kst-status-txt { background:transparent; }
.kst-spacer { flex:1; }
.kst-quick { display:inline-flex; gap:6px; margin-right:10px; }
.kst-qa { width:38px; height:38px; border-radius:10px; border:1px solid var(--kl-border); background:var(--kl-surface); color:var(--kl-text2); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.kst-qa:hover { background:var(--kl-hover); color:#2563EB; }
.kst-qa:focus-visible { outline:2px solid #2563EB; outline-offset:2px; }
#kstudio[data-scene="empty"] .kst-quick, #kstudio[data-scene="processing"] .kst-quick { display:none; }
/* « ? » : toujours présent (aucune scène ne le masque) — l'aide doit rester
   atteignable même écran vide ou pendant un traitement. */
.kst-helpbtn { flex-shrink:0; margin-right:10px; }

.kst-dl { height:42px; padding:0 22px; border:none; border-radius:12px; background:#2563EB; color:#fff; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:8px; box-shadow:0 4px 12px rgba(37,99,235,.28); flex-shrink:0; }
.kst-dl:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
#kstudio[data-scene="empty"] .kst-headinfo, #kstudio[data-scene="empty"] .kst-dl,
#kstudio[data-scene="foreign"] .kst-headinfo, #kstudio[data-scene="foreign"] .kst-dl { display:none; }

/* pastille « en attente » : rappel permanent que les réglages appliqués se gravent
   à l'export — même style pointillé bleu que les lignes du panneau Modifications */
.kst-pending { height:34px; padding:0 12px; margin-right:10px; border-radius:99px; border:1.5px dashed #2563EB; background:rgba(37,99,235,.12); color:#1D4ED8; font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; min-width:0; flex-shrink:1; white-space:nowrap; overflow:hidden; }
[data-kl-theme="dark"] .kst-pending { color:#60A5FA; }
.kst-pending .kst-pending-short { display:none; }
/* Le porte-compte est un pose-là du script (style en ligne, largeur zéro en
   flex serré) : sans plancher, son bouton « Se connecter » débordait d'un
   conteneur de 0 px et le voisin se posait dessus. */
#kst-account { flex-shrink:0; }
/* Écran étroit : la pastille « en attente » cède la place — l'information
   revit dans le parcours d'export, où la décision se prend. */
@media (max-width: 480px) { .kst-pending { display:none; } }
#kstudio:not([data-scene="empty"]) .kst-brand { display:none; }

/* Mode « Clips seul » (page /{lang}/clips) : c'est un produit clips, PAS l'éditeur.
   Le rail d'outils, la timeline de montage et le bouton Exporter du studio sont
   retirés, ainsi que les rotations rapides (affordances d'édition). Le moteur et
   l'écran des extraits restent identiques — seule l'enveloppe change. */
#kstudio[data-mode="clips"] .kst-rail,
#kstudio[data-mode="clips"] .kst-timeline,
#kstudio[data-mode="clips"] .kst-tl-grip,
#kstudio[data-mode="clips"] .kst-tl-fold,
#kstudio[data-mode="clips"] .kst-dl,
#kstudio[data-mode="clips"] .kst-quick { display:none; }

.kst-body { flex:1; display:flex; min-height:0; position:relative; }

.kst-rail { width:92px; flex-shrink:0; background:var(--kl-rail); border-right:1px solid var(--kl-border); padding:12px 8px; display:flex; flex-direction:column; gap:3px; overflow-y:auto; }
.kst-nav { display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 4px; border-radius:12px; border:none; background:transparent; cursor:pointer; color:var(--kl-text2); font-family:inherit; position:relative; }
.kst-nav svg { width:22px; height:22px; }
.kst-nav-badge { position:absolute; top:2px; right:6px; min-width:16px; height:16px; padding:0 4px; border-radius:99px; background:#2563EB; color:#fff; font-size:10px; font-weight:800; line-height:16px; text-align:center; pointer-events:none; }
.kst-nav-label { font-size:11px; font-weight:600; text-align:center; line-height:1.1; display:flex; align-items:center; gap:3px; color:var(--kl-text2); }
.kst-nav.is-active { background:rgba(37,99,235,.1); }
.kst-nav.is-active svg { stroke:#2563EB; }
.kst-nav.is-active .kst-nav-label { font-weight:800; color:#2563EB; }
.kst-nav.is-active::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:24px; border-radius:0 3px 3px 0; background:#2563EB; }
.kst-nav:disabled { opacity:.4; cursor:not-allowed; }
.kst-montage { padding:11px 4px; }
.kst-montage svg { stroke:#2563EB; }
.kst-montage .kst-nav-label { color:#2563EB; font-weight:800; }
.kst-ai-dot { width:5px; height:5px; border-radius:50%; background:#2563EB; display:inline-block; }
.kst-projects { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; margin-left:14px; border-radius:9px; border:1px solid var(--kl-border); background:transparent; color:var(--kl-text2); font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; flex-shrink:0; }
.kst-projects:hover { background:var(--kl-hover); }
/* Nouveau projet : à côté de Mes projets (galerie = l'autre entrée) — inutile sur
   l'écran d'accueil (on y est déjà) et sur l'écran « autre compte » */
.kst-new { margin-left:0; }
#kstudio[data-scene="empty"] .kst-new, #kstudio[data-scene="foreign"] .kst-new { display:none; }

/* Export continu : une carte du clic au tiroir (recouvre les bascules de scène),
   réductible en pastille flottante ; le studio reste visible mais FIGÉ (les étapes
   mutent la version active — éditer pendant corromprait l'export). */
.kst-export-ov { z-index:60; background:rgba(5,7,10,.45); display:flex; align-items:center; justify-content:center; animation:kl-fade .2s ease; }
.kst-export-card { width:min(92vw, 430px); display:flex; flex-direction:column; background:var(--kl-surface); border-radius:18px; box-shadow:var(--kl-shadow); padding:22px 24px; animation:kl-fade .2s ease; }
.kst-export-pill { position:fixed; right:18px; bottom:18px; z-index:60; display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 16px; border:1px solid var(--kl-border); border-radius:99px; background:var(--kl-surface); box-shadow:var(--kl-shadow); color:var(--kl-text); font-family:inherit; cursor:pointer; animation:kl-fade .2s ease; }
.kst-export-spin { width:17px; height:17px; border:2.5px solid rgba(37,99,235,.25); border-top-color:#2563EB; border-radius:50%; animation:kl-spin .7s linear infinite; flex-shrink:0; }
#kstudio[data-exporting="1"] .kst-rail, #kstudio[data-exporting="1"] .kst-panel,
#kstudio[data-exporting="1"] .kst-quick,
#kstudio[data-exporting="1"] .kst-pending,
#kstudio[data-exporting="1"] .kst-timeline, #kstudio[data-exporting="1"] .kst-tl-grip,
#kstudio[data-busy="1"] .kst-timeline, #kstudio[data-busy="1"] .kst-tl-grip,
#kstudio[data-busy="1"] .kst-quick { pointer-events:none; opacity:.55; }
.kst-sep { height:1px; background:var(--kl-border); margin:6px 6px 3px; flex-shrink:0; }

/* Colonne panneau repliée quand elle est vide (arbitrage 18/07) : le lecteur se
   recentre sans outil ouvert ; la transition adoucit le déplacement du centre. */
.kst-panel { width:320px; flex-shrink:0; background:var(--kl-surface); border-right:1px solid var(--kl-border); overflow:hidden; transition:width .18s ease; }
.kst-panel:empty { width:0; border-right:none; background:var(--kl-page); }

/* Règle de cession de hauteur (mandat viewport) : quand la place manque, l'APERÇU
   cède le premier (la scène est flex:1, elle se rétracte), la timeline garde son
   contenu (flex-shrink:0), et si même le minimum ne tient pas on DÉFILE — jamais
   de bouton coupé dans un conteneur non défilable. `overflow:hidden auto` = pas de
   débordement horizontal (le focus clavier n'élargit pas), défilement vertical de
   secours seulement s'il est nécessaire (aucune barre en cas normal). */
.kst-centre { flex:1; min-width:0; display:flex; flex-direction:column; background:var(--kl-page); min-height:0; overflow:hidden auto; }
.kst-scene { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; }

/* Timeline de MONTAGE PERMANENTE en bas, hauteur CONSTANTE : c'est elle qui pilote le
   lecteur central unique. Ni les outils ni le bouton Timeline ne la font apparaître ou
   disparaître — l'écran ne bouge jamais. */
/* overflow:hidden auto — la poignée de redimensionnement (app.js) peut fixer une
   hauteur inline INFÉRIEURE au contenu de l'île (barre « Ajouter », Défaire/Rétablir) ;
   sans défilement, ce bas d'île était rogné et ses boutons devenaient inatteignables
   (constat commanditaire, desktop). Le défilement vertical les rend toujours joignables ;
   l'horizontal reste bloqué. Correctif de fond côté JS : borner ce redimensionnement au
   contenu de l'île (voir RAPPORT-VIEWPORT.md). */
.kst-timeline { display:flex; flex-direction:column; flex-shrink:0; height:320px; border-top:1px solid var(--kl-border); background:var(--kl-surface); overflow:hidden auto; }
.kst-timeline:empty { display:none; }
#kstudio[data-scene="empty"] .kst-timeline, #kstudio[data-scene="processing"] .kst-timeline { display:none; }
/* En v2 la hauteur n'est plus constante : la bande se dimensionne elle-même
   (64 px, 88 px avec pastilles) plus sa barre d'actions. 320 px laisseraient un
   grand vide sous elle. */
#kstudio[data-mv2="1"] .kst-timeline { height:auto; }
/* Desktop (≥861 px, là où la poignée de redimensionnement s'active) : la hauteur
   inline qu'elle pose peut être INFÉRIEURE au contenu de l'île. `min-height:max-content`
   empêche la timeline de descendre sous son contenu — la barre « Ajouter » et
   Défaire/Rétablir restent VISIBLES sans défilement quand l'écran a la place ; sur un
   viewport vraiment court c'est le défilement de secours de .kst-centre qui prend le
   relais. Non appliqué sous 861 px : là, la timeline est pilotée par le flex et le repli. */
@media (min-width: 861px) {
  #kstudio[data-mv2="1"] .kst-timeline { min-height: max-content; }
}
/* Timeline DISPONIBLE : état « allumé » discret (pastille), volontairement
   différent du style « sélectionné » des outils (fond + barre bleue à gauche) —
   deux zones semblaient choisies en même temps. */
.kst-montage.is-on .kst-nav-label { color:#1D4ED8; font-weight:800; }
.kst-montage.is-on svg { stroke:#2563EB; }
.kst-montage.is-on::after { content:""; position:absolute; top:8px; right:8px; width:6px; height:6px; border-radius:50%; background:#2563EB; }
[data-kl-theme="dark"] .kst-montage.is-on .kst-nav-label { color:#93C5FD; }
.kst-timeline.kst-flash { box-shadow:inset 0 0 0 2px #2563EB; }

/* Poignée de redimensionnement de la timeline (glisser le bord supérieur) */
.kst-tl-grip { height:6px; flex-shrink:0; cursor:row-resize; background:transparent; position:relative; z-index:5; touch-action:none; }
.kst-tl-grip:hover, .kst-tl-grip:active { background:rgba(37,99,235,.35); }
#kstudio[data-scene="empty"] .kst-tl-grip, #kstudio[data-scene="processing"] .kst-tl-grip { display:none; }
.kst-centre:has(.kst-timeline:empty) .kst-tl-grip { display:none; }

/* squelette pendant la génération des vignettes (une seule fois par source) */
.kst-film { flex:1; min-height:0; display:flex; flex-direction:column; padding:10px 14px 12px; gap:8px; }
.kst-film-skel { flex:1; border-radius:10px; border:1px solid var(--kl-border); background:linear-gradient(100deg, var(--kl-surface2) 30%, var(--kl-hover) 50%, var(--kl-surface2) 70%); background-size:200% 100%; animation:kl-shimmer 1.2s linear infinite; }
@keyframes kl-shimmer { to { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce) { .kst-film-skel { animation:none; } }

/* fixed : l'ancêtre positionné peut dépasser l'écran mobile (corps en colonne) — un
   overlay absolute s'y ancrait et poussait la feuille sous le bord bas du viewport.
   overflow hidden : RIEN de ce qui vit dans une superposition (feuille, tiroir…) ne
   peut élargir l'écran ni créer de défilement horizontal, clavier ouvert compris. */
.kst-overlay { position:fixed; inset:0; z-index:40; overflow:hidden; }
@keyframes kl-pop { from { transform:scale(.82); opacity:.35; } to { transform:scale(1); opacity:1; } }
.kl-chip-new { animation:kl-pop .3s ease; }

/* Couche C — le « i » par réglage : cible tactile 44×44 (marge négative pour ne pas
   gonfler la ligne du titre), visuel 19px. S'ouvre AU TAP ; la bulle est en JS
   (position:fixed, bornée au viewport). WCAG 2.5.5 (44 px) + 1.4.1 (jamais la couleur). */
.ksp-grp-t.has-help { display:flex; align-items:center; gap:4px; }
.kst-help { width:44px; height:44px; margin:-12px -11px; padding:0; border:none; background:transparent; color:var(--kl-text2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:50%; -webkit-tap-highlight-color:transparent; }
.kst-help:hover, .kst-help:focus-visible { color:#2563EB; outline:none; }
.kst-help:focus-visible { box-shadow:0 0 0 3px rgba(37,99,235,.25); }
.kst-help svg { width:19px; height:19px; pointer-events:none; }
/* Bulle Couche C : posée sur <body>, coordonnées calculées à l'ouverture. */
.kst-pop { position:fixed; z-index:70; width:240px; max-width:88vw; padding:11px 13px; border-radius:11px; background:var(--kl-surface); color:var(--kl-text); border:1px solid var(--kl-border); box-shadow:var(--kl-shadow); animation:kl-fade .12s ease; }
.kst-tipline { margin:0; font-size:12.5px; font-weight:500; color:var(--kl-text2); line-height:1.5; }
.kst-tipline + .kst-tipline { margin-top:6px; }
.kst-tipstate { font-weight:800; color:var(--kl-text); }

/* Couche D — bouton « Aide » dans l'en-tête d'outil. */
.kst-aidbtn { display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 12px; margin-left:auto; flex-shrink:0; border:1px solid var(--kl-border); border-radius:99px; background:var(--kl-surface2); color:#2563EB; font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.kst-aidbtn:hover { background:var(--kl-hover); }
.kst-aidbtn:focus-visible { outline:2px solid #2563EB; outline-offset:2px; }
.kst-aidbtn svg { width:15px; height:15px; }
.kst-aid-step { display:flex; gap:10px; margin-bottom:9px; align-items:flex-start; }
.kst-aid-num { flex-shrink:0; width:22px; height:22px; border-radius:50%; background:rgba(37,99,235,.12); color:#2563EB; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.kst-aid-ctl { padding:10px 0; border-top:1px solid var(--kl-border); }
.kst-aid-ctl-l { margin:0 0 4px; font-size:13.5px; font-weight:800; color:var(--kl-text); }
.kst-aid-faq { margin:0 0 12px; }
.kst-aid-faq-q { margin:0 0 3px; font-size:13px; font-weight:800; color:var(--kl-text); }
.kst-aid-faq-a { margin:0; font-size:12.5px; font-weight:500; color:var(--kl-text2); line-height:1.5; }

/* Bulle « Commencez ici » (premier lancement) : style distinct, non bloquant. */
.kst-firstrun { position:relative; align-self:center; max-width:280px; margin:0 0 14px; padding:11px 13px; border-radius:14px; background:#2563EB; color:#fff; box-shadow:0 6px 18px rgba(37,99,235,.35); animation:kl-pop .3s ease; }
.kst-firstrun::after { content:""; position:absolute; left:50%; bottom:-7px; width:14px; height:14px; background:#2563EB; transform:translateX(-50%) rotate(45deg); border-radius:0 0 3px 0; }
.kst-firstrun-t { display:block; font-size:14px; font-weight:800; letter-spacing:-0.01em; }
.kst-firstrun-h { display:block; font-size:12px; font-weight:500; opacity:.92; margin-top:2px; line-height:1.35; }
.kst-firstrun-x { margin-top:8px; height:30px; padding:0 14px; border:none; border-radius:9px; background:rgba(255,255,255,.2); color:#fff; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; }

/* Description de rôle sous chaque outil, VISIBLE seulement dans la feuille « Outils »
   du téléphone (point 6). Ailleurs (rail vertical / rail bas) : masquée. */
.kst-nav-txt { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; }
.kst-nav-desc { display:none; }

/* Helpers partagés du shell (style centralisé, jetons thème — rendu identique aux
   anciens styles en ligne de app.js) */
.kst-bluebtn { width:100%; height:52px; border:none; border-radius:12px; background:#2563EB; color:#fff; font-family:inherit; font-size:16px; font-weight:700; cursor:pointer; box-shadow:0 4px 12px rgba(37,99,235,.28); }
.kst-pill { height:34px; padding:0 13px; border-radius:99px; border:1px solid var(--kl-border); background:var(--kl-surface); color:var(--kl-text2); font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.kst-sectitle { margin:0 0 8px; font-size:11px; font-weight:800; letter-spacing:.04em; color:var(--kl-text2); text-transform:uppercase; }
.kst-noterow { margin:10px 0 0; font-size:12px; font-weight:600; color:var(--kl-text2); text-align:center; display:flex; align-items:center; justify-content:center; gap:6px; }
.kst-prolink { font-size:12px; font-weight:700; color:var(--kl-text2); text-decoration:underline; text-underline-offset:3px; text-align:center; margin-top:2px; display:block; }

/* Cible tactile ≥44px (WCAG 2.5.5) SANS changer le visuel : une zone de frappe
   transparente centrée agrandit le clic des petits boutons de la barre du haut
   (rotations, ?, Mes projets, Télécharger, compte/connexion) sans grossir le rendu
   ni élargir la barre. `position:absolute` la sort du flux flex (aucune largeur
   ajoutée). .kst-hit = même zone pour les boutons rendus en JS (compte, avatar). */
.kst-qa, .kst-dl, .kst-projects, .kst-hit { position:relative; }
.kst-qa::after, .kst-dl::after, .kst-projects::after, .kst-hit::after {
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100%; height:100%; min-width:44px; min-height:44px;
}

@media (max-width: 860px) {
  .kst-topbar { height:52px; padding:0 14px; }
  .kst-logo { width:28px; height:28px; }
  .kst-brand { display:none; }
  /* margin-left retiré : la marge dupliquait l'écart flex (gap:8px) — 16 px entre
     logo et Mes projets — et poussait « Télécharger » de 3 px hors de l'écran à
     390 px (visiteur anonyme, mesuré). L'écart flex suffit. */
  .kst-projects { padding:0 9px; margin-left:0; }
  /* barre du haut à 390 px : écarts resserrés sinon Exporter sort de l'écran dès
     que la pastille « en attente » est là ; le + Nouveau passe par la fenêtre
     Mes projets (bouton bleu en tête) — même logique galerie-d'abord que mobile */
  /* La barre ne doit JAMAIS déborder : le bouton Exporter est la seule sortie du
     Studio, et il était rogné par le bord de l'écran. `min-width:0` autorise les
     éléments souples à se réduire au lieu de pousser les suivants dehors. */
  .kst-topbar { gap:8px; padding:0 10px; overflow:hidden; }
  .kst-topbar > * { min-width:0; }
  .kst-dl { flex-shrink:0; }
  /* Sans `overflow`, ce bloc réduit à zéro laissait quand même son texte déborder :
     « 1 en attente » se dessinait PAR-DESSUS « Se connecter », deux libellés
     illisibles l'un sur l'autre. Il se rogne désormais proprement. */
  .kst-headinfo { overflow:hidden; }
  .kst-status { min-width:0; overflow:hidden; }
  .kst-status-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .kst-new { display:none; }
  /* la pastille d'export flotte AU-DESSUS du rail horizontal bas */
  .kst-export-pill { bottom:96px; right:12px; }
  .kst-projects-label { display:none; }
  /* la barre du haut doit tenir en 390 px : les rotations rapides restent
     accessibles via l'outil Format — on les masque sur mobile */
  .kst-quick { display:none; }
  /* le « ? » RESTE (l'aide n'a pas d'autre porte d'entrée) mais rétrécit :
     34 px + 6 px d'écart, pris sur le nom de fichier qui a déjà son ellipse */
  .kst-helpbtn { width:34px; height:34px; margin-right:6px; }
  .kst-helpbtn svg { width:17px; height:17px; }
  /* ceinture DÉFINITIVE à chaque étage : ni la page, ni la racine de l'app, ni le
     corps ne peuvent s'élargir ou défiler horizontalement — le focus clavier n'a
     nulle part où pousser l'écran latéralement */
  html, body { overflow-x:hidden; max-width:100vw; }
  #kstudio { overflow-x:hidden; max-width:100vw; }
  .kst-body, .kst-centre, .kst-scene { overflow-x:hidden; min-width:0; }
  .ksp-panel-wrap { max-width:100%; overflow-x:hidden; }
  .kst-dl { height:38px; padding:0 14px; font-size:13px; }
  .kst-pending { height:30px; padding:0 10px; margin-right:8px; font-size:12px; flex-shrink:0; }
  .kst-pending .kst-pending-full { display:none; }
  .kst-pending .kst-pending-short { display:inline; }
  .kst-status { display:none; }
  .kst-spacer { display:none; }
  .kst-headinfo { flex:1; min-width:0; }
  .kst-file { max-width:none; min-width:0; }
  .kst-body { flex-direction:column; }
  .kst-centre { order:1; }
  .kst-rail { order:2; width:auto; flex-direction:row; border-right:none; border-top:1px solid var(--kl-border); overflow-x:auto; overflow-y:hidden; padding:8px 10px; gap:4px; }
  .kst-nav { width:62px; flex-shrink:0; padding:7px 4px; }
  .kst-nav svg { width:21px; height:21px; }
  .kst-nav.is-active::before { display:none; }
  .kst-nav-label { font-size:10.5px; white-space:nowrap; }
  .kst-sep { height:auto; width:1px; margin:6px 4px; }
  .kst-panel { display:none; }
  #kstudio[data-scene="empty"] .kst-rail, #kstudio[data-scene="foreign"] .kst-rail,
  #kstudio[data-scene="notfound"] .kst-rail { display:none; }
  /* le rail déborde de moitié hors écran et sa barre de défilement est masquée :
     un dégradé sur le bord droit dit qu'il reste des outils à faire défiler */
  .kst-rail { position:relative; -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 26px), transparent); }
  /* Barre REPLIER/DÉPLIER (mobile) — motif natif de feuille : poignée + libellé.
     Cible tactile 44px (P5), état porté par le texte ET le chevron (P8, jamais la
     seule couleur), profondeur par ombre légère et non par un aplat (P4). */
  .kst-tl-fold { order:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:100%; height:44px; flex-shrink:0; border:none; border-top:1px solid var(--kl-border); background:var(--kl-surface); color:var(--kl-text); font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; padding:6px 0 5px; box-shadow:0 -6px 16px rgba(16,24,40,.06); transition:background .15s ease; }
  .kst-tl-fold:active { background:var(--kl-hover); }
  .kst-tl-grab { width:36px; height:4px; border-radius:99px; background:var(--kl-borderS); flex-shrink:0; }
  .kst-tl-foldtxt { display:inline-flex; align-items:center; gap:5px; line-height:1; }
  .kst-tl-foldtxt svg { opacity:.75; }
  [data-kl-theme="dark"] .kst-tl-fold { box-shadow:0 -6px 16px rgba(0,0,0,.35); }
  #kstudio[data-tlfold="1"] .kst-tl-grab { background:#2563EB; }
  #kstudio[data-scene="empty"] .kst-tl-fold, #kstudio[data-scene="processing"] .kst-tl-fold,
  #kstudio[data-scene="foreign"] .kst-tl-fold, #kstudio[data-scene="notfound"] .kst-tl-fold { display:none; }
  #kstudio[data-tlfold="1"] .kst-timeline { flex:0 0 auto; height:0; min-height:0; border-top:none; }
  @media (prefers-reduced-motion: reduce) { .kst-tl-fold { transition:none; } }
  /* replié = la hauteur rendue va au LECTEUR (sinon on ne gagnait que du vide) */
  #kstudio[data-tlfold="1"] .kst-scene { flex:1 1 auto; }
  /* la TIMELINE absorbe toute la hauteur libérée (lecteur exact + lignes fines) :
     c'est elle l'outil principal du montage, elle doit être pleinement utilisable */
  .kst-scene { flex:0 0 auto; }
  .kst-timeline { order:3; height:auto; flex:1 1 auto; min-height:170px; border-top:1px solid var(--kl-border); border-bottom:none; }

  /* ── Montage v2 sur mobile ────────────────────────────────────────────────
     Le plancher d'aperçu (55 % de la hauteur) et le rail d'outils ne tiennent
     pas ensemble sur un téléphone : il faut choisir, et l'aperçu gagne — c'est
     ce que l'utilisateur regarde. Le rail est donc masqué TANT QUE la bande est
     dépliée, et le bouton « Outils » de la barre d'actions le rouvre en feuille.
     CES DEUX RÈGLES NE SE LIVRENT JAMAIS SÉPARÉMENT : sans le bouton, les outils
     deviennent inatteignables sur téléphone. */
  #kstudio[data-mv2-strip="1"] .kst-rail { display:none; }
  /* Le rail DÉPLACÉ dans la feuille doit reprendre sa place : la règle de masquage
     ci-dessus porte un identifiant, elle l'emporterait sur une simple classe. Sans
     ce sélecteur aussi spécifique, le rail restait invisible DANS la feuille : ses
     boutons existaient mais mesuraient zéro pixel, le doigt tombait sur le voile
     et refermait tout. Aucun outil n'était atteignable au toucher — alors qu'un
     clic programmé, lui, fonctionnait : le piège se voyait uniquement en essai réel. */
  #kstudio .kst-rail.kst-rail-sheet { display:flex; flex-direction:column; width:100%; height:100%; overflow-y:auto; overflow-x:hidden; border:none; padding:4px 0 10px; -webkit-mask-image:none; mask-image:none; }
  #kstudio .kst-rail.kst-rail-sheet .kst-nav { width:100%; flex-direction:row; justify-content:flex-start; gap:12px; min-height:60px; flex-shrink:0; padding:8px 14px; }
  #kstudio .kst-rail.kst-rail-sheet .kst-nav-txt { align-items:flex-start; gap:2px; }
  #kstudio .kst-rail.kst-rail-sheet .kst-nav-label { font-size:14px; }
  /* la phrase de rôle (déjà écrite, invisible ailleurs) apparaît sous chaque nom */
  #kstudio .kst-rail.kst-rail-sheet .kst-nav-desc { display:block; font-size:11.5px; font-weight:500; color:var(--kl-text3); line-height:1.3; text-align:left; white-space:normal; }
  #kstudio .kst-rail.kst-rail-sheet .kst-sep { width:auto; height:1px; margin:6px 14px; }
  /* Un seul organe de repli en v2 : celui de l'île. Deux commandes pilotant le
     même état finiraient par se contredire. */
  #kstudio[data-mv2="1"] .kst-tl-fold { display:none; }
  /* La bande donne sa hauteur ; min-height:170 laisserait un vide sous elle. */
  #kstudio[data-mv2="1"] .kst-timeline { flex:0 0 auto; min-height:0; }
  /* Une vidéo HORIZONTALE sur un téléphone vertical ne peut pas dépasser ~200 px
     de haut : sa largeur la borne. La bande v2 étant compacte, près de la moitié
     de l'écran restait vide EN BAS, ce qui se lit comme une page cassée. Le
     montage est donc collé au bas de l'écran — là où le pouce arrive, la moitié
     des gens tenant leur téléphone d'une main — et l'espace libre respire entre
     l'aperçu et lui, la vidéo restant centrée dedans. */
  #kstudio[data-mv2="1"] .kst-scene { flex:1 1 auto; justify-content:flex-start; min-height:0; }

  .kst-film { padding:8px 12px 10px; gap:6px; }
  /* barre de l'île compacte : transports resserrés, boutons Texte/Musique/Média en
     icônes seules (libellés retirés par font-size:0, l'icône SVG reste) */
  #kst-timeline .sm-tlbar { padding:4px 6px; gap:4px; flex-wrap:nowrap; overflow-x:auto; }
  #kst-timeline .sm-time { font-size:10px; }
  #kst-timeline .sm-tbtn, #kst-timeline .sm-tbtn2 { padding:5px; }
  #kst-timeline .sm-addmedia { font-size:0; gap:0; padding:7px 8px; }
}

/* ── PLEIN ÉCRAN du lecteur (aperçus compris) ──────────────────────────────────
   Le CADRE est agrandi, pas la balise vidéo : sous-titres, filigrane et textes
   du montage restent superposés et alignés sur l'image. Fonctionne aussi sur
   iOS, qui n'autorise pas le plein écran natif sur un élément quelconque. */
#kstudio[data-fs="1"] .kst-stagebox {
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:120; border-radius:0; box-shadow:none; margin:0;
}
#kstudio[data-fs="1"]::after {
  content:""; position:fixed; inset:0; background:#000; z-index:119;
}
/* pendant le plein écran, rien d'autre ne doit capter le doigt */
#kstudio[data-fs="1"] .kst-timeline, #kstudio[data-fs="1"] .kst-rail,
#kstudio[data-fs="1"] .kst-panel, #kstudio[data-fs="1"] .kst-topbar,
#kstudio[data-fs="1"] .kst-tl-fold { pointer-events:none; }

/* ══ FILIGRANE — bibliothèque de logos (panneau watermark) ═══════════════════════
   Vignettes bornées + loading="lazy" ; sélection signalée par bord bleu ET coche
   (jamais la couleur seule, WCAG 1.4.1). Cible tactile ≥44px sur la vignette.
   Thème clair/sombre via les jetons --kl-*. Pas d'animation nouvelle. */
.ksp-wm-lib { display:grid; grid-template-columns:repeat(auto-fill, minmax(66px, 1fr)); gap:8px; margin-bottom:10px; }
.ksp-wm-logo { position:relative; aspect-ratio:1/1; min-height:66px; border-radius:12px; border:1.5px solid var(--kl-border); cursor:pointer; padding:6px; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background-color:var(--kl-surface2);
  background-image:linear-gradient(45deg, var(--kl-hover) 25%, transparent 25%), linear-gradient(-45deg, var(--kl-hover) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--kl-hover) 75%), linear-gradient(-45deg, transparent 75%, var(--kl-hover) 75%);
  background-size:14px 14px; background-position:0 0, 0 7px, 7px -7px, -7px 0; }
.ksp-wm-logo img { max-width:100%; max-height:100%; object-fit:contain; display:block; pointer-events:none; }
.ksp-wm-logo:hover { border-color:var(--kl-borderS); }
.ksp-wm-logo.on { border:2px solid #2563EB; box-shadow:0 0 0 2px rgba(37,99,235,.22); }
.ksp-wm-logo-chk { position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:6px; background:#2563EB; display:flex; align-items:center; justify-content:center; }
.ksp-wm-logo-del { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:6px; border:none; background:rgba(17,24,39,.72); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.ksp-wm-logo-del:hover { background:#DC2626; }
.ksp-wm-upload { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px; border-radius:12px; border:2px dashed var(--kl-borderS); background:var(--kl-surface2); color:var(--kl-text2); font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.ksp-wm-upload:hover { border-color:#2563EB; color:#2563EB; }
.ksp-wm-empty { font-size:12.5px; font-weight:600; color:var(--kl-text3); margin:0 0 10px; line-height:1.45; }

/* Timeline montage : un bloc posé (image/texte/audio) garde une largeur saisissable
   même quand sa durée est infime face à la vidéo (4 s sur 5 min = 9 px sinon) —
   les poignées de bord (24 px chacune) recouvraient tout, déplacement impossible.
   76 px : zone centrale de déplacement ~52 px une fois les poignées de bord (24 px) posées. La piste vidéo n'est pas concernée (segments en
   partition exacte de 100 %). */
.mv2-desk-block[data-kind=image], .mv2-desk-block[data-kind=text], .mv2-desk-block[data-kind=audio] { min-inline-size:76px; }