/* Tableau de bord Cloud et espace client (25/10) — chargé seulement sur /dashboard et /account. */
.dash{--ok:#2f9e44;--warn:#d97706;--bad:#c92a2a;--in:#2f9e44;--out:#e8590c;--sun:#e0a800;padding-bottom:10px}
.dash .card{box-shadow:var(--shadow);margin-bottom:16px}
.dash .card h2{font-size:20px;margin-bottom:4px}
.dash .sub{color:var(--muted);font-size:14.5px;margin:0 0 16px}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--soft);color:var(--ink)}
.btn-text{text-decoration:none}
.btn-text.danger{color:var(--bad)}
.note.ok{background:color-mix(in srgb,var(--ok) 13%,transparent)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}

/* en-tête de page */
.dash-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding-top:30px;margin-bottom:16px}
.dash-top h1{font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 4px}
.dash-top .lead{font-size:16.5px}
.dash-top-act{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tag-cloud{font-size:12px;padding:4px 10px}
.dash-devs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.dash-devs a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);text-decoration:none;color:var(--muted);font-weight:650}
.dash-devs a i{width:8px;height:8px;border-radius:50%;background:#9aa6b8}.dash-devs a i.on{background:var(--ok)}
.dash-devs a[aria-current]{color:var(--bg);background:var(--ink);border-color:var(--ink)}

/* barre des sections, collante sous l'en-tête du site */
.dash-bar{position:sticky;top:66px;z-index:20;display:flex;gap:8px;align-items:center;margin-bottom:14px}
.dash-bar::before{content:"";position:absolute;inset:-6px 10px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:14px;z-index:-1}
.dash-nav{flex:1;min-width:0}
.dash-nav div{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
.dash-nav div::-webkit-scrollbar{display:none}
.dash-nav a{flex:none;font-size:13.5px;font-weight:650;padding:7px 13px;border-radius:999px;color:var(--muted);background:var(--card);border:1px solid var(--line);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.dash-nav a:hover,.dash-nav a.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.present-btn{flex:none;display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13.5px;font-weight:700;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.present-btn svg{width:17px;height:17px}
.present-btn:hover{border-color:var(--ink)}
.dash .card[id]{scroll-margin-top:130px}
@media (max-width:640px){.present-btn span{display:none}.dash-bar{top:60px}}

/* bandeau principal */
.hero.card{background:linear-gradient(135deg,#0f1b2d 0%,#16304a 60%,#1b3c56 100%);color:#e8eef6;border:none;position:relative;overflow:hidden;padding:26px}
.hero::after{content:"";position:absolute;right:-140px;top:-140px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 40%,transparent),transparent 70%);pointer-events:none;opacity:.6}
.hero-grid{display:grid;grid-template-columns:190px minmax(0,1.15fr) minmax(0,.95fr);gap:28px;align-items:center;position:relative;z-index:1}
.gauge{width:100%;max-width:190px;height:auto;display:block}
.gauge .g-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:12}
.gauge .g-fg{fill:none;stroke:var(--accent);stroke-width:12;stroke-linecap:round;transition:stroke-dasharray .6s}
.gauge .g-v{fill:#fff;font-size:34px;font-weight:800;text-anchor:middle;font-variant-numeric:tabular-nums}
.gauge .g-pc{fill:#9fb3c8;font-size:15px;font-weight:600}
.gauge .g-s{fill:#c9d6e3;font-size:11.5px;text-anchor:middle;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.hero .hero-name{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#9fb3c8;margin:0 0 8px;font-weight:700;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.live{display:inline-flex;align-items:center;gap:6px;color:#5ed39a;letter-spacing:.06em}
.live i{width:8px;height:8px;border-radius:50%;background:currentColor;animation:dwpulse 2s infinite}
.live.off{background:#b3261e;color:#fff;padding:3px 10px;border-radius:999px}.live.off i{animation:none}
@keyframes dwpulse{0%{box-shadow:0 0 0 0 rgba(94,211,154,.6)}70%{box-shadow:0 0 0 8px rgba(94,211,154,0)}100%{box-shadow:0 0 0 0 rgba(94,211,154,0)}}
.hero .big{font-size:44px;font-weight:800;line-height:1;color:#fff;font-variant-numeric:tabular-nums;margin:0;letter-spacing:-.02em}
.hero .big small{font-size:17px;font-weight:600;color:#9fb3c8;margin-left:5px}
.hero .big-sub{color:#c9d6e3;font-size:14.5px;margin:6px 0 16px}
.flow{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 14px}
.flow>div>span{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:#9fb3c8;font-weight:700}
.flow>div>b{font-size:24px;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.flow-ico{position:relative;flex:none;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(143,163,173,.12);border:1px solid rgba(143,163,173,.3)}
.flow-ico svg{width:34px;height:21px;overflow:visible}
.flow-ico .bb{fill:none;stroke:#cfdbe3;stroke-width:1.8}.flow-ico .bt{fill:#cfdbe3}.flow-ico .bf{fill:#8fa3ad;opacity:.55}
.flow-ico .bg{fill:#fff;stroke:#0d1821;stroke-width:.9;stroke-linejoin:round}.flow-ico .bs{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.flow.in .flow-ico{background:rgba(94,211,154,.14);border-color:rgba(94,211,154,.45)}.flow.in .flow-ico .bf{fill:#5ed39a;opacity:.85}
.flow.out .flow-ico{background:rgba(255,138,80,.14);border-color:rgba(255,138,80,.45)}.flow.out .flow-ico .bf{fill:#ff8a50;opacity:.85}
.flow.in .flow-ico::after,.flow.out .flow-ico::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid;animation:dwring 2.2s ease-out infinite}
.flow.in .flow-ico::after{border-color:rgba(94,211,154,.55)}.flow.out .flow-ico::after{border-color:rgba(255,138,80,.55)}
@keyframes dwring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.flow-mini{margin-left:auto;display:flex;gap:18px;text-align:right}
.flow-mini span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#9fb3c8;white-space:nowrap}
.flow-mini b{font-size:16px;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.hero .eta{margin:12px 0 0;font-size:14.5px;color:#c9d6e3;line-height:1.5}
.hero .eta b{color:#fff}
.hero .eta span{display:block;color:#9fb3c8;font-size:13px}
.hero-sys{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hero-sys div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:10px 12px;min-width:0}
.hero-sys span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#9fb3c8;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-sys b{font-size:17px;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.hero-sys small{font-size:12px;color:#9fb3c8;font-weight:600}
.hero-sys em{font-style:normal;color:#5ed39a}.hero-sys u{text-decoration:none;color:#ff9d6e}
.hero-sys .sun{color:#ffd43b}
.hero .alert{position:relative;z-index:1;margin-top:16px;background:rgba(255,138,128,.12);border:1px solid rgba(255,138,128,.35);color:#ffd6d1;border-radius:10px;padding:10px 14px;font-size:14px}
.offline{position:relative;z-index:1;display:flex;gap:14px;align-items:flex-start;margin:0 0 18px;background:#b3261e;color:#fff;border-radius:12px;padding:14px 18px}
.offline svg{flex:none;width:32px;height:32px}
.offline h3{margin:0 0 4px;font-size:17px;color:#fff}
.offline p{margin:0;font-size:14px;color:#ffe3df}
.hero.is-off .hero-grid{opacity:.55;filter:grayscale(.6)}
/* schéma des flux (onduleurs) */
.flows{width:100%;max-width:440px;height:auto;display:block;margin:0 auto}
.flows .fl{fill:none;stroke:rgba(255,255,255,.14);stroke-width:3;stroke-linecap:round}
.flows .fl.on{stroke:#ffd43b;stroke-dasharray:7 9;animation:fl 1.1s linear infinite}
.flows .fl.on.rev{animation-direction:reverse}
@keyframes fl{to{stroke-dashoffset:-16}}
.flows .nd circle{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.22);stroke-width:1.5}
.flows .ic{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.flows .ic .fill{fill:#5ed39a;stroke:none}
.flows .n-sun circle{stroke:#ffd43b}.flows .n-sun .ic{stroke:#ffd43b}
.flows .nl{fill:#9fb3c8;font-size:11px;text-anchor:middle;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.flows .nv{fill:#fff;font-size:14px;text-anchor:middle;font-weight:800}
.flows .hub rect{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.3)}
.flows .hub .wv{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
@media (prefers-reduced-motion:reduce){.flows .fl.on,.flow-ico::after,.live i{animation:none!important}}
@media (max-width:980px){.hero-grid{grid-template-columns:160px minmax(0,1fr)}.hero-sys{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.hero.card{padding:18px}.hero-grid{grid-template-columns:minmax(0,1fr);gap:18px}.gauge{max-width:150px;margin:0 auto}.hero-sys{grid-template-columns:1fr 1fr}.hero .big{font-size:36px}.flow{flex-wrap:wrap}.flow-mini{margin-left:0;flex-basis:100%;text-align:left}}
.dash-upd{font-size:12.5px;color:var(--muted);text-align:right;margin:-6px 0 14px}

/* tuiles avec tendance */
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px 10px;min-width:0}
.kpi>span{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi>b{display:block;font-size:21px;font-variant-numeric:tabular-nums;line-height:1.3;white-space:nowrap}
.kpi small{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.spark{width:100%;height:36px;display:block;margin-top:4px}
.spark-none{display:block;height:36px}
.upb{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;height:22px;margin-top:10px}
.upb i{border-radius:2px;background:color-mix(in srgb,var(--ink) 10%,transparent)}.upb i.on{background:color-mix(in srgb,var(--ok) 70%,transparent)}
@media (max-width:1060px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi>b{font-size:18px}}

/* bilan de santé */
.health{border-left:5px solid var(--hc)}
.h-ok{--hc:var(--ok)}.h-warn{--hc:var(--warn)}.h-bad{--hc:var(--bad)}
.h-head{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.h-ico{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--hc);box-shadow:0 0 0 6px color-mix(in srgb,var(--hc) 14%,transparent)}
.h-ico svg{width:28px;height:28px}
.kicker{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)!important;font-weight:800}
.health h2{color:var(--hc);font-size:22px!important;margin:1px 0 2px!important}
.health .h-head p:last-child{margin:0}
.checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px}
.checks li{display:flex;gap:10px;align-items:flex-start;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.checks li i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;margin-top:1px}
.checks li i svg{width:13px;height:13px}
.checks li.ok i{background:var(--ok)}.checks li.warn i{background:var(--warn)}.checks li.bad i{background:var(--bad)}
.checks li.warn{background:color-mix(in srgb,var(--warn) 8%,var(--card));border-color:color-mix(in srgb,var(--warn) 30%,var(--line))}
.checks li.bad{background:color-mix(in srgb,var(--bad) 8%,var(--card));border-color:color-mix(in srgb,var(--bad) 30%,var(--line))}
.checks li span{font-size:13.5px;color:var(--muted);line-height:1.45;overflow-wrap:anywhere}
.checks li b{display:block;font-size:14.5px;color:var(--ink)}

/* journée */
.story{font-size:17px;line-height:1.6;margin:0 0 14px;color:var(--ink)!important}
.story b{font-variant-numeric:tabular-nums}
.rib{width:100%;height:150px;display:block;background:var(--soft);border:1px solid var(--line);border-radius:12px}
.rib .r-in{fill:var(--in);opacity:.55}.rib .r-out{fill:var(--out);opacity:.5}.rib .r-idle{fill:#8fa3ad;opacity:.35}
.rib .r-soc{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.rib .r-pv{fill:var(--sun);opacity:.22}.rib .r-load{fill:none;stroke:#3b5bdb;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.8}
.rib .r-tick{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.rib .r-now{fill:var(--accent);stroke:#fff;stroke-width:2}
.rib-ax{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:5px;font-variant-numeric:tabular-nums}
.rib-ax span:last-child{color:var(--accent);font-weight:800}
.leg{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:8px}
.leg i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.leg i.in{background:var(--in);opacity:.7}.leg i.out{background:var(--out);opacity:.7}.leg i.idle{background:#8fa3ad;opacity:.5}
.leg i.soc{background:var(--ink);height:3px;vertical-align:3px}.leg i.pv{background:var(--sun);opacity:.5}.leg i.ld{background:#3b5bdb;height:3px;vertical-align:3px}
.tiles3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.tile{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
.tile span{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.tile b{display:block;font-size:22px;font-variant-numeric:tabular-nums;line-height:1.35}
.tile b.sm{font-size:16px}
.tile i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);line-height:1.4}
@media (max-width:760px){.tiles3{grid-template-columns:minmax(0,1fr)}}

/* flux d'énergie (onduleurs) */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.split2 h3{font-size:15px;margin-bottom:10px}
.sbar{display:flex;height:18px;border-radius:9px;overflow:hidden;background:var(--soft)}
.sbar i{display:block;height:100%}
.s-dir{background:var(--sun)}.s-bat{background:var(--in)}.s-exp{background:#0e9f8e}.s-grid{background:#64748b}
.sleg{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:6px;font-size:14px;color:var(--muted)}
.sleg i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:8px;vertical-align:-1px}
.sleg b{color:var(--ink);margin-left:4px}.sleg span{float:right;font-variant-numeric:tabular-nums}
@media (max-width:760px){.split2{grid-template-columns:minmax(0,1fr)}}

/* écarts, packs, cellules */
.gaps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 18px}
.gaps div{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.gaps span{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.gaps b{font-size:19px;font-variant-numeric:tabular-nums}
.gaps i{display:block;font-style:normal;font-size:12px;color:var(--muted)}
.c-lo{color:#2a78d6}.c-hi{color:var(--out)}
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.pack{border:1px solid var(--line);border-radius:14px;padding:16px;position:relative;overflow:hidden;background:var(--card)}
.pack::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--pc)}
.pack-head{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.pack-head .tall{width:34px;height:64px;flex:none;color:var(--ink)}
.pack-t{flex:1;min-width:0}
.pack-t h3{margin:0;font-size:17px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pack-t p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.pack-soc{font-size:30px;font-weight:800;line-height:1;text-align:right;font-variant-numeric:tabular-nums}
.pack-soc small{font-size:15px;color:var(--muted);margin-left:2px}
.pack-soc span{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:4px}
.pill{display:inline-block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:20px;background:var(--soft);color:var(--muted);font-weight:800}
.pill.in{background:color-mix(in srgb,var(--in) 15%,transparent);color:var(--in)}.pill.out{background:color-mix(in srgb,var(--out) 15%,transparent);color:var(--out)}
.pill.bad{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad)}.pill.bal{background:color-mix(in srgb,#2a78d6 14%,transparent);color:#2a78d6}
.pack-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 10px;margin-bottom:12px}
.pack-stats span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.pack-stats b{font-size:15px;font-variant-numeric:tabular-nums}
.soh>div{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:4px}
.soh>div b{color:var(--ink)}
.soh p{height:8px;border-radius:5px;background:var(--soft);overflow:hidden;margin:0 0 12px}
.soh p i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#2f7a52,#55a97a)}
.cap{font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between}
.cap b{color:var(--ink)}
.minicells{display:flex;align-items:flex-end;gap:2px;height:40px;margin:6px 0 0}
.minicells i{flex:1;border-radius:2px 2px 0 0;background:color-mix(in srgb,var(--ink) 25%,transparent);min-height:3px}
.minicells i.lo{background:#2a78d6}.minicells i.hi{background:var(--out)}
.cellrow{display:grid;grid-template-columns:90px minmax(0,1fr);gap:10px;align-items:center;margin-bottom:8px}
.cr-n{font-size:13px;color:var(--muted);font-weight:700}
.cellgrid{display:grid;gap:4px}
.cell{border-radius:7px;padding:6px 0 5px;text-align:center;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15;color:var(--ink);position:relative;cursor:default}
.cell small{display:block;font-size:10px;font-weight:500;opacity:.7}
.cell.lo,.cell.hi{outline:2px solid var(--ink);outline-offset:1px;z-index:1}
.cell.bl::after{content:"";position:absolute;top:3px;right:4px;width:6px;height:6px;border-radius:50%;background:#2a78d6;box-shadow:0 0 0 2px var(--card)}
.cellscale{display:grid;grid-template-columns:auto minmax(40px,1fr) auto minmax(40px,1fr) auto;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin-top:14px}
.cellscale i{height:8px;border-radius:4px;background:linear-gradient(90deg,rgba(42,120,214,.75),rgba(42,120,214,.1))}
.cellscale i.r{background:linear-gradient(90deg,rgba(232,89,12,.1),rgba(232,89,12,.75))}
@media (max-width:900px){.cellgrid{grid-template-columns:repeat(auto-fill,minmax(52px,1fr))!important}}
@media (max-width:640px){.cellrow{grid-template-columns:minmax(0,1fr)}}

/* énergie sur 14 jours */
.etiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:18px}
.etiles div{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.etiles span{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.etiles b{font-size:21px;font-variant-numeric:tabular-nums}.etiles b i{font-style:normal;font-size:13px;color:var(--muted)}
.etiles .in{color:var(--in)}.etiles .out{color:var(--out)}.etiles .sun{color:#c28a00}.etiles .hm{color:#3b5bdb}
.ebars{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:6px;align-items:stretch}
.eb{display:grid;grid-template-rows:90px 70px auto;gap:0}
.eb-up,.eb-dn{display:flex;justify-content:center}
.eb-up{align-items:flex-end;border-bottom:1px solid var(--muted)}.eb-dn{align-items:flex-start}
.eb i{display:block;width:72%;max-width:30px;min-height:1px}
.eb-up i{background:var(--in);border-radius:5px 5px 0 0}.eb-dn i{background:var(--out);border-radius:0 0 5px 5px;opacity:.85}
.ebars.inv .eb-up i{background:var(--sun)}.ebars.inv .eb-dn i{background:#3b5bdb;opacity:.7}
.eb span{font-size:11px;color:var(--muted);text-align:center;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eb.today span{color:var(--ink);font-weight:800}
@media (max-width:640px){.ebars{gap:3px}.eb{grid-template-rows:70px 54px auto}.eb span{font-size:9.5px}}

/* carte heure × jour */
.hm{display:grid;grid-template-columns:44px repeat(24,minmax(0,1fr));gap:3px;align-items:center}
.hm i{display:block;aspect-ratio:1.25;border-radius:4px;min-width:0}
.hm i.na{background:repeating-linear-gradient(45deg,var(--soft) 0 3px,var(--card) 3px 6px)}
.hm-h{font-size:11px;color:var(--muted);text-align:left;font-variant-numeric:tabular-nums}
.hm-d{font-size:12.5px;color:var(--muted);font-weight:700;text-transform:capitalize;white-space:nowrap}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.fact{font-size:13.5px;color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.fact.in{border-color:color-mix(in srgb,var(--in) 40%,var(--line))}.fact.out{border-color:color-mix(in srgb,var(--out) 40%,var(--line))}
@media (max-width:600px){.hm{grid-template-columns:32px repeat(24,minmax(0,1fr));gap:2px}.hm i{border-radius:2px;aspect-ratio:.8}.hm-d{font-size:11px}}

/* courbes */
.trend-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.trend-head h2{margin:0!important}
.range{display:flex;gap:4px;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:3px;flex-wrap:wrap}
.range a{padding:6px 12px;border-radius:999px;text-decoration:none;color:var(--muted);font-size:13.5px;font-weight:700}
.range a[aria-current]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 26px}
.charts .wide{grid-column:1/-1}
.charts h3{font-size:14px;color:var(--muted);font-weight:700;margin-bottom:6px}
.dc{position:relative}
.dc svg{width:100%;height:200px;display:block;touch-action:pan-y}
.wide .dc svg{height:240px}
.dc .gl{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.dc .zl{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.dc .rl{stroke:var(--bad);stroke-width:1;stroke-dasharray:5 4;vector-effect:non-scaling-stroke;opacity:.7}
.dc .rlt{font-size:11px;fill:var(--bad)}
.dc .ax{font-size:11px;fill:var(--muted)}
.dc .ln{fill:none;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dc .ar{stroke:none;opacity:.13}
.dc .cur{stroke:var(--ink);stroke-width:1;opacity:.4;vector-effect:non-scaling-stroke}
.tip{position:absolute;top:6px;pointer-events:none;background:#0f1b2d;color:#fff;border-radius:9px;padding:7px 10px;font-size:12.5px;line-height:1.5;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.2);z-index:3;font-variant-numeric:tabular-nums}
.tip i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
.tip time{display:block;color:#9fb3c8;font-size:11.5px}
.rec-h{font-size:15px;margin:24px 0 10px}
.recs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.recs div{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.recs span{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.recs b{font-size:18px;font-variant-numeric:tabular-nums;white-space:nowrap}
.recs .in{color:var(--in)}.recs .out{color:var(--out)}.recs .sun{color:#c28a00}
.db-empty{color:var(--muted);font-size:14px;padding:30px 0;text-align:center}
@media (max-width:900px){.recs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.charts{grid-template-columns:minmax(0,1fr)}.dc svg{height:180px}.dc .ax-m{display:none}.recs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* boîtier */
.netgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.net{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.net span{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.net b{font-size:15.5px;display:flex;align-items:center;gap:8px;overflow-wrap:anywhere}
.wifi{width:26px;height:18px;flex:none}.wifi rect{fill:color-mix(in srgb,var(--ink) 15%,transparent)}.wifi rect.on{fill:var(--ok)}
.boxtools{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.boxtools h3{font-size:16px;margin-bottom:4px}
.copy{display:flex;gap:8px}
.copy input{flex:1;min-width:0;font:13px ui-monospace,Menlo,monospace;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--soft);color:var(--ink)}
.csv{display:flex;gap:8px;flex-wrap:wrap}
.chip-l{font-size:13.5px;font-weight:700;padding:6px 12px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:var(--ink);background:var(--soft)}
.chip-l:hover{border-color:var(--ink)}
@media (max-width:760px){.netgrid{grid-template-columns:1fr 1fr}.boxtools{grid-template-columns:minmax(0,1fr)}}
.demo-end{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--card)),var(--card))}
.demo-end>div:first-child{flex:1;min-width:260px}
.demo-act{display:flex;gap:16px;align-items:center}
.dash-foot{color:var(--muted);font-size:13.5px;text-align:center;max-width:70ch;margin:8px auto 0}

/* page de connexion */
.gate{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:start;padding-top:34px;padding-bottom:20px}
.gate h1{font-size:clamp(30px,4.4vw,46px);letter-spacing:-.02em;line-height:1.1;margin:14px 0 12px}
.gate-pts{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:10px}
.gate-pts li{padding-left:30px;position:relative;font-size:16px}
.gate-pts li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--ok) 15%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f9e44' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.gate-card{margin-top:24px}
.steps-mini{margin:16px 0 0 20px;display:grid;gap:6px;color:var(--muted);font-size:14px}
.secure{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);margin-top:14px!important}
.linkbox .form{max-width:none}
.db-wait{display:flex;gap:18px;align-items:flex-start}
.spin{flex:none;width:30px;height:30px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin 1s linear infinite;margin-top:4px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:860px){.gate{grid-template-columns:minmax(0,1fr);gap:10px}}

/* espace client */
.acc-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.acc-tabs a{flex:none;padding:10px 16px;text-decoration:none;color:var(--muted);font-weight:700;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.acc-tabs a span{font-size:11.5px;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-left:4px}
.acc-tabs a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}
.acc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.acc-stats div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.acc-stats span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.acc-stats b{font-size:26px}.acc-stats b.ok{color:var(--ok)}
.devcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:16px}
.devcard{margin:0!important}
.dc-head{display:flex;gap:14px;align-items:center}
.dc-g{width:78px;flex:none;background:#0f1b2d;border-radius:50%;padding:4px}
.dc-g .gauge .g-v{font-size:30px}
.dc-head h3{font-size:17px;margin:0 0 2px}
.dc-head p{margin:0!important;font-size:13.5px}
.dc-site{font-weight:700;color:var(--ink)!important}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#9aa6b8;margin-right:6px;vertical-align:1px}.dot.on{background:var(--ok)}
.dc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.dc-stats div{background:var(--soft);border-radius:10px;padding:8px 10px}
.dc-stats span{display:block;font-size:11px;text-transform:uppercase;color:var(--muted);font-weight:700}
.dc-stats b{font-size:15px;white-space:nowrap}
.dc-act{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.boxset .bs-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.bs-form{max-width:none;display:grid;gap:4px}
.bs-form>label{max-width:420px}
.bs-form fieldset{border:1px solid var(--line);border-radius:12px;padding:12px 14px 4px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 16px}
.bs-form legend{font-weight:800;font-size:14px;padding:0 6px}
.bs-form select{display:block;width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit}
.bs-form .chk{align-self:center}
.bs-form .btn{justify-self:start}
.bs-unlink{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.bs-unlink .fine{margin:0}
.acc-profile select{display:block;width:100%;margin-top:5px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit}
.acc-profile input:disabled{opacity:.7}
.danger-zone{border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
.danger-zone form{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.danger-zone .chk{display:flex;gap:8px;font-size:14px}
.empty-state{text-align:center;padding:36px 22px}
.empty-state p{max-width:60ch;margin-left:auto!important;margin-right:auto!important}
.order-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.order-row>div:first-child span{display:block;font-size:13px;color:var(--muted)}
.or-st{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:13px}
.or-st small{color:var(--muted)}
.or-tot{font-weight:800;font-variant-numeric:tabular-nums}
.pill.st-paid{background:color-mix(in srgb,#2a78d6 14%,transparent);color:#2a78d6}.pill.st-shipped{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.pill.st-refunded,.pill.st-cancelled{background:var(--soft)}
@media (max-width:760px){.acc-stats{grid-template-columns:1fr 1fr}.order-row{grid-template-columns:minmax(0,1fr) auto}.or-st{grid-column:1/-1;align-items:flex-start;flex-direction:row;gap:10px}}

/* mode plein écran */
html.present .preband,html.present .top,html.present .foot,html.present .dash-top,html.present .dash-devs,html.present .demo-end,html.present .dash-foot,html.present .dash-nav{display:none!important}
html.present .dash-bar{position:fixed;top:12px;right:12px;z-index:50;margin:0}
html.present .dash-bar::before{display:none}
html.present body{background:var(--bg)}
html.present .dash{padding-top:20px}
.form .chk input,.order-box .chk input{width:auto;display:inline-block;margin:3px 0 0;flex:none;accent-color:var(--ink)}
.form .chk{align-items:flex-start}
.wrap .wrap{padding-left:0;padding-right:0}
.dash-top .btn-text{color:var(--muted)}.dash-top .btn-text:hover{color:var(--ink)}
.form-inline .chk{flex:0 1 auto;min-width:0;align-self:center;margin-bottom:12px}
.gaps span,.recs span,.etiles span,.kpi>span,.tile span,.net span{overflow-wrap:anywhere;hyphens:auto}