/* adu — Tado° Energy Hub. Un seul thème : fond profond, panneaux de verre, une seule couleur vive
   pour ce qui chauffe et ce que l'on commande. Tokens en tête, base commune, puis chaque page. */
:root{
  color-scheme:dark;
  /* Couleurs */
  --fond:#0b0c0e;
  --verre:rgba(255,255,255,.055);--verre-2:rgba(255,255,255,.10);--verre-fonce:rgba(0,0,0,.32);
  --trait:rgba(255,255,255,.09);--trait-fort:rgba(255,255,255,.18);
  --texte:#f2f3ef;--texte-2:rgba(242,243,239,.64);--texte-3:rgba(242,243,239,.52);
  --accent:#d4ff3a;--accent-texte:#0b0c0e;--accent-doux:rgba(212,255,58,.12);--accent-halo:rgba(212,255,58,.35);
  --froid:#79b5de;
  --accent-rvb:212,255,58;--froid-rvb:121,181,222;
  /* Suite pour distinguer plusieurs pièces sur un même graphique (hexadécimal : les pages y accolent une transparence) */
  --serie-1:#d4ff3a;--serie-2:#f2f3ef;--serie-3:#79b5de;--serie-4:#ffb860;--serie-5:#e39ad0;--serie-6:#8f948f;
  --alerte:#ff6f5e;--alerte-doux:rgba(255,111,94,.12);
  --inverse:#f2f3ef;--inverse-texte:#0b0c0e;
  /* Graphiques (lus par web/js/commun/graphiques.js et web/js/live/programme.js) */
  --grille:rgba(255,255,255,.06);--grille-forte:rgba(255,255,255,.14);
  --courbe-int:#f2f3ef;--courbe-consigne:rgba(212,255,58,.6);--courbe-ext:#79b5de;--courbe-hum:#b9a3ff;--bande-confort:rgba(212,255,58,.07);
  --chauffe-1:rgba(255,146,64,.09);--chauffe-2:rgba(255,146,64,.18);--chauffe-3:rgba(255,146,64,.30);
  --bande-absent:rgba(121,181,222,.07);
  /* Verre */
  --flou:blur(22px) saturate(150%);
  --ombre:0 1px 0 rgba(255,255,255,.06) inset,0 30px 60px -30px rgba(0,0,0,.9);
  /* Espacements (pas de 4 px) */
  --esp-1:4px;--esp-2:8px;--esp-3:12px;--esp-4:16px;--esp-5:24px;--esp-6:32px;--esp-7:48px;
  /* Typographie : étiquettes en capitales, texte, grands chiffres, chiffre de la pièce */
  --police:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --taille-e:.6875rem;--taille-s:.8125rem;--taille-m:.9375rem;--taille-l:2.25rem;--taille-xl:4.5rem;
  /* Rayons : panneaux arrondis, commandes en pilule */
  --rayon:24px;--rayon-s:999px;
}
/* Une couleur par section (app.js pose data-section sur <html>) : Live garde le vert de la chaleur, Energy prend
   l'ambre du coût, Analysis un violet lavande, Settings reste neutre. Tout ce qui lit --accent suit : pilule
   active, chiffres, graphiques, halos du fond, logo. */
:root[data-section="energie"]{--accent:#ffb347;--accent-rvb:255,179,71;--accent-doux:rgba(255,179,71,.12);--accent-halo:rgba(255,179,71,.35)}
:root[data-section="bilan"]{--accent:#b48cff;--accent-rvb:180,140,255;--accent-doux:rgba(180,140,255,.12);--accent-halo:rgba(180,140,255,.35)}
:root[data-section="parametres"]{--accent:#e9ecef;--accent-rvb:233,236,239;--accent-doux:rgba(233,236,239,.10);--accent-halo:rgba(233,236,239,.28)}

/* ---------------------------------------------------------------- Base */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--police);font-size:var(--taille-m);line-height:1.45;color:var(--texte);min-height:100vh;-webkit-font-smoothing:antialiased;
  background:var(--fond);
  background-image:radial-gradient(900px 520px at 50% -8%,rgba(var(--accent-rvb),.10),transparent 62%),
    radial-gradient(760px 560px at 102% 100%,rgba(255,150,90,.07),transparent 62%),
    radial-gradient(640px 460px at -4% 72%,rgba(121,181,222,.07),transparent 62%);
  background-attachment:fixed}
/* Le fond vit, à peine : deux nappes de lumière dérivent lentement derrière le verre (couleur de la section, bleu
   froid, orange chaud), respirent sur un cycle long, et un grain fin évite les marches des dégradés.
   Quand la chaudière tourne (body.chauffe, posé par js/live/direct.js), la nappe chaude s'avive. Tout passe par
   transform et opacity, donc sans coût notable ; prefers-reduced-motion fige l'ensemble. */
html::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:160px 160px}
body::before,body::after{content:"";position:fixed;inset:-30%;z-index:-1;pointer-events:none;will-change:transform,opacity}
body::before{background:radial-gradient(38% 32% at 30% 40%,rgba(var(--accent-rvb),.085),transparent 70%),radial-gradient(34% 28% at 72% 62%,rgba(121,181,222,.06),transparent 70%);
  animation:derive 90s ease-in-out infinite alternate,respire 14s ease-in-out infinite}
body::after{background:radial-gradient(44% 38% at 62% 28%,rgba(255,150,90,.05),transparent 70%),radial-gradient(30% 26% at 20% 78%,rgba(var(--accent-rvb),.045),transparent 70%);
  animation:derive-2 130s ease-in-out infinite alternate,respire 19s ease-in-out -7s infinite}
body.chauffe::after{background:radial-gradient(44% 38% at 62% 28%,rgba(255,150,90,.10),transparent 70%),radial-gradient(30% 26% at 20% 78%,rgba(var(--accent-rvb),.06),transparent 70%)}
@keyframes derive{from{transform:translate3d(-5%,-3%,0) rotate(-2deg)}to{transform:translate3d(5%,4%,0) rotate(2deg)}}
@keyframes derive-2{from{transform:translate3d(4%,3%,0) scale(1.04)}to{transform:translate3d(-5%,-4%,0) scale(.98)}}
@keyframes respire{0%,100%{opacity:.75}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){body::before,body::after{animation:none}*,*::before,*::after{transition-duration:.01ms!important;scroll-behavior:auto!important}}
a{color:var(--texte);text-underline-offset:2px}
h1,h2,h3{font-size:var(--taille-m);font-weight:500}
h2{margin:var(--esp-7) 0 var(--esp-4)}
h4,.etiquette{font-size:var(--taille-e);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-2)}
h4{margin:var(--esp-4) 0 var(--esp-2)}
.hint{font-size:var(--taille-s);color:var(--texte-3);font-weight:400;letter-spacing:0;text-transform:none}
.spacer{flex:1}.hidden{display:none!important}
.ok{color:var(--texte)}.err{color:var(--alerte)}
code{background:var(--verre-fonce);padding:1px 6px;border-radius:6px;font-size:var(--taille-s)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Le verre : panneaux, pilules de navigation, dialogues */
.card,.zone,.pilule,dialog,.sticky{background:var(--verre);backdrop-filter:var(--flou);-webkit-backdrop-filter:var(--flou);border:1px solid var(--trait);box-shadow:var(--ombre)}
/* Point lumineux devant un état */
.point::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent-halo);margin-right:var(--esp-2);vertical-align:middle}

/* En-tête collant : le logo est grand en haut de page et reprend sa taille au fil du défilement (--defile, posé par app.js) */
header{position:sticky;top:0;z-index:10;padding:var(--esp-4) var(--esp-5) var(--esp-3);background:rgba(11,12,14,.72);backdrop-filter:var(--flou);-webkit-backdrop-filter:var(--flou);border-bottom:1px solid var(--trait)}
.bandeau{position:relative;max-width:1320px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--esp-3)}
.marque{display:flex;flex-direction:column;align-items:center;gap:var(--esp-2);margin:0}
.halo{display:inline-block;filter:drop-shadow(0 0 22px var(--accent-halo))}
.logo-adu{display:block;width:calc(220px - 150px * var(--defile,0));height:auto;color:var(--accent);transition:color .6s}
/* Chauffe en cours (classe on posée par js/live/direct.js) : les flammes ondulent, en vague autour du disque */
.logo-adu .flamme{transform-box:view-box;transform-origin:542px 546px}
.logo-adu.on .flamme{animation:ondule 2s ease-in-out infinite alternate}
.logo-adu.on .flamme:nth-child(2n){animation-direction:alternate-reverse}
.logo-adu.on .flamme:nth-child(3n){animation-delay:-.7s}.logo-adu.on .flamme:nth-child(3n+1){animation-delay:-1.3s}
.halo:has(.logo-adu.on){filter:drop-shadow(0 0 34px var(--accent-halo))}
@keyframes ondule{from{transform:rotate(-1.4deg) scale(1)}to{transform:rotate(1.4deg) scale(1.035)}}
@media (prefers-reduced-motion:reduce){.logo-adu.on .flamme{animation:none}}
.sub{font-size:var(--taille-s);color:var(--texte-2);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#btnLogout{position:absolute;right:0;top:0;min-height:0;padding:var(--esp-2) var(--esp-4);font-size:var(--taille-e);letter-spacing:.14em;text-transform:uppercase;color:var(--texte-2)}
nav.pilule{display:inline-flex;gap:2px;padding:4px;border-radius:var(--rayon-s)}
.tab{background:none;border:0;border-radius:var(--rayon-s);min-height:0;padding:var(--esp-3) var(--esp-5);font-size:var(--taille-e);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--texte-2)}
.tab:hover{color:var(--texte);border:0}
.tab{transition:background .35s,color .35s,box-shadow .35s}
.tab.on{background:var(--accent);color:var(--accent-texte);box-shadow:0 0 28px var(--accent-halo)}
main{padding:var(--esp-6) var(--esp-5) var(--esp-7);max-width:1320px;margin:0 auto}
.panel{display:none}.panel.on{display:block}

/* Un seul style de panneau */
.card,.zone{border-radius:var(--rayon);padding:var(--esp-5) var(--esp-6);margin-bottom:var(--esp-5);flex:1;min-width:280px}
.card h3{margin-bottom:var(--esp-4)}.card h3 .hint{margin-left:var(--esp-2)}.card h3 .right{float:right;margin-top:-4px}
.row{display:flex;gap:var(--esp-5);flex-wrap:wrap}
.row.tight{gap:var(--esp-2);align-items:center}.row.tight .grow{flex:1;min-width:120px}
.kv{display:flex;justify-content:space-between;gap:var(--esp-3);padding:var(--esp-2) 0;border-bottom:1px solid var(--trait)}.kv span{color:var(--texte-2)}
.kvs .kv{font-size:var(--taille-s)}
.big{font-size:var(--taille-l);font-weight:300;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* Un seul style de bouton, en pilule, plus « principal » */
button{font:inherit;font-size:var(--taille-s);font-weight:500;color:var(--texte);background:var(--verre-2);border:1px solid var(--trait);border-radius:var(--rayon-s);padding:var(--esp-2) var(--esp-4);min-height:36px;cursor:pointer;transition:background .15s,border-color .15s}
button:hover{background:rgba(255,255,255,.15);border-color:var(--trait-fort)}button:disabled{opacity:.4;cursor:default}
button.primary{background:var(--accent);border-color:transparent;color:var(--accent-texte);box-shadow:0 0 22px var(--accent-halo)}
button.primary:hover{background:#e3ff6b}
button.on{background:var(--accent);border-color:transparent;color:var(--accent-texte)}
button.sm{min-height:32px;padding:var(--esp-1) var(--esp-3)}
button.lien{background:none;border:0;padding:0;min-height:0;color:var(--texte-2);text-decoration:underline;text-underline-offset:3px;letter-spacing:0;text-transform:none;font-weight:400}
button.rond{width:44px;height:44px;padding:0;border-radius:50%;font-size:1.25rem;font-weight:300;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.btns{display:flex;gap:var(--esp-2);flex-wrap:wrap;margin-top:var(--esp-3)}
/* Pastilles d'état */
.badge,.legend li{display:inline-flex;align-items:center;gap:var(--esp-2);font-size:var(--taille-s);color:var(--texte-2);padding:3px var(--esp-3);border:1px solid var(--trait);border-radius:var(--rayon-s);background:var(--verre-fonce);white-space:nowrap}
.badge.accent{color:var(--accent)}.badge.alerte{color:var(--alerte);border-color:rgba(255,111,94,.4)}

/* Formulaires */
input,select,textarea{font:inherit;font-size:var(--taille-s);color:var(--texte);background:var(--verre-fonce);border:1px solid var(--trait);border-radius:var(--rayon-s);padding:var(--esp-2) var(--esp-4);min-height:36px}
input:focus,select:focus{border-color:var(--trait-fort)}
textarea{width:100%;border-radius:12px;font-family:ui-monospace,Menlo,monospace}
.form{display:flex;flex-direction:column;gap:var(--esp-3)}.form label{display:flex;flex-direction:column;gap:var(--esp-1);font-size:var(--taille-s);color:var(--texte-2)}
.form label.chk{flex-direction:row;align-items:center;gap:var(--esp-2);color:var(--texte)}
label.full{flex:1;display:flex;flex-direction:column;gap:var(--esp-1);font-size:var(--taille-s);color:var(--texte-2);min-width:280px}
label.inline{display:flex;align-items:center;gap:var(--esp-2);font-size:var(--taille-s);color:var(--texte-2)}label.inline input{width:220px}
input.court{width:64px}