/* ============================================================
   PLAYGROUND — l'atelier par-dessus la créature.

   Les jetons vivent dans src/ui/jetons.css. Ici, le mobilier de
   l'atelier : le panneau, les réglages, la galerie, la sonde.
   Règle : le mobilier suit la lumière (jour/nuit) ; la CRÉATURE et ce qui la
   touche directement (sonde, bandeau de pause) restent sombres.
   ============================================================ */

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--fond); color: var(--encre);
  font-family: var(--police);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--r1); }

/* ---------- La créature ---------- */
#vue {
  position: fixed; inset: 0; display: block;
  width: 100vw; height: 100vh; height: 100dvh;
  /* Fond de secours : si le rendu s'interrompt, l'écran n'est jamais un noir
     absolu — on voit une matière sourde. La créature ne s'éclaircit jamais. */
  background: radial-gradient(120% 100% at 50% 42%, #16120f 0%, #0b0a09 58%, #060606 100%);
}

/* ---------- Le panneau ---------- */
.barre {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 344px; max-width: 92vw;
  overflow-y: auto;
  padding: var(--e3) var(--e3) var(--e5);
  background: rgba(7, 8, 10, 0.82);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-right: 1px solid var(--filet);
  transform: translateX(-102%);
  transition: transform 220ms ease;
  z-index: 2;
}
body.barre-ouverte .barre { transform: translateX(0); }
.barre-entete { margin-bottom: var(--e4); }
.barre-titre { margin: 0; font-family: var(--police-titre); font-size: var(--t-marque); letter-spacing: .2em; font-weight: 600; }
.barre-sous-titre { margin: var(--e1) 0 0; color: var(--doux2); font-size: var(--t-aide); }
.barre-defilement { display: flex; flex-direction: column; gap: var(--e2); }

/* Un mot est une carte pliable. */
.mot {
  padding: var(--e3);
  background: var(--surface2);
  border: 1px solid var(--filet);
  border-radius: var(--r2);
}
.mot-entete {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e2);
  cursor: pointer; user-select: none;
}
.mot-fleche { color: var(--doux2); font-size: var(--t-micro); min-width: 10px; }
.mot-titre { margin: 0; font-family: var(--police); font-size: var(--t-petit); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.mot-description {
  margin: var(--e1) 0 var(--e2); color: var(--doux2); font-size: var(--t-mini); line-height: 1.45;
  flex-basis: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mot-reglages { display: grid; gap: var(--e2); }
.reglage { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--e2); align-items: center; }
.reglage-nom { font-size: var(--t-petit); color: var(--encre); }
.reglage-valeur { color: var(--doux2); font-family: var(--police-mono); font-size: var(--t-micro); font-variant-numeric: tabular-nums; }
.reglage-curseur { grid-column: 1 / -1; width: 100%; height: 18px; accent-color: var(--accent); cursor: pointer; }
/* UNE SEULE CLASSE POUR DIRE « CE RÉGLAGE N'AGIT PAS ICI ». Le verdict, sa
   raison et sa source viennent d'une seule règle : src/core/validite.js.
   L'OPACITÉ SEULE : au laboratoire, un réglage grisé reste manœuvrable — on
   prépare, on ne subit pas. */
.reglage-eteint { opacity: .42; }
.mot.plie .mot-reglages, .mot.plie .mot-description { display: none; }

.barre-pied { display: grid; gap: var(--e2); padding-top: var(--e4); margin-top: var(--e4); border-top: 1px solid var(--filet); }
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--h-serre); padding: 0 var(--e3);
  font: inherit; font-size: var(--t-aide);
  color: var(--encre);
  background: var(--surface2); border: 1px solid var(--bord-ui); border-radius: var(--rp);
  cursor: pointer;
  transition: background var(--duree), color var(--duree), border-color var(--duree);
}
.bouton:hover { border-color: var(--accent); color: var(--accent); }
.bouton:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- La galerie de variantes ---------- */
#galerie {
  position: fixed; left: 360px; right: var(--e3); bottom: var(--e3);
  padding: var(--e2) var(--e3);
  background: rgba(7, 8, 10, 0.78);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--filet); border-radius: var(--r2);
  z-index: 2;
}
#galerie:empty { display: none; }
.galerie-entete { display: flex; gap: var(--e3); align-items: baseline; margin-bottom: var(--e2); }
.galerie-titre { font-size: var(--t-mini); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.galerie-note { font-size: var(--t-micro); color: var(--doux2); font-variant-numeric: tabular-nums; }
.galerie-rang { display: flex; gap: var(--e2); overflow-x: auto; }
.variante { min-width: 132px; padding: var(--e2); background: var(--surface2); border: 1px solid var(--filet); border-radius: var(--r2); }
.variante-active { border-color: var(--accent); }
.variante-titre { display: block; width: 100%; text-align: left; font: inherit; font-size: var(--t-mini); color: var(--encre); background: none; border: 0; padding: 0; cursor: pointer; }
.variante-resume { display: block; margin-top: var(--e1); font-size: var(--t-micro); color: var(--doux2); white-space: nowrap; }
.variante-garde { margin-top: var(--e2); font: inherit; font-size: var(--t-micro); color: var(--accent); background: none; border: 1px solid var(--bord-ui); border-radius: var(--rp); padding: 2px var(--e2); cursor: pointer; }

/* ---------- L'avis — LA VOIX ---------- */
/* Un élément unique, posé sur `body`, pour tout l'atelier : une pastille en
   haut et au centre, SOUS la bande du header, pour ne pas couvrir ce qu'on
   regarde. Elle ne parle que sur la surface de travail : jamais dans la vue
   partagée, jamais pendant la veille — voir `surfacePublique` (main.js). */
.avis {
  position: fixed; left: 50%; top: calc(var(--e3) + var(--h-controle) + var(--e2));
  transform: translateX(-50%);
  max-width: min(92vw, 560px);
  padding: var(--e3) var(--e5);
  background: var(--accent-fill); color: var(--sur-accent);
  border: 0; border-radius: var(--rp);
  font-size: var(--t-corps); text-align: center; text-wrap: pretty;
  box-shadow: var(--ombre);
  z-index: 8; pointer-events: none;
}
/* LES CINQ CLASSES — les couleurs existent déjà (src/ui/jetons.css:30-32) :
   --danger / --danger-soft pour l'échec ; --accent / --accent-soft /
   --accent-fill / --sur-accent / --doux / --doux2 pour le reste. Aucune
   couleur nouvelle. La confirmation garde la pastille pleine ci-dessus. */
.avis.erreur {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--danger);
  box-shadow: none;
  /* Une erreur ne s'efface JAMAIS toute seule : elle se renvoie d'un clic. */
  pointer-events: auto; cursor: pointer;
}
.avis.avertissement {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.avis.attente {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--doux);
}
.avis.information {
  background: var(--accent-soft);
  border: 1px solid var(--filet);
  color: var(--doux2);
}
/* Une PANNE : même pastille, en couleur d'alerte — on ne la confond pas avec
   un message de passage. (Elle porte AUSSI la classe `erreur`.) */
body[data-panne="1"] .avis {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--danger);
  box-shadow: none;
}

/* ---------- Les choix (matière, enveloppe) ---------- */
.choix-matiere { position: fixed; top: var(--e3); right: var(--e3); z-index: 2; display: flex; gap: var(--e2); }
.choix-matiere select {
  font: inherit; font-size: var(--t-aide);
  height: var(--h-serre); padding: 0 var(--e3);
  color: var(--encre);
  background: rgba(7, 8, 10, 0.82);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border: 1px solid var(--bord-ui); border-radius: var(--rp);
}

/* ---------- Le récit, l'en-tête d'état ---------- */
.recit {
  position: fixed; top: var(--e3); left: 360px; max-width: 56vw;
  padding: 7px var(--e3);
  background: rgba(7, 8, 10, 0.72);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  border: 1px solid var(--filet); border-radius: var(--r2);
  font-family: var(--police-mono); font-size: var(--t-petit); color: var(--doux);
  font-variant-numeric: tabular-nums;
  line-height: 1.5; z-index: 2;
}
/* L'en-tête ne vit que dans sa zone : la souris y entre, il paraît ;
   elle en sort, il s'efface. */
.recit, .choix-matiere { transition: opacity 300ms ease, transform 300ms ease; }
body:not(.entete-vive) .recit,
body:not(.choix-vive) .choix-matiere { opacity: 0; transform: translateY(-8px); pointer-events: none; }

body.performance .barre, body.performance #galerie, body.performance .recit, body.performance .choix-matiere { display: none; }
/* La VUE DE PARTAGE : l'image SEULE — la créature, pas un atelier. */
/* LE RETOUR VERS LA RÉGIE — au coin bas-droit, très discret, et pour qui est
   connecté seulement. Il s'efface dans la vue partagée : la pièce doit rester
   seule à l'écran. Sur un écran tactile il n'y a pas de survol : il est donc
   moins effacé, sinon on ne le trouve pas. */
.aller-regie {
  position: fixed; right: var(--e3); bottom: var(--e3); z-index: 60;
  width: 2.4rem; height: 2.4rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: var(--encre); text-decoration: none;
  background: color-mix(in srgb, var(--surface2) 60%, transparent);
  opacity: 0.22;
  transition: opacity 160ms ease, background 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.aller-regie:hover, .aller-regie:focus-visible { opacity: 1; background: var(--surface3); }
.aller-regie[hidden] { display: none; }
@media (hover: none) { .aller-regie { opacity: 0.45; } }
/* DANS L APP, LE RETOUR EST NATIF : le lien web du coin reste CACHE, sinon il
   ramenerait a la regie SANS passer par Face ID. Le cadenas de la barre est la
   seule porte. */

body.vue .barre, body.vue #galerie, body.vue .recit, body.vue .choix-matiere, body.vue .aller-regie { display: none; }

/* La sonde : les valeurs vivantes, par-dessus l'image. Elle survit au mode
   performance, et reste sombre — elle vit SUR le Playground. */
.sonde {
  position: fixed; top: var(--e3); left: var(--e3); z-index: 6; margin: 0;
  padding: 0;
  color: #e7e9ee;
  font: var(--t-aide)/1.55 var(--police-mono);
  pointer-events: none;
}

/* UNE PASTILLE PAR LIGNE — le fond épouse la LONGUEUR RÉELLE du texte.

   Le panneau portait UN grand rectangle translucide : partout où la ligne est
   courte (et elles le sont presque toutes), il posait un aplat sombre sur
   l'image sans rien éclairer. Chaque ligne porte donc son propre fond, calé sur
   ce qu'elle dit. `white-space: pre` garde l'alignement en colonnes, qui est
   fait d'espaces. */
.sonde-ligne {
  display: block;
  width: fit-content;
  padding: 1px 0.7em;
  margin-bottom: 2px;
  background: rgba(7, 7, 8, .74);
  border: 1px solid #2b2622;
  border-radius: var(--r2);
  white-space: pre;
}

/* Sur grand écran, fermé, le récit et la galerie remontent à gauche. */
@media (min-width: 721px) {
  body:not(.barre-ouverte):not(.performance) .recit { left: var(--e3); }
  body:not(.barre-ouverte) #galerie { left: var(--e3); }
}
@media (max-width: 720px) {
  .barre { width: 100vw; max-width: 100vw; top: 56px; bottom: 0; }
  #galerie { display: none; }
  body.barre-ouverte .recit { display: none; }
  .recit { left: var(--e3); right: var(--e3); top: auto; bottom: var(--e3); max-width: none; font-size: var(--t-micro); }
  .choix-matiere { top: var(--e3); right: var(--e3); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (pointer: coarse) {
  .mot-entete { min-height: 44px; align-items: center; }
  .reglage-curseur { height: 44px; }
}
/* ---------- L'écran de veille ---------- */
/* Un ARRÊT SUR IMAGE : le dernier rendu reste visible et gelé, et le titre
   s'écrit par-dessus. Pas de fond opaque, pas de dégradé : au plus un voile à
   peine perceptible (10 %). La lisibilité vient de la typographie. */
.veille { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(4, 6, 10, .10); }
.veille[hidden] { display: none; }
/* Le titre est SEUL au centre exact ; le sous-texte pend dessous sans
   déplacer le centre optique du mot. */
.veille-contenu { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; }
.veille-titre {
  margin: 0;
  font-family: "Space Grotesk", var(--police-titre); font-weight: 700; font-synthesis: none;
  font-size: clamp(40px, 12.5vw, 158px); letter-spacing: .01em; line-height: 1;
  color: #f4f7fa;
}
/* Le code de la créature, AU-DESSUS du titre : une étiquette de spécimen. */
.veille-code {
  position: absolute; bottom: calc(100% + var(--e3)); left: 50%; transform: translateX(-50%);
  margin: 0; width: max-content;
  font-family: var(--police-mono); font-size: var(--t-petit);
  letter-spacing: .1em; color: rgba(244,247,250,.72);
}
.veille-code[hidden] { display: none; }
/* Le titre ou la ligne peuvent être masqués ; la ligne, alors, se centre. */
.veille-titre[hidden], .veille-sous[hidden] { display: none; }
.veille-contenu.sans-titre .veille-sous { top: 0; transform: translate(-50%, -50%); }
.veille-sous {
  position: absolute; top: calc(100% + var(--e4)); left: 50%; transform: translateX(-50%);
  margin: 0; width: max-content; max-width: 46ch;
  /* La ligne parle la MÊME langue que le nom de la créature : la mono, avec
     le même interlettrage. C'est ce qui les fait tenir ensemble. */
  font-family: var(--police-mono); font-size: var(--t-petit); letter-spacing: .1em;
  color: rgba(244,247,250,.74);
}
.veille-filtres { position: absolute; width: 0; height: 0; pointer-events: none; }
/* L'interface s'efface : seule l'image compte. */
body.veille-active #barre,
body.veille-active .choix-matiere,
body.veille-active #recit,
body.veille-active #galerie { visibility: hidden; }
/* LE DÉCALAGE RVB — un glissement des canaux du contenu (la créature, le mot).
   Aucun sursaut aléatoire : c'est la souris qui l'allume, et le JavaScript
   pose le décalage. Le cadre ne bouge jamais. */
body.veille-fremit #vue { filter: url(#aberration); }
/* Le titre : la souris l'accentue, en s'approchant. */
.veille-titre.mene { filter: url(#aberration-titre); }
/* Le geste réduit éteint le glitch. */
@media (prefers-reduced-motion: reduce) {
  body.veille-fremit #vue,
  .veille-titre.mene { filter: none; }
}