/* Omni-Vidéo — © 2026 Ferrus Dantioch
   Licence : Creative Commons BY-NC-ND 4.0 (texte complet dans le fichier LICENSE)
   https://creativecommons.org/licenses/by-nc-nd/4.0/ */

/* ============================================================
   OMNI-VIDÉO — feuille de style
   Principes appliqués :
   - pensé pour une tablette tactile, en paysage comme en portrait
   - boutons larges (au moins 56 px de haut), toujours une icône ET un texte
   - aucune animation agressive, aucun clignotement
   - le réglage « réduire les animations » de la tablette est respecté
   - aucun blanc pur ni noir pur dans l'interface : pas de lumière forte
   Les couleurs sont regroupées tout en haut (partie 2).
   ============================================================ */


/* ---------- 1. Polices ----------
   Les trois polices du thème Omni-système, rangées DANS l'application
   (fichiers .woff2 à côté de celui-ci) : elles marchent donc hors ligne.
   Ce sont exactement les fichiers de L'Atelier et d'Omni-Time.
   Licence : SIL Open Font License 1.1 (fichier POLICES-OFL.txt). */

@font-face {
  font-family: "Oxanium";               /* titres et boutons */
  src: url("./oxanium.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;                   /* le texte s'affiche tout de suite */
}
@font-face {
  font-family: "Literata";              /* texte courant */
  src: url("./literata.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";        /* chiffres (durées, tailles) */
  src: url("./jetbrains-mono.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}


/* ---------- 2. Couleurs et formes du thème Omni-système ----------
   Valeurs reprises À L'IDENTIQUE du portfolio de l'Omni-système, de
   L'Atelier (css/theme.css) et d'Omni-Time (thème « omni ») : mêmes noms
   de variables qu'Omni-Time. Ne pas les « améliorer ». */
:root {
  --fond:        #14111d;   /* « nuit » : encre violette très sombre */
  --surface:     #1d1929;   /* « table » : cartes, panneaux */
  --surface-2:   #251f35;   /* « table haute » : boutons, un cran plus clair */
  --trait:       #332c47;   /* filets et bordures */
  --texte:       #e9e4f2;   /* texte principal, jamais blanc pur */
  --discret:     #a59cbb;   /* texte secondaire */
  --accent:      #a777ff;   /* violet du logo */
  --accent-texte:#140d24;   /* texte posé sur un bouton violet */
  --halo:        #d6c2ff;   /* lueur de l'anneau (focus, liens) */
  --lien:        #d6c2ff;
  --or:          #c9a24a;   /* or « Fantasy » du portfolio (avertissements) */
  --bleu:        #5fb4ff;   /* bleu « Space opéra » du portfolio (informations) */
  --danger:      #e0705f;   /* actions qui font perdre quelque chose */
  --danger-fond: #3a2027;
  --danger-texte:#e9e4f2;

  --f-titre:     "Oxanium", "Trebuchet MS", system-ui, sans-serif;
  --f-texte:     "Literata", Georgia, "Times New Roman", serif;
  --f-chiffres:  "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Cartes à la façon du portfolio : liseré épais en haut, coins plus
     arrondis en bas qu'en haut. */
  --carte-bord:   1px solid #332c47;
  --carte-lisere: 4px solid #a777ff;
  --rayon-carte:  6px 6px 14px 14px;
  --rayon-bouton: 10px;

  /* Bord des boutons : à mi-chemin entre le texte secondaire et le fond,
     pour qu'on voie bien où appuyer, sans trait éblouissant. */
  --bord-bouton: color-mix(in srgb, var(--discret) 45%, var(--fond));
  --duree: 400ms;           /* toutes les transitions, volontairement lentes */
  --hauteur-apercu: 42vh;   /* hauteur du cadre d'aperçu du montage */

  color-scheme: dark;
}


/* ---------- 3. Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* Un élément marqué « hidden » est toujours caché, quoi qu'il arrive */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-tap-highlight-color: transparent;
}

main {
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
}

/* Écrans simples (accueil, test, à propos) : une colonne de lecture.
   L'écran du projet, lui, prend toute la largeur (partie 7). */
.vue-etroite { max-width: 760px; margin: 0 auto; }

h1, h2, h3 { font-family: var(--f-titre); line-height: 1.15; margin: 0; }
h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.3rem; font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 700; }
h1:focus, h2:focus { outline: none; }   /* le titre reçoit le focus en changeant d'écran */
p { margin: 0; }

a { color: var(--lien); text-underline-offset: 3px; overflow-wrap: anywhere; }

:focus-visible {
  outline: 3px solid var(--halo);
  outline-offset: 3px;
  border-radius: 6px;
}

small, .aide { color: var(--discret); font-size: 0.92rem; }

/* Petit libellé en capitales espacées (style du portfolio) */
.etiquette {
  font-family: var(--f-titre);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--discret);
}

.mono { font-family: var(--f-chiffres); font-variant-numeric: tabular-nums; }

/* Texte réservé aux lecteurs d'écran : invisible, mais lu à voix haute */
.annonce {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pile { display: grid; gap: 18px; }

.erreur {
  color: var(--danger-texte);
  background: var(--danger-fond);
  border: 2px solid var(--danger);
  border-radius: 12px;
  padding: 12px 14px;
}

.avis {
  color: var(--texte);
  background: var(--surface-2);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.95rem;
}

/* Les icônes : toujours accompagnées d'un texte, jamais seules */
.icone { width: 26px; height: 26px; flex-shrink: 0; display: block; }


/* ---------- 4. Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 16px;
  border: 2px solid var(--bord-bouton);
  border-radius: var(--rayon-bouton);
  background: var(--surface-2);
  color: var(--texte);
  font: 700 1.05rem/1.2 var(--f-titre);
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* évite la sélection de texte et le menu « copier » sur un appui long */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  transition: background-color var(--duree), border-color var(--duree), color var(--duree);
}

.bouton-principal {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-texte);
}

.bouton:disabled { opacity: 0.45; cursor: not-allowed; }

/* Bouton « armé » : premier appui fait sur une action qui fait perdre
   quelque chose ; il faut appuyer une seconde fois pour confirmer. */
.bouton.arme {
  background: var(--danger-fond);
  border-color: var(--danger);
  color: var(--danger-texte);
}

/* Bouton discret (actions secondaires sur une carte) */
.bouton-discret { background: transparent; }

.large  { width: 100%; }
.grand  { width: 100%; min-height: 64px; font-size: 1.15rem; }
.enorme { width: 100%; min-height: 84px; font-size: 1.4rem; letter-spacing: 0.04em; }

.rangee-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rangee-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }


/* ---------- 5. Cartes, blocs, bandeaux ---------- */

.carte, .bloc {
  background: var(--surface);
  border: var(--carte-bord);
  border-top: var(--carte-lisere);
  border-radius: var(--rayon-carte);
  padding: 18px;
}
.bloc { display: grid; gap: 12px; }

.bandeau {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: var(--rayon-carte);
}
.bandeau strong { font-family: var(--f-titre); font-size: 1.15rem; }
.bandeau.attention { border-color: var(--or); }
.bandeau.probleme  { border-color: var(--danger); }

.vide {
  padding: 16px;
  color: var(--discret);
  border: 2px dashed var(--trait);
  border-radius: 14px;
}


/* ---------- 6. Accueil ---------- */

.entete {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0 20px;
}
.logo { width: 56px; height: 56px; display: block; flex-shrink: 0; }

/* Le nom « Omni-Vidéo » garde la police du logo */
.marque {
  font-family: "Oxanium", "Trebuchet MS", system-ui, sans-serif;
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.marque span { color: var(--accent); }
.marque-petite { font-size: 1.5rem; }

.liste-projets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.projet-carte { display: grid; gap: 12px; }
.projet-nom { font-size: 1.3rem; overflow-wrap: anywhere; }
.projet-resume { color: var(--discret); font-size: 0.95rem; }

.pied {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 32px;
}

.signature {
  margin-top: 28px;
  text-align: center;
  color: var(--discret);
  font-family: var(--f-titre);
  letter-spacing: 0.06em;
}


/* ---------- 7. Barre du haut des autres écrans ---------- */

.barre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 56px;
  margin-bottom: 16px;
}
.retour { min-height: 52px; padding: 8px 14px; font-size: 1rem; flex-shrink: 0; }
.barre h1 { overflow-wrap: anywhere; flex: 1 1 200px; }
.etat-sauvegarde { color: var(--discret); font-size: 0.9rem; }


/* ---------- 8. Fenêtres (renommer, créer un projet…) ----------
   On utilise <dialog> : le reste de la page est grisé derrière. */

dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 22px;
  color: var(--texte);
  background: var(--surface);
  border: var(--carte-bord);
  border-top: var(--carte-lisere);
  border-radius: var(--rayon-carte);
}
dialog::backdrop { background: rgb(10 8 16 / 0.75); }
dialog form { display: grid; gap: 16px; }

label.champ { display: grid; gap: 6px; font-family: var(--f-titre); font-weight: 600; }

input[type="text"] {
  min-height: 56px;
  padding: 10px 14px;
  border: 2px solid var(--bord-bouton);
  border-radius: var(--rayon-bouton);
  background: var(--fond);
  color: var(--texte);
  font: 1.1rem var(--f-texte);
}
input[type="text"]:focus { border-color: var(--accent); outline: none; }

/* Grandes cases à choix (format horizontal / vertical) */
.choix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border: 0; padding: 0; margin: 0; }
.choix legend { font-family: var(--f-titre); font-weight: 600; margin-bottom: 8px; padding: 0; }
.choix label {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px 10px;
  border: 2px solid var(--bord-bouton);
  border-radius: var(--rayon-bouton);
  background: var(--surface-2);
  text-align: center;
  cursor: pointer;
}
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }
.choix label:has(input:focus-visible) { outline: 3px solid var(--halo); outline-offset: 3px; }
.choix strong { font-family: var(--f-titre); }
/* Petit rectangle qui montre la forme de l'image */
.choix.choix-3 { grid-template-columns: repeat(3, 1fr); }
.forme { display: block; border: 2px solid var(--accent); border-radius: 4px; }
.forme-169 { width: 64px; height: 36px; }
.forme-916 { width: 26px; height: 46px; }


/* ---------- 9. Écran du projet ----------
   En paysage : l'aperçu à gauche, mes fichiers à droite.
   En portrait : l'aperçu en haut, mes fichiers en dessous. */

.vue-projet { max-width: 1500px; margin: 0 auto; }
.vue-projet > .bandeau { margin-bottom: 18px; }

.espace-projet {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (orientation: landscape) and (min-width: 900px) {
  .espace-projet { grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); align-items: start; }
}

/* Zone d'aperçu : un cadre qui a la forme de la vidéo finale.
   « container-type » permet de calculer la hauteur à partir de la
   largeur disponible (unité cqw), sans jamais dépasser 58 % de l'écran. */
.zone-apercu { container-type: inline-size; display: grid; gap: 12px; }
.cadre-apercu {
  --ratio-l: 16;
  --ratio-h: 9;
  position: relative;
  aspect-ratio: var(--ratio-l) / var(--ratio-h);
  /* Assez petit pour laisser la place à la chronologie en dessous */
  height: min(var(--hauteur-apercu), 100cqw * var(--ratio-h) / var(--ratio-l));
  max-width: 100%;
  justify-self: center;
  overflow: hidden;
  /* Le fond de la vidéo est noir, comme sur YouTube : c'est le contenu
     de la vidéo, pas l'interface. */
  background: #000;
  border: 1px solid var(--trait);
  border-radius: 8px;
}
.cadre-apercu[data-format="9:16"] { --ratio-l: 9; --ratio-h: 16; }
/* Les deux lecteurs vidéo et les deux images du montage sont superposés.
   lecteur.js règle la transparence et le glissement de chacun (pendant une
   transition, deux sont visibles à la fois). Un lecteur inutilisé reste
   transparent (et non caché), pour que la tablette prépare déjà son image. */
.cadre-apercu video,
.cadre-apercu img.couche { opacity: 0; }
.cadre-apercu video,
.cadre-apercu img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;        /* toute l'image, avec des bandes si besoin */
}
.cadre-apercu[data-ajustement="remplir"] video,
.cadre-apercu[data-ajustement="remplir"] img { object-fit: cover; }

/* Message affiché au milieu de l'aperçu (vide, musique…) */
.apercu-message {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  color: var(--discret);
  background: var(--fond);
  z-index: 4;   /* au-dessus des vidéos (1 et 2) et des textes (3) */
}
.apercu-message .icone { width: 48px; height: 48px; color: var(--accent); }

/* Commandes de l'aperçu du montage : une seule rangée de gros boutons */
.commandes-montage { display: grid; grid-template-columns: 1fr 1fr 2fr 1fr 1fr; gap: 8px; }
.commandes-montage .bouton { padding: 8px 4px; font-family: var(--f-chiffres); font-size: 1rem; }
.commandes-montage .bouton-principal { font-family: var(--f-titre); }
.temps-montage { text-align: center; font-size: 1.15rem; }
.temps-montage .mono { font-weight: 700; }
.discret { color: var(--discret); }

/* Commandes de lecture : de gros boutons, la barre de temps en dessous */
.commandes-lecture { display: grid; gap: 10px; }
.boutons-lecture { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px; }
.temps-lecture { display: flex; justify-content: space-between; color: var(--discret); font-size: 1rem; }
.temps-lecture .mono { color: var(--texte); }

/* Barre de temps : un curseur épais, facile à attraper au doigt */
input[type="range"] {
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  accent-color: var(--accent);
  touch-action: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--trait);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--halo);
}
input[type="range"] { -webkit-appearance: none; appearance: none; }

/* Panneau « Mes fichiers » */
.panneau { display: grid; gap: 14px; align-content: start; }
.boutons-import { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.boutons-import .bouton { flex-direction: column; min-height: 88px; padding: 10px 6px; font-size: 0.98rem; }
.boutons-import .icone { width: 32px; height: 32px; color: var(--accent); }

.liste-medias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.media {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px;
  background: var(--surface);
  border: var(--carte-bord);
  border-radius: 12px;
}
.media.utilise { border-left: 4px solid var(--accent); }
.media-details strong { color: var(--halo); font-weight: 600; }
.media.manquant, .media.illisible { border-style: dashed; }

/* Bouton « voir » = la miniature elle-même, grande cible tactile */
.media-voir {
  position: relative;
  width: 112px;
  height: 72px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--fond);
  cursor: pointer;
  touch-action: manipulation;
}
.media-voir img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-voir .icone { margin: auto; width: 34px; height: 34px; color: var(--accent); }
.media-duree {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgb(20 17 29 / 0.85);
  color: var(--texte);
  font: 600 0.8rem/1.5 var(--f-chiffres);
}

.media-infos { display: grid; gap: 6px; min-width: 0; }
.media-nom { font-family: var(--f-titre); font-weight: 600; overflow-wrap: anywhere; line-height: 1.25; }
.media-details { color: var(--discret); font-size: 0.88rem; }
.media-probleme { color: var(--or); font-size: 0.9rem; }
.media-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.media-actions .bouton { min-height: 48px; padding: 6px 12px; font-size: 0.92rem; }

/* Petite pastille « Verticale », « Horizontale »… */
.pastille {
  display: inline-block;
  padding: 1px 8px;
  margin-right: 4px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  font: 600 0.78rem/1.6 var(--f-titre);
  letter-spacing: 0.04em;
  color: var(--texte);
}


/* En paysage, « Mes fichiers » a sa propre barre de défilement, à la
   hauteur de l'aperçu : la chronologie reste visible en dessous. */
@media (orientation: landscape) and (min-width: 900px) {
  .panneau { max-height: calc(var(--hauteur-apercu) + 130px); overflow-y: auto; padding-right: 4px; }
}
/* Tablette peu haute (en paysage) : tout se resserre un peu pour que
   l'aperçu ET la chronologie tiennent dans l'écran. */
@media (orientation: landscape) and (max-height: 860px) {
  :root { --hauteur-apercu: 36vh; }
  .barre { margin-bottom: 10px; }
  .chronologie { margin-top: 12px; padding: 10px 12px; gap: 8px; }
  .chrono-aide { display: none; }
  .temps-montage { font-size: 1rem; }
  .zone-apercu { gap: 8px; }
}


/* ---------- 9 bis. La chronologie ---------- */

.chronologie {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
  background: var(--surface);
  border: var(--carte-bord);
  border-top: var(--carte-lisere);
  border-radius: var(--rayon-carte);
}
/* ⚠️ « minmax(0, 1fr) » et « min-width: 0 » : la bande, très large,
   ne doit jamais élargir la page (sinon elle grandirait sans fin). */
.chronologie { grid-template-columns: minmax(0, 1fr); }
.chronologie > * { min-width: 0; }
.chrono-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.chrono-aide { flex: 1 1 220px; }
.chrono-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.chrono-boutons .bouton { min-height: 52px; padding: 6px 12px; font-size: 0.95rem; }

/* La bande qui défile, et la ligne violette fixe au milieu */
.chrono-zone { position: relative; }
.chrono-defilement {
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x;               /* le doigt fait glisser la bande de côté */
  overscroll-behavior-x: contain;    /* sans faire « retour » dans Chrome */
  scrollbar-width: thin;
  scrollbar-color: var(--trait) transparent;
  border-radius: 8px;
  background: var(--fond);
}
/* Les lignes « textes et images », « sous-titres » et « sons » n'apparaissent
   que si elles contiennent quelque chose (chronologie.js règle --h-calques,
   --h-st et --h-pistes) */
.chrono-piste {
  --h-calques: 0px;
  --h-st: 0px;
  --h-pistes: 0px;
  position: relative;
  height: calc(26px + var(--h-calques) + var(--h-st) + 80px + var(--h-pistes) + 4px);
  /* un appui long n'ouvre pas le menu « copier / sélectionner » */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.chrono-regle { position: absolute; left: 0; right: 0; top: 0; height: 24px; }
.chrono-repere {
  position: absolute;
  top: 2px;
  padding-left: 4px;
  border-left: 1px solid var(--trait);
  color: var(--discret);
  font: 0.75rem/1.2 var(--f-chiffres);
  white-space: nowrap;
}
/* La ligne des textes et images incrustées (deux rangées de 17 px) */
.chrono-calques { position: absolute; left: 0; right: 0; top: 26px; height: var(--h-calques); }
.chrono-calque {
  position: absolute;
  height: 17px;
  padding: 0 6px;
  border: 1px solid var(--halo);
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 55%, var(--fond));
  color: var(--texte);
  font: 600 0.72rem/15px var(--f-titre);
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  touch-action: pan-x;
}
.chrono-calque-image { background: color-mix(in srgb, var(--bleu) 45%, var(--fond)); border-color: var(--bleu); }
.chrono-calque span { pointer-events: none; }
/* La ligne des sous-titres (une rangée, barres grises) */
.chrono-sous-titres { position: absolute; left: 0; right: 0; top: calc(26px + var(--h-calques)); height: var(--h-st); }
.chrono-sous-titre {
  position: absolute;
  top: 0;
  height: 17px;
  padding: 0 4px;
  border: 1px solid var(--discret);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--texte);
  font: 0.72rem/15px var(--f-texte);
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  touch-action: pan-x;
}
.chrono-sous-titre.selectionne { border-color: var(--halo); background: color-mix(in srgb, var(--accent) 30%, var(--fond)); }
.chrono-sous-titre span { pointer-events: none; }
.chrono-clips { position: absolute; left: 0; right: 0; top: calc(26px + var(--h-calques) + var(--h-st)); height: 76px; }

/* Les pastilles des transitions, posées sur la ligne des clips. Le
   conteneur laisse passer le doigt ; seules les pastilles l'attrapent. */
.chrono-transitions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(26px + var(--h-calques) + var(--h-st));
  height: 76px;
  pointer-events: none;
  z-index: 2;
}
.chrono-transition {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--bord-bouton);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--discret);
  pointer-events: auto;
  cursor: pointer;
  touch-action: pan-x;
}
.chrono-transition .icone { width: 22px; height: 22px; }
.chrono-transition.active {
  border-color: var(--halo);
  background: var(--accent);
  color: var(--accent-texte);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* La ligne de la musique et des voix off, sous les clips */
.chrono-pistes { position: absolute; left: 0; right: 0; top: calc(26px + var(--h-calques) + var(--h-st) + 80px); height: var(--h-pistes); }
.chrono-piste-audio {
  position: absolute;
  height: 17px;
  padding: 0 6px;
  border: 1px solid var(--or);
  border-radius: 5px;
  background: color-mix(in srgb, var(--or) 40%, var(--fond));
  color: var(--texte);
  font: 600 0.72rem/15px var(--f-titre);
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  touch-action: pan-x;
}
.chrono-voix { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 38%, var(--fond)); }
.chrono-piste-audio span { pointer-events: none; }
.chrono-clip {
  position: absolute;
  top: 0;
  height: 100%;
  border: 2px solid var(--fond);      /* le petit espace qui sépare deux clips */
  border-radius: 8px;
  background-color: var(--surface-2);
  background-repeat: repeat-x;        /* la miniature répétée tout le long du clip */
  background-size: auto 100%;
  background-position: left center;
  overflow: hidden;
  cursor: pointer;
}
.chrono-image { background-repeat: no-repeat; background-size: cover; }
.chrono-manquant { opacity: 0.45; border-style: dashed; border-color: var(--or); }
.chrono-clip.selectionne {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent);
  z-index: 1;
}
.chrono-clip-duree {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgb(20 17 29 / 0.85);
  color: var(--texte);
  font: 600 0.78rem/1.5 var(--f-chiffres);
}
.chrono-tete {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  margin-left: -2px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 10px var(--accent);
  pointer-events: none;               /* le doigt passe « à travers » */
  z-index: 2;
}
.chrono-vide {
  position: absolute;
  inset: 28px 16px auto;
  padding: 10px;
  text-align: center;
  color: var(--discret);
  background: var(--fond);
  z-index: 3;
}

/* Les outils du clip encadré */
.outils-clip { display: grid; gap: 8px; }
.outils-titre { color: var(--discret); font-size: 0.95rem; overflow-wrap: anywhere; }
.outils-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.outils-boutons .bouton { flex: 1 1 150px; min-height: 56px; padding: 6px 10px; font-size: 0.95rem; }
.outils-boutons .outil-image { flex: 0 1 90px; font-family: var(--f-chiffres); }
/* Le son du clip : un curseur et un bouton « Couper le son » */
.outil-vitesse { display: grid; gap: 6px; }
.outil-vitesse .ed-choix .bouton { flex: 1 1 90px; font-family: var(--f-chiffres); }
#outil-couleurs .champ-curseur { grid-template-columns: 6.5em 4.5em minmax(0, 1fr); align-items: center; gap: 8px; }
.outil-volume { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.outil-volume .champ-curseur { grid-template-columns: auto 4.5em minmax(0, 1fr); align-items: center; gap: 8px; }
.outil-volume .bouton { min-height: 52px; font-size: 0.95rem; }


/* La toile des textes et images, posée sur la vidéo de l'aperçu.
   « touch-action: none » : faire glisser un texte ne fait pas défiler la page. */
.toile-calques { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; touch-action: none; }


/* ---------- 9 ter. Onglets du panneau de droite ---------- */

/* Cinq onglets, toujours sur une seule rangée (le texte va à la ligne s'il le faut) */
/* Six onglets : deux rangées de trois (de la place pour les mots) */
.onglets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.onglet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 56px;
  padding: 6px 4px;
  border: 2px solid var(--bord-bouton);
  border-radius: var(--rayon-bouton);
  background: var(--surface);
  color: var(--discret);
  font: 700 0.95rem/1.15 var(--f-titre);
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
  touch-action: manipulation;
}
.onglet .icone { color: var(--discret); }
.onglet[aria-selected="true"] {
  color: var(--texte);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
}
.onglet[aria-selected="true"] .icone { color: var(--accent); }
.onglet-contenu { display: grid; gap: 14px; align-content: start; }

/* Listes des textes et des images incrustées */
.liste-calques { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.carte-calque {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: var(--carte-bord);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
}
.carte-calque .bouton { grid-row: span 2; min-height: 52px; }
.calque-apercu { font-size: 1.1rem; font-weight: 700; overflow-wrap: anywhere; white-space: pre-line; max-height: 3.2em; overflow: hidden; }
.carte-calque-image { grid-template-columns: 64px 1fr auto; border-left-color: var(--bleu); }
.carte-calque-image img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; }
.carte-calque-image .bouton { grid-row: auto; }

/* Choisir l'image à incruster */
.choix-incrustation { display: grid; gap: 10px; padding: 12px; border: 2px dashed var(--trait); border-radius: 12px; }
.choix-incrustation-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.choix-image {
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 2px solid var(--bord-bouton);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--texte);
  font: 0.8rem/1.2 var(--f-texte);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.choix-image img { width: 100%; height: 72px; object-fit: contain; background: var(--fond); border-radius: 6px; }

/* L'éditeur d'un texte ou d'une image */
.editeur-calque { display: grid; gap: 12px; align-content: start; }
.editeur-entete {
  position: sticky;              /* « Terminé » reste toujours à portée de doigt */
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  background: var(--fond);
}
.ed-section { display: grid; gap: 8px; }
details.ed-section {
  padding: 4px 12px 12px;
  background: var(--surface);
  border: var(--carte-bord);
  border-radius: 12px;
}
details.ed-section summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  font: 700 1rem var(--f-titre);
  cursor: pointer;
  touch-action: manipulation;
}
.ed-contenu { display: grid; gap: 10px; }
textarea {
  width: 100%;
  min-height: 84px;
  padding: 10px 14px;
  border: 2px solid var(--bord-bouton);
  border-radius: var(--rayon-bouton);
  background: var(--fond);
  color: var(--texte);
  font: 1.1rem/1.4 var(--f-texte);
  resize: vertical;
}
textarea:focus { border-color: var(--accent); outline: none; }
.champ-curseur { display: grid; gap: 2px; font-family: var(--f-titre); font-weight: 600; }
.ed-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-choix .bouton { flex: 1 1 120px; min-height: 52px; padding: 6px 10px; }
.ed-choix .bouton[aria-pressed="true"],
.ed-places .bouton[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--surface-2));
}
.ed-polices .bouton { font-weight: 700; letter-spacing: 0; }
/* Les pastilles de couleur : un rond de la couleur, et son nom dessous */
.ed-couleurs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pastille-couleur {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 64px;
  padding: 6px 2px;
  border: 2px solid var(--bord-bouton);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--texte);
  font: 600 0.8rem var(--f-titre);
  cursor: pointer;
}
.pastille-couleur::before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--couleur);
  border: 2px solid var(--discret);
}
.pastille-couleur[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); }
.ed-places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 320px; }
.ed-places .bouton { min-height: 52px; font-size: 1.3rem; }
.interrupteur { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.interrupteur input { width: 26px; height: 26px; accent-color: var(--accent); }


/* Onglet « Son » */
.bloc-son {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--surface);
  border: var(--carte-bord);
  border-radius: 12px;
}
.choix-musique-liste { display: grid; gap: 8px; }
.choix-musique { justify-content: flex-start; text-align: left; overflow-wrap: anywhere; }
.choix-musique .mono { margin-left: auto; color: var(--discret); }
.carte-piste {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  background: var(--fond);
  border: var(--carte-bord);
  border-left: 4px solid var(--or);
  border-radius: 12px;
}
.carte-piste-voix { border-left-color: var(--danger); }
.carte-piste .rangee-2 .bouton { min-height: 52px; font-size: 0.95rem; padding: 6px 8px; }

/* Les boutons d'un projet sur l'accueil, et les sauvegardes */
.projet-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.projet-actions .bouton { flex: 1 1 140px; }
.bloc-sauvegarde { display: grid; gap: 10px; }

/* ---------- Fenêtre « Fabriquer la vidéo » ---------- */
.export-etape { display: grid; gap: 14px; }
.export-pourcent { font-size: 2.6rem; font-weight: 700; text-align: center; color: var(--halo); }
.barre-progression {
  height: 22px;
  border-radius: 11px;
  background: var(--fond);
  border: 2px solid var(--trait);
  overflow: hidden;
}
.barre-progression span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 9px;
  transition: width 400ms ease;
}
#export-bilan { white-space: pre-line; }
.bloc-dernier { display: grid; gap: 10px; padding: 12px; border: 2px dashed var(--trait); border-radius: 12px; }
.export-avertissements { margin: 0; padding: 10px 14px 10px 30px; background: var(--surface-2); border-radius: 12px; font-size: 0.95rem; }
.attention-douce { border-left: 4px solid var(--or); }
.choix label:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

/* Onglet « Sous-titres » */
.st-decalages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.st-decalages .bouton { min-height: 52px; padding: 6px 4px; font-family: var(--f-chiffres); }
.carte-sous-titre { border-left-color: var(--discret); }
.carte-sous-titre .calque-apercu { font-weight: 400; font-size: 1rem; }
.carte-sous-titre.en-cours { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.pile-boutons { display: grid; gap: 10px; }

/* Enregistrement de la voix : un bouton rouge doux et un compteur, sans
   clignotement ; le reste du montage est grisé pour éviter les fausses
   manœuvres. */
#bouton-enregistrer.en-enregistrement { background: var(--danger); border-color: var(--danger); color: var(--accent-texte); }
.etat-enregistrement {
  padding: 10px 14px;
  border: 2px solid var(--danger);
  border-radius: 12px;
  background: var(--danger-fond);
  color: var(--danger-texte);
  font-size: 1.1rem;
  font-weight: 700;
}
.enregistrement-voix .chronologie,
.enregistrement-voix #commandes-montage,
.enregistrement-voix .onglets,
.enregistrement-voix .barre,
.enregistrement-voix .bloc-son:first-child,
.enregistrement-voix #liste-voix {
  opacity: 0.45;
  pointer-events: none;
}


/* ---------- 9 quater. Fenêtre « Voir un fichier » ---------- */

dialog.fenetre-large { width: min(900px, calc(100vw - 24px)); padding: 18px; }
.cadre-vision {
  position: relative;
  height: min(52vh, 520px);
  overflow: hidden;
  background: #000;            /* fond de la vidéo, comme sur YouTube */
  border-radius: 8px;
}
.cadre-vision video,
.cadre-vision img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }


/* ---------- 10. Écran « Vérifier ma tablette » ---------- */

.liste-tests { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.test {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  background: var(--surface);
  border: var(--carte-bord);
  border-left: 5px solid var(--trait);
  border-radius: 10px;
}
.test[data-niveau="ok"]        { border-left-color: var(--accent); }
.test[data-niveau="attention"] { border-left-color: var(--or); }
.test[data-niveau="info"]      { border-left-color: var(--bleu); }
.test[data-niveau="bloquant"]  { border-left-color: var(--danger); }
.test-symbole { font: 800 1.4rem/1.2 var(--f-titre); text-align: center; }
.test[data-niveau="ok"] .test-symbole        { color: var(--accent); }
.test[data-niveau="attention"] .test-symbole { color: var(--or); }
.test[data-niveau="info"] .test-symbole      { color: var(--bleu); }
.test[data-niveau="bloquant"] .test-symbole  { color: var(--danger); }
.test-titre { font-family: var(--f-titre); font-weight: 700; }
.test-explication { color: var(--discret); font-size: 0.95rem; }

/* « Place utilisée » : une ligne par sorte de fichiers, la taille à droite */
.bloc-place { display: grid; gap: 12px; }
.place-ligne {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 10px;
}
.place-entete { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.place-entete .mono { font-family: var(--f-chiffres); white-space: nowrap; }
.place-ligne .bouton { justify-self: start; }


/* ---------- 11. À propos ---------- */

.apropos-entete { display: flex; align-items: center; gap: 16px; }
.apropos-entete img { width: 84px; height: 84px; }
.adresse-mail { font-family: var(--f-chiffres); overflow-wrap: anywhere; }

/* Une fois l'application installée, la note d'installation ne sert plus */
@media (display-mode: standalone) {
  .note-installation { display: none; }
}


/* ---------- 12. Petit message en bas de l'écran ---------- */

.message-flottant {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 50;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 14px 18px;
  background: var(--surface-2);
  color: var(--texte);
  border: 2px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.45);
  font-size: 1rem;
  transition: opacity var(--duree);
}
.message-flottant.probleme { border-color: var(--danger); }
.message-flottant.cache { opacity: 0; pointer-events: none; }

/* ---------- Intro et fin réutilisables (intro.js) ---------- */
.liste-intro { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.carte-intro { display: grid; gap: 8px; padding: 10px 12px; background: var(--surface-2); border-radius: 10px; }
.carte-intro .media-nom { margin: 0; }

/* ---------- Le guide de la première fois (guide.js) ---------- */
/* Pas de voile : la page reste utilisable, seule la bulle se pose dessus */
.guide { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.guide-bulle {
  pointer-events: auto;
  position: fixed;
  display: grid;
  gap: 10px;
  padding: 18px 18px 16px;
  background: var(--surface-2);
  color: var(--texte);
  border: 2px solid var(--accent);
  border-radius: 14px;
  box-shadow: 0 10px 32px rgb(0 0 0 / 0.5);
}
.guide-bulle h2 { margin: 0; font-size: 1.25rem; }
.guide-bulle p { margin: 0; }
/* L'élément montré est entouré d'un épais trait violet */
.guide-cible {
  outline: 4px solid var(--accent);
  outline-offset: 4px;
  box-shadow: 0 0 24px 6px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Écran de chargement, affiché avant que l'application ne démarre */
.chargement { padding: 40px 16px; text-align: center; color: var(--discret); }


/* ---------- 13. Réduire les animations ----------
   Si la tablette demande moins d'animations, on les coupe toutes. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}


/* ---------- Onglet « YouTube » (youtube.js) ---------- */
.cadre-miniature { position: relative; justify-self: center; width: 100%; max-width: 480px; }
.miniature-apercu {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;          /* le fond de l'IMAGE, pas de l'interface */
  border: 1px solid var(--trait);
  border-radius: 8px;
}
.miniature-apercu[data-format="9:16"] { aspect-ratio: 9 / 16; max-width: 240px; margin: 0 auto; }
.miniature-attente {
  position: absolute;
  inset: auto 8px 8px 8px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--fond) 85%, transparent);
  font-size: 0.95rem;
  text-align: center;
}
.liste-chapitres { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.carte-chapitre { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.carte-chapitre .bouton { min-height: 56px; padding: 6px 12px; }
.carte-chapitre .mono { font-family: var(--f-chiffres); min-width: 5.5em; }
.carte-chapitre input {
  min-height: 56px;
  min-width: 0;
  padding: 8px 12px;
  border: 2px solid var(--bord-bouton);
  border-radius: var(--rayon-bouton);
  background: var(--fond);
  color: var(--texte);
  font: 1.05rem var(--f-texte);
}
.carte-chapitre input:focus { border-color: var(--accent); outline: none; }
.liste-soucis { margin: 0; padding: 10px 14px 10px 32px; display: grid; gap: 4px; }
#chapitres-texte { font-family: var(--f-chiffres); }
/* Les chapitres dans la règle de la chronologie : un petit drapeau */
.chrono-chapitre {
  position: absolute;
  top: 0;
  max-width: 140px;
  padding: 0 6px 0 5px;
  border-left: 3px solid var(--or);
  color: var(--or);
  font: 700 0.72rem/1.4 var(--f-titre);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  pointer-events: none;
}