/* Styles communs du site de l'école : couleurs, typographie, mise en page de la page unique.
   Les domaines (menus, salle, tableau, dialogue…) ont leur propre feuille. */

:root {
  --fond: #1f1d1a;          /* fond sombre et chaud, celui de la page d'essai */
  --texte: #f2eee8;
  --texte-doux: #cfc6ba;
  --accent: #f0b44c;         /* jaune chaud des boutons et repères */
  --bouton: #3a3631;
  --bordure: #5a544c;
  --erreur-fond: #6e2a22;
  --erreur-texte: #fff1ec;
  --rayon: 10px;
  --police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.4 var(--police);
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; }

button {
  padding: 8px 16px;
  background: var(--bouton);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  cursor: pointer;
}

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

#ecran { min-height: 100%; }

.ecran { min-height: 100vh; min-height: 100dvh; }

/* Écran minimal du socle */
.ecran-accueil {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  text-align: center;
}
.ecran-accueil h1 { margin: 0 0 8px; font-size: clamp(28px, 6vw, 48px); color: var(--accent); }
.accueil-etat { color: var(--texte-doux); }

/* Bandeau « réponses enregistrées » (A3) */
.bandeau-reponses-enregistrees {
  display: inline-block;
  margin: 8px 0 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #2a2214;
  font-weight: 600;
}

/* Erreur globale, au-dessus de l'écran */
.erreur-globale {
  position: fixed;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: min(92vw, 640px);
  padding: 12px 16px;
  background: var(--erreur-fond);
  color: var(--erreur-texte);
  border-radius: var(--rayon);
  box-shadow: 0 6px 24px rgb(0 0 0 / 40%);
}
.erreur-globale[hidden] { display: none; }
.erreur-globale p { margin: 0; flex: 1; }
.erreur-fermer { padding: 0 10px; background: transparent; border: none; font-size: 22px; line-height: 1; }