/* Le studio de montage (public/studio/) : ses styles, sortis de style.css le 31/10 (David, 31/10 : « exploiter le
   logiciel de montage en standalone… studio.dacodec.com »). Chargé après style.css, qui garde les bases communes
   (couleurs, boutons, champs, fenêtres, messages). */

.ecoute .rec { color: #c62828; font-weight: 700; }
.ecoute .rec.en-rec { background: #c62828; color: #fff; }
.barre-rec { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 10px;
  background: #c62828; color: #fff; padding: 8px 10px 8px 14px; border-radius: 999px; font: 700 var(--t-s)/1 var(--f-titre); letter-spacing: .04em; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.barre-rec i { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: clignote 1s infinite; }
.barre-rec .btn { background: #fff; color: #c62828; border: 0; }
.barre-rec input { width: min(260px, 40vw); border: 0; border-radius: 999px; padding: 5px 10px; font: 600 var(--t-s)/1.2 var(--f-texte); color: #222; background: rgba(255,255,255,.92); }

/* 🎙 Studio : grand écran, un son à la fois, lecteurs pleine largeur et gros boutons d'enregistrement. */
.fenetre-studio > div { width: min(1100px, 100%); height: min(860px, 92vh); max-height: 92vh; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.studio-haut { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.studio-liste { margin: 0; padding: 0 4px 0 0; list-style: none; overflow: auto; counter-reset: son; border-right: 1px solid var(--trait); }
.studio-liste li { counter-increment: son; }
.studio-liste button { width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 8px 10px; font: inherit; font-size: var(--t-s); cursor: pointer; color: var(--encre); display: flex; gap: 8px; }
.studio-liste button::before { content: counter(son) "."; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.studio-liste button:hover { background: var(--accent-doux); }
.studio-liste button[aria-current="true"] { background: var(--accent); color: var(--accent-encre); }
.studio-liste button[aria-current="true"]::before { color: inherit; }
.studio-son { overflow: auto; display: grid; gap: 12px; align-content: start; padding-right: 4px; }
.studio-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.studio-tete h3 { margin: 0; font: 700 1.25rem/1.2 var(--f-titre); }
.studio-extrait { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); }
.studio-extrait img, .studio-pochette { width: 88px; height: 88px; border-radius: 6px; object-fit: cover; display: grid; place-items: center; background: var(--accent-doux); font-size: 2rem; }
.studio-infos { display: grid; gap: 4px; min-width: 0; }
.studio-infos b { font-size: 1.05rem; }
.studio-infos audio, .studio-infos video { width: 100%; margin-top: 6px; }
.studio-infos audio { height: 44px; }
.studio-infos video { max-height: 220px; border-radius: 6px; background: #000; }
.studio-actions { display: grid; gap: 8px; justify-items: stretch; min-width: 150px; }
.studio .rec { color: #c62828; font-weight: 700; }
.studio .st-export.en-rec { animation: son-pulse 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .studio .st-export.en-rec { animation: none; } }
.studio .studio-chercher { display: flex; gap: 8px; }
.studio .studio-chercher input { flex: 1; min-width: 0; }
@media (max-width: 1000px) {
  .studio-extrait { grid-template-columns: 64px minmax(0, 1fr); }
  .studio-extrait img, .studio-pochette { width: 64px; height: 64px; }
  .studio-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr auto; align-items: center; } }
@media (max-width: 700px) {
  .studio-liste { border-right: 0; border-bottom: 1px solid var(--trait); max-height: 140px; } }

/* YouTube dans le studio : la vidéo en 16:9, les autres vidéos trouvées en puces au-dessus. */
.studio-yt { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--trait); border-radius: 10px; }
.studio-yt-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.studio-yt-choix .puce { border: 1px solid var(--trait); background: var(--surface); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: var(--t-xs); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-yt-choix .puce[aria-current="true"] { background: var(--accent); color: var(--accent-encre); border-color: var(--accent); }
.studio-yt-cadre { aspect-ratio: 16 / 9; width: 100%; max-height: 380px; background: #000; border-radius: 8px; overflow: hidden; display: grid; place-items: center; }
.studio-yt-cadre iframe { width: 100%; height: 100%; border: 0; }
.studio-yt-cadre .wa, .studio-yt-cadre .erreur, .studio-yt-cadre .attente { color: #fff; padding: 12px; }
.studio-yt-cadre .erreur { color: inherit; }
/* Console du studio (David, 28/10 : « organiser plus pro, hiérarchisé ») : trois rangées nommées, Repères / Export /
   Source, alignées sur une colonne d'étiquettes. */
.st-console { display: grid; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); overflow: hidden; }
.st-rangee { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 12px; }
/* Une rangée enlevée (💬 sur les sous-titres) part vraiment : sans ça, son « display: grid » la laissait vide à l'écran. */
.st-rangee[hidden] { display: none; }
.st-rangee + .st-rangee { border-top: 1px solid var(--trait); }
.st-rangee-nom { font: 700 var(--t-xs)/1.2 var(--f-titre); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); }
.studio-yt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: var(--t-s); }
.studio-yt-actions .st-etat { flex-basis: 100%; min-height: 0; }
.studio-yt-actions .st-etat:empty { display: none; }
.studio-sous-titre { margin: 6px 0 0; font: 700 var(--t-xs)/1.3 var(--f-titre); text-transform: uppercase; letter-spacing: .04em; color: var(--encre-2); }

/* Studio : plage IN / OUT (deux curseurs sur une même piste), position de lecture, réglages en bas. */
.studio-seul { grid-template-columns: minmax(0, 1fr); }
.st-plage { position: relative; height: 34px; }
/* Poignées fines (David, 28/10 : « trop épais, ça masque la position ») : 10 px de large, un trait au milieu marque
   la position exacte ; la piste et la courbe de volume sont en retrait d'une demi-poignée (5 px) pour rester alignées. */
.st-piste { position: absolute; left: 5px; right: 5px; top: 13px; height: 8px; border-radius: 4px; background: var(--trait); }
.st-segment { position: absolute; top: 0; bottom: 0; left: var(--de); width: calc(var(--a) - var(--de)); background: var(--accent); border-radius: 4px; }
.st-tete { position: absolute; top: -6px; bottom: -6px; left: var(--pos); width: 2px; background: #c62828; }
.st-plage input[type=range] { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.st-plage input[type=range]::-webkit-slider-runnable-track { background: none; }
.st-plage input[type=range]::-moz-range-track { background: none; }
.st-plage input[type=range]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 10px; height: 28px; border-radius: 4px; background: linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat, var(--surface); border: 1.5px solid var(--accent); cursor: ew-resize; }
.st-plage input[type=range]::-moz-range-thumb { pointer-events: auto; width: 10px; height: 28px; border-radius: 4px; background: linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat, var(--surface); border: 1.5px solid var(--accent); cursor: ew-resize; box-sizing: border-box; }
.st-plage input[name="out"]::-webkit-slider-thumb { border-color: #c62828; background: linear-gradient(#c62828, #c62828) center / 2px 100% no-repeat, var(--surface); }
.st-plage input[name="out"]::-moz-range-thumb { border-color: #c62828; background: linear-gradient(#c62828, #c62828) center / 2px 100% no-repeat, var(--surface); }
/* Courbe de volume à la Ableton (David, 28/10) : une piste sous la plage, points glissables. */
.st-volume { position: relative; margin: 2px 4px 4px; border: 1px solid var(--trait); border-radius: 6px; background: var(--fond); }
.st-volume .st-zoom-boutons { position: absolute; right: 4px; bottom: 2px; }
.st-vol-info { padding: 0 6px 4px; }
.st-volume .st-zoom { padding: 1px 6px; font-size: var(--t-xs); }
.st-courbe .st-hors { fill: var(--encre-2); opacity: .08; }
.st-courbe .st-curseur { stroke: #c62828; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.st-plage input[type=range].hors-fenetre { visibility: hidden; }
.st-plage.sans-plage .st-segment { display: none; }
.st-courbe { display: block; width: 100%; height: 112px; cursor: text; touch-action: none; overflow: visible; }
.st-courbe .st-aire, .st-courbe .st-hors { cursor: pointer; }
.st-courbe .st-zero { stroke: var(--trait); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 4; }
.st-courbe .st-grille { stroke: var(--trait); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .55; }
.st-courbe .st-aire { fill: var(--accent); opacity: .12; }
.st-courbe .st-ligne { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.st-courbe .st-prise { fill: none; stroke: transparent; stroke-width: 14; vector-effect: non-scaling-stroke; cursor: ns-resize; pointer-events: stroke; }
.st-courbe .st-pt { fill: var(--surface); stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: grab; }
.st-courbe .st-pt.actif { fill: var(--accent); }
.st-courbe .st-db { font: 10px var(--f-texte); fill: var(--encre-2); pointer-events: none; }
.st-vol-info { display: block; font-size: var(--t-xs); margin-top: 2px; }
.st-points { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; font-size: var(--t-s); }
.st-point { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.st-point .btn-discret { padding: 2px 6px; font-variant-numeric: tabular-nums; }
.st-point .chiffre { font-size: 1.05rem; font-weight: 700; min-width: 4.2em; text-align: center; }
.st-milieu { text-align: center; }
.studio-yt-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: var(--t-s); color: var(--encre-2); }
.studio-yt-liens .studio-chercher input { font-size: var(--t-s); }
.studio-yt-liens .studio-chercher { flex: 1 1 240px; }
.studio-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: var(--t-s); }
.fenetre-studio > div { grid-template-rows: auto auto minmax(0, 1fr) auto; }

/* 3e point « voix » : poignée orange ; de là au OUT, la piste est hachurée (voix supprimée) ou pointillée (voix seule). */
.st-plage input[name="voix"], .st-plage input[name="voixfin"] { display: none; }
.st-plage.avec-voix input[name="voix"], .st-plage.avec-voix input[name="voixfin"] { display: block; }
.st-plage input[name="voixfin"]::-webkit-slider-thumb { border-color: #e08a00; background: linear-gradient(#e08a00, #e08a00) center / 2px 100% no-repeat, #fff4e0; border-style: dashed; }
.st-plage input[name="voixfin"]::-moz-range-thumb { border-color: #e08a00; background: linear-gradient(#e08a00, #e08a00) center / 2px 100% no-repeat, #fff4e0; border-style: dashed; }
.st-plage input[name="voix"]::-webkit-slider-thumb { border-color: #e08a00; background: linear-gradient(#e08a00, #e08a00) center / 2px 100% no-repeat, #fff4e0; }
.st-plage input[name="voix"]::-moz-range-thumb { border-color: #e08a00; background: linear-gradient(#e08a00, #e08a00) center / 2px 100% no-repeat, #fff4e0; }
.st-zone-voix { display: none; position: absolute; top: 0; bottom: 0; left: var(--v); width: calc(var(--vf, var(--a)) - var(--v)); border-radius: 0 4px 4px 0;
  background: repeating-linear-gradient(45deg, #e08a00 0 4px, transparent 4px 8px); }
.st-plage.avec-voix .st-zone-voix { display: block; }
.st-plage.avec-voix.voix-seule .st-zone-voix { background: repeating-linear-gradient(90deg, #e08a00 0 2px, transparent 2px 5px); }
/* « Tout l'audio » : le filtre est contourné, sa zone reste en gris (elle revient avec Voix ou Instru). */
.st-plage.zone-gardee input[name="voix"], .st-plage.zone-gardee input[name="voixfin"] { display: block; opacity: .55; }
.st-plage.zone-gardee .st-zone-voix { display: block; opacity: .45; background: repeating-linear-gradient(45deg, var(--encre-2) 0 2px, transparent 2px 8px); }
.st-courbe .st-epingle.contourne { opacity: .4; }
.st-courbe .st-epingle.contourne line { stroke: var(--encre-2); }
.st-voix { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--t-s); }
.st-voix-point { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.st-voix-point .btn-discret { padding: 2px 6px; }
.st-voix-t { font-weight: 700; color: #b36b00; min-width: 4.2em; text-align: center; }
.studio-yt-cadre .wa a { color: #fff; text-decoration: underline; }

/* IN · VOIX · OUT sur une seule ligne : trois pastilles (nom, temps, ‹ › pour affiner, 📌), la position à droite. */
.st-points { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; justify-content: flex-start; }
.st-point { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border: 1px solid var(--trait); border-radius: 999px; background: var(--surface); }
/* Les repères encadrés comme les boutons de l'EXPORT (David, 30/10 : « mets un peu de cohérence, change les
   encadrements des in et out pour qu'ils soient comme les cadres comme mp3 ou wav ») : même arrondi, même hauteur. */
.studio-yt .st-point { box-sizing: border-box; min-height: 36px; border-radius: var(--r); padding: 2px 3px 2px 10px; }
.studio-yt .st-point .btn:not(.btn-discret) { border-radius: calc(var(--r) - 3px); }
.studio-yt .st-points .st-traitement { border-radius: var(--r); height: 36px; }
.st-point b { font: 700 var(--t-xs)/1 var(--f-titre); letter-spacing: .06em; color: var(--encre-2); margin-right: 4px; }
.st-point .chiffre { font-size: 1.05rem; font-weight: 700; min-width: 3.6em; text-align: center; }
.st-point .btn-discret { padding: 2px 8px; font-size: 1.1rem; line-height: 1; }
.st-point .btn:not(.btn-discret) { padding: 3px 10px; border-radius: 999px; }
.st-p-in { border-color: var(--accent); }
.st-p-out { border-color: #c62828; }
.st-p-voix { border-color: #e08a00; }
.st-p-voix .chiffre { color: #b36b00; }
.st-milieu { margin-left: auto; white-space: nowrap; }
.st-voix { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-s); }
.st-fond { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-s); }
.st-fond[hidden] { display: none; }
.st-point[hidden] { display: none; }

/* Bouton rotatif de compression : piste sur 270°, la dose en couleur, une aiguille. */
.reglage-compression { display: inline-flex; align-items: center; gap: 8px; }
.bouton-rotatif { width: 46px; height: 46px; display: inline-block; cursor: ns-resize; touch-action: none; border-radius: 50%; }
.bouton-rotatif:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bouton-rotatif svg { width: 100%; height: 100%; display: block; }
.bouton-rotatif .piste-bouton { fill: none; stroke: var(--trait); stroke-width: 4; stroke-linecap: round; }
.bouton-rotatif .valeur-bouton { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.bouton-rotatif .tete-bouton { fill: var(--surface); stroke: var(--encre-2); stroke-width: 1.5; }
.bouton-rotatif .aiguille-bouton { stroke: var(--encre); stroke-width: 2.5; stroke-linecap: round; }
.bouton-valeur { min-width: 7.5em; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Studio : tout tient dans la fenêtre (David, 26/10 : « rien ne doit être coupé »). La vidéo prend la place qui reste,
   les réglages restent visibles dessous ; l'aide est repliée, les vidéos proposées tiennent sur une ligne. */
.fenetre-studio { padding: 10px; }
.fenetre-studio > div { width: min(1240px, 100%); height: min(940px, calc(100vh - 20px)); max-height: none; overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; padding: 14px 18px; }
.studio-haut { align-items: center; }
.studio-aide { margin-left: auto; font-size: var(--t-s); position: relative; }
.studio-aide summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.studio-aide[open] p { position: absolute; right: 0; top: 1.8em; z-index: 2; width: min(620px, 80vw); margin: 0; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--trait); border-radius: 8px; box-shadow: var(--ombre); }
.studio-liste { min-height: 0; }
.studio-son { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; padding-right: 0; }
.studio-tete { flex: none; }
.studio-tete h3 { font-size: 1.1rem; }
.studio-yt { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.studio-yt > * { flex: none; }
.studio-yt-choix { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.studio-yt-choix .puce { flex: none; max-width: 340px; }
.studio-yt-cadre { flex: 1 1 auto; aspect-ratio: auto; max-height: none; min-height: 140px; width: 100%; }
.studio-yt-cadre iframe { width: 100%; height: 100%; }
.studio-yt-actions { gap: 8px 12px; }
.studio-yt-liens { gap: 6px 12px; }
.studio-bas { flex-wrap: wrap; row-gap: 6px; }
.studio-bas .reglage-compression .bouton-rotatif { width: 40px; height: 40px; }
@media (max-width: 700px) {
  .st-rangee { grid-template-columns: 1fr; gap: 4px; padding: 6px 8px; }
  .fenetre-studio > div { height: calc(100vh - 20px); padding: 10px; }
  .studio-liste { max-height: 90px; } }

/* Studio : cliquer ou glisser sur la piste déplace la lecture ; au survol, l'heure sous la souris. */
.st-plage { cursor: pointer; touch-action: none; }
.st-plage .st-tete { width: 3px; margin-left: -1.5px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(255 255 255 / 70%); pointer-events: none; } /* centré sur l'instant, comme ceux de l'onde et des FX (David, 30/10 : « ce petit décalage sur les petites barres rouges ») */
.st-plage .st-tete::before { content: ''; position: absolute; top: -5px; left: -4px; border: 5.5px solid transparent; border-top-color: #c62828; border-bottom: 0; }
.st-survol { position: absolute; bottom: 16px; left: var(--survol, 0%); transform: translateX(-50%);
  padding: 1px 6px; border-radius: 4px; background: var(--encre); color: var(--surface); font-size: var(--t-xs); pointer-events: none;
  opacity: 0; transition: opacity .1s; white-space: nowrap; }
.st-plage:hover .st-survol, .st-plage.glisse .st-survol { opacity: 1; }

/* Studio : nom du MP3 modifiable, lecteur d'un fichier audio. */
.st-nom { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 260px; font-size: var(--t-s); margin-left: auto; }
.st-nom input { flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid var(--trait); border-radius: 6px; background: var(--surface); color: var(--encre); font: inherit; }
.st-nom .wa { margin-left: -4px; }
.st-fichier { cursor: pointer; }
.st-fichier-lecteur { display: grid; gap: 10px; align-content: center; height: 100%; padding: 16px; }
.st-fichier-lecteur audio { width: 100%; }
/* Fichier vidéo : l'image dans le cadre (verticale ou horizontale), sans déborder. */
.st-fichier-lecteur.video { display: flex; flex-direction: column; gap: 6px; width: 100%; height: 100%; box-sizing: border-box; padding: 8px 12px; }
.st-fichier-lecteur video { flex: 1 1 0; min-height: 0; width: 100%; object-fit: contain; background: #000; }
/* Dossier de sortie des MP3 (Chrome, Edge) */
.st-dossier { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-s); }
.st-dossier[hidden] { display: none; }
.st-dossier small { color: var(--encre-2); }

/* Rangée Export du studio de montage (David, 28/10 : « tous les rectangles des boutons play, rec et des filtres de la
   même hauteur et du même style ») : Play, EXPORT, Filtre, Fond et Nom du MP3 sont des cases de 36 px, même bord,
   même arrondi, même texte ; seule la couleur distingue Play (violet) et EXPORT (rouge). */
.studio-yt .st-ctl { box-sizing: border-box; height: 36px; display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px;
  margin: 0; padding: 0 12px; border: 1px solid var(--trait); border-radius: var(--r); background: var(--surface); color: var(--encre);
  font-size: var(--t-s); font-weight: 700; line-height: 1; white-space: nowrap; }
.studio-yt label.st-ctl { font-weight: 600; color: var(--encre-2); padding-right: 4px; }
.studio-yt label.st-ctl[hidden] { display: none; }
.studio-yt .st-ctl select, .studio-yt .st-ctl input { height: 100%; margin: 0; padding: 0 4px; border: 0; border-radius: 0;
  background: transparent; color: var(--encre); font-size: var(--t-s); font-weight: 700; outline-offset: -2px; }
.studio-yt .st-ctl select { cursor: pointer; }
.studio-yt label.st-ctl:hover { border-color: var(--encre-2); }
.studio-yt-actions .st-nom { flex: 1 1 220px; margin-left: auto; }
.studio-yt-actions .st-nom input { flex: 1; min-width: 0; width: 80px; } /* pas de largeur imposée : il grandit avec la case */
.studio-yt-actions .st-nom .wa { margin-left: -4px; font-weight: 400; }
.studio-yt-actions .st-nom .btn-discret { padding: 4px 6px; }
.studio-yt .st-play { min-width: 104px; justify-content: center; }
.studio-yt-actions .st-export { min-width: 84px; justify-content: center; }
.studio-yt .st-play { border-color: var(--accent); color: var(--accent); }
.studio-yt .st-play:hover:not([disabled]) { border-color: var(--accent); background: var(--accent-doux); }
.studio-yt .st-play.en-lecture, .studio-yt .st-play.en-lecture:hover:not([disabled]) { background: var(--accent); color: var(--accent-encre); }
.studio-yt-actions .st-export { border-color: #c62828; color: #c62828; letter-spacing: .04em; }
.studio-yt-actions .st-export:hover:not([disabled]) { border-color: #c62828; background: color-mix(in srgb, #c62828 10%, var(--surface)); }
.studio-yt-actions .st-export.en-rec { background: #c62828; color: #fff; }
/* Vu-mètre LED : une case comme les autres, même fond (David, 28/10 : « sur fond noir, c'est moche »). */
.studio-yt .st-vu { padding: 0 6px 0 4px; cursor: pointer; }
.studio-yt .st-vu:hover { border-color: var(--encre-2); }
.studio-yt .st-vu canvas { display: block; width: 176px; height: 24px; }

/* Rien de mangé en bas du studio de montage (David, 28/10) : la vidéo rétrécit jusqu'à 110 px, puis le panneau défile
   au lieu de couper la rangée Source ; l'état de l'EXPORT tient sur la ligne du nom quand il y a la place ; la rangée
   Source tient sur une ligne. Fenêtre basse : courbe et rangées plus serrées. */
.studio-son { overflow-x: hidden; overflow-y: auto; }
.studio-yt { flex: 1 0 auto; }
.studio-yt-cadre { min-height: 110px; position: relative; }
.studio-yt-cadre > iframe { position: absolute; inset: 0; }
/* Lecteur intégré de Facebook : centré dans le cadre (un reel vertical tient sur la hauteur). */
.studio-yt-cadre > .st-facebook { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.st-facebook .fb-video, .st-facebook .fb-video > span { max-width: 100%; max-height: 100%; }
.studio-yt-actions .st-etat { flex: 0 1 auto; min-width: 0; } /* sur la ligne du nom s'il y a la place, sinon en dessous */
.studio-yt-liens .studio-chercher { flex: 1 1 170px; }
.studio-yt-liens [data-action="copier-texte"] { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
@media (max-height: 860px) {
  .st-courbe { height: 88px; }
  .st-rangee { padding-top: 6px; padding-bottom: 6px; }
  .studio-yt { gap: 6px; padding: 8px 10px; }
  .studio-son { gap: 6px; } }
@media (max-height: 760px) {
  /* Fenêtre basse : la légende du volume passe dans la courbe, la vidéo peut descendre à 90 px. */
  .st-volume .st-vol-info { position: absolute; left: 56px; bottom: 3px; pointer-events: none; opacity: .85; }
  .st-courbe { height: 76px; }
  .studio-yt-cadre { min-height: 90px; } }
/* Filtre et Fond dans la même case (David, 28/10 : « ça va ensemble ces 2 trucs ») : ils ne se séparent jamais. */
.st-traitement { padding: 0 4px 0 12px; gap: 0; }
.st-traitement label { display: inline-flex; align-items: center; gap: 4px; height: 100%; font-weight: 600; color: var(--encre-2); }
.st-traitement label[hidden] { display: none; }
.st-traitement .st-fond { margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--trait); }
.st-traitement:hover { border-color: var(--encre-2); }
@media (max-width: 1240px) {
  .st-rangee { grid-template-columns: 62px minmax(0, 1fr); padding-left: 10px; padding-right: 10px; }
  .st-point { padding-left: 8px; }
  .st-point .chiffre { min-width: 3.3em; }
  .studio-yt-actions { gap: 8px 10px; }
  .st-point .btn-discret { padding: 2px 5px; }
  .st-point .btn:not(.btn-discret) { padding: 3px 8px; } }
@media (max-height: 700px) {
  .studio-son { gap: 4px; }
  .studio-yt { gap: 4px; padding: 6px 8px; }
  .fenetre-studio > div { gap: 6px; padding-top: 10px; padding-bottom: 10px; } }

/* Dossiers d'export gardés (David, 28/10) : un clic choisit où part le prochain MP3 ; ✕ le retire de la liste. */
.st-dossier { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--t-s); }
.st-dossier[hidden] { display: none; }
.st-dest { display: inline-block; height: 28px; line-height: 26px; padding: 0 10px; border: 1px solid var(--trait); border-radius: 999px; background: var(--surface);
  color: var(--encre-2); font: inherit; font-size: var(--t-s); font-weight: 600; cursor: pointer; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.st-dest:hover { border-color: var(--encre-2); color: var(--encre); }
.st-dest.actif { border-color: var(--accent); background: var(--accent-doux); color: var(--accent); }
.st-dest small { font-weight: 400; }
.st-dest-groupe { display: inline-flex; align-items: center; }
.st-dest-groupe .st-dest { border-radius: 999px 0 0 999px; padding-right: 8px; }
.st-dest-x { height: 28px; padding: 0 9px 0 6px; border: 1px solid var(--trait); border-left: 0; border-radius: 0 999px 999px 0; background: var(--surface);
  color: var(--encre-2); font-size: var(--t-xs); cursor: pointer; }
.st-dest.actif + .st-dest-x { border-color: var(--accent); background: var(--accent-doux); }
.st-dest-x:hover { color: #c62828; }
.st-dest-ajouter { padding: 4px 8px; }

/* Glisser-déposer un fichier dans le studio de montage (David, 28/10) : le cadre de la vidéo dit où lâcher ; la vidéo
   YouTube ne capte plus la souris pendant le glissé. */
.fenetre-studio.depot iframe, .fenetre-studio.depot video, .fenetre-studio.depot audio { pointer-events: none; }
.fenetre-studio.depot .studio-yt-cadre::after {
  content: "Lâche ici ton fichier, ton titre Spotify ou ton lien YouTube"; position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 12px; text-align: center;
  background: color-mix(in srgb, var(--accent) 55%, transparent); color: #fff; font: 700 1.15rem/1.3 var(--f-titre);
  border: 3px dashed rgb(255 255 255 / 85%); border-radius: 8px; pointer-events: none; }
.fenetre-studio.depot.depot-cadre .studio-yt-cadre::after { background: color-mix(in srgb, var(--accent) 82%, transparent); border-style: solid; }
/* Habillage du studio (David, 29/10 : « tout sur une seule timeline ») : la piste des jingles sous la courbe de volume,
   même axe, mêmes retraits de 5 px (marge 4 px + bord 1 px) : alignée au pixel avec la plage et la courbe. */
.st-jingles { --jg: var(--c-fx, #13897f); --jg-piste: var(--c-fx-piste, var(--jg)); display: grid; gap: 3px; margin: 0 4px 2px; min-width: 0; border-radius: 6px; }
.st-jingles.hb-depot .hb-cadre { outline: 2px dashed var(--jg); outline-offset: 1px; }
.hb-cadre { border: 1px solid var(--trait); border-radius: 6px; background: var(--fond); overflow: hidden; }
.hb-piste { display: block; width: 100%; height: 108px; touch-action: none; user-select: none; }
.hb-piste .hb-voie { fill: color-mix(in srgb, var(--jg-piste) var(--dose-fx, 4%), transparent); }
.hb-piste .hb-voie-cachee { fill: color-mix(in srgb, var(--encre-2) 10%, transparent); }
.hb-piste:focus { outline: none; }
.hb-cadre:has(.hb-piste:focus-visible) { border-color: var(--jg); }
.hb-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--t-xs); }
.hb-biblio { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.hb-outils .hb-ajout { padding: 2px 8px; font-size: var(--t-xs); }
.hb-outils .hb-info { margin-left: auto; }
.hb-puce { display: inline-flex; align-items: stretch; border: 1px solid color-mix(in srgb, var(--jg) 45%, var(--trait)); border-radius: 999px; background: color-mix(in srgb, var(--jg) 9%, var(--surface)); overflow: hidden; max-width: 220px; }
.hb-puce.en-piste { background: color-mix(in srgb, var(--jg) 22%, var(--surface)); }
.hb-puce button { border: 0; background: none; font: 600 var(--t-xs)/1.2 var(--f-texte); color: inherit; padding: 3px 4px 3px 10px; cursor: grab; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-puce .hb-puce-x { padding: 3px 8px 3px 4px; cursor: pointer; opacity: .55; }
.hb-puce .hb-puce-x:hover { opacity: 1; }
.hb-piste .hb-element { fill: color-mix(in srgb, var(--accent) 9%, transparent); pointer-events: none; }
.hb-piste .hb-bord { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; pointer-events: none; }
.hb-piste .hb-vide { font: 11px var(--f-texte); fill: var(--encre-2); pointer-events: none; }
.hb-piste .hb-bloc { fill: color-mix(in srgb, var(--jg) 18%, var(--surface)); stroke: var(--jg); stroke-width: 1.5; cursor: grab; }
.hb-piste .hb-jingle.sel .hb-bloc { stroke-width: 2.5; fill: color-mix(in srgb, var(--jg) 26%, var(--surface)); }
.hb-piste .hb-onde { fill: var(--jg); opacity: .55; pointer-events: none; }
.hb-piste .hb-vol { fill: none; stroke: #e0a100; stroke-width: 1.8; pointer-events: none; }
.hb-piste .hb-pt { fill: var(--surface); stroke: #e0a100; stroke-width: 2; cursor: grab; }
.hb-piste .hb-pt.actif { fill: #e0a100; }
.hb-piste .hb-nom { font: 700 10.5px var(--f-texte); fill: var(--encre); pointer-events: none; }
.hb-piste .hb-suppr { cursor: pointer; }
.hb-piste .hb-suppr circle { fill: var(--surface); stroke: var(--jg); stroke-width: 1.5; }
.hb-piste .hb-suppr path { stroke: var(--encre); stroke-width: 1.6; stroke-linecap: round; }
.hb-piste .hb-suppr:hover circle { fill: color-mix(in srgb, #c62828 18%, var(--surface)); stroke: #c62828; }
.hb-piste .hb-tete { stroke: #c62828; stroke-width: 2; pointer-events: none; }
.hb-info { font-size: var(--t-xs); }
/* Avant le début du son et après sa fin (des jingles y dépassent) : hachuré sur la plage. */
.st-hors-avant, .st-hors-apres { position: absolute; top: -4px; bottom: -4px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--encre-2) 30%, transparent) 0 3px, transparent 3px 7px); pointer-events: none; border-radius: 3px; }
.st-hors-avant { left: 0; width: max(0%, var(--zero, 0%)); }
.st-hors-apres { left: min(100%, var(--fin, 100%)); right: 0; }
@media (max-height: 860px) { .hb-piste { height: 96px; } }
@media (max-height: 760px) { .hb-piste { height: 84px; } }
/* Forme d'onde de l'élément, derrière la courbe de volume (David, 29/10). */
:is(.st-courbe, .st-onde-calque) .st-onde { fill: var(--encre-2); opacity: .32; pointer-events: none; }
/* Poignées des bords (David, 29/10 : « comme Ableton ») : début et fin de lecture des jingles ; IN et OUT de l'élément sur sa forme d'onde. */
.hb-piste .hb-poignee { fill: var(--jg); opacity: 0; cursor: ew-resize; }
.hb-piste .hb-jingle:hover .hb-poignee, .hb-piste .hb-jingle.sel .hb-poignee { opacity: .55; }
.hb-piste .hb-poignee:hover, .hb-piste .hb-poignee.coupee { opacity: .9 !important; }
.st-courbe .st-bord line { stroke: var(--accent); stroke-width: 1.5; pointer-events: none; }
.st-courbe .st-bord-out line { stroke: #c62828; }
.st-courbe .st-bord-onglet { fill: var(--accent); pointer-events: none; }
.st-courbe .st-bord-out .st-bord-onglet { fill: #c62828; }
.st-courbe .st-bord-prise { fill: transparent; cursor: ew-resize; }
/* Une petite vidéo ne prend plus toute la place (David, 29/10 : « une grosse fenêtre pour une si petite vidéo, on perd
   de la place ») : le cadre est bas, la vidéo garde ses proportions au milieu (le noir seulement derrière elle), un son
   seul n'a que son lecteur ; la place gagnée va à la forme d'onde et à la courbe de volume. */
.fenetre-studio .studio-yt-cadre { flex: 0 0 auto; height: clamp(100px, 19vh, 190px); min-height: 0; background: var(--surface-2); }
.fenetre-studio .studio-yt-cadre .wa, .fenetre-studio .studio-yt-cadre .attente { color: var(--encre-2); }
.fenetre-studio .studio-yt-cadre .wa a { color: inherit; }
.fenetre-studio .studio-yt-cadre > iframe { inset: 0 auto; left: 50%; translate: -50% 0; height: 100%; width: auto; max-width: 100%; aspect-ratio: 16 / 9; background: #000; }
.fenetre-studio .studio-yt-cadre:has(> .st-fichier-lecteur:not(.video)) { height: auto; }
.fenetre-studio .st-fichier-lecteur.video video { background: #000; width: auto; max-width: 100%; height: 100%; align-self: center; border-radius: 4px; }
/* La place libre va à la courbe (base 0 : sa hauteur ne dépend pas de son dessin), sans dépasser 280 px. */
.fenetre-studio .st-volume { flex: 1 1 0; display: flex; flex-direction: column; min-height: 104px; max-height: 280px; }
.fenetre-studio .st-courbe { flex: 1 1 0; height: auto; min-height: 72px; }
/* Fondus à la Ableton (David, 29/10) : une droite du coin bas jusqu'en haut, une poignée en haut à tirer. */
.st-courbe .st-fondu { fill: none; stroke: var(--encre); stroke-width: 1.5; opacity: .7; pointer-events: none; }
.st-courbe .st-fondu-zone { fill: var(--encre); opacity: .08; pointer-events: none; }
.st-courbe .st-fondu-poignee { fill: var(--surface); stroke: var(--encre); stroke-width: 1.5; cursor: ew-resize; }
.st-courbe .st-fondu-poignee:hover { fill: var(--encre); }
.hb-piste .hb-fondu { fill: none; stroke: var(--encre); stroke-width: 1.3; opacity: .7; pointer-events: none; }
.hb-piste .hb-fondu-poignee { fill: var(--surface); stroke: var(--jg); stroke-width: 1.5; cursor: ew-resize; opacity: 0; }
.hb-piste .hb-jingle:hover .hb-fondu-poignee, .hb-piste .hb-jingle.sel .hb-fondu-poignee { opacity: 1; }
.hb-piste .hb-fondu-poignee:hover { fill: var(--jg); }
/* Studio agrandissable (David, 29/10) : le coin en bas à droite se tire ; ⤢ : tout l'écran. Signature « by DACODEC ». */
.fenetre-studio > div { resize: both; min-width: min(760px, calc(100vw - 20px)); min-height: min(560px, calc(100vh - 20px)); max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
.fenetre-studio.agrandi > div { width: calc(100vw - 20px) !important; height: calc(100vh - 20px) !important; resize: none; }
.studio-signature { font: 600 var(--t-xs)/1 var(--f-texte); color: var(--encre-2); letter-spacing: .02em; }
.studio-haut .st-agrandir { padding: 2px 8px; font-size: 1.05rem; line-height: 1; }
/* Plein écran (David, 30/10) : le studio prend tout l'écran, sans bord ni coin à tirer ; les messages restent visibles. */
.studio-haut .st-plein-ecran { padding: 2px 8px; }
/* Fermer en haut, à côté de Sessions (David, 31/10). */
.studio-haut .st-fermer { padding: 2px 8px; }
.fenetre-studio.plein-ecran { padding: 0; background: var(--surface); }
.fenetre-studio.plein-ecran > div, .fenetre-studio.agrandi.plein-ecran > div { width: 100vw !important; height: 100vh !important; max-width: none; max-height: none; min-width: 0; min-height: 0; border-radius: 0; resize: none; box-shadow: none; }
.fenetre-studio.plein-ecran .toasts { z-index: 100; }
/* VOIX FIN : la fin du filtre (David, 29/10), comme VOIX mais en pointillé. */
.st-point.st-p-voixfin { border-color: #e08a00; border-style: dashed; }
.st-p-voixfin .chiffre { color: #b36b00; }
/* Curseur de la timeline du studio (David, 29/10) : la flèche standard (d'abord un trait fin, puis « remplace le trait
   droit de la souris par la flèche standard »). Les poignées et les points gardent leurs curseurs (↔, main). */
.fenetre-studio .st-plage, .fenetre-studio .st-courbe, .fenetre-studio .st-courbe .st-aire, .fenetre-studio .st-courbe .st-hors,
.fenetre-studio .hb-piste, .fenetre-studio .hb-piste .hb-bloc { cursor: default; }
/* La vidéo à droite (David, 29/10 : « plutôt que d'avoir un petit carré vidéo en haut, autant se réserver une place à
   droite et garder de la hauteur pour les waveformes ; une fenêtre qu'on pourrait redimensionner ») : la timeline à
   gauche (la forme d'onde et les pistes de jingles se partagent la hauteur), la vidéo à droite sur toute la hauteur,
   un trait à tirer entre les deux ; Repères, Export et Source dessous, sur toute la largeur. */
.studio-son { container: studio-son / inline-size; }
/* Base 0 : le panneau prend la hauteur qu'il a (pas celle de son contenu), sans descendre sous le minimum de ses
   rangées (en dessous, il défile). */
.fenetre-studio .studio-yt {
  position: relative; flex: 1 1 0; display: grid; row-gap: 8px; column-gap: 0;
  grid-template-columns: minmax(320px, 1fr) 14px min(var(--st-video, clamp(220px, 32%, 460px)), 60%);
  grid-template-rows: auto auto auto 3fr auto 2fr 10px var(--st-bas, auto);
  grid-template-areas: "source sep video" "choix sep video" "plage sep video" "volume sep video" "regle sep video" "jingles sep video" "sepbas sepbas sepbas" "console console console";
}
.fenetre-studio .studio-yt-choix { grid-area: choix; min-width: 0; }
.fenetre-studio .st-plage { grid-area: plage; }
.fenetre-studio .st-volume { grid-area: volume; max-height: none; min-height: 104px; background: var(--c-el-piste-fond, var(--fond)); }
.fenetre-studio .st-jingles { grid-area: jingles; display: flex; flex-direction: column; min-height: 78px; }
.fenetre-studio .st-jingles .hb-cadre { flex: 1 1 0; min-height: 78px; position: relative; }
.fenetre-studio .st-jingles .hb-piste { position: absolute; inset: 0; height: 100%; }
.fenetre-studio .st-console { grid-area: console; }
/* La source (recherche, fichier) au-dessus de la timeline de l'élément (David, 29/10 : « plus logique »). */
.fenetre-studio .st-console.st-source { grid-area: source; }
/* Sous la vidéo, sans la recouvrir (David, 29/10 : « le vu-mètre ne doit pas masquer le bas de la vidéo, ça doit être
   indépendant ») : le cadre de la vidéo lui laisse la place en bas de la colonne. */
.fenetre-studio .studio-yt > .st-vu { grid-area: video; align-self: end; justify-self: stretch; margin: 0; height: 36px; }
.fenetre-studio .studio-yt-cadre { margin-bottom: 44px; }
/* Toute la largeur du cadre de la vidéo (David, 29/10 : « qu'il suive la taille de la fenêtre de droite »). */
.fenetre-studio .studio-yt > .st-vu canvas { flex: 1 1 auto; width: 100%; min-width: 0; }
/* Le cadre ne pousse rien : ce qu'il contient se place dedans, la vidéo en haut, à ses proportions. */
.fenetre-studio .studio-yt-cadre { grid-area: video; height: auto; min-height: 0; position: relative; }
.fenetre-studio .studio-yt-cadre > iframe { inset: 0 auto auto 0; translate: none; width: 100%; max-width: none; height: auto; max-height: 100%; aspect-ratio: 16 / 9; }
.fenetre-studio .studio-yt-cadre > .st-fichier-lecteur { position: absolute; inset: 0; }
.fenetre-studio .st-fichier-lecteur > p { overflow-wrap: anywhere; }
.fenetre-studio .st-fichier-lecteur.video { justify-content: flex-start; }
.fenetre-studio .st-fichier-lecteur.video video { flex: 0 1 auto; min-height: 0; width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: top; background: transparent; }
/* Le trait à tirer : fin, une prise au milieu, couleur du studio au survol. */
.fenetre-studio .st-separateur { grid-area: sep; position: relative; cursor: col-resize; touch-action: none; border-radius: 4px; }
.fenetre-studio .st-separateur::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; translate: -50% 0; border-radius: 2px; background: var(--trait); }
.fenetre-studio .st-separateur::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 34px; translate: -50% -50%; border-radius: 3px; background: var(--surface); border: 1px solid var(--trait); }
.fenetre-studio .st-separateur:hover::before, .fenetre-studio.redim-video .st-separateur::before, .fenetre-studio .st-separateur:focus-visible::before { background: var(--accent); }
.fenetre-studio .st-separateur:hover::after, .fenetre-studio.redim-video .st-separateur::after { border-color: var(--accent); }
.fenetre-studio .st-separateur:focus-visible { outline: none; }
.fenetre-studio.redim-video, .fenetre-studio.redim-video * { cursor: col-resize !important; user-select: none; }
.fenetre-studio.redim-video iframe, .fenetre-studio.redim-video video { pointer-events: none; }
@container studio-son (max-width: 720px) {
  .fenetre-studio .studio-yt {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto clamp(100px, 19vh, 190px) auto auto 3fr auto 2fr 10px var(--st-bas, auto);
    grid-template-areas: "source" "choix" "video" "vu" "plage" "volume" "regle" "jingles" "sepbas" "console";
  }
  .fenetre-studio .st-separateur { display: none; }
  .fenetre-studio .studio-yt-cadre { margin-bottom: 0; }
  .fenetre-studio .studio-yt > .st-vu { grid-area: vu; }
  .fenetre-studio .studio-yt-cadre > iframe { inset: 0 auto; left: 50%; translate: -50% 0; width: auto; height: 100%; max-width: 100%; } }
/* Un seul son : pas de liste à gauche, à toutes les largeurs (la règle des fenêtres étroites la remettait à 180 px). */
.studio.studio-seul { grid-template-columns: minmax(0, 1fr); }
/* ⏩ Scanner l'onde (YouTube) : à côté de 🔍, en couleur pendant le scan. */
.st-volume .st-scan { padding: 1px 6px; font-size: var(--t-xs); margin-right: 4px; }
.st-volume .st-scan.en-cours { color: var(--accent); font-weight: 700; }
.st-volume .st-scan[hidden] { display: none; }
/* Zoomé, rien ne déborde de la timeline sur les côtés (David, 29/10 : « on voit le fade à droite de la vidéo ») : la
   courbe est coupée à ses bords gauche et droit (pas en haut ni en bas, pour les points et les poignées), et les
   bandes de la plage (IN → OUT, filtre) s'arrêtent aux bouts de la barre. */
.fenetre-studio .st-courbe { clip-path: inset(-14px 0); }
.fenetre-studio .st-segment { left: clamp(0%, var(--de), 100%); width: max(0%, calc(clamp(0%, var(--a), 100%) - clamp(0%, var(--de), 100%))); }
.fenetre-studio .st-zone-voix { left: clamp(0%, var(--v), 100%); width: max(0%, calc(clamp(0%, var(--vf, var(--a)), 100%) - clamp(0%, var(--v), 100%))); }
.fenetre-studio .st-hors-avant { width: clamp(0%, var(--zero, 0%), 100%); }
.fenetre-studio .st-hors-apres { left: clamp(0%, var(--fin, 100%), 100%); }
.fenetre-studio .st-plage.tete-hors .st-tete { visibility: hidden; }
/* Le point au milieu d'une courbe de fondu (David, 29/10 : « un point sur la courbe de fade pour la modifier ») : se
   tire vers le haut (courbe bombée) ou le bas (creusée) ; double-clic : la courbe d'origine. */
.st-courbe .st-fondu-pente { fill: var(--surface); stroke: var(--encre); stroke-width: 1.5; cursor: ns-resize; }
.st-courbe .st-fondu-pente:hover { fill: var(--encre); }
.hb-piste .hb-fondu-pente { fill: var(--surface); stroke: var(--encre); stroke-width: 1.3; cursor: ns-resize; opacity: 0; }
.hb-piste .hb-jingle:hover .hb-fondu-pente, .hb-piste .hb-jingle.sel .hb-fondu-pente { opacity: 1; }
.hb-piste .hb-fondu-pente:hover { fill: var(--encre); }
/* La graduation (David, 29/10 : « une petite graduation pour avoir un timing en visu », puis « mieux entre l'élément
   et les jingles ») : entre la courbe et les pistes de jingles ; les temps en petits chiffres, un grand trait par
   temps, des petits entre. */
.fenetre-studio .st-regle { grid-area: regle; display: block; width: 100%; height: 18px; margin: -6px 0 -6px; cursor: default; touch-action: none; overflow: hidden; }
.st-regle .st-regle-grand { stroke: var(--encre-2); stroke-width: 1; opacity: .75; }
.st-regle .st-regle-petit { stroke: var(--encre-2); stroke-width: 1; opacity: .4; }
.st-regle text { font: 600 9.5px/1 var(--f-texte); fill: var(--encre-2); font-variant-numeric: tabular-nums; }
/* Le calcul du filtre, bien visible (David, 29/10 : « un message pendant le calcul, avec le pourcentage ») : sur la
   forme d'onde, le texte, une barre qui avance (ou qui va et vient sans pourcentage) et « Arrêter ». */
.st-volume .st-calcul { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 3; width: min(460px, calc(100% - 24px));
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; padding: 10px 12px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--accent); border-radius: 10px; box-shadow: var(--ombre); }
.st-volume .st-calcul[hidden] { display: none; }
.st-calcul-texte { grid-column: 1 / -1; font: 600 var(--t-s)/1.35 var(--f-texte); color: var(--encre); }
.st-calcul-barre { position: relative; height: 8px; border-radius: 4px; background: var(--trait); overflow: hidden; }
.st-calcul-barre i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--accent); border-radius: 4px; transition: width .3s; }
.st-calcul-barre.indefinie i { width: 30%; animation: st-calcul-va-vient 1.4s ease-in-out infinite alternate; }
@keyframes st-calcul-va-vient { from { left: 0; } to { left: 70%; } }
@media (prefers-reduced-motion: reduce) { .st-calcul-barre.indefinie i { animation: none; width: 100%; opacity: .5; } }
.st-calcul [data-st-calcul-stop] { padding: 2px 10px; font-size: var(--t-xs); }
.st-traitement .st-ecoute { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--trait); font-weight: 600; color: var(--encre-2); white-space: nowrap; cursor: pointer; }
.st-traitement .st-ecoute[hidden] { display: none; }
/* Sessions du studio (David, 29/10 : « comme Ableton ») : 🗂 Sessions en haut, le nom de la session ouverte à côté ;
   le panneau déroule l'enregistrement et la liste des sessions de ce navigateur. */
.st-sessions-zone { position: relative; display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.st-sessions-bouton { padding: 2px 10px; font-weight: 600; }
.st-sessions-bouton[aria-expanded="true"] { background: var(--accent-doux); color: var(--accent); }
.st-session-nom { font-size: var(--t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.st-sessions { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: min(460px, 86vw); max-height: min(70vh, 560px); overflow: auto;
  display: grid; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--trait); border-radius: 10px; box-shadow: var(--ombre); }
.st-sessions[hidden] { display: none; }
.st-sessions-haut { display: flex; gap: 6px; align-items: center; }
.st-sessions-haut input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--trait); border-radius: var(--r); background: var(--surface); color: var(--encre); padding: 6px 10px; font: inherit; font-size: var(--t-s); }
.st-sessions-haut .btn { white-space: nowrap; }
.st-sessions-note { margin: 0; font-size: var(--t-s); color: var(--encre-2); line-height: 1.45; }
.st-sessions-note .btn { margin-top: 6px; }
.st-sessions-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.st-sessions-liste li { display: flex; align-items: stretch; border: 1px solid var(--trait); border-radius: 8px; overflow: hidden; }
.st-sessions-liste li[aria-current="true"] { border-color: var(--accent); background: var(--accent-doux); }
.st-session-ouvrir { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; text-align: left; padding: 7px 10px; border: 0; background: none; color: var(--encre); font: inherit; font-size: var(--t-s); cursor: pointer; }
.st-session-ouvrir:hover { background: var(--accent-doux); }
.st-session-ouvrir b, .st-session-ouvrir span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-session-ouvrir span { font-size: var(--t-xs); }
.st-session-x { padding: 0 10px; border-radius: 0; }
/* FILTRE IN et FILTRE OUT pas posés (David, 29/10 : « affiche aussi in et out du filtre sans mettre de point ») : « — »,
   ou « au IN » / « au OUT », en gris. */
.st-point.st-non-pose .chiffre { color: var(--encre-2); font-weight: 600; }
/* ✕ en pastille sur le coin du repère : il ne prend pas de place (la ligne FILTRE IN · filtre · FILTRE OUT tient). */
.st-point { position: relative; }
.st-point .st-point-x { position: absolute; top: -8px; right: -6px; width: 18px; height: 18px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--trait); border-radius: 50%; background: var(--surface); font-size: 10px; line-height: 1; color: var(--encre-2); z-index: 1; }
.st-point .st-point-x:hover { color: #c62828; border-color: #c62828; }
.st-point .st-point-x[hidden] { display: none; }
/* Le son laissé tel quel en marron (toute l'onde sans filtre) ; le passage filtré garde la couleur de l'onde (violet pastel). */
:is(.st-courbe, .st-onde-calque) .st-onde.st-onde-brut { fill: var(--c-el, color-mix(in srgb, #8a4f00 70%, var(--encre))); opacity: .55; }
.st-traitement .st-fondu-filtre { margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--trait); }

/* Le menu Filtre, Fond, Fondu et 🎧 entre FILTRE IN et FILTRE OUT (David, 29/10 : « c'est logique, ça va ensemble ») :
   arrondi comme les repères qui l'entourent. Deux lignes : IN, OUT et la position ; puis FILTRE IN, le filtre, FILTRE OUT. */
.st-points .st-traitement { border-radius: 999px; height: 34px; padding: 0 4px 0 8px; }
.st-points .st-traitement select { padding: 0 2px; }
.st-points .st-traitement :is(.st-fond, .st-fondu-filtre, .st-ecoute) { margin-left: 4px; padding-left: 6px; }
.st-points .st-p-in { order: 1; }
.st-points .st-p-out { order: 2; }
/* ▶ Play juste à droite du OUT de l'élément (David, 30/10). */
.st-points .st-play { order: 2; }
/* ↶ Annuler juste à droite de ▶ Play (David, 30/10). */
.st-points .st-annuler { order: 2; }
.studio-yt .st-annuler:disabled { opacity: .45; }
.st-points .st-milieu { order: 3; }
.st-points .st-saut { order: 4; flex-basis: 100%; height: 0; }
.st-points .st-p-voix { order: 5; }
.st-points .st-traitement { order: 6; }
.st-points .st-p-voixfin { order: 7; }

/* Pas de cadre violet autour d'un menu ou d'une case choisis (David, 29/10 : « supprime les sur-cadres violets, c'est
   moche ») : le bord gris foncé au survol suffit. */
.studio-yt .st-ctl select, .studio-yt .st-ctl input { outline: none; }

/* TikTok (David, 29/10) : le lecteur officiel intégré, vertical, centré dans le cadre de la vidéo. */
.studio-yt-cadre .st-tiktok { position: absolute; inset: 0; display: flex; justify-content: center; }
.studio-yt-cadre .st-tiktok iframe { height: 100%; aspect-ratio: 9 / 16; max-width: 100%; border: 0; background: #000; }

/* La fluidité (David, 29/10 : « quand je travaille sur la timeline ça rame, le curseur n'est plus fluide ») : l'onde sur
   son propre calque sous la courbe, les curseurs en traits posés par-dessus, déplacés sans rien redessiner. */
.st-volume .st-courbe { position: relative; }
.st-onde-calque { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; will-change: transform; }
.st-tete-courbe, .hb-tete-calque { position: absolute; left: 0; top: 0; width: 2px; margin-left: -1px; background: #c62828; pointer-events: none; will-change: transform; z-index: 3; }
.st-tete-courbe.hors, .hb-tete-calque.hors { display: none; }
.hb-cadre { position: relative; }
.hb-tete-calque { bottom: 0; }

/* Les points du filtre sur l'onde (David, 29/10) : 📌 et un trait orange, plein (FILTRE IN) ou en pointillé (FILTRE OUT). */
.st-courbe .st-epingle { pointer-events: none; }
.st-courbe .st-epingle line { stroke: #e08a00; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.st-courbe .st-epingle-voixfin line { stroke-dasharray: 4 3; }
.st-courbe .st-epingle text { font-size: 16px; }
.st-courbe .st-epingle .st-epingle-nom { font: 700 9.5px var(--f-titre); letter-spacing: .05em; fill: #b86e00; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.st-courbe .st-epingle.neuve text { animation: st-epingle-pose .6s ease-out; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes st-epingle-pose { 0% { transform: translateY(-8px) scale(1.5); } 60% { transform: translateY(1px) scale(.95); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .st-courbe .st-epingle.neuve text { animation: none; } }

/* Le Rec de l'EXPORT dans le cadre au milieu de l'onde (David, 29/10) : en rouge. */
.st-volume .st-calcul.en-rec { border-color: #c62828; }
.st-calcul.en-rec .st-calcul-texte { color: #c62828; }
.st-calcul.en-rec .st-calcul-barre i { background: #c62828; }

/* Pas de cadre violet autour d'un bouton ou d'un réglage du studio après un clic (David, 29/10 : « supprime le
   sur-rectangle violet moche ») : Chrome le montre aussi à la souris quand on s'est servi du clavier (Espace). */
.fenetre-studio :focus-visible, .fenetre-studio .bouton-rotatif:focus-visible { outline: none; }

/* ✂ Découpes de l'élément (David, 30/10) : les jointures, leurs prises, le fondu enchaîné en X, ✕ pour enlever. */
.st-courbe .st-coupe-trait { stroke: var(--encre); stroke-width: 1.5; pointer-events: none; }
.st-courbe .st-coupe-trait.continu { stroke-dasharray: 3 3; opacity: .6; }
.st-courbe .st-coupe-prise { fill: transparent; cursor: ew-resize; }
.st-courbe .st-coupe-prise:hover { fill: var(--encre); opacity: .12; }
/* Les bouts du montage, quand le fichier a encore du son au-delà : une prise visible, à tirer pour le reprendre. */
.st-courbe .st-coupe-bout { fill: var(--accent); opacity: .28; }
.st-courbe .st-coupe-bout:hover { fill: var(--accent); opacity: .6; }
.st-courbe .st-xf-zone { fill: var(--encre); opacity: .12; pointer-events: none; }
.st-courbe .st-xf { fill: none; stroke: var(--encre); stroke-width: 1.5; opacity: .75; pointer-events: none; }
.st-courbe .st-xf-poignee { fill: var(--surface); stroke: var(--encre); stroke-width: 1.5; cursor: ew-resize; }
.st-courbe .st-xf-poignee:hover { fill: var(--encre); }
/* Zones off (David, 31/10) : l'élément noir et muet là ; une surbrillance à mettre en off. */
.st-courbe .st-off-zone { fill: rgba(12, 12, 14, .58); }
.st-courbe .st-off-nom { font: 700 9.5px var(--f-titre); letter-spacing: .1em; fill: #fff; opacity: .85; pointer-events: none; }
.st-courbe .st-off-prise { fill: transparent; cursor: ew-resize; }
.st-courbe .st-off-prise:hover { fill: #fff; opacity: .35; }
.st-courbe .st-off-x { cursor: pointer; }
.st-courbe .st-off-x circle { fill: #111; stroke: rgba(255, 255, 255, .7); stroke-width: 1; }
.st-courbe .st-off-x text { font: 700 10px var(--f-texte); fill: #fff; pointer-events: none; }
.st-courbe .st-off-x:hover circle { fill: #c62828; }
.st-courbe .st-sel-zone { fill: color-mix(in srgb, var(--accent) 20%, transparent); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 2; pointer-events: none; }
.studio-yt-cadre > .st-off-voile { position: absolute; z-index: 1; background: #000; pointer-events: none; }
.studio-yt-cadre > .st-off-voile[hidden] { display: none; }
.st-courbe .st-morceau-x { cursor: pointer; opacity: .55; }
.st-courbe .st-morceau-x:hover { opacity: 1; }
.st-courbe .st-morceau-x circle { fill: var(--surface); stroke: var(--encre-2); stroke-width: 1; }
.st-courbe .st-morceau-x text { font-size: 10px; fill: var(--encre); pointer-events: none; }

/* 💬 Sous-titres (David, 30/10) : la rangée sous l'export, les styles en vignettes, les phrases à corriger ; l'aperçu
   sur la vidéo. */
.st-rangee-st { align-items: start; }
.st-sous-titres { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; font-size: var(--t-s); min-width: 0; }
.st-st-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
/* Les styles : une seule rangée qui défile de côté (la molette aussi), sous le bouton Transcrire et les actions. */
.st-st-styles { display: flex; flex-wrap: nowrap; gap: 6px; order: 3; flex: 1 1 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 2px; }
.st-st-style { flex: none; }
.st-st-style { display: grid; gap: 3px; justify-items: center; padding: 3px; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; font: 600 var(--t-xs)/1.2 var(--f-texte, inherit); color: var(--encre-2); }
.st-st-style canvas { width: 96px; height: 54px; border-radius: 5px; display: block; }
.st-st-style:hover { border-color: var(--trait); }
.st-st-style[aria-checked="true"] { border-color: var(--accent); color: var(--accent); }
.st-st-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-left: auto; }
.st-st-case { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.st-st-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 240px; overflow: auto; }
.st-st-liste li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.st-st-liste input { width: 100%; box-sizing: border-box; font: inherit; padding: 5px 8px; border: 1px solid var(--trait); border-radius: 6px; background: var(--surface); color: var(--encre); }
.st-st-liste input:focus { border-color: var(--accent); outline: none; }
.st-st-temps { font-variant-numeric: tabular-nums; }
.st-st-vide { margin: 0; }
.studio-yt-cadre > canvas.st-st-apercu { position: absolute; pointer-events: none; z-index: 3; }
/* Les sous-titres se saisissent sur la vidéo pour les monter ou les descendre (David, 30/10). */
.studio-yt-cadre > .st-st-poignee { position: absolute; z-index: 4; cursor: ns-resize; touch-action: none; border-radius: 6px; outline: 1px dashed transparent; outline-offset: 2px; }
.studio-yt-cadre > .st-st-poignee:hover, .studio-yt-cadre > .st-st-poignee.glisse, .studio-yt-cadre > .st-st-poignee:focus-visible { outline-color: rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.studio-yt-cadre > .st-st-poignee[hidden] { display: none; }
.st-st-liste li { border-radius: 6px; transition: background-color .2s; }
.st-st-liste li.en-cours { background: var(--accent-doux); box-shadow: inset 3px 0 0 var(--accent); }
.st-st-liste li.en-cours input { border-color: var(--accent); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .st-st-liste li { transition: none; } }

/* Le trait entre le haut (timeline, vidéo) et le bas (repères, export, sous-titres) (David, 30/10) : comme celui de la
   vidéo, couché. Réglé : le bas a sa hauteur, il défile s'il en manque, les sous-titres prennent la place en plus. */
.fenetre-studio .st-separateur-h { grid-area: sepbas; position: relative; cursor: row-resize; touch-action: none; border-radius: 4px; }
.fenetre-studio .st-separateur-h::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; translate: 0 -50%; border-radius: 2px; background: var(--trait); }
.fenetre-studio .st-separateur-h::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 6px; translate: -50% -50%; border-radius: 3px; background: var(--surface); border: 1px solid var(--trait); }
.fenetre-studio .st-separateur-h:hover::before, .fenetre-studio.redim-bas .st-separateur-h::before, .fenetre-studio .st-separateur-h:focus-visible::before { background: var(--accent); }
.fenetre-studio .st-separateur-h:hover::after, .fenetre-studio.redim-bas .st-separateur-h::after { border-color: var(--accent); }
.fenetre-studio .st-separateur-h:focus-visible { outline: none; }
.fenetre-studio.redim-bas, .fenetre-studio.redim-bas * { cursor: row-resize !important; user-select: none; }
.fenetre-studio.redim-bas iframe, .fenetre-studio.redim-bas video { pointer-events: none; }
.fenetre-studio.bas-regle .studio-yt > .st-console:not(.st-source) { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.fenetre-studio.bas-regle .studio-yt > .st-console:not(.st-source) > .st-rangee { flex: none; }
.fenetre-studio.bas-regle .studio-yt > .st-console:not(.st-source) > .st-rangee-st:not([hidden]) { flex: 1 1 0; min-height: 150px; }
.fenetre-studio.bas-regle .st-rangee-st .st-sous-titres { height: 100%; grid-template-rows: auto minmax(0, 1fr); }
.fenetre-studio.bas-regle .st-st-liste { max-height: none; min-height: 60px; }
.fenetre-studio.bas-regle .st-rangee-st { grid-template-rows: minmax(0, 1fr); align-items: stretch; }

/* Le raccourci du ciseau (clic droit sur ✂ Couper, David, 30/10) : une bulle au-dessus des boutons de l'onde. */
.st-raccourci { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 6; display: grid; gap: 4px; width: max-content; max-width: min(340px, 80vw);
  padding: 8px 10px; border: 1px solid var(--trait); border-radius: 8px; background: var(--surface); color: var(--encre); box-shadow: 0 6px 18px rgba(0,0,0,.18);
  font: 500 var(--t-xs)/1.35 var(--f-texte, inherit); text-align: left; }
.st-raccourci kbd { font: 700 var(--t-xs)/1 var(--f-texte, inherit); padding: 2px 6px; border: 1px solid var(--trait); border-bottom-width: 2px; border-radius: 4px; background: var(--fond, transparent); }
.st-raccourci-actions { display: flex; gap: 6px; justify-content: flex-end; }
.st-raccourci-actions .btn { padding: 2px 8px; font-size: var(--t-xs); }

/* Plier une rangée (David, 30/10) : son nom est un bouton ; pliée, elle n'est plus qu'une ligne. */
button.st-rangee-nom { position: relative; display: inline-flex; align-items: center; margin: 0; padding: 4px 0; border: 0; background: none; cursor: pointer; text-align: left; justify-self: start; border-radius: 4px; }
/* La flèche ne se voit qu'au survol (▾), ou rangée pliée (▸) : elle ne prend pas de place. */
button.st-rangee-nom::after { content: ""; position: absolute; left: calc(100% + 4px); top: 50%; margin-top: -2.5px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0; transition: transform .15s, opacity .15s; }
button.st-rangee-nom:hover { color: var(--accent); }
button.st-rangee-nom:hover::after, button.st-rangee-nom:focus-visible::after, .st-rangee.plie > button.st-rangee-nom::after { opacity: .8; }
.st-rangee-st > button.st-rangee-nom { align-self: start; padding: 9px 0; }
button.st-rangee-nom:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-rangee.plie > :not(.st-rangee-nom) { display: none !important; }
.st-rangee.plie { padding-top: 2px; padding-bottom: 2px; }
.fenetre-studio.bas-regle .studio-yt > .st-console:not(.st-source) > .st-rangee-st.plie:not([hidden]) { flex: none; min-height: 0; }
.st-rangee.plie > button.st-rangee-nom::after { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { button.st-rangee-nom::after { transition: none; } }

/* Les couleurs du style choisi (David, 30/10) : texte, accent (mot dit, surligneur, contour), fond ; ↺ remet celles du
   modèle. */
.st-st-couleurs { display: inline-flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.st-st-couleur { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-weight: 600; color: var(--encre-2); font-size: var(--t-xs); }
.st-st-couleur input[type="color"] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; padding: 0; border: 1px solid var(--trait); border-radius: 6px; background: none; cursor: pointer; }
.st-st-couleur input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.st-st-couleur input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.st-st-couleur input[type="color"]::-moz-color-swatch { border: 0; border-radius: 4px; }
.st-st-couleur:hover input[type="color"], .st-st-couleur input[type="color"]:focus-visible { border-color: var(--accent); outline: none; }
.st-st-couleurs-defaut { padding: 2px 6px; }
/* L'animation des mots (David, 30/10) : un menu à côté des couleurs. */
.st-st-animation select { max-width: 9em; }
.st-st-couleurs-defaut[hidden] { display: none; }

/* La synchro des sous-titres (David, 30/10) : ‹ plus tôt, › plus tard, au millième. */
.st-st-synchro, .st-st-taille { gap: 2px; padding-right: 4px; }
.st-st-synchro .btn-discret, .st-st-taille .btn-discret { padding: 2px 7px; font-size: 1.05rem; line-height: 1; }
.st-st-taille-val { min-width: 3.4em; text-align: center; font-weight: 700; color: var(--encre); cursor: default; font-variant-numeric: tabular-nums; }
.st-st-synchro-val { min-width: 4.4em; text-align: center; font-weight: 700; color: var(--encre); cursor: default; font-variant-numeric: tabular-nums; }

/* Un bord de morceau tiré (David, 30/10 : « que la waveform que tu tirais change de couleur au moment de glisser ») :
   l'onde du morceau passe en bleu pendant le glissé, marron au lâcher. */
.st-rogne-calque { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.st-onde-tiree { fill: #1e6fd9; opacity: .78; }

/* ⚙ Options et ⭐ Modèles (David, 30/10 : « avec possibilité de débrayer dans un menu d'option »). */
.st-options-zone { position: relative; display: inline-flex; }
.st-options, .st-modeles { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: min(420px, 86vw); max-height: min(70vh, 560px); overflow: auto;
  display: grid; gap: 6px; padding: 12px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 28px rgba(0,0,0,.18); font-size: var(--t-s); }
.st-options[hidden], .st-modeles[hidden] { display: none; }
/* Les couleurs des pistes, dans ⚙ Options : une ligne par piste, sa couleur et celle de ses éléments. */
.st-couleurs-pistes { display: grid; grid-template-columns: 1fr auto auto 26px; align-items: center; gap: 4px 10px; padding: 2px 2px 6px; font-size: var(--t-xs); }
.st-couleurs-pistes input[type="color"] { width: 38px; height: 24px; padding: 0 2px; border: 1px solid var(--trait); border-radius: 5px; background: var(--surface); cursor: pointer; }
.st-couleurs-pistes [data-st-couleur-defaut] { padding: 2px 4px; }
.st-options-titre { margin: 2px 0 2px; font: 700 var(--t-xs)/1.2 var(--f-titre); letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); }
.st-option { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; padding: 4px 2px; cursor: pointer; }
.st-option input { margin-top: 3px; }
.st-option b { display: block; font-weight: 700; }
.st-option .wa { display: block; font-size: var(--t-xs); }
.st-options-logo { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--trait); }
.st-logo-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.st-logo-apercu { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 10px 10px; border: 1px solid var(--trait); }
.st-logo-choisir { justify-self: start; cursor: pointer; }
.st-modeles-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.st-modeles-liste li { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.st-modele-nom { flex: 1; text-align: left; justify-content: flex-start; font-weight: 700; }
.st-modele-garder { display: flex; gap: 6px; padding-top: 8px; border-top: 1px solid var(--trait); }
.st-modele-garder input { flex: 1; min-width: 0; font: inherit; padding: 5px 8px; border: 1px solid var(--trait); border-radius: 6px; background: var(--surface); color: var(--encre); }
.fenetre-studio.sans-modeles .st-modeles-zone { display: none; }
.st-blancs[hidden] { display: none; }
.st-st-retirer { padding: 2px 6px; }
.st-st-retirer:hover { color: #c62828; }
.st-st-liste li { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.studio-yt .st-format[hidden] { display: none; }

/* Le cadre du MP4 vertical ou carré sur la vidéo : le dehors assombri, le cadre à glisser, le logo à sa place. */
.studio-yt-cadre > .st-cadrage { position: absolute; z-index: 1; overflow: hidden; pointer-events: none; }
.studio-yt-cadre > .st-cadrage[hidden] { display: none; }
.st-cadrage-fenetre { position: absolute; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); outline: 2px solid rgba(255, 255, 255, .9); outline-offset: -1px; pointer-events: none; }
.st-cadrage-fenetre.entier { box-shadow: none; outline: none; }
/* La prise du cadre, en haut au milieu : le reste de la vidéo garde ses boutons. */
.st-cadrage-prise { position: absolute; left: 50%; top: 6px; translate: -50% 0; padding: 2px 10px; white-space: nowrap; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #222; font: 700 12px/1.3 var(--f-texte, sans-serif); pointer-events: auto; cursor: ew-resize; touch-action: none; user-select: none; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.st-cadrage-prise.debout { cursor: ns-resize; }
.st-cadrage-logo { position: absolute; pointer-events: none; }
/* Le nom de chaque piste à gauche (David, 31/10 : « il faudrait les identifier sur le côté gauche, pour savoir quelle
   piste est où ») : une colonne à elle, toutes les pistes gardent le même axe ; leur nom n'est plus écrit dedans.
   Studio étroit : pas de colonne, le nom reste dans la piste vide. */
.fenetre-studio .studio-yt {
  /* Les hauteurs : réglées (--h-…), sinon l'élément et les FX audio se partagent la place ; masquées, une ligne. */
  --r-el: var(--h-el, 3fr); --r-fx: var(--h-fx, 2fr); --r-bas: var(--st-bas, auto);
  grid-template-columns: 104px minmax(216px, 1fr) 14px min(var(--st-video, clamp(220px, 32%, 460px)), 60%);
  grid-template-rows: auto auto auto var(--r-el) auto auto auto auto var(--r-fx) auto 10px var(--r-bas);
  grid-template-areas: "source source sep video" "choix choix sep video" "nel plage sep video" "nel volume sep video" ". regle sep video"
    "nim cqimages sep video" "nfxv fxv sep video" "nlogo cqlogo sep video" "nfx jingles sep video" "outils outils sep video"
    "sepbas sepbas sepbas sepbas" "console console console console";
}
.st-piste-nom { position: relative; display: flex; flex-direction: row; align-items: center; gap: 4px; min-width: 0; padding: 0 6px 0 0;
  font: 700 10px/1.15 var(--f-titre); letter-spacing: .03em; text-transform: uppercase; color: var(--c, var(--encre-2)); white-space: nowrap; }
/* Le nom a la couleur choisie pour la piste (David, 31/10 : « que les noms aient la même couleur que la couleur choisie
   pour la timeline »), sinon celle de ses éléments, sinon celle d'origine. */
.st-piste-nom[data-pour="element"] { grid-area: nel; --c: var(--c-el-piste, var(--c-el, var(--encre-2))); }
.st-piste-nom[data-pour="element"] .st-piste-nom-texte { white-space: normal; } /* « Vidéo principale » (David, 31/10), sur deux lignes */
.st-piste-nom[data-pour="images"] { grid-area: nim; --c: var(--c-images-piste, var(--c-images, #c2410c)); }
.st-piste-nom[data-pour="fxv"] { grid-area: nfxv; --c: var(--c-fxv-piste, var(--c-fxv, #6a3fd1)); margin-top: -4px; }
.st-piste-nom[data-pour="logo"] { grid-area: nlogo; --c: var(--c-logo-piste, var(--c-logo, #0e7490)); margin-top: -4px; }
.st-piste-nom[data-pour="fx"] { grid-area: nfx; --c: var(--c-fx-piste, var(--c-fx, #13897f)); margin-top: 2px; }
/* FX audio 1 et 2, chacune son œil (David, 31/10 : « fx 1 et fx 2 doivent être indépendants ») : les noms en face des
   pistes (3 px en haut et en bas, 4 px entre elles, comme dans la piste) ; une piste masquée est une bande fine. */
.st-piste-voies { flex: 1 1 auto; align-self: stretch; display: flex; flex-direction: column; gap: 4px; padding: 4px 0; min-width: 0; }
.st-voie-nom { flex: 1 1 0; display: flex; align-items: center; gap: 4px; min-height: 0; }
.st-voie-nom.cache { display: none; }
.fenetre-studio.fx-une .studio-yt { --r-fx: var(--h-fx-une, 1fr); }
.fenetre-studio.fx-une .st-jingles, .fenetre-studio.fx-une .st-jingles .hb-cadre { min-height: 52px; }
:is(.st-fxv, .st-cq)[hidden] + .st-piste-nom { display: none; }
/* Le repère en tirant (David, 31/10) : un trait pointillé sur toutes les pistes, là où est la poignée tirée. */
.studio-yt > .st-repere { position: absolute; z-index: 6; width: 0; margin-left: -1px; border-left: 2px dashed color-mix(in srgb, var(--accent) 80%, transparent); pointer-events: none; }
.studio-yt > .st-repere[hidden] { display: none; }
.studio-yt > .st-repere.colle { border-left-style: solid; border-left-color: var(--accent); } /* collé par l'aimant */
.st-poignee-h { position: absolute; left: 0; right: 4px; bottom: -6px; height: 9px; cursor: row-resize; touch-action: none; z-index: 2; }
.st-poignee-h::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 3px; border-radius: 2px; background: var(--c, var(--encre-2)); opacity: 0; transition: opacity .12s; }
.st-poignee-h:hover::after, .fenetre-studio.redim-piste .st-poignee-h::after { opacity: .5; }
.fenetre-studio.redim-piste, .fenetre-studio.redim-piste * { cursor: row-resize !important; user-select: none; }
.fenetre-studio.h-el .st-volume { min-height: 0; }
.fenetre-studio.h-fx .st-jingles, .fenetre-studio.h-fx .st-jingles .hb-cadre { min-height: 0; }
.fenetre-studio.pistes-fixes .studio-yt { --r-bas: minmax(var(--st-bas, auto), 1fr); }
.fenetre-studio.cache-el .studio-yt { --r-el: auto; }
.fenetre-studio.cache-fx .studio-yt { --r-fx: auto; }
/* Masquer une piste (David, 31/10 : « un petit œil barré à côté des noms des pistes pour masquer celles qui ne nous
   intéressent pas, afin de gagner encore de l'espace ») : il ne reste que son nom, sur une ligne ; elle compte toujours
   (écoute, MP3, MP4). */
.fenetre-studio.cache-el .studio-yt > .st-volume, .fenetre-studio.cache-fx .studio-yt > .st-jingles, .fenetre-studio.cache-fxv .studio-yt > .st-fxv,
.fenetre-studio.cache-images .studio-yt > .st-cq[data-piste="images"], .fenetre-studio.cache-logo .studio-yt > .st-cq[data-piste="logo"] { display: none; }
.st-piste-nom-texte { display: flex; flex-direction: column; justify-content: center; align-self: stretch; gap: 4px; min-width: 0; flex: 1 1 auto; }
.st-oeil { flex: none; display: grid; place-items: center; width: 17px; height: 17px; padding: 0; border: 0; border-radius: 4px; background: none; color: inherit; cursor: pointer; opacity: .45; }
.st-oeil:hover, .st-oeil:focus-visible { opacity: 1; background: color-mix(in srgb, var(--c, var(--encre-2)) 12%, transparent); }
.st-oeil svg { width: 14px; height: 14px; }
/* L'œil ouvert : la piste se voit ; barré : elle est masquée (David, 31/10 : « on doit voir l'œil barré quand la piste
   est masquée, pas l'inverse »). Masquée, elle ne prend plus aucune place (« récupérer toute la place disponible, ne
   laisse pas une bande blanche ») : son nom part aussi, et revient dans la barre sous les pistes, avec l'œil barré. */
.st-oeil .barre { display: none; }
.st-piste-nom.cache { display: none; }
.st-pistes-masquees { order: 0; display: flex; gap: 4px; flex: none; }
/* Une piste masquée : son bouton d'ajout part aussi de la barre (on n'ajoute pas sur une piste qu'on ne voit pas). */
.fenetre-studio.cache-images .st-cq-ajout[data-piste="images"], .fenetre-studio.cache-logo .st-cq-ajout[data-piste="logo"],
.fenetre-studio.cache-fxv .st-fxv-banque-bouton, .fenetre-studio.cache-fx .st-pistes-outils .hb-ajout { display: none !important; }
.st-pistes-masquees:empty { display: none; }
.st-oeil-puce { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 3px; border: 1px solid color-mix(in srgb, var(--c, var(--encre-2)) 40%, var(--trait)); border-radius: 999px; background: none;
  font: 700 9.5px/1.2 var(--f-titre); letter-spacing: .03em; text-transform: uppercase; color: var(--c, var(--encre-2)); cursor: pointer; white-space: nowrap; }
.st-oeil-puce:hover { background: color-mix(in srgb, var(--c, var(--encre-2)) 12%, transparent); }
.st-oeil-puce svg { width: 13px; height: 13px; }
/* Une rangée vide garde son écart dans la grille : la suivante remonte d'autant (--trou, calculé par combler()). */
.fenetre-studio .studio-yt > .st-regle { margin-top: calc(-6px + var(--trou, 0px)); }
.fenetre-studio .studio-yt > :is(.st-cq[data-piste="images"], .st-piste-nom[data-pour="images"]) { margin-top: var(--trou, 0px); }
.fenetre-studio .studio-yt > :is(.st-fxv, .st-cq[data-piste="logo"], .st-piste-nom[data-pour="fxv"], .st-piste-nom[data-pour="logo"]) { margin-top: calc(-4px + var(--trou, 0px)); }
.fenetre-studio .studio-yt > :is(.st-jingles, .st-piste-nom[data-pour="fx"]) { margin-top: calc(2px + var(--trou, 0px)); }
.fenetre-studio .studio-yt > .st-pistes-outils { margin-top: calc(-3px + var(--trou, 0px)); }
.fenetre-studio :is(.st-fxv-vide, .st-cq-vide), .fenetre-studio .hb-piste .hb-vide { display: none; }
@container studio-son (max-width: 720px) {
  .fenetre-studio .studio-yt {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto clamp(100px, 19vh, 190px) auto auto var(--r-el) auto auto auto auto var(--r-fx) auto 10px var(--r-bas);
    grid-template-areas: "source" "choix" "video" "vu" "plage" "volume" "regle" "cqimages" "fxv" "cqlogo" "jingles" "outils" "sepbas" "console";
  }
  .fenetre-studio .st-piste-nom { display: none; }
  .fenetre-studio :is(.st-fxv-vide, .st-cq-vide), .fenetre-studio .hb-piste .hb-vide { display: revert; } }
.st-pistes-outils { grid-area: outils; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 8px; margin: -3px 4px 0; min-width: 0; height: 30px; font-size: var(--t-xs); --fxv: var(--c-fxv, #6a3fd1); --cq: var(--c-images, #c2410c); }
.st-pistes-outils .st-cq-reglages[data-piste="logo"] { --cq: var(--c-logo, #0e7490); }
.st-pistes-outils :is(.st-outils-fx, .hb-outils) { display: contents; }
.st-pistes-outils :is(.btn, .hb-ajout) { flex: none; padding: 2px 8px; font-size: var(--t-xs); white-space: nowrap; }
/* Les boutons dans l'ordre des pistes, de haut en bas. */
.st-pistes-outils .st-cq-ajout[data-piste="images"] { order: 1; }
.st-pistes-outils .st-fxv-banque-bouton { order: 2; }
.st-pistes-outils .st-cq-ajout[data-piste="logo"] { order: 3; }
.st-pistes-outils .hb-ajout { order: 4; }
.st-pistes-outils .hb-biblio { order: 6; flex: 0 1 auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.st-pistes-outils .hb-biblio > * { flex: none; }
.st-pistes-outils .hb-info { order: 7; flex: 1 1 0; margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.st-pistes-outils [hidden] { display: none !important; }
/* La banque des FX vidéo ouverte, les réglages de ce qui est choisi : sur la même ligne, à droite des boutons, à la
   place de « Tes FX » (David, 31/10 : « que l'environnement des timelines soit fixe : quand je clique sur un élément,
   le menu se déplie en dessous et la zone timeline se réduit, c'est pénible ») ; trop longs, ils défilent de côté. */
.st-pistes-reglages { order: 5; flex: 1 1 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 12px; min-width: 0; height: 100%;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding-left: 6px; border-left: 1px solid var(--trait); }
.st-pistes-reglages > *, .st-pistes-reglages :is(.st-fxv-reglage, .st-cq-reglage, .st-fxv-titre, .st-cq-titre, .btn) { flex: none; flex-wrap: nowrap; white-space: nowrap; }
.st-pistes-reglages:not(:has(> .st-fxv-banque:not([hidden]), > .st-fxv-reglages:not(:empty), > .st-cq-reglages:not(:empty))) { display: none; }
.st-pistes-outils:has(.st-pistes-reglages > :is(.st-fxv-banque:not([hidden]), .st-fxv-reglages:not(:empty), .st-cq-reglages:not(:empty))) :is(.hb-biblio, .hb-info) { display: none; }
/* Les trois pistes vidéo, serrées sous l'élément (4 px entre elles), leur nom au milieu quand elles sont vides,
   comme « 1ʳᵉ piste FX audio ». */
.fenetre-studio :is(.st-fxv, .st-cq) { margin-top: -4px; }
.fenetre-studio .st-cq[data-piste="images"] { margin-top: 0; }
/* Les pistes FX audio, sous les pistes vidéo : un peu plus d'air entre les deux groupes. */
.fenetre-studio .st-jingles { margin-top: 2px; }
.st-fxv { grid-area: fxv; display: grid; gap: 4px; margin: 0 4px 2px; min-width: 0; --fxv: var(--c-fxv, #6a3fd1); --fxv-piste: var(--c-fxv-piste, var(--fxv)); }
.st-fxv[hidden] { display: none; }
.st-fxv-cadre { position: relative; border-radius: 6px; background: color-mix(in srgb, var(--fxv-piste) var(--dose-fxv, 7%), var(--surface)); border: 1px dashed color-mix(in srgb, var(--fxv-piste) 35%, var(--trait)); overflow: hidden; }
.st-fxv.depot .st-fxv-cadre { border-style: solid; border-color: var(--fxv-piste); background: color-mix(in srgb, var(--fxv-piste) 14%, var(--surface)); }
.st-fxv-piste { position: relative; min-height: var(--h-fxv, 24px); cursor: text; touch-action: none; user-select: none; }
.st-fxv-vide { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font: 11px var(--f-texte); color: var(--encre-2); pointer-events: none; }
.st-fxv-vide[hidden] { display: none; }
.st-fxv-tete { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #c62828; pointer-events: none; will-change: transform; z-index: 3; }
.st-fxv-tete[hidden] { display: none; }
.st-fxv-clip { position: absolute; box-sizing: border-box; display: flex; align-items: center; padding: 0 8px; border-radius: 5px; background: color-mix(in srgb, var(--fxv) 22%, var(--surface)); border: 1px solid color-mix(in srgb, var(--fxv) 60%, var(--trait)); color: var(--encre); font: 700 var(--t-xs)/1 var(--f-texte); cursor: grab; overflow: hidden; white-space: nowrap; }
.st-fxv-clip span { overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.st-fxv-clip::before, .st-fxv-clip::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; }
.st-fxv-clip::before { left: 0; } .st-fxv-clip::after { right: 0; }
.st-fxv-clip:hover { border-color: var(--fxv); }
.st-fxv-clip.sel { background: color-mix(in srgb, var(--fxv) 45%, var(--surface)); border-color: var(--fxv); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fxv) 35%, transparent); }
.st-fxv-banque { display: flex; flex-wrap: nowrap; gap: 4px; }
.st-fxv-banque[hidden] { display: none; }
.st-fxv-puce { border: 1px solid color-mix(in srgb, var(--fxv) 45%, var(--trait)); background: color-mix(in srgb, var(--fxv) 9%, var(--surface)); color: var(--encre); border-radius: 6px; padding: 3px 8px; font: 600 var(--t-xs)/1.2 var(--f-texte); cursor: grab; }
.st-fxv-puce:hover { border-color: var(--fxv); }
.st-fxv-reglages { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 12px; }
.st-fxv-reglages:empty { display: none; }
.st-fxv-titre { color: var(--fxv); }
.st-fxv-reglage { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--encre-2); }
.st-fxv-reglage input[type="range"] { width: 90px; accent-color: var(--fxv); }
.st-fxv-reglage .chiffre { min-width: 3.4em; color: var(--encre); font-variant-numeric: tabular-nums; }
.st-video-boite { flex: 1 1 0; min-height: 0; position: relative; overflow: hidden; display: flex; }
.st-video-boite > video { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #000; }
.studio-yt-cadre > .st-fxv-voile { position: absolute; z-index: 1; pointer-events: none; }
.studio-yt-cadre > .st-fxv-voile[hidden] { display: none; }
/* Les couleurs : celles de ⚙ Options (David, 31/10 : « choisir les couleurs des timelines et des éléments qui viennent
   dessus »), sinon celles d'origine ; la piste prend sa couleur à elle (--…-piste), en teinte légère. */
.st-cq { display: grid; gap: 4px; margin: 0 4px 2px; min-width: 0; --cq: var(--c-images, #c2410c); --cq-piste: var(--c-images-piste, var(--cq)); --cq-dose: var(--dose-images, 6%); }
.st-cq[data-piste="images"] { grid-area: cqimages; }
.st-cq[data-piste="logo"] { grid-area: cqlogo; --cq: var(--c-logo, #0e7490); --cq-piste: var(--c-logo-piste, var(--cq)); --cq-dose: var(--dose-logo, 6%); }
.st-cq-piste[data-piste="logo"] { min-height: var(--h-logo, 28px); }
.st-cq[hidden] { display: none; }
.st-cq-cadre { position: relative; border-radius: 6px; background: color-mix(in srgb, var(--cq-piste) var(--cq-dose, 6%), var(--surface)); border: 1px dashed color-mix(in srgb, var(--cq-piste) 35%, var(--trait)); overflow: hidden; }
.st-cq.depot .st-cq-cadre { border-style: solid; border-color: var(--cq-piste); background: color-mix(in srgb, var(--cq-piste) 14%, var(--surface)); }
.st-cq-piste { position: relative; min-height: var(--h-images, 28px); cursor: text; touch-action: none; user-select: none; }
.st-cq-vide { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font: 11px var(--f-texte); color: var(--encre-2); pointer-events: none; }
.st-cq-vide[hidden] { display: none; }
.st-cq-tete { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #c62828; pointer-events: none; will-change: transform; z-index: 3; }
.st-cq-tete[hidden] { display: none; }
.st-cq-clip { position: absolute; box-sizing: border-box; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 3px; border-radius: 5px; background: color-mix(in srgb, var(--cq) 18%, var(--surface)); border: 1px solid color-mix(in srgb, var(--cq) 55%, var(--trait)); color: var(--encre); font: 700 var(--t-xs)/1 var(--f-texte); cursor: grab; overflow: hidden; white-space: nowrap; }
.st-cq-clip img { height: calc(100% - 6px); aspect-ratio: 1; object-fit: cover; border-radius: 3px; flex: none; pointer-events: none; background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
.st-cq-clip span { overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.st-cq-clip::before, .st-cq-clip::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 1; }
.st-cq-clip::before { left: 0; } .st-cq-clip::after { right: 0; }
.st-cq-clip:hover { border-color: var(--cq); }
.st-cq-clip.sel { background: color-mix(in srgb, var(--cq) 38%, var(--surface)); border-color: var(--cq); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cq) 35%, transparent); }
.st-cq-ajout { cursor: pointer; }
.st-cq-reglages { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 12px; }
.st-cq-reglages:empty { display: none; }
.st-cq-titre { color: var(--cq); max-width: 18em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-cq-reglage { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--encre-2); }
.st-cq-reglage input[type="range"] { width: 80px; accent-color: var(--cq); }
.st-cq-reglage select { font: inherit; }
.st-cq-reglage .chiffre { min-width: 3.2em; color: var(--encre); font-variant-numeric: tabular-nums; }
.studio-yt-cadre > .st-calques { position: absolute; z-index: 2; overflow: hidden; pointer-events: none; }
.studio-yt-cadre > .st-calques[hidden] { display: none; }
.st-calques > :is(img, video) { position: absolute; transform-origin: center; user-select: none; pointer-events: none; object-fit: fill; }
.st-calques > :is(img, video).sel { pointer-events: auto; cursor: move; outline: 1px dashed rgba(255,255,255,.9); outline-offset: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }

/* Le studio à son adresse (studio.dacodec.com, David, 31/10) : il remplit la page, comme en plein écran ; ni Fermer ni ⤢
   (la fenêtre du navigateur est sa taille). */
.fenetre-studio.autonome { padding: 0; background: var(--surface); }
.fenetre-studio.autonome > div { width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: none; max-height: none; min-width: 0; min-height: 0; border-radius: 0; resize: none; box-shadow: none; }
.fenetre-studio.autonome :is([data-fermer], [data-st-agrandir]) { display: none; }

/* Nouvelle version en ligne (David, 31/10) : comme le bouton de la prépa, en haut du studio. */
.studio-haut .st-nouvelle-version { background: #ffd7a8; color: #2a1840; border-color: #ffd7a8; font-weight: 700; white-space: nowrap; }
.studio-haut .st-nouvelle-version:hover { background: #fff; }