/* Simulation de démo VAR : ce qui est commun aux consoles (barre de la simulation, accueil, surbrillance, présentateur).
   La disposition sera ajustée aux captures des interfaces réelles (interfaces/). */

:root {
  --fond: #f3f5f8;
  --surface: #ffffff;
  --bordure: #d9dee5;
  --texte: #1f2933;
  --texte-doux: #5b6773;
  --accent: #2f6db5;
  --accent-fonce: #24548c;
  --entete: #23344a;
  --barre-sim: #14181d;
  --critique: #b42318;
  --haute: #c4520b;
  --moyenne: #8a6a00;
  --basse: #5b6773;
  --cible: #f5b400;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 14px;
  color: var(--texte);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2 { margin: 0; }
kbd { border: 1px solid var(--bordure); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--surface); font-size: 12px; }

.bouton {
  font: inherit; border: 1px solid var(--bordure); background: var(--surface); color: var(--texte);
  padding: 6px 12px; border-radius: 4px; cursor: pointer;
}
.bouton:hover { border-color: var(--accent); }
.bouton.principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton.principal:hover { background: var(--accent-fonce); }
.bouton:disabled { opacity: .45; cursor: default; }

/* --- La barre de la simulation (commune aux consoles) --- */
.sim-barre {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--barre-sim); color: #c9d1d9; height: 32px; padding: 0 12px; font-size: 12px;
}
.sim-consoles { display: flex; gap: 2px; height: 100%; }
.sim-consoles a { color: #c9d1d9; padding: 0 12px; display: flex; align-items: center; border-bottom: 2px solid transparent; }
.sim-consoles a:hover { color: #fff; text-decoration: none; }
.sim-consoles a.actif { color: #fff; border-bottom-color: #8fb7e6; }
.sim-mention { color: #8b949e; white-space: nowrap; }

/* --- L'accueil et les écrans à venir --- */
.accueil, .a-venir { max-width: 760px; margin: 40px auto; padding: 0 20px; }
.accueil h1, .a-venir h1 { font-size: 24px; margin-bottom: 10px; }
.accueil h2 { font-size: 16px; margin: 28px 0 10px; }
.accueil-intro { color: var(--texte-doux); line-height: 1.5; }
.accueil-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.accueil-etapes { line-height: 1.7; padding-left: 20px; }
.accueil-consoles { border-collapse: collapse; background: var(--surface); border: 1px solid var(--bordure); width: 100%; }
.accueil-consoles td { padding: 8px 12px; border-bottom: 1px solid #edf0f3; }
.accueil-consoles .ok { color: #1a7f37; font-weight: 600; }

/* --- La surbrillance du parcours --- */
.sim-cible { outline: 3px solid var(--cible); outline-offset: 2px; border-radius: 3px; animation: sim-pulse 1.6s ease-in-out infinite; }
tr.sim-cible > td { background: #fff8db; }
@keyframes sim-pulse { 0%, 100% { outline-color: var(--cible); } 50% { outline-color: rgba(245, 180, 0, .35); } }

/* --- Les messages --- */
#sim-toasts { position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 10; }
.sim-toast { background: #1f2933; color: #fff; padding: 10px 14px; border-radius: 4px; max-width: 360px; box-shadow: 0 4px 12px rgba(0,0,0,.2); transition: opacity .4s; }
.sim-toast-sortie { opacity: 0; }

/* --- La fenêtre du présentateur --- */
body.presentateur { padding: 16px; background: #10151b; color: #e6edf3; }
.presentateur .bouton { background: #1f2731; color: #e6edf3; border-color: #3a4552; }
.presentateur .bouton.principal { background: var(--accent); border-color: var(--accent); }
.pres-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.pres-acte { color: #8fb7e6; font-size: 13px; font-weight: 600; }
.pres-entete h1 { font-size: 19px; margin-top: 2px; }
.pres-compteur { color: #8b949e; font-size: 13px; white-space: nowrap; }
.pres-bloc { background: #1a2129; border: 1px solid #2c3640; border-radius: 6px; padding: 12px 14px; margin-bottom: 10px; }
.pres-bloc h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #8b949e; margin-bottom: 6px; }
.pres-bloc p { margin: 0; line-height: 1.5; }
.pres-dire p { font-size: 16px; }
.pres-nav { display: flex; gap: 8px; margin: 14px 0 10px; }
.pres-nav .bouton { flex: 1; padding: 10px; }
.pres-option { display: block; color: #c9d1d9; font-size: 13px; margin-bottom: 16px; }
.pres-sous-titre { font-size: 13px; color: #8b949e; margin: 10px 0 6px; }
.pres-etapes { margin: 0; padding-left: 22px; font-size: 13px; line-height: 1.8; color: #c9d1d9; }
.pres-etapes li { cursor: pointer; }
.pres-etapes li:hover { color: #fff; }
.pres-etapes li.actif { color: var(--cible); font-weight: 600; }
.pres-pied { margin-top: 18px; border-top: 1px solid #2c3640; padding-top: 12px; }
.pres-etat { color: #8b949e; font-size: 12px; }