/* ==========================================================================
   Kaz Kréol Prompt Studio — socle de mise en page et d'accessibilité.

   La page est composée de quatre blocs, un fichier PHP chacun :
     menu.php           → .kk-menu
     barre-actions.php  → .kk-actions
     barre-filtres.php  → .kk-filtres
     pied-de-page.php   → .kk-pied
   Le contenu de la page vit dans .kk-contenu, à l'intérieur de .kk-shell.

   Bureau (≥ 1024 px) : menu à gauche, barre d'action en haut, filtres juste dessous.
   Mobile  (< 1024 px) : menu fixe en haut, filtres fixes dessous, actions fixes en bas.
   ========================================================================== */

:root {
  color-scheme: dark;
  --kk-menu-largeur: 18rem;
  --kk-actions-hauteur: 4rem;
  --kk-filtres-hauteur: 3.5rem;
  --kk-fond: #0F1A17;
  --kk-panneau: #19202E;
  --kk-conteneur: #222B3D;
  --kk-texte: #dee3e6;
  --kk-texte-doux: #bcc9ce;
  --kk-contour: #869398;
  --kk-primaire: #4cd6fb;
  --kk-accent: #FB8500;

  /*
   * Fond de la zone de contenu — DÉRIVÉ de la palette, jamais saisi en dur.
   * Il est obtenu en éclaircissant la couleur de conteneur du studio avec la couleur de
   * texte : quelle que soit la teinte retenue plus haut, le contenu reste une version plus
   * claire de la même teinte, et le menu, la barre d'action et la barre de filtres gardent
   * le fond sombre d'origine.
   *
   * La proportion est plafonnée par l'accessibilité : au-delà d'environ 15 % de clair, les
   * libellés secondaires (--kk-contour) passeraient sous le rapport de contraste 3:1.
   * Pour éclaircir davantage, il faudrait d'abord éclaircir --kk-contour.
   */
  --kk-contenu-eclaircissement: 14%;
  --kk-contenu-fond: color-mix(
    in srgb,
    var(--kk-conteneur) calc(100% - var(--kk-contenu-eclaircissement)),
    var(--kk-texte) var(--kk-contenu-eclaircissement)
  );
}

/* Repli pour les navigateurs sans color-mix() : même ton, calculé une fois pour toutes. */
@supports not (background: color-mix(in srgb, red 50%, blue 50%)) {
  :root { --kk-contenu-fond: #3C4555; }
}

html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: var(--kk-fond); }

/* L'attribut natif doit toujours primer sur les utilitaires de mise en page
   (ex. `hidden` + `flex` sur les modales et les états conditionnels). */
[hidden] { display: none !important; }

button, a, input, select, textarea { outline-offset: 3px; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible { outline: 2px solid var(--kk-primaire); }

/* Lien d'évitement : premier élément focalisable de chaque page connectée. */
.kk-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--kk-primaire); color: #003642; padding: .625rem 1rem;
  border-radius: 0 0 .5rem 0; font-weight: 700; text-decoration: none;
}
.kk-skip-link:focus { left: 0; }

main:focus { outline: none; }
main:focus-visible { outline: 2px solid var(--kk-primaire); outline-offset: -2px; }

/* Rangées défilables : les entrées gardent leur largeur naturelle et défilent,
   au lieu d'être comprimées jusqu'à faire se chevaucher leurs libellés. */
.overflow-x-auto > *, .kk-filtres-piste > *, .kk-menu-nav > * { flex-shrink: 0; }
.material-symbols-outlined { flex-shrink: 0; }
::-webkit-scrollbar { display: none; }

/* ==========================================================================
   1. Menu
   ========================================================================== */

.kk-menu {
  position: fixed; inset: 0 auto 0 0; z-index: 50;
  width: var(--kk-menu-largeur);
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--kk-panneau);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
.kk-menu-corps { display: flex; flex-direction: column; overflow-y: auto; padding-top: 1rem; }
.kk-menu-section {
  margin: 1.5rem 0 .25rem; padding: 0 1rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--kk-contour);
}
.kk-menu-nav { display: flex; flex-direction: column; gap: .125rem; padding: 0 .5rem; }
.kk-menu-lien {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .75rem; border-radius: .5rem;
  font-size: 13px; color: var(--kk-texte-doux); text-decoration: none;
  transition: background-color .15s, color .15s;
}
.kk-menu-lien:hover { background: var(--kk-conteneur); color: var(--kk-texte); }
.kk-menu-lien.est-actif { background: var(--kk-conteneur); color: var(--kk-primaire); font-weight: 600; }
.kk-menu-pied { padding: 1rem; background: rgba(15, 26, 23, .6); }

/* ==========================================================================
   2. Conteneur, barre d'action, filtres, contenu, pied de page
   ========================================================================== */

.kk-shell { margin-left: var(--kk-menu-largeur); min-height: 100vh; display: flex; flex-direction: column; }

.kk-actions {
  position: fixed; top: 0; left: var(--kk-menu-largeur); right: 0; z-index: 40;
  height: var(--kk-actions-hauteur);
  display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem;
  background: rgba(25, 32, 46, .92); backdrop-filter: blur(12px);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .25);
}
.kk-actions-contexte { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.kk-actions-logo { height: 2rem; width: auto; object-fit: contain; }
.kk-actions-titres { display: flex; flex-direction: column; min-width: 0; }
.kk-actions-titre { font-size: 16px; font-weight: 600; color: var(--kk-texte); letter-spacing: -.01em; white-space: nowrap; }
.kk-actions-univers {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700;
  text-transform: uppercase; color: var(--kk-accent); white-space: nowrap;
}
.kk-actions-etat { display: none; align-items: center; gap: .25rem; font-size: 12px; color: var(--kk-contour); }
@media (min-width: 1280px) { .kk-actions-etat:not([hidden]) { display: flex; } }

.kk-actions-liste { display: flex; align-items: center; gap: .5rem; margin-left: auto; overflow-x: auto; }

.kk-action {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .45rem 1rem; border: 0; border-radius: .5rem;
  font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.kk-action-primaire { background: var(--kk-primaire); color: #003642; }
.kk-action-primaire:hover { background: #00b4d8; }
.kk-action-accent { background: var(--kk-accent); color: #5d2f00; }
.kk-action-accent:hover { background: #eb8f3b; }
.kk-action-neutre { background: var(--kk-conteneur); color: var(--kk-texte); }
.kk-action-neutre:hover { background: #343a3c; }
.kk-action-danger { background: #93000a; color: #ffdad6; }
.kk-action-danger:hover { background: #b3111c; }
.kk-action-badge {
  padding: 0 .375rem; border-radius: 9999px; background: rgba(0, 0, 0, .25);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px;
}

.kk-actions-compte { display: none; align-items: center; gap: .75rem; padding-left: .5rem; }
@media (min-width: 1280px) { .kk-actions-compte { display: flex; } }
.kk-actions-compte-texte { display: flex; flex-direction: column; text-align: right; }
.kk-actions-compte-nom { font-size: 14px; font-weight: 600; line-height: 1; color: var(--kk-texte); }
.kk-actions-compte-role {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700;
  text-transform: uppercase; color: #ffd795;
}
.kk-actions-avatar {
  width: 2rem; height: 2rem; border-radius: 9999px; background: var(--kk-primaire);
  display: flex; align-items: center; justify-content: center; color: #003642;
}

.kk-filtres {
  position: sticky; top: var(--kk-actions-hauteur); z-index: 30;
  margin-top: var(--kk-actions-hauteur);
  padding: .5rem 1.5rem;
  background: rgba(15, 26, 23, .94); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.kk-filtres-piste { display: flex; align-items: center; gap: .5rem; overflow-x: auto; padding-bottom: 2px; }

.kk-filtre { display: inline-flex; align-items: center; position: relative; }
.kk-filtre-recherche { flex: 1 1 16rem; min-width: 12rem; max-width: 28rem; }
.kk-filtre-icone { position: absolute; left: .7rem; font-size: 18px; color: var(--kk-contour); pointer-events: none; }
.kk-filtre-chevron { position: absolute; right: .375rem; font-size: 16px; color: var(--kk-contour); pointer-events: none; }
/* Le greffon `forms` de Tailwind style [type='search'] et select dans sa couche de base,
   injectée après cette feuille : on remonte la spécificité pour reprendre la main. */
.kk-filtres input.kk-filtre-champ,
.kk-filtres select.kk-filtre-champ {
  width: 100%; background: var(--kk-panneau); color: var(--kk-texte);
  border: 1px solid rgba(255, 255, 255, .08); border-radius: .5rem;
  padding: .45rem .75rem .45rem 2.6rem; font-size: 13px; line-height: 1.4;
  box-shadow: none; background-image: none;
}
.kk-filtres input.kk-filtre-champ::placeholder { color: var(--kk-contour); }
.kk-filtres input.kk-filtre-champ:focus,
.kk-filtres select.kk-filtre-champ:focus { border-color: var(--kk-primaire); outline: none; box-shadow: none; }
.kk-filtres select.kk-filtre-liste { appearance: none; -webkit-appearance: none; padding-right: 1.9rem; cursor: pointer; }
.kk-filtres input.kk-filtre-champ::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }

.kk-filtre-segments { background: var(--kk-panneau); border-radius: .5rem; padding: .125rem; gap: .125rem; }
.kk-segment {
  padding: .3rem .7rem; border: 0; border-radius: .375rem; background: transparent;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700;
  text-transform: uppercase; color: var(--kk-contour); cursor: pointer; white-space: nowrap;
}
.kk-segment:hover { color: var(--kk-texte); }
.kk-segment[aria-pressed="true"], .kk-segment.est-actif { background: var(--kk-conteneur); color: var(--kk-primaire); }

.kk-filtre-bascule {
  gap: .375rem; padding: .45rem .75rem; border: 1px solid rgba(255, 255, 255, .08);
  border-radius: .5rem; background: var(--kk-panneau); color: var(--kk-texte);
  font-size: 13px; cursor: pointer; white-space: nowrap;
}
.kk-filtre-bascule[aria-pressed="true"] { border-color: var(--kk-primaire); color: var(--kk-primaire); }
.kk-filtre-badge, .kk-onglet-badge {
  padding: 0 .375rem; border-radius: 9999px; background: var(--kk-fond); color: var(--kk-contour);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px;
}

.kk-filtre-onglets { display: flex; align-items: center; gap: .25rem; }
.kk-onglet {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .4rem .7rem; border-radius: .5rem; white-space: nowrap;
  font-size: 13px; color: var(--kk-texte-doux); text-decoration: none;
  transition: background-color .15s, color .15s;
}
.kk-onglet:hover { background: rgba(34, 43, 61, .6); color: var(--kk-texte); }
.kk-onglet.est-actif { background: var(--kk-conteneur); color: var(--kk-primaire); font-weight: 600; }
.kk-onglet.est-actif .kk-onglet-badge { background: rgba(76, 214, 251, .18); color: var(--kk-primaire); }

.kk-contenu { flex: 1 1 auto; width: 100%; padding: 1.5rem; background: var(--kk-contenu-fond); }
/* Sans barre de filtres, le contenu vient juste après la barre d'action fixe :
   il lui faut la même réserve d'espace que celle portée par .kk-filtres. */
.kk-actions + .kk-contenu { margin-top: var(--kk-actions-hauteur); }

.kk-pied {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem;
  padding: 1.25rem 1.5rem; margin-top: auto;
  background: var(--kk-panneau); border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: 12px; color: var(--kk-contour);
}
.kk-pied-bloc { display: flex; flex-direction: column; }
.kk-pied-marque { font-weight: 600; color: var(--kk-texte-doux); }
.kk-pied-liens { display: flex; flex-wrap: wrap; gap: 1rem; margin-left: auto; }
.kk-pied-liens a { color: var(--kk-texte-doux); text-decoration: none; }
.kk-pied-liens a:hover { color: var(--kk-primaire); text-decoration: underline; }
.kk-pied-mention { flex-basis: 100%; margin: 0; }

/* ==========================================================================
   3. Mobile et tablette : menu en haut, filtres dessous, actions en bas
   ========================================================================== */

@media (max-width: 1023px) {
  /* Menu et actions affichent icône + libellé : les deux barres gagnent en hauteur.
     Le menu occupe DEUX rangées : configuration au-dessus, fil de production en dessous. */
  :root {
    --kk-filtres-hauteur: 4rem;
    --kk-actions-hauteur: 4rem;
    --kk-menu-rang-config: 2.75rem;
    --kk-menu-rang-production: 4rem;
    --kk-menu-hauteur: calc(var(--kk-menu-rang-config) + var(--kk-menu-rang-production));
  }

  .kk-menu {
    inset: 0 0 auto 0; width: 100%; height: var(--kk-menu-hauteur);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
  }
  .kk-menu-pied, .kk-menu-section { display: none; }
  .kk-menu-corps { flex-direction: column; align-items: stretch; width: 100%; padding-top: 0; overflow: hidden; }
  .kk-menu-nav { flex-direction: row; gap: .25rem; padding: 0 .5rem; overflow-x: auto; }

  /* Rangée 1 — configuration : compacte, libellé à côté de l'icône. */
  .kk-menu-nav--configuration {
    order: 1; height: var(--kk-menu-rang-config);
    align-items: center; justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .kk-menu-nav--configuration .kk-menu-lien {
    flex-direction: row; gap: .375rem; min-height: 2.25rem; min-width: 0;
    padding: .25rem .625rem; white-space: nowrap;
  }
  .kk-menu-nav--configuration .kk-menu-lien .material-symbols-outlined { font-size: 18px; }
  .kk-menu-nav--configuration .kk-menu-libelle { font-size: 11px; font-weight: 600; }

  /* Rangée 2 — fil de production : les quatre écrans de travail, libellé sous l'icône. */
  .kk-menu-nav--production {
    order: 2; height: var(--kk-menu-rang-production);
    align-items: center; justify-content: space-between;
  }
  .kk-menu-nav--production .kk-menu-lien { flex: 1 1 0; }
  .kk-menu-lien {
    flex-direction: column; gap: .125rem;
    min-height: 44px; min-width: 4.5rem; padding: .375rem .5rem;
    text-align: center; line-height: 1.1; white-space: nowrap;
  }
  .kk-menu-lien .material-symbols-outlined { font-size: 22px; }
  .kk-menu-libelle { font-size: 11px; font-weight: 600; letter-spacing: .01em; }

  .kk-shell { margin-left: 0; }

  .kk-actions {
    top: auto; bottom: 0; left: 0; right: 0;
    box-shadow: 0 -1px 12px rgba(0, 0, 0, .45);
    padding: 0 .75rem;
  }
  .kk-actions-contexte, .kk-actions-compte, .kk-actions-etat { display: none; }
  .kk-actions-liste { margin-left: 0; width: 100%; justify-content: space-around; gap: .375rem; }
  .kk-action {
    flex-direction: column; gap: .125rem;
    min-height: 44px; min-width: 4.5rem; flex: 1 1 auto;
    justify-content: center; padding: .375rem .625rem;
    font-size: 11px; line-height: 1.1; text-align: center;
  }
  .kk-action .material-symbols-outlined { font-size: 22px; }
  .kk-action-libelle { font-size: 11px; font-weight: 600; letter-spacing: .01em; }

  .kk-filtres {
    position: fixed; top: var(--kk-menu-hauteur); left: 0; right: 0; z-index: 35;
    margin-top: 0; padding: .5rem .75rem; border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .kk-filtre-recherche { flex: 0 0 12rem; min-width: 10rem; }

  /* Le contenu se glisse entre les barres fixes. */
  .kk-contenu {
    padding: 1rem .75rem;
    margin-top: var(--kk-menu-hauteur);
    padding-bottom: calc(var(--kk-actions-hauteur) + 1rem);
  }
  body.kk-a-filtres .kk-contenu { margin-top: calc(var(--kk-menu-hauteur) + var(--kk-filtres-hauteur) + .5rem); }
  .kk-actions + .kk-contenu { margin-top: var(--kk-menu-hauteur); }
  .kk-pied { padding-bottom: calc(var(--kk-actions-hauteur) + 1rem); }
  .kk-contenu * { min-width: 0; }
  .kk-contenu img { max-width: 100%; }
}

/* Téléphones (CDC §2.3) : les libellés restent affichés, simplement resserrés
   pour que les quatre entrées principales du menu tiennent dans 320 px. */
@media (max-width: 639px) {
  .kk-menu-nav { gap: .125rem; padding: 0 .25rem; }
  .kk-menu-lien { min-width: 4rem; padding: .375rem .25rem; }
  .kk-menu-lien .material-symbols-outlined { font-size: 20px; }
  .kk-menu-libelle { font-size: 10px; }
  .kk-menu-nav--configuration .kk-menu-lien { padding: .25rem .375rem; }
  .kk-menu-nav--configuration .kk-menu-libelle { font-size: 10px; }

  .kk-actions { padding: 0 .5rem; }
  .kk-actions-liste { gap: .25rem; }
  .kk-action { min-width: 4rem; padding: .375rem .375rem; font-size: 10px; }
  .kk-action .material-symbols-outlined { font-size: 20px; }
  .kk-action-libelle { font-size: 10px; }

  .kk-contenu h1 { font-size: clamp(1.5rem, 7vw, 2rem) !important; line-height: 1.15 !important; }
}

/* ==========================================================================
   2 bis. Écran hors studio (« Mes Projets »)
   ==========================================================================
   Pas de menu, pas de barre d'action, pas de filtres : un en-tête qui rappelle
   le compte et permet de se déconnecter, puis le contenu. */

.kk-entete-simple {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1.5rem; min-height: 4rem;
  background: var(--kk-panneau);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .25);
}
.kk-entete-marque { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.kk-entete-logo { height: 2rem; width: auto; object-fit: contain; }
.kk-entete-titres { display: flex; flex-direction: column; min-width: 0; }
.kk-entete-titre { font-size: 16px; font-weight: 600; color: var(--kk-texte); white-space: nowrap; }
.kk-entete-sous-titre {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700;
  text-transform: uppercase; color: var(--kk-accent); white-space: nowrap;
}
.kk-entete-compte { display: flex; align-items: center; gap: .75rem; }
.kk-entete-compte-texte { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.kk-entete-compte-nom { font-size: 13px; color: var(--kk-texte); white-space: nowrap; }
.kk-entete-compte-role {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700;
  text-transform: uppercase; color: var(--kk-contour);
}
.kk-entete-deconnexion {
  display: flex; align-items: center; gap: .375rem; min-height: 44px;
  padding: .375rem .75rem; border-radius: .5rem;
  background: var(--kk-conteneur); color: var(--kk-texte);
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background-color .15s;
}
.kk-entete-deconnexion:hover { background: var(--kk-fond); }

.kk-contenu-simple { display: block; width: 100%; padding: 2rem 1.5rem 3rem; background: var(--kk-contenu-fond); min-height: calc(100vh - 8rem); }
.kk-pied-simple { justify-content: center; text-align: center; }

@media (max-width: 639px) {
  .kk-entete-simple { padding: .5rem .75rem; }
  .kk-entete-compte-texte { display: none; }
  .kk-contenu-simple { padding: 1.25rem .75rem 2rem; }
}

/* ==========================================================================
   2 bis bis. Aperçus par défaut
   ==========================================================================
   Les visuels de assets/img/apercu/ sont des pictogrammes carrés sur fond clair :
   affichés tels quels dans un cadre 16:9 ils seraient rognés, d'où `contain` et un
   fond neutre. Le sélecteur d'attribut attrape aussi les aperçus passés en simple
   repli d'une image absente, sans avoir à poser une classe à chaque appel. La règle
   suit le CDN Tailwind dans le <head> : elle l'emporte sur `object-cover`. */

.kk-apercu-defaut,
img[src*="/assets/img/apercu/"] {
  object-fit: contain;
  background: #f4f5f6;
  padding: 12%;
}

/* ==========================================================================
   2 bis ter. Zone de dépôt (Mes Vidéos)
   ==========================================================================
   Un fichier survolé doit se voir : la zone qui l'accueillera s'éclaire, que ce soit
   la liste des vidéos (écran vide compris) ou le champ du formulaire. */

.kk-depot-actif {
  outline: 2px dashed var(--kk-primaire);
  outline-offset: -6px;
  background: rgba(76, 214, 251, .06);
  border-radius: .75rem;
}

/* ==========================================================================
   2 ter. Historique des générations (Générateur IA)
   ==========================================================================
   Bureau : un tableau de sept colonnes. Sous 1024 px il devenait illisible — chaque
   en-tête se repliant en colonne d'une lettre — d'où un rendu en cartes, produit en
   même temps que le tableau : seule la CSS décide lequel s'affiche.
   La règle de repli vient AVANT la media query : à spécificité égale, la dernière
   déclarée gagnerait. */

.kk-histo-cartes { display: none; }

@media (max-width: 1023px) {
  .kk-histo-tableau { display: none; }
  .kk-histo-cartes { display: flex; flex-direction: column; gap: .5rem; padding: .5rem; margin: 0; list-style: none; }
  .kk-histo-carte {
    display: flex; flex-direction: column; gap: .5rem;
    padding: .75rem; border-radius: .75rem;
    background: var(--kk-conteneur);
    border: 1px solid rgba(255, 255, 255, .06);
  }
  .kk-histo-carte.est-active { border-color: var(--kk-primaire); }
}

/* ==========================================================================
   3 bis. Rail d'étapes du créateur de scène
   ==========================================================================
   Bureau : bandeau ordinaire dans le flux, une ligne d'étapes.
   Mobile : le rail se fixe sous le menu et se réorganise en grille de cinq
   colonnes ; un bloc de réserve garde la place qu'il occupait dans le flux. */

.kk-etapes-espace { display: none; }

@media (max-width: 1023px) {
  :root { --kk-etapes-hauteur: 9rem; }

  .kk-etapes {
    position: fixed; top: var(--kk-menu-hauteur); left: 0; right: 0; z-index: 34;
    margin: 0; border-radius: 0; padding: .375rem .5rem;
    background: var(--kk-panneau);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  }
  .kk-etapes-liste {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .25rem;
    min-width: 0 !important;
    align-items: stretch;
  }
  /* La barre de progression n'a plus de sens une fois les étapes en grille. */
  .kk-etapes-piste { display: none; }
  .kk-etapes-liste > li { gap: 0; }
  .kk-etapes-liste > li > button { width: 2.5rem !important; }
  .kk-etapes-liste > li > button .material-symbols-outlined { font-size: 18px; }
  .kk-etapes-liste > li > span {
    font-size: 9px; line-height: 1.1; text-align: center;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Le rail est fixe : cette réserve, placée en tête de page, lui garde sa hauteur.
     La valeur exacte est mesurée par assets/app.js ; celle-ci n'est qu'un repli. */
  .kk-etapes-espace { display: block; height: var(--kk-etapes-hauteur); }
}

@media (max-width: 639px) {
  .kk-etapes-liste > li > span { font-size: 8px; }
}

/* ==========================================================================
   3 ter. Schéma de la scène (dernière étape du créateur)
   ==========================================================================
   Le lieu occupe le centre ; personnages au-dessus, décors en dessous,
   habitation et ambiance sonore sur les côtés, caméra en bas. Les nœuds sont
   posés en pourcentage, donc le schéma se redimensionne avec son conteneur. */

/* Étape « Schéma » : le panneau prend toute la largeur, la colonne de droite s'efface. */
.kk-scene-schema .kk-scene-colonne-droite { display: none; }
@media (min-width: 1280px) {
  .kk-scene-schema .kk-scene-colonne-gauche { grid-column: span 12 / span 12; }
}

.kk-schema {
  position: relative; width: 100%;
  aspect-ratio: 16 / 10; min-height: 26rem;
  border-radius: .75rem; overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(76, 214, 251, .10), transparent 58%),
    var(--kk-fond);
  border: 1px solid var(--kk-conteneur);
}
.kk-schema-traits { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Repli si le greffon line-clamp n'est pas chargé par la version de Tailwind en place. */
.kk-schema + * .line-clamp-2, .line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kk-schema-champ {
  position: absolute; left: 26%; right: 26%; top: 56%; bottom: 3%;
  background: linear-gradient(to top, rgba(76, 214, 251, .16), rgba(76, 214, 251, 0));
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  pointer-events: none;
}
/* Schéma réduit (Générateur IA) : le même rendu, à 75 %, pour rester secondaire
   à côté du moteur, du format et du prompt final. `zoom` réduit la boîte de mise en page
   elle-même — contrairement à `transform`, qui laisserait un vide à la place. */
.kk-schema-reduit { zoom: .75; }
@supports not (zoom: 1) {
  .kk-schema-reduit { transform: scale(.75); transform-origin: top left; width: 133.34%; }
}

.kk-schema-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
.kk-schema-noeud { position: absolute; transform: translate(-50%, -50%); z-index: 3; }
.kk-schema-camera { position: absolute; left: 50%; bottom: .5rem; transform: translateX(-50%); z-index: 3; max-width: 92%; }
.kk-schema-ambiance {
  position: absolute; top: .5rem; left: .5rem; right: .5rem; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem;
}
.kk-schema-puce {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--kk-texte-doux); background: var(--kk-conteneur);
  padding: .125rem .375rem; border-radius: .25rem;
}

@media (max-width: 767px) {
  .kk-schema { aspect-ratio: 3 / 4; min-height: 30rem; }
  .kk-schema-noeud > div { max-width: 7.5rem; }
  .kk-schema-centre > div { max-width: 10rem; }
}

/* Zones tactiles : 44 px minimum sur écrans tactiles (CDC §9.2). */
@media (pointer: coarse) {
  a, button, [role="button"], select, summary { min-height: 44px; }
  .sb-handle { width: 24px; margin-left: -12px; }
}

/* Zoom navigateur à 200 % : le contenu se réorganise au lieu de déborder. */
@media (max-width: 640px) {
  .kk-contenu { overflow-wrap: anywhere; }
  table { display: block; overflow-x: auto; max-width: 100%; }
}

/* Respect de « réduire les animations » du système. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* Choix du type d'élément (première étape de la création dans le Répertoire). */
.kk-choix-type { border: 1px solid rgba(255, 255, 255, .08); cursor: pointer; }
.kk-choix-type:hover { border-color: var(--kk-contour); }
.kk-choix-type.est-suggere { border-color: var(--kk-primaire); box-shadow: 0 0 0 1px var(--kk-primaire) inset; }

/* Bouton de retrait d'un élément déjà choisi (croix blanche sur fond rouge). */
.kk-supprimer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex-shrink: 0;
  border: 0; border-radius: .375rem; cursor: pointer;
  background: #E63946; color: #fff;
  transition: background-color .15s;
}
.kk-supprimer:hover { background: #C62330; }
.kk-supprimer:focus-visible { outline: 2px solid var(--kk-primaire); outline-offset: 2px; }
.kk-supprimer .material-symbols-outlined { color: #fff; }

/* Variante compacte, pour les croix posées dans une puce (tag, couleur, référence). */
.kk-supprimer-mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.125rem; height: 1.125rem; min-height: 0; flex-shrink: 0;
  border: 0; border-radius: 9999px; cursor: pointer;
  background: #E63946; color: #fff; font-size: 12px; line-height: 1;
  transition: background-color .15s;
}
.kk-supprimer-mini:hover { background: #C62330; }
.kk-supprimer-mini:focus-visible { outline: 2px solid var(--kk-primaire); outline-offset: 2px; }

/* ------------------------------------------------------------------
   Montage (M8) — éditeur de plans
   Sélecteurs à spécificité ≥ 0,2,0 : le greffon `forms` de Tailwind injecte sa couche
   de base après ce fichier et gagnerait à égalité (voir .kk-filtres input.kk-filtre-champ).
   ------------------------------------------------------------------ */
#mt-form .mt-puce {
  padding: .25rem .625rem; border-radius: 9999px; font-size: 12px; font-weight: 600;
  background: var(--kk-conteneur, #222B3D); color: #bcc9ce; border: 1px solid transparent;
}
#mt-form .mt-puce:hover { color: #4cd6fb; border-color: #4cd6fb; }
#mt-plans input.mt-mini {
  width: 4.5rem; padding: .125rem .375rem; border-radius: .375rem; font-size: 12px;
  background: #19202E; color: #dee3e6; border: 1px solid #3d494d;
}
#mt-plans input.mt-mini:disabled { opacity: .45; }
#mt-plans select.mt-select {
  padding: .25rem 2rem .25rem .5rem; border-radius: .375rem; font-size: 13px;
  background-color: #19202E; color: #dee3e6; border: 1px solid #3d494d;
}
#mt-plans input.mt-mini:focus, #mt-plans select.mt-select:focus { border-color: #4cd6fb; outline: none; box-shadow: none; }
#mt-plans .mt-icone {
  display: inline-flex; align-items: center; justify-content: center; width: 1.875rem; height: 1.875rem;
  border-radius: .375rem; color: #869398; background: transparent;
}
#mt-plans .mt-icone:hover:not(:disabled) { background: #222B3D; color: #dee3e6; }
#mt-plans .mt-icone:disabled { opacity: .3; cursor: default; }
#mt-plans .mt-plan-glisse { opacity: .45; }
#mt-plans .mt-cible-avant { box-shadow: 0 -3px 0 0 #4cd6fb; }
#mt-plans .mt-cible-apres { box-shadow: 0 3px 0 0 #4cd6fb; }
@media (max-width: 639px) {
  #mt-plans .mt-plan { flex-wrap: wrap; }
  #mt-plans .mt-jonction { padding-left: .5rem; }
}

/* ------------------------------------------------------------------
   Montage (M8) — timeline : règle, piste vidéo enchaînée, pistes son
   ------------------------------------------------------------------ */
.mt-tl {
  --mt-entete: 88px;
  position: relative; border-radius: .75rem; background: #0F1A17;
  border: 1px solid #3d494d; user-select: none; -webkit-user-select: none;
}
.mt-tl-cadre { overflow-x: auto; overflow-y: hidden; border-radius: .75rem; }
.mt-tl-grille { position: relative; min-width: 100%; }
.mt-tl-rang { display: flex; height: 3.25rem; border-bottom: 1px solid rgba(61, 73, 77, .55); }
.mt-tl-rang:last-of-type { border-bottom: 0; }
.mt-tl-rang--regle { height: 1.75rem; background: #19202E; }
.mt-tl-rang--video { height: 4.25rem; }
.mt-tl-entete {
  position: sticky; left: 0; z-index: 8; flex: none; width: var(--mt-entete);
  display: flex; align-items: center; gap: .25rem; padding: 0 .5rem;
  background: #19202E; border-right: 1px solid #3d494d;
  font: 700 10px/1.2 'JetBrains Mono', monospace; letter-spacing: .04em; text-transform: uppercase; color: #869398;
}
.mt-tl-entete .material-symbols-outlined { font-size: 16px; }
.mt-tl-voie { position: relative; flex: none; }
.mt-tl-voie[data-voie="regle"] { cursor: pointer; }
.mt-tl-voie--son.mt-cible { background: rgba(76, 214, 251, .1); box-shadow: inset 0 0 0 1px #4cd6fb; }

.mt-graduation {
  position: absolute; top: 0; bottom: 0; border-left: 1px solid rgba(134, 147, 152, .45);
  padding: .4rem 0 0 .25rem; font: 500 10px/1 'JetBrains Mono', monospace; color: #869398; white-space: nowrap;
}
.mt-graduation--mineure { top: 65%; border-left-color: rgba(134, 147, 152, .25); }

/* Plans vidéo */
.mt-clip {
  position: absolute; top: .4rem; bottom: .4rem; display: flex; align-items: center; gap: .375rem;
  padding: 0 .625rem; border-radius: .5rem; overflow: hidden; cursor: grab; touch-action: none;
  background: linear-gradient(180deg, #1d4b57, #143640); border: 1px solid rgba(76, 214, 251, .45); color: #dee3e6;
}
.mt-clip:hover { border-color: #4cd6fb; }
.mt-clip.est-perdu { background: #3a1d22; border-color: #E63946; }
.mt-clip-vignette { flex: none; width: 3.5rem; height: 2.1rem; border-radius: .25rem; overflow: hidden; background: #000; }
.mt-clip-vignette video, .mt-clip-vignette img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mt-clip-texte { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.mt-clip-titre { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-clip-meta { font: 500 10px/1.3 'JetBrains Mono', monospace; color: #bcc9ce; white-space: nowrap; }
.mt-clip-muet { position: absolute; top: .2rem; right: .6rem; font-size: 15px; color: #ffd795; }

.mt-jonction {
  position: absolute; top: .1rem; z-index: 5; height: 1.3rem; display: flex; align-items: center; justify-content: center;
  border-radius: 9999px; color: #FB8500; border: 1px solid rgba(251, 133, 0, .7);
  background: repeating-linear-gradient(135deg, rgba(251, 133, 0, .28) 0 4px, rgba(15, 26, 23, .9) 4px 8px);
}
.mt-jonction .material-symbols-outlined { font-size: 14px; }
.mt-jonction--coupe { background: #0F1A17; color: #869398; border-color: #3d494d; }
.mt-jonction:hover { border-color: #ffd795; color: #ffd795; }

/* Sons */
.mt-son {
  position: absolute; top: .3rem; bottom: .3rem; border-radius: .375rem; overflow: hidden; cursor: grab; touch-action: none;
  background: rgba(42, 157, 143, .35); border: 1px solid #2A9D8F; color: #dee3e6;
}
.mt-son[data-cat="musique"] { background: rgba(251, 133, 0, .3); border-color: #FB8500; }
.mt-son[data-cat="import"] { background: rgba(231, 111, 81, .3); border-color: #E76F51; }
.mt-son.est-perdu { background: rgba(230, 57, 70, .25); border-color: #E63946; border-style: dashed; }
.mt-onde { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mt-son-titre {
  position: absolute; left: .5rem; top: .15rem; right: .5rem; display: flex; align-items: center; gap: .2rem;
  font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8); pointer-events: none;
}
.mt-son-titre .material-symbols-outlined { font-size: 13px; }

/* Commun aux éléments */
.mt-poignee { position: absolute; top: 0; bottom: 0; width: .55rem; z-index: 2; cursor: ew-resize; }
.mt-poignee--g { left: 0; }
.mt-poignee--d { right: 0; }
.mt-poignee:hover { background: rgba(255, 215, 149, .4); }
.mt-clip.est-choisi, .mt-son.est-choisi, .mt-jonction.est-choisi { outline: 2px solid #ffd795; outline-offset: 1px; z-index: 6; }
.mt-clip:focus-visible, .mt-son:focus-visible, .mt-jonction:focus-visible { outline: 2px solid #4cd6fb; outline-offset: 2px; }
.mt-clip.en-glisse, .mt-son.en-glisse { cursor: grabbing; opacity: .88; z-index: 7; box-shadow: 0 8px 18px rgba(0, 0, 0, .5); }
.mt-insertion { position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: #ffd795; z-index: 7; pointer-events: none; }

.mt-tl-tete { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #E63946; z-index: 7; pointer-events: none; }
.mt-tl-tete::before {
  content: ''; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top: 8px solid #E63946;
}
.mt-tl-horsjeu {
  position: absolute; top: 1.75rem; bottom: 0; right: 0; z-index: 4; pointer-events: none;
  border-left: 2px dashed rgba(230, 57, 70, .8);
  background: repeating-linear-gradient(135deg, rgba(230, 57, 70, .1) 0 6px, transparent 6px 12px);
}
.mt-bulle {
  position: absolute; z-index: 20; pointer-events: none; padding: .2rem .45rem; border-radius: .375rem;
  background: #ffd795; color: #271900; font: 600 11px/1.3 'JetBrains Mono', monospace; white-space: nowrap;
}

/* Inspecteur */
#mt-inspecteur .mt-insp-titre { display: flex; align-items: center; gap: .375rem; font-size: 15px; font-weight: 600; color: #dee3e6; }
#mt-inspecteur .mt-insp-champ { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
#mt-inspecteur .mt-insp-libelle { font: 700 10px/1.3 'JetBrains Mono', monospace; letter-spacing: .04em; text-transform: uppercase; color: #869398; }
#mt-inspecteur .mt-insp-aide { font-size: 11px; color: #869398; }
#mt-inspecteur input.mt-insp-nombre, #mt-inspecteur select.mt-insp-select {
  width: 100%; padding: .3rem .5rem; border-radius: .375rem; font-size: 13px;
  background-color: #19202E; color: #dee3e6; border: 1px solid #3d494d;
}
#mt-inspecteur select.mt-insp-select { padding-right: 2rem; }
#mt-inspecteur input.mt-insp-nombre:focus, #mt-inspecteur select.mt-insp-select:focus { border-color: #4cd6fb; outline: none; box-shadow: none; }
#mt-inspecteur input.mt-insp-nombre:disabled { opacity: .45; }
#mt-inspecteur .mt-insp-bouton {
  display: inline-flex; align-items: center; gap: .25rem; padding: .3rem .6rem; border-radius: .5rem;
  font-size: 12px; font-weight: 600; background: #222B3D; color: #dee3e6;
}
#mt-inspecteur .mt-insp-bouton:hover { color: #4cd6fb; }
#mt-inspecteur .mt-insp-bouton--danger:hover { color: #ffb4ab; }

/* Curseurs (zoom, volumes) */
input[type="range"].mt-zoom { accent-color: #4cd6fb; height: 1rem; background: transparent; }

/* Bibliothèque */
.mt-onglet { padding: .3rem .75rem; border-radius: .375rem; font-size: 13px; font-weight: 600; color: #bcc9ce; }
.mt-onglet.est-actif { background: #303638; color: #4cd6fb; }
.mt-biblio-son {
  display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem; border-radius: .5rem;
  background: #0F1A17; border: 1px solid rgba(61, 73, 77, .6); cursor: grab;
}
.mt-biblio-son:hover { border-color: #4cd6fb; }
.mt-biblio-son.est-perdu { opacity: .55; cursor: default; }
.mt-icone-rond {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border-radius: 9999px; background: #222B3D; color: #dee3e6;
}
.mt-icone-rond:hover:not(:disabled) { color: #4cd6fb; }
.mt-icone-rond:disabled { opacity: .35; }
.mt-icone-rond--primaire { background: #4cd6fb; color: #003642; }
.mt-icone-rond--primaire:hover:not(:disabled) { color: #001f27; background: #b3ebff; }
#mt-sons.kk-depot-actif { outline: 2px dashed #4cd6fb; outline-offset: 4px; border-radius: .5rem; }

@media (max-width: 639px) {
  .mt-tl { --mt-entete: 64px; }
  .mt-clip-vignette { display: none; }
}

/* Montage (M8) — fond des lecteurs : un gris neutre autour de l'image, pour distinguer le cadre
   de la vidéo (et ses éventuelles bandes noires) du fond du lecteur. */
.mt-ecran {
  background-color: #4b5259;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .035) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .035) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, .035) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .035) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  overflow: hidden;
}
#mt-editeur input.mt-tete-champ {
  width: 5.25rem; padding: .3rem .4rem; border-radius: .5rem; text-align: right;
  font: 500 12px/1.2 'JetBrains Mono', monospace; background-color: #0F1A17; color: #4cd6fb; border: 1px solid #3d494d;
}
#mt-editeur input.mt-tete-champ:focus { border-color: #4cd6fb; outline: none; box-shadow: none; }
#mt-editeur select.mt-choix-montage {
  max-width: 16rem; padding: .35rem 2rem .35rem .6rem; border-radius: .5rem; font-size: 13px;
  background-color: #222B3D; color: #dee3e6; border: 1px solid #3d494d;
}
#mt-editeur select.mt-choix-montage:focus { border-color: #4cd6fb; outline: none; box-shadow: none; }

/* ------------------------------------------------------------------
   Montage (M8, v1.33) — plans image, chutier, import d'éléments
   ------------------------------------------------------------------ */
.mt-clip.mt-clip--image { background: linear-gradient(180deg, #5a3326, #432419); border-color: rgba(231, 111, 81, .6); }
.mt-clip.mt-clip--image:hover { border-color: #E76F51; }
.mt-clip.mt-clip--image .mt-clip-vignette img { width: 100%; height: 100%; object-fit: cover; }
.mt-clip-vignette img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mt-son[data-cat="asset"] { background: rgba(231, 111, 81, .22); border-color: #E76F51; border-style: dotted; }
.mt-tl-vide {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: #869398; white-space: nowrap; pointer-events: none;
}
.mt-onglet-n:not(:empty) {
  display: inline-block; min-width: 1.2rem; margin-left: .2rem; padding: 0 .3rem; border-radius: 9999px;
  font: 700 10px/1.2rem 'JetBrains Mono', monospace; text-align: center; background: #19202E; color: #4cd6fb;
}
.mt-chutier-retirer {
  position: absolute; top: .3rem; right: .3rem; z-index: 2; width: 1.5rem; height: 1.5rem; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center; background: rgba(15, 26, 23, .85); color: #dee3e6;
  border: 1px solid #3d494d;
}
.mt-chutier-retirer:hover { background: #E63946; color: #fff; border-color: #E63946; }
.mt-biblio-son--decale { margin-left: 1rem; }
#mt-import-fenetre .mt-puce, #mt-choix-images .mt-puce {
  padding: .25rem .625rem; border-radius: 9999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: #222B3D; color: #bcc9ce; border: 1px solid transparent;
}
#mt-import-fenetre .mt-puce:hover, #mt-choix-images .mt-puce:hover { color: #4cd6fb; border-color: #4cd6fb; }
#mt-import-fenetre input.mt-import-recherche {
  width: 100%; padding: .45rem .75rem; border-radius: .5rem; font-size: 13px;
  background-color: #0F1A17; color: #dee3e6; border: 1px solid #3d494d;
}
#mt-import-fenetre input.mt-import-recherche:focus { border-color: #4cd6fb; outline: none; box-shadow: none; }
.mt-import-scene { display: flex; flex-direction: column; gap: .5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(61, 73, 77, .5); }
.mt-import-scene:last-child { border-bottom: 0; }
.mt-import-scene-vignette {
  flex: none; width: 3.5rem; height: 2.25rem; border-radius: .25rem; object-fit: cover; background: #222B3D;
  display: inline-flex; align-items: center; justify-content: center; color: #869398; font-size: 20px;
}
.mt-import-carte, .mt-choix-image {
  position: relative; display: flex; flex-direction: column; gap: .25rem; min-width: 0; padding: .375rem;
  border-radius: .625rem; background: #0F1A17; border: 1px solid rgba(61, 73, 77, .6); cursor: pointer;
}
.mt-import-carte:hover, .mt-choix-image:hover { border-color: #4cd6fb; }
.mt-import-carte:has(input:checked:not(:disabled)), .mt-choix-image:has(input:checked) { border-color: #4cd6fb; box-shadow: 0 0 0 1px #4cd6fb; }
.mt-import-carte.est-importe { cursor: default; opacity: .7; }
.mt-import-carte.est-importe:hover { border-color: rgba(61, 73, 77, .6); }
.mt-import-carte > input.mt-import-case, .mt-choix-image > input.mt-import-case { position: absolute; top: .6rem; left: .6rem; z-index: 2; }
input[type="checkbox"].mt-import-case {
  width: 1.15rem; height: 1.15rem; border-radius: .3rem; flex: none; cursor: pointer;
  background-color: #19202E; border: 1px solid #869398; color: #4cd6fb;
}
input[type="checkbox"].mt-import-case:disabled { cursor: default; opacity: .8; color: #2A9D8F; }
#mt-choix-images input.mt-tete-champ {
  width: 4.5rem; padding: .3rem .4rem; border-radius: .5rem; text-align: right;
  font: 500 12px/1.2 'JetBrains Mono', monospace; background-color: #0F1A17; color: #4cd6fb; border: 1px solid #3d494d;
}
#mt-choix-images input.mt-tete-champ:focus { border-color: #4cd6fb; outline: none; box-shadow: none; }

/* ==========================================================================
   Montage (M8, v1.34) — console NLE
   Le modèle « Studio NLE Cinematic System » : un bandeau de séquence, trois panneaux
   dockés (chutier, moniteur programme, inspecteur) et, en dessous, la timeline
   multipistes avec sa barre d'outils. Les panneaux se superposent par tons successifs,
   sans ombres lourdes : le studio garde une lecture fidèle des couleurs à l'image.
   ========================================================================== */

.mt-console {
  --mt-panneau: #19202E;
  --mt-panneau-haut: #222B3D;
  --mt-creux: #0F1A17;
  --mt-bordure: rgba(255, 255, 255, .06);
  display: flex; flex-direction: column; gap: .5rem;
  scroll-margin-top: 8rem;
}

/* ------------------------------------------------------------------ */
/* 1. Bandeau de séquence                                              */
/* ------------------------------------------------------------------ */
.mt-bandeau {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
  padding: .625rem .75rem; border-radius: .75rem;
  background: var(--mt-panneau-haut); box-shadow: inset 0 0 0 1px var(--mt-bordure);
}
.mt-bandeau-identite { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1 1 18rem; }
.mt-bandeau-icone {
  flex: none; width: 2rem; height: 2rem; border-radius: .5rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: #303638; color: #4cd6fb;
}
.mt-bandeau-titre {
  display: flex; align-items: center; gap: .5rem; min-width: 0;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 700; color: #dee3e6;
}
.mt-bandeau-sequence {
  font: 400 10px/14px 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .04em; color: #869398; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt-bandeau-navigation { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; }
.mt-bandeau-hud { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-left: auto; }
.mt-bandeau-actions { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; }

.mt-switch {
  display: inline-flex; align-items: center; gap: .25rem;
  background: #303638; border-radius: .5rem; padding: .125rem .5rem;
}
.mt-switch-libelle { font: 600 12px/1 'Plus Jakarta Sans', sans-serif; color: #bcc9ce; }

/* Timecodes de la séquence : toujours en chasse fixe, pour ne pas danser pendant la lecture. */
.mt-hud {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .25rem .625rem; border-radius: .5rem;
  background: var(--mt-creux); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
}
.mt-hud-cle { font: 700 10px/14px 'JetBrains Mono', ui-monospace, monospace; text-transform: uppercase; color: #869398; }
.mt-hud-valeur { font: 700 14px/20px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .04em; color: #4cd6fb; }
.mt-hud-valeur--total { color: #ffd795; }
.mt-hud-sep { color: #3d494d; font-weight: 700; }
.mt-hud-max {
  padding: 0 .25rem; border-radius: .25rem; background: #303638;
  font: 700 10px/16px 'JetBrains Mono', ui-monospace, monospace; text-transform: uppercase; color: #869398;
}

/* ------------------------------------------------------------------ */
/* 2. Boutons de la console                                            */
/* ------------------------------------------------------------------ */
.mt-console .mt-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  padding: .35rem .75rem; border: 0; border-radius: .5rem; white-space: nowrap;
  font: 600 13px/1.3 'Plus Jakarta Sans', sans-serif; text-decoration: none; cursor: pointer;
  background: #303638; color: #dee3e6; transition: background-color .15s, color .15s;
}
.mt-console .mt-bouton:hover { background: #343a3c; }
.mt-console .mt-bouton--primaire { background: #4cd6fb; color: #003642; }
.mt-console .mt-bouton--primaire:hover { background: #b3ebff; }
.mt-console .mt-bouton--primaire:disabled { opacity: .4; cursor: not-allowed; background: #4cd6fb; }
.mt-console .mt-bouton--large { width: 100%; padding: .45rem .75rem; }
.mt-console .mt-bouton-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: .5rem; background: #303638; color: #bcc9ce; cursor: pointer;
}
.mt-console .mt-bouton-icone:hover { background: #343a3c; color: #dee3e6; }
.mt-console .mt-bouton-icone[aria-expanded="false"] { color: #869398; }
.mt-lien-action {
  display: inline-flex; align-items: center; gap: .2rem;
  font: 600 11px/1 'Plus Jakarta Sans', sans-serif; color: #4cd6fb; background: transparent;
}
.mt-lien-action:hover { color: #b3ebff; }

/* ------------------------------------------------------------------ */
/* 3. Panneaux dockés                                                  */
/* ------------------------------------------------------------------ */
.mt-grille { display: grid; grid-template-columns: 1fr; gap: .5rem; }
@media (min-width: 1024px) {
  .mt-grille { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); height: 30rem; }
}
@media (min-width: 1536px) { .mt-grille { height: 34rem; } }

.mt-panneau {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  border-radius: .75rem; overflow: hidden;
  background: var(--mt-panneau); box-shadow: inset 0 0 0 1px var(--mt-bordure);
}
.mt-panneau-entete {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 2rem; padding: .25rem .625rem; background: var(--mt-panneau-haut);
}
.mt-panneau-titre {
  display: flex; align-items: center; gap: .375rem; min-width: 0;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 700; color: #dee3e6;
}
.mt-panneau-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .5rem; display: flex; flex-direction: column; gap: .5rem; }
.mt-panneau-pied { flex: none; padding: .5rem; background: var(--mt-panneau-haut); }
.mt-note { font-size: 12px; line-height: 18px; color: #bcc9ce; background: var(--mt-creux); border-radius: .5rem; padding: .5rem; }
.mt-aide { padding: 0 .75rem .625rem; font-size: 12px; line-height: 18px; color: #869398; }

/* Chutier ------------------------------------------------------------ */
.mt-chutier-onglets {
  flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .125rem;
  margin: .375rem .5rem 0; padding: .125rem; border-radius: .5rem; background: var(--mt-creux);
}
.mt-chutier-onglets .mt-onglet {
  display: flex; align-items: center; justify-content: center; gap: .25rem;
  padding: .25rem 0; border-radius: .375rem; font-size: 12px; font-weight: 600; color: #bcc9ce;
}
.mt-chutier-onglets .mt-onglet.est-actif { background: #303638; color: #4cd6fb; }
.mt-chutier-liste { display: flex; flex-direction: column; gap: .375rem; }

/* Une entrée du chutier : vignette, titre, provenance, bouton d'ajout. */
.mt-chute {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .25rem; border-radius: .5rem; background: #171c1f; transition: background-color .15s;
}
.mt-chute:hover { background: #303638; }
.mt-chute.est-posee { background: rgba(76, 214, 251, .08); box-shadow: inset 0 0 0 1px rgba(76, 214, 251, .35); }
.mt-chute.est-perdue { opacity: .55; }
.mt-chute-gauche { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1 1 auto; text-align: left; background: transparent; }
.mt-chute-vignette {
  position: relative; flex: none; width: 4rem; height: 2.5rem; border-radius: .25rem; overflow: hidden;
  background: #0e1416; display: inline-flex; align-items: center; justify-content: center; color: #869398;
}
.mt-chute-vignette img { width: 100%; height: 100%; object-fit: cover; }
.mt-chute-duree {
  position: absolute; right: .125rem; bottom: .125rem; padding: 0 .15rem; border-radius: .2rem;
  background: rgba(9, 15, 17, .82); font: 600 9px/13px 'JetBrains Mono', ui-monospace, monospace; color: #dee3e6;
}
.mt-chute-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mt-chute-titre { font-size: 12px; font-weight: 600; color: #dee3e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-chute.est-posee .mt-chute-titre { color: #4cd6fb; }
.mt-chute-source { font: 400 10px/14px 'JetBrains Mono', ui-monospace, monospace; color: #869398; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-chute-compte {
  flex: none; padding: 0 .25rem; border-radius: .2rem; background: rgba(255, 215, 149, .18);
  font: 700 9px/14px 'JetBrains Mono', ui-monospace, monospace; color: #ffd795;
}
.mt-chute-ajout {
  flex: none; width: 1.75rem; height: 1.75rem; border-radius: .375rem;
  display: inline-flex; align-items: center; justify-content: center; background: #303638; color: #bcc9ce;
}
.mt-chute:hover .mt-chute-ajout:not(:disabled) { background: #4cd6fb; color: #003642; }
.mt-chute-ajout:disabled { opacity: .35; cursor: not-allowed; }
.mt-chute-retirer {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: .375rem;
  display: inline-flex; align-items: center; justify-content: center; color: #869398; background: transparent;
}
.mt-chute-retirer:hover { background: #E63946; color: #fff; }
.mt-chute-actions { display: flex; align-items: center; gap: .125rem; flex: none; }

.mt-depot {
  display: flex; align-items: center; gap: .5rem; padding: .5rem; border-radius: .5rem;
  background: var(--mt-creux); border: 1px dashed #3d494d; cursor: pointer; transition: border-color .15s;
}
.mt-depot:hover { border-color: #4cd6fb; }

/* Moniteur ----------------------------------------------------------- */
.mt-moniteur-source {
  display: flex; align-items: center; gap: .375rem; min-width: 0;
  font: 700 10px/14px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .06em;
  text-transform: uppercase; color: #dee3e6;
}
.mt-pastille { flex: none; width: .5rem; height: .5rem; border-radius: 9999px; background: #4cd6fb; }
.mt-moniteur-infos {
  display: flex; align-items: center; gap: .625rem;
  font: 400 10px/14px 'JetBrains Mono', ui-monospace, monospace; color: #869398; white-space: nowrap;
}
.mt-panneau--moniteur .mt-moniteur-scene {
  flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: .5rem; background-color: #1E222A;
}
.mt-moniteur-cadre {
  position: relative; max-height: 100%; max-width: 100%; aspect-ratio: 16 / 9; width: 100%;
  background: #000; border-radius: .25rem; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
}
.mt-moniteur-cadre canvas { width: 100%; height: 100%; }
.mt-burn {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .4rem; border-radius: .25rem; background: rgba(0, 0, 0, .62);
  font: 700 10px/16px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .04em;
  pointer-events: none; white-space: nowrap; max-width: calc(100% - 1rem); overflow: hidden; text-overflow: ellipsis;
}
.mt-burn--rec { top: .4rem; left: .4rem; color: #4cd6fb; text-transform: uppercase; }
.mt-burn--tc { right: .4rem; bottom: .4rem; color: #fff; font-weight: 500; }
.mt-burn-point { width: .375rem; height: .375rem; border-radius: 9999px; background: #4cd6fb; }

.mt-transport {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  flex-wrap: wrap; padding: .5rem; background: var(--mt-panneau-haut);
}
.mt-transport-tc { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .375rem; border-radius: .375rem; background: var(--mt-creux); }
.mt-transport-boutons { display: inline-flex; align-items: center; gap: .25rem; }
.mt-console .mt-transport-bouton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: .5rem; background: #303638; color: #dee3e6; cursor: pointer;
}
.mt-console .mt-transport-bouton:hover { background: #343a3c; }
.mt-console .mt-transport-bouton--lire { width: 2.5rem; background: #4cd6fb; color: #003642; }
.mt-console .mt-transport-bouton--lire:hover { background: #b3ebff; }
.mt-console .mt-bouton-couper {
  display: inline-flex; align-items: center; gap: .25rem; padding: .3rem .5rem; border-radius: .375rem;
  background: rgba(251, 133, 0, .18); color: #ffd795; cursor: pointer;
  font: 700 11px/1.3 'JetBrains Mono', ui-monospace, monospace;
}
.mt-console .mt-bouton-couper:hover:not(:disabled) { background: rgba(251, 133, 0, .3); }
.mt-console .mt-bouton-couper:disabled { opacity: .4; cursor: not-allowed; }

/* Inspecteur --------------------------------------------------------- */
.mt-insp-badge {
  flex: none; padding: .1rem .35rem; border-radius: .25rem; background: rgba(76, 214, 251, .18);
  font: 700 10px/14px 'JetBrains Mono', ui-monospace, monospace; color: #4cd6fb; white-space: nowrap;
}
#mt-inspecteur .mt-insp-carte { display: flex; flex-direction: column; gap: .25rem; padding: .5rem; border-radius: .5rem; background: #171c1f; }
#mt-inspecteur .mt-insp-carte-titre { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: 13px; font-weight: 700; color: #dee3e6; }
#mt-inspecteur .mt-insp-carte-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font: 400 10px/14px 'JetBrains Mono', ui-monospace, monospace; color: #869398; }
#mt-inspecteur .mt-insp-section { display: flex; flex-direction: column; gap: .25rem; }
#mt-inspecteur .mt-insp-section-entete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
#mt-inspecteur .mt-insp-lien { font: 400 11px/1.3 'JetBrains Mono', ui-monospace, monospace; color: #4cd6fb; background: transparent; }
#mt-inspecteur .mt-insp-lien:hover { text-decoration: underline; }
#mt-inspecteur .mt-insp-mesure { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .2rem .5rem; border-radius: .375rem; background: #171c1f; font: 400 10px/16px 'JetBrains Mono', ui-monospace, monospace; color: #bcc9ce; }
#mt-inspecteur .mt-insp-mesure strong { color: #dee3e6; }
#mt-inspecteur .mt-insp-apercu { width: 100%; max-height: 6rem; object-fit: contain; border-radius: .375rem; }

/* ------------------------------------------------------------------ */
/* 4. Barre d'outils de la timeline                                    */
/* ------------------------------------------------------------------ */
.mt-barre-outils {
  flex: none; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  min-height: 2.25rem; padding: .25rem .625rem; background: var(--mt-panneau-haut);
}
.mt-outils { display: inline-flex; align-items: center; gap: .125rem; padding: .125rem; border-radius: .5rem; background: var(--mt-creux); }
.mt-console .mt-outil {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: .375rem; color: #bcc9ce; background: transparent; cursor: pointer;
}
.mt-console .mt-outil:hover { background: #303638; }
.mt-console .mt-outil.est-actif { background: #303638; color: #4cd6fb; }
.mt-zoom-groupe { display: inline-flex; align-items: center; gap: .25rem; }
.mt-console .mt-outil-mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: .375rem; background: #303638; color: #bcc9ce; cursor: pointer;
}
.mt-console .mt-outil-mini:hover { color: #dee3e6; }
.mt-zoom-valeur { min-width: 2.75rem; text-align: center; font: 500 10px/14px 'JetBrains Mono', ui-monospace, monospace; color: #bcc9ce; }
.mt-console .mt-etiquette-bouton {
  padding: .125rem .375rem; border-radius: .375rem; background: #303638; color: #bcc9ce; cursor: pointer;
  font: 500 10px/16px 'JetBrains Mono', ui-monospace, monospace;
}
.mt-console .mt-etiquette-bouton:hover { color: #dee3e6; }
.mt-console .mt-etiquette-bouton.est-actif { color: #4cd6fb; }
.mt-telemetrie {
  display: inline-flex; align-items: center; gap: .75rem; margin-left: auto; flex-wrap: wrap;
  font: 400 10px/14px 'JetBrains Mono', ui-monospace, monospace; color: #bcc9ce;
}
.mt-etiquette { padding: .1rem .4rem; border-radius: .25rem; background: #303638; color: #869398; white-space: nowrap; }

/* ------------------------------------------------------------------ */
/* 5. Timeline : en-têtes de pistes et couleurs de clips du modèle      */
/* ------------------------------------------------------------------ */
.mt-panneau--timeline .mt-tl { border: 0; border-radius: 0; background: #0e1416; }
.mt-panneau--timeline .mt-tl-cadre { border-radius: 0; }
.mt-tl { --mt-entete: 11rem; }
@media (max-width: 1023px) { .mt-tl { --mt-entete: 8rem; } }

.mt-tl-entete {
  justify-content: space-between; padding: 0 .5rem; gap: .375rem;
  background: #222B3D; border-right: 1px solid rgba(255, 255, 255, .06);
}
.mt-piste-nom { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; }
.mt-piste-nom span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-piste-point { flex: none; width: .5rem; height: .5rem; border-radius: 9999px; background: #4cd6fb; }
.mt-piste-outils { display: inline-flex; align-items: center; gap: .125rem; flex: none; }
.mt-console .mt-piste-bouton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; border-radius: .25rem; background: transparent; color: #869398; cursor: pointer;
  font: 700 10px/1 'Plus Jakarta Sans', sans-serif;
}
.mt-console .mt-piste-bouton:hover { background: #303638; color: #dee3e6; }
.mt-console .mt-piste-bouton .material-symbols-outlined { font-size: 13px; }
.mt-console .mt-piste-bouton.est-actif { background: rgba(230, 57, 70, .25); color: #ffb4ab; }
.mt-console .mt-piste-bouton.est-solo { background: rgba(255, 215, 149, .22); color: #ffd795; }
.mt-console .mt-piste-bouton.est-verrouille { background: rgba(76, 214, 251, .18); color: #4cd6fb; }
/* Champ de gain : sélecteur à deux classes, sinon le greffon `forms` de Tailwind
   (`[type="number"]`, chargé après app.css) repeint le champ en blanc. */
.mt-tl input.mt-piste-gain {
  width: 2.6rem; padding: 0 .15rem; border-radius: .25rem; text-align: right;
  background-color: #0e1416; border: 1px solid transparent; color: #2A9D8F;
  font: 700 10px/16px 'JetBrains Mono', ui-monospace, monospace;
}
.mt-tl input.mt-piste-gain:focus { border-color: #4cd6fb; outline: none; box-shadow: none; }
.mt-tl-rang--muette .mt-tl-voie { opacity: .45; }

/* Plans vidéo : indigo du modèle, l'accent cyan restant réservé à la sélection. */
.mt-clip { background: linear-gradient(180deg, #4338CA, #312E81); border-color: rgba(129, 140, 248, .55); }
.mt-clip:hover { border-color: #818CF8; }
.mt-clip.est-choisi, .mt-son.est-choisi, .mt-jonction.est-choisi { outline: 2px solid #4cd6fb; outline-offset: 1px; }
.mt-clip-meta { color: #c7d2fe; }
.mt-clip.mt-clip--image { background: linear-gradient(180deg, #78350F, #451A03); border-color: rgba(251, 191, 36, .5); }
.mt-clip.mt-clip--image:hover { border-color: #FB8500; }
.mt-clip.mt-clip--image .mt-clip-meta { color: #fde68a; }

/* Sons : une couleur par piste, comme sur une table de mixage. */
.mt-son { background: rgba(16, 185, 129, .32); border-color: #10B981; }
.mt-tl-rang[data-piste="1"] .mt-son { background: rgba(139, 92, 246, .32); border-color: #8B5CF6; }
.mt-tl-rang[data-piste="2"] .mt-son { background: rgba(251, 133, 0, .3); border-color: #FB8500; }
.mt-tl-rang[data-piste="3"] .mt-son { background: rgba(76, 214, 251, .28); border-color: #4cd6fb; }
.mt-son.est-perdu { background: rgba(230, 57, 70, .25); border-color: #E63946; border-style: dashed; }

/* ------------------------------------------------------------------ */
/* 6. Réglages du montage                                              */
/* ------------------------------------------------------------------ */
.mt-reglages-grille { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: .75rem; }
@media (min-width: 768px) { .mt-reglages-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .mt-reglages-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mt-reglages input.mt-champ, .mt-reglages select.mt-champ {
  width: 100%; padding: .4rem .625rem; border-radius: .5rem; font-size: 13px;
  background-color: var(--mt-creux); color: #dee3e6; border: 1px solid #3d494d; box-shadow: none;
}
.mt-reglages input.mt-champ:focus, .mt-reglages select.mt-champ:focus { border-color: #4cd6fb; outline: none; box-shadow: none; }
.mt-resume { display: flex; flex-direction: column; gap: .375rem; padding: .625rem; border-radius: .5rem; background: var(--mt-creux); }
#mt-form .mt-puce { background: #303638; }

/* Outil ciseau : le pointeur annonce la coupe sur les éléments de la timeline. */
.mt-tl--ciseau .mt-clip, .mt-tl--ciseau .mt-son { cursor: crosshair; }

/* Inspecteur : le bouton de suppression du modèle, rouge plein, à droite de la rangée d'actions. */
#mt-inspecteur .mt-insp-supprimer {
  margin-left: auto; flex: none; width: 1.75rem; height: 1.75rem; border-radius: .375rem;
  display: inline-flex; align-items: center; justify-content: center; background: #E63946; color: #fff;
}
#mt-inspecteur .mt-insp-supprimer:hover { background: #C62330; }
#mt-inspecteur .mt-insp-bouton { padding: .3rem .5rem; font-size: 11px; }


/* ==========================================================================
   VOILE DE CHARGEMENT (#kk-chargement, posé par includes/layout/head.php)

   Pourquoi : les polices sont déclarées en `font-display: swap` (texte affiché
   dans la police de repli puis remplacé) et les icônes Material Symbols
   apparaissent d'abord sous forme de ligatures lisibles. Le voile couvre la page
   — fond flouté, logo, texte animé, barre indéterminée — jusqu'à ce que polices
   et ressources soient prêtes, puis s'effface.

   L'état est porté par <html class="kk-chargement"> : le script du voile
   l'enlève, ce qui rend le défilement à la page.
   ========================================================================== */
/* Les règles du voile sont écrites `#kk-chargement…` (spécificité 1,1,0) : le CSS critique
   en ligne dans head.php cible l'identifiant, il l'emporterait sinon sur une simple classe. */
html.kk-chargement, html.kk-chargement body { overflow: hidden; }

#kk-chargement.kk-chargement-voile {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 26, 23, .72); /* assez transparent pour laisser deviner la page floutée */
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  backdrop-filter: blur(22px) saturate(120%);
  opacity: 1;
  transition: opacity .45s ease, -webkit-backdrop-filter .45s ease, backdrop-filter .45s ease;
}

/* Repli sans backdrop-filter : le voile devient franchement opaque. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  #kk-chargement.kk-chargement-voile { background: var(--kk-fond); }
}

#kk-chargement.kk-voile-parti {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}

.kk-chargement-bloc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 1.5rem;
  text-align: center;
}

.kk-chargement-media { position: relative; display: grid; place-items: center; width: 6.5rem; height: 6.5rem; }

.kk-chargement-anneau {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 3px solid rgba(134, 147, 152, .22);
  border-top-color: var(--kk-primaire);
  border-right-color: var(--kk-accent);
  animation: kk-chargement-tourne 1.1s linear infinite;
}

.kk-chargement-logo {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
  animation: kk-chargement-pulse 2.4s ease-in-out infinite;
}

.kk-chargement-titre {
  margin: 0;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kk-texte);
}

.kk-chargement-points i { font-style: normal; animation: kk-chargement-points 1.2s ease-in-out infinite; }
.kk-chargement-points i:nth-child(2) { animation-delay: .2s; }
.kk-chargement-points i:nth-child(3) { animation-delay: .4s; }

.kk-chargement-sous-titre { margin: 0; max-width: 22rem; font-size: .8125rem; color: var(--kk-texte-doux); }

.kk-chargement-barre {
  width: 12rem;
  max-width: 60vw;
  height: 4px;
  border-radius: 9999px;
  background: rgba(134, 147, 152, .2);
  overflow: hidden;
}

.kk-chargement-barre span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--kk-primaire), var(--kk-accent));
  animation: kk-chargement-glisse 1.4s ease-in-out infinite;
}

@keyframes kk-chargement-tourne { to { transform: rotate(360deg); } }
@keyframes kk-chargement-pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes kk-chargement-points { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes kk-chargement-glisse { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }

/* « Réduire les animations » neutralise les keyframes plus haut dans ce fichier :
   la barre reste alors pleine et le voile lisible sans mouvement. */
@media (prefers-reduced-motion: reduce) {
  .kk-chargement-barre span { width: 100%; transform: none; }
  .kk-chargement-points i { opacity: 1; }
}