:root{
    --bg:#0b0f14;
    --panel:rgba(10,14,18,.55);
    --panel2:rgba(10,14,18,.40);
    --text:#e8eaf0;
    --muted:#a8afc2;

    --green:rgba(78,224,106,.85);
    --greenSoft:rgba(78,224,106,.55);

    --up:rgba(110,168,255,.35);
    --down:rgba(103,225,162,.28);
    --stop:#ff4a4a;

    --roomH: 420px;          /* hauteur identique pour toutes les pièces */
    --shutterW: 78px;        /* largeur tuile volet (ajuste ici) */
    --btnW: 48px;            /* largeur bouton flèche */
    --btnH: 42px;            /* hauteur bouton flèche */
    --stopSize: 26px;        /* taille stop */

    --topbarH: 72px;         /* hauteur header (pour padding contenu) */
}

*{box-sizing:border-box}
body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

/* Conteneur principal : on laisse la place au header sticky */
.wrap{
    padding:16px;
    padding-top: calc(var(--topbarH) + 16px);
    max-width:1400px;
    margin:0 auto;
}

/* ===== TOPBAR (header privé) ===== */
.topbar{
    position: sticky;
    top: 0;
    z-index: 1000;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:12px 16px;
    background: rgba(11, 18, 32, 0.95);
    border-bottom:1px solid rgba(255,255,255,.06);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.brand{display:flex;gap:10px;align-items:baseline}
.brand strong{font-size:18px}
.brand small{color:var(--muted)}

.right{
    display:flex;
    gap:12px;
    align-items:center;
}

.clock{
    font-variant-numeric:tabular-nums;
    padding:6px 10px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    color:var(--muted);
    white-space:nowrap;
}

.weather{
    opacity:.9;
    color:var(--muted);
    white-space:nowrap;
}

/* ===== page volets ===== */
.volets-wrap{padding:10px 0 30px}

.volets-header{
    display:flex;
    justify-content:center;
    margin:18px 0 22px;
}
.volets-header .title{
    letter-spacing:.18em;
    font-weight:900;
    font-size:30px;
}

/* pièces côte à côte */
.room-grid{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    justify-content:center;
    align-items:flex-start;
}

.room-card{
    height: var(--roomH);
    border:3px solid var(--green);
    border-radius:18px;
    padding:14px;
    background:var(--panel2);
    box-shadow:0 20px 60px rgba(0,0,0,.55);
    display:flex;
    flex-direction:column;
    gap:12px;
    width:max-content;
}

.room-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:18px;
}
.room-name{font-weight:900;font-size:32px;line-height:1}
.room-zone{
    font-weight:900;
    font-size:14px;
    opacity:.75;
    letter-spacing:.08em;
}

/* volets côte à côte dans la pièce */
.shutter-grid{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    align-content:flex-start;
    align-items:flex-start;
}

.shutter-tile{
    border:3px solid var(--green);
    border-radius:16px;
    padding:10px 8px 12px;
    background:var(--panel);
    width:var(--shutterW);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

.shutter-label{
    font-weight:900;
    font-size:12px;
    text-align:center;
    min-height:16px;
    opacity:.95;
}
.shutter-label.empty{opacity:0}

.cmd{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    width:100%;
}

.cmd .txt{
    font-weight:900;
    font-size:12px;
    opacity:.95;
    margin-top:2px;
}

.cmd .arrow{
    width:var(--btnW);
    height:var(--btnH);
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    font-weight:900;
    cursor:pointer;
    user-select:none;
    border:2px solid var(--greenSoft);
    box-shadow:0 10px 25px rgba(0,0,0,.45);
    transition:transform .06s ease, filter .12s ease;
}
.cmd .arrow:active{transform:translateY(1px)}
.cmd .arrow.up{background:var(--up)}
.cmd .arrow.down{background:var(--down)}

.cmd .stopbox{
    width:var(--stopSize);
    height:var(--stopSize);
    border-radius:7px;
    background:var(--stop);
    border:3px solid var(--green);
    cursor:pointer;
    box-shadow:0 10px 25px rgba(0,0,0,.45);
    transition:transform .06s ease, filter .12s ease;
}
.cmd .stopbox:active{transform:translateY(1px)}

.shutter-tile.is-busy{
    opacity:.65;
    filter:saturate(.8);
    pointer-events:none;
}

/* toast */
.toast{
    position:fixed;
    left:50%; bottom:22px;
    transform:translateX(-50%);
    background:rgba(0,0,0,.75);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    padding:10px 14px;
    border-radius:14px;
    font-weight:900;
    opacity:0;
    pointer-events:none;
    transition:.2s;
    z-index:9999;
}
.toast.on{opacity:1; transform:translateX(-50%) translateY(-6px)}