*{box-sizing:border-box}
html,body{margin:var(--space-0);width:var(--screen-width);height:var(--screen-height);overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-family)}
button{font:inherit;color:inherit;border:var(--space-0);padding:var(--space-0);cursor:pointer;white-space:nowrap}
button:active{transform:scale(var(--scale-pressed))}
button{transition:transform var(--duration-fast)}
.screen{position:relative;width:var(--screen-width);height:var(--screen-height);overflow:hidden;background:var(--bg)}
.svg-defs{position:absolute;width:var(--space-0);height:var(--space-0);overflow:hidden}
.statusbar{height:var(--space-44);display:flex;align-items:center;justify-content:space-between;padding:var(--space-0) var(--space-21) var(--space-0) var(--space-36);font-size:var(--font-status);font-weight:var(--weight-semibold)}
.status-icons{width:var(--space-72);display:flex;align-items:center;justify-content:space-between;color:var(--black)}
.cellular{height:var(--space-14);display:flex;align-items:flex-end;gap:var(--space-2)}.cellular i{display:block;width:var(--space-3);background:var(--black);border-radius:var(--radius-indicator)}.cellular i:nth-child(1){height:var(--space-5)}.cellular i:nth-child(2){height:var(--space-8)}.cellular i:nth-child(3){height:var(--space-11)}.cellular i:nth-child(4){height:var(--space-14)}
.wifi{width:var(--space-18);height:var(--space-14);fill:none;stroke:currentColor;stroke-width:var(--stroke-control);stroke-linecap:round}
.battery{position:relative;width:var(--space-24);height:var(--space-12);border:var(--stroke-battery) solid var(--text-2);border-radius:var(--radius-indicator)}.battery:after{content:"";position:absolute;right:calc(var(--space-3) * -1);top:var(--space-3);width:var(--space-2);height:var(--space-5);border-radius:var(--radius-none) var(--radius-indicator) var(--radius-indicator) var(--radius-none);background:var(--text-2)}.battery i{position:absolute;inset:var(--space-2);background:var(--black);border-radius:var(--space-1)}
main{position:absolute;inset:var(--space-44) var(--space-0) auto var(--space-0);height:var(--content-height)}
.hero{position:relative;height:var(--position-gate)}
h1,h2,h3,p{margin:var(--space-0)}
h1{position:absolute;left:var(--space-22);top:var(--position-brand);font-size:var(--font-brand);font-weight:var(--weight-extrabold);letter-spacing:var(--tracking-brand);line-height:var(--line-normal)}
.home-button{position:absolute;right:var(--space-20);top:var(--space-3);width:var(--space-45);height:var(--space-44);border-radius:var(--radius-home);background:var(--primary-soft);display:grid;place-items:center}.home-button svg{width:var(--space-22);height:var(--space-22)}
h2{position:absolute;left:var(--space-22);top:var(--position-greeting);font-size:var(--font-greeting);font-weight:var(--weight-bold);letter-spacing:var(--tracking-greeting);line-height:var(--line-normal)}
.weather{position:absolute;right:var(--space-13);top:var(--position-weather);width:var(--space-90);height:var(--space-40);border-radius:var(--radius-weather);background:var(--surface);box-shadow:var(--shadow-soft);display:flex;align-items:center;justify-content:center;gap:var(--space-6);font-size:var(--font-weather);font-weight:var(--weight-semibold)}
.weather-art{width:var(--space-26);height:var(--space-22);flex:none}
.card{background:var(--surface);border:var(--stroke-thin) solid var(--card-edge);box-shadow:var(--shadow-card)}
.gate{position:absolute;left:var(--space-16);top:var(--position-gate);width:var(--content-width);height:var(--space-57);border-radius:var(--radius-card);padding:var(--space-11) var(--space-6) var(--space-11) var(--space-10);display:flex;align-items:center;gap:0}.gate-icon{width:var(--space-40);height:var(--space-30);flex:none}.swap{width:var(--space-22);height:var(--space-13);margin:var(--space-0) var(--space-11);align-self:center;flex:none}.gate strong{font-size:var(--font-gate-title);letter-spacing:var(--tracking-gate-none);font-weight:700;white-space:nowrap;width:auto;flex:0 1 auto;min-width:0;transform:none}.gate-action{flex:0 0 auto;margin-left:auto;width:var(--space-70);height:var(--space-30);border-radius:var(--radius-pill);background:var(--primary);color:var(--surface);font-size:var(--font-caption);font-weight:var(--weight-semibold)}
.security-grid{position:absolute;left:var(--space-16);top:var(--position-security);display:grid;grid-template-columns:var(--grid-two);gap:var(--space-10)}.security-card{height:var(--space-108);border-radius:var(--radius-card);padding:var(--space-12);display:flex;flex-direction:column;justify-content:space-between}.security-head{display:flex;align-items:center;gap:var(--space-17);padding-left:var(--space-6)}.security-head svg{width:var(--space-26);height:var(--space-26);flex:none}.security-head div{display:flex;flex-direction:column}.security-head strong{font-size:var(--font-card-title);line-height:var(--line-normal)}.security-head span{font-size:var(--font-card-subtitle);font-weight:var(--weight-medium);color:var(--text-2);line-height:var(--line-normal)}.security-action{width:var(--full);height:var(--space-34);border-radius:var(--radius-action);font-size:var(--font-caption);font-weight:var(--weight-semibold)}.lock-action{background:var(--primary-soft)}.alarm-action{background:var(--info-soft);color:var(--info-text)}
.shutters{position:absolute;left:var(--space-16);top:var(--position-shutters);width:var(--content-width)}.shutters h3,.climate h3{font-size:var(--font-section);font-weight:var(--weight-bold);line-height:var(--line-normal);margin-left:var(--space-6)}.shutter-actions{display:grid;grid-template-columns:var(--grid-two);gap:var(--space-10);margin-top:var(--space-13)}.shutter-button{height:var(--space-46);border-radius:var(--radius-button);display:flex;align-items:center;justify-content:center;gap:var(--space-12);font-size:var(--font-shutter);font-weight:var(--weight-semibold)}.shutter-open{background:var(--primary-soft);color:var(--primary-dark)}.shutter-close{background:var(--primary);color:var(--surface)}.double-chevron{position:relative;width:var(--space-20);height:var(--space-18)}.double-chevron:before,.double-chevron:after{content:"";position:absolute;left:var(--space-3);width:var(--space-12);height:var(--space-12);border-left:var(--stroke-control) solid currentColor;border-top:var(--stroke-control) solid currentColor;transform:rotate(var(--angle-quarter))}.double-chevron:before{top:var(--space-1)}.double-chevron:after{top:var(--space-9)}.double-chevron.down{transform:rotate(var(--angle-reverse))}
.climate{position:absolute;left:var(--space-16);top:var(--position-climate);width:var(--content-width)}.climate h3{letter-spacing:var(--tracking-climate)}.climate p{margin-left:var(--space-6);margin-top:var(--space-1);color:var(--text-2);font-size:var(--font-airzone);font-weight:var(--weight-medium)}.room-grid{display:grid;grid-template-columns:var(--grid-two);grid-auto-rows:var(--space-67);gap:var(--space-17) var(--space-10);margin-top:var(--position-room-grid)}.room{background:var(--surface);border:var(--stroke-thin) solid var(--card-edge);box-shadow:var(--shadow-card);border-radius:var(--radius-room);display:flex;align-items:center;padding:var(--space-10);padding-left:var(--space-12);text-align:left}.room-on{background:var(--primary-soft);border-color:var(--transparent);box-shadow:var(--shadow-soft)}.room-off{background:var(--off)}.room.selected{outline:var(--stroke-control) solid var(--primary);outline-offset:calc(var(--stroke-control) * var(--negative-one))}.bed{width:var(--space-32);height:var(--space-22);margin-right:var(--space-14);flex:none}.room-copy{display:flex;flex-direction:column;min-width:var(--space-0);gap:var(--space-5);transform:translateY(calc(var(--space-2) * var(--negative-one)))}.room-copy strong{font-size:var(--font-room);font-weight:var(--weight-bold);line-height:var(--line-normal)}.temperature{font-size:var(--font-room-temperature);font-weight:var(--weight-bold);color:var(--primary-dark);line-height:var(--line-tight)}.temperature span{font-size:var(--degree-scale);vertical-align:baseline}.off-label{font-size:var(--font-off);font-weight:var(--weight-semibold);color:var(--text-2);line-height:var(--line-normal)}.chevron{width:var(--space-9);height:var(--space-16);margin-left:auto;margin-right:var(--space-1);stroke-width:var(--stroke-chevron);stroke-linecap:round;stroke-linejoin:round;flex:none}
.routines{position:absolute;left:var(--space-16);top:var(--position-routines);display:grid;grid-template-columns:var(--grid-two);gap:var(--space-10)}.routines button{height:var(--space-48);border-radius:var(--radius-room);background:var(--surface);border:var(--stroke-thin) solid var(--card-edge);box-shadow:var(--shadow-card);display:flex;align-items:center;padding:var(--space-12);padding-left:var(--space-18);font-size:var(--font-routine);font-weight:var(--weight-semibold)}.routines svg{width:var(--space-22);height:var(--space-22);fill:none;stroke:currentColor;stroke-width:var(--stroke-icon);stroke-linecap:round;stroke-linejoin:round;margin-right:var(--space-20)}.routines .walker{width:var(--space-20);height:var(--space-24);margin-right:var(--space-22)}.routines i{font-style:normal;font-size:var(--space-28);font-weight:var(--weight-medium);margin-left:auto}
.bottom-nav{position:absolute;left:var(--space-0);top:var(--position-nav);width:var(--full);height:var(--space-70);display:grid;grid-template-columns:var(--grid-four);background:var(--bg)}.nav-item{background:var(--transparent);color:var(--text-2);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:var(--space-14);gap:var(--space-4);font-size:var(--font-nav);line-height:var(--line-normal)}.nav-item svg{width:var(--space-26);height:var(--space-26);fill:none;stroke:currentColor;stroke-width:var(--stroke-icon);stroke-linecap:round;stroke-linejoin:round}.nav-item.active{color:var(--primary);font-weight:var(--weight-semibold)}.nav-item .home-fill{fill:currentColor;stroke:none}.nav-item .home-door{fill:var(--bg);stroke:none}.home-indicator{position:absolute;left:var(--position-indicator);bottom:var(--space-16);width:var(--space-134);height:var(--space-5);border-radius:var(--radius-indicator);background:var(--black)}
/* ===== Écran Volets (V01) ===== */
.view[hidden]{display:none}
.detail-head{position:absolute;left:var(--space-0);top:var(--space-0);width:var(--full);padding-top:var(--position-detail-head);text-align:center}
.detail-title{position:static;left:auto;top:auto;font-size:var(--font-detail-title);font-weight:var(--weight-bold);line-height:var(--line-normal);letter-spacing:var(--tracking-greeting)}
.detail-sub{font-size:var(--font-detail-sub);font-weight:var(--weight-medium);line-height:var(--line-normal);color:var(--text-2)}
.back-button{position:absolute;left:var(--space-16);top:var(--position-back);width:var(--space-40);height:var(--space-40);border-radius:var(--radius-home);background:var(--off);display:grid;place-items:center;box-shadow:var(--shadow-soft)}
.back-button svg{width:var(--space-10);height:var(--space-17);fill:none;stroke:currentColor;stroke-width:var(--stroke-control);stroke-linecap:round;stroke-linejoin:round}
.shutter-globals .shutter-open{color:var(--primary-ink)}
.shutter-globals{position:absolute;left:var(--space-16);top:var(--position-shutter-globals);width:var(--content-width);display:grid;grid-template-columns:var(--grid-two);gap:var(--space-10)}
.shutter-globals .shutter-button{height:var(--space-54);font-size:var(--font-global);gap:var(--space-12)}
.btn-tick{display:none;width:var(--space-22);height:var(--space-22);fill:none;stroke:currentColor;stroke-width:var(--stroke-control);stroke-linecap:round;stroke-linejoin:round}
.shutter-button.is-done .double-chevron{display:none}
.shutter-button.is-done .btn-tick{display:block}
.shutter-button[disabled]{opacity:var(--scale-busy);cursor:default}
.shutter-list{position:absolute;left:var(--space-16);top:var(--position-shutter-list);width:var(--content-width);margin:var(--space-0);padding:var(--space-0);list-style:none;display:flex;flex-direction:column;gap:var(--space-14)}
.shutter-card{position:relative;height:var(--space-92);border-radius:var(--radius-card);padding:var(--space-12) var(--space-6) var(--space-0) var(--space-9);display:flex;align-items:flex-start;background:var(--surface);border:var(--stroke-thin) solid var(--card-edge);box-shadow:var(--shadow-card);transition:box-shadow var(--duration-fast),border-color var(--duration-fast)}
.shutter-card.is-moving{border-color:var(--primary)}
.shutter-card.is-done{outline:var(--stroke-control) solid var(--primary);outline-offset:calc(var(--stroke-control) * var(--negative-one))}
.shutter-icon{width:var(--space-35);height:var(--space-31);margin-top:var(--space-13);flex:none;fill:none;stroke:var(--text);stroke-width:var(--stroke-thin);stroke-linecap:round;stroke-linejoin:round}
.shutter-copy{margin-left:var(--space-14);margin-top:var(--space-4);width:var(--space-126);display:flex;flex-direction:column;align-items:flex-start}
.shutter-name{font-size:var(--font-shutter-name);font-weight:var(--weight-bold);line-height:var(--line-height-tight-name);white-space:nowrap}
.shutter-state{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-4);font-size:var(--font-shutter-sub);font-weight:var(--weight-medium);line-height:var(--line-height-tight-name);color:var(--text-2);white-space:nowrap}
.shutter-done-tick{width:var(--space-12);height:var(--space-12);fill:none;stroke:var(--primary);stroke-width:var(--stroke-control);stroke-linecap:round;stroke-linejoin:round;opacity:var(--opacity-hidden);transition:opacity var(--duration-fast)}
.shutter-card.is-done .shutter-done-tick{opacity:var(--opacity-visible)}
.track{display:block;width:var(--space-126);height:var(--space-11);margin-top:var(--space-8);border-radius:var(--radius-track);background:var(--track);overflow:hidden}
.track i{display:block;height:var(--full);width:var(--progress);background:var(--progress-fill);border-radius:var(--radius-track);transition:width var(--duration-move) linear}
.shutter-controls{margin-left:auto;margin-top:var(--space-14);display:flex;gap:var(--space-12);flex:none}
.control{width:var(--space-40);height:var(--space-40);border-radius:var(--radius-action);background:var(--primary-soft);color:var(--text);display:grid;place-items:center;transition:transform var(--duration-fast),background var(--duration-fast),opacity var(--duration-fast)}
.control svg{width:var(--space-21);height:var(--space-13);fill:none;stroke:currentColor;stroke-width:var(--stroke-control);stroke-linecap:round;stroke-linejoin:round}
.stop-glyph{display:block;width:var(--space-14);height:var(--space-14);border:var(--stroke-control) solid currentColor;border-radius:var(--space-1)}
.control[disabled]{opacity:var(--scale-busy);cursor:default}
#view-volets .control:active{background:var(--primary-soft-pressed)}
#view-volets .shutter-globals .shutter-open:active{background:var(--primary-soft-pressed)}
#view-volets .shutter-globals .shutter-close:active{background:var(--primary-dark)}
.clim-rooms{position:absolute;left:var(--space-16);top:var(--position-clim-rooms);width:var(--content-width);display:flex;flex-direction:column;gap:var(--space-12)}
.clim-rooms .room{height:var(--space-67);width:var(--full)}
.section-link{background:var(--transparent);padding:var(--space-0);margin:var(--space-0);font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;display:inline}

/* ============================================================
   Écrans complémentaires — clim détaillée, inscription, pièces,
   scénarios, réglages. Aucune valeur littérale hors jetons.
   ============================================================ */

/* ---------- Boutons communs ---------- */
.btn{display:flex;align-items:center;justify-content:center;width:var(--full);height:var(--button-height);border-radius:var(--radius-input);font-size:var(--font-field);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-gate-none);transition:background var(--duration-fast),transform var(--duration-fast)}
.btn-solid{background:var(--primary);color:var(--surface)}
.btn-solid:active{background:var(--primary-dark)}
.btn-outline{background:var(--surface);color:var(--text);border:var(--stroke-thin) solid var(--border)}
.btn-outline:active{background:var(--off)}
.btn-ghost{background:var(--off);color:var(--text)}
.btn-ghost:active{background:var(--border)}
.btn[disabled]{opacity:var(--scale-busy);cursor:default}
.link-button{background:var(--transparent);font-size:var(--font-field);font-weight:var(--weight-medium);color:var(--text);text-decoration:underline;text-underline-offset:var(--space-3)}
.link-button:active{color:var(--primary-dark)}
.link-button[disabled]{color:var(--text);text-decoration:underline;opacity:var(--opacity-visible);cursor:default}

/* ---------- Écrans d'accueil du parcours ---------- */
.onb-view{bottom:var(--space-0);height:auto}
.onb-head{position:absolute;left:var(--space-0);right:var(--space-0);top:var(--space-20);height:var(--space-44);display:flex;align-items:center;justify-content:center}
.onb-brand{font-size:var(--font-wordmark);letter-spacing:var(--tracking-wordmark);font-weight:var(--weight-medium);color:var(--text)}
.onb-back{position:absolute;left:var(--space-22);top:var(--space-0);width:var(--space-44);height:var(--space-44);background:var(--transparent);display:grid;place-items:center;color:var(--text)}
.onb-back svg{width:var(--icon-lg);height:var(--icon-lg);fill:none;stroke:currentColor;stroke-width:var(--stroke-icon);stroke-linecap:round;stroke-linejoin:round}
.onb-title{position:absolute;left:var(--space-22);right:var(--space-22);top:var(--pos-onb-title);font-size:var(--font-onb-title);font-weight:var(--weight-extrabold);letter-spacing:var(--tracking-greeting);line-height:var(--line-normal)}
.onb-sub{position:absolute;left:var(--space-22);right:var(--space-22);top:var(--pos-onb-sub);font-size:var(--font-onb-sub);font-weight:var(--weight-medium);line-height:var(--line-welcome-sub);color:var(--text-2)}

/* ---------- Bienvenue ---------- */
/* Fond photo des écrans d'authentification (Bienvenue / Inscription) —
   plein cadre, derrière le contenu, hors flux : aucune position ne bouge */
.auth-photo{position:absolute;inset:var(--space-0);overflow:hidden;pointer-events:none}
.auth-photo img{display:block;width:var(--full);height:var(--full);object-fit:cover;object-position:var(--auth-photo-focus)}
.auth-photo:before{content:"";position:absolute;inset:var(--space-0);background:var(--auth-veil-top)}
.auth-photo:after{content:"";position:absolute;inset:var(--space-0);background:var(--auth-veil-bottom)}
.auth-photo-form:before{background:var(--auth-veil-form-top)}
.auth-photo-form:after{background:var(--auth-veil-form-bottom)}
.auth-photo-form img{object-position:var(--auth-photo-focus-form)}
.welcome-logo{position:absolute;left:50%;top:var(--pos-welcome-logo);width:var(--logo-size);height:var(--logo-size);transform:translateX(-50%)}
.wordmark{position:absolute;left:var(--space-0);right:var(--space-0);top:var(--pos-wordmark);text-align:center;font-size:var(--font-wordmark);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wordmark)}
.logo-sub{position:absolute;left:var(--space-0);right:var(--space-0);top:var(--pos-logo-sub);text-align:center;font-size:var(--font-logo-sub);font-weight:var(--weight-medium);color:var(--text-2)}
.welcome-title{position:absolute;left:var(--space-0);right:var(--space-0);top:var(--pos-welcome-title);text-align:center;font-size:var(--font-welcome-title);font-weight:var(--weight-extrabold);letter-spacing:var(--tracking-brand);line-height:var(--line-welcome)}
.welcome-sub{position:absolute;left:var(--space-0);right:var(--space-0);top:var(--pos-welcome-sub);text-align:center;font-size:var(--font-welcome-sub);font-weight:var(--weight-medium);line-height:var(--line-welcome-sub);color:var(--text-2)}
.welcome-actions{position:absolute;left:var(--space-22);right:var(--space-22);top:var(--pos-welcome-cta);display:flex;flex-direction:column;gap:var(--space-14)}
.welcome-actions .btn{box-shadow:var(--shadow-soft)}

/* ---------- Champs ---------- */
.field{position:relative;display:flex;align-items:center;gap:var(--space-16);height:var(--field-height);padding:var(--space-0) var(--space-16);border-radius:var(--radius-field);background:var(--surface);border:var(--stroke-thin) solid var(--border);box-shadow:var(--shadow-field)}
.field:focus-within{border-color:var(--primary);box-shadow:var(--shadow-soft)}
.field-icon{width:var(--icon-md);height:var(--icon-md);flex:none;fill:none;stroke:var(--text-2);stroke-width:var(--stroke-icon);stroke-linecap:round;stroke-linejoin:round}
.field input{flex:1;min-width:var(--space-0);height:var(--full);border:var(--space-0);background:var(--transparent);font-family:inherit;font-size:var(--font-field);color:var(--text);outline:none}
.field input::placeholder{color:var(--text-2)}
.field-action{background:var(--transparent);width:var(--space-32);height:var(--space-32);display:grid;place-items:center;color:var(--text-2);flex:none}
.field-action svg{width:var(--icon-md);height:var(--icon-md);fill:none;stroke:currentColor;stroke-width:var(--stroke-icon);stroke-linecap:round;stroke-linejoin:round}
.field-stack{display:flex;flex-direction:column;gap:var(--space-2);min-width:var(--space-0)}
.field-label{font-size:var(--font-field-label);color:var(--text-2);font-weight:var(--weight-medium)}
.field-value{font-size:var(--font-field-value);font-weight:var(--weight-semibold)}
.field-tall{height:var(--field-height-tall)}

.onb-form{position:absolute;left:var(--space-22);right:var(--space-22);top:var(--pos-signup-fields);display:flex;flex-direction:column;gap:var(--space-19)}
.check-row{display:flex;align-items:flex-start;gap:var(--space-14);margin-top:var(--space-9);cursor:pointer}
.check-row input{position:absolute;opacity:var(--opacity-hidden);width:var(--space-1);height:var(--space-1)}
.check-box{width:var(--space-24);height:var(--space-24);flex:none;border-radius:var(--radius-track);border:var(--stroke-icon) solid var(--border);background:var(--surface);display:grid;place-items:center;margin-top:var(--space-1)}
.check-box svg{width:var(--space-15);height:var(--space-15);fill:none;stroke:var(--surface);stroke-width:var(--weight-semibold);stroke-linecap:round;stroke-linejoin:round;opacity:var(--opacity-hidden)}
.check-row input:checked+.check-box{background:var(--primary);border-color:var(--primary)}
.check-row input:checked+.check-box svg{opacity:var(--opacity-visible)}
.check-text{font-size:var(--font-check);font-weight:var(--weight-medium);line-height:var(--line-welcome-sub);color:var(--text)}
.check-text u{text-underline-offset:var(--space-2)}
#signup-form .check-row{position:absolute;left:var(--space-0);right:var(--space-0);top:var(--pos-signup-check);margin-top:var(--space-0)}
#signup-form .btn-submit{position:absolute;left:var(--space-0);right:var(--space-0);top:var(--pos-signup-submit)}
#login-form .btn-submit{margin-top:var(--space-22)}
.form-hint{font-size:var(--font-note);color:var(--text-2);text-align:center;margin-top:var(--space-10)}
.form-error{margin-top:var(--space-8);font-size:var(--font-note);font-weight:var(--weight-semibold);color:var(--danger);text-align:center}
.forgot{align-self:flex-end;background:var(--transparent);font-size:var(--font-check);font-weight:var(--weight-semibold);color:var(--text);text-decoration:underline;text-underline-offset:var(--space-3);margin-top:var(--space-2)}
.check-row-inline{align-items:center;gap:var(--space-10);margin-top:var(--space-28)}
.check-row-inline .check-text{color:var(--text)}
.faceid{width:var(--icon-lg);height:var(--icon-lg);fill:none;stroke:var(--text-2);stroke-width:var(--stroke-icon);stroke-linecap:round;stroke-linejoin:round;margin-left:var(--space-4)}

/* ---------- Vérification ---------- */
.verif-art{position:absolute;left:50%;top:var(--pos-verif-art);width:var(--space-300);height:var(--space-196);transform:translateX(-50%)}
.verif-art svg{width:var(--full);height:var(--full)}
.code-label{position:absolute;left:var(--space-27);top:var(--pos-verif-label);font-size:var(--font-field);font-weight:var(--weight-semibold)}
.code-row{position:absolute;left:var(--space-27);right:var(--space-22);top:var(--pos-verif-code);display:grid;grid-template-columns:repeat(6,var(--grid-column));gap:var(--space-13)}
.code-box{width:var(--full);height:var(--space-45);border-radius:var(--radius-code);border:var(--stroke-icon) solid var(--border);background:var(--surface);font-family:inherit;font-size:var(--font-field-value);font-weight:var(--weight-bold);text-align:center;color:var(--text);outline:none}
.code-box:focus{border-color:var(--primary);box-shadow:var(--shadow-soft)}
.code-row+.form-error{position:absolute;left:var(--space-22);right:var(--space-22);top:calc(var(--pos-verif-code) + var(--space-52))}
.btn-verif{position:absolute;left:var(--space-22);right:var(--space-22);width:auto;top:var(--pos-verif-submit)}
#verif-resend{position:absolute;left:var(--space-0);right:var(--space-0);top:var(--pos-verif-resend);text-align:center}

/* ---------- Étapes / Ma maison ---------- */
.step-flow{position:absolute;left:var(--space-0);right:var(--space-0);top:var(--pos-house-step);display:flex;align-items:center;justify-content:center}
.step{width:var(--step-dot);height:var(--step-dot);border-radius:var(--radius-pill);display:grid;place-items:center;font-size:var(--font-step);font-weight:var(--weight-semibold);background:var(--surface);border:var(--stroke-thin) solid var(--border);color:var(--text-2)}
.step.is-active{background:var(--primary);border-color:var(--primary);color:var(--surface)}
.step.is-done{background:var(--primary-soft);border-color:var(--primary-soft);color:var(--primary-dark)}
.step.is-done svg{width:var(--space-16);height:var(--space-16);fill:none;stroke:currentColor;stroke-width:var(--stroke-control);stroke-linecap:round;stroke-linejoin:round}
.step-link{width:var(--step-line);height:var(--stroke-thin);background:var(--border);display:block}
.step-link.is-done{background:var(--primary)}
.step-caption{position:absolute;left:var(--space-0);right:var(--space-0);top:var(--pos-house-caption);text-align:center;font-size:var(--font-step);font-weight:var(--weight-medium);color:var(--text-2)}
#view-equipements .step-flow{top:var(--pos-equip-step)}
#view-equipements .step-caption{top:var(--pos-equip-caption)}
.onb-title-house{top:var(--pos-house-title)}
#view-equipements .onb-title-house{top:var(--pos-equip-title)}
#view-equipements .onb-sub{top:var(--pos-equip-sub)}
#view-maison .onb-sub{top:var(--pos-house-sub)}
.field-house{position:absolute;left:var(--space-22);right:var(--space-22)}
#field-house-name{top:var(--pos-house-f1)}
#field-house-tz{top:var(--pos-house-f2);height:var(--field-height-tall)}
#house-name{font-size:var(--font-field)}
.house-art{position:absolute;left:50%;top:var(--pos-house-art);width:var(--space-300);height:var(--space-160);transform:translateX(-50%)}
.house-art svg{width:var(--full);height:var(--full)}
.btn-house{position:absolute;left:var(--space-22);right:var(--space-22);width:auto;top:var(--pos-house-cta)}
#view-equipements .btn-house{top:var(--pos-equip-cta)}
.link-equip{position:absolute;left:var(--space-0);right:var(--space-0);top:var(--pos-equip-skip)}
#maison-continue{cursor:pointer}

/* ---------- Mes équipements ---------- */
.conn-list{position:absolute;left:var(--space-16);right:var(--space-16);top:var(--pos-equip-list);display:flex;flex-direction:column;gap:var(--space-5);list-style:none;margin:var(--space-0);padding:var(--space-0)}
.conn-row{display:flex;align-items:center;gap:var(--space-12);height:var(--space-60);padding:var(--space-0) var(--space-12);border-radius:var(--radius-field);background:var(--surface);border:var(--stroke-thin) solid var(--card-edge);box-shadow:var(--shadow-field)}
.conn-icon{width:var(--space-24);height:var(--space-24);flex:none;fill:none;stroke:var(--text);stroke-width:var(--stroke-icon);stroke-linecap:round;stroke-linejoin:round;object-fit:contain}
.conn-copy{display:flex;flex-direction:column;gap:var(--space-1);min-width:var(--space-0);flex:1}
.conn-copy strong{font-size:var(--font-setting);font-weight:var(--weight-semibold);line-height:var(--line-normal)}
.conn-state{display:flex;align-items:center;gap:var(--space-6);font-size:var(--font-setting-sub);font-weight:var(--weight-medium);color:var(--text-2);line-height:var(--line-normal)}
.dot{width:var(--dot-size);height:var(--dot-size);border-radius:var(--radius-pill);flex:none;display:block;background:var(--dot-off)}
.dot-on{background:var(--primary)}
.dot-warn{background:var(--warning)}
.dot-off{background:var(--dot-off)}
.conn-btn{flex:none;height:var(--space-30);padding:var(--space-0) var(--space-14);border-radius:var(--radius-chip);background:var(--primary-soft);color:var(--primary-ink);font-size:var(--font-scenario-btn);font-weight:var(--weight-semibold)}
.conn-btn:active{background:var(--primary-soft-pressed)}
.onb-note{position:absolute;left:var(--space-22);right:var(--space-22);top:var(--pos-equip-note);text-align:center;font-size:var(--font-note);color:var(--text-2)}

/* ---------- Climatisation ---------- */
.zone-tabs{position:absolute;left:var(--space-16);right:var(--space-16);top:var(--pos-clim-tabs);display:flex;gap:var(--space-10);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.zone-tabs::-webkit-scrollbar{display:none}
.zone-tab{flex:0 0 auto;padding:0 var(--space-14);height:var(--zone-tab);border-radius:var(--radius-chip);background:var(--surface);border:var(--stroke-thin) solid var(--card-edge);color:var(--text);font-size:var(--font-zone-tab);font-weight:var(--weight-semibold);transition:background var(--duration-fast),color var(--duration-fast)}
.zone-tab.is-active{background:var(--primary);border-color:var(--primary);color:var(--surface)}
.zone-tab:active{background:var(--primary-soft-pressed)}
.zone-tab.is-active:active{background:var(--primary-dark)}
.gauge{position:absolute;left:50%;top:var(--pos-clim-gauge);width:var(--gauge-size);height:var(--gauge-size);transform:translateX(-50%)}
.gauge-ring{position:absolute;left:50%;top:var(--gauge-ring-top);width:var(--gauge-ring-size);height:var(--gauge-ring-size);transform:translateX(-50%);overflow:visible}
.gauge-track{fill:none;stroke:var(--track);stroke-width:var(--gauge-stroke);stroke-linecap:round}
.gauge-progress{fill:none;stroke:var(--progress-fill);stroke-width:var(--gauge-stroke);stroke-linecap:round;transition:opacity var(--duration-fast)}
.gauge-dot{fill:var(--surface);stroke:var(--progress-fill);stroke-width:var(--space-6)}
.gauge.is-off .gauge-progress,.gauge.is-off .gauge-dot{stroke:var(--dot-off)}
.gauge-label{position:absolute;left:var(--space-0);right:var(--space-0);top:var(--space-48);text-align:center;font-size:var(--font-gauge-label);font-weight:var(--weight-medium);color:var(--text-2)}
.gauge-value{position:absolute;left:var(--space-0);right:var(--space-0);top:var(--space-72);text-align:center;font-size:var(--font-gauge-value);font-weight:var(--weight-bold);line-height:var(--line-normal);letter-spacing:var(--tracking-greeting)}
.gauge-deg{font-size:var(--degree-scale);font-weight:var(--weight-semibold)}
.gauge.is-off .gauge-value{color:var(--text-2)}
.stepper-row{position:absolute;left:var(--space-0);right:var(--space-0);top:var(--pos-clim-steps);display:flex;align-items:center;justify-content:center;gap:var(--space-58)}
.temp-step{position:static;width:var(--stepper-size);height:var(--stepper-size);border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary-dark);font-size:var(--font-stepper);font-weight:var(--weight-semibold);display:grid;place-items:center;line-height:var(--line-tight);padding-bottom:var(--space-2)}
.temp-step:active{background:var(--primary-soft-pressed)}
.temp-step[disabled]{opacity:var(--scale-busy);background:var(--off);color:var(--text-2)}
.stepper-sep{position:absolute;left:50%;top:50%;width:var(--stroke-thin);height:var(--space-24);background:var(--border);transform:translate(-50%,-50%)}
.ambient-label{position:absolute;left:var(--space-0);right:var(--space-0);top:var(--space-208);text-align:center;font-size:var(--font-ambient);font-weight:var(--weight-medium);color:var(--text-2)}
.ambient-value{position:absolute;left:var(--space-0);right:var(--space-0);top:var(--space-230);text-align:center;font-size:var(--font-room-temperature);font-weight:var(--weight-bold);line-height:var(--line-tight)}
.power-row{position:absolute;left:var(--space-16);right:var(--space-16);top:var(--pos-clim-power);height:var(--space-42);border-radius:var(--radius-zone);background:var(--primary-soft);display:flex;align-items:center;padding:var(--space-0) var(--space-14)}
.power-label{font-size:var(--font-toggle);font-weight:var(--weight-semibold)}
.switch{position:relative;margin-left:auto;width:var(--toggle-width);height:var(--toggle-height);border-radius:var(--radius-toggle);background:var(--track);transition:background var(--duration-fast)}
.switch .knob{position:absolute;top:var(--space-2);left:var(--space-2);width:var(--toggle-knob);height:var(--toggle-knob);border-radius:var(--radius-pill);background:var(--surface);box-shadow:var(--shadow-soft);transition:left var(--duration-move)}
.switch.is-on{background:var(--primary)}
.switch.is-on .knob{left:calc(var(--toggle-width) - var(--toggle-knob) - var(--space-2))}
.modes{position:absolute;left:var(--space-16);right:var(--space-16);top:var(--pos-clim-modes);display:grid;grid-template-columns:repeat(3,var(--grid-column));gap:var(--space-10)}
.mode{height:var(--mode-height);border-radius:var(--radius-zone);background:var(--surface);border:var(--stroke-thin) solid var(--card-edge);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-8);font-size:var(--font-mode);font-weight:var(--weight-medium);color:var(--text)}
.mode svg{width:var(--icon-lg);height:var(--icon-lg);fill:none;stroke:currentColor;stroke-width:var(--stroke-icon);stroke-linecap:round;stroke-linejoin:round}
.mode.is-active{background:var(--primary);border-color:var(--primary);color:var(--surface)}
.mode:active{background:var(--primary-soft-pressed)}
.mode.is-active:active{background:var(--primary-dark)}
.zone-list{position:absolute;left:var(--space-16);right:var(--space-16);top:var(--pos-clim-zones);display:flex;flex-direction:column;gap:var(--space-15);list-style:none;margin:var(--space-0);padding:var(--space-0)}
.zone-row{width:var(--full);height:var(--zone-row);border-radius:var(--radius-zone);background:var(--primary-soft);display:flex;align-items:center;padding:var(--space-0) var(--space-12);text-align:left}
.zone-row.is-off{background:var(--off)}
.zone-row:active{background:var(--primary-soft-pressed)}
.zone-row .bed{width:var(--space-30);height:var(--space-20);margin-right:var(--space-14);flex:none}
.zone-row .zone-copy{display:flex;flex-direction:column;gap:var(--space-1);min-width:var(--space-0)}
.zone-row strong{font-size:var(--font-zone-row);font-weight:var(--weight-bold);line-height:var(--line-normal)}
.zone-row .zone-value{font-size:var(--font-zone-value);font-weight:var(--weight-medium);color:var(--text-2);line-height:var(--line-normal)}
.zone-row .chevron{width:var(--space-9);height:var(--space-16)}

/* ---------- Écrans à onglets (Pièces, Scénarios, Réglages) ---------- */
.tab-view{overflow:hidden}
.tab-head{position:absolute;left:var(--space-16);right:var(--space-16);top:var(--pos-tab-head)}
.tab-title{position:static;font-size:var(--font-tab-title);font-weight:var(--weight-extrabold);letter-spacing:var(--tracking-greeting);line-height:var(--line-normal)}
.tab-sub{margin-top:var(--space-2);font-size:var(--font-onb-sub);font-weight:var(--weight-medium);color:var(--text-2)}
.search-field{position:absolute;left:var(--space-16);right:var(--space-16);top:var(--pos-tab-search);height:var(--space-40);border-radius:var(--radius-search);background:var(--surface);border:var(--stroke-thin) solid var(--border);display:flex;align-items:center;gap:var(--space-10);padding:var(--space-0) var(--space-12)}
.search-field svg{width:var(--icon-sm);height:var(--icon-sm);fill:none;stroke:var(--text-2);stroke-width:var(--stroke-icon);stroke-linecap:round;stroke-linejoin:round;flex:none}
.search-field input{flex:1;min-width:var(--space-0);border:var(--space-0);background:var(--transparent);font-family:inherit;font-size:var(--font-search);color:var(--text);outline:none}
.search-field input::placeholder{color:var(--text-2)}
.room-list{position:absolute;left:var(--space-16);right:var(--space-16);top:var(--pos-tab-list);bottom:var(--space-0);margin:var(--space-0);padding:var(--space-0);list-style:none;display:flex;flex-direction:column;gap:var(--space-10);overflow-y:auto;scrollbar-width:none}
.room-list::-webkit-scrollbar{display:none}
.room-item{border-radius:var(--radius-field);background:var(--surface);border:var(--stroke-thin) solid var(--card-edge);box-shadow:var(--shadow-field);overflow:hidden;flex:none}
.room-row{width:var(--full);height:var(--space-62);display:flex;align-items:center;padding:var(--space-0) var(--space-14);background:var(--transparent);text-align:left}
.room-row:active{background:var(--off)}
.piece-copy{display:flex;flex-direction:column;gap:var(--space-2);min-width:var(--space-0)}
.piece-copy strong{font-size:var(--font-scenario);font-weight:var(--weight-semibold);line-height:var(--line-normal)}
.room-meta{font-size:var(--font-scenario-sub);font-weight:var(--weight-medium);color:var(--text-2)}
.chev{width:var(--icon-sm);height:var(--icon-sm);margin-left:auto;fill:none;stroke:var(--text-2);stroke-width:var(--stroke-icon);stroke-linecap:round;stroke-linejoin:round;transition:transform var(--duration-move);flex:none}
.room-row[aria-expanded="true"] .chev{transform:rotate(var(--angle-reverse))}
.room-detail{padding:var(--space-0) var(--space-14) var(--space-10)}
.room-detail[hidden]{display:none}
.equip-row{display:flex;align-items:center;gap:var(--space-10);height:var(--space-38);border-top:var(--stroke-thin) solid var(--card-edge)}
.equip-row svg,.equip-row img{width:var(--icon-sm);height:var(--icon-sm);fill:none;stroke:var(--text-2);stroke-width:var(--stroke-icon);stroke-linecap:round;stroke-linejoin:round;flex:none;object-fit:contain}
.equip-name{font-size:var(--font-setting-sub);font-weight:var(--weight-medium);color:var(--text)}
.equip-state{margin-left:auto;font-size:var(--font-setting-sub);font-weight:var(--weight-semibold);color:var(--text-2)}
.equip-state.state-off{color:var(--warning)}
.list-empty{position:absolute;left:var(--space-16);right:var(--space-16);top:var(--pos-tab-list);text-align:center;font-size:var(--font-note);color:var(--text-2)}

/* ---------- Scénarios ---------- */
.scenario-list{position:absolute;left:var(--space-16);right:var(--space-16);top:var(--pos-tab-scenarios);margin:var(--space-0);padding:var(--space-0);list-style:none;display:flex;flex-direction:column;gap:var(--space-10)}
.scenario-row{width:var(--full);height:var(--space-80);border-radius:var(--radius-field);background:var(--surface);border:var(--stroke-thin) solid var(--card-edge);box-shadow:var(--shadow-field);display:flex;align-items:center;gap:var(--space-12);padding:var(--space-0) var(--space-12);text-align:left}
.scenario-row:active{background:var(--off)}
.scenario-ico{width:var(--space-40);height:var(--space-40);border-radius:var(--radius-action);background:var(--primary-soft);display:grid;place-items:center;flex:none}
.scenario-ico svg{width:var(--icon-md);height:var(--icon-md);fill:none;stroke:var(--primary-dark);stroke-width:var(--stroke-icon);stroke-linecap:round;stroke-linejoin:round}
.scenario-copy{display:flex;flex-direction:column;gap:var(--space-2);min-width:var(--space-0);flex:1}
.scenario-copy strong{font-size:var(--font-scenario);font-weight:var(--weight-semibold);line-height:var(--line-normal)}
.scenario-copy span{font-size:var(--font-scenario-sub);font-weight:var(--weight-medium);color:var(--text-2);line-height:var(--line-normal);white-space:normal;hyphens:none}
.scenario-go{flex:none;height:var(--space-30);padding:var(--space-0) var(--space-12);border-radius:var(--radius-chip);background:var(--primary-soft);color:var(--primary-ink);font-size:var(--font-scenario-btn);font-weight:var(--weight-semibold);display:grid;place-items:center}
.scenario-row:active .scenario-go{background:var(--primary-soft-pressed)}
.list-note{position:absolute;left:var(--space-22);right:var(--space-22);top:var(--pos-scenario-note);font-size:var(--font-note);color:var(--text-2);text-align:center;line-height:var(--line-welcome-sub)}

/* ---------- Feuille scénario ---------- */
.sheet{position:absolute;inset:var(--space-0);z-index:var(--z-sheet);display:flex;align-items:flex-end}
.sheet[hidden]{display:none}
.sheet-scrim{position:absolute;inset:var(--space-0);background:var(--overlay)}
.sheet-panel{position:relative;width:var(--full);background:var(--bg);border-radius:var(--radius-sheet) var(--radius-sheet) var(--radius-none) var(--radius-none);box-shadow:var(--shadow-sheet);padding:var(--space-10) var(--space-22) var(--space-36);max-height:var(--space-620);display:flex;flex-direction:column}
.sheet-handle{display:block;width:var(--space-40);height:var(--sheet-handle);border-radius:var(--radius-pill);background:var(--border);margin:var(--space-0) auto var(--space-16)}
.sheet-head{display:flex;align-items:center;gap:var(--space-14)}
.sheet-ico{width:var(--space-44);height:var(--space-44);border-radius:var(--radius-action);background:var(--primary-soft);display:grid;place-items:center;flex:none}
.sheet-ico svg{width:var(--icon-md);height:var(--icon-md);fill:none;stroke:var(--primary-dark);stroke-width:var(--stroke-icon);stroke-linecap:round;stroke-linejoin:round}
.sheet-head h2{position:static;font-size:var(--font-sheet-title);font-weight:var(--weight-bold);line-height:var(--line-normal)}
.sheet-head p{font-size:var(--font-scenario-sub);font-weight:var(--weight-medium);color:var(--text-2);line-height:var(--line-normal)}
.sheet-note{margin-top:var(--space-14);font-size:var(--font-note);color:var(--text-2)}
.sheet-steps{margin:var(--space-14) var(--space-0) var(--space-0);padding:var(--space-0);list-style:none;display:flex;flex-direction:column;gap:var(--space-8);overflow-y:auto}
.sheet-step{display:flex;align-items:center;gap:var(--space-12);min-height:var(--space-52);padding:var(--space-8) var(--space-12);border-radius:var(--radius-zone);background:var(--surface);border:var(--stroke-thin) solid var(--card-edge)}
.sheet-step svg,.sheet-step .step-img{width:var(--icon-md);height:var(--icon-md);fill:none;stroke:var(--text-2);stroke-width:var(--stroke-icon);stroke-linecap:round;stroke-linejoin:round;flex:none;object-fit:contain}
.step-copy{display:flex;flex-direction:column;min-width:var(--space-0)}
.step-name{font-size:var(--font-setting);font-weight:var(--weight-medium)}
.step-value{font-size:var(--font-setting-sub);color:var(--text-2);font-weight:var(--weight-medium)}
.step-badge{margin-left:auto;font-size:var(--font-badge);font-weight:var(--weight-semibold);padding:var(--space-4) var(--space-8);border-radius:var(--radius-badge);background:var(--off);color:var(--text-2);white-space:nowrap}
.step-badge.is-run{background:var(--info-soft);color:var(--info-text)}
.step-badge.is-ok{background:var(--primary-soft);color:var(--primary-ink)}
.step-badge.is-warn{background:var(--warning-soft);color:var(--warning)}
.step-badge.is-fail{background:var(--danger-soft);color:var(--danger)}
.sheet-result{margin-top:var(--space-12);font-size:var(--font-note);font-weight:var(--weight-medium);color:var(--text-2)}
.sheet-actions{display:grid;grid-template-columns:repeat(2,var(--grid-column));gap:var(--space-10);margin-top:var(--space-18)}
.sheet-actions .btn{font-size:var(--font-check)}

/* ---------- Réglages ---------- */
.group-label{position:static;margin:var(--space-6) var(--space-0) var(--space-3) var(--space-6);font-size:var(--font-group-label);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-gate);color:var(--text-2);text-transform:uppercase}
.group-card{background:var(--surface);border:var(--stroke-thin) solid var(--card-edge);border-radius:var(--radius-field);box-shadow:var(--shadow-field);overflow:hidden;margin-bottom:var(--space-8)}
.set-row{display:flex;align-items:center;gap:var(--space-14);width:var(--full);min-height:var(--space-44);padding:var(--space-0) var(--space-14);background:var(--transparent);text-align:left;border-bottom:var(--stroke-thin) solid var(--card-edge)}
.set-row:last-child{border-bottom:var(--space-0)}
.set-row:active{background:var(--off)}
.set-row svg{width:var(--icon-md);height:var(--icon-md);fill:none;stroke:var(--text);stroke-width:var(--stroke-icon);stroke-linecap:round;stroke-linejoin:round;flex:none}
.set-row img{width:var(--icon-md);height:var(--icon-md);object-fit:contain;flex:none}
.set-copy{display:flex;flex-direction:column;gap:var(--space-1);min-width:var(--space-0);flex:1}
.set-copy strong{font-size:var(--font-setting);font-weight:var(--weight-medium);line-height:var(--line-normal)}
.set-copy span{font-size:var(--font-setting-sub);color:var(--text-2);font-weight:var(--weight-medium);line-height:var(--line-normal);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-copy .conn-state{font-size:var(--font-setting-sub)}
.set-row .chev{margin-left:auto;stroke:var(--text-2)}
.settings-scroll{position:absolute;left:var(--space-16);right:var(--space-16);top:var(--pos-tab-settings);bottom:var(--space-0);overflow-y:auto;scrollbar-width:none;padding-bottom:var(--space-8)}
.settings-scroll::-webkit-scrollbar{display:none}
.logout{display:flex;align-items:center;justify-content:center;gap:var(--space-10);width:var(--full);height:var(--space-46);border-radius:var(--radius-input);background:var(--primary-soft);color:var(--primary-ink);font-size:var(--font-setting);font-weight:var(--weight-semibold);margin-top:var(--space-4)}
.logout:active{background:var(--primary-soft-pressed)}
.logout svg{width:var(--icon-md);height:var(--icon-md);fill:none;stroke:currentColor;stroke-width:var(--stroke-icon);stroke-linecap:round;stroke-linejoin:round}
.bottom-nav[hidden]{display:none}


/* ============================================================
   Données réelles Home Assistant
   Couleurs d'état pilotées par hvac_action (rouge = chauffe,
   bleu = refroidit, vert = au repos, gris = éteint/indisponible).
   Aucun jeton existant n'est modifié : on surcharge localement
   --progress-fill pour les éléments concernés.
   ============================================================ */

/* Bandeau d'état dégradé (Home Assistant / backend injoignable) */
.ha-banner{position:absolute;left:var(--space-16);right:var(--space-16);top:var(--space-8);z-index:30;padding:var(--space-8) var(--space-12);border-radius:var(--radius-action);background:var(--danger);color:var(--surface);font-size:var(--font-caption);font-weight:var(--weight-semibold);line-height:var(--line-normal);text-align:center;box-shadow:var(--shadow-card)}
.ha-banner[hidden]{display:none}

/* Jauge de consigne : la couleur suit l'action réelle de la zone */
.gauge[data-action="heating"]{--progress-fill:var(--danger)}
.gauge[data-action="cooling"]{--progress-fill:var(--info)}
.gauge[data-action="idle"]{--progress-fill:var(--primary)}
.gauge[data-action="off"],.gauge[data-action="unavailable"]{--progress-fill:var(--dot-off)}

/* Rangées de zones */
.zone-row[data-action="heating"]{background:var(--danger-soft)}
.zone-row[data-action="cooling"]{background:var(--info-soft)}
.zone-row[data-action="idle"]{background:var(--primary-soft)}
.zone-row[data-action="off"]{background:var(--off)}
.zone-row[data-action="unavailable"]{background:var(--off);color:var(--text-2)}
.zone-row[data-action="unavailable"] .zone-value{color:var(--text-2)}

/* Tuiles de l'accueil */
.room[data-action="heating"]{background:var(--danger-soft)}
.room[data-action="cooling"]{background:var(--info-soft)}
.room[data-action="idle"]{background:var(--primary-soft)}
.room[data-action="off"],.room[data-action="unavailable"]{background:var(--off)}
.room[data-action="unavailable"] .temperature,.temperature.is-muted,.off-label.is-muted{color:var(--text-2)}

/* Volets : liste de huit cartes → défilement (la mise en page des cartes est inchangée) */
.shutter-list{bottom:var(--space-0);padding-bottom:var(--space-24);overflow-y:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.shutter-list::-webkit-scrollbar{display:none}
.shutter-name{max-width:var(--full);overflow:hidden;text-overflow:ellipsis}
.track{cursor:pointer}
.shutter-card.is-unavailable{background:var(--off);border-color:var(--card-edge);box-shadow:none}
.shutter-card.is-unavailable .shutter-name,.shutter-card.is-unavailable .shutter-state{color:var(--text-2)}
.shutter-card.is-unavailable .track i{background:var(--dot-off)}
.shutter-card.is-unavailable .control{background:var(--off);color:var(--text-2)}

/* Cartes volets : deux lignes de nom autorisées (noms HA longs), largeur utile élargie
   sans toucher aux commandes ni à la hauteur de carte. */
.shutter-copy{width:var(--space-148)}
.shutter-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:var(--line-height-tight-name)}
.track{width:var(--full)}
.shutter-list{padding-bottom:var(--space-92)}

/* Nom sur deux lignes : on resserre l'interlignage interne pour que la barre
   de position reste dans la carte (hauteur de carte inchangée). */
.shutter-copy{margin-top:var(--space-2)}
.shutter-name{line-height:1.02;letter-spacing:-0.2px}
.shutter-state{margin-top:var(--space-3)}
.track{margin-top:var(--space-6)}

.shutter-card{flex:none}

/* Bandeau : une seule ligne, posé sur la barre d'état (aucun contenu déplacé) */
.ha-banner{top:var(--space-2);padding:var(--space-6) var(--space-10);font-size:var(--font-note);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:var(--line-normal)}
.mode[disabled]{opacity:var(--scale-busy)}
.gauge.is-novalue .gauge-deg{display:none}

.power-row[data-action="heating"]{background:var(--danger-soft)}
.power-row[data-action="cooling"]{background:var(--info-soft)}
.power-row[data-action="off"],.power-row[data-action="unavailable"]{background:var(--off)}

/* ===== PWA : écran de démarrage (le temps de vérifier la session) ===== */
.boot{position:absolute;inset:var(--space-0);z-index:var(--z-boot);background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--boot-gap)}
.boot[hidden]{display:none}
.boot-logo{width:var(--logo-size);height:var(--logo-size)}
.boot-word{margin:var(--space-0);font-size:var(--font-wordmark);font-weight:var(--weight-extrabold);letter-spacing:var(--tracking-wordmark);color:var(--text)}

/* ===== Accueil : état des volets dans le titre de section ===== */
.section-state{margin-left:var(--space-10);font-size:var(--font-section-state);font-weight:var(--weight-semibold);color:var(--text-2);letter-spacing:var(--tracking-gate-none)}

/* ===== Météo : aucune source branchée, valeur neutre ===== */
.weather.is-muted span{color:var(--text-2)}
.weather.is-muted .weather-art{opacity:var(--weather-muted)}

/* ===== Scénarios : liste issue de l'API ===== */
.scenario-list{max-height:var(--scenario-list-max);overflow-y:auto;scrollbar-width:none}
.scenario-list::-webkit-scrollbar{display:none}
.scenario-row[disabled]{opacity:var(--scale-busy)}
.scenario-row[disabled]:active{transform:none}

/* ===== Connexion perdue : plus aucune valeur vive affichée ===== */
.is-offline .security-card{background:var(--off);box-shadow:none}
.is-offline .temperature,.is-offline .shutter-value,.is-offline .zone-value{color:var(--text-2)}

/* ===== Réglages : programmations et membres (données de l'API) ===== */
.prog-row,.member-row{display:flex;align-items:center;gap:var(--space-14);width:var(--full);min-height:var(--space-44);padding:var(--space-6) var(--space-14);border-bottom:var(--stroke-thin) solid var(--card-edge);text-align:left}
.prog-row:last-child,.member-row:last-child{border-bottom:var(--space-0)}
.prog-row svg,.member-row svg{width:var(--icon-md);height:var(--icon-md);fill:none;stroke:var(--text);stroke-width:var(--stroke-icon);stroke-linecap:round;stroke-linejoin:round;flex:none}
.row-copy{display:flex;flex-direction:column;gap:var(--space-2);min-width:var(--space-0)}
.row-copy strong{font-size:var(--font-setting);font-weight:var(--weight-semibold);line-height:var(--line-normal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-copy span{font-size:var(--font-setting-sub);font-weight:var(--weight-medium);color:var(--text-2);line-height:var(--line-normal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-tag{margin-left:auto;flex:none;padding:var(--prog-state-pad-y) var(--prog-state-pad-x);border-radius:var(--radius-badge);background:var(--primary-soft);color:var(--primary-ink);font-size:var(--font-state);font-weight:var(--weight-semibold);white-space:nowrap}
.row-tag.is-off{background:var(--off);color:var(--text-2)}
.group-empty{margin:var(--space-0);padding:var(--space-12) var(--space-14);font-size:var(--font-setting-sub);color:var(--text-2)}

/* ===== Scénarios : libellés sur une ligne (l'API peut être plus bavarde) ===== */
.scenario-copy{min-width:var(--space-0)}
.scenario-copy strong,.scenario-copy span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scenario-go{flex:none}

/* ===== Cartes Nuki / Ajax non branchées : état lisible, pas d'action ===== */
.security-card.is-unavailable{border-color:var(--card-edge)}
.security-card.is-unavailable .security-head strong{color:var(--text-2)}
.security-card.is-unavailable .security-head span{color:var(--text-2)}
.security-action[disabled]{background:var(--off);color:var(--text-2);opacity:var(--opacity-visible);cursor:default;font-weight:var(--weight-medium)}
.security-action[disabled]:active{transform:none}

/* ===== Cadre : plein écran sur téléphone, centré sur les grands écrans ===== */
html,body{width:var(--full);height:var(--full)}
body{display:flex;align-items:flex-start;justify-content:center}

/* ===== Ecran Bienvenue : vraie mise en page fluide sur telephone =====
   Les positions absolues du dessin d'origine sont neutralisees ; le contenu
   se repartit en colonne et occupe toute la largeur, quelle que soit la taille. */
/* ===== Telephone : plein ecran natif, texte net, barre d'onglets en bas ===== */
/* Le cercle se regle au doigt : le glissement ne doit pas faire defiler la page. */
.gauge{touch-action:none;cursor:grab}
.gauge:active{cursor:grabbing}

@media (max-width:767px){
  html,body{width:100%;height:100%;overflow:hidden}
  body{display:block}
  .screen{width:100vw;height:100dvh;max-width:none;max-height:none}
  .view{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:86px}
  .bottom-nav{top:auto;bottom:0;padding-bottom:env(safe-area-inset-bottom)}
  .home-indicator{display:none}
  .statusbar{padding-top:env(safe-area-inset-top);height:calc(var(--space-44) + env(safe-area-inset-top))}
  /* Voile clair derriere les textes : lisibilite sur la photo */
  #view-bienvenue>.auth-photo{z-index:0}
  #view-bienvenue:before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,
      rgba(247,246,242,.92) 0%, rgba(247,246,242,.80) 34%,
      rgba(247,246,242,.35) 58%, rgba(247,246,242,.55) 100%);
  }
  #view-bienvenue>.welcome-logo,
  #view-bienvenue>.wordmark,
  #view-bienvenue>.logo-sub,
  #view-bienvenue>.welcome-title,
  #view-bienvenue>.welcome-title,
  #view-bienvenue>.welcome-sub{position:relative;z-index:2;transform:translateY(-96px)}
  /* Les boutons de l'ecran d'accueil restent ancres en bas, toujours visibles */
  .welcome-actions{
    position:fixed;left:22px;right:22px;top:auto;
    bottom:calc(22px + env(safe-area-inset-bottom));z-index:5;
  }
}
/* Fond d'ambiance des ecrans d'authentification : la meme photo, floutee,
   qui prolonge le cadre jusqu'aux bords de l'ecran. */
html{background:var(--bg)}
body:has(#view-bienvenue:not([hidden])),
body:has(#view-connexion:not([hidden])),
body:has(#view-inscription:not([hidden])),
body:has(#view-verif:not([hidden])){background:transparent}
body:has(#view-bienvenue:not([hidden])):before,
body:has(#view-connexion:not([hidden])):before,
body:has(#view-inscription:not([hidden])):before,
body:has(#view-verif:not([hidden])):before{
  content:"";position:fixed;inset:0;z-index:0;
  background:url(assets/maison-hero.jpg) center/cover no-repeat;
  filter:blur(26px) saturate(1.05);transform:scale(1.2);
}
body:has(#view-bienvenue:not([hidden])) .screen,
body:has(#view-connexion:not([hidden])) .screen,
body:has(#view-inscription:not([hidden])) .screen,
body:has(#view-verif:not([hidden])) .screen{position:relative;z-index:1;box-shadow:0 18px 50px rgba(22,26,21,.16)}

/* iOS affiche deja sa barre d'etat : on ne la double jamais. */
.statusbar time,.statusbar .status-icons{visibility:hidden}

/* ===== Commandes indisponibles (hors ligne, entité absente) ===== */
.routines button[disabled],.gate-action[disabled]{opacity:var(--scale-busy);cursor:default}
.routines button[disabled]:active,.gate-action[disabled]:active{transform:none}

/* Le bouton « Annuler » disparaît vraiment une fois le scénario lancé */
.sheet-actions .btn[hidden]{display:none}

/* ===== Bandeau « nouvelle version » ===== */
.maj-banner{
  position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));
  z-index:60;display:flex;align-items:center;gap:12px;
  background:var(--text);color:var(--surface);
  border-radius:var(--radius-card);padding:12px 14px;
  font-size:var(--font-caption);box-shadow:0 10px 30px rgba(18,22,17,.28);
}
.maj-banner span{flex:1;line-height:1.25}
.maj-banner button{
  flex:none;white-space:nowrap;border:0;border-radius:var(--radius-chip);
  padding:9px 15px;font-weight:var(--weight-semibold);font-size:var(--font-caption);
  background:var(--primary);color:var(--surface);
}