:root {
  color-scheme: dark;
  --fond: #121311; --surface: #1a1b19; --surface-2: #22241f; --ligne: #2e302a; --ligne-forte: #3d4037;
  --texte: #f0efec; --texte-2: #c3c2b7; --muet: #8d8c83;
  --accent: #9cc25a; --accent-fonce: #6f8f37;
  --ok: #3fae6a; --avert: #e0a31a; --critique: #e66767; --info: #3987e5;
  --serie-1: #3987e5; --serie-2: #d95926;
  --rayon: 10px; --ombre: 0 8px 30px rgba(0,0,0,.35);
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --fond: #f3f3f0; --surface: #fcfcfb; --surface-2: #f0f0ec; --ligne: #e1e0da; --ligne-forte: #cfcec6;
    --texte: #0b0b0b; --texte-2: #52514e; --muet: #77766f;
    --accent: #5d7f22; --accent-fonce: #46621a;
    --ok: #1f8a4c; --avert: #b07800; --critique: #c93636; --info: #2a78d6;
    --serie-1: #2a78d6; --serie-2: #eb6834; --ombre: 0 8px 30px rgba(0,0,0,.12);
  }
}
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--texte); font: 14px/1.45 system-ui, "Segoe UI", Roboto, sans-serif; }
[hidden] { display: none !important; }
a { color: var(--accent); }
h1, h2, h3, h4 { margin: 0; font-weight: 650; }
.muet { color: var(--muet); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.p { width: 18px; height: 18px; flex: none; vertical-align: -4px; }
.p.petit { width: 15px; height: 15px; vertical-align: -3px; }
.erreur-texte { color: var(--critique); min-height: 1.4em; }

/* boutons */
.btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ligne-forte); background: var(--surface-2); color: var(--texte);
  border-radius: 8px; padding: 6px 11px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--accent); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.principal { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #fff; }
.btn.danger { color: var(--critique); }
.btn.danger:hover { border-color: var(--critique); }
.btn.icone { padding: 5px 7px; }
.btn.mini { padding: 3px 7px; font-size: 12px; }
.groupe-btn { display: inline-flex; gap: 4px; flex-wrap: wrap; }
input, select, textarea { font: inherit; color: var(--texte); background: var(--surface-2); border: 1px solid var(--ligne-forte); border-radius: 8px; padding: 6px 9px; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* connexion */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.connexion-carte { background: var(--surface); border: 1px solid var(--ligne); border-radius: 16px; padding: 36px 32px; text-align: center; width: min(380px, 100%); box-shadow: var(--ombre); }
.connexion-carte .logo { width: 56px; height: 56px; color: var(--accent); }
.connexion-carte h1 { margin-top: 8px; }
#bouton-google { display: flex; justify-content: center; margin: 22px 0 8px; min-height: 44px; }

/* barre du haut */
.barre { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--ligne); flex-wrap: wrap; }
.marque { display: flex; align-items: center; gap: 8px; }
.marque .p { color: var(--accent); width: 24px; height: 24px; }
.resume { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.puce { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--ligne); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; white-space: nowrap; }
.puce b { font-variant-numeric: tabular-nums; }
.puce.ok { border-color: color-mix(in srgb, var(--ok) 50%, var(--ligne)); }
.puce.avert { border-color: var(--avert); }
.puce.critique { border-color: var(--critique); background: color-mix(in srgb, var(--critique) 14%, var(--surface-2)); }
.compte { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.onglets { position: sticky; top: 49px; z-index: 19; display: flex; gap: 2px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--ligne); overflow-x: auto; scrollbar-width: thin; }
.onglets button { display: flex; align-items: center; gap: 7px; border: 0; background: none; color: var(--texte-2); font: inherit; padding: 10px 12px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.onglets button:hover { color: var(--texte); }
.onglets button.actif { color: var(--texte); border-bottom-color: var(--accent); }
.badge { background: var(--critique); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 6px; font-weight: 700; }
.bandeau { margin: 12px 16px 0; padding: 10px 14px; border-radius: var(--rayon); border: 1px solid var(--critique); background: color-mix(in srgb, var(--critique) 12%, var(--surface)); }
main { padding: 16px; max-width: 1600px; margin: 0 auto; }

/* blocs */
.grille { display: grid; gap: 12px; }
.g-tuiles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.g-cartes { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.bloc { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 14px; min-width: 0; }
.bloc > h3, .titre-bloc { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 10px; }
.titre-bloc { justify-content: space-between; flex-wrap: wrap; }
.section-titre { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; font-size: 16px; }
.section-titre:first-child { margin-top: 0; }
.section-titre .p { width: 22px; height: 22px; color: var(--accent); }
.section-titre .muet { font-weight: 400; font-size: 13px; }
.outils { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.outils .espace { flex: 1; }

/* tuiles chiffrées */
.tuile { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 12px 14px; }
.tuile .etiquette { display: flex; align-items: center; gap: 6px; color: var(--texte-2); font-size: 12.5px; }
.tuile .valeur { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.tuile .valeur small { font-size: 14px; font-weight: 500; color: var(--texte-2); }
.tuile .sous { font-size: 12px; color: var(--muet); }
.jauge { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; margin-top: 8px; display: flex; gap: 2px; }
.jauge i { display: block; height: 100%; background: var(--serie-1); border-radius: 3px; }
.jauge i.cache { background: color-mix(in srgb, var(--serie-1) 35%, transparent); }
.jauge i.avert { background: var(--avert); }
.jauge i.critique { background: var(--critique); }

/* état */
.etat { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; white-space: nowrap; }
.etat .p { width: 15px; height: 15px; }
.etat.ok { color: var(--ok); }
.etat.avert { color: var(--avert); }
.etat.critique { color: var(--critique); }
.etat.neutre { color: var(--muet); }
.etiq { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--ligne); color: var(--texte-2); white-space: nowrap; }
.etiq.avert { border-color: var(--avert); color: var(--avert); }
.etiq.critique { border-color: var(--critique); color: var(--critique); }
.etiq.ok { border-color: color-mix(in srgb, var(--ok) 60%, var(--ligne)); color: var(--ok); }

/* tableaux */
.table-boite { overflow-x: auto; border: 1px solid var(--ligne); border-radius: var(--rayon); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--ligne); vertical-align: middle; }
th { font-weight: 600; color: var(--texte-2); font-size: 12px; background: var(--surface); position: sticky; top: 0; white-space: nowrap; }
th[data-tri] { cursor: pointer; user-select: none; }
th[data-tri]:hover { color: var(--texte); }
th.trie::after { content: " ▾"; }
th.trie.asc::after { content: " ▴"; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:hover { background: var(--surface-2); }
tbody tr.cliquable { cursor: pointer; }
tr.dependance td:first-child { padding-left: 28px; }
tr.cat-ligne td { background: var(--surface-2); font-weight: 650; color: var(--texte); }
.nom-service b { display: block; }
.nom-service .muet { font-size: 12px; }
.cmd { font-family: var(--mono); font-size: 12px; max-width: 640px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texte-2); }
.barre-ram { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.barre-ram .jauge { width: 60px; margin: 0; }

/* cartes de catégorie */
.carte-cat { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 12px 14px; cursor: pointer; }
.carte-cat:hover { border-color: var(--accent); }
.carte-cat .tete { display: flex; align-items: center; gap: 8px; }
.carte-cat .tete .p { width: 22px; height: 22px; color: var(--accent); }
.carte-cat .chiffres { display: flex; gap: 14px; margin-top: 8px; font-size: 12.5px; color: var(--texte-2); }
.carte-cat .points { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.point { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.point.avert { background: var(--avert); }
.point.critique { background: var(--critique); }
.point.neutre { background: var(--muet); }

/* sites */
.sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.site { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid var(--ligne); border-radius: 8px; background: var(--surface-2); font-size: 12.5px; min-width: 0; }
.site .nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* graphiques */
.graph { position: relative; height: 150px; }
.graph canvas { width: 100%; height: 100%; display: block; }
.graph.petit { height: 110px; }
.legende { display: flex; gap: 12px; font-size: 12px; color: var(--texte-2); margin-bottom: 4px; }
.legende i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }
.spark { width: 70px; height: 20px; vertical-align: middle; }
.infobulle { position: fixed; z-index: 100; pointer-events: none; background: var(--surface); border: 1px solid var(--ligne-forte); border-radius: 8px; padding: 6px 9px; font-size: 12px; box-shadow: var(--ombre); white-space: nowrap; }

/* alertes */
.alerte { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--surface-2); margin-bottom: 6px; }
.alerte.critique { border-color: var(--critique); }
.alerte.avert { border-color: var(--avert); }
.alerte .p { margin-top: 2px; }
.alerte.critique .p { color: var(--critique); }
.alerte.avert .p { color: var(--avert); }
.vide { color: var(--muet); padding: 12px 0; display: flex; gap: 8px; align-items: center; }
.vide .p { color: var(--ok); }

/* tiroir */
.voile { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 40; }
.tiroir { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100%); background: var(--fond); border-left: 1px solid var(--ligne); z-index: 50; overflow-y: auto; box-shadow: var(--ombre); }
.tiroir-tete { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--ligne); z-index: 2; }
#tiroir-corps { padding: 16px; display: grid; gap: 12px; }
dl.infos { display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px; margin: 0; font-size: 13px; }
dl.infos dt { color: var(--muet); }
dl.infos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
pre.logs { background: #0b0c0a; color: #d6d5cc; border-radius: 8px; padding: 10px; font: 12px/1.45 var(--mono); max-height: 60vh; overflow: auto; white-space: pre-wrap; word-break: break-all; margin: 0; }
pre.logs .err { color: #ff8a80; }
pre.logs .ts { color: #7c7b72; }

/* relations */
.relations-boite { overflow: auto; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); }
.relations-boite svg text { font-size: 12px; fill: var(--texte); }
.relations-boite svg .colonne { font-size: 12px; fill: var(--muet); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.noeud rect { fill: var(--surface-2); stroke: var(--ligne-forte); rx: 7; }
.noeud.d rect { stroke: color-mix(in srgb, var(--serie-1) 60%, var(--ligne)); }
.noeud.base rect { stroke: color-mix(in srgb, var(--serie-2) 70%, var(--ligne)); }
.noeud.arrete rect { stroke: var(--critique); stroke-dasharray: 3 3; }
.noeud.orphelin rect { stroke: var(--avert); stroke-dasharray: 3 3; }
.noeud { cursor: pointer; }
.lien { fill: none; stroke: var(--ligne-forte); stroke-width: 1.5; }
.lien.depend { stroke: color-mix(in srgb, var(--serie-2) 70%, transparent); }
.lien.reseau { stroke: var(--muet); stroke-dasharray: 4 4; }
.lien.route_orpheline { stroke: var(--avert); stroke-dasharray: 3 3; }
.relations-boite.focus .lien, .relations-boite.focus .noeud { opacity: .15; }
.relations-boite.focus .lien.on { opacity: 1; stroke-width: 2.5; }
.relations-boite.focus .noeud.on { opacity: 1; }

/* formulaires */
.form { display: grid; gap: 12px; max-width: 640px; }
.form label { display: grid; gap: 4px; font-size: 13px; color: var(--texte-2); }
.form .ligne { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.form .case { display: flex; gap: 8px; align-items: center; color: var(--texte); }
.form input[type=number] { width: 100px; }

/* sous-onglets */
.sous-onglets { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.sous-onglets button { border: 1px solid var(--ligne); background: var(--surface); color: var(--texte-2); padding: 5px 11px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; }
.sous-onglets button.actif { background: var(--surface-2); color: var(--texte); border-color: var(--accent); }

dialog { background: var(--surface); color: var(--texte); border: 1px solid var(--ligne-forte); border-radius: 14px; padding: 20px; width: min(440px, 92vw); box-shadow: var(--ombre); }
dialog::backdrop { background: rgba(0,0,0,.5); }
dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.toasts { position: fixed; bottom: 16px; right: 16px; display: grid; gap: 8px; z-index: 200; }
.toast { background: var(--surface); border: 1px solid var(--ligne-forte); border-left: 4px solid var(--ok); border-radius: 8px; padding: 9px 13px; box-shadow: var(--ombre); max-width: 380px; }
.toast.erreur { border-left-color: var(--critique); }
.progression { height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.progression i { display: block; height: 100%; width: 40%; background: var(--accent); animation: glisse 1.2s infinite ease-in-out; }
@keyframes glisse { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

@media (max-width: 720px) {
  .barre { gap: 8px; }
  .onglets { top: auto; position: static; }
  .g-2 { grid-template-columns: 1fr; }
  main { padding: 12px; }
  .masque-mobile { display: none; }
}