/* Section ZED de la page d'accueil (templates/_landing_zed.html). */
:root{
  /* Paliers ZED — texte coloré sur fond blanc, tous ≥ 4.5:1. */
  --zed-low:#166534;--zed-moderate:#854d0e;--zed-high:#9a3412;--zed-critical:#9f1239;
  --zed-ink:#0f1117;--zed-ink-2:#434960;--zed-ink-3:#5d6580;
  --zed-surface:#ffffff;--zed-surface-2:#f7f8fc;--zed-line:#e3e6f1;
}
.lvl-low{--lvl:var(--zed-low)}
.lvl-moderate{--lvl:var(--zed-moderate)}
.lvl-high{--lvl:var(--zed-high)}
.lvl-critical{--lvl:var(--zed-critical)}

.zed{text-align:left;max-width:760px;margin:40px auto 48px}
.zed-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── En-tête ─────────────────────────────────────────────────── */
.zed-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.zed-title{font-size:16px;font-weight:600;color:var(--zed-ink);margin-bottom:2px}
.zed .zed-lead{font-size:13px;line-height:1.5;color:var(--zed-ink-3);margin:0;max-width:none}

.zed-select{position:relative;display:inline-flex}
.zed-select::after{content:'';position:absolute;right:12px;top:50%;width:5px;height:5px;border-right:1.5px solid var(--zed-ink-2);border-bottom:1.5px solid var(--zed-ink-2);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.zed-select select{appearance:none;-webkit-appearance:none;height:32px;padding:0 30px 0 12px;border-radius:8px;border:1px solid var(--zed-line);background:var(--zed-surface);color:var(--zed-ink);font-family:var(--body);font-size:13px;cursor:pointer}
.zed-select select:hover{border-color:var(--zed-ink-3)}
.zed-select select:focus-visible,.zed-item:focus-visible,.zed-close:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.zed-select-sm select{height:32px}

/* ── Liste : la première zone en avant, les autres en lignes ─── */
.zed-list{display:flex;flex-direction:column;border:1px solid var(--zed-line);border-radius:12px;background:var(--zed-surface);overflow:hidden;transition:opacity .2s}
.zed-list.is-loading{opacity:.45;pointer-events:none}

.zed-item{
  display:grid;grid-template-columns:minmax(0,1fr) 120px 92px;align-items:center;gap:16px;
  width:100%;padding:11px 16px;border:0;border-top:1px solid var(--zed-line);
  background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;
  transition:background .15s;
}
.zed-item:first-child{border-top:0}
.zed-item:hover{background:var(--zed-surface-2)}
.zed-name{display:flex;align-items:baseline;gap:8px;min-width:0}
.zed-zone{font-size:14px;font-weight:500;color:var(--zed-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zed-parent{font-size:12px;color:var(--zed-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zed-meter{display:block;height:4px;border-radius:99px;background:#eceef6;overflow:hidden}
.zed-meter i{display:block;height:100%;width:0;border-radius:inherit;background:var(--lvl);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.zed-val{display:flex;align-items:baseline;justify-content:flex-end;gap:8px}
.zed-val b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--zed-ink)}

/* La première zone : un peu plus d'air, chiffre plus grand. */
.zed-item.is-main{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name val" "meter meter";gap:10px 16px;padding:18px 16px 16px}
.zed-item.is-main .zed-name{grid-area:name;flex-direction:column;gap:2px}
.zed-item.is-main .zed-zone{font-size:17px;font-weight:600}
.zed-item.is-main .zed-val{grid-area:val}
.zed-item.is-main .zed-val b{font-family:var(--display);font-weight:400;font-size:40px;line-height:1;letter-spacing:.02em}
.zed-item.is-main .zed-meter{grid-area:meter;height:6px}

@media(max-width:560px){
  .zed-item{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name val" "meter meter";gap:6px 12px}
  .zed-item .zed-name{grid-area:name}.zed-item .zed-val{grid-area:val}.zed-item .zed-meter{grid-area:meter}
  .zed-parent{display:none}.zed-item.is-main .zed-parent{display:block}
}

.zed-empty{padding:20px;text-align:center;font-size:13px;color:var(--zed-ink-2)}

/* Jauge de la fenêtre modale */
.zed-gauge{position:relative;display:block;margin:0 auto;width:100%;max-width:240px}
.zed-gauge svg{display:block;width:100%;height:auto;overflow:visible}
.zed-arc-bg,.zed-arc{fill:none;stroke-width:9;stroke-linecap:round}
.zed-arc-bg{stroke:#eceef6}
.zed-arc{stroke:var(--lvl);stroke-dasharray:0 1000;transition:stroke-dasharray 1.1s cubic-bezier(.2,.8,.2,1)}
.zed-score{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;justify-content:center;gap:4px}
.zed-score b{font-family:var(--display);font-weight:400;font-size:56px;line-height:.9;letter-spacing:.02em;color:var(--zed-ink)}
.zed-score small{font-family:var(--mono);font-size:10px;color:var(--zed-ink-3)}
.zed-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--zed-ink-2)}
.zed-m-hero .zed-level{display:inline-block;margin:0 0 10px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:color-mix(in srgb,var(--lvl) 9%,#fff);border:1px solid color-mix(in srgb,var(--lvl) 22%,#fff);border-radius:999px;padding:3px 10px}

/* ── Fenêtre modale ──────────────────────────────────────────── */
.zed-modal{
  width:min(860px,calc(100vw - 32px));max-height:calc(100dvh - 48px);margin:auto;
  padding:0;border:none;border-radius:20px;background:var(--zed-surface);color:var(--zed-ink);
  box-shadow:0 30px 90px rgba(15,17,23,.28);overflow:hidden;text-align:left;
}
.zed-modal[open]{display:flex;flex-direction:column;animation:zed-in .26s cubic-bezier(.2,.8,.2,1)}
.zed-modal::backdrop{background:rgba(15,17,23,.55);backdrop-filter:blur(3px);animation:zed-fade .2s ease}
@keyframes zed-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes zed-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.zed-modal[open],.zed-modal::backdrop{animation:none}.zed-arc,.zed-bar i,.zed-meter i{transition:none}}

.zed-m-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 24px 18px;border-bottom:1px solid var(--zed-line);background:var(--zed-surface-2)}
.zed-m-head .zed-eyebrow{margin-bottom:6px}
.zed-m-title{font-family:var(--display);font-weight:400;font-size:clamp(28px,4vw,40px);line-height:.95;letter-spacing:.03em;color:var(--zed-ink)}
.zed-m-sub{margin-top:6px;font-size:13px;color:var(--zed-ink-2)}
.zed-m-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.zed-close{width:34px;height:34px;border-radius:10px;border:1px solid var(--zed-line);background:var(--zed-surface);color:var(--zed-ink);display:grid;place-items:center;cursor:pointer}
.zed-close:hover{border-color:var(--red);color:var(--red)}
.zed-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@media(max-width:600px){
  .zed-m-head{flex-direction:column-reverse;padding:16px 16px 14px}
  .zed-m-actions{width:100%;justify-content:space-between}
}

.zed-m-body{overflow-y:auto;padding:22px 24px 26px;display:grid;gap:18px;overscroll-behavior:contain}
@media(max-width:600px){.zed-m-body{padding:16px}}

.zed-m-hero{display:grid;grid-template-columns:240px 1fr;gap:22px;align-items:center;padding:18px;border:1px solid var(--zed-line);border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--lvl) 6%,#fff),#fff 60%)}
@media(max-width:640px){.zed-m-hero{grid-template-columns:1fr;text-align:center}}
.zed-m-hero p{font-size:13px;line-height:1.6;color:var(--zed-ink-2)}
.zed-m-ticks{display:flex;justify-content:space-between;max-width:240px;margin:4px auto 0;font-family:var(--mono);font-size:9.5px;color:var(--zed-ink-3)}

/* KPI à la manière du tableau de bord Metabase (stat.zonpam.com). */
.zed-kpis{
  --mb-font:Lato,'Helvetica Neue',Arial,sans-serif;
  --mb-ink:rgba(7,23,34,.84);
  --mb-muted:rgba(7,23,34,.62); /* .44 chez Metabase : sous 4.5:1, foncé ici */
  --mb-line:#dcdfe0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;font-family:var(--mb-font);color:var(--mb-ink)
}
@media(max-width:640px){.zed-kpis{grid-template-columns:1fr}}
.zed-kpi{display:flex;flex-direction:column;min-height:132px;padding:14px 16px 16px;background:#fff;border:1px solid var(--mb-line);border-radius:6px}
.zed-kpi-title{font-size:14px;font-weight:700;line-height:1.3;color:var(--mb-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zed-kpi-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:8px}
.zed-kpi-value{font-size:35px;font-weight:700;line-height:1.1;color:var(--mb-ink);font-variant-numeric:tabular-nums}
.zed-kpi-period{font-size:14px;font-weight:700;color:var(--mb-ink);margin-top:2px}
.zed-kpi-cmp{font-size:14px;color:var(--mb-muted);margin-top:2px}
.zed-kpi-cmp strong{font-weight:900}
.zed-kpi-cmp .up{color:#b91c3c}.zed-kpi-cmp .down{color:#287346}
.zed-panels{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
@media(max-width:720px){.zed-panels{grid-template-columns:1fr}}
.zed-panel{border:1px solid var(--zed-line);border-radius:14px;padding:16px;background:var(--zed-surface);min-width:0}
.zed-panel h4{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--zed-ink-2);margin-bottom:12px;display:flex;justify-content:space-between;gap:8px}
.zed-panel h4 em{font-style:normal;color:var(--zed-ink-3)}
.zed-muted{font-size:13px;color:var(--zed-ink-3)}

.zed-bars{display:grid;gap:10px;list-style:none}
.zed-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;font-size:13px;color:var(--zed-ink)}
.zed-bar>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zed-bar b{font-family:var(--mono);font-size:12px;font-weight:600}
.zed-bar s{grid-column:1/-1;display:block;height:6px;border-radius:99px;background:#eef0f7;overflow:hidden;text-decoration:none}
.zed-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--c,var(--red));transition:width .8s cubic-bezier(.2,.8,.2,1)}

.zed-gangs{list-style:none;display:grid;gap:8px}
.zed-gangs li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;background:var(--zed-surface-2);font-size:13px}
.zed-gangs strong{font-weight:600;color:var(--zed-ink)}
.zed-gangs small{display:block;font-size:11.5px;color:var(--zed-ink-3)}
.zed-gangs em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--zed-ink-2);white-space:nowrap}

.zed-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 18px;margin:0}
.zed-facts div{min-width:0}
.zed-facts dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--zed-ink-3)}
.zed-facts dd{margin:3px 0 0;font-size:13px;color:var(--zed-ink);overflow-wrap:anywhere}

/* Squelette de chargement */
.zed-skel{border-radius:12px;background:linear-gradient(90deg,#eef0f7 0%,#f7f8fc 50%,#eef0f7 100%);background-size:200% 100%;animation:zed-shimmer 1.2s linear infinite}
@keyframes zed-shimmer{to{background-position:-200% 0}}
.zed-error{padding:24px;border-radius:14px;border:1px solid color-mix(in srgb,var(--zed-critical) 25%,#fff);background:color-mix(in srgb,var(--zed-critical) 5%,#fff);color:var(--zed-ink);font-size:13.5px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.zed-error button{font:inherit;font-family:var(--mono);font-size:12px;padding:8px 14px;border-radius:9px;border:1px solid var(--zed-line);background:var(--zed-surface);color:var(--zed-ink);cursor:pointer}
body.zed-lock{overflow:hidden}

/* ── Recherche de commune ────────────────────────────────────── */
.zed-tools{display:flex;align-items:center;gap:8px}
.zed-icon{width:32px;height:32px;border-radius:8px;border:1px solid var(--zed-line);background:var(--zed-surface);color:var(--zed-ink-2);display:grid;place-items:center;cursor:pointer;transition:border-color .15s,color .15s}
.zed-icon:hover{border-color:var(--zed-ink-3);color:var(--zed-ink)}
.zed-icon:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.zed-icon svg,.zed-search-bar>svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.zed-search{width:min(520px,calc(100vw - 32px));margin:12vh auto auto;max-height:70dvh}
.zed-search-bar{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 16px;border-bottom:1px solid var(--zed-line);color:var(--zed-ink-3)}
.zed-search-bar input{flex:1;min-width:0;height:36px;border:0;outline:0;background:transparent;font-family:var(--body);font-size:16px;color:var(--zed-ink)}
.zed-search-bar input::placeholder{color:var(--zed-ink-3)}
.zed-search-bar input::-webkit-search-cancel-button{display:none}
.zed-results{list-style:none;overflow-y:auto;padding:6px}
.zed-results:empty{display:none}
.zed-results button{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:8px;background:transparent;font:inherit;text-align:left;cursor:pointer;color:var(--zed-ink)}
.zed-results button:hover,.zed-results button:focus-visible{background:var(--zed-surface-2);outline:none}
.zed-results span{font-size:14px;font-weight:500}
.zed-results small{font-size:12px;color:var(--zed-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zed-search-hint{padding:14px 16px;font-size:13px;color:var(--zed-ink-3)}
.zed-modal p{margin:0;max-width:none;text-align:inherit}