.ksp-grp { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--kl-border); }
.ksp-grp:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.ksp-grp-t { margin: 0 0 10px; font-size: 14px; font-weight: 800; color: var(--kl-text); }
.ksp-grp-h { margin: 0 0 11px; font-size: 12px; font-weight: 500; color: var(--kl-text2); line-height: 1.4; }
.ksp-grp-t + .ksp-grp-h { margin-top: -7px; }
.ksp-note { margin: 10px 0 0; font-size: 12.5px; font-weight: 500; color: var(--kl-text2); line-height: 1.5; }

.ksp-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.ksp-segb { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--kl-border); background: var(--kl-surface); color: var(--kl-text); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ksp-segb.on { border: 2px solid #2563EB; background: rgba(37,99,235,.06); color: #1D4ED8; }
.ksp-segb.off { opacity: .42; cursor: not-allowed; }

.ksp-cells { display: grid; gap: 8px; }
.ksp-cells.c2 { grid-template-columns: 1fr 1fr; }
.ksp-cells.c3 { grid-template-columns: 1fr 1fr 1fr; }
.ksp-cell { height: 44px; border-radius: 10px; border: 1.5px solid var(--kl-border); background: var(--kl-surface); color: var(--kl-text); font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.ksp-cell.on { border: 2px solid #2563EB; background: rgba(37,99,235,.06); color: #1D4ED8; }
.ksp-cell-ic { display: flex; align-items: center; justify-content: center; gap: 7px; height: 46px; font-size: 13px; font-weight: 700; color: var(--kl-text); }

.ksp-field { width: 100%; height: 46px; padding: 0 13px; border-radius: 11px; background: var(--kl-surface); border: 1.5px solid var(--kl-border); color: var(--kl-text); font-family: inherit; font-size: 14px; font-weight: 600; box-sizing: border-box; }
.ksp-field:focus { outline: none; border-color: #2563EB; }

.ksp-info { display: flex; gap: 10px; align-items: flex-start; padding: 13px 14px; border-radius: 12px; background: var(--kl-surface2); border: 1px solid var(--kl-border); }
.ksp-info-t { font-size: 12.5px; font-weight: 500; color: var(--kl-text2); line-height: 1.55; }
.ksp-ic { display: inline-flex; color: var(--kl-text2); flex-shrink: 0; }
.ksp-ic.blue { color: #2563EB; }
.ksp-ic.violet { color: #7C3AED; }

.ksp-bigval { text-align: center; font-size: 28px; font-weight: 800; color: #2563EB; letter-spacing: -0.02em; margin-bottom: 10px; }
.ksp-slider { width: 100%; accent-color: #2563EB; }
.ksp-ticks { display: flex; justify-content: space-between; margin-top: 6px; }
.ksp-ticks span { font-size: 11px; font-weight: 700; color: var(--kl-text2); }

.ksp-rot-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-top: 14px; border-radius: 12px; overflow: hidden; background: var(--kl-stage); display: flex; align-items: center; justify-content: center; }
.ksp-rot-img { max-width: 92%; max-height: 92%; object-fit: contain; transition: transform .25s ease; }
.ksp-rot-ph { width: 60%; height: 60%; border-radius: 8px; background: rgba(255,255,255,.06); }
.ksp-rot-status { margin: 12px 0 0; font-size: 12px; font-weight: 600; color: var(--kl-text2); }
.ksp-rot-status.on { color: #2563EB; }

.ksp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 16px; border-radius: 11px; border: none; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ksp-btn-primary { background: #2563EB; color: #fff; box-shadow: 0 4px 12px rgba(37,99,235,.28); }
.ksp-btn-outline { border: 1px solid var(--kl-borderS); background: var(--kl-surface); color: var(--kl-text); }
.ksp-btn-ghost { border: 1px solid var(--kl-border); background: var(--kl-surface); color: var(--kl-text); height: 34px; font-size: 13px; }
.ksp-btn-icon { width: 40px; height: 40px; padding: 0; border: 1px solid var(--kl-borderS); background: var(--kl-surface); color: var(--kl-text2); flex-shrink: 0; }
.ksp-btn-full { width: 100%; height: 48px; font-size: 16px; }
.ksp-btn-grow { flex: 1; height: 40px; font-size: 13px; }

.ksp-loading { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; font-size: 14px; font-weight: 600; color: var(--kl-text3); }
.ksp-loading.sm { padding: 18px; font-size: 13px; }

/* ═══ ÉCRAN « CLIPS IA » — écran dédié, liste de lignes ════════════════════════
   Un clip vertical seul au centre d'une zone large ne peut pas remplir l'écran :
   76 % de la zone du lecteur restait vide sur ordinateur, 59 % sur téléphone.
   La réponse n'est pas d'agrandir le lecteur (son plafond 46dvh est volontaire,
   aligné sur celui du studio) mais de changer la MISE EN PAGE : une ligne par
   clip, lecteur à gauche, tous les détails à droite — le motif de notre propre
   page autonome /tools/ai-clips (.klc-clip en production). */

.kspx { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--kl-bg); }
.kspx-bar { flex-shrink: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--kl-border); background: var(--kl-surface); }
.kspx-bar-t { flex: 1; min-width: 130px; }
.kspx-h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--kl-text); letter-spacing: -0.02em; }
.kspx-sub { margin: 2px 0 0; font-size: 12.5px; font-weight: 500; color: var(--kl-text2); }
.kspx-back { flex-shrink: 0; }
.kspx-sorts { display: flex; gap: 6px; flex-wrap: wrap; }
.kspx-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 20px 26px; }
.kspx-list { display: flex; flex-direction: column; gap: 14px; }

/* Ligne = grille à 2 colonnes et 4 rangées. Le lecteur occupe la colonne de
   gauche sur toute la hauteur ; l'en-tête, la carte de score (qui s'ÉTIRE, rangée
   1fr) et les actions occupent la droite. C'est l'étirement du score qui remplit
   la hauteur imposée par le lecteur, au lieu d'y laisser un trou. */
.kspx-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; column-gap: 20px; row-gap: 12px; padding: 18px; border: 1px solid var(--kl-border); border-radius: 14px; background: var(--kl-surface); box-shadow: var(--kl-shadowS); }
.kspx-row > .kspx-media { grid-column: 1; grid-row: 1 / -1; align-self: stretch; }
.kspx-row > .kspx-head { grid-column: 2; grid-row: 1; }
.kspx-row > .kspx-score { grid-column: 2; grid-row: 2; }
.kspx-row > .kspx-acts { grid-column: 2; grid-row: 3; }
.kspx-row > .kspx-rowerr { grid-column: 2; grid-row: 4; }

/* Média : IMAGE au repos (aucune <video> instanciée), <video> après un clic.
   Le cadre ÉPOUSE la hauteur de la colonne de droite (align-self: stretch) et son
   FOND FLOU absorbe la différence : deux colonnes de hauteurs inégales ne laissent
   plus de bande blanche, et l'image reste entière (object-fit: contain). Le
   plafond 46dvh du lecteur du studio est conservé. */
.kspx-media { position: relative; width: 100%; min-height: 240px; max-height: 46dvh; margin: 0 auto; border-radius: 12px; overflow: hidden; background: var(--kl-stage); display: flex; align-items: center; justify-content: center; }
.kspx-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); filter: blur(22px) saturate(1.25) brightness(.82); }
.kspx-poster { position: relative; z-index: 1; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.kspx-video { position: relative; z-index: 1; max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.kspx-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 52px; height: 52px; min-width: 44px; min-height: 44px; border: none; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 4px 14px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.kspx-play svg { margin-left: 3px; }
.kspx-play:hover { background: #fff; }
.kspx-veil { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; background: rgba(14,17,22,.55); }
.kspx-veil-t { font-size: 11px; font-weight: 800; color: #fff; }
.kspx-tag { position: absolute; top: 8px; left: 8px; z-index: 3; height: 22px; padding: 0 8px; border-radius: 6px; background: rgba(14,17,22,.72); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; }
.kspx-time { position: absolute; bottom: 8px; right: 8px; z-index: 3; height: 20px; padding: 0 7px; border-radius: 5px; background: rgba(14,17,22,.72); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; }

.kspx-head { min-width: 0; }
.kspx-kicker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 600; color: var(--kl-text2); }
.kspx-n { font-weight: 800; color: var(--kl-text); }
.kspx-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; background: rgba(37,99,235,.1); color: #1D4ED8; font-size: 10.5px; font-weight: 800; }
.kspx-title { margin: 6px 0 0; font-size: 17px; font-weight: 800; color: var(--kl-text); line-height: 1.28; }
.kspx-desc { margin: 5px 0 0; font-size: 13px; font-weight: 500; color: var(--kl-text2); line-height: 1.5; }
.kspx-score { min-width: 0; display: flex; flex-direction: column; padding: 12px 14px; border: 1px solid var(--kl-border); border-radius: 12px; background: var(--kl-surface2); }
.kspx-score-head { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.kspx-score-txt { min-width: 0; }
.kspx-score-cap { margin: 5px 0 0; font-size: 11px; font-weight: 600; color: var(--kl-text2); }
/* 5 axes sur DEUX colonnes, répartis sur toute la hauteur de la carte : c'est ce
   qui remplit la colonne de droite au lieu d'y étirer cinq barres solitaires. */
.kspx-bars { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 18px; align-content: space-around; margin-top: 12px; min-height: 88px; }
.kspx-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kspx-act { min-height: 44px; }
.kspx-fmts { display: flex; gap: 6px; margin-left: auto; }
.kspx-inert { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; border-radius: 11px; background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.28); font-size: 13px; font-weight: 700; color: var(--kl-text2); }
.kspx-rowerr { margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: #DC2626; }

.ksp-partial { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: rgba(124,58,237,.06); border: 1px solid rgba(124,58,237,.3); margin-bottom: 16px; }
.ksp-partial-t { flex: 1; min-width: 160px; font-size: 12.5px; font-weight: 600; color: var(--kl-text2); line-height: 1.45; }
.ksp-partial-t strong { color: var(--kl-text); font-weight: 800; }
.ksp-partial-cta { font-size: 12.5px; font-weight: 800; color: #7C3AED; text-decoration: none; white-space: nowrap; }
.ksp-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--kl-text3); flex-shrink: 0; }
.ksp-sortb { height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--kl-border); background: var(--kl-surface); color: var(--kl-text2); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ksp-sortb.on { border: 2px solid #2563EB; background: rgba(37,99,235,.08); color: #1D4ED8; }

/* Une seule teinte NEUTRE pour la jauge et les barres de score : les paliers
   colorés promettaient une viralité invérifiable (et le palier haut était VERT,
   interdit par la charte). L'information vit dans les chiffres, pas la couleur. */
.ksp-tier-flat, .ksp-tier-high, .ksp-tier-strong, .ksp-tier-good, .ksp-tier-fair { color: var(--kl-text); }

.ksp-bar-row { display: flex; align-items: center; gap: 8px; }
.ksp-bar-lab { font-size: 11.5px; font-weight: 700; color: var(--kl-text2); width: 62px; flex-shrink: 0; }
.ksp-bar-track { flex: 1; height: 6px; border-radius: 99px; background: var(--kl-border); overflow: hidden; min-width: 24px; }
.ksp-bar-fill { display: block; height: 100%; background: currentColor; border-radius: 99px; }
.ksp-bar-num { font-size: 11.5px; font-weight: 800; color: var(--kl-text); width: 16px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }

.ksp-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 50px 20px; }
.ksp-empty-ic { margin-bottom: 14px; opacity: .7; }
.ksp-empty-t { margin: 0; font-size: 18px; font-weight: 800; color: var(--kl-text); }
.ksp-empty-b { margin: 8px 0 0; max-width: 380px; font-size: 13.5px; font-weight: 500; color: var(--kl-text2); line-height: 1.5; }

.ksp-gauge { position: relative; flex-shrink: 0; color: currentColor; }
.ksp-gauge-svg { position: absolute; inset: 0; display: flex; }
.ksp-gauge-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: var(--kl-text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.ksp-tier-badge { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 3px 10px; border-radius: 99px; background: var(--kl-surface2); color: var(--kl-text2); font-size: 11.5px; font-weight: 800; }

.ksp-panel-wrap { display: flex; flex-direction: column; height: 100%; }
.ksp-panel-head { padding: 18px 18px 8px; flex-shrink: 0; }
.ksp-panel-title { display: flex; align-items: center; gap: 9px; }
.ksp-panel-ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(37,99,235,.1); display: flex; align-items: center; justify-content: center; }
.ksp-panel-title h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--kl-text); }
.ksp-panel-desc { margin: 10px 0 0; font-size: 13px; font-weight: 500; color: var(--kl-text2); line-height: 1.5; }
.ksp-panel-scroll { flex: 1; overflow-y: auto; padding: 16px 18px; }
.ksp-panel-foot { padding: 14px 18px; border-top: 1px solid var(--kl-border); flex-shrink: 0; }

/* Onglets en tête de volet (Style | Éditer) — même langage que le segmenté : bleu = actif */
.ksp-tabs { display: flex; gap: 6px; padding: 12px 18px 12px; flex-shrink: 0; border-bottom: 1px solid var(--kl-border); }
.ksp-tab { flex: 1; height: 38px; border-radius: 10px; border: 1.5px solid var(--kl-border); background: var(--kl-surface); color: var(--kl-text2); font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.ksp-tab.on { border: 2px solid #2563EB; background: rgba(37,99,235,.06); color: #1D4ED8; }

/* Transcription portée dans le volet : mêmes composants, empilés pour 320 px.
   [▶ 0:12]  [début][fin]        [⧉][🗑]
   [ texte pleine largeur              ] */
.ksp-edit-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ksp-edit-pane .ksp-lines-top { padding: 10px 18px; }
.ksp-lines-pane { padding: 10px 12px; }
.ksp-lines-pane .ksp-line { flex-wrap: wrap; row-gap: 6px; }
.ksp-lines-pane .ksp-line-jump { order: 1; flex-direction: row; align-items: center; gap: 5px; }
.ksp-lines-pane .ksp-line-main { order: 3; flex: none; width: 100%; display: flex; flex-direction: column-reverse; gap: 6px; }
.ksp-lines-pane .ksp-line-times { margin-bottom: 0; }
.ksp-lines-pane .ksp-line-times .ksp-time { flex: 1; width: auto; min-width: 0; height: 26px; }
.ksp-lines-pane .ksp-line-text { width: 100%; box-sizing: border-box; min-height: 34px; }
.ksp-lines-pane .ksp-line-acts { order: 2; flex-direction: row; gap: 8px; margin-left: auto; align-items: center; }

.ksp-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ksp-style { position: relative; padding: 0; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--kl-border); background: var(--kl-surface); cursor: pointer; font-family: inherit; }
.ksp-style.on { border: 2px solid #2563EB; }
.ksp-style-prev { aspect-ratio: 16 / 9; background: linear-gradient(150deg, #1F2632, #0E1116); display: flex; align-items: center; justify-content: center; gap: 2px; padding: 6px; box-sizing: border-box; }
.ksp-style-img { max-width: 100%; max-height: 100%; display: block; object-fit: contain; pointer-events: none; }
.ksp-style-prev b { font-size: 14px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.ksp-style-badge { position: absolute; top: 5px; right: 5px; height: 17px; padding: 0 5px; border-radius: 5px; color: #fff; font-size: 9px; font-weight: 800; display: inline-flex; align-items: center; }
.ksp-style-badge.free { background: rgba(37,99,235,.92); }
.ksp-style-badge.pro { background: rgba(124,58,237,.92); }
.ksp-style-lab { display: block; padding: 7px 4px; font-size: 11.5px; font-weight: 700; color: var(--kl-text); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ksp-style.on .ksp-style-lab { color: #2563EB; }

.ksp-fonts { display: flex; gap: 6px; flex-wrap: wrap; }
.ksp-fontb { height: 36px; padding: 0 12px; border-radius: 9px; border: 1.5px solid var(--kl-border); background: var(--kl-surface); color: var(--kl-text); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ksp-fontb.on { border: 2px solid #2563EB; background: rgba(37,99,235,.06); color: #1D4ED8; }
.ksp-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.ksp-swatch { width: 34px; height: 34px; border-radius: 9px; border: 2px solid var(--kl-borderS); cursor: pointer; padding: 0; position: relative; overflow: hidden; }
.ksp-swatch.on { border: 2px solid #2563EB; box-shadow: 0 0 0 2px rgba(37,99,235,.2); }
.ksp-swatch-custom input { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); opacity: 0; cursor: pointer; }

/* Atelier sous-titres : l'aperçu Remotion est LA scène centrale (grand, hauteur
   pilote + ratio réel, même gabarit que le lecteur) ; la transcription vit dans la
   barre du bas (redimensionnable). */
.ksp-sub-stage { position: relative; height: 100%; width: auto; max-width: min(100%, 920px); background: #000;
  border-radius: 14px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.ksp-sub-stage .ksp-sub-prevmount { position: absolute; inset: 0; }
/* Remotion pose des dimensions inline sur son conteneur : on les force à épouser la
   scène (pattern validé de l'outil standalone). */
.ksp-sub-stage .ksp-sub-prevmount > div { width: 100% !important; height: 100% !important; }
.ksp-sub-prevbadge { position: absolute; top: 10px; left: 10px; height: 24px; padding: 0 9px; border-radius: 7px; background: #2563EB; color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; z-index: 3; pointer-events: none; }
.ksp-sub-tl { height: 100%; display: flex; flex-direction: column; background: var(--kl-surface); }
.ksp-lines-top { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--kl-border); }
.ksp-lines-head { font-size: 13px; font-weight: 800; color: var(--kl-text); }
.ksp-unsaved { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #D97706; }
.ksp-unsaved-dot { width: 7px; height: 7px; border-radius: 50%; background: #D97706; }
/* overflow-x hidden EXPLICITE : avec overflow-y:auto seul, l'axe horizontal devient
   implicitement défilable — au focus clavier mobile, le navigateur y poussait le
   caret et créait un défilement horizontal. */
.ksp-lines { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.ksp-line { display: flex; gap: 10px; padding: 10px; border-radius: 11px; background: var(--kl-surface2); border: 1px solid var(--kl-border); }
.ksp-line-jump { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; border: none; background: transparent; cursor: pointer; padding: 2px 0; color: var(--kl-text2); }
.ksp-line-tc { font-size: 10px; font-weight: 700; color: var(--kl-text2); font-family: monospace; }
.ksp-line-main { flex: 1; min-width: 0; }
.ksp-line-times { display: flex; gap: 6px; margin-bottom: 5px; }
.ksp-time { height: 22px; width: 54px; padding: 0 7px; border-radius: 6px; background: var(--kl-surface); border: 1px solid var(--kl-border); font-size: 11px; font-weight: 700; color: var(--kl-text2); font-family: monospace; }
.ksp-line-text { font-size: 14px; font-weight: 600; color: var(--kl-text); line-height: 1.4; padding: 6px 8px; border-radius: 8px; background: var(--kl-surface); border: 1px solid var(--kl-border); overflow-wrap: anywhere; white-space: pre-wrap; max-width: 100%; }
.ksp-line-text:focus { outline: none; border-color: #2563EB; }
.ksp-line-acts { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.ksp-line-act { border: none; background: transparent; color: var(--kl-text2); cursor: pointer; padding: 0; display: flex; }
.ksp-lines-foot { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--kl-border); }
.ksp-flex1 { flex: 1; }

/* Téléphone : le lecteur RESTE à gauche, en 132 px. Un lecteur 9:16 centré à sa
   taille maximale (46 dvh ≈ 388 px de haut, soit 218 px de large) laisserait deux
   bandes blanches de 86 px sur toute sa hauteur — le défaut même qu'on corrige.
   Les critères et les actions passent SOUS les deux colonnes, en pleine largeur.
   Pour voir grand : le plein écran natif du lecteur. */
@media (max-width: 860px) {
  /* Barre d'écran compacte : le libellé des deux boutons disparaît (l'icône +
     aria-label suffisent), les tris passent sur leur propre ligne. */
  .kspx-bar { padding: 10px 12px; gap: 8px; }
  .kspx-h2 { font-size: 17px; }
  .kspx-sub { display: none; }
  .kspx-lab { display: none; }
  .kspx-back, .kspx-zip { width: 44px; padding: 0; flex-shrink: 0; }
  /* Tris sur leur propre ligne, en défilement horizontal interne : sans nowrap,
     « Ordre chronologique » passe sur deux lignes et la barre double de hauteur. */
  .kspx-sorts { order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kspx-sorts .ksp-sortb { flex: 0 0 auto; padding: 0 12px; font-size: 12.5px; white-space: nowrap; }
  .kspx-scroll { padding: 12px 12px 20px; }
  /* Le lecteur reste à GAUCHE, à hauteur de l'en-tête ; la carte de score et les
     actions passent en PLEINE LARGEUR dessous — c'est ce qui supprime la bande
     blanche sous le lecteur (la colonne de droite était deux fois plus haute). */
  /* TÉLÉPHONE : tout s'EMPILE (décision du propriétaire, 21/07). Le lecteur en
     colonne de 138 px supprimait les vides mais écrasait la vidéo — l'objet
     qu'on est venu regarder. Pleine largeur en haut, plafonné comme le lecteur
     du studio (46dvh) ; dessous le titre et la raison, la carte de score, puis
     les actions. L'ordre du document fait la mise en page : pas de grille. */
  .kspx-row { display: flex; flex-direction: column; row-gap: 10px; padding: 12px; }
  .kspx-row > .kspx-media { width: 100%; min-height: 0; height: 42dvh; max-height: 46dvh; }
  .kspx-play { width: 54px; height: 54px; }
  .kspx-play svg { width: 22px; height: 22px; }
  .kspx-title { font-size: 15px; }
  /* 6 lignes : la colonne de texte doit rester AUSSI HAUTE que le lecteur (138 px
     de large en 9:16 = 245 px de haut). Trop courte, elle rouvre une bande vide à
     côté du lecteur ; trop longue, elle en rouvre une dessous. */
  .kspx-desc { margin-top: 4px; font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
  .kspx-score { padding: 10px; }
  .kspx-score-head { gap: 9px; }
  .kspx-acts .kspx-act { flex: 1 1 100%; }
  .kspx-fmts { margin-left: 0; width: 100%; }
  .kspx-fmts .ksp-sortb { flex: 1; }
  .kspx-inert { width: 100%; justify-content: center; }
  /* Une seule colonne : la carte de score est ici à côté du lecteur (~200 px). */
  .kspx-bars { grid-template-columns: minmax(0, 1fr); gap: 6px; min-height: 0; align-content: start; }
  .ksp-bar-lab { width: 54px; font-size: 11px; }

  /* Feuille mobile compacte (uniformité avec les panneaux standard) : en-tête réduit
     sans paragraphe, onglets et pied resserrés, notes de pied masquées — l'espace va
     au contenu que l'utilisateur manipule, pas au chrome. */
  .ksp-panel-head { padding: 2px 6px 6px; }
  .ksp-panel-ic { width: 26px; height: 26px; border-radius: 8px; }
  .ksp-panel-title h3 { font-size: 16px; }
  .ksp-panel-desc { display: none; }
  .ksp-tabs { padding: 6px 6px 8px; border-bottom: none; }
  .ksp-tab { height: 34px; font-size: 13px; }
  .ksp-panel-scroll { padding: 10px 6px; }
  .ksp-panel-foot { padding: 8px 6px 2px; }
  .ksp-panel-foot .ksp-note:not(.ksp-note-keep) { display: none; }
  .ksp-btn-full { height: 44px; padding-top: 0; padding-bottom: 0; }
  .ksp-edit-pane .ksp-lines-top { padding: 8px 6px; }
  .ksp-lines-pane { padding: 8px 4px; }
  /* ≥16px sur les champs ÉDITABLES : sous 16px, iOS/Android ZOOMENT la page au
     focus (c'était le « zoom instantané » qui faisait déborder les bords) */
  .ksp-line-text { font-size: 16px; }
  .ksp-time { font-size: 16px; height: 30px; }
  .ksp-field { font-size: 16px; }
}

/* ── Projets Clips IA ──────────────────────────────────────────────────────────
   Liste à part des projets de montage : on y revient pour retrouver SES extraits,
   pas une version de la vidéo. Une ligne = un projet, sa vignette et son nombre
   d'extraits ; le projet ouvert est marqué par un mot, pas par la seule couleur. */
.kspx-projects { display: flex; flex-direction: column; gap: 10px; }
.kspx-proj { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 12px 14px; border: 1px solid var(--kl-border); border-radius: 14px; background: var(--kl-surface); cursor: pointer; font-family: inherit; text-align: left; }
.kspx-proj.on { border: 2px solid #2563EB; background: rgba(37,99,235,.06); }
.kspx-proj-th { width: 92px; height: 52px; flex-shrink: 0; border-radius: 9px; object-fit: cover; background: var(--kl-stage); }
.kspx-proj-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kspx-proj-name { font-size: 14.5px; font-weight: 800; color: var(--kl-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kspx-proj-meta { font-size: 12.5px; font-weight: 600; color: var(--kl-text2); }