/* Jeu du flux — charte Zuber Reshape (Inter, bleu #2E75B6, ardoise #0F172A, dégradé signature). Aucune ressource externe. */
:root {
  --bleu: #2E75B6; --bleu-fonce: #1F4E79; --ardoise: #0F172A; --gris: #475569; --fond: #F8FAFC; --bord: #E2E8F0;
  --vert: #10B981; --orange: #F59E0B; --rouge: #C00000; --violet: #8B5CF6;
  --degrade: linear-gradient(90deg, #6EE7B7, #3B82F6, #8B5CF6);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--ardoise); font-family: Inter, 'Segoe UI', system-ui, sans-serif; font-size: 14px; line-height: 1.45; }
button { font: inherit; cursor: pointer; border: 1px solid var(--bord); background: #fff; color: var(--ardoise); border-radius: 8px; padding: 6px 12px; }
button:hover { border-color: var(--bleu); }
button:disabled { opacity: .45; cursor: default; border-color: var(--bord); }
button.primaire { background: var(--degrade); color: #fff; border: none; font-weight: 600; padding: 8px 16px; }
button.actif { background: var(--ardoise); color: #fff; border-color: var(--ardoise); }
h1, h2, h3 { margin: 0 0 8px; color: var(--bleu-fonce); }
h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); }
p { margin: 6px 0; }
small, .gris { color: var(--gris); }

.barre { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; background: #fff; border-bottom: 3px solid transparent; border-image: var(--degrade) 1; }
.marque { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.pied p { margin: 4px 0; } .pied a { color: var(--bleu); }
.marque .cube { width: 28px; height: 28px; border-radius: 7px; background: var(--degrade); }
.marque b { display: block; font-size: 16px; } .marque small { display: block; font-size: 11px; }
.nav-niveaux { display: flex; gap: 6px; flex-wrap: wrap; }
.nav-niveaux button.reussi::after { content: ' ✓'; color: var(--vert); }

main { max-width: 1180px; margin: 0 auto; padding: 16px; }
.pied { max-width: 1180px; margin: 0 auto; padding: 8px 16px 24px; font-size: 12px; color: var(--gris); }

/* accueil */
.accueil { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.carte { background: #fff; border: 1px solid var(--bord); border-radius: 12px; padding: 16px 18px; }
.carte.consigne { border-left: 4px solid var(--bleu); }
.investissements label { display: block; border: 1px solid var(--bord); border-radius: 8px; padding: 8px 10px; margin: 6px 0; cursor: pointer; }
.investissements label:has(input:checked) { border-color: var(--bleu); background: #EFF6FF; }
.investissements input { margin-right: 8px; }
.progression { font-size: 12px; color: var(--gris); margin-top: 8px; }

/* partie */
.partie { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.usine { background: #fff; border: 1px solid var(--bord); border-radius: 12px; padding: 14px 16px; }
.horloge { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.horloge .heure { font-size: 26px; font-weight: 700; color: var(--bleu-fonce); font-variant-numeric: tabular-nums; }
.badge { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; background: #ECFDF5; color: #047857; }
.badge.ferme { background: #F1F5F9; color: var(--gris); }
.semaine { height: 8px; border-radius: 4px; background: var(--bord); overflow: hidden; margin-bottom: 14px; position: relative; }
.semaine > div { height: 100%; background: var(--degrade); transition: width .1s linear; }
.semaine .nuit { position: absolute; top: 0; height: 100%; background: rgba(15, 23, 42, .18); }
.commandes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.chaine { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: start; }
.chaine[data-colonnes="6"] { grid-template-columns: repeat(6, 1fr); }
.chaine[data-colonnes="7"] { grid-template-columns: repeat(7, 1fr); }
.poste.tampon { background: #FFFBEB; border-color: #FDE68A; }
.poste.tampon .compte { font-size: 22px; font-weight: 700; color: #B45309; }
.poste.tampon .jetons { display: flex; flex-wrap: wrap; gap: 3px; }
.poste.panne { border-color: var(--rouge); background: #FEF2F2; }
.alerte { color: var(--rouge); font-weight: 600; font-size: 12px; }
.poste .alerte { font-size: 11px; margin-bottom: 4px; }
.semaine .panne-marque { position: absolute; top: 0; height: 100%; background: rgba(192, 0, 0, .55); }
.ordre.urgent { border-color: var(--orange); background: #FFFBEB; }
.ordre .boutons2 { display: flex; flex-direction: column; gap: 4px; }
.poste { position: relative; border: 1px solid var(--bord); border-radius: 10px; padding: 8px; background: var(--fond); min-height: 150px; }
.poste + .poste::before { content: '→'; position: absolute; left: -13px; top: 60px; color: var(--gris); font-size: 16px; }
.poste h3 { margin-bottom: 6px; }
.poste .duree { font-size: 11px; color: var(--gris); margin-bottom: 6px; }
.slot { background: #fff; border: 1px dashed var(--bord); border-radius: 8px; min-height: 44px; margin: 4px 0; padding: 4px 6px; font-size: 12px; }
.slot.occupe { border-style: solid; }
.slot.pret { border-color: var(--orange); background: #FFFBEB; }
.slot .lot { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.slot .lot i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.slot .barre { height: 5px; border-radius: 3px; background: var(--bord); margin-top: 4px; overflow: hidden; }
.slot .barre > div { height: 100%; background: var(--bleu); }
.slot .etat { font-size: 11px; color: var(--gris); }
.slot.pret .etat { color: #B45309; }

.file { min-height: 150px; }
.file .jetons { display: flex; flex-wrap: wrap; gap: 3px; }
.jeton { width: 18px; height: 18px; border-radius: 4px; font-size: 9px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.file .compte { font-size: 22px; font-weight: 700; color: var(--bleu-fonce); }
.sortie .compte { font-size: 22px; font-weight: 700; color: #047857; }
.sortie .parOrdre { font-size: 12px; margin-top: 4px; }

.indicateurs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.tuile { background: var(--fond); border: 1px solid var(--bord); border-radius: 8px; padding: 6px 8px; }
.tuile .label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); }
.tuile .valeur { font-size: 18px; font-weight: 700; color: var(--bleu-fonce); }
.tuile .sous { font-size: 11px; color: var(--gris); }

.cote { display: flex; flex-direction: column; gap: 12px; }
.ordres { background: #fff; border: 1px solid var(--bord); border-radius: 12px; padding: 12px 14px; }
.entete-ordres { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.entete-ordres h3 { margin: 0; }
.motif-pause { font-size: 12px; color: var(--bleu-fonce); background: #EFF6FF; border-radius: 8px; padding: 6px 10px; margin: 8px 0 2px; }
.motif-pause:empty { display: none; }
.commandes .case { font-size: 12px; color: var(--gris); display: inline-flex; align-items: center; gap: 4px; }
.ordre { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--bord); border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
.ordre .couleur { width: 12px; height: 36px; border-radius: 4px; }
.ordre b { display: block; }
.ordre .detail { font-size: 12px; color: var(--gris); }
.ordre.lance { background: #F8FAFC; }
.ordre.termine { background: #ECFDF5; border-color: #A7F3D0; }
.ordre.retard { background: #FEF2F2; border-color: #FECACA; }
.ordre .avancement { height: 5px; border-radius: 3px; background: var(--bord); margin-top: 5px; overflow: hidden; }
.ordre .avancement > div { height: 100%; }
.journal { font-size: 12px; color: var(--gris); max-height: 120px; overflow: auto; }
.journal div { padding: 2px 0; border-bottom: 1px solid #F1F5F9; }

/* fin */
.fin { max-width: 760px; margin: 0 auto; }
.fin .verdict { font-size: 28px; font-weight: 800; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fin .verdict.echec { background: none; color: var(--rouge); -webkit-text-fill-color: var(--rouge); }
.fin .mesure { font-size: 16px; margin: 8px 0 12px; }
.boutons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.appel { max-width: 760px; margin: 16px auto 0; border-left: 4px solid var(--bleu); }
.appel h2 { font-size: 20px; }
.bouton { display: inline-block; background: var(--degrade); color: #fff; font-weight: 600; text-decoration: none; padding: 9px 16px; border-radius: 9px; }
.bouton.secondaire { background: #fff; color: var(--ardoise); border: 1px solid var(--bord); font-weight: 500; }

@media (max-width: 1100px) {
  .chaine, .chaine[data-colonnes] { grid-template-columns: repeat(3, 1fr); }
  .poste + .poste::before { display: none; }
}
@media (max-width: 860px) {
  .accueil, .partie { grid-template-columns: 1fr; }
  .chaine, .chaine[data-colonnes] { grid-template-columns: 1fr 1fr; }
  .indicateurs { grid-template-columns: repeat(2, 1fr); }
}