/* ============================================================
   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}
/* La carte Météo (widget de l'Accueil) vit dans /static/meteo-carte.css depuis 0.169.3 :
   l'aperçu du Studio la charge aussi, sans les icônes d'appareil. */
/* 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}