/* ==========================================================================
   Maison — v4 « ambiance » (complète design-system.css et app.css)
   --------------------------------------------------------------------------
   1. Ambiance : fond qui suit le moment de la journée et la météo
      <html data-moment="aube|matin|jour|soir|nuit" data-sky="clair|voile|pluie|neige|orage|brume">
   2. Verre dépoli des surfaces flottantes (rail, barre d'onglets, feuilles)
   3. Typographie (graisses, chiffres, titres équilibrés) et taille du texte (data-text="lg|xl")
   4. Micro-animations (tuiles, vues, retour), 60 fps : transform / opacity seulement
   5. Accueil téléphone : « Maintenant », pièce courante, aperçu des pièces
   6. Recherche universelle, personnalisation, geste de retour
   7. Écran de veille, connexion, tablettes 7" et 10"
   Aucune police téléchargée, aucune image : dégradés CSS seulement. Doc : docs/DESIGN.md § 10 (v4).
   ========================================================================== */

/* ------------------------------------------------------------------ 1. AMBIANCE */
@property --amb-a { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --amb-b { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --amb-c { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --sv-a { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --sv-b { syntax: '<color>'; inherits: true; initial-value: transparent; }

:root {
  /* « nuit » par défaut (avant le premier calcul) */
  --amb-a: rgba(88, 96, 214, .16); --amb-b: rgba(61, 130, 246, .08); --amb-c: rgba(167, 139, 250, .07);
  --sv-a: rgba(70, 80, 200, .42); --sv-b: rgba(40, 110, 220, .30);
  --veil: transparent;
  --glass-strong: color-mix(in srgb, var(--surface) 80%, transparent);
  --tile-bg: color-mix(in srgb, var(--surface) 90%, transparent);
}
:root[data-moment="aube"]  { --amb-a: rgba(255, 138, 101, .20); --amb-b: rgba(167, 139, 250, .15); --amb-c: rgba(91, 184, 220, .07); --sv-a: rgba(255, 128, 92, .40); --sv-b: rgba(150, 110, 240, .34); }
:root[data-moment="matin"] { --amb-a: rgba(255, 190, 100, .17); --amb-b: rgba(90, 176, 255, .13); --amb-c: rgba(52, 211, 153, .06); --sv-a: rgba(255, 180, 80, .36); --sv-b: rgba(80, 160, 255, .32); }
:root[data-moment="jour"]  { --amb-a: rgba(90, 176, 255, .17); --amb-b: rgba(80, 215, 200, .11); --amb-c: rgba(255, 181, 71, .06); --sv-a: rgba(70, 160, 255, .38); --sv-b: rgba(60, 200, 190, .28); }
:root[data-moment="soir"]  { --amb-a: rgba(255, 122, 61, .19); --amb-b: rgba(228, 107, 212, .14); --amb-c: rgba(109, 106, 245, .09); --sv-a: rgba(255, 110, 50, .40); --sv-b: rgba(210, 80, 200, .32); }
:root[data-moment="nuit"]  { --amb-a: rgba(88, 96, 214, .20); --amb-b: rgba(61, 130, 246, .11); --amb-c: rgba(167, 139, 250, .07); --sv-a: rgba(70, 80, 200, .42); --sv-b: rgba(40, 110, 220, .30); }
/* la météo voile le ciel : gris-bleu (pluie, brume), blanc froid (neige), violet (orage) */
:root[data-sky="voile"] { --veil: rgba(140, 150, 165, .05); }
:root[data-sky="pluie"] { --veil: rgba(110, 135, 170, .10); --amb-c: rgba(90, 130, 190, .10); }
:root[data-sky="brume"] { --veil: rgba(170, 175, 185, .09); }
:root[data-sky="neige"] { --veil: rgba(210, 225, 245, .09); --amb-c: rgba(200, 225, 255, .10); }
:root[data-sky="orage"] { --veil: rgba(120, 100, 170, .10); --amb-c: rgba(140, 100, 220, .12); }
/* thème clair : mêmes teintes, plus légères */
:root[data-theme="light"] { --veil: transparent; }
:root[data-theme="light"][data-moment="aube"]  { --amb-a: rgba(255, 138, 101, .16); --amb-b: rgba(167, 139, 250, .12); }
:root[data-theme="light"][data-moment="matin"] { --amb-a: rgba(255, 180, 70, .16); --amb-b: rgba(90, 176, 255, .12); }
:root[data-theme="light"][data-moment="jour"]  { --amb-a: rgba(70, 160, 255, .14); --amb-b: rgba(60, 200, 190, .10); }
:root[data-theme="light"][data-moment="soir"]  { --amb-a: rgba(255, 122, 61, .14); --amb-b: rgba(228, 107, 212, .11); }
:root[data-theme="light"][data-moment="nuit"]  { --amb-a: rgba(88, 96, 214, .11); --amb-b: rgba(61, 130, 246, .07); }
/* thème nuit (chambres) : aucun fond coloré */
:root[data-theme="night"] { --amb-a: transparent; --amb-b: transparent; --amb-c: transparent; --veil: transparent; --tile-bg: var(--surface); --glass-strong: var(--surface); }

/* Le fond d'ambiance est une couche fixe derrière l'application (GPU, ne défile pas, aucun repaint au défilement) */
.shell { background: none; }
.shell::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 620px at -6% -14%, var(--amb-a), transparent 68%),
    radial-gradient(900px 560px at 108% -18%, var(--amb-b), transparent 70%),
    radial-gradient(1000px 520px at 50% 118%, var(--amb-c), transparent 72%),
    linear-gradient(180deg, var(--veil) 0%, transparent 55%);
  transition: --amb-a 2.4s ease, --amb-b 2.4s ease, --amb-c 2.4s ease;
}

/* ------------------------------------------------------------------ 2. VERRE DÉPOLI (surfaces flottantes) */
.rail {
  background: color-mix(in srgb, var(--bg-elev) 66%, transparent);
  -webkit-backdrop-filter: saturate(170%) blur(26px); backdrop-filter: saturate(170%) blur(26px);
}
.tabbar { background: color-mix(in srgb, var(--bg-elev) 70%, transparent); box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .55); }
.sheet {
  background: var(--glass-strong);
  -webkit-backdrop-filter: saturate(160%) blur(30px); backdrop-filter: saturate(160%) blur(30px);
  box-shadow: var(--elev-3), inset 0 0 0 1px var(--border), inset 0 1px 0 rgba(255, 255, 255, .06);
}
[data-theme="light"] .sheet { --glass-strong: color-mix(in srgb, var(--surface) 86%, transparent); }
.sheet-backdrop { background: color-mix(in srgb, var(--scrim) 85%, transparent); }
.toast { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
/* cartes et tuiles : à peine translucides, l'ambiance transparaît sans nuire au contraste */
.tile:not(.scene), .card, .dev-list, .list:not(.srch__list):not(.settings__nav) { background-color: var(--tile-bg); }
.tile.is-on { background-color: var(--surface); }

/* ------------------------------------------------------------------ 3. TYPOGRAPHIE */
h1, h2, h3, .section__title, .titlebar__title, .tile__name, .empty__title, .sheet__title { text-wrap: balance; }
.section__title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; }
.titlebar__title { letter-spacing: -0.022em; }
.tile__state, .now-pill, .tile__meta, .list__sub, .qa__state, [data-clock], .hslider__value { font-variant-numeric: tabular-nums; }
.list__title { letter-spacing: -0.006em; }
.topbar__clock, .roomv__clock time, .screensaver__clock { font-feature-settings: "tnum", "ss01"; }

/* Taille du texte (Compte › Affichage) : toute l'échelle monte ; les libellés d'onglets restent compacts */
:root[data-text="lg"] { --fs-xs: 15px; --fs-sm: 16px; --fs-base: 17px; --fs-md: 19px; --fs-lg: 22px; --fs-xl: 28px; --fs-2xl: 32px; --fs-toast: 20px; }
:root[data-text="xl"] { --fs-xs: 17px; --fs-sm: 18px; --fs-base: 20px; --fs-md: 22px; --fs-lg: 25px; --fs-xl: 31px; --fs-2xl: 35px; --fs-toast: 22px; }
:root[data-text="lg"][data-profile="room"] { --fs-xs: 17px; --fs-sm: 18px; --fs-base: 20px; --fs-md: 22px; --fs-lg: 24px; --fs-xl: 28px; --fs-2xl: 34px; }
:root[data-text="xl"][data-profile="room"] { --fs-xs: 19px; --fs-sm: 20px; --fs-base: 22px; --fs-md: 24px; --fs-lg: 26px; --fs-xl: 30px; --fs-2xl: 38px; }
:root[data-text] .tabbar__item, :root[data-text] .rail__item { font-size: 13px; }
:root[data-text="xl"] .tile__name { white-space: normal; }
.text-size { margin-top: var(--sp-2); }
.text-size .seg__item { gap: 8px; min-height: 48px; }
.text-size__a { font-weight: 700; line-height: 1; }
.text-size__a--0 { font-size: 13px; } .text-size__a--1 { font-size: 17px; } .text-size__a--2 { font-size: 21px; }
.prefs { margin-top: var(--sp-5); display: grid; gap: var(--sp-2); }
.prefs__label { display: flex; align-items: center; gap: 6px; }
.prefs__row { border-radius: var(--r-md); background: var(--fill); margin-top: var(--sp-3); }

/* ------------------------------------------------------------------ 4. MICRO-ANIMATIONS */
.tile__icon { transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-spring); }
.tile.is-on .tile__icon { animation: v4-pop .42s var(--ease-spring); }
.tile:active .tile__icon { transform: scale(.94); }
.tile__pip { transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.switch::after, .switch::before { will-change: transform; }
.hslider__fill { transition: width var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.nav-back .view-enter { animation: v4-enter-back var(--dur-slow) var(--ease-out) both; }
.is-found { animation: v4-found 1.6s var(--ease-out); border-radius: var(--r-lg); }
@keyframes v4-pop { 0% { transform: scale(.82); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes v4-enter-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes v4-found { 0%, 60% { box-shadow: 0 0 0 3px var(--focus); } 100% { box-shadow: 0 0 0 3px transparent; } }
@keyframes v4-aurora { 0% { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(3%, 2%, 0) rotate(8deg) scale(1.08); } 100% { transform: translate3d(-2%, 4%, 0) rotate(-6deg) scale(1.02); } }
.skel { animation-duration: 1.3s; }

/* ------------------------------------------------------------------ 5. ACCUEIL TÉLÉPHONE */
.home-top__title { font-size: var(--fs-2xl); letter-spacing: -0.028em; line-height: 1.08; }
.home-top .topbar__eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.home-where { display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); }
.home-top .topbar__eyebrow .badge { padding-top: 1px; padding-bottom: 1px; }
.home-top [data-date-short] { display: inline-block; }
.home-top [data-date-short]::first-letter { text-transform: uppercase; }
.home-top .topbar__logo { display: none; }
.search-btn { --btn-bg: var(--fill); width: 44px; height: 44px; }
.search-btn .icon { width: 22px; height: 22px; stroke-width: 2; }
.home-top .topbar__actions { flex-wrap: nowrap; }

.now {
  position: relative; isolation: isolate; overflow: hidden;
  margin: var(--sp-3) 0 var(--sp-4); padding: var(--sp-2) var(--sp-3) var(--sp-3);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 160% at 0% 0%, var(--amb-a), transparent 70%),
    radial-gradient(90% 140% at 100% 100%, var(--amb-b), transparent 70%),
    color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: var(--elev-2), inset 0 0 0 1px var(--hairline), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.now__wx { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 64px; padding: var(--sp-1) var(--sp-1); text-align: left; border-radius: var(--r-lg); }
.now__wx:active { transform: scale(.985); }
.now__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--fill); color: var(--c-lit); flex: none; }
.now__icon .icon { width: 30px; height: 30px; }
.now__temp { font-family: var(--font-display); font-size: clamp(38px, 10vw, 48px); font-weight: 300; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.now__wxt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.now__wxt b { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.now__wxt span { font-size: var(--fs-sm); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now__more { color: var(--text-3); }
.now__pills { display: flex; flex-wrap: wrap; gap: 8px; padding: var(--sp-2) var(--sp-1) 0; }
.now-pill {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--fill); color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur) var(--ease-out);
}
a.now-pill::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
a.now-pill:active { transform: scale(.95); }
.now-pill .icon { width: 16px; height: 16px; stroke-width: 2; }
.now-pill--lit { background: var(--c-lit-bg); color: var(--c-lit-fg); }
.now-pill--cover { background: var(--c-cover-bg); color: var(--c-cover-fg); }
.now-pill--alert { background: var(--c-alert-bg); color: var(--c-alert-fg); }
.now-pill--heat { background: var(--c-heat-bg); color: var(--c-heat-fg); }
.now-pill--device { background: var(--c-device-bg); color: var(--c-device-fg); }
.now-pill--cinema { background: var(--c-cinema-bg); color: var(--c-cinema-fg); }
.now-pill--info { background: var(--c-info-bg); color: var(--c-info-fg); }
.now-pill--where { background: transparent; color: var(--text-2); padding: 0 6px; }
.now-skel { height: 132px; border-radius: var(--r-xl); }

.resume {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0 0 var(--sp-4); padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);
  border-radius: var(--r-lg); background: var(--tile-bg); box-shadow: var(--elev-1), inset 0 0 0 1px var(--hairline);
}
.resume__open { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 0; min-height: 56px; color: inherit; }
.resume__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--fill); color: var(--text-2); flex: none; transition: background-color var(--dur), color var(--dur); }
.resume__icon.is-on { background: var(--c-lit); color: var(--text-on-color); box-shadow: 0 6px 18px -6px var(--c-lit); }
.resume__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.resume__text .t-overline { font-size: 11px; letter-spacing: .1em; }
.resume__text b { font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resume__text span:last-child { font-size: var(--fs-sm); color: var(--text-2); }
.home-foot { display: flex; justify-content: center; margin: var(--sp-6) 0 var(--sp-2); }
.home-foot .btn { color: var(--text-2); }

/* aperçu de la pièce sur sa tuile */
.tile__meta { order: 2; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); color: var(--text-3); margin-top: -4px; }
.tile__progress { order: 3; }
.tile__metai { display: inline-flex; align-items: center; gap: 4px; }
.tile__metai.is-lit { color: var(--c-lit-fg); }
.tile__metai.is-open { color: var(--c-cover-fg); }
.icon--xs { width: 15px; height: 15px; stroke-width: 2; }

/* ------------------------------------------------------------------ 6. RECHERCHE, PERSONNALISATION, RETOUR */
.rail__search { color: var(--text-2); }
@media (orientation: landscape) and (min-width: 600px) { .dash-search { display: none; } }
/* tablette 7"/10" en paysage peu haute : le rail garde toutes ses entrées (Famille, Chercher…) sans couper l'avatar */
@media (orientation: landscape) and (min-width: 600px) and (max-height: 700px) {
  .rail { overflow-y: auto; scrollbar-width: none; gap: 0; }
  .rail::-webkit-scrollbar { display: none; }
  .rail__item { min-height: 52px; gap: 2px; }
  .rail__item .icon { width: 23px; height: 23px; }
  .rail__demo, .rail__status > span { display: none; }
  .rail__status { min-height: 44px; justify-content: center; }
}
.srch { display: flex; flex-direction: column; gap: var(--sp-4); min-height: 0; }
.srch__field { position: sticky; top: 0; z-index: 1; display: block; }
.srch__field > .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
.srch__input { width: 100%; min-height: 54px; padding-left: 50px; border-radius: var(--r-pill); font-size: max(17px, var(--fs-md)); background: var(--surface-2); }
.srch__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.srch__results { display: flex; flex-direction: column; gap: var(--sp-4); }
.srch__group { display: flex; flex-direction: column; gap: var(--sp-2); }
.srch__gtitle { padding-left: var(--sp-2); }
.srch__list { list-style: none; margin: 0; padding: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--fill); }
.srch__row { display: flex; align-items: center; gap: var(--sp-2); padding-right: var(--sp-3); }
.srch__row + .srch__row { border-top: 1px solid var(--hairline); }
.srch__main { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 0; min-height: 60px; padding: var(--sp-2) var(--sp-3); color: inherit; text-align: left; }
.srch__main:active { background: var(--fill); }
.srch__main .list__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.srch__main .list__title, .srch__main .list__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch__main .list__icon.is-on { background: var(--c-lit); color: var(--text-on-color); }
.srch__verb { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--brand); padding: 6px 12px; border-radius: var(--r-pill); background: var(--c-info-bg); }
.srch__empty { display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 var(--sp-1); }
.srch__none { padding: var(--sp-8) var(--sp-4); }
@media (min-width: 600px) and (min-height: 500px) and (orientation: landscape), (min-width: 900px) {
  .sheet--search { top: 8vh; transform: translate(-50%, -12px) scale(.98); max-height: 80vh; }
  .sheet--search.is-open { transform: translate(-50%, 0) scale(1); }
}
@media (max-width: 599.98px), (max-width: 899.98px) and (orientation: portrait), (max-height: 499.98px) {
  .sheet--search { height: calc(100dvh - 24px - env(safe-area-inset-top)); }
}

.reorder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.reorder.is-sorting { touch-action: none; }
.reorder__row {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; padding: 6px var(--sp-3) 6px 0;
  border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), opacity var(--dur);
}
.reorder__row.is-dragging { transition: none; position: relative; z-index: 2; box-shadow: var(--elev-3), inset 0 0 0 1.5px var(--brand); background: var(--surface-3); }
.reorder__row.is-off .reorder__name, .reorder__row.is-off .list__icon { opacity: .45; }
.reorder__grip { width: 44px; height: 52px; display: grid; place-items: center; color: var(--text-3); cursor: grab; touch-action: none; flex: none; }
.reorder__row.is-dragging .reorder__grip { cursor: grabbing; color: var(--brand); }
.reorder__name { flex: 1; min-width: 0; font-weight: var(--fw-semibold); }
.reorder__move { --btn-bg: transparent; width: 44px; height: 44px; color: var(--text-2); flex: none; }
@media (max-width: 479.98px) { .reorder__row .list__icon { display: none; } .reorder__row { gap: 4px; } .reorder__row .switch { margin-left: 6px; } }
.reorder__name { overflow-wrap: anywhere; line-height: 1.2; }
.reorder__hint { margin-bottom: var(--sp-3); color: var(--text-2); font-size: var(--fs-sm); }

.back-swipe {
  position: fixed; left: 0; top: 50%; z-index: calc(var(--z-sheet) - 1);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass-strong); color: var(--text); box-shadow: var(--elev-2);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transform: translate(calc(var(--p, 0) * 64px - 48px), -50%) scale(calc(.7 + var(--p, 0) * .3));
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast), background-color var(--dur-fast);
}
.back-swipe.is-on { opacity: calc(var(--p, 0) * 1.2); }
.back-swipe.is-ready { background: var(--brand); color: var(--text-on-color); }

/* ------------------------------------------------------------------ 7a. ÉCRAN DE VEILLE : horloge, météo, ambiance qui dérive */
.screensaver { overflow: hidden; }
.screensaver::before {
  content: ""; position: absolute; inset: -25%; pointer-events: none;
  background:
    radial-gradient(38% 34% at 28% 32%, var(--sv-a), transparent 70%),
    radial-gradient(42% 38% at 74% 70%, var(--sv-b), transparent 72%),
    radial-gradient(30% 26% at 62% 22%, var(--amb-c), transparent 70%);
  animation: v4-aurora 80s ease-in-out infinite alternate;
  will-change: transform; opacity: .85;
}
.screensaver::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 70% at 50% 50%, transparent 40%, rgba(0, 0, 0, .55) 100%); }
.screensaver__inner, .screensaver__brand, .screensaver__room { position: relative; z-index: 1; }
.screensaver__brand, .screensaver__room { position: absolute; }
.screensaver__clock { font-weight: 200; color: rgba(255, 255, 255, .94); text-shadow: 0 2px 40px rgba(0, 0, 0, .35); }
.screensaver__date { color: rgba(235, 238, 242, .72); letter-spacing: .01em; }
.screensaver__date::first-letter { text-transform: uppercase; }
.screensaver__weather { padding: 10px 22px 10px 16px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); color: rgba(240, 242, 245, .9); }
.screensaver__weather small { color: rgba(225, 230, 236, .62); }
.screensaver__room { color: rgba(240, 242, 245, .55); font-size: clamp(15px, 2.4vmin, 22px); font-weight: var(--fw-medium); }
.screensaver__brand { color: rgba(240, 242, 245, .28); }
.screensaver--night::before, [data-theme="night"] .screensaver::before, .screensaver--night::after, [data-theme="night"] .screensaver::after { display: none; }
.screensaver--night .screensaver__clock, [data-theme="night"] .screensaver__clock { color: inherit; text-shadow: none; }
.screensaver--night .screensaver__date, [data-theme="night"] .screensaver__date { color: #6B3122; }
.screensaver--night .screensaver__room, [data-theme="night"] .screensaver__room { color: #3A1C10; }

/* ------------------------------------------------------------------ 7b. CONNEXION (login.html charge aussi ce fichier) */
.login { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); }
.login::before {
  content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(36% 30% at 24% 26%, var(--sv-a), transparent 70%),
    radial-gradient(40% 34% at 78% 74%, var(--sv-b), transparent 72%),
    radial-gradient(26% 22% at 70% 18%, rgba(91, 184, 220, .22), transparent 70%);
  animation: v4-aurora 60s ease-in-out infinite alternate; will-change: transform; opacity: .75;
}
[data-theme="light"] .login::before { opacity: .45; }
@media (max-width: 479.98px) { .login__card { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }
.login__card {
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  -webkit-backdrop-filter: saturate(170%) blur(32px); backdrop-filter: saturate(170%) blur(32px);
  box-shadow: var(--elev-3), inset 0 0 0 1px var(--border), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.login__logo { box-shadow: 0 12px 40px -10px rgba(91, 184, 220, .55), 0 0 0 1px rgba(255, 255, 255, .5); }
.login__title { font-size: clamp(30px, 26px + 1vw, 40px); letter-spacing: -0.03em; }
.login__greet { display: block; margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--text-2); }
.login .input { background: color-mix(in srgb, var(--surface-2) 85%, transparent); }

/* ------------------------------------------------------------------ 7c. TABLETTE 7" (vue pièce) : lisible à 2 m */
[data-profile="room"] .roomv__name { font-size: clamp(30px, 4.6vmin + 8px, 46px); font-weight: 800; letter-spacing: -0.03em; }
[data-profile="room"] .roomv__clock time { font-weight: 250; }
[data-profile="room"] .roomv__state { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); }
[data-profile="room"] .roomv__lights, [data-profile="room"] .roomv__covers { box-shadow: var(--elev-2), inset 0 0 0 1px var(--hairline); }
[data-profile="room"] .hslider__value { font-size: clamp(26px, 4vmin + 6px, 40px); font-weight: 700; letter-spacing: -0.02em; }
[data-profile="room"] .roomv__cname { font-size: var(--fs-lg); font-weight: 700; }

/* ------------------------------------------------------------------ 7d. TABLETTE 10" : tableau façon « hub » */
[data-profile="home"] .dash-top .topbar__clock { font-weight: 200; letter-spacing: -0.05em; }
[data-profile="home"] .dash-wx {
  background: radial-gradient(120% 160% at 0% 0%, var(--amb-a), transparent 70%), color-mix(in srgb, var(--surface) 70%, transparent);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: var(--elev-2), inset 0 0 0 1px var(--hairline), inset 0 1px 0 rgba(255, 255, 255, .06);
}
[data-profile="home"] .dash-top .topbar__summary { font-size: var(--fs-md); color: var(--text-2); }

/* ------------------------------------------------------------------ mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .shell::before { transition: none; }
  .screensaver::before, .login::before, .tile.is-on .tile__icon, .nav-back .view-enter, .is-found { animation: none; }
  .back-swipe, .reorder__row { transition: none; }
}