/* Console PXL Switch — palette des diagrammes du dépôt : la couleur porte le sens.
   Vert = PGM (antenne) · bleu = PVW (préparation) · rose = coupe · or = presets. */

:root {
  --vert: #3ddc97; --bleu: #4aa8ff; --violet: #b06aff; --rose: #ff6a9e; --or: #eec06a;
  --texte: #eef2f6; --second: #8a93a0; --contour: #5d6875;
  --cartouche: #10151c; --cartouche-h: #2b3542;
  --refus: #ff5c5c; --alerte: #eec06a;
}
/* La police d'instrumentation PXL — Flexi IBM VGA True, VileR / int10h.org,
   CC BY-SA 4.0. C'est celle de l'afficheur TX de PXL-AirLink : la lecture d'un
   chiffre au coup d'œil, sur un pupitre, mérite mieux qu'une grotesque système.
   Servie depuis 'self', donc couverte par le CSP sans exception à écrire.
   Attribution et détails : web/POLICE.md — CC BY-SA oblige à la conserver. */
@font-face {
  font-family: 'PXL VGA';
  src: url('/Flexi_IBM_VGA_True.ttf') format('truetype');
  font-display: swap;   /* l'heure s'affiche tout de suite, la fonte la rattrape */
}

* { box-sizing: border-box; }
/* ⚠️ Filet de sécurité. L'attribut `hidden` du HTML n'agit que par la règle
   `[hidden] { display: none }` de la feuille du navigateur — la moindre règle
   d'auteur qui pose un `display` la bat en spécificité, et l'élément reste
   affiché alors que `n.hidden === true`. C'est arrivé au badge ÉDITION EN DIRECT
   et au bandeau de constats : la propriété était juste, l'écran mentait. */
[hidden] { display: none !important; }
html { min-height: 100%; background: linear-gradient(160deg, #0c0e12 0%, #0d1117 100%); }
body { margin: 0; min-height: 100vh; background: transparent;
  font-family: Helvetica, Arial, sans-serif; color: var(--texte); }

header { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.5rem; border-bottom: 1px solid var(--cartouche-h); }
.entete-cmd { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
/* Témoin de transport. Discret, mais il doit exister : quand la prise tombe, le
   pupitre reste actionnable en HTTP et rien d'autre ne le signalerait. */
.transport { font-family: 'PXL VGA', 'Courier New', monospace; font-size: .62rem;
  letter-spacing: .1em; padding: .2rem .4rem; border-radius: 3px;
  border: 1px solid var(--cartouche-h); color: var(--second); }
.transport.direct { color: var(--vert); border-color: #1f4636; background: #0c1c16; }

.histo { font-variant-numeric: tabular-nums; }
.histo:disabled { opacity: .35; cursor: not-allowed; border-color: var(--cartouche-h); }
.histo:disabled:hover { border-color: var(--cartouche-h); }
h1 { margin: 0; font-size: 1.1rem; letter-spacing: .18em; font-weight: 700; }
h1 .pt { color: var(--vert); margin: 0 .4em; }
.sst { margin: .3rem 0 0; font-size: .68rem; letter-spacing: .12em; color: var(--second); }
/* ─── L'heure du jour ──────────────────────────────────────────────────────────
   Un pupitre affiche l'heure en grand, et pas par coquetterie : c'est ce qu'on
   lit pour caler un départ, et on doit pouvoir le faire de trois mètres, de
   biais, sans quitter le moniteur des yeux. D'où la taille, la fonte à chasse
   fixe et le vert d'antenne. Les frames en retrait — on les consulte, on ne les
   lit pas en continu. */
.tod { display: flex; align-items: baseline; font-family: 'PXL VGA', 'Courier New', monospace;
  color: var(--vert); line-height: 1; letter-spacing: .04em;
  text-shadow: 0 0 12px rgba(61, 220, 151, .35); user-select: none;
  padding: .3rem .8rem; border: 1px solid #1b2a24; border-radius: 5px;
  background: #05080b; white-space: nowrap; }
.tod #tod-hms { font-size: 1.9rem; }
.tod-ff { font-size: 1.05rem; color: #2f7d5c; margin-left: .1em; }
/* Non calée sur le serveur : l'heure reste juste, les frames non. On le dit. */
.tod:not(.cale) { color: var(--second); text-shadow: none; border-color: var(--cartouche-h); }
.tod:not(.cale) .tod-ff { color: #4a515c; }

@media (max-width: 900px) {
  .tod #tod-hms { font-size: 1.3rem; }
  .tod-ff { font-size: .8rem; }
}

h2 { font-size: .74rem; letter-spacing: .14em; margin: 0 0 .5rem; text-transform: uppercase; }
.aide { font-size: .7rem; color: var(--second); margin: 0 0 .7rem; line-height: 1.5; }

button, select, input[type=password] {
  font: inherit; font-size: .78rem; color: var(--texte); background: var(--cartouche);
  border: 1px solid var(--cartouche-h); border-radius: 5px; padding: .4rem .6rem; cursor: pointer;
}
button:hover, select:hover { border-color: var(--contour); }
button.secondaire { color: var(--second); }
button.mini { font-size: .66rem; padding: .25rem .5rem; }

main { padding: 1.25rem 1.5rem 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.bloc { background: var(--cartouche); border: 1px solid var(--cartouche-h);
  border-radius: 9px; padding: 1rem 1.1rem; }

/* ─── Les deux bus ─────────────────────────────────────────────────────────── */
.bus { margin-bottom: .9rem; }
.bus h2.pgm { color: var(--vert); }
.bus h2.pvw { color: var(--bleu); }
.src { color: var(--texte); font-weight: 400; letter-spacing: .02em; margin-left: .6rem; }
.rangee { display: flex; flex-wrap: wrap; gap: .45rem; }

.entree { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  min-width: 120px; padding: .5rem .7rem; text-align: left; }
.entree .nom { font-size: .82rem; font-weight: 700; letter-spacing: .04em; }
.entree .det { font-size: .62rem; color: var(--second); }
.bus:has(h2.pgm) .entree[data-on="1"] { border-color: var(--vert); background: #16241d; }
.bus:has(h2.pgm) .entree[data-on="1"] .nom { color: var(--vert); }
.bus:has(h2.pvw) .entree[data-on="1"] { border-color: var(--bleu); background: #15202c; }
.bus:has(h2.pvw) .entree[data-on="1"] .nom { color: var(--bleu); }

/* ─── Pupitre ──────────────────────────────────────────────────────────────── */
.pupitre { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }
.transitions, .durees, .boutons { display: flex; gap: .4rem; flex-wrap: wrap; }
.trans { display: flex; flex-direction: column; align-items: flex-start; min-width: 108px; text-align: left; }
.trans .nom { font-size: .74rem; font-weight: 700; letter-spacing: .06em; }
.trans .det { font-size: .6rem; color: var(--second); }
.trans[data-on="1"] { border-color: var(--violet); background: #1d1728; }
.trans[data-on="1"] .nom { color: var(--violet); }
.duree[data-on="1"] { border-color: var(--violet); color: var(--violet); }

/* ─── La cellule T-BAR ─────────────────────────────────────────────────────────
   Une cellule, deux moitiés séparées par un filet : le levier en haut, son témoin
   en dessous. La grille à deux colonnes est ce qui les tient — libellé et horloge
   dans la colonne étroite, fader et bargraphe dans la MÊME colonne large. C'est
   cet alignement qui fait du bargraphe un témoin du fader : posé à côté, il ne
   dirait plus où en est la course. Avant, la zone était un simple flex dans un
   pupitre `flex-wrap` et le VFD tombait à la ligne dès que la fenêtre rétrécissait.

   ⚠️ L'alignement reste à quelques pixels près : le pouce d'un `input[type=range]`
   déborde la piste de sa demi-largeur, des deux côtés. Rattraper ça demanderait de
   redessiner le fader entièrement — disproportionné pour ce que ça corrige. */
.tbar-zone { display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: .4rem .7rem; flex: 1 1 380px; min-width: 320px;
  padding: .5rem .75rem; border: 1px solid var(--cartouche-h); border-radius: 6px;
  background: #0b0f14; }
.tbar-zone > label { font-size: .64rem; letter-spacing: .12em; color: var(--second);
  font-weight: 700; }
.tbar-zone input { width: 100%; accent-color: var(--vert); cursor: grab; margin: 0; }
.tbar-zone input:active { cursor: grabbing; }
.tbar-filet { grid-column: 1 / -1; height: 1px; background: var(--cartouche-h); margin: .1rem 0; }
.tbar-lecture { display: flex; align-items: baseline; gap: .5rem; }

/* ─── Le VFD ───────────────────────────────────────────────────────────────────
   Bargraphe à segments façon afficheur fluorescent : il montre la position RÉELLE
   de la transition, qui n'est pas toujours celle du curseur — pendant un AUTO, la
   main ne touche rien et pourtant la transition court.

   Il occupe toute la largeur du fader qui le surplombe : les segments balaient
   exactement la course du levier, un segment allumé désigne donc une position
   lisible directement au-dessus. Les segments s'étirent (`flex: 1 1 0`) plutôt
   que d'avoir une largeur fixe — c'est ce qui garde le bargraphe calé sur le
   fader à toutes les tailles de fenêtre. */
.vfd { display: flex; align-items: center; gap: .5rem; background: #05080b;
  border: 1px solid #1c2430; border-radius: 4px; padding: .3rem .45rem; width: 100%; }
.vfd-segments { display: flex; gap: 2px; flex: 1; min-width: 0; }
.vfd-segments i { flex: 1 1 0; min-width: 2px; height: 15px; border-radius: 1px;
  background: #10241d; transition: background .06s linear, box-shadow .06s linear; }
.vfd-segments i.on { background: var(--vert); box-shadow: 0 0 5px rgba(61,220,151,.85); }
/* Les derniers segments virent à l'or : on approche du basculement. */
.vfd-segments i.on.chaud { background: var(--or); box-shadow: 0 0 6px rgba(238,192,106,.9); }
.vfd-val { font-family: 'PXL VGA', 'Courier New', monospace; font-size: .95rem;
  color: var(--vert); min-width: 2.4rem; text-align: left; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px rgba(61,220,151,.5); }
/* La classe `auto` est portée par la CELLULE, pas par le bargraphe : le chiffre a
   quitté `#vfd` pour la colonne de gauche, un sélecteur descendant depuis `.vfd`
   ne l'atteindrait plus. */
.tbar-zone.auto .vfd-val { color: var(--or); text-shadow: 0 0 6px rgba(238,192,106,.6); }
.val { font-size: .72rem; color: var(--second); font-variant-numeric: tabular-nums; min-width: 3.2rem; }

/* ─── L'horloge de composition ─────────────────────────────────────────────────
   Le compteur de frames, calé sur le serveur. Il défile : c'est à ça qu'on voit
   d'un coup d'œil que la surface est synchrone et non figée. */
.horloge { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  font-variant-numeric: tabular-nums; line-height: 1; color: #46505e; }
.horloge #horloge-fps { font-size: .6rem; letter-spacing: .08em; font-weight: 700; }
.horloge-frame { font-size: .56rem; opacity: .75; }
.horloge.cale { color: var(--bleu); }
.horloge.cale #horloge-fps { text-shadow: 0 0 5px rgba(74,168,255,.45); }

.gros { font-weight: 700; letter-spacing: .1em; padding: .7rem 1.1rem; font-size: .8rem; }
.gros.cut  { border-color: var(--vert);  color: var(--vert); }
.gros.auto { border-color: var(--bleu);  color: var(--bleu); }
.gros.noir[data-on="1"] { background: var(--refus); border-color: var(--refus); color: #150c0d; }
.gros.fige[data-on="1"] { background: var(--or); border-color: var(--or); color: #171208; }

/* ─── Presets ──────────────────────────────────────────────────────────────── */
.presets .preset { display: flex; flex-direction: column; align-items: flex-start;
  min-width: 112px; padding: .5rem .7rem; text-align: left; }
.preset .num { font-size: .62rem; color: var(--second); letter-spacing: .1em; }
.preset .nom { font-size: .76rem; font-weight: 700; }
.preset[data-on="0"] .nom { color: #4b535e; font-weight: 400; }
.preset[data-on="1"] { border-color: var(--or); }
.preset[data-on="1"] .nom { color: var(--or); }

/* ─── Program / Preview ────────────────────────────────────────────────────── */
.ecrans { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.25rem; }
.ecrans .aide { grid-column: 1 / -1; margin: 0; }
@media (max-width: 900px) { .ecrans { grid-template-columns: 1fr; } }
.ecran h2.pgm { color: var(--vert); }
.ecran h2.pvw { color: var(--bleu); }
.canvas { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  background: #070a0e; border: 1px solid var(--cartouche-h); border-radius: 6px;
  touch-action: none; }
/* Damier : sans lui, un layer plein cadre serait indiscernable du fond. */
.canvas::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(#141a22 1px, transparent 1px),
                    linear-gradient(90deg, #141a22 1px, transparent 1px);
  background-size: 12.5% 25%; }
.canvas.fige { cursor: default; }

/* ─── Live Edit : le mode doit se voir de loin, pas se déduire ─────────────── */
.badge { display: inline-block; margin-left: .6rem; padding: .12rem .45rem;
  background: var(--refus); color: #150c0d; border-radius: 3px;
  font-size: .58rem; letter-spacing: .12em; font-weight: 700; }
#bloc-pgm.live .canvas { border-color: var(--refus); box-shadow: 0 0 0 2px rgba(255,92,92,.28); }
#bloc-pgm.live .canvas .lay { background: rgba(255,92,92,.15); border-color: var(--refus); cursor: grab; }
#bloc-pvw.inactif { opacity: .55; }

.bascule-live { display: flex; align-items: center; gap: .4rem; cursor: pointer; user-select: none;
  font-size: .7rem; letter-spacing: .12em; font-weight: 700; color: var(--second);
  border: 1px solid var(--cartouche-h); border-radius: 5px; padding: .55rem .8rem; }
.bascule-live input { accent-color: var(--refus); width: 1rem; height: 1rem; cursor: pointer; }
.bascule-live:has(input:checked) { color: var(--refus); border-color: var(--refus);
  background: #2a1416; }
.canvas.noir { background: #000; }
.canvas.noir .lay { display: none; }

.lay { position: absolute; background: rgba(74,168,255,.15); border: 1px solid var(--bleu);
  border-radius: 2px; overflow: hidden; cursor: grab; touch-action: none; }
/* La mire est portée par deux boîtes : `.cadre-src` donne la forme que le cadrage
   et le zoom imposent, `.mire` porte l'image agrandie et décalée par le rognage.
   La fenêtre découpe le tout — c'est le découpage qui rend le crop visible. */
.cadre-src { position: absolute; overflow: hidden; }
.mire { position: absolute; background-size: 100% 100%; background-repeat: no-repeat; }
.canvas.fige .lay { cursor: default; background: rgba(61,220,151,.13); border-color: var(--vert); }
.lay.sel { border-width: 2px; box-shadow: 0 0 0 1px rgba(74,168,255,.35); }
.lay.actif { cursor: grabbing; background: rgba(74,168,255,.3); }
.lay.masque { opacity: .18 !important; border-style: dashed; }
.lay.verrou { cursor: not-allowed; border-style: dotted; }
.lay.entrant { border-color: var(--or); background: rgba(238,192,106,.18); pointer-events: none; }
.lay-nom { position: absolute; left: 3px; top: 2px; font-size: .55rem; font-weight: 700;
  letter-spacing: .06em; color: var(--texte); pointer-events: none;
  text-shadow: 0 1px 3px #000, 0 0 6px #000; }
.poignee { position: absolute; width: 14px; height: 14px; margin: -14px 0 0 -14px;
  background: var(--bleu); border: 1px solid #0a0e13; border-radius: 3px;
  cursor: nwse-resize; z-index: 6; touch-action: none; }
#bloc-pgm.live .canvas .poignee { background: var(--refus); }

/* Repères d'aimantation — visibles seulement pendant un glissé. */
.guide { position: absolute; display: none; background: var(--rose); pointer-events: none; z-index: 5; }
.guide.gx { top: 0; bottom: 0; width: 1px; }
.guide.gy { left: 0; right: 0; height: 1px; }

/* ─── Les deux barres de layers, sous les moniteurs ────────────────────────── */
/* Une par bus : chaque moniteur a la sienne, et chacune garde sa sélection. */
.barre-layers { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .4rem; min-height: 1.9rem; }
.blay { display: flex; align-items: center; gap: .3rem; padding: .28rem .5rem;
  font-size: .68rem; background: var(--cartouche); border: 1px solid var(--cartouche-h);
  border-radius: 4px; cursor: pointer; }
.blay:hover { border-color: var(--contour); }
.blay .bid { font-weight: 700; letter-spacing: .04em; }
.blay .bsrc { color: var(--second); max-width: 8rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.blay .pastille { width: .5rem; height: .5rem; border-radius: 50%; flex: none; }
.blay.masque { opacity: .45; }
.blay.masque .bsrc { text-decoration: line-through; }
.barre-layers.pgm .blay[data-sel="1"] { border-color: var(--vert); background: #16241d; }
.barre-layers.pgm .blay[data-sel="1"] .bid { color: var(--vert); }
.barre-layers.pvw .blay[data-sel="1"] { border-color: var(--bleu); background: #15202c; }
.barre-layers.pvw .blay[data-sel="1"] .bid { color: var(--bleu); }
.barre-layers .vide { font-size: .66rem; color: #4b535e; padding: .28rem 0; }
/* Le bus qu'on édite est mis en avant : l'autre reste cliquable mais s'efface. */
.barre-layers:not(.actif) .blay { opacity: .6; }

/* ─── Liste des layers ─────────────────────────────────────────────────────── */
.titre-ligne { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ajout { display: flex; gap: .35rem; }
.ajout select { font-size: .72rem; }
.cpt { color: var(--second); font-weight: 400; letter-spacing: 0; }
.cible { font-weight: 700; letter-spacing: .06em; }
.cible.pvw { color: var(--bleu); }
.cible.pgm { color: var(--refus); }
.deux-col { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .deux-col { grid-template-columns: 1fr; } }

.liste-layers, .liste-sources { display: flex; flex-direction: column; gap: .25rem; }
.srow { display: flex; align-items: center; gap: .45rem; padding: .35rem .5rem;
  background: #0d131a; border: 1px solid #1c2430; border-radius: 5px; cursor: pointer; font-size: .72rem; }
.srow:hover { border-color: var(--contour); }
.srow.sel { border-color: var(--vert); background: #16241d; }
.srow .stype { font-size: .55rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--second); border: 1px solid var(--cartouche-h); border-radius: 3px;
  padding: .08rem .3rem; white-space: nowrap; }
.srow .snom { font-weight: 700; color: var(--vert); }
.srow .sdet { color: var(--second); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .sres { color: var(--second); font-variant-numeric: tabular-nums; white-space: nowrap; }
.srow.incomplete .snom { color: var(--alerte); }
.srow.vdec .stype { border-color: var(--violet); color: var(--violet); }
.compo-res { max-width: 22rem; margin-bottom: .7rem; }
.chaine { font-size: .6rem; color: var(--second); line-height: 1.6; font-variant-numeric: tabular-nums; }
.chaine b { color: var(--texte); }
.chaine .agrandi { color: var(--alerte); }
.lrow { display: flex; align-items: center; gap: .35rem; padding: .3rem .45rem;
  background: #0d131a; border: 1px solid #1c2430; border-radius: 5px; cursor: pointer; font-size: .72rem; }
.lrow:hover { border-color: var(--contour); }
.lrow.sel { border-color: var(--bleu); background: #15202c; }
.lrow .lid { font-weight: 700; color: var(--bleu); min-width: 1.9rem; }
.lrow .lsrc { flex: 1; color: var(--texte); }
.ordre { display: flex; gap: .15rem; margin-left: auto; }
.ico { padding: .1rem .3rem; font-size: .7rem; line-height: 1.2; background: transparent;
  border: 1px solid transparent; color: var(--second); }
.ico:hover { border-color: var(--contour); color: var(--texte); }
.ico.sup:hover { border-color: var(--refus); color: var(--refus); }
.ico.envoi { color: var(--vert); }
.ico.envoi:hover { border-color: var(--vert); background: #16241d; }
.ico.actif { color: var(--bleu); }
.ico.verrou { color: var(--or); }
.lrow.masque .lsrc, .lrow.masque .lid { opacity: .4; }

/* ─── Propriétés du layer ──────────────────────────────────────────────────── */
.proprietes { display: flex; flex-direction: column; gap: .55rem;
  background: #0d131a; border: 1px solid #1c2430; border-radius: 6px; padding: .7rem .8rem; }
.prop { display: flex; flex-direction: column; gap: .25rem; }
.plab { font-size: .6rem; letter-spacing: .1em; color: var(--second); text-transform: uppercase; }
.proprietes select { width: 100%; font-size: .7rem; }
.rapides { display: flex; gap: .3rem; flex-wrap: wrap; }
.rapides button { flex: 1; min-width: 3rem; }
.champs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; }
.champ { display: flex; align-items: center; gap: .2rem; font-size: .62rem; color: var(--second); }
.champ input { width: 100%; min-width: 0; font-size: .66rem; padding: .22rem .3rem;
  background: #0a0e13; border: 1px solid var(--cartouche-h); border-radius: 4px;
  color: var(--texte); font-variant-numeric: tabular-nums; }
.champ input:disabled { color: #4b535e; cursor: not-allowed; }
.curseur { display: flex; align-items: center; gap: .5rem; }
.curseur input { flex: 1; accent-color: var(--violet); }
.bascule-mini { display: flex; align-items: center; gap: .3rem; font-size: .64rem;
  color: var(--second); cursor: pointer; }
.bascule-mini input { accent-color: var(--bleu); width: .9rem; height: .9rem; cursor: pointer; }

/* ─── Sorties ──────────────────────────────────────────────────────────────── */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: .6rem; }
.sortie { background: #0d131a; border: 1px solid #1c2430; border-radius: 7px; padding: .65rem .75rem;
  display: flex; flex-direction: column; gap: .4rem; }
.sortie-tete { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.sortie-tete .nom { font-size: .82rem; font-weight: 700; letter-spacing: .04em; }
.sortie-tete .det { font-size: .62rem; color: var(--second); }
.sortie select { width: 100%; font-size: .68rem; }
.bus-choix { display: flex; gap: .35rem; }
.busbtn { flex: 1; font-size: .7rem; font-weight: 700; letter-spacing: .08em; padding: .3rem; }
.busbtn.pgm[data-on="1"] { border-color: var(--vert); color: var(--vert); background: #16241d; }
.busbtn.pvw[data-on="1"] { border-color: var(--bleu); color: var(--bleu); background: #15202c; }
.lat { font-size: .62rem; color: var(--second); font-variant-numeric: tabular-nums; }
.lat b { color: var(--texte); }

/* ─── Constats et souffle ──────────────────────────────────────────────────── */
.constats { padding: .75rem 1.5rem 0; display: flex; flex-direction: column; gap: .35rem; }
.constat { font-size: .76rem; padding: .4rem .7rem; border-radius: 5px; border-left: 3px solid; }
.constat.refus  { border-color: var(--refus);  background: #2a1416; color: #ffc9c9; }
.constat.alerte { border-color: var(--alerte); background: #241f13; color: #f2e0b8; }

.souffle.info { background: #15202c; border-color: var(--bleu); color: #cfe6ff; }
.souffle { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  background: #2a1416; border: 1px solid var(--refus); color: #ffc9c9;
  padding: .7rem 1.1rem; border-radius: 7px; font-size: .78rem;
  max-width: min(92vw, 620px); box-shadow: 0 8px 28px rgba(0,0,0,.55); z-index: 20; }

footer { padding: 1.4rem; text-align: center; font-size: .64rem; letter-spacing: .14em;
  color: var(--second); border-top: 1px solid var(--cartouche-h); }

/* ─── Connexion ────────────────────────────────────────────────────────────── */
body.centre { display: grid; place-items: center; }
.connexion { background: var(--cartouche); border: 1px solid var(--cartouche-h);
  border-radius: 10px; padding: 2rem 2.2rem; display: flex; flex-direction: column;
  gap: .7rem; min-width: min(92vw, 330px); }
.connexion h1 { font-size: 1rem; }
.connexion .sst { margin-bottom: .8rem; }
.connexion input { width: 100%; cursor: text; }
.connexion button { padding: .6rem; font-weight: 700; letter-spacing: .12em;
  border-color: var(--vert); color: var(--vert); }
.erreur { margin: 0; font-size: .74rem; color: var(--refus); }