@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../../media/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../../media/fonts/inter-500.woff2') format('woff2'); }
/* Fonte du titre hors ligne. Auto-hébergée : l'installation doit fonctionner
   sans réseau, donc aucune fonte n'est chargée depuis un service extérieur. */
@font-face {
  font-family: 'Space Grotesk'; font-weight: 700; font-display: swap;
  src: url('../../media/fonts/space-grotesk-700.woff2') format('woff2');
}

/* Source unique des couleurs. Les variables CSS ne s'interpolent pas : ce sont
   les background-color qui fondent (durée --bgfade). */
:root { --bg: #000; --cut: #000; --bgfade: 0ms; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background-color: var(--bg);
  transition: background-color var(--bgfade) linear;
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
}

#stage {
  position: fixed; inset: 0;
  display: grid;
  grid-auto-rows: 1fr;
  background-color: var(--bg);
  transition: background-color var(--bgfade) linear;
}

/* Le pane ne peint AUCUN fond : un élément neuf peindrait la nouvelle couleur
   instantanément pendant que la page fond. Le fond vient de #stage. */
.pane {
  position: relative;
  overflow: hidden;
  background: none;
  container-type: size;
  /* AUCUNE animation d'apparition : une animation (meme un simple fondu) cree
     une couche graphique, et le bord de cette couche laissait voir un « cadre »
     quelques images. Les cases apparaissent franchement. */
  outline: none;
  backface-visibility: hidden;
}

.pane .paneInner {
  position: absolute; inset: 0;
  /* Pas de will-change : forcer une couche graphique faisait dessiner son bord
     par Chrome (le « cadre »). La forme est posee AVANT l'insertion. */
}

.pane video {
  position: absolute;
  /* La video DEBORDE d'1 px, rognee par overflow:hidden. L'arrondi de rendu de
     object-fit: cover laissait sinon voir le fond de l'element video sur le
     bord : ce liseré etait le « cadre ». */
  top: -1px; left: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  object-fit: cover;
  background-color: var(--bg);
  outline: none;
  backface-visibility: hidden;
}

.pane .black {
  position: absolute; inset: 0;
  background-color: var(--cut);
  transition: background-color var(--bgfade) linear;
}

.pane .black[hidden] { display: none; }

.pane .fxlayer {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
}

.pane .fxlayer[hidden] { display: none; }



/* Sortie d'une case retirée : un fondu au lieu d'une disparition sèche. */
.pane.sortie {
  animation: sortie .42s ease-in forwards;
  pointer-events: none;
}
@keyframes sortie {
  to { opacity: 0; }
}

#debug {
  position: fixed; top: 12px; left: 12px;
  max-width: 70ch;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font: 12px/1.6 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  z-index: 50;
}

.error {
  color: #fff;
  font-size: 16px;
  padding: 24px;
}

/* --- Barre de contrôle (générée par schéma, packages/ui/controls.js) ------- */
.uibar {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 12px 18px;
  z-index: 50;
  font-size: 14px;
}

.uipill, .uipanel {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px; row-gap: 2px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 6px 10px;
  color: #f5f5f5;
  max-width: min(100%, 760px);
}

.uipanel {
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.uipanel[hidden] { display: none; }

.uibar button {
  min-width: 40px; min-height: 40px;
  border: 0; border-radius: 50%;
  background: transparent; color: inherit;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font: inherit;
}

.uibar button:hover { background: rgba(255, 255, 255, 0.12); }
.uibar button.on { background: rgba(0, 0, 0, 0.35); }

/* Aide transitoire (plein ecran indisponible sur iPad) : discrete, jamais
   cliquable, elle disparait seule. */
.aide { position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(12px);
  max-width:min(680px, 86vw); padding:13px 19px; border-radius:12px;
  background:rgba(0,0,0,.8); color:#f2f2f5; font-size:14.5px; line-height:1.45;
  text-align:center; opacity:0; transition:opacity .2s, transform .2s; pointer-events:none; z-index:60; }
.aide.on { opacity:1; transform:translateX(-50%) translateY(0); }

.uisep { width: 1px; height: 24px; background: rgba(255, 255, 255, 0.28); margin: 0 5px; }

.ctl { display: inline-flex; align-items: center; gap: 4px; }
.ctl-step b { min-width: 2ch; text-align: center; font-weight: 400; }
.ctl-enum button { border-radius: 999px; min-width: 34px; padding: 0 10px; }
.ctl-toggle { border-radius: 999px !important; padding: 0 12px !important; min-width: 64px !important; }
.ctl-color {
  width: 28px; height: 28px; min-width: 28px; min-height: 28px;
  padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: none; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.ctl-range { gap: 6px; }
.ctl-range input[type="range"] { width: 130px; }
.ctl-lab { font-size: 12px; opacity: 0.85; }
.ctl-val { min-width: 3ch; text-align: right; font-size: 12px; opacity: 0.85; }

/* Hors ligne : l'écran est noir, sans rien d'autre. On garde le corps peint
   pour que la sortie reste noire même si un écran traîne à se figer. */
body.hors-ligne { background: #000; }
body.hors-ligne #stage { visibility: hidden; }

/* Page hors ligne : plein écran, au centre. La couleur du texte suit la
   luminosité du fond de l'installation (posée par le JavaScript), sinon du
   blanc sur un fond clair deviendrait illisible. */
#offline {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4vmin; text-align: center; padding: 8vmin;
  background-color: var(--bg); color: var(--offline-fg, #f4f4f6);
  animation: offline-in 600ms ease-out both;
}
#offline[hidden] { display: none; }
/* Les tailles viennent de la régie (onglet Scène) : --offline-titre et
   --offline-texte, exprimées en vmin (pourcentage du plus petit côté de
   l'écran) pour que le rapport au mur reste le même quelle que soit la
   résolution. */
#offline h1 {
  margin: 0; font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 700; letter-spacing: -0.03em; line-height: 0.94;
  font-size: clamp(2rem, var(--offline-titre, 17vmin), calc(var(--offline-titre, 17vmin) * 0.85));
  /* Effet anaglyphe, comme le splash de la regie : frange rouge a gauche,
     frange cyan a droite, coeur clair. */
  text-shadow: -0.028em 0 0 #ff2f2f, 0.028em 0 0 #2fffff;
}
#offline p {
  margin: 0; max-width: 58ch; white-space: pre-line; line-height: 1.5;
  font-size: clamp(0.9rem, var(--offline-texte, 2.6vmin), 2.4rem);
  opacity: 0.72;
}
#offline p:empty { display: none; }
@keyframes offline-in { from { opacity: 0 } to { opacity: 1 } }