:root{--bg:#071629;--panel:#0b243b;--border:#256482;--muted:#9db7c8;--text:#eef7ff;--orange:#ffb44e;--blue:#48d2fa;--purple:#c295f9;--green:#5cddbb;--h:#0c2840;color-scheme:dark;font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
*{box-sizing:border-box}html{background:var(--bg);scrollbar-color:#225775 #081526}body{margin:0;background:linear-gradient(160deg,#041221,#0a2036 65%,#061827);color:var(--text);min-height:100vh}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--orange);outline-offset:2px}.wrap{max-width:1150px;margin:0 auto;padding:20px clamp(12px,3vw,28px) 30px}.top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin:0 4px 17px}.kicker{color:var(--muted);font-size:11px;letter-spacing:.15em;font-weight:750}.top h1{font-size:clamp(22px,3vw,32px);margin:1px 0 0;line-height:1.16}.top h1 span{color:#d9eefa}.version{font-size:11px;color:var(--muted);margin-top:6px}.head-right{text-align:right}.clock{font-size:clamp(22px,4vw,29px);font-weight:760;font-variant-numeric:tabular-nums}.weather{color:var(--orange);font-size:12px;margin-top:2px}.online{color:var(--green);font-size:11px;display:inline-block;margin-top:5px}.hero{position:relative;min-height:clamp(230px,33vw,370px);background-image:url('/maison.png');background-position:center;background-size:cover;border:1px solid #24647a;box-shadow:0 0 20px #007eaf18;overflow:hidden;border-radius:18px}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#031524ee 0%,#03152480 36%,#03152400 75%),linear-gradient(0deg,#05192bef 0%,transparent 52%)}.hero-bottom{position:absolute;left:clamp(15px,3vw,38px);bottom:clamp(18px,3vw,35px)}.hero-caption{font-weight:750;color:var(--orange);font-size:clamp(14px,2vw,20px)}.hero-number{font-size:clamp(48px,7vw,76px);line-height:1.1;font-weight:820;color:var(--orange);text-shadow:0 3px 20px #07121a}.hero-number small,.metric-number small{font-size:.53em}.kit-stats{display:flex;gap:clamp(12px,2.4vw,28px);flex-wrap:wrap;font-size:clamp(11px,1.6vw,14px);font-weight:720;color:#ffd28c;margin-top:9px}.main-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:13px 0}.metric-card{padding:19px 20px;min-height:146px;border-radius:15px;background:linear-gradient(160deg,#12405a,#092139);border:1px solid #2e718c;box-shadow:inset 0 0 14px #29c7f20f}.metric-title{font-size:14px;font-weight:700;color:#b8e8fc}.metric-number{font-size:clamp(29px,3.8vw,42px);font-weight:800;margin:8px 0 5px;font-variant-numeric:tabular-nums}.metric-foot{font-size:11px;color:var(--muted)}.blue .metric-number{color:var(--blue)}.purple .metric-number{color:var(--purple)}.green .metric-number{color:var(--green)}.green .metric-title{color:#b0f6e1}.purple .metric-title{color:#d9bdfa}.situation{border-left:3px solid var(--blue);background:#12334a;padding:11px 13px;margin:12px 0;font-size:12px;color:#e4f3ff}.panel{border:1px solid #206180;background:#092139;border-radius:15px;overflow:hidden}.chart-panel{padding:18px 15px}.panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel h2{margin:0;font-size:19px}.panel p{font-size:11px;color:var(--muted);margin:5px 0 0}.panel input{background:#071b2c;border:1px solid #3b7391;color:#fff;border-radius:6px;padding:8px 9px;min-width:137px;max-width:160px}.chips{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0 12px}.chip{font-size:12px;padding:9px 11px;border:1px solid #266788;background:#12344b;border-radius:8px;color:#c6e1f0;flex:1}.chip.active{color:white;background:#145d81;border-color:#52aee0;font-weight:720}.chart-toolbar{display:flex;gap:8px;justify-content:space-between;align-items:center;min-height:40px;color:var(--muted);font-size:11px}.chart-controls{display:flex;gap:6px}.small-btn{background:#0a3047;color:#c8e8fc;border:1px solid #317293;font-size:11px;padding:8px 10px;border-radius:7px;white-space:nowrap}.chart-stage{position:relative;min-height:270px}.chart-stage canvas{width:100%;height:300px;display:block;touch-action:pan-y}.hint{color:#a9c4d3;font-size:11px;text-align:center;min-height:16px;padding:4px}.kwh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:13px}.kwh-card{border:1px solid #286b8a;border-radius:14px;padding:15px;background:linear-gradient(150deg,#11384f,#0a2137)}.kwh-card span{font-size:12px;display:block;min-height:33px}.kwh-card em{font-style:normal;color:#b5cbd7;font-size:10px}.kwh-card strong{display:block;font-size:clamp(20px,3vw,32px);white-space:nowrap;letter-spacing:-.035em;margin-top:5px}.orange{color:var(--orange)}.purple-text{color:var(--purple)}.green-text{color:var(--green)}.sensor-panel{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:17px;margin-top:13px}.sensor-placeholder{color:var(--muted);font-size:12px;white-space:nowrap}footer{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px;gap:10px;margin-top:15px}.logout{background:transparent;border:1px solid #2a647f;border-radius:6px;color:#c9ddea;padding:8px 11px}.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.login-card{max-width:430px;width:100%;background:#0d2940;border:1px solid #2c748e;border-radius:18px;padding:28px;box-shadow:0 15px 60px #0007}.login-card .brand{color:var(--orange);font-size:20px;font-weight:800}.login-card h1{margin:22px 0 8px;font-size:26px}.login-card p{font-size:14px;line-height:1.5;color:#c4e0ef}.login-card label{display:block;margin:18px 0 7px;font-size:13px}.login-card input{width:100%;padding:13px 12px;background:#041c2b;border:1px solid #4d839b;border-radius:8px;color:#fff}.login-card button{display:block;width:100%;padding:13px;background:#146586;border:1px solid #4cb0d6;color:#fff;margin-top:16px;border-radius:8px;font-weight:700}.login-card .subtle{color:#9aafbd;font-size:11px;margin-top:18px}
@media(max-width:660px){.wrap{padding:13px 10px 22px}.top{margin:0 3px 12px}.weather{max-width:155px;margin-left:auto}.hero{min-height:260px;background-position:53% center}.hero-shade{background:linear-gradient(90deg,#031524e8 0%,#03152470 45%,transparent 100%),linear-gradient(0deg,#05192bee 0%,transparent 58%)}.hero-number{font-size:51px}.main-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:9px 0}.metric-card{padding:14px;min-height:124px}.metric-card:first-child{grid-column:span 2;min-height:113px}.metric-title{font-size:12px}.metric-number{font-size:35px;margin:7px 0 4px}.metric-foot{font-size:10px}.chart-panel{padding:14px 8px}.panel-top{margin:0 5px}.panel h2{font-size:18px}.chips{margin:12px 2px 10px;gap:5px}.chip{padding:8px 3px;font-size:11px}.chart-toolbar{padding:0 4px;align-items:flex-start;flex-wrap:wrap}.chart-toolbar #legend{width:100%}.chart-stage canvas{height:270px}.kwh-grid{gap:7px;margin-top:9px}.kwh-card{padding:12px 8px}.kwh-card span{font-size:10px;min-height:37px}.kwh-card strong{font-size:clamp(16px,4.3vw,23px)}.sensor-panel{display:block;padding:14px}.sensor-placeholder{margin-top:9px}.situation{font-size:11px}}
@media(max-width:390px){.top h1{font-size:21px}.clock{font-size:21px}.kit-stats{gap:8px}.hero{min-height:230px}.main-cards .metric-number{font-size:32px}}


/* Sondes SwitchBot : style mobile identique aux cartes du tableau solaire. */
.sensor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;margin-top:12px}
.sensor-card{background:linear-gradient(150deg,rgba(16,72,98,.77),rgba(10,31,54,.88));border:1px solid #28617d;border-radius:16px;padding:16px 14px;min-width:0}
.sensor-name{font-size:15px;font-weight:650;color:#b9eaff;overflow-wrap:anywhere}
.sensor-value{font-size:clamp(23px,6vw,36px);font-weight:750;color:#58ceff;line-height:1.45;font-variant-numeric:tabular-nums}
.sensor-extra{color:#aec4d3;font-size:12px;line-height:1.5}
.sensor-empty{color:#aebdca;padding:12px 2px}
@media(max-width:360px){.sensor-grid{grid-template-columns:1fr}}