:root {
    /* ===== Veilleuse — « la nuit est bleue, la lumière est chaude » ===== */
    --bg: #0E1116;             /* nuit : le sol de tout */
    --bg-elev: #131821;        /* fumée : élévation 1 */
    --card: #1A2029;           /* carte : élévation 2 */
    --card-hi: #222A36;        /* chips, contrôles : élévation 3 */
    --text: #F5EFE6;           /* craie */
    --muted: #9A9184;          /* cendre */
    --muted-2: #978F82;        /* cendre sombre — ≥ 4,5:1 sur TOUTES les surfaces (--card-hi 4,52:1) */
    --accent: #E9B168;         /* lampe : chaleur physique (lumières, chauffage) */
    --accent-soft: rgba(233, 177, 104, 0.12);
    --lueur: #6BA6FF;          /* le bleu de l'orbe : interactif / média */
    --lueur-fond: rgba(107, 166, 255, 0.13);
    --line: rgba(245, 239, 230, 0.09);
    --line-forte: rgba(245, 239, 230, 0.15);
    --ok: #7FB894;             /* feuille */
    --err: #C75B4A;            /* braise : pastilles, bordures, fonds (pas du texte : 3,9:1) */
    --err-text: #DE7563;       /* braise lisible en TEXTE — ≥ 4,5:1 sur toutes les surfaces */
    /* Jetons de contraste (rassemblent les gris et teintes ad hoc) */
    --lueur-bord: rgba(107, 166, 255, 0.45);   /* bordure d'un élément sélectionné */
    --accent-bord: rgba(233, 177, 104, 0.3);
    --on-accent: #1A1100;      /* texte sur ambre (12:1) */
    --on-lueur: #0E1116;       /* texte sur bleu d'orbe (7,7:1) */
    --off: #3A4151;            /* pastille « éteint » (décoratif) */
    --scrim: rgba(5, 7, 10, 0.6);
    --focus: #6BA6FF;          /* anneau de focus clavier */
    --skel: rgba(245, 239, 230, 0.06);
    --skel-hi: rgba(245, 239, 230, 0.12);
    --heat: #E9B168;
    --yt: #ff4d4d;
    --cool: #6BA6FF;
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bot: env(safe-area-inset-bottom, 0px);
    --header-h: calc(54px + var(--safe-top));
    --tabbar-h: calc(60px + var(--safe-bot));
    --dock-h: var(--tabbar-h);           /* + mini-lecteur quand il est visible */
  }
  body.has-mini { --dock-h: calc(var(--tabbar-h) + 68px); }
  /* Sur Flux, le mini-lecteur doublonne la carte ; sur la Manette il mange
     l'écran : masqué (et le dock reprend sa hauteur de barre seule). */
  body.has-mini[data-tab="flux"], body.has-mini[data-tab="plus"][data-sub="manette"] { --dock-h: var(--tabbar-h); }
  body[data-tab="flux"] .mini, body[data-tab="plus"][data-sub="manette"] .mini { display: none !important; }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text);
    font: 15px/1.45 var(--sans);
    overscroll-behavior-y: contain; }
  body { min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; }
  /* Les contrôles natifs n'héritent pas de la police : sans ceci, tout bouton
     sans classe dédiée s'affichait en Arial. */
  button, input, select, textarea { font: inherit; }
  /* Seules 400/500/600 sont chargées : 700 donnait un faux gras synthétisé. */
  b, strong, th { font-weight: 600; }
  ::selection { background: rgba(107, 166, 255, 0.35); }

  /* ===== Header ===== */
  .app-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 20;
    background: rgba(14, 17, 22, 0.85);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    padding: var(--safe-top) 8px 0;
    height: var(--header-h);
    /* En-tête à la iOS : ‹ retour | petit titre CENTRÉ | actions. */
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
    border-bottom: 1px solid transparent; transition: border-color .2s, background .2s;
  }
  body.hdr-compact .app-header { border-bottom-color: var(--line); }
  .hdr-left { display: flex; align-items: center; min-width: 0; }
  .hdr-back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; min-width: 44px;
    padding: 0 8px 0 2px; background: none; border: 0; color: var(--lueur); cursor: pointer;
    font: 600 15px var(--sans); border-radius: 10px; }
  .hdr-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; }
  .hdr-back[hidden] { display: none; }
  /* Le petit titre n'apparaît qu'une fois le GRAND titre de la page passé sous l'en-tête. */
  .app-title { font-family: var(--serif); font-size: 17px; font-weight: 500;
    letter-spacing: -0.01em; text-align: center; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 52vw; opacity: 0; transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease; }
  body.hdr-compact .app-title { opacity: 1; transform: none; }
  .header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding-right: 8px; }
  #refresh-btn { background: none; border: none; color: var(--muted); cursor: pointer;
    font-size: 18px; padding: 0; line-height: 1;
    transition: color 0.15s, transform 0.4s; }
  #refresh-btn:active, #refresh-btn:hover { color: var(--lueur); }
  #refresh-btn.spinning { animation: rb-spin 0.8s linear; color: var(--lueur); }
  /* Resync du magasin d'état en cours : tourne tant que le serveur relit tout. */
  #refresh-btn.syncing { animation: rb-spin 0.8s linear infinite; color: var(--lueur); }
  @keyframes rb-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
  #status { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
  #status::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--muted); transition: background 0.2s; }
  #status.ok::before { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
  #status.err::before { background: var(--err); box-shadow: 0 0 6px var(--err); }
  #status.busy::before { background: var(--lueur); animation: pulse 1.2s infinite; }
  @keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
  /* Point de connexion : en direct (SSE) · relevé périodique · hors ligne */
  #status.live::before { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
  #status.poll::before { background: var(--accent); }
  #status.off::before { background: var(--err); box-shadow: 0 0 6px var(--err); }
  #status.live.busy::before, #status.poll.busy::before { background: var(--lueur); animation: pulse 1.2s infinite; }

  /* ===== Toasts : retour d'action en français, au-dessus du dock ===== */
  #toasts { position: fixed; left: 12px; right: 12px; z-index: 60;
    bottom: calc(var(--dock-h) + 30px); display: flex; flex-direction: column-reverse;
    align-items: center; gap: 8px; pointer-events: none; }
  .toast { pointer-events: auto; max-width: 520px; width: fit-content;
    display: flex; align-items: center; gap: 12px;
    background: var(--card-hi); color: var(--text); border: 1px solid var(--line-forte);
    border-radius: 14px; padding: 11px 14px; font-size: 14px; line-height: 1.35;
    box-shadow: 0 8px 28px rgba(0,0,0,.5);
    opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s; }
  .toast.on { opacity: 1; transform: none; }
  .toast::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--lueur); }
  .toast.ok::before { background: var(--ok); }
  .toast.err { border-color: rgba(199, 91, 74, .55); }
  .toast.err::before { background: var(--err); }
  .toast .t-msg { flex: 1; }
  .toast .t-act { flex: 0 0 auto; background: none; border: 0; color: var(--lueur);
    font: 600 14px var(--sans); padding: 4px 2px; cursor: pointer; }
  .toast .t-act:disabled { opacity: .5; }
  @media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

  /* Bandeau « Hors ligne » : SSE ET relevés en échec */
  .offline-bar { position: fixed; left: 12px; right: 12px; z-index: 44;
    top: calc(var(--header-h) + 8px); display: none;
    background: var(--card-hi); color: var(--text); border: 1px solid var(--err);
    border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.4;
    box-shadow: 0 6px 24px rgba(0,0,0,.5); }
  .offline-bar.show { display: block; }
  .offline-bar b { color: var(--err-text); }

  /* ===== Main ===== */
  .app-main {
    /* Le bas doit passer SOUS le dock (barre + mini-lecteur) sur tous les
       onglets — sinon les derniers contrôles se cachent derrière. */
    padding: calc(var(--header-h) + 8px) 0 calc(var(--dock-h) + 120px);
    max-width: 720px; margin: 0 auto;
  }
  .tab { display: none; padding: 0 14px; }
  .tab.active { display: block; animation: fadeIn 0.2s ease; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  .section-title { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase;
    letter-spacing: 1.2px; margin: 14px 4px 8px; }
  .section { margin-bottom: 22px; }

  /* ===== Dock : mini-lecteur + barre d'onglets ===== */
  .dock { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
    display: flex; flex-direction: column; }
  .mini {
    margin: 0 10px 8px; border-radius: 18px; max-width: 700px; width: calc(100% - 20px);
    align-self: center;
    background-color: rgba(16, 20, 27, 0.96);
    background-image: linear-gradient(120deg, var(--mini-tint, rgba(107,166,255,.12)), rgba(107,166,255,.04) 55%, rgba(26,32,41,.96));
    border: 1px solid var(--line-forte);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    display: none; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; cursor: pointer;
  }
  body.has-mini .mini { display: flex; }
  .mini:active { transform: scale(0.985); }
  .mini .mini-cover { width: 38px; height: 38px; border-radius: 10px; flex: none;
    object-fit: cover; background: linear-gradient(135deg, #3A3F49 0%, #171B22 70%);
    display: grid; place-items: center; font-size: 17px; }
  .mini .mini-meta { flex: 1; min-width: 0; }
  .mini .mini-t { font-size: 13px; font-weight: 600; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .mini .mini-s { font-size: 11.5px; color: var(--muted); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .mini button { background: none; border: 0; padding: 6px; cursor: pointer;
    color: var(--text); display: grid; place-items: center; font-size: 20px;
    line-height: 1; min-width: 40px; min-height: 40px; }
  .tabbar {
    position: relative;
    height: var(--tabbar-h);
    padding: 6px 6px var(--safe-bot);
    /* 2 | orbe | 2 : quatre onglets de même largeur, l'orbe au centre EXACT. */
    display: grid; grid-template-columns: 1fr 1fr 76px 1fr 1fr;
    max-width: 720px; width: 100%; margin: 0 auto;
  }
  .dock { background: none; }
  .dock::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--tabbar-h);
    background: rgba(14, 17, 22, 0.92); border-top: 1px solid var(--line); z-index: -1;
    backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); }
  .tabbar button {
    background: none; border: none; color: var(--muted-2); padding: 4px 0; min-height: 48px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 10px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer;
    transition: color 0.15s; -webkit-touch-callout: none; font-family: inherit;
  }
  .tabbar button svg { width: 22px; height: 22px; stroke-width: 1.7; transition: transform 0.15s; }
  .tabbar button.active { color: var(--lueur); }
  .tabbar button:active svg { transform: scale(0.9); }

  /* ===== Scenes ===== */
  .scenes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .scene-btn { position: relative; background: var(--card); border: 1px solid var(--line); color: var(--text);
    padding: 14px 14px 14px 14px; border-radius: 14px; font-size: 14px; font-weight: 500; cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s; text-align: left; }
  .scene-btn:active { transform: scale(0.97); border-color: var(--accent); }
  .scene-btn.user { border-color: var(--accent-soft); }
  .scene-btn .del { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px;
    border: none; background: transparent; color: var(--muted); font-size: 16px; line-height: 1;
    border-radius: 50%; cursor: pointer; display: none; padding: 0; }
  .scene-btn.user .del { display: block; }
  .scene-btn .del:active { background: var(--err); color: #fff; }
  .scene-add { background: transparent; border: 1px dashed var(--line); color: var(--muted);
    padding: 14px; border-radius: 14px; font-size: 14px; cursor: pointer; }
  .scene-add:active { border-color: var(--accent); color: var(--accent); }

  /* ===== Lights list ===== */
  .room { background: var(--card); border-radius: 16px; margin-bottom: 10px; overflow: hidden; }
  .room-name { padding: 12px 16px; font-weight: 600; font-size: 12px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.8px; border-bottom: 1px solid var(--line); }
  .light { display: grid; grid-template-columns: 28px 1fr 56px; gap: 12px; align-items: center;
    padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .light:last-child { border-bottom: none; }
  .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--off);
    transition: background 0.15s, box-shadow 0.15s; }
  .light.on .dot { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
  .light-name { font-size: 15px; }
  .light-pct { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; font-size: 13px; }
  .slider-row { grid-column: 1 / -1; padding-top: 6px; }

  /* ===== Range inputs (mobile-friendly) ===== */
  input[type="range"] { width: 100%; -webkit-appearance: none; appearance: none;
    background: transparent; height: 32px; }
  /* Piste remplie jusqu'au pouce : --fill posé par paintRange() (JS). */
  input[type="range"] { --fill: 0%; --fc: rgba(233, 177, 104, 0.55); }
  input[type="range"].blue { --fc: rgba(107, 166, 255, 0.55); }
  input[type="range"]::-webkit-slider-runnable-track {
    height: 6px; border-radius: 3px;
    background: linear-gradient(to right, var(--fc) 0 var(--fill), var(--line-forte) var(--fill) 100%); }
  input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--fc); }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 26px; height: 26px; border-radius: 50%; background: var(--accent);
    margin-top: -10px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
  input[type="range"]::-moz-range-track { height: 6px; background: var(--line); border-radius: 3px; }
  input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border: none; border-radius: 50%;
    background: var(--accent); cursor: pointer; }

  .light .toggle { width: 28px; height: 28px; border: none; padding: 0; background: transparent;
    cursor: pointer; }

  /* ===== Cards (thermostat / blind / room) ===== */
  .cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
  @media (min-width: 560px) { .cards { grid-template-columns: 1fr 1fr; } }
  .card { background: var(--card); border-radius: 16px; padding: 14px 16px; }
  .card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
  .card-title { font-weight: 600; font-size: 16px; }
  .card-state { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; }
  .card-state.heat { color: var(--heat); }
  .card-state.cool { color: var(--cool); }
  .card-state.fan  { color: var(--ok); }
  .card-state.on   { color: var(--accent); }

  /* ===== Thermostat ===== */
  .therm-temp { font-size: 36px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
  .therm-temp small { font-size: 16px; color: var(--muted); margin-left: 4px; font-weight: 400; }
  .therm-meta { font-size: 12px; color: var(--muted); margin: 4px 0 12px; }
  .setpoint-row { display: grid; grid-template-columns: 80px 1fr auto; gap: 8px;
    align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
  .setpoint-row:first-of-type { border-top: none; padding-top: 8px; }
  .setpoint-label { font-size: 12px; color: var(--muted); }
  .setpoint-val { font-size: 16px; font-variant-numeric: tabular-nums; text-align: center; font-weight: 500; }
  .stepper { display: flex; gap: 4px; }
  .stepper button { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line);
    background: var(--card-hi); color: var(--text); font-size: 18px; cursor: pointer; padding: 0;
    transition: border-color 0.15s, transform 0.1s; }
  .stepper button:active { transform: scale(0.92); border-color: var(--accent); }
  .selector { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
  .selector button { background: var(--card-hi); border: 1px solid var(--line); color: var(--text);
    padding: 7px 12px; border-radius: 10px; font-size: 12px; cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s; }
  .selector button.active { background: var(--lueur-fond);
    border-color: var(--lueur-bord); color: var(--lueur); font-weight: 600; }
  .selector button:active { transform: scale(0.94); }

  /* ===== Blinds ===== */
  .blind-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 10px; }
  .blind-actions button { background: var(--card-hi); border: 1px solid var(--line); color: var(--text);
    padding: 9px; border-radius: 10px; font-size: 12px; cursor: pointer;
    transition: border-color 0.15s, transform 0.1s; font-weight: 500; }
  .blind-actions button:active { transform: scale(0.96); border-color: var(--accent); }
  .blind-level-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
  .blind-level-row input[type="range"] { flex: 1; }
  .blind-pct { font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; font-weight: 500; }

  /* ===== Sleep timer ===== */
  .sleep-tile { background: var(--card); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
  .sleep-active { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 0; }
  .sleep-countdown { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 16px; color: var(--lueur); }
  .sleep-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
  .sleep-options button { background: var(--card-hi); border: 1px solid var(--line); color: var(--text);
    padding: 9px 0; border-radius: 10px; font-size: 13px; cursor: pointer; font-weight: 500;
    transition: border-color 0.15s, transform 0.1s; }
  .sleep-options button:active { transform: scale(0.94); border-color: var(--accent); }
  .sleep-cancel { background: var(--card-hi); border: 1px solid var(--err); color: var(--err-text);
    padding: 7px 14px; border-radius: 10px; font-size: 13px; cursor: pointer; font-weight: 500; }

  /* ===== Doorbell events ===== */
  .db-event-card { display: grid; grid-template-columns: 80px 1fr; gap: 12px;
    padding: 8px 0; border-top: 1px solid var(--line); align-items: center; }
  .db-event-card:first-child { border-top: none; }
  .db-thumb { width: 80px; height: 60px; object-fit: cover; border-radius: 8px;
    background: var(--line); cursor: pointer; transition: transform 0.1s; }
  .db-thumb:active { transform: scale(0.96); }
  .db-event-info { min-width: 0; }
  .db-event-title { font-size: 14px; font-weight: 500; }
  .db-event-time { font-size: 12px; color: var(--muted); margin-top: 2px; }

  /* ===== Home tab ===== */
  .home-greeting { font-size: 22px; font-weight: 600; padding: 8px 4px 12px; }
  .home-greeting small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 2px; }
  .home-tile { background: var(--card); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
  .home-tile-head { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 8px; }
  .home-tile-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
  .home-tile-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--card-hi);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--muted); }
  .home-tile-icon.on { background: var(--accent); color: var(--on-accent); }
  /* Accueil : l'ampoule d'une lumière allumée est un BOUTON (éteindre) — même
     pastille de 28 px ; zone tactile élargie à 44 px sans changer le visuel. */
  button.home-tile-icon { border: 0; padding: 0; font: inherit; cursor: pointer;
    display: grid; place-items: center; position: relative; flex: none; }
  button.home-tile-icon::before { content: ""; position: absolute; inset: -8px; }
  .hl-slide { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
  .hl-slide[role="slider"] { touch-action: pan-y; cursor: ew-resize; }
  .hl-row[hidden] { display: none; }
  .home-tile-icon.heat { background: rgba(255, 138, 77, 0.15); color: var(--heat); }
  .home-tile-icon.cool { background: rgba(77, 196, 255, 0.15); color: var(--cool); }
  .home-tile-row .label { flex: 1; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
  .home-tile-row .sub { font-size: 12px; color: var(--muted); }
  .home-tile-row .val { font-variant-numeric: tabular-nums; font-weight: 500; font-size: 13px; }
  .home-event { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center;
    padding: 8px 0; border-top: 1px solid var(--line); }
  .home-event:first-child { border-top: none; }
  .home-event .ev-time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
  .home-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .home-action { flex: 1; min-width: 110px; background: var(--card); border: 1px solid var(--line);
    color: var(--text); padding: 14px; border-radius: 14px; cursor: pointer; font-size: 14px; font-weight: 500;
    transition: border-color 0.15s, transform 0.1s; }
  .home-action:active { transform: scale(0.97); border-color: var(--accent); }
  .home-action.danger:active { border-color: var(--err-text); }

  /* ===== Audio rooms ===== */
  .audio-card-meta { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
  .audio-volume-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
  .audio-vol-pct { min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
  .audio-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
  .audio-actions button { background: var(--card-hi); border: 1px solid var(--line); color: var(--text);
    padding: 7px 12px; border-radius: 10px; font-size: 12px; cursor: pointer; flex: 1; min-width: 80px;
    transition: border-color 0.15s, transform 0.1s; font-weight: 500; }
  .audio-actions button.danger { color: var(--err-text); }
  .audio-actions button.active { background: var(--lueur-fond);
    border-color: var(--lueur-bord); color: var(--lueur); }
  .audio-actions button:active { transform: scale(0.96); }
  .empty-msg { color: var(--muted); padding: 20px; text-align: center; font-size: 14px; }

  /* Now Playing inside a room card */
  .now-playing { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center;
    padding: 10px; margin: 8px 0 4px; border-radius: 12px; background: var(--bg-elev); }
  .np-cover { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--line); }
  .np-cover-ph { display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: var(--muted);
    background: linear-gradient(140deg, var(--lueur-fond), var(--card-hi)); }
  .np-info { min-width: 0; overflow: hidden; }
  .np-title { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .np-artist { font-size: 12px; color: var(--muted); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .np-playlist { font-size: 11px; color: var(--accent); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ===== Spotify queue list ===== */
  .queue-list { background: var(--card); border-radius: 14px; overflow: hidden; }
  .queue-row { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center;
    padding: 8px 12px; border-top: 1px solid var(--line); font-size: 13px; }
  .queue-row:first-child { border-top: none; }
  .queue-row img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; background: var(--line); }
  .queue-row .qr-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .queue-row .qr-artist { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .queue-empty { color: var(--muted); padding: 16px; text-align: center; font-size: 13px; }

  /* Spotify section */
  .sp-header { background: var(--card); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .sp-status { flex: 1 1 100%; font-size: 13px; min-width: 0; }
  .sp-status .ok { color: #1db954; font-weight: 600; }
  .sp-action { background: #1db954; color: #000; border: none; padding: 9px 12px; border-radius: 10px;
    font-size: 13px; font-weight: 600; cursor: pointer; flex: 1; min-width: 0; }
  .sp-action:active { transform: scale(0.96); }
  .sp-action.secondary { background: var(--card-hi); color: var(--text); border: 1px solid var(--line); }
  .sp-device-row { background: var(--card); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
  .sp-device-row select { width: 100%; background: var(--card-hi); color: var(--text);
    border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
  .sp-transport { display: flex; gap: 8px; margin-top: 10px; }
  .sp-transport button { flex: 1; background: var(--card-hi); border: 1px solid var(--line);
    color: var(--text); padding: 10px; border-radius: 10px; font-size: 14px; cursor: pointer; }
  .sp-transport button:active { transform: scale(0.96); border-color: var(--accent); }
  .sp-search { background: var(--card); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px;
    display: flex; gap: 8px; align-items: center; }
  .sp-search input { flex: 1; background: var(--card-hi); color: var(--text);
    border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 14px; }
  .sp-search input:focus { outline: none; border-color: #1db954; }
  .sp-search button { background: var(--card-hi); border: 1px solid var(--line); color: var(--muted);
    padding: 9px 12px; border-radius: 10px; font-size: 12px; cursor: pointer; }
  .sp-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
  .sp-tabs button { background: var(--card-hi); border: 1px solid var(--line); color: var(--muted);
    padding: 6px 12px; border-radius: 8px; font-size: 12px; cursor: pointer; font-weight: 500; }
  .sp-tabs button.active { background: var(--lueur-fond);
    border-color: var(--lueur-bord); color: var(--lueur); }
  .sp-playlists { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .sp-playlist { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 10px; cursor: pointer; position: relative; overflow: hidden;
    transition: border-color 0.15s, transform 0.1s; }
  .sp-playlist:active { transform: scale(0.97); border-color: #1db954; }
  .sp-playlist.pending { opacity: 0.55; pointer-events: none; }
  .sp-playlist.queued::after {
    content: "Ajouté à la file";
    position: absolute; inset: 0;
    background: rgba(29, 185, 84, 0.95); color: #000;
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-weight: 600; font-size: 13px; padding: 8px;
    animation: queueFlash 1.6s ease forwards;
    pointer-events: none;
  }
  @keyframes queueFlash {
    0%   { opacity: 0; transform: scale(1.05); }
    15%  { opacity: 1; transform: scale(1); }
    80%  { opacity: 1; }
    100% { opacity: 0; }
  }
  .sp-playlist img { width: 100%; aspect-ratio: 1; border-radius: 8px; background: var(--line);
    object-fit: cover; display: block; }
  .sp-pl-name { font-size: 12px; font-weight: 600; margin-top: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp-pl-count { font-size: 11px; color: var(--muted); margin-top: 2px; }
  button[disabled] { opacity: 0.35; pointer-events: none; }

  /* ===== Colors ===== */
  .colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
  .color-btn { display: flex; align-items: center; gap: 10px;
    background: var(--card); border: 1px solid var(--line); color: var(--text);
    padding: 11px 12px; border-radius: 12px; font-size: 13px; cursor: pointer;
    transition: border-color 0.15s, transform 0.1s; }
  .color-btn:active { transform: scale(0.96); border-color: var(--accent); }
  .swatch { width: 24px; height: 24px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15); flex-shrink: 0; }

  /* ===== Beat sync (mic) ===== */
  .beat-card { background: var(--card); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
  .beat-row { display: flex; align-items: center; gap: 12px; }
  .beat-toggle { flex: 1; background: var(--card-hi); border: 1px solid var(--line); color: var(--text);
    padding: 14px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background 0.2s, border-color 0.2s; }
  .beat-toggle.active { background: var(--lueur-fond); color: var(--lueur);
    border-color: var(--lueur-bord); }
  .beat-indicator { width: 28px; height: 28px; border-radius: 50%; background: var(--line);
    transition: background 0.05s, transform 0.08s; flex-shrink: 0; }
  .beat-indicator.pulse { background: var(--accent); transform: scale(1.25); }
  .beat-sensitivity { display: grid; grid-template-columns: 90px 1fr 40px; gap: 8px; align-items: center;
    padding: 10px 0 4px; border-top: 1px dashed var(--line); margin-top: 12px; }
  .beat-sensitivity small { font-size: 12px; color: var(--muted); }

  /* ===== Speed selector ===== */
  .speed-row { display: grid; grid-template-columns: 70px repeat(4, 1fr); gap: 6px;
    background: var(--card); border-radius: 14px; padding: 10px 12px; align-items: center;
    margin-bottom: 10px; }
  .speed-label { font-size: 12px; color: var(--muted); }
  .speed-row button { background: var(--card-hi); border: 1px solid var(--line); color: var(--text);
    padding: 8px 0; border-radius: 8px; font-size: 12px; cursor: pointer; font-weight: 500;
    transition: background 0.15s, border-color 0.15s, transform 0.1s; }
  .speed-row button.active { background: var(--lueur-fond);
    border-color: var(--lueur-bord); color: var(--lueur); }
  .speed-row button:active { transform: scale(0.94); }

  /* ===== Modes (transitions) ===== */
  .modes { background: var(--card); border-radius: 16px; padding: 6px 14px; }
  .mode-row { display: flex; align-items: center; gap: 10px; padding: 12px 4px;
    border-bottom: 1px solid var(--line); }
  .mode-row:last-child { border-bottom: none; }
  .mode-label { flex: 1; font-size: 14px; }
  .mode-row.active .mode-label { color: var(--lueur); font-weight: 600; }
  .mode-btn { background: var(--card-hi); border: 1px solid var(--line); color: var(--text);
    padding: 8px 14px; border-radius: 10px; font-size: 13px; cursor: pointer; min-width: 92px;
    font-weight: 500; transition: background 0.15s, border-color 0.15s, transform 0.1s; }
  .mode-btn.active { background: var(--lueur-fond);
    border-color: var(--lueur-bord); color: var(--lueur); }
  .mode-btn:active { transform: scale(0.96); }
  .pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent); margin-right: 8px; animation: pulse 1.4s ease-in-out infinite; }

  /* ===== RGB manuel ===== */
  .rgb-zone { background: var(--card); border-radius: 16px; padding: 16px; margin-bottom: 10px; }
  .rgb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .rgb-head .rgb-label { font-weight: 600; }
  .rgb-head .rgb-swatch { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); }
  .rgb-wheel-wrap { display: flex; justify-content: center; padding: 8px 0; }
  .master-row { display: grid; grid-template-columns: 70px 1fr 44px; gap: 8px;
    align-items: center; padding: 10px 0 4px;
    border-top: 1px dashed var(--line); }
  .master-label { color: var(--accent); font-weight: 600; font-size: 13px; }
  .rgb-channels { display: grid; grid-template-columns: 24px 1fr 44px; gap: 8px; align-items: center;
    margin-bottom: 4px; font-size: 12px; }
  .rgb-channels:last-child { margin-bottom: 0; }
  .ch-label { color: var(--muted); font-weight: 500; }

  /* ===== Blanc variable (DMX tunable-white) ===== */
  .white-row { display: grid; grid-template-columns: 70px 1fr 44px; gap: 8px;
    align-items: center; padding: 6px 0; }
  .white-row .master-label { color: var(--accent); }
  /* Piste du curseur température : dégradé chaud → froid pour lire d'un coup. */
  /* Zone tactile de 32 px ; la piste dégradée (6 px) est dessinée DANS
     l'input — toucher à côté de la piste ne rate plus (ronde 3). */
  input.white-temp { background: transparent; height: 32px; -webkit-appearance: none; appearance: none; }
  input.white-temp::-webkit-slider-runnable-track { height: 6px; border-radius: 3px;
    background: linear-gradient(90deg, #ffb15c 0%, #fff3e0 45%, #dbeaff 70%, #aecbff 100%); }
  input.white-temp::-moz-range-track { height: 6px; border-radius: 3px;
    background: linear-gradient(90deg, #ffb15c 0%, #fff3e0 45%, #dbeaff 70%, #aecbff 100%); }
  input.white-temp::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; border-radius: 50%; background: #fff; margin-top: -7px;
    border: 2px solid rgba(107,166,255,0.85); box-shadow: 0 2px 6px rgba(0,0,0,.45); cursor: pointer; }
  input.white-temp::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%;
    background: #fff; border: 2px solid rgba(107,166,255,0.85); cursor: pointer; }
  .white-head .rgb-swatch { box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }

  /* iOS-friendly: prevent input zoom */
  select { font-size: 16px; }

  /* ===== Télé / YouTube ===== */
  .tv-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
  .tv-pick button { background: var(--card); border: 1px solid var(--line); color: var(--text);
    padding: 11px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; cursor: pointer;
    text-align: left; transition: border-color 0.15s, transform 0.1s; }
  .tv-pick button.active { border-color: var(--lueur-bord); background: var(--lueur-fond); }
  .tv-pick button:active { transform: scale(0.97); }
  .tv-pick .tv-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; font-weight: 400; }
  .tv-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--muted); margin-right: 6px; vertical-align: middle; }
  .tv-dot.on { background: var(--ok); }
  .tv-dot.play { background: var(--lueur); }

  .tv-np { background: var(--card); border-radius: 14px; padding: 12px; margin-bottom: 10px; }
  .tv-np-main { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; }
  .tv-np-main img { width: 112px; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; background: var(--line); }
  .tv-np-info { min-width: 0; }
  .tv-np-title { font-weight: 600; font-size: 13px; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tv-np-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }
  .tv-progress { height: 4px; border-radius: 2px; background: var(--line); margin-top: 10px; overflow: hidden; }
  .tv-progress i { display: block; height: 100%; background: var(--lueur); width: 0; transition: width 0.4s linear; }
  .tv-times { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted);
    margin-top: 4px; font-variant-numeric: tabular-nums; }
  .tv-transport { display: flex; gap: 6px; margin-top: 10px; }
  .tv-transport button { flex: 1; background: var(--card-hi); border: 1px solid var(--line); color: var(--text);
    padding: 10px; border-radius: 10px; font-size: 15px; cursor: pointer; transition: border-color 0.15s, transform 0.1s; }
  .tv-transport button:active { transform: scale(0.95); border-color: var(--lueur); }
  .tv-transport button.primary { background: var(--lueur); border-color: var(--lueur); color: #fff; }
  .tv-transport button.danger { color: var(--err-text); font-size: 12px; }

  .tv-search { background: var(--card); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px;
    display: flex; gap: 8px; align-items: center; }
  .tv-search input { flex: 1; min-width: 0; background: var(--card-hi); color: var(--text);
    border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 15px; }
  .tv-search input:focus { outline: none; border-color: var(--lueur); }
  .tv-search button { background: var(--card-hi); border: 1px solid var(--line); color: var(--muted);
    padding: 10px 12px; border-radius: 10px; font-size: 13px; cursor: pointer; }
  .tv-types { display: flex; gap: 6px; margin-bottom: 10px; }
  .tv-types button { background: var(--card-hi); border: 1px solid var(--line); color: var(--muted);
    padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; }
  .tv-types button.active { background: var(--lueur-fond);
    border-color: var(--lueur-bord); color: var(--lueur); }

  .tv-results { display: grid; gap: 8px; }
  .tv-result { display: grid; grid-template-columns: 128px 1fr auto; gap: 10px; align-items: center;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px;
    cursor: pointer; position: relative; overflow: hidden; transition: border-color 0.15s, transform 0.1s; }
  .tv-result:active { transform: scale(0.985); border-color: var(--lueur); }
  .tv-result.pending { opacity: 0.5; pointer-events: none; }
  .tv-thumb-wrap { position: relative; }
  .tv-result img { width: 128px; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px;
    background: var(--line); display: block; }
  .tv-badge { position: absolute; right: 4px; bottom: 4px; background: rgba(0, 0, 0, 0.82);
    color: #fff; font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 4px;
    font-variant-numeric: tabular-nums; }
  .tv-badge.live { background: var(--err); }
  .tv-meta { min-width: 0; }
  .tv-meta .t { font-size: 13px; font-weight: 500; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tv-meta .c { font-size: 11px; color: var(--muted); margin-top: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tv-queue-btn { background: var(--card-hi); border: 1px solid var(--line); color: var(--muted);
    width: 36px; height: 36px; border-radius: 10px; font-size: 18px; cursor: pointer; flex-shrink: 0; }
  .tv-queue-btn:active { transform: scale(0.92); border-color: var(--lueur); color: var(--text); }
  .tv-result.flash::after { content: attr(data-flash); position: absolute; inset: 0;
    background: rgba(107, 166, 255, 0.95); color: #0E1116; display: flex; align-items: center;
    justify-content: center; font-weight: 600; font-size: 13px; pointer-events: none;
    animation: queueFlash 1.6s ease forwards; }

  /* D-pad for driving the TV's own YouTube UI (sign-in, settings…) */
  .tv-remote { background: var(--card); border-radius: 14px; padding: 12px; margin-bottom: 10px; }
  .tv-remote-head { display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; color: var(--muted); cursor: pointer; }
  .tv-remote-head b { color: var(--text); font-size: 13px; }
  .tv-remote-body { display: none; margin-top: 12px; }
  .tv-remote.open .tv-remote-body { display: block; }
  .tv-dpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    max-width: 240px; margin: 0 auto; }
  .tv-dpad button { background: var(--card-hi); border: 1px solid var(--line); color: var(--text);
    aspect-ratio: 1; border-radius: 12px; font-size: 17px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.15s, transform 0.08s; }
  .tv-dpad button:active { transform: scale(0.93); border-color: var(--lueur); }
  .tv-dpad button.ok { background: var(--lueur); border-color: var(--lueur); color: #fff;
    font-size: 13px; font-weight: 600; }
  .tv-dpad .spacer { visibility: hidden; }
  .tv-remote-extra { display: flex; gap: 6px; margin-top: 8px; }
  .tv-remote-extra button { flex: 1; background: var(--card-hi); border: 1px solid var(--line);
    color: var(--text); padding: 9px; border-radius: 10px; font-size: 12px; cursor: pointer; }
  .tv-remote-target { display: flex; gap: 6px; margin-top: 10px; align-items: center; }
  .tv-remote-target span { font-size: 11px; color: var(--muted); }
  .tv-remote-target button { background: var(--card-hi); border: 1px solid var(--line);
    color: var(--muted); padding: 5px 10px; border-radius: 8px; font-size: 11px; cursor: pointer; }
  .tv-remote-target button.active { background: var(--lueur-fond);
    border-color: var(--lueur-bord); color: var(--lueur); }
  .tv-remote-hint { font-size: 11px; color: var(--muted); margin-top: 10px; line-height: 1.45; }

  /* Historique de lecture local */
  .tv-hist-head { display: flex; justify-content: space-between; align-items: center; }
  .tv-hist-head button { background: none; border: none; color: var(--muted);
    font-size: 11px; cursor: pointer; padding: 2px 4px; }
  .tv-hist-head button:active { color: var(--err-text); }
  .tv-result .tv-plays { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,0.78);
    color: #fff; font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 4px; }
  .tv-del-btn { background: none; border: none; color: var(--muted); font-size: 16px;
    width: 26px; cursor: pointer; flex-shrink: 0; position: relative; }
  .tv-del-btn::before, #tv-hist-clear::before { content: ""; position: absolute; inset: -10px; }
  #tv-hist-clear { position: relative; }
  /* Source audio : courante + « Changer » ; feuille de choix. */
  .src-change { display: flex; width: 100%; align-items: center; justify-content: space-between;
    gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 12px; cursor: pointer;
    background: var(--card-hi); border: 1px solid var(--line); color: var(--text); font: inherit; }
  .src-change .src-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .src-change .src-act { color: var(--accent); font-size: 13px; flex: none; }
  .choice-list { display: flex; flex-direction: column; gap: 4px; max-height: 55vh; overflow-y: auto;
    margin: 6px 0 10px; }
  .choice-item { text-align: left; min-height: 44px; padding: 0 14px; border-radius: 10px; font: inherit;
    background: transparent; border: 1px solid transparent; color: var(--text); cursor: pointer; }
  .choice-item.active { background: var(--lueur-fond); border-color: var(--lueur-bord); }
  .tv-del-btn:active { color: var(--err-text); }
  .tv-result.hist { grid-template-columns: 128px 1fr auto auto; }

  /* Bandeau « nouvelle version » */
  .update-bar { position: fixed; left: 12px; right: 12px; z-index: 40;
    bottom: calc(var(--dock-h) + 10px);
    background: var(--accent); color: var(--on-accent); border-radius: 12px;
    padding: 11px 14px; display: none; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,0.45);
    animation: fadeIn 0.25s ease; }
  .update-bar.show { display: flex; }
  .update-bar button { margin-left: auto; background: var(--on-accent); color: var(--accent);
    border: none; padding: 7px 14px; border-radius: 9px; font-size: 12px;
    font-weight: 600; cursor: pointer; }

  /* Barre de progression déplaçable */
  input[type="range"].tv-seek { -webkit-appearance: none; appearance: none;
    width: 100%; background: transparent; height: 26px; margin-top: 4px; display: block; }
  input[type="range"].tv-seek::-webkit-slider-runnable-track { height: 5px; border-radius: 3px;
    background: linear-gradient(to right, var(--lueur) var(--fill, 0%), var(--line) var(--fill, 0%)); }
  input[type="range"].tv-seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
    width: 15px; height: 15px; border-radius: 50%; background: var(--lueur);
    margin-top: -5px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
  input[type="range"].tv-seek::-moz-range-track { height: 5px; border-radius: 3px; background: var(--line); }
  input[type="range"].tv-seek::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--lueur); }
  input[type="range"].tv-seek::-moz-range-thumb { width: 15px; height: 15px; border: none;
    border-radius: 50%; background: var(--lueur); cursor: pointer; }
  input[type="range"].tv-seek:disabled { opacity: 0.4; }
  input[type="range"].tv-seek:disabled::-webkit-slider-thumb { opacity: 0; }

  .tv-transport.secondary { margin-top: 6px; }
  .tv-transport button.skip { font-size: 11px; font-weight: 600; line-height: 1.15; }
  .tv-transport button.skip small { display: block; font-size: 13px; font-weight: 400; }

  /* Modes de lecture + volume dans la carte Télé */
  .tv-modes { display: flex; gap: 6px; margin-top: 6px; }
  .tv-modes button { flex: 1; background: var(--card-hi); border: 1px solid var(--line);
    color: var(--muted); padding: 8px; border-radius: 10px; font-size: 12px;
    font-weight: 500; cursor: pointer; transition: border-color .15s, transform .1s; }
  .tv-modes button.on { background: var(--lueur); border-color: var(--lueur); color: #fff; }
  .tv-modes button:active { transform: scale(0.96); }

  .tv-vol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
  .tv-vol > span { font-size: 12px; color: var(--muted); min-width: 26px; }
  .tv-vol button { background: var(--card-hi); border: 1px solid var(--line); color: var(--text);
    padding: 10px 0; border-radius: 10px; font-size: 16px; cursor: pointer;
    flex: 1 1 0; min-width: 64px; transition: border-color .15s, transform .1s; }
  .tv-vol button:active { transform: scale(0.94); border-color: var(--lueur); }
  .tv-vol button.muted { background: var(--lueur); border-color: var(--lueur); color: #fff; }
  .tv-vol .hint { font-size: 10.5px; color: var(--muted); flex: 0 0 100%; margin-top: 2px; }

  /* Autocomplétion */
  .tv-search-wrap { position: relative; }
  .tv-suggest { position: absolute; left: 0; right: 0; top: calc(100% - 6px); z-index: 15;
    background: var(--card-hi); border: 1px solid var(--line); border-radius: 12px;
    overflow: hidden; display: none; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
  .tv-suggest.show { display: block; }
  .tv-suggest button { display: block; width: 100%; text-align: left; background: none;
    border: none; border-top: 1px solid var(--line); color: var(--text);
    padding: 11px 14px; font-size: 14px; cursor: pointer; }
  .tv-suggest button:first-child { border-top: none; }
  .tv-suggest button:active { background: var(--card); }

  /* File d'attente */
  .tv-queue-row { display: grid; grid-template-columns: 24px 96px 1fr; gap: 10px;
    align-items: center; background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; padding: 7px 8px; }
  .tv-queue-row .n { color: var(--muted); font-size: 12px; text-align: center;
    font-variant-numeric: tabular-nums; }
  .tv-queue-row img { width: 96px; aspect-ratio: 16/9; border-radius: 7px;
    object-fit: cover; background: var(--line); display: block; }
  .tv-queue-row .t { font-size: 12.5px; font-weight: 500; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tv-queue-note { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.45; }

  /* Marqueur de build — pour savoir d'un coup d'œil quelle version tourne */
  .build-stamp { text-align: center; color: var(--muted); font-size: 10.5px;
    padding: 18px 0 4px; font-variant-numeric: tabular-nums; letter-spacing: .3px; }

  /* Bandeau « appareil non identifié » — le cas 401 */
  .auth-bar { position: fixed; left: 12px; right: 12px; z-index: 45;
    top: calc(var(--header-h) + 8px);
    background: var(--err); color: #1a0000; border-radius: 12px;
    padding: 12px 14px; display: none; font-size: 13px; line-height: 1.45;
    box-shadow: 0 6px 24px rgba(0,0,0,.5); }
  .auth-bar.show { display: block; }
  .auth-bar b { display: block; font-weight: 600; margin-bottom: 3px; }

  /* Zones audio branchées sur la télé */
  .tv-zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .tv-zone { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 10px 12px; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
  .tv-zone:active { transform: scale(0.97); }
  .tv-zone.on { border-color: var(--lueur-bord); background: var(--lueur-fond); }
  .tv-zone.pending { opacity: .5; pointer-events: none; }
  .tv-zone-top { display: flex; align-items: center; gap: 7px; }
  .tv-zone-name { font-size: 13px; font-weight: 600; }
  .tv-zone-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
  .tv-zone.on .tv-zone-sub { color: var(--lueur); }
  .tv-zone-vol { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
  .tv-zone-vol input { flex: 1; }
  .tv-zone-vol span { font-size: 11px; color: var(--muted); min-width: 28px;
    text-align: right; font-variant-numeric: tabular-nums; }
  .tv-zone-steps { display: flex; gap: 6px; margin-top: 8px; }
  .tv-zone-steps button { flex: 1; background: var(--bg-elev); border: 1px solid var(--line);
    color: var(--text); border-radius: 8px; padding: 6px 0; font-size: 13px; cursor: pointer; }

  /* ===== Réseau ===== */
  .net-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .net-head .meta { font-size: 11px; color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; }
  .net-list { display: grid; gap: 8px; }
  .net-row { display: grid; grid-template-columns: 10px 1fr auto; gap: 11px; align-items: center;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 11px 13px; cursor: pointer; transition: border-color .15s, transform .1s; }
  .net-row:active { transform: scale(0.985); border-color: var(--accent); }
  .net-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
  .net-dot.on { background: var(--ok); box-shadow: 0 0 0 3px rgba(74, 222, 128, .14); }
  .net-name { font-size: 14px; font-weight: 600; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .net-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-variant-numeric: tabular-nums; }
  .net-tag { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted); border: 1px solid var(--line); border-radius: 5px;
    padding: 2px 6px; white-space: nowrap; }
  .net-tag.priv { color: var(--lueur); border-color: var(--lueur-bord); }
  .net-row.named .net-name { color: var(--lueur); }
  .net-group { margin-bottom: 18px; }
  .net-group-title { display: flex; align-items: baseline; gap: 8px;
    font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); margin: 0 2px 8px; }
  .net-group-title .count { color: var(--lueur); font-variant-numeric: tabular-nums; }
  .net-row { grid-template-columns: 10px 1fr auto auto; }
  .net-kind { background: var(--card-hi); border: 1px solid var(--line); color: var(--muted);
    border-radius: 8px; padding: 5px 6px; font-size: 11px; max-width: 112px; }
  .net-conf { font-size: 10px; color: var(--muted); font-style: italic; white-space: nowrap; }
  .net-conf.sure { color: var(--ok); font-style: normal; }
  .hist-filter { display: flex; gap: 6px; margin-bottom: 12px; }
  .hist-filter button { background: var(--card-hi); border: 1px solid var(--line); color: var(--muted);
    padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; }
  .hist-filter button.active { background: var(--lueur-fond);
    border-color: var(--lueur-bord); color: var(--lueur); }
  .hist-date { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
  .hist-date input[type="date"] { background: var(--card-hi); border: 1px solid var(--line);
    color: var(--text); border-radius: 8px; padding: 7px 10px; font-size: 13px;
    font-family: inherit; color-scheme: dark; }
  .hist-date button { background: var(--card-hi); border: 1px solid var(--line); color: var(--muted);
    border-radius: 8px; padding: 7px 11px; font-size: 12px; cursor: pointer; }
  .hist-date button:active { border-color: var(--accent); }

  /* Frise de 24 h : une piste par appareil */
  .tl-row { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 11px 13px; margin-bottom: 8px; }
  .tl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .tl-who { font-size: 13.5px; font-weight: 600; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .tl-total { font-size: 12px; font-weight: 600; color: var(--lueur);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tl-track { position: relative; height: 16px; margin: 10px 0 3px;
    background: var(--bg-elev); border-radius: 4px; overflow: hidden; }
  .tl-seg { position: absolute; top: 0; bottom: 0; background: var(--lueur);
    border-radius: 3px; min-width: 2px; }
  .tl-seg.live { background: var(--ok); }
  .tl-grid { position: absolute; inset: 0; pointer-events: none; }
  .tl-grid i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
  .tl-hours { display: flex; justify-content: space-between; font-size: 9.5px;
    color: var(--muted); font-variant-numeric: tabular-nums; }
  .tl-spans { font-size: 11.5px; color: var(--muted); margin-top: 6px;
    font-variant-numeric: tabular-nums; line-height: 1.5; }
  .hist-day { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); margin: 16px 2px 8px; }
  .hist-day:first-child { margin-top: 0; }
  .hist-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline;
    background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 13px; margin-bottom: 6px; }
  .hist-who { font-size: 13.5px; font-weight: 600; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .hist-when { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
    white-space: nowrap; }
  .hist-dur { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
    white-space: nowrap; min-width: 56px; text-align: right; }
  .hist-row.live { border-color: var(--ok); }
  .hist-row.live .hist-dur { color: var(--ok); }
  /* Bouton secondaire du système (même famille que .cf-apply / .nl-actions). */
  .net-refresh { background: var(--card-hi); border: 1px solid var(--line); color: var(--text);
    padding: 10px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; cursor: pointer; width: 100%;
    margin-top: 10px; min-height: 44px; line-height: 1.3; }
  .net-refresh:active { border-color: var(--lueur); }
  /* Entête de section + action compacte : libellé sur une ligne, pastille « ＋ ». */
  .sec-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .sec-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .add-pill { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 32px;
    padding: 0 12px; border-radius: 999px; border: 1px solid rgba(107,166,255,.35);
    background: var(--lueur-fond); color: var(--lueur); font-size: 12px; font-weight: 600;
    letter-spacing: 0; text-transform: none; cursor: pointer; }
  .net-refresh:disabled { opacity: .5; }

  /* Veilleuse d'entrée */
  .nl-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
  .nl-head { display: flex; align-items: center; gap: 10px; }
  .nl-title { font-size: 14px; font-weight: 600; flex: 1; }
  .nl-switch { background: var(--card-hi); border: 1px solid var(--line); color: var(--muted);
    padding: 7px 14px; border-radius: 10px; font-size: 12px; font-weight: 600; cursor: pointer;
    white-space: nowrap; }
  .nl-switch.on { background: var(--lueur-fond);
    border-color: var(--lueur-bord); color: var(--lueur); }
  .nl-sub { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
  .nl-sub b { color: var(--text); font-weight: 600; }
  .nl-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 10px; margin-top: 12px; }
  .nl-field label { display: block; font-size: 10.5px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
  .nl-field select, .nl-field input { width: 100%; background: var(--card-hi);
    border: 1px solid var(--line); color: var(--text); border-radius: 9px;
    padding: 8px 9px; font-size: 13px; font-family: inherit;
    font-variant-numeric: tabular-nums; }
  .nl-actions { display: flex; gap: 8px; margin-top: 12px; }
  .nl-actions button { flex: 1; background: var(--card-hi); border: 1px solid var(--line);
    color: var(--text); padding: 10px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600;
    min-height: 44px; line-height: 1.3; cursor: pointer; }
  .nl-actions button:active { border-color: var(--accent); }
  .nl-state { font-size: 11px; color: var(--ok); margin-top: 10px; }

  /* ===== Confort · Climat + Lumière circadienne ===== */
  .cf-hr { height: 1px; background: var(--line); margin: 14px 0 12px; }
  .cf-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cf-chip { background: var(--card-hi); border: 1px solid var(--line); color: var(--text);
    padding: 11px 6px; border-radius: 12px; font-size: 13px; font-weight: 600; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    transition: border-color .15s, background .15s; }
  .cf-chip .cf-chip-sub { font-size: 10px; color: var(--muted); font-weight: 500; }
  .cf-chip.on { background: var(--lueur-fond); border-color: var(--lueur-bord); color: var(--lueur); }
  .cf-chip.on .cf-chip-sub { color: var(--lueur); opacity: .85; }
  .cf-detail { margin-top: 12px; }
  .cf-trow { display: flex; align-items: center; gap: 8px; padding: 7px 0;
    border-bottom: 1px dashed var(--line); }
  .cf-trow:last-child { border-bottom: none; }
  .cf-trow .cf-tn { flex: 1; font-size: 13px; }
  .cf-trow .cf-tmeta { font-size: 11px; color: var(--muted); }
  .cf-trow input { width: 62px; background: var(--card-hi); border: 1px solid var(--line);
    color: var(--text); border-radius: 8px; padding: 6px 7px; font-size: 13px;
    font-variant-numeric: tabular-nums; text-align: center; }
  .cf-apply { width: 100%; margin-top: 12px; background: var(--card-hi); border: 1px solid var(--line);
    color: var(--text); padding: 11px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600;
    min-height: 44px; line-height: 1.3; cursor: pointer; }
  .cf-apply.confirm { background: var(--lueur-fond); border-color: rgba(107,166,255,0.55); color: var(--lueur); }
  .cf-note { font-size: 11.5px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
  .cf-occ { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
  .cir-prev { margin-top: 12px; background: var(--card-hi); border: 1px solid var(--line);
    border-radius: 12px; padding: 11px; font-size: 12px; }
  .cir-prev .cir-line { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0;
    font-variant-numeric: tabular-nums; }
  .cir-prev .cir-head { color: var(--muted); font-size: 10.5px; letter-spacing: .06em;
    text-transform: uppercase; margin: 6px 0 2px; }
  .cir-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px;
    border: 1px solid var(--line); vertical-align: middle; margin-right: 5px; }

  /* ===== Sources vidéo ===== */
  .src-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .src-row button { background: var(--card); border: 1px solid var(--line); color: var(--text);
    padding: 13px 8px; border-radius: 12px; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s; }
  .src-row button.on { background: var(--lueur-fond);
    border-color: var(--lueur-bord); color: var(--lueur); }
  .src-row button:active { transform: scale(0.96); }
  .src-row button:disabled { opacity: .5; }

  /* ===== Grosse manette ===== */
  .pad-wrap { max-width: 330px; margin: 0 auto; }
  .pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .pad button { aspect-ratio: 1; background: var(--card); border: 1px solid var(--line);
    color: var(--text); border-radius: 18px; font-size: 26px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .12s, transform .08s, background .12s; }
  .pad button:active { transform: scale(0.93); border-color: var(--lueur); background: var(--card-hi); }
  .pad button.ok { background: var(--lueur); border-color: var(--lueur); color: #fff;
    font-size: 17px; font-weight: 600; }
  .pad .gap { visibility: hidden; }
  .pad-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
  .pad-extra button { background: var(--card); border: 1px solid var(--line); color: var(--text);
    padding: 14px; border-radius: 14px; font-size: 14px; cursor: pointer; }
  .pad-extra button:active { transform: scale(0.96); border-color: var(--lueur); }
  .pad-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
  .pad-tri button { background: var(--card); border: 1px solid var(--line); color: var(--text);
    padding: 15px 0; border-radius: 14px; font-size: 19px; cursor: pointer; }
  .pad-tri button:active { transform: scale(0.95); border-color: var(--lueur); }
  .pad-tri button.muted { background: var(--lueur); border-color: var(--lueur); color: #fff; font-size: 13px; }
  .pad-off { width: 100%; margin-top: 12px; background: var(--card); border: 1px solid var(--line);
    color: var(--err-text); padding: 13px; border-radius: 14px; font-size: 14px; cursor: pointer; }

  /* ===== Manette Halo Touch (écran d'abord) ===== */
  [hidden] { display: none !important; }   /* les sections repliées se replient VRAIMENT */
  .rc-target { display: flex; gap: 6px; margin-bottom: 10px; }
  .rc-target button { flex: 1; min-height: 44px; border-radius: 999px;
    background: var(--card); border: 1px solid var(--line); color: var(--muted);
    font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
  .rc-target button.active { background: var(--lueur-fond);
    border-color: var(--lueur-bord); color: var(--lueur); }
  .remote.halo { max-width: 360px; margin: 12px auto 0; background: var(--card);
    border: 1px solid var(--line); border-radius: 26px; padding: 14px 14px 18px;
    display: flex; flex-direction: column; gap: 14px; }

  /* --- l'écran tactile : un panneau lumineux inséré dans le corps --- */
  .hscreen { background: #0A0E14;
    background-image: radial-gradient(120% 90% at 50% 0%, rgba(107,166,255,0.10), transparent 55%);
    border: 1px solid rgba(107,166,255,0.22); border-radius: 18px;
    box-shadow: inset 0 0 22px rgba(107,166,255,0.07), 0 2px 10px rgba(0,0,0,0.45);
    padding: 12px; display: flex; flex-direction: column; gap: 10px; }
  .hscreen .hs-rooms { display: flex; gap: 6px; margin: 0; }
  .hscreen .hs-rooms button { flex: 1; background: rgba(245,239,230,0.04);
    border: 1px solid var(--line); border-radius: 10px; color: var(--text);
    padding: 8px 8px; font-size: 12px; font-weight: 600; cursor: pointer;
    text-align: left; font-family: inherit; min-height: 44px; }
  .hscreen .hs-rooms button.active { background: var(--lueur-fond);
    border-color: var(--lueur-bord); }
  .hscreen .hs-rooms .tv-sub { display: block; font-size: 10px;
    color: var(--muted); margin-top: 2px; font-weight: 400; }
  .hs-np { display: flex; align-items: center; gap: 10px; min-height: 52px; }
  .hs-np .np-c { width: 46px; height: 46px; border-radius: 8px; flex: none;
    object-fit: cover; background: linear-gradient(135deg, #232A36, #12161d);
    display: grid; place-items: center; font-size: 19px; }
  .hs-np .np-m { flex: 1; min-width: 0; }
  .hs-np .np-l1 { font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--lueur); }
  .hs-np .np-l2 { font-family: var(--serif); font-size: 14.5px; line-height: 1.25;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; }
  .hs-np .np-t { display: flex; gap: 2px; flex: none; }
  .hs-np .np-t button { background: none; border: 0; color: var(--text);
    min-width: 40px; min-height: 44px; cursor: pointer; display: grid;
    place-items: center; }
  .hs-np .np-t svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
    stroke-width: 1.8; }
  /* YouTube : 5 boutons (±15/30 s) — rangée pleine largeur sous le titre. */
  .hs-np.np-wrap { flex-wrap: wrap; row-gap: 2px; }
  .hs-np .np-t.wide { flex-basis: 100%; justify-content: space-between; }
  .hs-np .np-t button small { display: block; font-size: 10px; color: var(--muted);
    line-height: 1; margin-top: 1px; }
  .hs-tabs { display: flex; gap: 4px; background: rgba(245,239,230,0.05);
    border-radius: 10px; padding: 3px; }
  .hs-tabs button { flex: 1; background: none; border: 0; border-radius: 8px;
    color: var(--muted); font-size: 12px; font-weight: 600; min-height: 44px;
    cursor: pointer; font-family: inherit; }
  .hs-tabs button.on { background: var(--lueur-fond); color: var(--lueur); }
  .hs-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .htile { background: rgba(245,239,230,0.05); border: 1px solid var(--line);
    border-radius: 12px; color: var(--text); min-height: 64px; padding: 8px 6px;
    cursor: pointer; font-family: inherit; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px;
    transition: transform 0.08s, border-color 0.12s; }
  .htile:active { transform: scale(0.95); }
  .htile svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    color: var(--muted); }
  .htile span { font-size: 10.5px; font-weight: 600; text-align: center;
    line-height: 1.2; overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .htile.on { background: var(--lueur-fond); border-color: var(--lueur-bord); }
  .htile.on svg { color: var(--lueur); }
  .htile.danger2 { color: var(--muted); }
  .htile.danger2 svg { color: var(--err-text); }
  .hs-empty { grid-column: 1 / -1; text-align: center; color: var(--muted-2);
    font-size: 12px; padding: 12px 6px; }

  /* --- grappe de contrôles --- */
  .rrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .rrow.rpow { grid-template-columns: 1fr 1fr; }
  .rkey { display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 4px; background: var(--card-hi);
    border: 1px solid var(--line); border-radius: 14px; color: var(--text);
    min-height: 56px; padding: 8px 4px; cursor: pointer; font-family: inherit;
    transition: transform 0.08s, border-color 0.12s; }
  .rkey:active { transform: scale(0.94); border-color: var(--lueur-bord); }
  .rkey svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .rkey span { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted); font-weight: 600; }
  .rkey.danger { color: var(--err-text); }
  .rkey.danger:active { border-color: rgba(199,91,74,0.5); }
  .rkey[disabled] { opacity: 0.35; pointer-events: none; }
  .c4btn { width: 56px; height: 56px; border-radius: 50%; justify-self: center;
    align-self: center; border: 1px solid rgba(199,91,74,0.5);
    background: radial-gradient(circle at 34% 30%, #E2705C 0%, var(--err) 60%, #8E3A2E 100%);
    color: #F5EFE6; font-family: inherit; font-weight: 800; font-size: 15px;
    letter-spacing: 0.02em; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.45); transition: transform 0.08s; }
  .c4btn:active { transform: scale(0.93); }
  .dpad-flank { display: flex; align-items: center; justify-content: space-between;
    gap: 10px; }
  .dpad { position: relative; width: min(210px, 60vw); aspect-ratio: 1;
    margin: 0 auto; flex: 1 1 auto; max-width: 210px; }
  .dpad-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
  .dpad-btn { position: absolute; background: none; border: 0;
    color: var(--muted); cursor: pointer; display: flex; align-items: center;
    justify-content: center; padding: 0; }
  .dpad-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor;
    stroke-width: 2; transition: transform 0.08s; }
  .dpad-btn:active { color: var(--lueur); }
  .dpad-btn.up    { top: 0; left: 25%; width: 50%; height: 30%; }
  .dpad-btn.down  { bottom: 0; left: 25%; width: 50%; height: 30%; }
  .dpad-btn.left  { left: 0; top: 25%; width: 30%; height: 50%; }
  .dpad-btn.right { right: 0; top: 25%; width: 30%; height: 50%; }
  .dpad-btn.up svg    { transform: rotate(-90deg); }
  .dpad-btn.down svg  { transform: rotate(90deg); }
  .dpad-btn.left svg  { transform: rotate(180deg); }
  .dpad-ok { position: absolute; inset: 31.5%; border-radius: 50%; border: 0;
    background: radial-gradient(circle at 34% 30%, #A9CBFF 0%, var(--lueur) 55%, #2E5FBF 100%);
    color: #0E1116; font-family: inherit; font-weight: 600; font-size: 14px;
    letter-spacing: 0.06em; cursor: pointer;
    box-shadow: 0 0 18px rgba(107,166,255,0.35), 0 4px 12px rgba(0,0,0,0.4);
    transition: transform 0.08s; }
  .dpad-ok:active { transform: scale(0.93); }
  .rocker { display: flex; flex-direction: column; width: 56px; flex: none;
    background: var(--card-hi); border: 1px solid var(--line);
    border-radius: 999px; overflow: hidden; }
  .rocker button { background: none; border: 0; color: var(--text);
    min-height: 52px; cursor: pointer; display: grid; place-items: center;
    font-family: inherit; }
  .rocker button svg { width: 18px; height: 18px; fill: none;
    stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .rocker button:active { color: var(--lueur); }
  .rocker .rlab { text-align: center; font-size: 10px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted-2); font-weight: 600;
    padding: 2px 0; }
  .transport-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .tkey { min-height: 48px; background: var(--card-hi); border: 1px solid var(--line);
    border-radius: 12px; color: var(--text); cursor: pointer;
    display: grid; place-items: center; transition: transform 0.08s; }
  .tkey:active { transform: scale(0.92); border-color: var(--lueur-bord); }
  .tkey svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tkey.play { background: var(--lueur-fond); border-color: var(--lueur-bord);
    color: var(--lueur); }
  .rdisc { background: none; border: 1px dashed var(--line-forte);
    border-radius: 12px; color: var(--muted); min-height: 44px; font-size: 11px;
    font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer; font-family: inherit; }
  .rdisc.open { border-style: solid; color: var(--lueur);
    border-color: var(--lueur-bord); }
  .allkeys { display: flex; flex-direction: column; gap: 10px; }
  .numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .numpad button { min-height: 54px; background: var(--card-hi);
    border: 1px solid var(--line); border-radius: 12px; color: var(--text);
    font-family: inherit; font-size: 18px; font-weight: 600; cursor: pointer;
    font-variant-numeric: tabular-nums; transition: transform 0.08s;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; line-height: 1.1; }
  .numpad button i { font-style: normal; font-size: 8.5px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
  .numpad button:active { transform: scale(0.94); border-color: var(--lueur-bord); }
  .numpad button[disabled] { opacity: 0.35; pointer-events: none; }
  .rc-colors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
  .rc-colors button { min-height: 44px; border-radius: 11px; border: 1px solid var(--line);
    cursor: pointer; transition: transform 0.07s; }
  .rc-colors button:active { transform: scale(0.92); }
  .rc-colors .c-red    { background: #c8352c; }
  .rc-colors .c-green  { background: #2e8b4f; }
  .rc-colors .c-yellow { background: #c9a227; }
  .rc-colors .c-blue   { background: #2f5fbf; }
  /* état « maintien » (volume tenu) — partagé partout, en bleu */
  .tv-vol button.holding, .tv-zone-steps button.holding, .vol-pulse.holding,
  .rocker button.holding, .cp-pulse.holding {
    background: var(--lueur-fond) !important;
    border-color: var(--lueur-bord) !important;
    color: var(--lueur) !important; }
  /* transport contextuel : visible seulement sur une source média */
  .remote:not(.mode-media) .only-media { display: none !important; }
  @media (prefers-reduced-motion: reduce) {
    .rkey:active, .tkey:active, .dpad-ok:active, .numpad button:active,
    .htile:active, .c4btn:active { transform: none; } }

  /* ===== Wi-Fi invité ===== */
  .wg-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
  .wg-head { display: flex; align-items: center; gap: 10px; }
  .wg-title { font-size: 14px; font-weight: 600; flex: 1; }
  .wg-fields { display: grid; gap: 10px; margin-top: 12px; }
  .wg-field label { display: block; font-size: 10.5px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
  .wg-field input, .wg-field select { width: 100%; background: var(--card-hi);
    border: 1px solid var(--line); color: var(--text); border-radius: 9px;
    padding: 9px 10px; font-size: 14px; font-family: inherit; }
  .wg-qr { background: #fff; border-radius: 14px; padding: 12px; margin: 14px auto 0;
    max-width: 240px; line-height: 0; }
  .wg-qr svg { width: 100%; height: auto; }
  .wg-link { margin-top: 12px; background: var(--bg-elev); border: 1px solid var(--line);
    border-radius: 10px; padding: 10px 12px; font-size: 11.5px; word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
  .wg-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
  .wg-actions button { flex: 1; min-width: 118px; background: var(--card-hi);
    border: 1px solid var(--line); color: var(--text); padding: 10px;
    border-radius: 10px; font-size: 12.5px; cursor: pointer; }
  .wg-actions button.danger { color: var(--err-text); }
  .wg-warn { margin-top: 10px; font-size: 12px; color: var(--err-text); line-height: 1.5; }
  .wg-note { margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.55; }
  /* ===== Flux (tableau des flux — design Veilleuse) ===== */
  .feed-card { position: relative; background: var(--card); border-radius: 20px;
    padding: 0; margin-bottom: 12px; overflow: hidden;
    border: 1px solid var(--line); transition: opacity 0.25s; }
  .feed-card.enter { animation: fadeIn 0.25s ease; }
  .feed-card.leave { opacity: 0; pointer-events: none; }
  .feed-card::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(160deg, var(--feed-tint, rgba(107,166,255,0.10)), transparent 46%); }
  .feed-card > .feed-body { position: relative; padding: 13px 14px 14px; }
  .feed-top { display: flex; gap: 12px; align-items: center; }
  .feed-cover { width: 56px; height: 56px; border-radius: 14px; flex: none;
    object-fit: cover; background: var(--card-hi);
    box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
  .feed-cover-ph { width: 56px; height: 56px; border-radius: 14px; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 24px;
    background: linear-gradient(140deg, var(--feed-tint, rgba(107,166,255,0.25)), var(--card-hi));
    box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
  .feed-info { flex: 1; min-width: 0; }
  .feed-src { font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted); }
  .feed-title { font-family: var(--serif); font-weight: 500; font-size: 16.5px;
    line-height: 1.2; margin: 2px 0 1px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
  .feed-artist { font-size: 12px; color: var(--muted); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .progress { height: 3px; border-radius: 2px; background: var(--card-hi);
    margin: 12px 0 4px; overflow: hidden; }
  .progress i { display: block; height: 100%; width: 0; border-radius: 2px;
    background: var(--lueur); transition: width 0.4s linear; }
  .ptime { display: flex; justify-content: space-between; font-size: 10px;
    color: var(--muted-2); font-variant-numeric: tabular-nums; }
  .transport { display: flex; align-items: center; justify-content: center;
    gap: 22px; margin: 8px 0 2px; }
  .transport button { background: none; border: 0; cursor: pointer;
    color: var(--text); padding: 6px; display: grid; place-items: center;
    font-size: 19px; min-width: 44px; min-height: 44px; font-family: inherit; }
  .transport .play { width: 44px; height: 44px; border-radius: 50%;
    background: var(--text); color: var(--bg); font-size: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4); min-width: 44px; }
  .transport .play:active { transform: scale(0.93); }
  .transport button.skip { font-size: 11px; font-weight: 600; line-height: 1.1; }
  /* volume de groupe */
  .feed-gvol { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
  .feed-gvol svg { width: 16px; height: 16px; stroke: var(--muted); flex-shrink: 0; }
  .feed-gvol input[type="range"] { flex: 1; }
  .feed-gvol .gv-pct { min-width: 34px; text-align: right; font-size: 11.5px;
    color: var(--muted); font-variant-numeric: tabular-nums; }
  /* chips de pièces */
  .feed-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
  .room-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
    padding: 0 13px; border-radius: 999px; background: var(--card-hi);
    border: 1px solid var(--line); color: var(--text); font-size: 12.5px;
    font-weight: 500; cursor: pointer; font-family: inherit;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.15s, transform 0.1s, background 0.15s; }
  .room-chip:active { transform: scale(0.94); }
  .room-chip.member { background: var(--lueur-fond);
    border-color: rgba(107,166,255,0.35); }
  .room-chip.member.open { border-color: var(--lueur); }
  .room-chip .chip-vol { color: var(--lueur); font-weight: 600; font-size: 11px; }
  .room-chip .chip-tag { font-size: 10px; color: var(--muted);
    border: 1px solid var(--line-forte); border-radius: 5px; padding: 0 4px; }
  .room-chip.ghost-add { background: none; border: 1px dashed var(--line-forte);
    color: var(--muted); }
  .room-chip.ghost { opacity: 0.55; pointer-events: none; }
  .chip-panel { margin-top: 10px; background: var(--bg-elev); border-radius: 12px;
    padding: 12px; animation: fadeIn 0.15s ease; }
  .chip-panel .cp-head { display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px; font-size: 13px; font-weight: 600; }
  .chip-panel .cp-vol { display: flex; align-items: center; gap: 10px; }
  .chip-panel .cp-vol input[type="range"] { flex: 1; }
  .chip-panel .cp-pct { min-width: 38px; text-align: right; font-size: 12px;
    color: var(--muted); font-variant-numeric: tabular-nums; }
  .chip-panel .cp-leave { background: none; border: 1px solid var(--line-forte);
    color: var(--err-text); min-height: 40px; padding: 0 14px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
  .chip-panel .cp-pulse { flex: 1; min-height: 40px; background: var(--card-hi);
    border: 1px solid var(--line); color: var(--text); border-radius: 10px;
    font-size: 17px; font-weight: 600; cursor: pointer; }
  .feed-move { margin-top: 12px; }
  .feed-move > button { width: 100%; min-height: 40px; background: none;
    border: 1px solid var(--line-forte); color: var(--muted); border-radius: 999px;
    font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
  .feed-move > button:active { border-color: var(--lueur); color: var(--lueur); }
  /* Arrêter le flux : extinction de la source (braise sur fond nuit) */
  .feed-stop { margin-top: 10px; }
  .feed-stop > button { width: 100%; min-height: 44px; display: flex;
    align-items: center; justify-content: center; gap: 8px;
    background: rgba(199,91,74,0.10); border: 1px solid rgba(199,91,74,0.45);
    color: var(--err-text); border-radius: 999px; font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: background 0.15s, transform 0.1s; }
  .feed-stop > button svg { width: 17px; height: 17px; stroke: var(--err); flex: none; }
  .feed-stop > button:active { transform: scale(0.97); background: rgba(199,91,74,0.18); }
  .feedhint { font-size: 12px; color: var(--muted-2); text-align: center;
    padding: 8px 24px 0; line-height: 1.5; }
  .silent-title { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted); margin: 18px 0 10px; }
  .silent-row .room-chip { color: var(--muted); background: transparent; }
  .feeds-empty { text-align: center; padding: 36px 16px 10px; }
  .feeds-empty .fe-title { font-family: var(--serif); font-size: 24px;
    font-weight: 500; color: var(--text); }
  .feeds-empty .fe-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
  .feed-launcher { margin-top: 18px; background: var(--card);
    border: 1px solid var(--line); border-radius: 20px; padding: 14px 16px; }
  .feed-launcher .fl-step { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted); margin: 4px 0 8px; }
  .feed-picker { position: fixed; inset: 0; z-index: 60; background: var(--scrim);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: flex-end; justify-content: center; }
  .feed-picker .fp-sheet { width: 100%; max-width: 720px; background: var(--bg-elev);
    border-radius: 26px 26px 0 0; border: 1px solid var(--line-forte); border-bottom: 0;
    padding: 16px 16px calc(16px + var(--safe-bot));
    animation: fadeIn 0.18s ease; max-height: 70vh; overflow-y: auto; }
  .feed-picker .fp-title { font-family: var(--serif); font-size: 17px;
    font-weight: 500; margin-bottom: 12px; }
  .feed-picker .fp-cancel { width: 100%; min-height: 44px; margin-top: 12px;
    background: var(--card); border: 1px solid var(--line); color: var(--muted);
    border-radius: 12px; font-size: 14px; cursor: pointer; font-family: inherit; }

  /* ===== L'orbe (bouton vocal flottant — la Veilleuse elle-même) ===== */
  /* Bouton central de la barre, surélevé (moitié au-dessus du bord) ; un
     anneau couleur nuit le détache de la barre. */
  .tabbar .voice-fab { align-self: start; justify-self: center; margin-top: -24px;
    width: 60px; height: 60px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(0,0,0,.45);
    display: grid; place-items: center; transition: transform 0.12s; }
  .tabbar .voice-fab i { width: 48px; height: 48px; border-radius: 50%; display: block;
    background: radial-gradient(circle at 36% 30%, #D2E8FF 0%, #6BA6FF 45%, #2E5FBF 80%);
    box-shadow: 0 0 18px var(--lueur-bord), 0 0 44px rgba(64,140,255,0.2);
    animation: respire 4.2s ease-in-out infinite; }
  .tabbar .voice-fab:active { transform: scale(0.92); }
  @keyframes respire { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
  @media (prefers-reduced-motion: reduce) { .tabbar .voice-fab i { animation: none; } }

  /* ===== Entête d'écran (par onglet) ===== */
  .shead { margin: 6px 4px 14px; }
  .shead .date { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted); font-weight: 500; }
  .shead .sh { font-family: var(--serif); font-weight: 500; font-size: 27px;
    margin: 2px 0 0; letter-spacing: -0.01em; line-height: 1.15; }
  .shead .sh em { font-style: italic; color: var(--muted); font-weight: 400; }

  /* ===== Pastilles d'état ===== */
  .pills { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px;
    margin: 0 -2px 10px; scrollbar-width: none; }
  .pills::-webkit-scrollbar { display: none; }
  .pill { flex: none; display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 500; color: var(--text); min-height: 32px;
    background: var(--card); border: 1px solid var(--line); border-radius: 999px;
    padding: 6px 12px; font-variant-numeric: tabular-nums; cursor: pointer;
    font-family: inherit; }
  .pill svg { width: 14px; height: 14px; }
  .pill.warm { color: var(--accent); background: var(--accent-soft);
    border-color: rgba(233,177,104,.25); }
  .pill.cool { color: var(--lueur); background: var(--lueur-fond);
    border-color: rgba(107,166,255,.25); }
  .pill.ok { color: var(--ok); }
  .pill.warn { color: var(--err-text); }

  /* ===== Carte sonnette (Accueil) ===== */
  .vcard { background: var(--card); border: 1px solid var(--line); border-radius: 20px;
    margin-bottom: 12px; }
  .vcard .cardlab { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
  .door { position: relative; overflow: hidden; padding: 0; }
  .door .cam { position: relative; display: block; width: 100%;
    aspect-ratio: 16/7; object-fit: cover; cursor: pointer;
    background: linear-gradient(180deg, #141B26 0%, #0C1017 100%); }
  .door .live { position: absolute; top: 10px; left: 10px; display: inline-flex;
    align-items: center; gap: 6px; font-size: 10px; font-weight: 600;
    letter-spacing: 0.08em; color: var(--text); pointer-events: none;
    background: rgba(10,13,18,0.7); border-radius: 999px; padding: 4px 9px;
    border: 1px solid var(--line); }
  .door .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--err); animation: pulse 1.6s infinite; }
  .door .doorfoot { display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 10px 14px; }
  .door .doorfoot .t { font-size: 13px; font-weight: 600; }
  .door .doorfoot .s { font-size: 11.5px; color: var(--muted); }
  .door .doorbtns { display: flex; gap: 6px; align-items: center; }
  .door .talk { font-size: 12px; font-weight: 600; color: var(--lueur);
    background: var(--lueur-fond); border: 0; border-radius: 999px; padding: 0 13px;
    min-height: 40px; cursor: pointer; font-family: inherit; }
  .door .dico { background: none; border: 0; color: var(--muted); cursor: pointer;
    font-size: 15px; min-width: 40px; min-height: 40px; padding: 0; }
  .door .doorevents { padding: 0 14px 12px; }

  /* ===== Scènes rapides (Accueil) ===== */
  .qscenes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    margin-bottom: 12px; }
  .qs { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
    padding: 12px 6px 10px; text-align: center; cursor: pointer; color: var(--text);
    transition: border-color 0.15s, background 0.15s; font-family: inherit;
    min-height: 64px; }
  .qs svg { width: 20px; height: 20px; color: var(--muted); margin-bottom: 5px; }
  .qs .n { font-size: 11px; font-weight: 500; color: var(--text); }
  .qs:active, .qs.armed { transform: scale(0.96); background: var(--accent-soft);
    border-color: rgba(233,177,104,.3); }
  .qs.armed svg { color: var(--accent); }

  /* ===== Aperçu des flux (Accueil) ===== */
  .homefeed { display: flex; align-items: center; gap: 11px; padding: 9px 2px;
    cursor: pointer; }
  .homefeed + .homefeed { border-top: 1px solid var(--line); }
  .homefeed .hf-cover { width: 34px; height: 34px; border-radius: 9px; flex: none;
    object-fit: cover; background: linear-gradient(135deg, #E294A6 0%, #8D5A78 48%, #241C2B 100%);
    display: grid; place-items: center; font-size: 15px; }
  .homefeed .hf-meta { flex: 1; min-width: 0; }
  .homefeed .hf-t { font-size: 12.5px; font-weight: 600; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .homefeed .hf-s { font-size: 11px; color: var(--muted); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .homefeed .eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; flex: none; }
  .homefeed .eq i { width: 3px; border-radius: 2px; background: var(--lueur);
    animation: eqbar 1s ease-in-out infinite; }
  .homefeed .eq i:nth-child(2) { animation-delay: 0.25s; }
  .homefeed .eq i:nth-child(3) { animation-delay: 0.5s; }
  @keyframes eqbar { 0%, 100% { height: 4px; } 50% { height: 13px; } }
  @media (prefers-reduced-motion: reduce) {
    .homefeed .eq i, .door .live::before { animation: none; } }

  /* ===== Onglet Plus : menu + sous-écrans ===== */
  .more { background: var(--card); border: 1px solid var(--line); border-radius: 20px;
    padding: 4px 12px; margin-bottom: 12px; }
  .mrow { display: flex; align-items: center; gap: 13px; padding: 13px 4px;
    cursor: pointer; width: 100%; background: none; border: 0; color: var(--text);
    text-align: left; font-family: inherit; min-height: 56px; }
  .mrow + .mrow { border-top: 1px solid var(--line); }
  .mico { width: 36px; height: 36px; border-radius: 12px; background: var(--card-hi);
    display: grid; place-items: center; flex: none; }
  .mico svg { width: 18px; height: 18px; color: var(--muted); }
  .mrow .mt { flex: 1; min-width: 0; }
  .mrow .mn { display: block; font-size: 14px; font-weight: 500; }
  .mrow .ms { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .mrow .mstat { font-size: 11px; font-weight: 600; flex: none; }
  .mrow .mstat.ok { color: var(--ok); }
  .mrow .mstat.warn { color: var(--err-text); }
  .mrow .chev { color: var(--muted-2); flex: none; width: 16px; height: 16px; }
  .subscreen { display: none; }
  .subscreen.on { display: block; animation: fadeIn 0.2s ease; }
  #plus-menu.hidden { display: none; }
  /* Dans un sous-écran : ni la carte QR ni l'entête « Plus » au-dessus. */
  #tab-plus.sub-open > .shead, #tab-plus.sub-open > #plus-qr { display: none !important; }
  /* Voiles plein écran créés en JS (styles inline) : marge d'encoche / barre. */
  .ovl { padding-top: max(20px, calc(env(safe-area-inset-top, 0px) + 12px)) !important;
    padding-bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px)) !important; }
  .sub-back { display: inline-flex; align-items: center; gap: 7px; background: none;
    border: 0; color: var(--lueur); font-size: 14px; font-weight: 600;
    padding: 8px 4px; margin: 0 0 6px; cursor: pointer; font-family: inherit;
    min-height: 40px; }

  /* ===== Pièces : grille de cartes ===== */
  .rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  @media (min-width: 560px) { .rooms { grid-template-columns: repeat(3, 1fr); } }
  .roomcard { position: relative; background: var(--card); border: 1px solid var(--line);
    border-radius: 20px; padding: 14px 13px 12px; cursor: pointer; overflow: hidden;
    text-align: left; color: var(--text); font-family: inherit; min-height: 84px;
    transition: border-color 0.2s; }
  .roomcard:active { transform: scale(0.97); }
  .roomcard.lit { border-color: rgba(233,177,104,0.28); }
  .roomcard.lit::before { content: ""; position: absolute; top: -26px; right: -26px;
    width: 86px; height: 86px; border-radius: 50%;
    background: radial-gradient(circle, rgba(233,177,104,0.22), transparent 70%); }
  .roomcard .rn { font-family: var(--serif); font-weight: 500; font-size: 16.5px;
    line-height: 1.15; margin-bottom: 6px; padding-right: 34px; }
  .roomcard .rs { font-size: 11px; color: var(--muted); line-height: 1.5; }
  /* Noms longs (« Salle de bain maîtres ») : 2 lignes max, cartes de même
     hauteur par rangée (grid-auto-rows: 1fr). */
  .rooms { grid-auto-rows: 1fr; }
  .roomcard { display: flex; flex-direction: column; justify-content: flex-start; }
  .roomcard .rn, .roomcard .rs { display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
  .roomcard .rs b { color: var(--accent); font-weight: 500; }
  .roomcard .rs i { font-style: normal; color: var(--lueur); }
  .roomcard .temp { position: absolute; top: 12px; right: 12px; font-family: var(--serif);
    font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

  /* ===== Feuille de pièce (bottom sheet) ===== */
  .scrim { position: fixed; inset: 0; z-index: 50; background: var(--scrim);
    opacity: 0; pointer-events: none; transition: opacity 0.25s; }
  .scrim.on { opacity: 1; pointer-events: auto; }
  .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; max-height: 84%;
    max-width: 720px; margin: 0 auto;
    background: var(--bg-elev); border-radius: 26px 26px 0 0;
    border: 1px solid var(--line-forte); border-bottom: 0;
    transform: translateY(104%); transition: transform 0.3s cubic-bezier(0.32,0.72,0.25,1);
    display: flex; flex-direction: column; }
  .sheet.on { transform: none; }
  .sheet .grab { width: 38px; height: 4px; border-radius: 2px; background: var(--line-forte);
    margin: 10px auto 2px; flex: none; cursor: pointer; padding: 8px 20px;
    background-clip: content-box; box-sizing: content-box; }
  .sheet .sc { overflow-y: auto; padding: 6px 18px calc(26px + var(--safe-bot));
    scrollbar-width: none; overscroll-behavior: contain; }
  .sheet .sc::-webkit-scrollbar { display: none; }
  /* Entête de la feuille de pièce : reste visible pendant le défilement. */
  .sheet .shd { position: sticky; top: -6px; z-index: 2; background: var(--bg-elev);
    margin: -6px -18px 0; padding: 6px 18px 2px; border-bottom: 1px solid transparent; }
  .sheet .shd .rsub { margin-bottom: 10px; }
  .sheet h3.shrn { font-family: var(--serif); font-weight: 500; font-size: 24px;
    margin: 8px 0 2px; }
  .sheet .rsub { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
  .slab { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
  .ctl { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
  .ctl + .ctl { border-top: 1px solid var(--line); }
  .ctl .cn { font-size: 13.5px; flex: none; width: 112px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .ctl input[type="range"] { flex: 1; }
  .ctl .cv { font-size: 12px; color: var(--muted); width: 40px; text-align: right;
    font-variant-numeric: tabular-nums; flex: none; }
  .ctl.is-on .cn { color: var(--accent); }
  input[type="range"].blue::-webkit-slider-thumb { background: var(--lueur); }
  input[type="range"].blue::-moz-range-thumb { background: var(--lueur); }
  /* Lumière éteinte : pouce neutre (l'ambre = « ça éclaire »). */
  .ctl:not(.is-on) input[data-light]::-webkit-slider-thumb { background: var(--muted); }
  .ctl:not(.is-on) input[data-light]::-moz-range-thumb { background: var(--muted); }
  .swatches { display: flex; gap: 8px; padding: 4px 0; flex-wrap: wrap; }
  .sw { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent;
    cursor: pointer; flex: none; padding: 0; }
  .sw.on { border-color: var(--text); }
  .thermo { display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 6px 0; }
  .thermo .cur { font-family: var(--serif); font-size: 34px; font-weight: 500;
    font-variant-numeric: tabular-nums; line-height: 1; }
  .thermo .cur small { font-size: 14px; color: var(--muted); font-family: var(--sans); }
  .thermo .setp { display: flex; align-items: center; gap: 10px; }
  .thermo .setp button { width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--line-forte); background: var(--card); font-size: 18px;
    cursor: pointer; color: var(--text); }
  .thermo .setp .sv { font-size: 15px; font-weight: 600; color: var(--accent);
    font-variant-numeric: tabular-nums; min-width: 48px; text-align: center; }
  .thermo .setp .sv.idle { color: var(--muted-2); }
  .sheet .cp-pulse { flex: 1; min-height: 40px; background: var(--card-hi);
    border: 1px solid var(--line); color: var(--text); border-radius: 10px;
    font-size: 17px; font-weight: 600; cursor: pointer; font-family: inherit; }
  .sheet .cp-leave { background: none; border: 1px solid var(--line-forte);
    color: var(--err-text); min-height: 40px; border-radius: 999px; font-size: 12.5px;
    font-weight: 600; cursor: pointer; font-family: inherit; }
  .sheet-actions { display: flex; gap: 8px; margin-top: 18px; }
  .sheet-actions button { flex: 1; background: none; border: 1px solid var(--line-forte);
    border-radius: 14px; padding: 12px; font-size: 13px; font-weight: 600;
    color: var(--muted); cursor: pointer; font-family: inherit; min-height: 44px; }
  .sheet-actions button:active { background: var(--card); }
  .sheet-actions button.blue { color: var(--lueur); border-color: rgba(107,166,255,0.35); }
  .sheet-actions button.danger { color: var(--err-text); border-color: rgba(199,91,74,0.4); }
  /* Feuilles de confirmation/saisie : AU-DESSUS de tout, y compris les
     surcouches plein écran posées en JS (partage 100, QR 110) — sinon
     « Révoquer » s'ouvrait SOUS le dialogue de partage, inatteignable. */
  .dlg-scrim { z-index: 200; }
  .dlg-sheet { z-index: 201; }
  .dlg-input { width: 100%; background: var(--card-hi); border: 1px solid var(--line-forte);
    border-radius: 14px; color: var(--text); font: inherit; font-size: 16px;
    padding: 12px 14px; margin-top: 4px; }
  .dlg-input:focus { outline: none; border-color: rgba(107,166,255,0.5); }
  textarea.dlg-input { resize: vertical; min-height: 88px; }

  /* ===== Scènes & confort (design Veilleuse) ===== */
  .scgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
  .scene { position: relative; background: var(--card); border: 1px solid var(--line);
    border-radius: 18px; padding: 14px 13px; cursor: pointer; text-align: left;
    display: flex; flex-direction: column; gap: 8px; color: var(--text);
    font-family: inherit; min-height: 88px; }
  .scene svg { width: 21px; height: 21px; color: var(--muted); }
  .scene .sn { font-size: 13.5px; font-weight: 600; }
  .scene .sd { font-size: 11px; color: var(--muted-2); line-height: 1.4; }
  .scene:active, .scene.armed { transform: scale(0.96); background: var(--accent-soft);
    border-color: rgba(233,177,104,.3); }
  .scene.armed svg { color: var(--accent); }
  .scene.hero-scene { background: linear-gradient(145deg, rgba(107,166,255,0.12), var(--card) 65%);
    border-color: rgba(107,166,255,0.25); }
  .scene.hero-scene svg { color: var(--lueur); }
  .scene.ghost-scene { border-style: dashed; background: none; }
  .scene.ghost-scene .sn { color: var(--muted); }
  .scene-cell { position: relative; display: flex; }
  .scene-cell > .scene { flex: 1; min-width: 0; }
  .scene-cell > .del { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px;
    border: none; background: transparent; color: var(--muted); font-size: 16px;
    line-height: 1; border-radius: 50%; cursor: pointer; padding: 0;
    display: grid; place-items: center; }
  .scene-cell > .del:active { background: var(--card-hi); color: var(--text); }
  .tstat { display: flex; align-items: center; justify-content: space-between;
    padding: 10px 2px; gap: 8px; }
  .tstat + .tstat, .tstat + .tstat-more, .tstat-more + .tstat { border-top: 1px solid var(--line); }
  .tstat .tn { font-size: 13.5px; font-weight: 500; }
  .tstat .tmode { font-size: 10.5px; color: var(--accent); letter-spacing: 0.06em;
    text-transform: uppercase; font-weight: 600; }
  .tstat .tmode.idle { color: var(--muted-2); }
  .tstat .tmode.heat, .hv.heat { color: var(--heat); }
  .tstat .tmode.cool, .hv.cool { color: var(--cool); }
  .tstat .tl-left { cursor: pointer; flex: 1; min-width: 0; }
  .tstat .tr { display: flex; align-items: center; gap: 9px; }
  .tstat .deg { font-family: var(--serif); font-size: 19px; font-variant-numeric: tabular-nums; }
  .tstat .setv { color: var(--accent); font-size: 15px; font-family: var(--serif);
    font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }
  .tstat .setv.idle { color: var(--muted-2); }
  .tstat button { width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--line-forte); background: none; color: var(--text);
    font-size: 15px; cursor: pointer; flex: none; }
  /* Consigne selon le MODE (core/climate.js) : ambre = chauffage, bleu =
     clim, deux pastilles en Auto, grisé à l'arrêt. */
  .spc { display: flex; align-items: center; gap: 10px; }
  .spc .spg { display: flex; align-items: center; gap: 8px; }
  .spc .spg button { width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--line-forte); background: none; color: var(--text);
    font-size: 17px; cursor: pointer; flex: none; padding: 0; font-family: inherit; }
  .spc .spg button:active { transform: scale(0.94); }
  .spc .sv { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
    min-width: 46px; text-align: center; color: var(--muted-2); }
  .spc .sv.heat { color: var(--heat); }
  .spc .sv.cool { color: var(--cool); }
  .spc .sv.idle { color: var(--muted-2); font-weight: 500; }
  .spc .spl { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    min-width: 62px; text-align: right; }
  .spc .spl.heat { color: var(--heat); } .spc .spl.cool { color: var(--cool); }
  .spc.k-auto { flex-direction: column; align-items: flex-end; gap: 6px; }
  .spc.k-auto .spg button { width: 34px; height: 34px; font-size: 15px; }
  .modepill { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; }
  .modepill:empty { display: none; }
  .modepill button { background: var(--card-hi); border: 1px solid var(--line);
    color: var(--muted); padding: 7px 13px; border-radius: 999px; font-size: 12px;
    cursor: pointer; font-family: inherit; }
  .modepill button.active { color: var(--text); font-weight: 600; border-color: var(--line-forte); }
  .modepill button.active.m-heat { color: var(--heat); border-color: rgba(233,177,104,0.5); }
  .modepill button.active.m-cool { color: var(--cool); border-color: rgba(107,166,255,0.5); }
  .modepill button:active { transform: scale(0.94); }
  .fansel { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
  .fansel .fl { font-size: 11px; color: var(--muted); margin-right: 2px; }
  .presetsel { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
  .presetsel .fl { font-size: 11px; color: var(--muted); margin-right: 2px; }
  .tn .tbat { font-size: 11px; font-weight: 600; color: var(--err-text); }
  .c4-scenes { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 14px; }
  .c4hist { list-style: none; margin: 0; padding: 0; font-size: 13px; }
  .c4hist li { padding: 6px 0; border-top: 1px solid var(--line); }
  .c4hist .c4h-t { color: var(--muted); font-variant-numeric: tabular-nums; }
  /* Données du cache local pas encore confirmées par le Pi : atténuées. */
  html.stale-data #home-content, html.stale-data #roomgrid, html.stale-data #thermostats { opacity: 0.55; transition: opacity 0.3s; }
  .stale-badge { display: none; font-size: 11px; color: var(--muted); padding: 2px 8px;
    border: 1px solid var(--line); border-radius: 999px; margin-left: 6px; }
  html.stale-data .stale-badge { display: inline-block; }
  .vcard.climconf .txt b { color: var(--text); }
  .vcard.climconf .hot { color: var(--heat); } .vcard.climconf .cold { color: var(--cool); }
  .door .live.still { background: rgba(0,0,0,0.55); color: var(--text); }
  .door .live.still::before { display: none; }
  .door .cam-poster { display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 12px; }
  .door .cam[hidden], .door .live[hidden] { display: none; }
  .tstat-more { padding: 4px 2px 12px; display: none; }
  .tstat-more.on { display: block; animation: fadeIn 0.15s ease; }
  .blindrow { display: flex; align-items: center; gap: 11px; padding: 10px 2px; }
  .blindrow + .blindrow { border-top: 1px solid var(--line); }
  .blindrow .bn { font-size: 13.5px; width: 104px; flex: none; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .blindrow input[type="range"] { flex: 1; }
  .blindrow .bv { font-size: 11.5px; color: var(--muted); width: 52px; text-align: right;
    font-variant-numeric: tabular-nums; flex: none; }
  .blindrow .bstop { width: 40px; height: 40px; border-radius: 10px; flex: none;
    border: 1px solid var(--line); background: none; color: var(--muted);
    font-size: 12px; cursor: pointer; }

  /* suggestion du soir */
  .suggest { display: flex; gap: 12px; align-items: center; }
  .suggest .txt { flex: 1; font-size: 13px; line-height: 1.45; }
  .suggest .txt b { font-weight: 600; }
  .suggest .acts { display: flex; flex-direction: column; gap: 6px; }
  .suggest .acts button { font-size: 12px; font-weight: 600; border-radius: 999px;
    padding: 0 14px; min-height: 40px; cursor: pointer; font-family: inherit;
    border: 1px solid var(--line-forte); background: none; color: var(--muted); }
  .suggest .acts button.yes { background: var(--lueur-fond);
    border-color: rgba(107,166,255,0.3); color: var(--lueur); }

  /* ===== Plus : carte QR Wi-Fi invité ===== */
  .qrcard { display: flex; gap: 14px; align-items: center; padding: 14px; cursor: pointer; }
  .qrbox { width: 82px; height: 82px; flex: none; border-radius: 12px;
    background: #fff; padding: 7px; line-height: 0; }
  .qrbox svg { width: 100%; height: 100%; display: block; }
  .qrcard .qt { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
  /* .qr-sub et non .qs : .qs est la tuile de scène rapide (bordée, centrée). */
  .qrcard .qr-sub { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
  .qrcard .qr-sub b { color: var(--text); font-weight: 600; }

  /* ===== Journal ===== */
  /* Une seule rangée défilante (au lieu de 3 lignes de pastilles). */
  .jr-filter { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px 12px;
    padding: 0 14px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .jr-filter::-webkit-scrollbar { display: none; }
  .jr-filter button { flex: none; white-space: nowrap; background: var(--card-hi); border: 1px solid var(--line);
    color: var(--muted); padding: 0 12px; min-height: 36px; border-radius: 999px;
    font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; }
  .jr-filter button.active { background: var(--lueur-fond);
    border-color: rgba(107,166,255,0.35); color: var(--lueur); }
  .jr-day { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted); margin: 16px 2px 8px; }
  .jr-row { display: flex; gap: 10px; align-items: baseline; padding: 7px 2px;
    border-bottom: 1px solid var(--line); font-size: 13px; }
  .jr-row .jt { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums;
    width: 44px; flex: none; }
  .jr-row .jn { flex: 1; min-width: 0; }
  .jr-row .jn small { color: var(--muted); }
  .jr-row .jc { font-size: 10.5px; color: var(--muted-2); white-space: nowrap; }
  .jr-row.rich { align-items: center; }
  .jr-thumb { width: 52px; height: 40px; object-fit: cover; border-radius: 8px;
    border: 1px solid var(--line); flex: none; cursor: pointer; }
  .jr-cap { display: block; color: var(--text); font-size: 12.5px; }

  /* ===== Réglages ===== */
  .rg-list { background: var(--card); border: 1px solid var(--line);
    border-radius: 16px; padding: 4px 12px; margin-bottom: 12px; }
  .rg-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px;
    width: 100%; background: none; border: 0; color: var(--text); text-align: left;
    font-family: inherit; cursor: pointer; min-height: 48px; }
  .rg-row + .rg-row { border-top: 1px solid var(--line); }
  .rg-row .rn2 { flex: 1; min-width: 0; font-size: 14px; }
  .rg-row .rs2 { display: block; font-size: 11.5px; color: var(--muted); }
  .rg-row .rmark { flex: none; font-size: 15px; color: var(--muted-2); }
  .rg-row.active .rmark { color: var(--lueur); }
  .rg-row.active .rn2 { color: var(--lueur); }
  .rg-row[disabled] { opacity: 0.4; pointer-events: none; }

  /* ===== Soirée photos (gestion propriétaire) ===== */
  .party-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    margin-top: 10px; }
  .party-ph { position: relative; aspect-ratio: 1; border-radius: 10px;
    overflow: hidden; border: 1px solid var(--line); background: var(--card-hi);
    padding: 0; }
  .party-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .party-ph.pending { border-color: rgba(233,177,104,0.55); }
  .party-ph .pact { position: absolute; top: 3px; right: 3px; display: flex; gap: 3px; }
  .party-ph .pact button { width: 26px; height: 26px; border-radius: 8px; border: 0;
    background: rgba(10,13,18,0.75); color: var(--text); font-size: 12px;
    cursor: pointer; line-height: 1; }
  .party-ph .pact button.ok2 { color: var(--ok); }
  .party-ph .pact button.del2 { color: var(--err-text); }
  .party-ph .pwho { position: absolute; left: 0; right: 0; bottom: 0; font-size: 9px;
    color: #fff; background: linear-gradient(transparent, rgba(5,7,10,0.75));
    padding: 12px 5px 3px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; pointer-events: none; }
  .party-link { background: var(--bg-elev); border: 1px solid var(--line);
    border-radius: 10px; padding: 9px 11px; font-size: 11px; word-break: break-all;
    font-family: ui-monospace, Menlo, monospace; color: var(--muted); margin-top: 10px; }
  .party-qr { background: #fff; border-radius: 12px; padding: 10px; margin: 12px auto 0;
    max-width: 200px; line-height: 0; }
  .party-qr img, .party-qr canvas { width: 100% !important; height: auto !important; display: block; }

  /* ===== Chantier 2 · Unification des panneaux « Plus » =====
     Audio & Spotify, Télé & YouTube, DEL : mêmes cartes ~20px, chips 999px,
     sélection BLEUE (var(--lueur)). Le rouge est réservé au danger / power /
     record / direct. Couche de reskin posée au-dessus des règles héritées. */
  /* Cartes-panneaux : rayon Veilleuse (~20px) */
  .beat-card, .modes, .rgb-zone, .tv-remote,
  .sp-header, .sp-device-row, .sp-search, .speed-row { border-radius: 20px; }
  .queue-list, .now-playing, .sp-playlist { border-radius: 16px; }
  /* Chips / onglets / bascules : pastilles 999px, sélection bleue */
  .tv-types button, .sp-tabs button, .tv-remote-target button,
  .beat-toggle, .mode-btn, .tv-modes button, .audio-actions button,
  .tv-vol button, .tv-queue-btn { border-radius: 999px; }
  .tv-pick button { border-radius: 16px; }
  /* Focus des champs de recherche : bleu (plus de vert/rouge générique) */
  .sp-search input:focus, .tv-search input:focus { border-color: rgba(107,166,255,0.5); }
  /* Petit bouton rafraîchir SVG (remplace l'emoji ↻) */
  .icon-btn { background: none; border: none; color: var(--muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; min-height: 40px; padding: 0; }
  .icon-btn:active { color: var(--lueur); }
  .icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  /* Glyphes de section en SVG (remplacent les emojis) */
  .sec-ico { width: 15px; height: 15px; fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
    vertical-align: -2px; margin-left: 6px; color: var(--lueur); }
  /* Pochettes-placeholder : glyphe SVG centré */
  .np-cover-ph svg, .mini-cover svg { width: 26px; height: 26px; fill: none;
    stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  /* Transport Télé en icônes SVG (comme la Manette) */
  .tv-transport button { border-radius: 999px; display: inline-flex; align-items: center;
    justify-content: center; gap: 2px; }
  .tvt-ico { width: 20px; height: 20px; fill: none; stroke: currentColor;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .tvt-ico.sm { width: 15px; height: 15px; vertical-align: -3px; }
  .tv-transport button.skip { flex-direction: column; gap: 0; }
  .tv-transport button.skip .tvt-ico { width: 17px; height: 17px; }
  .sp-transport button { display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; }

  /* =====================================================================
     Ronde 2 · lot D — UI/UX : grands titres, orbe en surcouche, squelettes,
     présence, moments, DEL, modèles, accessibilité.
     ===================================================================== */

  /* ---- Icônes (jeu unique #i-*, trait 1,8) ---- */
  .ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ico.r-up { transform: rotate(-90deg); } .ico.r-down { transform: rotate(90deg); }
  .ico.r-left { transform: rotate(180deg); }
  .mini-cover svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
  .mini #mini-play .ico { width: 22px; height: 22px; }
  .feed-cover-ph .ico, .hf-cover .ico, .hs-np .np-c .ico { width: 22px; height: 22px; color: var(--text); }
  .transport .ico { width: 22px; height: 22px; }
  .transport .play .ico { width: 20px; height: 20px; }
  .transport button.skip { display: flex; flex-direction: column; align-items: center; gap: 1px; }
  .transport button.skip .ico { width: 18px; height: 18px; }
  .transport button.skip span { font-size: 10px; font-weight: 600; }
  .db-event-title .ico { margin-right: 6px; color: var(--muted); }
  .home-tile-head .ico { margin-right: 4px; }
  .rg-row .rmark .ico { width: 18px; height: 18px; }
  .rg-row.active .rmark .ico { color: var(--lueur); }
  .err-line { color: var(--err-text) !important; }
  .dot-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
    margin-right: 7px; vertical-align: 1px; }

  /* ---- Utilitaires ---- */
  .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .vcard.vpad { padding: 14px; }
  .section-gap { margin-top: 22px; }
  .chip-btn { flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
    background: var(--card-hi); border: 1px solid var(--line-forte); color: var(--text);
    font: 600 12.5px var(--sans); position: relative; }
  .chip-btn::after, .pill::after, .add-pill::after, .jr-filter button::after,
  .tv-types button::after, .hist-filter button::after, .tv-remote-target button::after {
    content: ""; position: absolute; inset: -6px -2px; }       /* zone de toucher ≥ 44 px */
  .pill, .add-pill, .jr-filter button, .tv-types button, .hist-filter button,
  .tv-remote-target button { position: relative; }
  .icon-btn.danger { color: var(--err-text); }
  .empty-card { display: flex; gap: 12px; align-items: center; padding: 14px 16px;
    background: var(--card); border: 1px dashed var(--line-forte); border-radius: 16px;
    color: var(--muted); font-size: 13px; line-height: 1.5; }
  .empty-card .ico { width: 22px; height: 22px; color: var(--lueur); }
  .dlg-sheet .rsub { white-space: pre-line; }

  /* ---- Grand titre (à la iOS) : entête de page + sous-écrans ---- */
  .shead .sh { font-size: 30px; }
  .subscreen > .shead, #tab-manette > .shead { margin: 2px 4px 14px; }
  @media (prefers-reduced-motion: reduce) { .app-title, .app-header { transition: none; } }

  /* ---- Onglet sans bouton (Flux) : aucune pastille active ---- */
  body[data-tab="scenes"] .tabbar button.active { color: var(--muted-2); }   /* Scènes = page sans bouton : l'onglet d'origine reste discret */

  /* ---- L'orbe en surcouche (iframe /assistant) ---- */
  .orb-ovl { z-index: 150; background: var(--bg); opacity: 0; transform: translateY(18px) scale(.985);
    transition: opacity .22s ease, transform .22s cubic-bezier(0.32,0.72,0.25,1); }
  .orb-ovl.on { opacity: 1; transform: none; }
  .orb-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
  body.orb-open { overflow: hidden; }
  body.orb-open .dock, body.orb-open #toasts { visibility: hidden; }
  @media (prefers-reduced-motion: reduce) { .orb-ovl { transition: none; transform: none; } }

  /* ---- Squelettes de chargement (au lieu de vide / « … ») ---- */
  @keyframes skel-sheen { from { background-position: 180% 0; } to { background-position: -80% 0; } }
  .skel-list i, .skel-card, .skel-block, .skel-pills i, .skel-qs i {
    display: block; border-radius: 14px;
    background: linear-gradient(100deg, var(--skel) 30%, var(--skel-hi) 50%, var(--skel) 70%) 0 0 / 200% 100%;
    animation: skel-sheen 1.4s linear infinite; }
  .skel-list { display: grid; gap: 8px; padding: 2px 0; }
  .skel-list i { height: 46px; }
  .skel-card { min-height: 84px; border-radius: 20px; }
  .scgrid .skel-card { min-height: 88px; }
  .tv-pick .skel-card { min-height: 52px; border-radius: 16px; }
  .skel-block { height: 96px; border-radius: 20px; margin-bottom: 12px; }
  .skel-block.tall { height: 150px; }
  .skel-pills { display: flex; gap: 8px; margin-bottom: 12px; }
  .skel-pills i { width: 96px; height: 32px; border-radius: 999px; }
  .skel-qs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
  .skel-qs i { height: 64px; border-radius: 16px; }
  .colors .skel-list, .cards .skel-list { grid-column: 1 / -1; }
  @media (prefers-reduced-motion: reduce) {
    .skel-list i, .skel-card, .skel-block, .skel-pills i, .skel-qs i { animation: none; } }

  /* ---- Accueil selon la présence ---- */
  .presence-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 2px 12px; }
  .pr-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px;
    border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--card);
    border: 1px solid var(--line); color: var(--text); }
  .pr-chip .ico { width: 15px; height: 15px; }
  .p-home .pr-chip .ico { color: var(--ok); }
  .p-arriving .pr-chip { color: var(--accent); border-color: var(--accent-bord); background: var(--accent-soft); }
  .p-away .pr-chip { color: var(--lueur); border-color: var(--lueur-bord); background: var(--lueur-fond); }
  .p-night .pr-chip { color: var(--lueur); }
  .pr-src { font-size: 11px; color: var(--muted); }
  .pills-tv { display: contents; }
  .away-card .aw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .away-card .aw-when { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .away-card .aw-counts { font-family: var(--serif); font-size: 17px; margin: 2px 0 8px; }
  .away-card .aw-quiet { display: flex; align-items: center; gap: 10px; font-size: 14px; margin: 4px 0 6px; }
  .away-card .aw-quiet .ico { color: var(--ok); width: 20px; height: 20px; }
  .aw-lines { list-style: none; margin: 0; padding: 0; }
  .aw-lines li { display: flex; gap: 10px; align-items: center; padding: 7px 0; font-size: 13px;
    border-top: 1px solid var(--line); }
  .aw-lines li .ico { color: var(--muted); }
  .aw-acts { display: flex; gap: 8px; margin-top: 10px; }
  .aw-acts button { min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer;
    font: 600 12.5px var(--sans); background: none; border: 1px solid var(--line-forte); color: var(--muted); }
  .aw-acts .aw-journal { color: var(--lueur); border-color: rgba(107,166,255,.35); background: var(--lueur-fond); }

  /* ---- Journal : moments ---- */
  .jr-moments { margin-bottom: 8px; }
  .moments { list-style: none; margin: 0 0 6px; padding: 4px 14px; background: var(--card);
    border: 1px solid var(--line); border-radius: 20px; }
  .moment { display: flex; gap: 12px; align-items: center; padding: 11px 0; }
  .moment + .moment { border-top: 1px solid var(--line); }
  .m-ico { width: 34px; height: 34px; border-radius: 11px; background: var(--card-hi); flex: none;
    display: grid; place-items: center; color: var(--muted); }
  .m-ico .ico { width: 17px; height: 17px; }
  .k-room .m-ico { color: var(--accent); background: var(--accent-soft); }
  .k-departure .m-ico, .k-arrival .m-ico { color: var(--lueur); background: var(--lueur-fond); }
  .k-door .m-ico { color: var(--accent); }
  .m-body { display: flex; flex-direction: column; min-width: 0; }
  .m-t { font-family: var(--serif); font-size: 16px; line-height: 1.25; }
  .m-s { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

  /* ---- DEL : zones nommées, état, « Lier les deux » ---- */
  .link-card { display: flex; align-items: center; gap: 14px; }
  .link-card .lk-t { flex: 1; min-width: 0; }
  .link-card .lk-n { font-size: 14.5px; font-weight: 600; }
  .link-card .lk-s { font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
  .switch { position: relative; flex: none; width: 52px; height: 32px; border-radius: 999px; cursor: pointer;
    background: var(--card-hi); border: 1px solid var(--line-forte); padding: 0; transition: background .18s; }
  .switch::after { content: ""; position: absolute; inset: -6px; }
  .switch i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
    background: var(--muted); transition: transform .18s, background .18s; }
  .switch[aria-checked="true"] { background: var(--lueur-fond); border-color: var(--lueur-bord); }
  .switch[aria-checked="true"] i { transform: translateX(20px); background: var(--lueur); }
  @media (prefers-reduced-motion: reduce) { .switch, .switch i { transition: none; } }
  .rgb-head { align-items: flex-start; }
  .rgb-head .rgb-label { font-family: var(--serif); font-size: 17px; font-weight: 500; }
  .rgb-state { font-size: 12px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
  .rgb-head-r { display: flex; align-items: center; gap: 8px; }
  .linked-badge { display: none; font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--lueur); border: 1px solid var(--lueur-bord);
    border-radius: 999px; padding: 2px 8px; }
  .rgb-zone.linked .linked-badge { display: inline-block; }
  .rgb-zone.linked { border: 1px solid rgba(107,166,255,.22); }
  .wr-end { font-size: 11px; color: var(--muted); text-align: right; }

  /* ---- Feuille de pièce : toucher la lumière = bascule ---- */
  .ctl .cn-tog { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px 0 0;
    background: none; border: 0; color: var(--text); font: inherit; font-size: 13.5px; text-align: left;
    cursor: pointer; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
  .ctl .cn-tog span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ctl .cn-tog .ico { width: 18px; height: 18px; color: var(--muted-2); }
  .ctl.is-on .cn-tog { color: var(--accent); }
  .ctl.is-on .cn-tog .ico { color: var(--accent); }
  .ctl .cn-tog:active { transform: scale(0.97); }
  .lvl-presets { display: flex; gap: 6px; padding: 2px 0 10px; }
  .lvl-presets button { flex: 1; min-height: 44px; border-radius: 12px; background: var(--card);
    border: 1px solid var(--accent-bord); color: var(--accent); font: 600 12.5px var(--sans); cursor: pointer; }

  /* ---- Flux : Reprendre + favoris ---- */
  .resume-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 16px; }
  .resume-card .rc-ico { width: 44px; height: 44px; border-radius: 14px; flex: none; display: grid;
    place-items: center; background: var(--lueur-fond); color: var(--lueur); }
  .resume-card .rc-ico .ico { width: 20px; height: 20px; }
  .resume-card .rc-meta { flex: 1; min-width: 0; }
  .resume-card .cardlab { margin-bottom: 2px; }
  .resume-card .rc-t { font-family: var(--serif); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .resume-card .rc-s { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .resume-card .rc-go { flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0;
    background: var(--lueur); color: var(--on-lueur); font: 600 13px var(--sans); cursor: pointer; }
  .fav-chip .ico { color: var(--accent); width: 14px; height: 14px; }
  .feed-top { position: relative; }
  .feed-fav { flex: none; min-width: 44px; min-height: 44px; margin-right: -8px; }
  .feed-fav .ico { width: 20px; height: 20px; }
  .feed-fav.on { color: var(--accent); }

  /* ---- Automatisations : modèles + premiers pas ---- */
  .rl-templates { display: grid; gap: 8px; margin-bottom: 8px; }
  .tpl { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
    background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px;
    color: var(--text); font: inherit; min-height: 56px; }
  .tpl:active { transform: scale(0.985); }
  .tpl-ico { width: 36px; height: 36px; border-radius: 12px; background: var(--card-hi); flex: none;
    display: grid; place-items: center; color: var(--accent); }
  .tpl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .tpl-n { font-size: 14px; font-weight: 600; }
  .tpl-s { font-size: 12px; color: var(--muted); }
  .tpl-add { color: var(--lueur); }
  .tpl.added { opacity: 1; pointer-events: none; }
  .tpl.added .tpl-add { color: var(--ok); }
  button.tpl[disabled] { opacity: .7; }
  .onboard .ob-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .onboard .ob-prog { font-family: var(--serif); font-size: 17px; }
  .ob-bar { height: 4px; border-radius: 2px; background: var(--card-hi); margin: 10px 0 6px; overflow: hidden; }
  .ob-bar i { display: block; height: 100%; background: var(--lueur); border-radius: 2px; }
  .ob-list { list-style: none; margin: 0; padding: 0; }
  .ob-step { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
  .ob-step + .ob-step { border-top: 1px solid var(--line); }
  .ob-mark { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: var(--card-hi); color: var(--muted); }
  .ob-step.done .ob-mark { background: rgba(127,184,148,.15); color: var(--ok); }
  .ob-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .ob-n { font-size: 13.5px; font-weight: 600; }
  .ob-step.done .ob-n { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-forte); }
  .ob-s { font-size: 11.5px; color: var(--muted); }
  .rule-card { display: flex; align-items: center; gap: 10px; padding: 12px; margin-bottom: 8px;
    background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
  .rule-card .rc-body { flex: 1; min-width: 0; }
  .rule-card .rc-name { font-weight: 600; }
  .rule-card .audio-card-meta { margin: 2px 0 0; }
  .rule-card input[type="checkbox"], .db-event-card input[type="checkbox"] { width: 22px; height: 22px;
    accent-color: var(--lueur); margin: 11px; }
  .rl-up-row { display: flex; gap: 10px; padding: 8px 2px; font-size: 13px; border-bottom: 1px solid var(--line); }
  .rl-up-row > span:first-child { flex: 1; }

  /* ---- Télé : en-tête de télécommande repliable = vrai bouton ---- */
  .tv-remote-head { width: 100%; background: none; border: 0; padding: 4px 0; min-height: 44px; font: inherit; }
  .tv-remote-caret { display: inline-flex; align-items: center; gap: 4px; }
  .tv-remote-caret svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .15s; }
  .tv-remote.open .tv-remote-caret svg { transform: rotate(180deg); }
  .tv-dpad button .ico { width: 20px; height: 20px; }
  .tv-remote-extra button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; }
  .hist-date button { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; }
  .add-pill .ico { width: 14px; height: 14px; }

  /* ---- Manette : rangées à 2, trous du pavé ---- */
  .rrow.r2 { grid-template-columns: 1fr 1fr; }
  .numpad-gap { display: block; }

  /* ---- Accessibilité : focus clavier visible, cibles ≥ 44 px, mouvement réduit ---- */
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  :focus:not(:focus-visible) { outline: none; }
  .roomcard:focus-visible, .scene:focus-visible, .qs:focus-visible, .mrow:focus-visible,
  .tpl:focus-visible, .htile:focus-visible { outline-offset: -2px; }
  .icon-btn, .door .dico { min-width: 44px; min-height: 44px; }
  .door .dico .ico { width: 18px; height: 18px; }
  .door .talk, .sub-back, .room-chip, .feed-move > button, .suggest .acts button,
  .chip-panel .cp-leave, .chip-panel .cp-pulse, .sheet .cp-pulse, .sheet .cp-leave,
  .tstat button, .spc .spg button, .thermo .setp button, .blindrow .bstop,
  .stepper button, .mini button { min-height: 44px; min-width: 44px; }
  .spc.k-auto .spg button { width: 40px; height: 40px; }
  .jr-filter button { min-height: 40px; }
  .scene .del { width: 44px; height: 44px; display: grid; place-items: center; }
  .scene .del .ico { width: 16px; height: 16px; }
  .party-ph .pact button { width: 32px; height: 32px; display: grid; place-items: center; }
  .party-ph .pact .ico { width: 14px; height: 14px; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
    .tab.active, .subscreen.on { animation: none; }
  }

  /* ---- Raccourci « Manette — <pièce> » sur un flux vidéo actif ---- */
  .remote-btn { color: var(--lueur); min-width: 44px; min-height: 44px; }
  .remote-btn .ico { width: 20px; height: 20px; }
  .feed-remote { flex: none; margin-right: -8px; background: var(--lueur-fond); border-radius: 14px; }
  .homefeed .hf-remote { margin: -8px 0; }
  .roomcell { position: relative; display: flex; }
  /* Pièces groupées par ÉTAGE (ronde 3) : en-tête sur toute la largeur. */
  #roomgrid.rooms { grid-auto-rows: auto; }   /* en-têtes d'étage : hauteur propre */
  .room-floor { grid-column: 1 / -1; margin: 14px 2px 2px; font-size: 11px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .room-floor:first-child { margin-top: 0; }
  .room-floor-toggle { background: none; border: 0; padding: 12px 2px; min-height: 44px; text-align: left;
    font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 6px; }
  .room-floor-toggle::after { content: "›"; font-size: 15px; transition: transform .2s; }
  .rooms.passages-open .room-floor-toggle::after { transform: rotate(90deg); }
  .rooms:not(.passages-open) .rc-passage { display: none; }
  .roomcell > .roomcard { flex: 1; width: 100%; }
  .rc-remote { position: absolute; right: 4px; bottom: 4px; }
  .rc-remote .remote-btn { background: var(--lueur-fond); border-radius: 14px; }
  .rc-remote:not(:empty) ~ .roomcard, .roomcell:has(.rc-remote:not(:empty)) .roomcard .rs { padding-right: 40px; }
  .tv-remote-slot:empty { display: none; }
  .mini #mini-remote { color: var(--lueur); }
  .mini #mini-remote[hidden] { display: none; }

  /* ---- Accueil : rangée de pastilles défilante (lot D, suivi) ----
     Cible de toucher 44 px (le visuel reste une pastille de 34 px grâce au
     padding vertical de la rangée), accrochage au défilement, et fondu sur
     le bord droit tant qu'il reste des pastilles à voir (.more-right, JS). */
  .pills { scroll-snap-type: x proximity; scroll-padding-inline: 2px; padding: 5px 2px 5px;
    margin: -5px -2px 7px; }
  .pills > .pill, .pills .pills-tv > .pill { scroll-snap-align: start; min-height: 34px; }
  .pills .pill::after { inset: -5px -2px; }
  .pills.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }

/* Automatisations : dernier résultat (ronde 3) — l'échec se lit, sans rouge criard. */
.rc-last.bad { color: var(--err-text); }
.rc-last.ok { color: var(--muted); }

/* Scènes | Confort : sélecteur segmenté (ronde 3) */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.seg button { min-height: 40px; border: 0; border-radius: 9px; background: transparent; font: inherit;
  font-size: 14px; color: var(--muted); cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--card-hi); color: var(--text); }
#tab-scenes[data-seg="scenes"] [data-segv="confort"],
#tab-scenes[data-seg="confort"] [data-segv="scenes"] { display: none; }

/* Santé de la maison (Réglages, ronde 3) */
.hl-sum { font-size: 14px; margin-bottom: 8px; }
.hl-sum.ok { color: var(--muted); }
.hl-sum.warn { color: var(--accent); }
.hl-sum.bad { color: var(--err-text); }
.hl-item { display: grid; grid-template-columns: 12px auto 1fr; column-gap: 10px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.hl-dot { width: 8px; height: 8px; border-radius: 50%; background: #5FB58A; align-self: center; }
.hl-dot.warn { background: var(--accent); }
.hl-dot.bad { background: var(--err-text); }
.hl-lab { color: var(--text); }
.hl-val { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.hl-hint { grid-column: 2 / -1; color: var(--muted-2); font-size: 12px; margin-top: 2px; }

/* Pointes Hydro-Québec (Réglages, ronde 3) */
.hq-lab { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
#hq-offer { width: 100%; min-height: 44px; border-radius: 12px; background: var(--card-hi); color: var(--text);
  border: 1px solid var(--line); padding: 0 12px; font: inherit; }
.hq-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0 2px; border-top: 1px solid var(--line); margin-top: 12px; }

/* Réglages : choix de la sortie audio du Pi */
#rg-audio-out .row-btns { display: flex; flex-direction: column; gap: 8px; }
#rg-audio-out .eng { min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-hi);
  color: var(--text); font: inherit; text-align: left; padding: 0 14px; cursor: pointer; }
#rg-audio-out .eng.on { background: var(--lueur-fond); border-color: var(--lueur-bord); }

/* Réglages › SoundCloud */
.sc-acc { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

  /* ===== SoundCloud « comme dans l'app » (plus/scsearch.js) =====
     Page plein écran sous les toasts (60) : recherche pendant la frappe,
     fiches artiste/liste qui glissent par-dessus. */
  .scx { z-index: 58; background: var(--bg); color: var(--text); overflow: hidden;
    opacity: 0; transform: translateY(14px); transition: opacity .18s ease, transform .22s ease; }
  .scx.ovl { padding: 0 !important; }
  .scx.in { opacity: 1; transform: none; }
  .scx.out { opacity: 0; transform: translateY(10px); }
  .scx-view { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
  .scx-detail { transform: translateX(100%); transition: transform .22s cubic-bezier(.2,.8,.2,1); z-index: 2;
    box-shadow: -12px 0 24px rgba(0,0,0,.35); }
  .scx-detail.on { transform: none; }
  .scx-top { display: flex; align-items: center; gap: 6px; flex: none;
    padding: calc(var(--safe-top) + 10px) 12px 10px 6px; background: var(--bg); }
  .scx-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0;
    background: none; color: var(--text); border-radius: 50%; font-size: 22px; }
  .scx-ic:active { background: var(--card); }
  .scx-top-t { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .15s; }
  .scx-detail.scrolled .scx-top-t { opacity: 1; }
  .scx-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 46px;
    padding: 0 6px 0 14px; background: var(--card-hi); border-radius: 14px; color: var(--muted); }
  .scx-field:focus-within { box-shadow: 0 0 0 2px var(--lueur-bord); }
  .scx-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none;
    color: var(--text); font: 500 16px/1 var(--sans); -webkit-appearance: none; appearance: none; }
  .scx-field input::placeholder { color: var(--muted-2); }
  .scx-field input::-webkit-search-cancel-button { display: none; }
  .scx-clear { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 0;
    border-radius: 50%; background: none; color: var(--muted); }
  .scx-room { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 18px 8px;
    font-size: 12.5px; color: var(--muted); }
  .scx-room .ico { color: var(--lueur); }
  .scx-room b { color: var(--text); font-weight: 600; }
  .scx-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; padding: 0 16px calc(var(--safe-bot) + 104px); }
  .scx-sugg:empty { display: none; }
  .scx-sugg { padding-bottom: 4px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
  .scx-sug { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 46px; padding: 0 2px;
    border: 0; background: none; color: var(--muted); font: 400 15.5px var(--sans); text-align: left; }
  .scx-sug b { color: var(--text); font-weight: 600; }
  .scx-sug .ico { color: var(--muted-2); }
  .scx-res { transition: opacity .15s; }
  .scx-res.stale { opacity: .5; }
  .scx-h { display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin: 24px 0 10px; font: 600 19px/1.2 var(--serif); letter-spacing: -.01em; }
  .scx-list { display: flex; flex-direction: column; }
  .scx-row { display: flex; align-items: center; gap: 12px; width: calc(100% + 16px); margin: 0 -8px;
    padding: 7px 8px; border: 0; border-radius: 12px; background: none; color: var(--text);
    text-align: left; font: inherit; }
  .scx-row:active { background: var(--card); }
  .scx-art { width: 52px; height: 52px; flex: none; border-radius: 6px; object-fit: cover; background: var(--card); }
  .ph { display: grid; place-items: center; color: var(--muted-2); background: var(--card); }
  .round { border-radius: 50% !important; }
  .scx-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .scx-t { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scx-t.two { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
  .scx-t.big { font-size: 18px; font-weight: 600; }
  .scx-s { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-variant-numeric: tabular-nums; }
  .scx-s .ico.tiny { width: .8em; height: .8em; vertical-align: -.05em; margin-right: 2px; }
  .scx-tag { font-style: normal; font-size: 10.5px; padding: 1px 5px; margin-right: 6px; border-radius: 4px;
    border: 1px solid var(--accent-bord); color: var(--accent); }
  .scx-num { width: 22px; flex: none; text-align: center; color: var(--muted-2); font-size: 14px;
    font-variant-numeric: tabular-nums; }
  .scx-ok { color: var(--lueur); }
  .scx-ok .ico { width: .85em; height: .85em; }
  /* en cours : égaliseur ; lancement : anneau qui tourne */
  .scx-eq { display: none; width: 18px; height: 16px; flex: none; align-items: flex-end; gap: 2px; }
  .scx-eq i { flex: 1; background: var(--lueur); border-radius: 1px; height: 40%; animation: scxeq 1s ease-in-out infinite; }
  .scx-eq i:nth-child(2) { animation-delay: -.35s; } .scx-eq i:nth-child(3) { animation-delay: -.7s; }
  @keyframes scxeq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
  .scx-row.playing .scx-eq { display: flex; }
  .scx-row.playing .scx-t { color: var(--lueur); }
  .scx-row.busy .scx-eq { display: block; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--line-forte); border-top-color: var(--lueur); animation: scxspin .8s linear infinite; }
  .scx-row.busy .scx-eq i { display: none; }
  @keyframes scxspin { to { transform: rotate(360deg); } }
  .scx-top-card { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding: 14px;
    border: 0; border-radius: 16px; background: var(--card); color: var(--text); text-align: left; font: inherit; }
  .scx-top-card:active { background: var(--card-hi); }
  .scx-top-art { width: 88px; height: 88px; flex: none; border-radius: 8px; object-fit: cover; }
  .scx-play-dot { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%;
    background: var(--lueur); color: var(--on-lueur); }
  .scx-top-card.playing .scx-play-dot, .scx-top-card.busy .scx-play-dot { display: none; }
  .scx-shelf { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .scx-shelf::-webkit-scrollbar { display: none; }
  .scx-card { flex: none; width: 144px; display: flex; flex-direction: column; gap: 6px; padding: 0;
    border: 0; background: none; color: var(--text); text-align: left; font: inherit; scroll-snap-align: start; }
  .scx-card-art { width: 144px; height: 144px; border-radius: 8px; object-fit: cover; }
  .scx-card:active .scx-card-art { opacity: .8; }
  .scx-card.artist { width: 112px; align-items: center; text-align: center; }
  .scx-card.artist .scx-card-art { width: 112px; height: 112px; }
  .scx-card .scx-t { max-width: 100%; font-size: 14px; }
  .scx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .scx-chip { min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--card-hi);
    color: var(--text); font: 500 14px var(--sans); }
  .scx-link { border: 0; background: none; color: var(--lueur); font: 600 13px var(--sans); padding: 8px 0; }
  .scx-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px;
    border: 0; border-radius: 999px; background: var(--lueur-fond); color: var(--lueur); font: 600 13px var(--sans); }
  .scx-hint { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 20px;
    padding: 14px 16px; border-radius: 14px; background: var(--card); color: var(--muted); font-size: 14px; line-height: 1.45; }
  .scx-empty { margin: 48px 12px; text-align: center; color: var(--muted); font-size: 15px; text-wrap: balance; }
  .scx-more { width: 100%; min-height: 44px; margin: 10px 0 0; border: 1px solid var(--line-forte); border-radius: 12px;
    background: none; color: var(--text); font: 600 14px var(--sans); }
  .scx-skel { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; }
  .scx-skel-row { display: flex; align-items: center; gap: 12px; }
  .scx-skel-row i { width: 52px; height: 52px; border-radius: 6px; background: var(--skel); }
  .scx-skel-row span { flex: 1; display: flex; flex-direction: column; gap: 8px; }
  .scx-skel-row b { display: block; height: 11px; width: 70%; border-radius: 6px; background: var(--skel);
    animation: scxpulse 1.2s ease-in-out infinite; }
  .scx-skel-row b + b { width: 40%; }
  @keyframes scxpulse { 50% { background: var(--skel-hi); } }
  .scx-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 8px 6px; }
  .scx-hero-art { width: 212px; height: 212px; border-radius: 10px; object-fit: cover;
    box-shadow: 0 18px 40px rgba(0,0,0,.45); }
  .scx-hero-art.round { width: 168px; height: 168px; }
  .scx-hero-t { margin: 18px 0 4px; font: 600 26px/1.15 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
  .scx-hero-s { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .scx-hero-act { display: flex; gap: 10px; margin-top: 18px; }
  .scx-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px;
    border: 1px solid var(--line-forte); border-radius: 999px; background: none; color: var(--text);
    font: 600 15px var(--sans); }
  .scx-btn.main { border: 0; background: var(--lueur); color: var(--on-lueur); }
  .scx-btn:disabled { opacity: .45; }
  .scx-now { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: calc(var(--safe-bot) + 12px);
    display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 10px; border-radius: 16px;
    background: var(--card-hi); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
  .scx-now[hidden] { display: none; }
  .scx-now-art { width: 44px; height: 44px; flex: none; border-radius: 6px; object-fit: cover; }
  .scx-now-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .scx-now-t b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scx-now-t span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scx-now-go { flex: none; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
    background: var(--lueur); color: var(--on-lueur); font: 600 13px var(--sans); }
  .scx :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .scx-field input:focus-visible { outline: 0; }       /* l'anneau est sur le champ entier */
  .scx-used { margin-top: 14px; font-size: 13px; color: var(--muted); }
  .scx-used b { color: var(--text); }
  .scx-used .scx-link { padding: 4px 0; font-size: 13px; }
  /* tablette / ordinateur : colonne lisible */
  @media (min-width: 760px) { .scx-top, .scx-room, .scx-scroll > * { max-width: 760px; width: 100%; margin-left: auto; margin-right: auto; } }
  @media (prefers-reduced-motion: reduce) {
    .scx, .scx-detail, .scx-res { transition: none; }
    .scx-eq i, .scx-skel-row b, .scx-row.busy .scx-eq { animation: none; }
  }

  /* ===== Qualité de la voix (Réglages) ===== */
  .q-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
  .q-rate { font: 600 34px/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .q-bars { display: flex; align-items: flex-end; gap: 4px; height: 38px; }
  .qb { width: 10px; border-radius: 3px 3px 1px 1px; background: var(--ok); opacity: .85; }
  .qb.warn { background: var(--accent); } .qb.bad { background: var(--err); }
  .q-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .qchip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px;
    background: var(--card-hi); color: var(--text); font-size: 12px; }
  .qchip.dim { color: var(--muted); }
  .q-run { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 14px 0 6px; }
  .q-run .linkbtn { border: 0; background: none; color: var(--lueur); font: 600 13px var(--sans); padding: 8px 0; min-height: 36px; }
  .q-sub { margin: 14px 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .qi { border-top: 1px solid var(--line); padding: 10px 0; }
  .qi > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
  .qi > summary::-webkit-details-marker { display: none; }
  .qi-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
  .qi-st { margin-left: auto; }
  .qi.haute .qi-when::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--err); margin-right: 6px; vertical-align: 1px; }
  .qi-tr { font-size: 15px; color: var(--text); }
  .qi-sum { font-size: 13px; color: var(--muted); line-height: 1.4; }
  .qi-sum.dim, .qi .dim { color: var(--muted-2); }
  .qi-body { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin-top: 10px; font-size: 13px; line-height: 1.45; }
  .qi-k { color: var(--muted); }
  .qi-act { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 6px; }
  .qi-act button { min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-forte);
    background: none; color: var(--text); font: 500 13px var(--sans); }
  @media (max-width: 420px) { .qi-body { grid-template-columns: 1fr; } }
  .qa { padding: 8px 0 8px 12px; border-left: 3px solid var(--accent); margin: 6px 0; font-size: 13px; line-height: 1.45; }
  .qa.haute { border-left-color: var(--err); }
  .q-grp > summary { cursor: pointer; list-style: none; }
  .q-grp > summary::-webkit-details-marker { display: none; }

  /* ===== Historique des photos de la sonnette (plus/doorhist.js) ===== */
  .dh { z-index: 58; background: var(--bg); color: var(--text); display: flex; flex-direction: column;
    opacity: 0; transform: translateY(12px); transition: opacity .16s ease, transform .2s ease; }
  .dh.ovl { padding: 0 !important; }
  .dh.in { opacity: 1; transform: none; }
  .dh.out { opacity: 0; }
  .dh-top, .dh-vtop { display: flex; align-items: center; gap: 6px; flex: none;
    padding: calc(var(--safe-top) + 10px) 12px 10px 6px; }
  .dh-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0;
    border-radius: 50%; background: none; color: var(--text); font-size: 22px; }
  .dh-ic:active { background: var(--card); }
  .dh-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .dh-title b { font: 600 19px/1.2 var(--serif); }
  .dh-count { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .dh-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 12px calc(var(--safe-bot) + 24px); }
  .dh-h { position: sticky; top: 0; z-index: 1; margin: 0; padding: 14px 4px 8px; background: var(--bg);
    font: 600 15px/1.2 var(--sans); color: var(--muted); letter-spacing: .01em; }
  .dh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 4px; }
  .dh-cell { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px; overflow: hidden;
    background: var(--card); cursor: pointer; }
  .dh-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .dh-cell img.broken { opacity: .15; }
  .dh-cell:active img { opacity: .8; }
  .dh-tag { position: absolute; left: 4px; bottom: 4px; display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 6px; border-radius: 999px; background: rgba(10, 12, 16, .66); color: #F5EFE6;
    font: 600 11px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
  .dh-tag .ico { width: 11px; height: 11px; }
  .dh-cap { position: absolute; right: 6px; top: 6px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--lueur); box-shadow: 0 0 0 2px rgba(10, 12, 16, .5); }
  .dh-more { height: 1px; }
  .dh-more.on { height: 40px; background: linear-gradient(90deg, transparent, var(--skel-hi), transparent); background-size: 200% 100%; animation: dhload 1.1s linear infinite; border-radius: 8px; margin-top: 8px; }
  @keyframes dhload { to { background-position: -200% 0; } }
  .dh-empty { margin: 48px 16px; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.5; text-wrap: balance; }
  /* visionneuse : fond noir (photo), textes clairs quel que soit le thème */
  .dh-view { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; background: #07090C;
    color: #F5EFE6; opacity: 0; transition: opacity .14s ease; }
  .dh-view.on { opacity: 1; } .dh-view.out { opacity: 0; }
  .dh-view .dh-ic { color: #F5EFE6; }
  .dh-vmeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .dh-vmeta b { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
  .dh-vmeta span { font-size: 12.5px; color: #B9B0A3; font-variant-numeric: tabular-nums; }
  .dh-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: pan-y; }
  /* ancrée dans la scène : la photo ne déborde jamais sur la légende */
  .dh-stage img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%;
    object-fit: contain; user-select: none; -webkit-user-drag: none; }
  .dh-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
    border: 0; background: rgba(245, 239, 230, .12); color: #F5EFE6; display: grid; place-items: center; font-size: 22px; }
  .dh-nav.prev { left: 10px; } .dh-nav.next { right: 10px; }
  .dh-nav:disabled { opacity: .25; }
  .dh-vcap { flex: none; margin: 0; padding: 12px 18px calc(var(--safe-bot) + 18px); font-size: 15px; line-height: 1.45;
    color: #F5EFE6; text-wrap: pretty; }
  .dh :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) { .dh, .dh-view { transition: none; } .dh-more.on { animation: none; } }

/* Son de la sonnette (Réglages) */
.ch-rooms { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ch-room { display: grid; grid-template-columns: minmax(130px, 1fr) 2fr 64px; align-items: center; gap: 10px; min-height: 40px; }
.ch-room .ch-on { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ch-room .ch-v { font-size: 13px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }