@font-face{font-family:Outfit;src:url(outfit.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --white:#fff;--ink:#14213d;--muted:#4f5b73;--rule:#e3e8ef;--gray:#f3f6f9;--green:#0e9f6e;--mint:#e3f6ee;
  --orange:#f2994a;--orange-light:#fef1e4;--red:#d64545;--red-light:#fcebea;--navy:#14213d;--idle:#dfe5ec;
  --gutter:max(32px,calc((100vw - 1240px)/2));
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 16px/1.5 Outfit,system-ui,sans-serif}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
h1,h2,h3,p{margin:0}
h2{font-size:24px;font-weight:700;letter-spacing:-.02em}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:40px;height:64px;padding:0 var(--gutter);background:rgba(255,255,255,.94);border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;color:var(--ink);text-decoration:none;font-size:19px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.topbar nav{display:flex;gap:26px;flex:1}
.topbar nav a{display:flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-weight:500;transition:color .15s}
.topbar nav a:hover,.topbar nav a.active{color:var(--ink)}
.topbar nav a.active{font-weight:700;box-shadow:0 2px 0 var(--green)}
.count-badge{min-width:18px;padding:0 5px;border-radius:99px;background:var(--red);color:#fff;font-size:12px;font-weight:700;line-height:18px;text-align:center}
.clock{display:flex;align-items:baseline;gap:14px;white-space:nowrap}
.weather{color:var(--muted);font-size:15px}
.time{font-size:20px;font-weight:800;letter-spacing:-.02em}
.time small{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.link-state{color:var(--red);font-size:14px;font-weight:700}
main{max-width:calc(1240px + 64px);margin:0 auto;padding:48px 32px 80px}
.page-title{margin-bottom:36px}
.page-title h1{font-size:60px;line-height:1.05;font-weight:800;letter-spacing:-.04em}
.page-title p{margin-top:12px;max-width:720px;color:var(--muted);font-size:20px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:48px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stat{position:relative;display:flex;flex-direction:column;padding:22px 24px;color:inherit;text-decoration:none;border-left:1px solid var(--rule)}
.stat:first-child{padding-left:0;border-left:0}
.stat b{font-size:44px;line-height:1.1;font-weight:800;letter-spacing:-.03em}
.stat span:last-child{color:var(--muted)}
.stat .dot{position:absolute;top:32px;right:24px}
.stat.accent{color:var(--green);transition:background .15s}
.stat.accent:hover{background:var(--mint)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.dot.stay{background:var(--green)}.dot.heating{background:var(--orange)}.dot.idle{background:#c5cede}
.dot.critical,.dot.alert{background:var(--red)}.dot.offline{background:var(--navy)}.dot.warning{background:var(--orange)}
.columns{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:start}
.section-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:10px}
.section-header h2{font-size:32px;font-weight:800;letter-spacing:-.03em}
input[type=search]{width:240px;padding:9px 18px;border:1px solid var(--rule);border-radius:99px;background:var(--white);color:var(--ink);font:inherit}
input[type=search]:focus{outline:0;border-color:var(--green)}
.legend{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:20px;color:var(--muted);font-size:14px}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:11px;height:11px;border-radius:3px}
.legend .stay,.tile.stay{background:var(--green)}
.legend .heating,.tile.heating{background:var(--orange)}
.legend .idle{background:var(--idle)}
.legend .alert,.tile.alert{background:var(--red)}
.legend .offline,.tile.offline{background:var(--navy)}
.villages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
.village{padding:22px 0 26px;border-top:1px solid var(--rule)}
.village header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.village h3{font-size:20px;font-weight:700;letter-spacing:-.02em}
.village header span{color:var(--muted);font-size:14px}
.building{display:flex;gap:10px;margin-top:6px}
.building em{width:14px;padding-top:8px;color:var(--muted);font-size:13px;font-style:normal;font-weight:600}
.tiles{display:flex;flex-wrap:wrap;gap:5px}
.tile{position:relative;width:50px;height:40px;padding:12px 0 0;border-radius:6px;background:var(--gray);color:#fff;font-size:14px;font-weight:600;transition:transform .1s,opacity .2s}
.tile.idle{background:var(--gray);color:var(--muted)}
.tile small{position:absolute;top:2px;left:6px;font-size:10px;font-weight:500;opacity:.75}
.tile:hover{transform:translateY(-2px)}
.tile.idle:hover{background:var(--mint);color:var(--ink)}
.tile.dimmed{opacity:.12}
.map-view{--idle:#a9b5c5}
.plan-scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:20px}
.plan{position:relative;min-width:900px;container-type:inline-size}
.plan{background:var(--gray)}
.plan svg{display:block;width:100%;height:auto}
.zones circle{fill:#e4eaf1}
.roads path,.roads-inner path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.roads path{stroke:#d3dbe5;stroke-width:24}
.roads-inner path{stroke:var(--white);stroke-width:16}
.village-labels text{fill:var(--navy);font-size:26px;font-weight:800;letter-spacing:.06em;text-anchor:middle}
.fiber .node{fill:var(--navy)}
#pins{position:absolute;inset:0}
.fiber{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
polyline.up,polyline.down{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
polyline.ring{stroke-width:7}
polyline.up{stroke:var(--green)}
polyline.down{stroke:var(--red);stroke-dasharray:10 8}
.map-key{position:absolute;left:1.5%;top:3%;display:grid;gap:10px;padding:14px 18px;border-radius:14px;background:var(--white);box-shadow:0 2px 10px rgba(20,33,61,.12);font-size:14px;line-height:1.3}
.key-row{display:flex;align-items:center;gap:12px}
.key-row b{display:block;font-weight:700}
.key-row p{color:var(--muted)}
.key-row svg{width:34px;flex:none}
.down-count{display:block!important;color:var(--red)}
.pin-sample{display:block;width:34px;height:34px;padding:6px;border-radius:50%;flex:none}
.pin-sample span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--white);color:var(--navy);font-size:12px;font-weight:800}
.landmark text{fill:var(--muted);font-size:22px;font-weight:600;text-anchor:end}
/* Taille en cqw : les pastilles suivent l'échelle de l'image et ne se chevauchent jamais. */
.pin{position:absolute;width:1.85cqw;aspect-ratio:1;padding:.36cqw;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(20,33,61,.35);transition:transform .12s}
.pin span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--white);color:var(--navy);font-size:.78cqw;font-weight:800;line-height:1}
.pin:hover{z-index:2;transform:translate(-50%,-50%) scale(1.35)}
.pin.alert,.pin.offline{animation:pulse 1.6s ease-out infinite}
.pin.offline span{background:var(--navy);color:var(--white)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(214,69,69,.6)}100%{box-shadow:0 0 0 1.2cqw rgba(214,69,69,0)}}
.side{display:flex;flex-direction:column;gap:32px}
.card h2{margin-bottom:12px}
main>.card{margin-top:40px;padding-top:24px;border-top:1px solid var(--rule)}
.card-alert{padding:22px 24px;border-radius:20px;background:var(--red-light)}
.card-alert .row:hover{background:rgba(214,69,69,.08)}
.see-all{display:block;margin-top:8px;color:var(--red);font-weight:700;text-decoration:none}
.progress{height:6px;overflow:hidden;border-radius:9px;background:var(--gray)}
.progress div{height:100%;background:var(--green);transition:width .6s}
.sub{margin:10px 0;color:var(--muted);font-size:15px}
.sub b{color:var(--ink);font-weight:700}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 8px;margin:0 -8px;width:calc(100% + 16px);border-radius:8px;text-align:left}
.row:hover{background:var(--gray)}
.row b{display:block;font-weight:700}
.row small{color:var(--muted);font-size:14px}
.badge{flex:none;color:var(--muted);font-size:14px;font-style:normal;font-weight:600}
.badge.ok{color:var(--green)}
.badge.heating{color:#c8701f}
.large{font-size:18px;color:var(--muted)}.large b{color:var(--ink);font-size:36px;font-weight:800;letter-spacing:-.03em}
.empty{color:var(--muted)}
#overlay{position:fixed;inset:0;z-index:30;background:rgba(20,33,61,.3);opacity:0;pointer-events:none;transition:opacity .2s}
#drawer{position:fixed;top:0;right:0;bottom:0;z-index:31;width:min(540px,100%);padding:28px 32px;overflow-y:auto;background:var(--white);transform:translateX(102%);transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.drawer-open #overlay{opacity:1;pointer-events:auto}
.drawer-open #drawer{transform:none}
.drawer-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.drawer-header small{color:var(--muted);font-size:15px}
.drawer-header h2{font-size:38px;font-weight:800;letter-spacing:-.035em;line-height:1.1}
.close{width:40px;height:40px;border:1px solid var(--rule);border-radius:50%;font-size:22px;line-height:1}
.close:hover{border-color:var(--ink)}
.main-state{display:flex;align-items:center;gap:24px;padding:24px 28px;border-radius:20px;background:var(--gray);color:var(--ink)}
.main-state.stay{background:var(--mint)}
.main-state.heating{background:var(--orange-light)}
.main-state.alert{background:var(--red-light)}
.main-state.offline{background:var(--navy);color:#fff}
.temperature{font-size:64px;line-height:1;font-weight:800;letter-spacing:-.04em}
.temperature sup{font-size:22px;font-weight:600;vertical-align:top}
.main-state strong{display:block;font-size:19px;font-weight:700}
.main-state small{display:block;font-size:15px;opacity:.75}
.banner{display:flex;flex-direction:column;margin-top:12px;padding:14px 18px;border-left:3px solid var(--orange);background:var(--orange-light)}
.banner.critical{border-color:var(--red);background:var(--red-light)}
.devices{display:grid;grid-template-columns:repeat(4,1fr);margin-top:8px;border-bottom:1px solid var(--rule)}
.devices div{padding:14px 0;color:var(--muted)}
.devices b,.devices span{display:block}
.devices b{font-size:15px;font-weight:700}
.devices span{font-size:14px}
.devices .on b{color:var(--ink)}
.devices .on span{color:var(--green);font-weight:600}
.battery-bar{height:6px;margin-top:5px;overflow:hidden;border-radius:9px;background:var(--gray)}
.battery-bar i{display:block;height:100%}
.battery-bar i.good{background:var(--green)}.battery-bar i.watch{background:var(--orange)}.battery-bar i.low{background:var(--red)}
.battery-text.good,.battery-value.good{color:var(--green)!important}
.battery-text.watch,.battery-value.watch{color:#c8701f!important}
.battery-text.low,.battery-value.low{color:var(--red)!important}
.battery-value{flex:none;font-size:16px;font-style:normal;font-weight:700}
.link-green{display:block;margin-top:8px;color:var(--green);font-weight:700;text-decoration:none}
.battery-summary{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:24px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.battery-summary div{padding:22px 24px;border-left:1px solid var(--rule)}
.battery-summary div:first-child{padding-left:0;border-left:0}
.battery-summary b{display:block;font-size:44px;line-height:1.1;font-weight:800;letter-spacing:-.03em}
.battery-summary span{color:var(--muted)}
.battery-row{display:grid;grid-template-columns:minmax(150px,1fr) 2fr 70px;gap:24px;align-items:center;width:100%;padding:12px 0;border-bottom:1px solid var(--rule);text-align:left}
.battery-row:hover b{color:var(--green)}
.battery-row b{font-weight:700}
.battery-row .battery-bar{height:8px;margin:0}
.battery-row .battery-value{text-align:right}
.drawer-block{margin-top:24px}
.drawer-block h3{margin-bottom:8px;font-size:20px;font-weight:700;letter-spacing:-.02em}
.stays div{padding:12px 0;border-bottom:1px solid var(--rule)}
.stays div:first-child{padding-top:0}
.stays small,.stays span{display:block;color:var(--muted);font-size:14px}
.stays b{font-size:18px;font-weight:700}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices button,.override button,.buttons button,.toast button,.scenario button{padding:9px 20px;border:2px solid var(--green);border-radius:99px;background:var(--green);color:#fff;font-weight:700;transition:.15s}
.choices button:hover,.override button:hover,.buttons button:hover,.toast button:hover,.scenario button:hover{background:#0b8a5f;border-color:#0b8a5f}
.choices.cold button,button.plain,.buttons button.plain{border:2px solid var(--green);background:transparent;color:var(--green);font-weight:700}
.choices.cold button:hover,button.plain:hover,.buttons button.plain:hover{background:var(--mint);border-color:var(--green)}
.override{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-radius:16px;background:var(--mint)}
.override b,.override small{display:block}
.override b{font-weight:700}
.grafana{display:block;width:100%;margin-top:8px;border:0}
.tabs{display:flex;gap:26px;margin-bottom:8px;border-bottom:1px solid var(--rule)}
.tabs a{padding:10px 0;color:var(--muted);text-decoration:none;font-weight:500}
.tabs a.active{color:var(--ink);font-weight:700;box-shadow:0 2px 0 var(--green)}
.item{display:grid;grid-template-columns:auto 1fr auto auto;gap:18px;align-items:center;padding:22px 0;border-bottom:1px solid var(--rule)}
.item.seen{opacity:.65}
.item h3{font-size:19px;font-weight:700;letter-spacing:-.02em}
.item small,.item time{color:var(--muted);font-size:15px}
.item time{text-align:right}
.buttons{display:flex;align-items:center;gap:8px}
.empty-state{padding:64px 32px;border-radius:24px;background:var(--mint)}
.empty-state span{display:none}
.empty-state h2{font-size:36px;font-weight:800;letter-spacing:-.03em}
.empty-state p{color:var(--muted);font-size:18px}
.savings{display:grid;grid-template-columns:minmax(280px,1fr) 2fr;gap:48px;align-items:center}
.savings-hero{display:flex;flex-direction:column;padding:36px 40px;border-radius:24px;background:var(--mint)}
.savings-hero small,.savings-hero span{color:var(--muted);font-size:16px}
.savings-hero b{font-size:76px;line-height:1.1;font-weight:800;letter-spacing:-.04em}
.comparison{display:grid;gap:14px}
.comparison b{font-weight:700}
.comp-bar{height:10px;margin:4px 0;overflow:hidden;border-radius:9px;background:var(--gray)}
.comp-bar i{display:block;height:100%;background:#c5cede;transition:width .6s}
.comp-bar.green i{background:var(--green)}
.scenarios{border-top:1px solid var(--rule)}
.scenario{display:grid;grid-template-columns:320px 1fr auto;gap:32px;align-items:center;padding:24px 0;border-bottom:1px solid var(--rule)}
.scenario h3{font-size:21px;font-weight:700;letter-spacing:-.02em}
.scenario p{color:var(--muted);font-size:17px}
.demo-footer{margin-top:28px}
.demo-footer button{padding:10px 22px;border-radius:99px}
.toast{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;padding:18px 28px;border-radius:20px;background:var(--mint)}
.toast b{font-weight:700}
@media(max-width:1100px){.columns{grid-template-columns:1fr;gap:40px}.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(odd){padding-left:0;border-left:0}.savings{grid-template-columns:1fr}.scenario{grid-template-columns:1fr auto}.scenario p{grid-row:2;grid-column:1/-1}}
@media(max-width:700px){.topbar{flex-wrap:wrap;height:auto;gap:10px;padding:12px 16px}.topbar nav{order:3;flex-basis:100%;overflow-x:auto;gap:18px}main{padding:28px 16px 60px}.page-title h1{font-size:40px}.page-title p{font-size:18px}.stat b{font-size:34px}.stat{padding:16px}.villages{grid-template-columns:1fr}.item{grid-template-columns:auto 1fr}.item time{text-align:left}.buttons{grid-column:1/-1}.section-header{flex-wrap:wrap}input[type=search]{width:100%}#drawer{padding:22px 16px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}