/* Pose ta voix : feuille de style
   Pose ta voix. Copyright 2026 les contributeurs de Pose ta voix. Sous licence EUPL-1.2.
   SPDX-License-Identifier: EUPL-1.2
   Identité : une cabine de doublage calme, dont l'élément fort est la bande de montage,
   sombre et perforée comme une pellicule, avec une tête de lecture ambre. */

/* ---------- Police Andika (SIL, licence OFL-1.1), hébergée avec l'application ---------- */
@font-face {
  font-family: "Andika";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/andika-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Andika";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/andika-latin-700-normal.woff2") format("woff2");
}

/* ---------- Palette ---------- */
:root {
  color-scheme: light;
  --nuit: #1c2340;        /* texte, bandeau, bande de montage */
  --brume: #edf0f5;       /* fond de page */
  --blanc: #ffffff;       /* surfaces */
  --lagune: #146b7a;      /* action principale */
  --lagune-clair: #dcedf0;
  --rouge: #c3261e;       /* enregistrement uniquement */
  --rouge-clair: #fbe7e5;
  --rouge-vif: #ff5a4f;   /* tête de lecture pendant l'enregistrement (sur fond sombre) */
  --ambre: #f5b83d;       /* tête de lecture, prise en attente */
  --ambre-clair: #fdf1d8;
  --doux: #4b5770;        /* texte secondaire */
  --trait: #cfd6e2;       /* bordures */
  --vert: #2b6e3a;
  --bleu-aide: #1f5aa6;
  --bleu-aide-clair: #eaf1fb;
  /* Bande de montage */
  --bande: #1c2340;
  --perfo: #38416a;
  --onde: #7e8fb8;
  --prise: #5cb8c6;       /* prises sur la frise */
  --prise-fonce: #217e8c;  /* onglet « Tes prises » */
  --idee: #b9a6f2;        /* idées du texte sur la frise */
  --idee-fonce: #6a4fc0;  /* onglet « Idées du texte » */

  --rayon: .6rem;
  --rayon-petit: .4rem;
  --cible: 44px;          /* taille minimale des cibles tactiles */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--brume);
  color: var(--nuit);
  font-family: Andika, "Andika New Basic", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
}
h1, h2, h3 { line-height: 1.2; font-weight: 700; }
h1 { font-size: 1.75rem; margin: .25rem 0 1rem; }
h2 { font-size: 1.25rem; margin: 0 0 .6rem; }
h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
p { margin: 0 0 .6rem; }
a { color: var(--lagune); }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* Focus toujours visible : contour sombre épais, lisible sur fond clair */
:focus-visible { outline: 3px solid var(--nuit); outline-offset: 3px; border-radius: 2px; }
.bandeau :focus-visible { outline-color: var(--blanc); }

.evitement { position: absolute; left: .5rem; top: -4rem; z-index: 2000; background: var(--blanc); color: var(--nuit); padding: .6rem 1rem; border-radius: var(--rayon-petit); font-weight: 700; }
.evitement:focus { top: .5rem; }

/* ---------- Bandeau ---------- */
.bandeau {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .25rem clamp(.75rem, 3vw, 1.5rem);
  background: var(--nuit); color: var(--blanc);
}
.bandeau p { margin: 0; }
.nom-app { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.25rem; }
.marque { width: 1.9rem; height: 1.9rem; border-radius: .5rem; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .35); }
.bandeau-droite { display: flex; align-items: center; gap: .6rem; }
.version { font-size: .85rem; color: #c9d0e3; }
.bandeau .btn-bandeau { background: transparent; color: var(--blanc); border-color: rgba(255, 255, 255, .6); min-height: 36px; padding: .2rem .7rem; }
.bandeau .btn-bandeau:hover { background: rgba(255, 255, 255, .1); }
.lien-bandeau { color: var(--blanc); text-underline-offset: 3px; }

main { max-width: 72rem; margin: 0 auto; padding: 1.25rem clamp(.75rem, 3vw, 1.5rem) 3rem; }

/* ---------- Boutons ---------- */
button, .bouton {
  font: inherit; font-weight: 700; line-height: 1.2;
  min-height: var(--cible); padding: .5rem 1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: var(--rayon-petit); border: 2px solid var(--lagune);
  background: var(--blanc); color: var(--lagune); cursor: pointer;
  text-decoration: none;
}
button:hover, .bouton:hover { background: var(--lagune-clair); }
button.principal, .bouton.principal { background: var(--lagune); color: var(--blanc); }
button.principal:hover, .bouton.principal:hover { background: #0f5764; }
button.discret { border-color: var(--trait); color: var(--doux); }
button.discret:hover { background: var(--brume); }
button.lien { border: 0; background: none; color: var(--lagune); text-decoration: underline; text-underline-offset: 3px; min-height: 36px; padding: .2rem .3rem; font-weight: 400; }
button.petit, .bouton.petit { min-height: 38px; padding: .3rem .75rem; font-size: .95rem; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:disabled:hover { background: inherit; }
.ico { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Champs ---------- */
input[type="url"], input[type="text"], input[type="number"], select {
  font: inherit; color: var(--nuit); background: var(--blanc);
  min-height: var(--cible); padding: .45rem .7rem;
  border: 2px solid var(--trait); border-radius: var(--rayon-petit);
}
input[type="url"]:hover, input[type="text"]:hover { border-color: #aab4c6; }
.ligne { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .5rem 0; }
.case { display: flex; align-items: center; gap: .55rem; min-height: var(--cible); cursor: pointer; }
.case input, .option input { width: 1.3rem; height: 1.3rem; accent-color: var(--lagune); flex: none; }
progress { width: 100%; height: .9rem; accent-color: var(--lagune); }

/* ---------- Écran 1 : choix de la vidéo ---------- */
.ecran-source { max-width: 46rem; margin: 1rem auto 0; }
.ecran-source h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-bottom: 1.25rem; }
.choix-sources { display: grid; gap: .75rem; }
.source { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.1rem 1.2rem; }
.titre-source { display: block; font-weight: 700; font-size: 1.1rem; margin-bottom: .2rem; }
.indication { color: var(--doux); font-size: .95rem; margin-bottom: .6rem; }
.source input[type="url"] { flex: 1 1 16rem; }
.ou { text-align: center; color: var(--doux); margin: 0; }
.msg-source { min-height: 1.5em; font-weight: 700; margin: 1rem 0 .3rem; }
.pied { color: var(--doux); font-size: .95rem; margin-top: 1rem; }

/* ---------- Écran 2 : le studio ----------
   Dès 640 px : deux colonnes (le film et le texte à lire ; le son puis les onglets),
   la frise sur toute la largeur en dessous et les commandes ancrées en bas.
   L'ensemble tient dans environ 680 px de haut à 808 px de large. */
main:has(> .studio:not([hidden])) { padding-top: .5rem; padding-bottom: 0; }
.plateau { display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); gap: .6rem; align-items: stretch; }
body.sans-prompteur .plateau { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); }
.colonne-film { min-width: 0; display: flex; flex-direction: column; }
.colonne-outils { min-width: 0; display: flex; flex-direction: column; gap: .6rem; }

.entete-studio { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .25rem; min-width: 0; }
.entete-studio h1 { font-size: 1.1rem; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entete-studio button.lien { min-height: 28px; padding: 0 .2rem; font-size: .9rem; white-space: nowrap; }

.cadre-video { position: relative; background: #000; border-radius: var(--rayon); overflow: hidden; outline: 4px solid transparent; outline-offset: -4px; }
video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
body.enregistre .cadre-video { outline-color: var(--rouge); }
#compte { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(3rem, 12vw, 6rem); font-weight: 700; color: var(--blanc); text-shadow: 0 0 16px #000; pointer-events: none; }
.voyant {
  display: none; position: absolute; top: .6rem; left: .6rem; margin: 0;
  align-items: center; gap: .45rem; padding: .25rem .7rem .25rem .55rem;
  background: var(--rouge); color: var(--blanc); font-weight: 700; font-size: .9rem; border-radius: 2rem;
}
.voyant span { width: .7rem; height: .7rem; border-radius: 50%; background: var(--blanc); animation: clignote 1.2s ease-in-out infinite; }
body.enregistre .voyant { display: inline-flex; }
@keyframes clignote { 50% { opacity: .25; } }

.ligne-sous-video { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem .5rem; margin: .2rem 0 .3rem; }
.ligne-sous-video .case { min-height: 34px; font-size: .93rem; }
.ligne-sous-video button.petit { min-height: 34px; padding: .2rem .65rem; font-size: .9rem; }

/* Texte à lire : hauteur fixe, sa place reste réservée quand il est masqué (prompteur à la demande) */
.prompteur { height: 6.1rem; background: var(--nuit); color: var(--blanc); border-radius: var(--rayon); padding: .5rem .8rem; display: flex; flex-direction: column; overflow: hidden; }
.prompteur.masque { visibility: hidden; }
body.sans-prompteur .prompteur { display: none; }
.prompteur-vide { color: #dfe4f1; margin: 0; font-size: .98rem; }
.prompteur-cadre { flex: 1 1 auto; min-height: 0; max-height: 2.7em; overflow: hidden; font-size: 1.1rem; line-height: 1.3; font-weight: 700; }
.prompteur-actuel { margin: 0; }
.prompteur-progression { flex: none; height: 5px; margin: .3rem 0 .25rem; background: #38416a; border-radius: 3px; overflow: hidden; }
#prompteur-barre { height: 100%; width: 0; background: var(--ambre); }
/* « Ensuite » est une étiquette d'interface, jamais à lire : marge à gauche, petites capitales, gris, police système */
.prompteur-suite { flex: none; margin: 0; display: flex; align-items: baseline; gap: .55rem; min-height: 1.35em; white-space: nowrap; overflow: hidden; }
.etiquette-suite { flex: none; font: 600 .68rem/1 system-ui, -apple-system, "Segoe UI", sans-serif; font-variant-caps: all-small-caps; letter-spacing: .06em; color: #8f99b9; }
.etiquette-suite:empty { display: none; }
.prompteur-suivant { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; color: #c3cbe2; }

/* Le son : sous la frise, sur une seule ligne quand la largeur le permet */
.reglages { margin-top: .5rem; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .35rem .75rem; }
.ligne-son { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .9rem; }
.ligne-son h2 { font-size: 1rem; margin: 0; }
@media (max-width: 1023px) { .titre-son { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.reglage { display: flex; align-items: center; gap: .35rem; min-height: 38px; }
.reglage .titre-reglage { margin: 0; font-size: .93rem; white-space: nowrap; }
.reglage select { min-height: 34px; padding: .15rem .45rem; font-size: .93rem; }
.reglage input[type="range"] { width: 5.5rem; min-height: 26px; }
.reglage .valeur { font-size: .82rem; color: var(--doux); min-width: 4.4rem; }
.reglage .case { min-height: 34px; font-size: .93rem; }
.reglages .bulle-aide { margin: .35rem 0 .3rem; }
#aide-modes p { margin: 0 0 .3rem; }
#aide-modes p:last-child { margin: 0; }
input[type="range"] { width: 100%; accent-color: var(--lagune); }
/* Niveau de la voix, en bas de la vidéo pendant l'enregistrement : fond distinct et bordure marquée, même vide */
.niveau-voix { display: none; position: absolute; left: .6rem; right: .6rem; bottom: .6rem; align-items: center; gap: .45rem; padding: .3rem .6rem; border-radius: 2rem; background: rgba(28, 35, 64, .78); color: var(--blanc); }
body.enregistre .niveau-voix { display: flex; }
.vumetre { flex: 1; height: .75rem; border-radius: .4rem; overflow: hidden; background: #3a4470; border: 1px solid #b3bdd8; }
.alerte-video { position: absolute; left: 50%; bottom: 2.7rem; transform: translateX(-50%); margin: 0; padding: .25rem .7rem; border-radius: 2rem; background: var(--rouge); color: var(--blanc); font-weight: 700; font-size: .9rem; white-space: nowrap; }
.alerte-video:empty { display: none; }
#vumetre-barre { height: 100%; width: 0; background: var(--vert); transition: width 60ms linear; }
.alerte { color: var(--rouge); font-weight: 700; font-size: .9rem; }
fieldset { border: 0; padding: 0; margin: 0 0 .5rem; min-width: 0; }
legend, .titre-reglage { display: block; font-weight: 700; margin-bottom: .3rem; padding: 0; }
.option {
  display: flex; align-items: center; gap: .55rem; min-height: 40px;
  padding: .2rem .65rem; margin-bottom: .35rem; cursor: pointer;
  border: 2px solid var(--trait); border-radius: var(--rayon-petit); background: var(--blanc);
}
.option:hover { border-color: #aab4c6; }
.option:has(input:checked) { border-color: var(--lagune); background: var(--lagune-clair); font-weight: 700; }
.option:has(input:focus-visible) { outline: 3px solid var(--nuit); outline-offset: 2px; }

/* ---------- Onglets « Tes prises » et « Idées du texte » ----------
   Leur hauteur suit celle de la colonne du film : un contenu plus long défile à l'intérieur. */
.onglets { flex: 1 1 0; min-height: 14rem; contain: size; display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }
.liste-onglets { flex: none; display: flex; border-bottom: 1px solid var(--trait); background: var(--brume); }
.onglet {
  flex: 1 1 0; min-width: 0; min-height: 40px; padding: .25rem .5rem; gap: .35rem;
  border: 0; border-bottom: 4px solid transparent; border-radius: 0;
  background: transparent; color: var(--doux); font-size: .95rem;
}
.onglet:hover { background: #e2e7f0; }
.onglet > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onglet[aria-selected="true"] { background: var(--blanc); color: var(--nuit); }
.onglet-prises .ico { color: var(--prise-fonce); }
.onglet-idees .ico { color: var(--idee-fonce); }
.onglet-prises[aria-selected="true"] { border-bottom-color: var(--prise-fonce); }
.onglet-idees[aria-selected="true"] { border-bottom-color: var(--idee-fonce); }
.onglet:focus-visible { outline-offset: -4px; }
.nb { font-weight: 400; }
.panneau-onglet { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.panneau-onglet > .zone-defile { flex: 1 1 0; min-height: 3rem; }
.panneau-onglet > .consigne { flex: none; margin: 0; padding: .45rem .75rem .35rem; }
/* Le bas de l'onglet reste fixe : ses boutons sont toujours à portée de main */
.bas-onglet { flex: none; border-top: 1px solid var(--trait); padding: .35rem .75rem .45rem; background: var(--blanc); }
.bas-onglet .calage { margin: 0 0 .35rem; padding: 0 0 .35rem; }
.bas-onglet .pied-onglet { margin: 0; }
.bas-onglet .bulle-aide { margin: 0 0 .35rem; }

/* Zones qui défilent : ascenseur dessiné par l'application, toujours visible, et ombre au bord coupé */
.zone-defile { position: relative; }
.zone-defile > .defile {
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
}
.zone-defile > .defile::-webkit-scrollbar { display: none; }
.zone-defile.deborde > .defile { padding-right: 1.35rem; }
.panneau-onglet .defile, .apercu-idees {
  padding: .1rem .75rem .4rem;
  background:
    linear-gradient(var(--blanc) 30%, rgba(255, 255, 255, 0)) top / 100% 1.6rem no-repeat local,
    linear-gradient(rgba(255, 255, 255, 0), var(--blanc) 70%) bottom / 100% 1.6rem no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(28, 35, 64, .25), transparent) top / 100% .7rem no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(28, 35, 64, .25), transparent) bottom / 100% .7rem no-repeat scroll;
  background-color: var(--blanc);
}
.rail { display: none; position: absolute; top: .35rem; bottom: .35rem; right: .3rem; width: .6rem; border-radius: 1rem; background: #e1e6ef; touch-action: none; cursor: pointer; }
.zone-defile.deborde > .rail { display: block; }
.curseur { position: absolute; left: 0; right: 0; min-height: 1.6rem; border-radius: 1rem; background: #78839c; }
.rail:hover .curseur, .rail.saisi .curseur { background: var(--nuit); }

.consigne { font-size: .88rem; color: var(--doux); margin: 0 0 .35rem; }
.vide { color: var(--doux); font-size: .95rem; }
.liste-prises { list-style: none; padding: 0; margin: 0; }
.liste-prises li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; padding: .3rem 0; border-top: 1px solid var(--trait); }
.liste-prises li:first-child, .prompteur-portions li:first-child { border-top: 0; }
.liste-prises li span { flex: 1 1 8rem; font-variant-numeric: tabular-nums; font-size: .95rem; }
.liste-prises button.petit, .calage button.petit, .pied-onglet button.petit, .pied-onglet .bouton.petit, .prompteur-portions button.petit { min-height: 34px; padding: .2rem .6rem; font-size: .9rem; }
.calage { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .45rem; border-bottom: 1px solid var(--trait); font-size: .92rem; }
.calage .titre-reglage { margin: 0 .2rem 0 0; font-weight: 400; color: var(--doux); }
.calage-valeur { color: var(--doux); font-size: .85rem; }
/* Le bouton du bas est du côté de son onglet : à gauche pour les prises, à droite pour les idées */
.pied-onglet { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.pied-droite { justify-content: flex-end; }
#fichier-son:focus-visible + label { outline: 3px solid var(--nuit); outline-offset: 3px; }
#aide-import { margin-top: .4rem; }

/* Choix entre deux versions d'une prise */
/* Toujours visible en haut de l'onglet, au-dessus de la liste qui défile */
.choix { flex: none; background: var(--ambre-clair); border-top: 2px solid #b27c10; border-bottom: 2px solid #b27c10; padding: .45rem .7rem .55rem; font-size: .92rem; }
.choix p { margin: 0 0 .3rem; }
.choix fieldset { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; }
.choix legend { float: left; margin: 0 .2rem 0 0; font-weight: 700; }
.choix .option { min-height: 34px; margin: 0; padding: .1rem .55rem; }
.choix .ligne { margin: .35rem 0 0; gap: .4rem; }
.choix button { min-height: 36px; padding: .25rem .65rem; font-size: .92rem; }

/* Idées du texte */
.prompteur-portions { list-style: none; padding: 0; margin: 0; counter-reset: idee; }
.prompteur-portions li { counter-increment: idee; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .5rem; align-items: center; padding: .3rem 0 .35rem .55rem; border-top: 1px solid var(--trait); border-left: 4px solid transparent; }
.prompteur-portions li.calee { border-left-color: var(--idee-fonce); }
.prompteur-portions li.courante { background: #f3effd; }
.prompteur-portions .extrait { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: .95rem; }
.prompteur-portions .extrait::before { content: counter(idee) ". "; }
.prompteur-portions .etat-calage { grid-column: 1; grid-row: 2; color: var(--doux); font-size: .85rem; }
.actions-portion { grid-column: 2; grid-row: 2; display: flex; gap: .3rem; }
.actions-portion button.retirer { min-width: 34px; padding: 0; font-size: 1.15rem; border-color: var(--trait); color: var(--doux); }

/* ---------- Frise : toute la largeur ---------- */
.table-montage { margin-top: .5rem; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .4rem .6rem .55rem; }
.legende-frise { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem .5rem; margin-bottom: .35rem; }
.legende-frise button.petit { min-height: 32px; padding: .15rem .6rem; font-size: .9rem; }
.titre-frise { font-weight: 700; margin-right: auto; margin-left: .2rem; }
.temps { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--doux); }
.frise { display: block; width: 100%; height: 92px; cursor: pointer; touch-action: none; border-radius: 10px; }

/* Commandes : sous le son quand tout tient dans la fenêtre ; sinon elles restent collées en bas (position collante) */
.console {
  position: sticky; bottom: 0; z-index: 50; margin-top: .5rem;
  display: flex; justify-content: center; gap: .5rem;
  padding: .45rem .6rem calc(.45rem + env(safe-area-inset-bottom, 0px));
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
}
.console.ancree { border-radius: var(--rayon) var(--rayon) 0 0; box-shadow: 0 -.4rem 1rem rgba(28, 35, 64, .16); }
.console button { flex: 0 1 11.5rem; min-height: 46px; padding: .4rem .8rem; font-size: 1.02rem; white-space: nowrap; }
.console button.exporter { margin-left: auto; }
#repere-console { height: 1px; }
button.enregistrer { background: var(--blanc); color: var(--rouge); border-color: var(--rouge); }
button.enregistrer:hover { background: var(--rouge-clair); }
body.enregistre button.enregistrer { background: var(--rouge); color: var(--blanc); opacity: 1; }

.technique { margin-top: .4rem; font-size: .85rem; }
/* Pied du studio : informations techniques à gauche, liens vers le cadre d'utilisation et les mentions légales à droite */
.pied-studio { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .1rem 1rem; margin-top: .4rem; }
.pied-studio .technique { margin-top: 0; flex: 1 1 18rem; }
.pied-studio .liens-legaux { margin: 0; font-size: .85rem; min-height: 28px; align-items: center; }

/* ---------- Liens vers le cadre d'utilisation et les mentions légales ---------- */
.liens-legaux { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.technique summary { cursor: pointer; color: var(--doux); min-height: 28px; display: flex; align-items: center; width: fit-content; }
#journal { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-petit); padding: .6rem; max-height: 16rem; overflow: auto; white-space: pre-wrap; font-size: .8rem; }

.champ { display: grid; gap: .25rem; margin-bottom: .6rem; }
.champ label { font-weight: 700; }
.champ input { width: 100%; }
progress { width: 100%; height: .9rem; accent-color: var(--lagune); }
.etat-haute { margin: .6rem 0 0; font-size: .95rem; color: var(--doux); }
.etat-haute.pret { color: var(--vert); font-weight: 700; }
.etat-haute.echec { color: #8a5300; font-weight: 700; }

/* ---------- Annonces : toujours visibles en haut de l'écran ---------- */
.zone-annonces { position: fixed; top: 4.25rem; left: 50%; transform: translateX(-50%); width: min(40rem, calc(100% - 1.5rem)); z-index: 1000; pointer-events: none; }
.annonce {
  pointer-events: auto; display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: .75rem;
  background: var(--blanc); border: 3px solid var(--lagune); border-radius: var(--rayon); padding: .7rem .8rem;
  box-shadow: 0 .6rem 1.6rem rgba(28, 35, 64, .28); animation: entree .35s ease-out;
}
.annonce p { margin: 0; font-weight: 700; }
.annonce-icone { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; color: var(--blanc); background: var(--lagune); }
.annonce.avec-action { grid-template-columns: 2.2rem 1fr auto auto; }
.annonce-action { min-height: 40px; padding: .35rem .9rem; white-space: nowrap; }
.annonce-fermer { min-height: 38px; min-width: 38px; padding: 0; font-size: 1.4rem; border-color: var(--trait); color: var(--doux); }
.annonce-succes { border-color: var(--vert); }
.annonce-succes .annonce-icone { background: var(--vert); }
.annonce-aide { border-color: var(--bleu-aide); background: var(--bleu-aide-clair); }
.annonce-aide .annonce-icone { background: var(--bleu-aide); }
.annonce-alerte { border-color: var(--rouge); background: var(--rouge-clair); animation: entree .35s ease-out, pulsation .6s ease-in-out .35s 2; }
.annonce-alerte .annonce-icone { background: var(--rouge); }
@keyframes entree { from { opacity: 0; transform: translateY(-1.25rem) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pulsation { 50% { box-shadow: 0 0 0 .5rem rgba(195, 38, 30, .25), 0 .6rem 1.6rem rgba(28, 35, 64, .28); } }
.a-verifier { outline: 3px solid var(--rouge) !important; outline-offset: 3px; border-radius: var(--rayon-petit); animation: pulsation .6s ease-in-out 2; }

/* ---------- Pastilles d'aide ---------- */
.avec-aide { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.avec-aide > .option { flex: 1 1 auto; }
.avec-aide > .case { flex: 0 1 auto; }
.avec-aide > .titre-reglage { margin-bottom: 0; }
.pastille {
  width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 50%;
  font-size: .95rem; border-width: 2px; flex: none;
}
.avec-aide > .option + .pastille { margin-bottom: .4rem; }
.pastille[aria-expanded="true"] { background: var(--lagune); color: var(--blanc); }
.bulle-aide {
  flex-basis: 100%; margin: 0 0 .6rem; padding: .6rem .8rem; font-size: .95rem; line-height: 1.45;
  background: var(--bleu-aide-clair); border: 2px solid var(--bleu-aide); border-radius: var(--rayon-petit);
}

/* ---------- Formulaire de configuration (panneau Réglages et page Configurer) ---------- */
.reg-formulaire fieldset { border: 1px solid var(--trait); border-radius: var(--rayon-petit); padding: .6rem .9rem .8rem; margin: 0 0 .9rem; background: var(--blanc); }
.reg-formulaire legend { font-weight: 700; padding: 0 .3rem; }
.reg-case { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-height: 40px; }
.reg-case input { width: 1.2rem; height: 1.2rem; accent-color: var(--lagune); }
.reg-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .4rem 0; }
.reg-ligne label { flex: 1 1 12rem; }
.reg-formulaire input[type="url"] { width: 100%; margin-top: .3rem; }
.reg-aide { flex-basis: 100%; margin: .2rem 0 .3rem; font-size: .9rem; color: var(--doux); }
.reg-aide.ok { color: var(--vert); font-weight: 700; }
.reg-aide.probleme { color: var(--rouge); font-weight: 700; }

/* Sorties de partage */
.part-bloc { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-petit); padding: .6rem .9rem .8rem; margin-bottom: .9rem; }
.part-bloc h3 { font-size: 1rem; margin: .2rem 0 .5rem; }
.part-bloc input[type="text"], .part-bloc textarea { width: 100%; font: .85rem/1.4 ui-monospace, Menlo, Consolas, monospace; padding: .5rem; border: 2px solid var(--trait); border-radius: var(--rayon-petit); color: var(--nuit); }
.part-bloc input[type="number"] { width: 7rem; }
.part-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.part-qr { display: block; width: 180px; height: 180px; image-rendering: pixelated; border: 1px solid var(--trait); }

/* Panneau Réglages */
.panneau { width: min(60rem, calc(100% - 1.5rem)); max-height: calc(100% - 1.5rem); border: 0; border-radius: var(--rayon); padding: 1rem 1.25rem; background: var(--brume); color: var(--nuit); box-shadow: 0 1rem 3rem rgba(28, 35, 64, .35); }
.panneau::backdrop { background: rgba(28, 35, 64, .5); }
.panneau-entete { display: flex; justify-content: space-between; align-items: center; }
.panneau-entete h2 { margin: .2rem 0; }
.panneau-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
.panneau-corps h2 { font-size: 1.1rem; margin: 0 0 .5rem; }


/* ---------- Fenêtres « Exporter » et « Ton texte » ---------- */
.zone-annonces.zone-dialogue { position: static; transform: none; width: auto; margin: 0 0 .6rem; }
.zone-dialogue:empty { display: none; }
.zone-dialogue .annonce { animation: none; box-shadow: none; }
.fenetre-export { width: min(27rem, calc(100% - 1.5rem)); }
.fenetre-export .ligne { margin-top: .2rem; }
.fenetre-texte { width: min(58rem, calc(100% - 1.5rem)); height: min(37rem, calc(100% - 1.5rem)); }
.fenetre-texte[open] { display: flex; flex-direction: column; }
.texte-corps { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; }
.texte-saisie, .texte-apercu { display: flex; flex-direction: column; min-height: 0; }
.texte-saisie .indication, .texte-apercu .indication { margin-bottom: .4rem; }
.zone-textarea, .zone-apercu { flex: 1 1 0; min-height: 7rem; }
#prompteur-texte {
  display: block; width: 100%; height: 100%; resize: none;
  font: inherit; line-height: 1.5; color: var(--nuit); background: var(--blanc);
  padding: .55rem .7rem; border: 2px solid var(--trait); border-radius: var(--rayon-petit);
}
#prompteur-texte:read-only { background: var(--brume); }
.apercu-idees { margin: 0; list-style: none; border: 1px solid var(--trait); border-radius: var(--rayon-petit); counter-reset: idee; }
.apercu-idees li { counter-increment: idee; padding: .3rem 0; border-top: 1px solid var(--trait); }
.apercu-idees li:first-child { border-top: 0; }
.apercu-idees .extrait { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: .95rem; }
.apercu-idees .extrait::before { content: counter(idee) ". "; }
.apercu-idees .etat-calage { display: block; color: var(--doux); font-size: .85rem; }
.apercu-idees .vide { margin: .2rem 0; }
.pied-fenetre { margin: .7rem 0 0; }
.panneau-entete .btn-fermer { flex: none; }

/* ---------- Disposition empilée ----------
   Sous 640 px de large, ou sur une tablette en portrait hors d'un autre site (classe posée par le script).
   Ordre : le film, le texte à lire, la frise, les onglets, le son. */
html.empile .studio { display: flex; flex-direction: column; }
html.empile .plateau, html.empile .colonne-outils { display: contents; }
html.empile .colonne-film { order: 1; }
html.empile .table-montage { order: 2; }
html.empile .onglets { order: 3; margin-top: .6rem; contain: none; flex: none; height: 23rem; }
html.empile .reglages { order: 4; margin-top: .6rem; }
html.empile .console { order: 5; }
html.empile #repere-console { order: 6; }
html.empile .pied-studio { order: 7; }
html.empile .prompteur.masque { display: none; }
html.empile .console button.exporter { margin-left: 0; }
@media (max-width: 639px) {
  .texte-corps { grid-template-columns: 1fr; grid-template-rows: minmax(0, 3fr) minmax(0, 2fr); }
}
@media (max-width: 760px) {
  .panneau-corps { grid-template-columns: 1fr; }
  .version { display: none; }
  .bandeau .btn-bandeau span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bandeau .btn-bandeau { padding: .2rem .5rem; }
}
@media (max-width: 1000px) { .version { display: none; } }
.txt-court { display: none; }
#btn-prompteur.actif { background: var(--lagune-clair); }
.calage-valeur:empty { display: none; }
@media (max-width: 820px) {
  .txt-long { display: none; }
  .txt-court { display: inline; }
  .bas-onglet button.petit, .bas-onglet .bouton.petit { padding: .15rem .45rem; font-size: .86rem; }
  .bas-onglet .calage .titre-reglage { font-size: .86rem; }
  .bas-onglet .pied-onglet { gap: .3rem; }
  .console { gap: .4rem; }
  .console button { min-width: 0; padding: .35rem .45rem; font-size: .95rem; gap: .35rem; }
}
@media (max-width: 600px) {
  .annonce.avec-action { grid-template-columns: 2.2rem 1fr auto; }
  .annonce-action { grid-column: 2 / 3; grid-row: 2; justify-self: start; }
}
@media (max-width: 560px) {
  /* Téléphone : les cinq commandes sur une seule ligne, icône au-dessus du texte */
  .console { gap: .3rem; padding-left: .3rem; padding-right: .3rem; }
  .console button { white-space: normal; flex: 1 1 0; min-width: 0; flex-direction: column; gap: .1rem; padding: .35rem .15rem; font-size: .76rem; min-height: 54px; }
  .console .ico { width: 1.35em; height: 1.35em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .annonce-alerte { outline: 4px solid var(--rouge); outline-offset: 2px; }
}

.reg-texte textarea { width: 100%; font: inherit; padding: .45rem .6rem; border: 2px solid var(--trait); border-radius: var(--rayon-petit); margin-top: .3rem; resize: vertical; }
.reg-texte label { display: block; margin-top: .4rem; }
.technique summary::before { content: "▸"; margin-right: .45rem; }
.technique[open] summary::before { content: "▾"; }
.technique summary::-webkit-details-marker { display: none; }