/* ============================================================
   LES ICÔNES D'APPAREIL DE L'ÉCRIN — feuille PARTAGÉE.
   ------------------------------------------------------------
   Extraite de app.html en 0.93.1 pour que l'ÉCRAN MURAL montre
   exactement les mêmes objets que l'application : la même ampoule qui
   s'allume, le même volet dont les lamelles suivent la position réelle,
   la même clim qui souffle. Deux copies auraient divergé au premier
   ajout d'icône — et un mur qui n'a pas la tête de l'app n'est pas un
   produit, c'est une deuxième interface.

   Chargée par : app.html · mur.html
   Dépend de : --ac, --jaune, --bleu, --cyan… (variables de thème du front)
   ============================================================ */
/* ---------------- icônes animées des appareils (reprises de la V1) ---------------- */
.ico{width:44px;height:44px;flex:0 0 auto;display:inline-block}
.ico svg{width:100%;height:100%;display:block;overflow:visible}
.ico-bulb .lit{opacity:0;transition:opacity .35s}
.ico-bulb.on .lit{opacity:1}
.ico-bulb.on .rays{animation:iray 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.ico-led .orb{transition:fill .35s}
.ico-clim .air{opacity:0;transition:opacity .35s}
.ico-clim.on .air{opacity:1}
/* Flux d'air coloré selon le mode publié par la box (etat.mode) — chaud/confort or-orangé,
   froid cyan, ventilation neutre, déshu cyan pâle, éco vert doux, réduit muet, hors gel bleu glacé */
.ico-clim.m-chaud .air,.ico-clim.m-confort .air{stroke:#e5885e}
.ico-clim.m-froid .air{stroke:var(--cyan)}
.ico-clim.m-ventil .air{stroke:#8a8578}
.ico-clim.m-deshu .air{stroke:#8fd0d8}
.ico-clim.m-eco .air{stroke:var(--vert)}
.ico-clim.m-reduit .air{stroke:#7a766b}
.ico-clim.m-horsgel .air{stroke:#9fc0e8}
.ico-clim.on .a1{animation:iair 1.9s ease-in-out infinite;transform-box:fill-box}
.ico-clim.on .a2{animation:iair 1.9s ease-in-out .3s infinite;transform-box:fill-box}
.ico-clim.on .a3{animation:iair 1.9s ease-in-out .6s infinite;transform-box:fill-box}
.ico-tv .screen{transition:fill .35s}
.ico-tv .standby{transition:opacity .35s}
.ico-tv.on .screen{fill:#123047;animation:itv 3.2s ease-in-out infinite}
.ico-tv.on .standby{opacity:0}
.ico-prise .bolt{transition:fill .35s}
.ico-prise.on .bolt{fill:var(--ac);animation:ibolt 1.7s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.ico-volet .shutter{transform-box:fill-box;transform-origin:top center;transition:transform .45s ease}
.ico-sonos .wave{opacity:0;transition:opacity .35s}
.ico-sonos.on .wave{opacity:1}
.ico-sonos.on .w1{animation:isonar 1.5s ease-in-out infinite}
.ico-sonos.on .w2{animation:isonar 1.5s ease-in-out .35s infinite}
.ico-cam .rec{transition:fill .35s}
.ico-cam.on .rec{fill:#e06a5e;animation:icam 1.6s ease-in-out infinite}
.ico-eau .ondes{opacity:.35}
.ico-eau.on .ondes{animation:ieau 1.6s ease-in-out infinite;transform-box:fill-box}
.ico-gaz .fli{animation:igaz 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}
@keyframes iray{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
@keyframes iair{0%{opacity:0;transform:translateY(-2px)}35%{opacity:1}100%{opacity:0;transform:translateY(8px)}}
@keyframes itv{0%,100%{fill:#123047}50%{fill:#16405f}}
@keyframes ibolt{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes isonar{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes icam{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes ieau{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
@keyframes igaz{0%,100%{transform:scale(1)}50%{transform:scale(1.07,1.13)}}
/* ---- Bibliothèque d'icônes sélectionnables (portail, chauffages, ventilation, luminaires, électroménager) ---- */
@keyframes ispin{to{transform:rotate(360deg)}}
@keyframes irise{0%,100%{transform:translateY(0);opacity:.95}50%{transform:translateY(-2.5px);opacity:.6}}
@keyframes iglow{0%,100%{opacity:.45}50%{opacity:.9}}
@keyframes ipulse{0%,100%{opacity:.1}50%{opacity:.32}}
@keyframes iping{0%{transform:scale(.6);opacity:.75}100%{transform:scale(1.4);opacity:0}}
@keyframes iring{0%,100%{transform:rotate(0)}25%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}}
.ico-portail1 .bat{transform-box:fill-box;transform-origin:left center;transition:transform .9s cubic-bezier(.4,0,.2,1)}.ico-portail1 .sol{opacity:0;transition:opacity .5s}
.ico-portail1.on .bat{transform:scaleX(.22)}.ico-portail1.on .sol{opacity:.9}
.ico-garage .porte{transform-box:fill-box;transform-origin:top;transition:transform .8s ease}.ico-garage.on .porte{transform:scaleY(.12)}
.ico-vmc .pales,.ico-ventil .pales{transform-box:fill-box;transform-origin:center}.ico-vmc.on .pales,.ico-ventil.on .pales{animation:ispin 1.05s linear infinite}
.ico-radiateur .chaud,.ico-plancher .chaud,.ico-seche .chaud{opacity:0;transition:opacity .4s}.ico-radiateur.on .chaud,.ico-plancher.on .chaud,.ico-seche.on .chaud{opacity:1;animation:irise 2s ease-in-out infinite}
.ico-chauffeeau .resist,.ico-four .glow,.ico-solaire .soleil{opacity:0}.ico-chauffeeau.on .resist,.ico-four.on .glow,.ico-solaire.on .soleil{animation:iglow 1.8s ease-in-out infinite;opacity:.7}
.ico-chauffeeau .bulles{opacity:0}.ico-chauffeeau.on .bulles{opacity:.9;animation:irise 2.4s ease-in-out infinite}
.ico-lumi .halo{opacity:0;transition:opacity .4s}.ico-lumi.on .halo{opacity:.17}.ico-lumi .src{transition:fill .35s}.ico-lumi.on .src{fill:#ffd089}.ico-lumi.on{filter:drop-shadow(0 0 5px rgba(255,208,137,.5))}
.ico-bandeau .leds circle{transition:fill .3s}.ico-bandeau.on .leds circle{fill:#ffd089}
.ico-lave .tambour{transform-box:fill-box;transform-origin:center}.ico-lave.on .tambour{animation:ispin 2s linear infinite}
.ico-alarme .pulse{opacity:0}.ico-alarme.on .pulse{animation:ipulse 1.5s ease-in-out infinite}
.ico-detecteur .onde{transform-box:fill-box;transform-origin:center;opacity:0}.ico-detecteur.on .onde{animation:iping 1.6s ease-out infinite}.ico-detecteur.on .led{fill:#69c690}
.ico-sonnette .cloche{transform-box:fill-box;transform-origin:top}.ico-sonnette.on .cloche{animation:iring .6s ease-in-out infinite}
.ico-ve .charge{opacity:0}.ico-ve.on .charge{opacity:1;animation:ipulse 1.2s infinite}.ico-ve.on .bolt{fill:#7fd8a0}
/* dynamiques eau / piscine / extérieur / techniques (0.40.0) */
@keyframes icoule{to{stroke-dashoffset:-14}}
@keyframes imonte{0%{transform:scaleY(.42)}80%{transform:scaleY(.96)}100%{transform:scaleY(.42)}}
@keyframes ivague{to{transform:translateX(-6px)}}
.ico-piscrempl .filet{opacity:0}.ico-piscrempl.on .filet{opacity:1;animation:icoule .6s linear infinite}
.ico-piscrempl .eau{transform-box:fill-box;transform-origin:bottom;transform:scaleY(.42)}.ico-piscrempl.on .eau{animation:imonte 4.5s ease-in-out infinite}
.ico-piscine .vague{transform-box:fill-box}.ico-piscine.on .vague{animation:ivague 1.5s linear infinite}.ico-piscine.on .vague.v2{animation-duration:2.1s}
.ico-arrosage .jets{opacity:0;transition:opacity .3s}.ico-arrosage.on .jets{opacity:1;animation:irise 1.1s ease-in-out infinite}
.ico-fontaine .jets{opacity:.22;transition:opacity .3s}.ico-fontaine.on .jets{opacity:1;animation:irise 1.4s ease-in-out infinite}
.ico-pompe .rotor{transform-box:fill-box;transform-origin:center}.ico-pompe.on .rotor{animation:ispin .9s linear infinite}
.ico-pompe .flux{opacity:0}.ico-pompe.on .flux{opacity:1;animation:icoule .7s linear infinite}
.ico-spa .bulles circle{opacity:.15}.ico-spa.on .bulles circle{opacity:1;animation:irise 1.8s ease-in-out infinite}
.ico-sirene .halo{opacity:0}.ico-sirene.on .halo{animation:ipulse 1s infinite}
.ico-sirene .onde{transform-box:fill-box;transform-origin:center;opacity:0}.ico-sirene.on .onde{animation:iping 1.2s ease-out infinite}
.ico-vanne .flux{opacity:0}.ico-vanne.on .flux{opacity:1;animation:icoule .7s linear infinite}
.ico-vanne .poignee{transform-box:fill-box;transform-origin:center;transition:transform .6s cubic-bezier(.4,0,.2,1)}.ico-vanne.on .poignee{transform:rotate(90deg)}
.ico-lavev .jets{opacity:0;transition:opacity .3s}.ico-lavev.on .jets{opacity:1;animation:irise 1.2s ease-in-out infinite}
.ico-guirl .g{opacity:.22}.ico-guirl.on .g{animation:iglow 1.4s ease-in-out infinite}
/* Widget météo */
.meteo-ico{flex:none;display:inline-flex}
.mh-p.vide{visibility:hidden}
/* Météo — refonte charte v1 (0.47.0) : serif, noir chaud + or, hairlines, sobriété.
   La STATION LOCALE est le héros quand elle existe (« Mesuré chez vous »),
   l'essentiel en façade, tout le reste replié derrière « Détails ». */
.meteo-carte{border-radius:18px;padding:18px 18px 14px;border:1px solid var(--bord);
  background:linear-gradient(168deg,color-mix(in srgb,var(--ac) 8%,transparent),transparent 46%)}
.meteo-carte.nuit{background:linear-gradient(168deg,rgba(120,130,160,.10),transparent 46%)}
.met-badge{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muet)}
.met-badge .pt-or{width:6px;height:6px;border-radius:50%;background:var(--ac);box-shadow:0 0 9px var(--ac);flex:none}
.met-heros{display:flex;align-items:baseline;gap:16px;margin-top:9px;flex-wrap:wrap}
.met-temp{font-family:"New York","New York Large",Georgia,"Times New Roman",serif;font-weight:400;
  font-size:56px;line-height:1;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.met-temp small{font-size:26px;color:var(--muet);font-weight:400}
.met-cond{display:flex;flex-direction:column;gap:3px;padding-bottom:7px;min-width:0}
.met-cond b{font-family:"New York","New York Large",Georgia,"Times New Roman",serif;font-weight:400;font-size:17px}
.met-cond span{font-size:12px;color:var(--muet);font-variant-numeric:tabular-nums}
.met-mesures{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;padding-top:11px;border-top:1px solid var(--bord);font-size:12.5px;color:var(--muet)}
.met-mesures b{color:var(--texte);font-weight:600;font-variant-numeric:tabular-nums}
.met-conseil{display:flex;align-items:center;gap:11px;margin-top:12px;font-size:13px;line-height:1.4;color:var(--texte)}
.met-jours{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin-top:14px;padding-top:12px;border-top:1px solid var(--bord);text-align:center}
.met-j{display:flex;flex-direction:column;align-items:center;gap:3px;padding:2px 0;border-left:1px solid color-mix(in srgb,var(--bord) 55%,transparent)}
.met-j:first-child{border-left:none}
.met-j .meteo-ico{width:23px;height:23px}
.met-j-d{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muet)}
.met-j-x{font-family:"New York","New York Large",Georgia,"Times New Roman",serif;font-size:14.5px;font-variant-numeric:tabular-nums}
.met-j-n{font-size:11px;color:var(--muet);font-variant-numeric:tabular-nums}
.met-j-p{font-size:9.5px;color:var(--cyan);min-height:11px}
.met-ephem{display:flex;justify-content:center;gap:24px;margin-top:12px;font-size:11.5px;color:var(--muet)}
.met-ephem b{color:var(--texte);font-weight:600;font-variant-numeric:tabular-nums}
.met-lune{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;font-size:11.5px;color:var(--muet)}
.met-lune svg{width:17px;height:17px}
.meteo-ico svg{width:100%;height:100%}
/* — contenus repliés (Détails) — */
.meteo-chips{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px}
.mc-chip{display:flex;align-items:baseline;gap:6px;font-size:12.5px}
.mc-chip span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muet)}
.mc-chip b{font-weight:600;font-variant-numeric:tabular-nums}
.meteo-heures{display:flex;gap:2px;margin-top:12px;padding-top:10px;border-top:1px solid var(--bord);overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.meteo-heures::-webkit-scrollbar{display:none}
.mh{flex:none;width:46px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 2px}
.mh .meteo-ico{width:21px;height:21px}
.mh-h{font-size:9.5px;color:var(--muet)}.mh-t{font-size:12.5px;font-variant-numeric:tabular-nums}.mh-p{font-size:9px;color:var(--cyan);min-height:11px}
.meteo-air{margin-top:12px;padding-top:11px;border-top:1px solid var(--bord)}
.ma-aqi{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muet)}.ma-aqi b{font-size:14px;font-weight:600;color:var(--texte)}
.ma-dot{width:9px;height:9px;border-radius:50%;flex:none}
.ma-pollens{display:flex;flex-wrap:wrap;gap:5px 16px;margin-top:8px}
.ma-pol{font-size:11.5px;color:var(--muet)}.ma-pol i{font-style:normal;color:var(--texte);font-weight:600}
/* Jauge de variation sur tuile (composant maison, hauteur fixe) */
.jauge{position:relative;height:8px;border-radius:99px;margin-top:11px;cursor:pointer;touch-action:none;
  background:linear-gradient(90deg,var(--c,var(--ac)) var(--pc,50%),var(--carte2) var(--pc,50%));border:1px solid var(--bord)}
.jauge i{position:absolute;top:50%;left:var(--pc,50%);transform:translate(-50%,-50%);width:15px;height:15px;border-radius:50%;
  background:#f4efe6;box-shadow:0 1px 4px rgba(0,0,0,.5);pointer-events:none}
/* lumière blanc variable : curseur chaud→froid */
.blanc-rangee{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:11px;color:var(--muet)}
.curseur.blanc{background:linear-gradient(90deg,#ffb15c,#fff7ea 50%,#a9c8ff)}
.curseur.blanc::-webkit-slider-thumb{background:#fff}.curseur.blanc::-moz-range-thumb{background:#fff}
/* Météo — icône de conseil + détails repliés (survol souris / clic tactile) */
.mia-i{width:24px;height:24px;flex:none}.mia-i svg{width:100%;height:100%}
.meteo-plus{margin-top:12px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:6px;
  border:none;background:transparent;color:var(--muet);font-family:inherit;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.meteo-plus .chev{transition:transform .25s}
.meteo-details{overflow:hidden;max-height:0;opacity:0;transition:max-height .35s ease,opacity .3s ease}
.meteo-carte.ouvert .meteo-details{max-height:1400px;opacity:1;margin-top:6px}
.meteo-carte.ouvert .meteo-plus .chev{transform:rotate(180deg)}
@media (hover:hover){
  .meteo-carte:hover .meteo-details{max-height:1400px;opacity:1;margin-top:6px}
  .meteo-carte:hover .meteo-plus .chev{transform:rotate(180deg)}
}