/*
 | Portail Soclyra — feuille de style
 |
 | Deux règles qui viennent de la doctrine de l'offre, pas du goût :
 |  1. L'accent appartient à l'agence, pas à Soclyra. Il est injecté par le serveur
 |     depuis agence_marques, donc tout le reste doit rester neutre pour l'accueillir.
 |  2. La couleur signifie « regarde-moi ». Pas de vert « conforme » : un site sans
 |     rien à signaler est neutre. Un parc sans couleur est un parc qui va bien.
 |
 | Et une conséquence de « pas encore collecté n'est pas rien à signaler » :
 | les trois états se distinguent par la FORME autant que par la teinte —
 | plein = mesuré, tireté = pas encore collecté, hachuré = hors périmètre.
 */

:root{
  --n0:#ffffff; --n1:#f7f8fa; --n2:#eef0f4; --n3:#e2e5ec; --n4:#c9cedb;
  --n5:#8c94a8; --n6:#5d6579; --n7:#3a4154; --n8:#232936; --n9:#12151d;
  --ground:var(--n1); --surface:var(--n0); --surface-2:var(--n1);
  --line:var(--n3); --line-soft:var(--n2); --line-strong:var(--n4);
  --text:var(--n8); --text-2:var(--n6); --text-3:var(--n5);
  --attention:#a8620a; --attention-bg:#fdf3e3; --attention-line:#e8c68a;
  --critique:#a4262c; --critique-bg:#fbeceb; --critique-line:#e9b5b3;
  --calme:var(--n5);
  --accent:#3f4d8a; --accent-ink:#ffffff; --accent-soft:#eceffa;
  --hatch:rgba(140,148,168,.22);
  --focus:#2f6fd0;
  --r:7px; --r-sm:5px;
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0d1017; --surface:#141821; --surface-2:#1a1f2a;
    --line:#262c39; --line-soft:#1e2430; --line-strong:#38404f;
    --text:#e6e9f0; --text-2:#a2aabb; --text-3:#727c92;
    --attention:#e8b25e; --attention-bg:#2b2113; --attention-line:#5b4520;
    --critique:#f0918c; --critique-bg:#2d1718; --critique-line:#5e2b2c;
    --calme:#727c92;
    --accent:#8b9ae0; --accent-ink:#0d1017; --accent-soft:#1c2236;
    --hatch:rgba(114,124,146,.28);
    --focus:#6fa4ea;
  }
}
:root[data-theme="dark"]{
  --ground:#0d1017; --surface:#141821; --surface-2:#1a1f2a;
  --line:#262c39; --line-soft:#1e2430; --line-strong:#38404f;
  --text:#e6e9f0; --text-2:#a2aabb; --text-3:#727c92;
  --attention:#e8b25e; --attention-bg:#2b2113; --attention-line:#5b4520;
  --critique:#f0918c; --critique-bg:#2d1718; --critique-line:#5e2b2c;
  --calme:#727c92;
  --accent:#8b9ae0; --accent-ink:#0d1017; --accent-soft:#1c2236;
  --hatch:rgba(114,124,146,.28);
  --focus:#6fa4ea;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- coquille ---------- */
.shell{display:grid;grid-template-columns:224px 1fr;min-height:calc(100vh - 33px)}
@media(max-width:900px){.shell{grid-template-columns:1fr}}

.rail{
  background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;
}
@media(max-width:900px){.rail{border-right:0;border-bottom:1px solid var(--line)}}
.brand{display:flex;align-items:center;gap:10px;padding:16px 16px 14px}
.mark{
  width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-weight:600;font-size:13px;flex:none;
}
.brand .nm{font-weight:600;font-size:14px;letter-spacing:-.01em}
.brand .sub{font-size:11px;color:var(--text-3)}
.nav{display:flex;flex-direction:column;gap:1px;padding:6px 8px}
@media(max-width:900px){.nav{flex-direction:row;flex-wrap:wrap;padding:0 10px 10px}}
.nav a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 10px;border-radius:var(--r-sm);text-decoration:none;
  color:var(--text-2);font-size:13.5px;
}
.nav a:hover{background:var(--surface-2);color:var(--text)}
.nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:500}
.nav .ct{
  font-family:var(--mono);font-size:11px;color:var(--text-3);
  background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:0 6px;
}
.nav a[aria-current="page"] .ct{background:transparent;border-color:currentColor;color:inherit}
.railfoot{margin-top:auto;padding:12px 16px;border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--text-3)}

.main{min-width:0;padding:26px 30px 70px;max-width:1180px}
@media(max-width:700px){.main{padding:18px 16px 50px}}

/* ---------- entêtes ---------- */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:4px}
h1{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0;text-wrap:balance}
.sous{color:var(--text-2);font-size:13.5px;margin:3px 0 22px;max-width:66ch}
h2{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);margin:30px 0 10px}
h3{font-size:15px;font-weight:600;margin:0 0 8px;letter-spacing:-.01em}

/* ---------- bande décisions ---------- */
.decisions{
  border:1px solid var(--attention-line);background:var(--attention-bg);
  border-radius:var(--r);overflow:hidden;margin-bottom:24px;
}
.decisions.vide{border-color:var(--line);background:var(--surface)}
.dec-head{
  display:flex;align-items:center;gap:9px;padding:11px 15px;
  border-bottom:1px solid var(--attention-line);font-weight:500;font-size:13.5px;color:var(--attention);
}
.decisions.vide .dec-head{border-bottom:0;color:var(--text-2);font-weight:400}
.dec{display:flex;gap:14px;padding:12px 15px;border-bottom:1px solid var(--attention-line);align-items:baseline}
.dec:last-child{border-bottom:0}
.dec .quoi{flex:1;min-width:0}
.dec .quoi b{font-weight:500}
.dec .ou{font-family:var(--mono);font-size:12px;color:var(--text-2)}
.dec .delai{font-size:12px;color:var(--attention);white-space:nowrap;font-weight:500}

/* ---------- tableau parc ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:920px}
thead th{
  text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-3);padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
  background:var(--surface-2);position:sticky;top:0;
}
tbody td{padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--surface-2)}
td.stripe{position:relative;padding-left:15px}
tr[data-etat="critique"] td.stripe::before,
tr[data-etat="attention"] td.stripe::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
}
tr[data-etat="critique"] td.stripe::before{background:var(--critique)}
tr[data-etat="attention"] td.stripe::before{background:var(--attention)}
.site-nom{font-weight:500}
.site-cli{font-size:12px;color:var(--text-3)}
.num{font-family:var(--mono);font-size:12.5px}

/* ---------- pastilles d'état ---------- */
.pill{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  padding:2px 8px;border-radius:20px;border:1px solid var(--line-strong);
  color:var(--text-2);white-space:nowrap;
}
.pill.att{border-color:var(--attention-line);background:var(--attention-bg);color:var(--attention)}
.pill.cri{border-color:var(--critique-line);background:var(--critique-bg);color:var(--critique)}
.pill.accent{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.pill.ghost{border-style:dashed;color:var(--text-3)}

.dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--calme)}
.dot.att{background:var(--attention)}
.dot.cri{background:var(--critique)}
.dot.vide{background:none;border:1.5px dashed var(--text-3)}

/* les trois formes : mesuré / non collecté / hors périmètre */
.mes{font-family:var(--mono);font-size:12.5px}
.mes.att{color:var(--attention)}
.mes.cri{color:var(--critique)}
.noncoll{
  font-size:11.5px;color:var(--text-3);border:1px dashed var(--line-strong);
  border-radius:var(--r-sm);padding:1px 7px;display:inline-block;
}
.hors{
  font-size:11.5px;color:var(--text-3);border-radius:var(--r-sm);padding:1px 7px;display:inline-block;
  background-image:repeating-linear-gradient(135deg,transparent 0 4px,var(--hatch) 4px 5px);
  border:1px solid var(--line);
}

/* ---------- filtres ---------- */
.filtres{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.chip{
  border:1px solid var(--line-strong);background:var(--surface);border-radius:20px;
  padding:4px 11px;font-size:12.5px;color:var(--text-2);cursor:pointer;
}
.chip:hover{border-color:var(--text-3);color:var(--text)}
.chip[aria-pressed="true"]{background:var(--text);color:var(--ground);border-color:var(--text)}
.count{margin-left:auto;font-size:12.5px;color:var(--text-3)}

/* ---------- fiche ---------- */
.retour{
  background:none;border:0;padding:0;color:var(--text-3);font-size:12.5px;cursor:pointer;
  margin-bottom:12px;display:inline-flex;gap:6px;align-items:center;
}
.retour:hover{color:var(--text)}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:22px 0 20px;overflow-x:auto}
.tabs button{
  background:none;border:0;border-bottom:2px solid transparent;padding:8px 12px;
  color:var(--text-2);cursor:pointer;font-size:13.5px;white-space:nowrap;margin-bottom:-1px;
}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent);font-weight:500}

.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:14px 15px}
.card .lab{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.card .val{font-size:21px;font-weight:500;letter-spacing:-.02em;margin-top:5px;font-family:var(--mono)}
.card .note{font-size:12px;color:var(--text-3);margin-top:3px}

.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;font-size:13.5px;align-items:baseline}
.kv dt{color:var(--text-3);font-size:12.5px;white-space:nowrap}
.kv dd{margin:0}

.liste{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.ligne{display:flex;gap:14px;padding:11px 15px;border-bottom:1px solid var(--line-soft);align-items:baseline}
.ligne:last-child{border-bottom:0}
.ligne .p{flex:1;min-width:0}
.ligne .d{font-family:var(--mono);font-size:12px;color:var(--text-3);white-space:nowrap}
.ligne small{color:var(--text-3);font-size:12.5px}

/* ---------- sparkline dispo ---------- */
.spark{display:flex;gap:2px;align-items:flex-end;height:34px}
.spark i{flex:1;background:var(--line-strong);border-radius:1px;min-height:2px;display:block}
.spark i.bad{background:var(--critique)}
.spark i.warn{background:var(--attention)}

/* ---------- chronologie incident ---------- */
.chrono{position:relative;padding-left:22px;margin:0}
.chrono::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line)}
.evt{position:relative;padding:0 0 16px}
.evt::before{
  content:"";position:absolute;left:-21px;top:6px;width:9px;height:9px;border-radius:50%;
  background:var(--surface);border:2px solid var(--line-strong);
}
.evt.cri::before{border-color:var(--critique);background:var(--critique)}
.evt.acc::before{border-color:var(--accent);background:var(--accent)}
.evt .h{font-family:var(--mono);font-size:11.5px;color:var(--text-3)}
.evt .t{font-size:13.5px}
.evt .t b{font-weight:500}
.evt small{color:var(--text-3)}

.encadre{
  border:1px solid var(--line);border-left:3px solid var(--accent);
  background:var(--surface);border-radius:var(--r);padding:13px 15px;font-size:13.5px;
}
.encadre.att{border-left-color:var(--attention)}
.encadre .lab{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin-bottom:5px}

/* ---------- vue client final ---------- */
.client{background:var(--surface);min-height:100%}
.client-head{border-bottom:1px solid var(--line);padding:22px 30px;display:flex;align-items:center;gap:12px}
.client-main{padding:34px 30px 70px;max-width:760px}
@media(max-width:700px){.client-head,.client-main{padding-left:16px;padding-right:16px}}
.client h1{font-family:var(--serif);font-size:27px;font-weight:500;letter-spacing:-.01em}
.client .sous{font-family:var(--serif);font-size:15px;color:var(--text-2)}
.client-site{border:1px solid var(--line);border-radius:var(--r);padding:17px 19px;margin-bottom:12px}
.client-site .nom{font-family:var(--serif);font-size:18px;font-weight:500}
.client-mes{display:flex;gap:28px;flex-wrap:wrap;margin-top:13px}
.client-mes>div{min-width:110px}
.client-mes .lab{font-size:11px;color:var(--text-3);letter-spacing:.03em}
.client-mes .val{font-size:17px;font-family:var(--mono);margin-top:2px}

.vide-msg{color:var(--text-3);font-size:13.5px;padding:26px 15px;text-align:center}
.note-proto{
  margin-top:34px;border-top:1px dashed var(--line-strong);padding-top:14px;
  font-size:12.5px;color:var(--text-3);max-width:70ch;
}
.note-proto b{color:var(--text-2);font-weight:500}