:root {
  --fond: #eef2f6;
  --carte: #ffffff;
  --texte: #14202b;
  --doux: #5b6b7a;
  --bord: #d9e1e8;
  --grille: #e8edf2;
  --accent: #0f6cb3;
  --entete: #0f3b5f;
  --entete-texte: #ffffff;
  --vert: #1f9d55;
  --rouge: #d33a2c;
  --orange: #e8822a;
  --jaune: #e2b100;
  --rayon: 12px;
  --ombre: 0 1px 2px rgba(16, 32, 48, .06), 0 2px 8px rgba(16, 32, 48, .05);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0c141c;
    --carte: #15202b;
    --texte: #e4ecf3;
    --doux: #93a4b4;
    --bord: #263543;
    --grille: #1f2b37;
    --accent: #5aa9e6;
    --entete: #0a2236;
    --ombre: none;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
h1 { font-size: 1.45rem; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1rem; margin: 0; }
h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--doux); margin: 18px 0 8px; font-weight: 600; }

#bandeau {
  position: sticky; top: 0; z-index: 30;
  background: var(--orange); color: #fff; text-align: center; font-size: .85rem; font-weight: 600;
  padding: 6px 12px calc(6px);
  padding-top: calc(6px + env(safe-area-inset-top));
}

/* ---------- En-tête et navigation ---------- */
.entete {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--entete); color: var(--entete-texte);
  padding: calc(10px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
}
.marque { display: flex; align-items: center; gap: 10px; color: inherit; }
.marque strong { display: block; letter-spacing: .14em; font-size: 1rem; }
.marque > div span { display: block; font-size: .75rem; opacity: .75; }

.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico.petit { width: 16px; height: 16px; }
.ico.logo { width: 30px; height: 30px; stroke-width: 1.6; color: #9fd0f5; }
.ico.logo-grand { width: 54px; height: 54px; stroke-width: 1.4; color: var(--accent); }

.nav { display: flex; gap: 4px; }
.onglet {
  display: flex; align-items: center; gap: 8px;
  color: var(--entete-texte); opacity: .75;
  padding: 8px 14px; border-radius: 8px; font-weight: 500;
}
.onglet:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
.onglet.actif { opacity: 1; background: rgba(255, 255, 255, .14); }

.contenu {
  max-width: 1200px; margin: 0 auto;
  padding: 20px max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left));
}

@media (max-width: 720px) {
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--carte); border-top: 1px solid var(--bord);
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  .onglet {
    flex-direction: column; gap: 2px; font-size: .72rem; color: var(--doux); opacity: 1;
    padding: 6px 10px; flex: 1; text-align: center;
  }
  .onglet:hover { background: none; }
  .onglet.actif { color: var(--accent); background: none; }
  .onglet .ico { width: 22px; height: 22px; }
  .contenu { padding-bottom: calc(90px + env(safe-area-inset-bottom)); padding-top: 16px; }
  h1 { font-size: 1.25rem; }
}

/* ---------- Mise en page ---------- */
.titre-page { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; }
.maj { color: var(--doux); font-size: .85rem; }

.carte {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 16px; min-width: 0;
}
.carte + .carte, .carte + .grille-machines { margin-top: 16px; }
.carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

.grille-machines { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.grille-detail { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); align-items: start; }
.grille-detail .carte + .carte { margin-top: 0; }
@media (max-width: 380px) { .grille-machines { grid-template-columns: 1fr; } }

.lien-detail { display: inline-flex; align-items: center; gap: 2px; font-size: .88rem; font-weight: 500; }

/* ---------- Tuiles ---------- */
.tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.tuiles.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tuile { background: var(--fond); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.etiquette { display: block; color: var(--doux); font-size: .78rem; }
.val { display: block; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sous { display: block; color: var(--doux); font-size: .78rem; }
@media (max-width: 420px) { .tuiles.trois .val { font-size: 1rem; } }

/* ---------- Maintenance (compte à rebours) ---------- */
.maintenance { border-radius: 10px; padding: 12px 14px; background: var(--fond); border-left: 4px solid var(--vert); }
.maintenance[data-etat="jaune"] { border-left-color: var(--jaune); }
.rebours { font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.2; margin: 2px 0 8px; }
.barre { height: 8px; border-radius: 4px; background: var(--grille); overflow: hidden; margin-bottom: 8px; }
.barre-pleine { height: 100%; background: var(--vert); border-radius: 4px; }
.maintenance[data-etat="jaune"] .barre-pleine { background: var(--jaune); }
.maintenance .btn { margin-top: 12px; }

/* ---------- Alarmes ---------- */
.table-defil { overflow-x: auto; margin: 0 -4px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .75rem; font-weight: 600; color: var(--doux); text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; border-bottom: 1px solid var(--bord); }
td { padding: 10px 8px; border-bottom: 1px solid var(--grille); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.al { display: flex; align-items: center; gap: 10px; }
.al strong { display: block; }
.al-detail { display: block; color: var(--doux); font-size: .82rem; }
td.date { color: var(--doux); font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pastille { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.pastille.rouge { background: var(--rouge); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rouge) 20%, transparent); }
.pastille.orange { background: var(--orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 20%, transparent); }
.pastille.jaune { background: var(--jaune); box-shadow: 0 0 0 4px color-mix(in srgb, var(--jaune) 22%, transparent); }
tr.niv-rouge td:first-child { box-shadow: inset 3px 0 0 var(--rouge); }
tr.niv-orange td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
tr.niv-jaune td:first-child { box-shadow: inset 3px 0 0 var(--jaune); }
.vide { color: var(--doux); margin: 0; }
.badge { font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.badge.rouge { background: color-mix(in srgb, var(--rouge) 14%, transparent); color: var(--rouge); }
.badge.neutre { background: var(--fond); color: var(--doux); }

/* ---------- Agitation ---------- */
.carres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.carre-ligne { display: flex; align-items: center; gap: 10px; background: var(--fond); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.carre { width: 22px; height: 22px; border-radius: 5px; flex: none; }
.carre.vert { background: var(--vert); }
.carre.rouge { background: var(--rouge); }
.carre-ligne strong { display: block; font-size: .92rem; }

/* ---------- Graphiques ---------- */
.graphe { width: 100%; height: 280px; }
.jauge { width: 100%; height: 190px; max-width: 320px; margin: 0 auto; }
.tt-date { font-weight: 600; margin-bottom: 4px; }
@media (max-width: 720px) { .graphe { height: 250px; } }

/* ---------- Maturation ---------- */
.liste-cuves { list-style: none; margin: 0; padding: 0; }
.liste-cuves li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--grille); }
.liste-cuves li:last-child { border-bottom: 0; }
.liste-cuves li > div { min-width: 0; }
.liste-cuves .sous { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.lots td { padding: 6px 6px; }
table.lots td:first-child { white-space: nowrap; font-weight: 500; }
table.lots input { width: 100%; min-width: 0; }

/* ---------- Segments et périodes ---------- */
.segments { display: flex; gap: 4px; background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 4px; margin-bottom: 14px; }
.segment { flex: 1; text-align: center; padding: 8px 10px; border-radius: 7px; color: var(--doux); font-weight: 500; }
.segment.actif { background: var(--accent); color: #fff; }
.periodes { display: inline-flex; background: var(--carte); border: 1px solid var(--bord); border-radius: 9px; padding: 3px; }
.periode { border: 0; background: none; color: var(--doux); font: inherit; font-size: .85rem; font-weight: 500; padding: 5px 11px; border-radius: 6px; cursor: pointer; }
.periode[aria-pressed="true"] { background: var(--fond); color: var(--texte); box-shadow: inset 0 0 0 1px var(--bord); }

/* ---------- Formulaires ---------- */
label { display: block; font-size: .85rem; font-weight: 500; margin: 14px 0 6px; }
label:first-child { margin-top: 0; }
input {
  font: inherit; font-size: 16px; color: var(--texte);
  background: var(--carte); border: 1px solid var(--bord); border-radius: 8px;
  padding: 9px 11px; width: 100%; min-width: 0;
}
input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--bord); background: var(--carte); color: var(--texte);
  padding: 9px 16px; border-radius: 8px;
}
.btn:hover { border-color: var(--doux); }
.btn.primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
.actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.msg { margin: 0; font-size: .88rem; color: var(--doux); flex: 1; }
.msg.ok { color: var(--vert); }
.msg.erreur, .erreur { color: var(--rouge); }

/* ---------- Connexion ---------- */
.page-connexion {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 18%, var(--fond)), var(--fond) 60%);
}
.connexion { width: 100%; max-width: 360px; background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; padding: 28px 24px; box-shadow: var(--ombre); }
.marque-connexion { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 24px; }
.marque-connexion strong { letter-spacing: .18em; font-size: 1.3rem; }
.marque-connexion span { color: var(--doux); font-size: .88rem; }
.connexion .erreur { min-height: 1.3em; margin: 10px 0 0; font-size: .88rem; }
.connexion .btn { width: 100%; margin-top: 12px; padding: 11px; }

/* ---------- Ajustements téléphone ---------- */
.al-meta { display: none; }
@media (max-width: 560px) {
  .alarmes .col-machine, .alarmes .date { display: none; }
  .al-meta { display: block; color: var(--doux); font-size: .78rem; margin-top: 2px; font-variant-numeric: tabular-nums; }
  .tuiles.compteurs { grid-template-columns: 1fr; gap: 6px; }
  .tuiles.compteurs .tuile { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 12px; }
  .tuiles.compteurs .etiquette { font-size: .88rem; color: var(--texte); }
  .tuiles.compteurs .sous { display: none; }
  .tuiles.compteurs .val { font-size: 1.05rem; }
  .carre-ligne { flex-direction: column; text-align: center; gap: 6px; padding: 10px 6px; }
}

/* ---------- Logo Lermea ---------- */
.logo-fond { display: inline-flex; align-items: center; background: #fff; border-radius: 7px; padding: 4px 8px; }
.logo-fond img { display: block; height: 26px; width: auto; }
.marque-sous { font-size: .8rem; opacity: .8; white-space: nowrap; }
.marque-connexion img { height: 52px; width: auto; margin-bottom: 4px; }
@media (max-width: 360px) { .marque-sous { display: none; } }