/* Autoplanning — prototype-v4 (wizard CCN51) — feuille de style unique.
 * Accessible (contraste, focus visible), mobile, sans dépendance. */

:root {
  --fond: #ffffff;
  --texte: #1a1a1a;
  --accent: #0b5cad;
  --accent-fonce: #08407a;
  --gris: #5b5b5b;
  --bord: #d0d0d0;
  --alerte: #b3232a;
  --fond-regle: #fdf3f4;
  --fond-ok: #f1f8f1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texte);
  background: var(--fond);
  line-height: 1.5;
}

#wizard {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1rem;
}

h1 { font-size: 1.4rem; margin: 0.5rem 0 1rem; }

.question { font-size: 1.1rem; font-weight: 600; margin: 0.5rem 0 1rem; }

label {
  display: block;
  padding: 0.5rem 0.75rem;
  margin: 0.25rem 0;
  border: 1px solid var(--bord);
  border-radius: 6px;
  cursor: pointer;
}
label:hover { background: #f4f7fb; }
label:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }

em { color: var(--gris); font-weight: 400; }
code { background: #f0f0f0; padding: 0.1rem 0.3rem; border-radius: 4px; }

.bandeau-regles {
  background: var(--fond-regle);
  border-left: 4px solid var(--alerte);
  padding: 0.6rem 0.75rem;
  margin: 0.5rem 0 1rem;
  font-size: 0.9rem;
}

.progression { margin: 1rem 0; font-size: 0.85rem; color: var(--gris); }
.barre { height: 8px; background: #ececec; border-radius: 4px; margin-top: 0.25rem; overflow: hidden; }
.barre > div { height: 100%; background: var(--accent); }

.nav { display: flex; gap: 0.5rem; margin-top: 1.5rem; flex-wrap: wrap; }
button {
  font-size: 1rem;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--bord);
  background: #fff;
  cursor: pointer;
}
button:hover { background: #f4f7fb; }
button:focus-visible { outline: 2px solid var(--accent-fonce); outline-offset: 1px; }
button.primaire { background: var(--accent); color: #fff; border-color: var(--accent); }
button.primaire:hover { background: var(--accent-fonce); }
button.secondaire { background: #fff; }

.anomalie { border: 1px solid var(--bord); border-radius: 6px; padding: 0.75rem; margin: 0.5rem 0; }
.anomalie pre { background: #f7f7f7; padding: 0.5rem; border-radius: 4px; overflow-x: auto; font-size: 0.85rem; }
.regle { background: var(--fond-regle); padding: 0.5rem 0.75rem; border-radius: 4px; }
.info { color: var(--gris); font-size: 0.9rem; }

.tableau { width: 100%; border-collapse: collapse; margin: 0.5rem 0; }
.tableau th, .tableau td { border: 1px solid var(--bord); padding: 0.4rem 0.6rem; text-align: left; font-size: 0.95rem; }
.tableau th { background: #f4f7fb; }

.dossier { border: 1px solid var(--bord); border-radius: 6px; padding: 0.75rem; margin: 0.5rem 0; }
.import-zone { margin: 0.75rem 0; }
#import-zone input[type="file"] { display: block; margin: 0.5rem 0; }

@media (max-width: 720px) {
  .tableau { display: block; overflow-x: auto; }
}

/* ----- Synthèse : boutons de sortie et export brut ----- */
.sorties { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.sortie .info { color: var(--gris); }
.export-brut { white-space: pre-wrap; word-break: break-word; max-height: 20rem; overflow: auto; }

/* ----- Anomalies : preuve, impact, avertissements ----- */
.compteur { color: var(--gris); font-size: .9rem; }
.preuve li { margin: .15rem 0; }
.impact { border-left: 3px solid var(--accent); padding: .25rem .75rem; }
.avertissement { color: #8a4b00; font-weight: 600; }
.override { font-style: italic; }
.statut { font-size: .85rem; color: #8a4b00; }

/* ----- Impression : le dossier d'écart doit tenir sur du papier ----- */
@media print {
  .progression, .nav, .sorties, .bandeau-regles a { display: none !important; }
  body { background: #fff; color: #000; }
  .anomalie, .dossier { break-inside: avoid; }
}