/* NetGarde - styles. Mobile d'abord. Theme clair par defaut ; sombre avec <html data-theme="dark">.
   Marque orange NetGarde (#f97316). Le niveau d'une alerte n'est jamais indique par la couleur seule :
   chaque badge porte aussi une icone de forme differente et un mot. */

:root {
  --marque: #f97316;
  --marque-fonce: #c2410c;
  --marque-survol: #9a3412;
  --marque-douce: #fff1e6;
  --lien: #c2410c;

  --fond: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --texte: #0f172a;
  --texte-doux: #475569;
  --bordure: #e2e8f0;

  --grave: #b91c1c;       --grave-fond: #fee2e2;      --grave-bord: #fca5a5;
  --attention: #b45309;   --attention-fond: #fef3c7; --attention-bord: #fcd34d;
  --info: #1d4ed8;        --info-fond: #dbeafe;       --info-bord: #93c5fd;
  --ok: #15803d;          --ok-fond: #dcfce7;         --ok-bord: #86efac;
  --neutre: #334155;      --neutre-fond: #e2e8f0;

  --rayon: 14px;
  --rayon-petit: 10px;
  --ombre: 0 1px 3px rgba(15, 23, 42, .08), 0 4px 12px rgba(15, 23, 42, .05);
  --haut-entete: 60px;
  --haut-nav: 64px;
  --largeur-menu: 232px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --marque-douce: rgba(249, 115, 22, .14);
  --lien: #fdba74;

  --fond: #0b1220;
  --surface: #111a2e;
  --surface-2: #17223b;
  --texte: #e2e8f0;
  --texte-doux: #a3b1c6;
  --bordure: #25324d;

  --grave: #fecaca;       --grave-fond: rgba(220, 38, 38, .22);   --grave-bord: #b91c1c;
  --attention: #fde68a;   --attention-fond: rgba(217, 119, 6, .22); --attention-bord: #b45309;
  --info: #bfdbfe;        --info-fond: rgba(37, 99, 235, .24);    --info-bord: #1d4ed8;
  --ok: #bbf7d0;          --ok-fond: rgba(22, 163, 74, .22);      --ok-bord: #15803d;
  --neutre: #cbd5e1;      --neutre-fond: #1e293b;
  --ombre: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: var(--fond);
  color: var(--texte);
  min-height: 100vh;
  overflow-wrap: break-word;
}
body.connecte { padding-bottom: calc(var(--haut-nav) + env(safe-area-inset-bottom, 0px)); }

a { color: var(--lien); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { line-height: 1.25; }
p { margin: 0 0 12px; }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.doux { color: var(--texte-doux); }
.petit { font-size: .875rem; }
.code { font-family: ui-monospace, "SF Mono", Consolas, monospace; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }

:focus-visible { outline: 3px solid var(--marque); outline-offset: 2px; border-radius: 4px; }
#contenu:focus { outline: none; }
#titre-page:focus { outline: none; }

.lien-evitement {
  position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--marque-fonce); color: #fff;
  padding: 10px 14px; border-radius: 8px; text-decoration: none;
}
.lien-evitement:focus { top: 8px; }

/* ---------- entete ---------- */
.entete {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: var(--haut-entete); padding: 8px 12px 8px 16px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  background: var(--surface); border-bottom: 1px solid var(--bordure);
  position: sticky; top: 0; z-index: 20;
}
.marque { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; color: var(--texte); text-decoration: none; min-width: 0; }
.marque strong { color: var(--marque); }
.marque-reseau { color: var(--texte-doux); font-size: .78rem; font-weight: 500; margin-left: 2px; }
.bouclier { color: var(--marque); flex: none; }
.zone-compte { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nom-compte { display: none; color: var(--texte-doux); font-size: .9rem; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.puce-demo { text-transform: uppercase; letter-spacing: .04em; }

/* ---------- navigation : barre du bas (mobile) / menu a gauche (ordinateur) ---------- */
.nav[hidden] { display: none; }
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; background: var(--surface); border-top: 1px solid var(--bordure);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--haut-nav); padding: 6px 2px; font-size: .75rem; font-weight: 600;
  color: var(--texte-doux); text-decoration: none; border-top: 3px solid transparent;
}
.nav a[aria-current="page"] { color: var(--marque-fonce); border-top-color: var(--marque); background: var(--marque-douce); }
:root[data-theme="dark"] .nav a[aria-current="page"] { color: var(--lien); }
.nav-icone { position: relative; display: inline-flex; }
.nav-pastille {
  position: absolute; top: -6px; right: -12px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--grave-fond); color: var(--grave); border: 1px solid var(--grave-bord);
  font-size: .7rem; font-weight: 700; line-height: 16px; text-align: center;
}
.nav-pastille[hidden] { display: none; }

.contenu { max-width: 980px; margin: 0 auto; padding: 16px; }
.chargement { color: var(--texte-doux); text-align: center; margin-top: 48px; }

/* ---------- cartes, titres ---------- */
.carte {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 16px; margin-bottom: 16px;
}
.carte-succes { text-align: center; }
.carte-conseil { border-left: 5px solid var(--marque); background: var(--marque-douce); }
.carte-conseil .sous-titre { display: flex; align-items: center; gap: 8px; }
.carte-connexion { max-width: 420px; margin: 24px auto; padding: 24px 20px; }
.connexion-logo { color: var(--marque); display: flex; justify-content: center; margin-bottom: 8px; }
.carte-connexion h1 { text-align: center; }
.carte-connexion .aide { text-align: center; }
.titre-page { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.titre-page h1 { font-size: 1.5rem; margin: 0; }
.titre-page .aide { margin: 4px 0 0; }
.titre-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sous-titre { font-size: 1.1rem; margin: 0 0 12px; }
.sous-sous-titre { font-size: 1rem; margin: 16px 0 8px; }
.entete-section { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 20px 0 10px; flex-wrap: wrap; }
.entete-section .sous-titre { margin: 0; }
.aide { color: var(--texte-doux); margin: 0 0 12px; }
.lien-retour { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 8px -4px; padding: 6px 4px; text-decoration: none; font-weight: 600; min-height: 44px; }
.lien-retour:hover { text-decoration: underline; }
.ligne-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.icone { flex: none; vertical-align: middle; }

/* ---------- formulaires ---------- */
label { display: block; font-weight: 600; margin: 14px 0 6px; }
input, select, textarea {
  width: 100%; font: inherit; color: inherit; background: var(--surface);
  padding: 12px; border: 1px solid var(--bordure); border-radius: var(--rayon-petit); min-height: 48px;
}
input[type="radio"], input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; padding: 0; flex: none; accent-color: var(--marque-fonce); margin: 2px 0 0; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--marque); }
fieldset { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
legend { font-weight: 700; padding: 0; margin-bottom: 6px; }
.groupe-choix .choix, .groupe-cases .case {
  display: flex; align-items: flex-start; gap: 12px; margin: 8px 0; padding: 12px;
  border: 1px solid var(--bordure); border-radius: var(--rayon-petit); font-weight: 400; cursor: pointer; background: var(--surface);
}
.groupe-choix .choix:has(input:checked) { border-color: var(--marque); background: var(--marque-douce); }
.groupe-cases .case { padding: 10px 12px; margin: 6px 0; }
.choix-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choix-desactive { opacity: .55; cursor: not-allowed; }
.avance { margin-top: 16px; border: 1px dashed var(--bordure); border-radius: var(--rayon-petit); padding: 4px 12px 12px; }
.avance summary { cursor: pointer; font-weight: 600; padding: 10px 0; min-height: 44px; display: flex; align-items: center; }
.message-erreur { color: var(--grave); min-height: 1.5em; margin: 8px 0 0; font-weight: 600; }
.message-erreur:empty { min-height: 0; margin: 0; }

/* ---------- boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; border-radius: var(--rayon-petit); padding: 10px 16px; min-height: 48px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none; text-align: center; line-height: 1.2;
}
.bouton:disabled { opacity: .55; cursor: not-allowed; }
.bouton-principal { background: var(--marque-fonce); color: #fff; }
.bouton-principal:hover:not(:disabled) { background: var(--marque-survol); }
.bouton-large { width: 100%; margin-top: 16px; }
.bouton-secondaire { background: var(--surface); color: var(--texte); border-color: var(--bordure); box-shadow: inset 0 0 0 1px var(--bordure); }
.bouton-secondaire:hover:not(:disabled) { background: var(--surface-2); }
.bouton-danger { background: var(--grave-fond); color: var(--grave); border-color: var(--grave-bord); }
.bouton-danger:hover:not(:disabled) { filter: brightness(.96); }
.bouton-danger-doux { background: var(--surface); color: var(--grave); border-color: var(--grave-bord); }
.bouton-discret { background: transparent; color: var(--texte-doux); border-color: var(--bordure); }
.bouton-icone { min-width: 44px; min-height: 44px; padding: 8px; background: transparent; color: var(--texte-doux); }
.bouton-icone:hover { background: var(--surface-2); color: var(--texte); }
.lien-bouton { background: none; border: 0; padding: 4px 0; font: inherit; color: var(--lien); text-decoration: underline; cursor: pointer; font-weight: 600; min-height: 32px; }
.actions-ligne { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.actions-ligne .bouton { flex: 1 1 200px; }

/* ---------- badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; line-height: 1.4; border: 1px solid transparent; white-space: nowrap;
}
.badge-grave { background: var(--grave-fond); color: var(--grave); border-color: var(--grave-bord); }
.badge-attention { background: var(--attention-fond); color: var(--attention); border-color: var(--attention-bord); }
.badge-info { background: var(--info-fond); color: var(--info); border-color: var(--info-bord); }
.badge-ok { background: var(--ok-fond); color: var(--ok); border-color: var(--ok-bord); }
.badge-neutre, .badge-statut { background: var(--neutre-fond); color: var(--neutre); border-color: var(--bordure); }
.badge-statut { padding-left: 10px; }
.badge-statut-ouverte { border-style: solid; border-color: var(--texte-doux); }
.badge-mode-bloquer { background: var(--marque-douce); color: var(--lien); border-color: var(--marque); }

/* ---------- etats d'ecran ---------- */
.etat { text-align: center; padding: 32px 16px; color: var(--texte-doux); }
.etat h2 { color: var(--texte); font-size: 1.15rem; margin: 8px 0; }
.etat-icone { color: var(--marque); display: flex; justify-content: center; }
.etat-icone.etat-ok { color: var(--ok); margin-bottom: 8px; }
.etat-erreur .etat-icone { color: var(--attention); }
.etat .bouton { margin-top: 12px; }
.spinner {
  display: inline-block; width: 28px; height: 28px; border-radius: 50%; flex: none;
  border: 4px solid var(--bordure); border-top-color: var(--marque); animation: tourne 1s linear infinite;
}
.etat-chargement { display: flex; flex-direction: column; align-items: center; gap: 8px; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } * { scroll-behavior: auto !important; } }

.attente { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--rayon-petit); background: var(--marque-douce); border: 1px solid var(--bordure); margin-top: 12px; text-align: left; }
.attente p { margin: 2px 0 0; }
.carte.attente { margin-bottom: 16px; }

.boite { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--rayon-petit); border: 1px solid; margin: 12px 0; }
.boite-icone { flex: none; margin-top: 1px; }
.boite-texte { min-width: 0; }
.boite-grave { background: var(--grave-fond); color: var(--grave); border-color: var(--grave-bord); }
.boite-attention { background: var(--attention-fond); color: var(--attention); border-color: var(--attention-bord); }
.boite-info { background: var(--info-fond); color: var(--info); border-color: var(--info-bord); }
.boite-ok { background: var(--ok-fond); color: var(--ok); border-color: var(--ok-bord); }
.boite a, .boite .lien-bouton { color: inherit; }

/* ---------- toasts ---------- */
.toasts {
  position: fixed; left: 12px; right: 12px; z-index: 60; display: flex; flex-direction: column; gap: 8px;
  bottom: calc(var(--haut-nav) + 12px + env(safe-area-inset-bottom, 0px)); pointer-events: none; align-items: center;
}
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; max-width: 480px; width: 100%;
  padding: 12px 14px; border-radius: var(--rayon-petit); border: 1px solid; box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  background: var(--surface); transition: opacity .3s;
}
.toast-ok { border-color: var(--ok-bord); color: var(--ok); background: var(--ok-fond); }
.toast-grave { border-color: var(--grave-bord); color: var(--grave); background: var(--grave-fond); }
.toast-attention { border-color: var(--attention-bord); color: var(--attention); background: var(--attention-fond); }
.toast-info { border-color: var(--info-bord); color: var(--info); background: var(--info-fond); }
.toast-sortie { opacity: 0; }
body:not(.connecte) .toasts { bottom: 16px; }

/* ---------- dialogue de confirmation ---------- */
.dialogue { border: 0; padding: 0; border-radius: var(--rayon); background: var(--surface); color: var(--texte); max-width: min(440px, calc(100vw - 24px)); width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.dialogue::backdrop { background: rgba(15, 23, 42, .55); }
.dialogue-corps { padding: 20px; }
.dialogue-corps h2 { margin: 0 0 8px; font-size: 1.15rem; }
.dialogue-message p:last-child { margin-bottom: 0; }
.dialogue-boutons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.dialogue-boutons .bouton { flex: 1 1 140px; }

/* ---------- tableau de bord ---------- */
.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tuile {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px; text-align: center;
  border-radius: var(--rayon); border: 1px solid; text-decoration: none; min-height: 100px; justify-content: center;
}
.tuile-nombre { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.tuile-libelle { font-weight: 700; font-size: .9rem; }
.tuile-grave { background: var(--grave-fond); color: var(--grave); border-color: var(--grave-bord); }
.tuile-attention { background: var(--attention-fond); color: var(--attention); border-color: var(--attention-bord); }
.tuile-info { background: var(--info-fond); color: var(--info); border-color: var(--info-bord); }
.tuile-vide { opacity: .7; }
.grille-cartes { display: grid; gap: 10px; grid-template-columns: 1fr; }

.carte-routeur {
  display: flex; align-items: center; gap: 12px; padding: 14px; text-decoration: none; color: var(--texte);
  background: var(--surface); border: 1px solid var(--bordure); border-left-width: 8px; border-radius: var(--rayon); box-shadow: var(--ombre);
}
.carte-routeur:hover { background: var(--surface-2); }
.carte-routeur-corps { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.carte-routeur-nom { font-weight: 700; font-size: 1.05rem; }
.carte-routeur-etat { font-weight: 700; font-size: .9rem; }
.carte-routeur-meta { color: var(--texte-doux); font-size: .85rem; }
.feu { display: inline-flex; flex: none; }
.feu-ok { border-left-color: var(--ok); } .feu-ok .feu, .feu-ok .carte-routeur-etat { color: var(--ok); }
.feu-attention { border-left-color: #d97706; } .feu-attention .feu, .feu-attention .carte-routeur-etat { color: var(--attention); }
.feu-grave { border-left-color: #dc2626; } .feu-grave .feu, .feu-grave .carte-routeur-etat { color: var(--grave); }
.feu-neutre { border-left-color: #94a3b8; } .feu-neutre .feu, .feu-neutre .carte-routeur-etat { color: var(--neutre); }

/* ---------- lignes d'alertes ---------- */
.liste-alertes { display: flex; flex-direction: column; gap: 8px; }
.ligne-alerte {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; text-decoration: none; color: var(--texte);
  background: var(--surface); border: 1px solid var(--bordure); border-left-width: 6px; border-radius: var(--rayon);
}
a.ligne-alerte:hover { background: var(--surface-2); }
.ligne-alerte.niveau-grave { border-left-color: #dc2626; }
.ligne-alerte.niveau-attention { border-left-color: #d97706; }
.ligne-alerte.niveau-info { border-left-color: #2563eb; }
.ligne-alerte-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ligne-alerte-titre { font-weight: 700; }
.ligne-alerte-meta { color: var(--texte-doux); font-size: .85rem; }

.filtres { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; padding-top: 4px; padding-bottom: 14px; }
.filtre:first-child, .filtre:nth-child(4), .filtre-bouton { grid-column: 1 / -1; }
.filtre { min-width: 0; }
.filtre-bouton { display: flex; align-items: flex-end; }
.filtre-bouton .bouton { width: 100%; }

.pagination { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0; }
.pagination-info { color: var(--texte-doux); font-size: .9rem; text-align: center; }

/* ---------- fiche alerte ---------- */
.fiche-alerte-tete { padding: 14px 14px 4px; border-radius: var(--rayon); border: 1px solid var(--bordure); border-left-width: 8px; background: var(--surface); margin-bottom: 16px; }
.fiche-alerte-tete.niveau-grave { border-left-color: #dc2626; }
.fiche-alerte-tete.niveau-attention { border-left-color: #d97706; }
.fiche-alerte-tete.niveau-info { border-left-color: #2563eb; }
.fiche-alerte-tete .titre-page { margin: 10px 0; }
.fiche-alerte-tete h1 { font-size: 1.35rem; }
.meta-alerte { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0 0 10px; font-size: .9rem; }
.meta-alerte div { display: flex; gap: 8px; }
.meta-alerte dt { color: var(--texte-doux); min-width: 110px; }
.meta-alerte dd { margin: 0; font-weight: 600; }
.texte-long { font-size: 1.02rem; }
.preuves { margin: 0; display: grid; gap: 8px; }
.preuve { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--surface-2); border-radius: var(--rayon-petit); }
.preuve dt { font-size: .8rem; color: var(--texte-doux); font-weight: 600; }
.preuve dd { margin: 0; font-weight: 600; min-width: 0; }
.preuve .preuves { margin-top: 4px; }
.valeur-texte { word-break: break-word; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; background: var(--surface); border: 1px solid var(--bordure); border-radius: 999px; font-size: .9rem; font-weight: 600; font-family: ui-monospace, Consolas, monospace; }
.puce-doux { font-family: inherit; color: var(--texte-doux); }
.puces-editables { margin: 8px 0; }
.puces-editables .puce { font-family: inherit; padding-right: 4px; }
.puce-retirer { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; background: transparent; color: var(--texte-doux); border-radius: 50%; cursor: pointer; }
.puce-retirer:hover { background: var(--grave-fond); color: var(--grave); }
.ligne-ajout { display: flex; gap: 8px; }
.ligne-ajout input { flex: 1; min-width: 0; }
.ligne-ajout .bouton { flex: none; }
.historique { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.historique li { padding: 10px 12px; background: var(--surface-2); border-radius: var(--rayon-petit); }
.historique-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---------- tables ---------- */
.table-defilante { overflow-x: auto; margin: 4px 0; border-radius: var(--rayon-petit); }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { text-align: left; font-size: .8rem; color: var(--texte-doux); padding: 8px 10px; border-bottom: 2px solid var(--bordure); white-space: nowrap; }
.table td { padding: 10px; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.table-preuves td, .table-preuves th { padding: 6px 8px; white-space: nowrap; }

/* ---------- mesures, jauges ---------- */
.mesures { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.mesure { padding: 10px 12px; background: var(--surface-2); border-radius: var(--rayon-petit); display: flex; flex-direction: column; gap: 2px; }
.mesure:last-child:nth-child(odd) { grid-column: 1 / -1; }
.mesure-nom { font-size: .8rem; color: var(--texte-doux); font-weight: 600; }
.mesure strong { font-size: 1.1rem; }
.mesure-alerte { background: var(--attention-fond); color: var(--attention); }
.mesure-alerte .mesure-nom { color: inherit; }
.jauges { display: grid; gap: 12px; }
.jauge-tete { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: 4px; }
.jauge-barre { height: 12px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--bordure); overflow: hidden; }
.jauge-barre span { display: block; height: 100%; background: var(--ok); border-radius: 6px; }
.jauge-attention .jauge-barre span { background: #d97706; }
.jauge-grave .jauge-barre span { background: #dc2626; }
.jauge-detail { font-size: .8rem; color: var(--texte-doux); margin-top: 2px; }

/* ---------- commande WinBox ---------- */
.etapes { padding-left: 22px; margin: 0 0 16px; }
.etapes li { margin: 8px 0; padding-left: 4px; }
.commande { margin: 12px 0; }
.commande-texte {
  display: block; padding: 12px; background: #0f172a; color: #e2e8f0; border-radius: var(--rayon-petit);
  font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .85rem; line-height: 1.5;
  word-break: break-all; white-space: pre-wrap; user-select: all;
}
.bouton-copier { width: 100%; margin-top: 10px; min-height: 56px; font-size: 1.1rem; }
.flux { margin-top: 16px; padding: 16px; border: 2px solid var(--marque); border-radius: var(--rayon); background: var(--surface); }
.flux-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.flux-tete h3 { margin: 0; font-size: 1.05rem; }
.surbrillance { animation: clignote 2s ease 1; }
@keyframes clignote { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 4px var(--marque); } }

.editeur-liste { margin-top: 18px; }
.editeur-liste > label { margin-top: 0; }
.seuil { margin-bottom: 16px; }
.seuil-champ { display: flex; align-items: center; gap: 10px; }
.seuil-champ input { max-width: 180px; }
.liste-erreurs { margin: 0; padding-left: 20px; color: var(--grave); }

/* ---------- admin ---------- */
.onglets { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 16px; padding: 0 16px 4px; border-bottom: 1px solid var(--bordure); }
.onglets a { flex: none; padding: 10px 14px; text-decoration: none; font-weight: 600; color: var(--texte-doux); border-bottom: 3px solid transparent; min-height: 44px; display: inline-flex; align-items: center; }
.onglets a[aria-current="page"] { color: var(--lien); border-bottom-color: var(--marque); }

/* ---------- journal ---------- */
.liste-actions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ligne-action { padding: 12px 14px; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); }
.ligne-action-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ligne-action-meta { color: var(--texte-doux); font-size: .88rem; margin-top: 4px; }

/* ---------- tableaux transformes en cartes sur petit ecran ---------- */
@media (max-width: 639px) {
  .table:not(.table-preuves) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table:not(.table-preuves), .table:not(.table-preuves) tbody, .table:not(.table-preuves) tr, .table:not(.table-preuves) td { display: block; width: 100%; }
  .table:not(.table-preuves) tr { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); margin-bottom: 10px; padding: 6px 4px; }
  .table:not(.table-preuves) td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 6px 10px; text-align: right; }
  .table:not(.table-preuves) td::before { content: attr(data-label); color: var(--texte-doux); font-weight: 600; font-size: .82rem; text-align: left; flex: none; }
  .table:not(.table-preuves) td:not([data-label]) { justify-content: flex-end; }
}

@media (max-width: 400px) {
  .marque-reseau { display: none; }
  .entete { padding-left: 12px; padding-right: 6px; }
  .contenu { padding: 12px; }
}

/* ---------- tablette / ordinateur ---------- */
@media (min-width: 640px) {
  .grille-cartes { grid-template-columns: 1fr 1fr; }
  .filtres { grid-template-columns: repeat(4, 1fr) auto; }
  .filtre:first-child, .filtre:nth-child(4), .filtre-bouton { grid-column: auto; }
  .mesures { grid-template-columns: repeat(3, 1fr); }
  .jauges { grid-template-columns: repeat(3, 1fr); }
  .nom-compte { display: inline; }
  .meta-alerte { grid-template-columns: 1fr 1fr; }
  .preuves { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .preuve:has(.table-defilante), .preuve:has(.preuves) { grid-column: 1 / -1; }
  .bouton-copier { width: auto; min-width: 280px; }
}

@media (min-width: 900px) {
  body.connecte { padding-bottom: 0; padding-left: var(--largeur-menu); }
  .nav {
    top: var(--haut-entete); right: auto; bottom: 0; width: var(--largeur-menu);
    flex-direction: column; justify-content: flex-start; gap: 4px; padding: 16px 12px;
    border-top: 0; border-right: 1px solid var(--bordure);
  }
  .nav a { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 48px; padding: 8px 14px; font-size: 1rem; border-top: 0; border-left: 4px solid transparent; border-radius: var(--rayon-petit); }
  .nav a[aria-current="page"] { border-top-color: transparent; border-left-color: var(--marque); }
  .nav-pastille { position: static; margin-left: 6px; }
  .nav-icone { gap: 0; }
  .toasts { bottom: 20px; left: calc(var(--largeur-menu) + 12px); }
  body:not(.connecte) .toasts { left: 12px; }
  .contenu { padding: 28px 32px; }
  .carte { padding: 22px; }
  .grille-cartes { grid-template-columns: repeat(3, 1fr); }
  .onglets { margin: 0 0 16px; padding: 0 0 4px; }
}

/* ---------- blocage automatique : apercu, avertissements, etat de depart ---------- */
.dialogue-large { max-width: min(660px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: auto; }
.apercu-liste { list-style: none; margin: 8px 0; padding: 0; border: 1px solid var(--bordure); border-radius: var(--rayon-petit); }
.apercu-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 12px; }
.apercu-ligne + .apercu-ligne { border-top: 1px solid var(--bordure); }
.apercu-ligne-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.apercu-ligne-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bouton-petit { min-height: 36px; padding: 6px 10px; font-size: .9rem; }
.case-confirme { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 12px; border: 1px solid var(--bordure); border-radius: var(--rayon-petit); background: var(--surface-2); font-weight: 600; cursor: pointer; }
.message-ok { color: var(--ok); font-weight: 600; margin: 6px 0; }
.carte-routeur-avert { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: var(--attention-fond); color: var(--attention); border: 1px solid var(--attention-bord); font-size: .85rem; font-weight: 600; line-height: 1.35; }
.carte-routeur-avert .icone { flex: none; margin-top: 2px; }
.liste-simple { margin: 8px 0; padding-left: 20px; }
.liste-simple li { margin: 4px 0; }
@media (min-width: 640px) { .apercu-liste { max-height: 38vh; overflow: auto; } }