/* Page de pilotage du simulateur de Veloce : thème clair de Mission Control (jetons de interfaces/design). */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--c-fond); color: var(--c-texte);
  font: var(--graisse-normal) var(--taille-corps)/1.5 var(--police);
}
h1, h2, h3, p { margin: 0; }
h2 { font-size: var(--taille-titre-3); font-weight: var(--graisse-demi-gras); }
h3 { font-size: var(--taille-corps-fort); font-weight: var(--graisse-demi-gras); margin-top: var(--espace-5); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

.entete {
  display: flex; justify-content: space-between; align-items: center; gap: var(--espace-5); flex-wrap: wrap;
  padding: var(--espace-5) var(--espace-6); border-bottom: 1px solid var(--c-filet);
  border-top: 6px solid var(--c-accent);
}
.entete h1 { font-size: var(--taille-titre-1); font-weight: var(--graisse-gras); letter-spacing: -0.01em; }
.sous-titre { color: var(--c-texte-2); max-width: 62ch; }
.voyants { display: flex; gap: var(--espace-3); flex-wrap: wrap; }
.voyant {
  display: flex; align-items: center; gap: var(--espace-2); padding: var(--espace-2) var(--espace-4);
  border-radius: var(--rayon-rond); background: var(--c-vert-fond); color: var(--c-vert); min-height: var(--cible-minimum);
}
.voyant .detail { color: var(--c-texte-2); font-size: var(--taille-meta); }
.voyant .pastille { width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.voyant.panne { background: var(--c-rouge-fond); color: var(--c-rouge); }
.voyant.panne .pastille { animation: battre 1s var(--mouvement-courbe) infinite; }
@keyframes battre { 50% { opacity: .25; } }

.erreur { margin: var(--espace-4) var(--espace-6) 0; padding: var(--espace-3) var(--espace-4); border-radius: var(--rayon-bouton);
          background: var(--c-rouge-fond); color: var(--c-rouge); font-weight: var(--graisse-moyen); }

.grille { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--espace-5); padding: var(--espace-5) var(--espace-6); }
.colonne-principale, .colonne-commandes { display: flex; flex-direction: column; gap: var(--espace-5); min-width: 0; }
.panneau { background: var(--c-surface); border-radius: var(--rayon-panneau); padding: var(--espace-5); }
.panneau > h2 { margin-bottom: var(--espace-4); }
.panneau-tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espace-4); flex-wrap: wrap; margin-bottom: var(--espace-4); }
.aide { color: var(--c-texte-2); font-size: var(--taille-meta); }
.vide { color: var(--c-texte-2); }
.rangee { display: flex; gap: var(--espace-2); flex-wrap: wrap; margin-top: var(--espace-3); }
.rangee > select, .rangee > input { flex: 1 1 140px; }
.rangee.sans-marge { margin-top: 0; }

.bouton {
  min-height: var(--cible-minimum); padding: 0 var(--espace-4); border-radius: var(--rayon-bouton); cursor: pointer;
  border: 1px solid var(--c-contour); background: var(--c-fond); font-weight: var(--graisse-moyen);
  transition: background var(--mouvement-rapide);
}
.bouton:hover { background: var(--c-surface-2); }
.bouton.principal { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-sur-accent); font-weight: var(--graisse-demi-gras); }
.bouton.principal:hover { background: #E84B00; }
.bouton.danger { border-color: var(--c-rouge); color: var(--c-rouge); }
.bouton.danger:hover { background: var(--c-rouge-fond); }
.bouton:disabled { opacity: .45; cursor: not-allowed; }
input, select { min-height: var(--cible-minimum); padding: 0 var(--espace-3); border: 1px solid var(--c-contour);
                border-radius: var(--rayon-bouton); background: var(--c-fond); }

/* Salle : le plan comme à l'écran des tables de la caisse */
.salle { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--espace-3); }
.salle .zone { grid-column: 1 / -1; color: var(--c-texte-2); font-size: var(--taille-meta); font-weight: var(--graisse-moyen); margin-top: var(--espace-2); }
.table {
  position: relative; min-height: 104px; padding: var(--espace-3); border-radius: var(--rayon-bouton); text-align: left; cursor: pointer;
  border: 2px solid var(--c-filet); background: var(--c-fond); display: flex; flex-direction: column; justify-content: space-between;
  transition: border-color var(--mouvement-normal), background var(--mouvement-normal);
}
.table .numero { font-size: var(--taille-chiffre); font-weight: var(--graisse-gras); line-height: 1; }
.table .etat { font-size: var(--taille-meta); color: var(--c-texte-2); }
.table .total { font-weight: var(--graisse-demi-gras); font-variant-numeric: tabular-nums; }
.table.coupons { border-color: var(--c-bleu); background: var(--c-bleu-fond); }
.table.ouverte { border-color: var(--c-accent); background: var(--c-accent-fond, #FFE9DD); }
.table.payee { border-color: var(--c-vert); background: var(--c-vert-fond); }
.table:hover { border-color: var(--c-texte); }
.legende { display: flex; gap: var(--espace-5); flex-wrap: wrap; list-style: none; padding: 0; margin: var(--espace-4) 0 0; font-size: var(--taille-meta); color: var(--c-texte-2); }
.legende li { display: flex; align-items: center; gap: var(--espace-2); }
.echantillon { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--c-filet); }
.echantillon.coupons { border-color: var(--c-bleu); background: var(--c-bleu-fond); }
.echantillon.ouverte { border-color: var(--c-accent); background: #FFE9DD; }
.echantillon.payee { border-color: var(--c-vert); background: var(--c-vert-fond); }
[data-theme="clair"] { --c-accent-fond: #FFE9DD; }

/* Items */
.items { width: 100%; border-collapse: collapse; }
.items th { text-align: left; font-size: var(--taille-meta); font-weight: var(--graisse-moyen); color: var(--c-texte-2); padding: var(--espace-2); border-bottom: 1px solid var(--c-filet); }
.items td { padding: var(--espace-2); border-bottom: 1px solid var(--c-filet); vertical-align: middle; }
.items .code { font-size: var(--taille-meta); color: var(--c-texte-2); }
.items .nombre { text-align: right; }
.items input.prix { width: 96px; min-height: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.items tr.epuise td:first-child { color: var(--c-rouge); font-weight: var(--graisse-demi-gras); }
.bascule { min-height: 40px; min-width: 128px; padding: 0 var(--espace-3); border-radius: var(--rayon-rond); cursor: pointer;
           border: 1px solid var(--c-vert); background: var(--c-vert-fond); color: var(--c-vert); font-weight: var(--graisse-moyen); }
.bascule.epuise { border-color: var(--c-rouge); background: var(--c-rouge-fond); color: var(--c-rouge); }

/* Scénario : l'horloge est la pièce maîtresse */
.choix-scenario { display: flex; gap: var(--espace-2); margin-bottom: var(--espace-4); }
.choix-scenario select { flex: 1; min-width: 0; }
.nom-scenario { font-weight: var(--graisse-demi-gras); }
.horloge { font-size: var(--affichage-vedette); font-weight: var(--graisse-extra-gras); line-height: 1; letter-spacing: -0.03em;
           font-variant-numeric: tabular-nums; margin: var(--espace-3) 0; }
.horloge.pause { color: var(--c-texte-3); }
.progression { height: 8px; border-radius: var(--rayon-rond); background: var(--c-surface-2); overflow: hidden; }
.progression > div { height: 100%; width: 0; background: var(--c-accent); transition: width var(--mouvement-normal); }
.prochaine { margin-top: var(--espace-3); color: var(--c-texte-2); min-height: 3em; }
.prochaine.attend { color: var(--c-ambre); background: var(--c-ambre-fond); padding: var(--espace-2) var(--espace-3); border-radius: var(--rayon-bouton); font-weight: var(--graisse-moyen); }
.transport { display: flex; gap: var(--espace-2); flex-wrap: wrap; margin-top: var(--espace-3); }
.transport .principal { flex: 1; }
.vitesses, .modes { display: flex; gap: var(--espace-2); flex-wrap: wrap; align-items: center; margin-top: var(--espace-3); }
.vitesses > span { color: var(--c-texte-2); font-size: var(--taille-meta); margin-right: var(--espace-1); }
.choix { min-height: 40px; padding: 0 var(--espace-3); border-radius: var(--rayon-rond); border: 1px solid var(--c-contour); background: var(--c-fond); cursor: pointer; }
.choix[aria-checked="true"] { background: var(--c-texte); border-color: var(--c-texte); color: var(--c-fond); }
.en-cours { margin-top: var(--espace-3); }

/* Fil */
.attente { font-size: var(--taille-meta); color: var(--c-ambre); }
.liste-fil { list-style: none; margin: 0; padding: 0; max-height: 440px; overflow-y: auto; }
.liste-fil li { display: grid; grid-template-columns: 4.2em 1fr; gap: var(--espace-2); padding: var(--espace-2) 0; border-bottom: 1px solid var(--c-filet); font-size: var(--taille-meta); }
.liste-fil time { color: var(--c-texte-3); font-variant-numeric: tabular-nums; }
.liste-fil .succes { color: var(--c-vert); }
.liste-fil .alerte { color: var(--c-ambre); }
.liste-fil .erreur { color: var(--c-rouge); font-weight: var(--graisse-moyen); }

/* Fenêtre d'une table */
dialog { border: none; border-radius: var(--rayon-panneau); padding: 0; width: min(560px, calc(100vw - 32px)); background: var(--c-fond); color: var(--c-texte); }
dialog::backdrop { background: rgb(20 18 16 / .45); }
.fenetre { padding: var(--espace-5); }
.fenetre-tete { display: flex; justify-content: space-between; align-items: center; }
.fenetre-tete h2 { font-size: var(--taille-titre-2); }
.fermer { width: var(--cible-minimum); height: var(--cible-minimum); border: none; background: none; font-size: 28px; cursor: pointer; border-radius: var(--rayon-bouton); }
.addition { margin-top: var(--espace-3); padding: var(--espace-3); border-radius: var(--rayon-bouton); background: var(--c-surface); }
.addition .entete-addition { display: flex; justify-content: space-between; font-weight: var(--graisse-demi-gras); }
.addition.payee { background: var(--c-vert-fond); }
#quantite { flex: 0 0 80px; }

@media (max-width: 960px) {
  .grille { grid-template-columns: 1fr; padding: var(--espace-4); }
  .entete { padding: var(--espace-4); }
  .horloge { font-size: var(--affichage-titre); }
  .items .code { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }