/*
 * style.css
 * ---------------------------------------------------------------------
 * Toutes les couleurs sont définies ici, en variables.
 * Le mode sombre suit automatiquement le réglage du système.
 */

/* ---------- Couleurs (mode clair) ---------- */
:root {
  --fond: #ffffff;
  --fond-carte: #f8f7f3;
  --bordure: #e2e0d8;
  --texte: #2c2c2a;
  --texte-secondaire: #5f5e5a;
  --mur: #2c2c2a;

  --table-fond: #f1efe8;
  --table-bord: #888780;
  --eleve-fond: #e1f5ee;
  --eleve-bord: #0f6e56;
  --surveillant-fond: #faece7;
  --surveillant-bord: #993c1d;

  --cone: #d85a30;
  --ecran-visible: #ef9f27;
  --ecran-cache: #888780;
  --ecran-cache-opacite: 0.45;
}

/* ---------- Couleurs (mode sombre) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #1f1f1e;
    --fond-carte: #2a2a28;
    --bordure: #444441;
    --texte: #f1efe8;
    --texte-secondaire: #b4b2a9;
    --mur: #d3d1c7;

    --table-fond: #444441;
    --table-bord: #b4b2a9;
    --eleve-fond: #085041;
    --eleve-bord: #9fe1cb;
    --surveillant-fond: #712b13;
    --surveillant-bord: #f5c4b3;

    --cone: #f0997b;
    --ecran-visible: #fac775;
    --ecran-cache: #b4b2a9;
    --ecran-cache-opacite: 0.7;
  }
}


/* ---------- Mise en page ---------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 32px 16px 48px;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}

header,
footer {
  max-width: 1280px;
  margin: 0 auto;
}

h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px;
}

h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
}

.intro {
  max-width: 70ch;
  color: var(--texte-secondaire);
  margin: 0 0 24px;
}

.sous-titre {
  font-size: 14px;
  color: var(--texte-secondaire);
  margin: 0 0 12px;
}

/* Les deux simulations côte à côte sur grand écran, l'une sous l'autre sinon */
.simulations {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
  gap: 24px;
}

.simulation {
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 16px;
}

footer {
  margin-top: 32px;
  font-size: 14px;
  color: var(--texte-secondaire);
}

footer ul {
  padding-left: 20px;
}


/* ---------- Plan de la salle ---------- */
svg {
  width: 100%;
  height: auto;
  display: block;
}

.mur         { fill: none; stroke: var(--mur); stroke-width: 1.5; }
.tableau     { stroke: var(--mur); stroke-width: 4; }
.circuit     { fill: none; stroke: var(--cone); stroke-width: 1; stroke-dasharray: 6 5; opacity: 0.6; }
.table       { fill: var(--table-fond); stroke: var(--table-bord); stroke-width: 0.5; }
.eleve       { fill: var(--eleve-fond); stroke: var(--eleve-bord); stroke-width: 0.5; }
.surveillant { fill: var(--surveillant-fond); stroke: var(--surveillant-bord); stroke-width: 1; }
.cone        { fill: var(--cone); fill-opacity: 0.14; stroke: var(--cone); stroke-width: 0.5; }
.direction   { stroke: var(--cone); stroke-width: 2; stroke-linecap: round; }
.legende     { font-size: 12px; fill: var(--texte-secondaire); }

/* Écrans : gris par défaut, orange quand ils sont visibles */
.ecran {
  stroke: var(--ecran-cache);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: var(--ecran-cache-opacite);
}

.ecran--visible {
  stroke: var(--ecran-visible);
  opacity: 1;
}


/* ---------- Réglages ---------- */
.reglages {
  display: grid;
  grid-template-columns: auto 1fr 4.5em;
  gap: 8px 12px;
  align-items: center;
  margin-top: 12px;
  font-size: 14px;
  color: var(--texte-secondaire);
}

.reglages input[type="range"] {
  width: 100%;
}

/* Colonne supplémentaire pour les cases « lier » */
.reglages--synchro {
  grid-template-columns: auto 1fr 4.5em auto;
}

.synchro {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.synchro input {
  margin: 0;
}

.compteur {
  font-size: 17px;
  margin: 16px 0 0;
}

.compteur strong {
  font-weight: 600;
}


/* ---------- Séquence de positions ---------- */
.sequence {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--bordure);
  font-size: 14px;
}

.sequence button {
  font: inherit;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
}

.sequence button:hover:not(:disabled) {
  border-color: var(--table-bord);
}

.sequence button:disabled {
  opacity: 0.5;
  cursor: default;
}

.sequence-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sequence-table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.sequence-table th,
.sequence-table td {
  padding: 4px 8px;
  text-align: left;
  border-bottom: 1px solid var(--bordure);
}

.sequence-table th {
  font-weight: 600;
  color: var(--texte-secondaire);
}

.sequence-table td:first-child {
  color: var(--texte-secondaire);
}

/* Colonne des boutons, alignée à droite */
.sequence-table th:last-child,
.sequence-table td:last-child {
  text-align: right;
  white-space: nowrap;
}

.sequence-table td:last-child button {
  padding: 1px 8px;
  margin-left: 4px;
}

.sequence-etat {
  margin: 8px 0 0;
  color: var(--texte-secondaire);
}

.sequence-etat:empty {
  display: none;
}

/* Texte lu par les lecteurs d'écran mais invisible à l'écran */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}