/* ============================================================ PAGE PLAN — l'étage et le rez-de-chaussée en paysage, le sud à droite. L'étage vient du relevé du croquis, le rez-de-chaussée des cotes de Fred (28/09/2026) ; les lits se déplacent au doigt. ============================================================ */ .page-plan{ position:fixed; inset:0; z-index:4; display:none; flex-direction:column; gap:10px; overflow:hidden; padding: calc(14px + var(--haut-sur)) 26px calc(104px + env(safe-area-inset-bottom)); max-width:1500px; margin:0 auto; } .page-plan.visible{display:flex} .page-plan .page-titre{flex:none; margin:0 0 2px} /* Pas de carte sous le plan : le dessin se pose directement sur la page et recupere la place que prenaient le fond, la bordure et la marge interieure. */ .plan-carte{background:transparent;border:0;border-radius:0;padding:0; overflow:visible;flex:1 1 auto;min-height:0;display:flex} .plan-svg{width:100%;height:100%;display:block;touch-action:none} /* Les niveaux de la maison remplacent le titre de la page : on ne lit pas « Plan — étage », on choisit l'étage. Ce sont les mêmes niveaux que les sous-onglets des réglages, renommables au même endroit. */ .plan-entete{display:flex;align-items:flex-start;gap:10px;flex:none;margin:0 0 2px} .plan-niveaux{display:flex;flex-wrap:wrap;gap:7px;flex:1 1 auto;margin:0; padding-left:10px;border-left:1px solid var(--trait)} /* À l'écart des niveaux : eux disent « où », celui-ci dit « comment ». */ .bouton-vue-plan{ flex:none;display:flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:12px;cursor:pointer; border:1px solid var(--trait);background:var(--surface);color:var(--texte-doux); } .bouton-vue-plan:hover{color:var(--texte)} .bouton-vue-plan[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff} /* La liste des pièces du niveau, à la place du plan. */ .plan-liste{flex:1 1 auto;min-height:0;overflow-y:auto;padding:2px 2px 8px} .plan-liste[hidden]{display:none} /* Une pièce ouverte depuis le plan : mêmes tuiles que sur la page Pièces, mais sans quitter l'onglet. */ .plan-piece{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column} .plan-piece[hidden]{display:none} .plan-piece .page-titre{padding-right:0;margin-bottom:8px} .plan-liste-ligne{ display:flex;align-items:center;gap:12px;width:100%;text-align:left; padding:11px 12px;margin-bottom:8px;cursor:pointer; border:1px solid var(--trait);border-radius:14px; background:var(--surface);color:var(--texte);font:inherit; } .plan-liste-ligne:hover{border-color:var(--trait-fort)} .plan-liste-ligne .nom{flex:1;font-size:var(--t-13);font-weight:650} .plan-liste-ligne .compte{font-size:var(--t-11);color:var(--texte-doux)} .plan-liste-vide{padding:18px 4px;color:var(--texte-doux);font-size:var(--t-13);text-align:center} /* Une zone en liste (29/09/2026) : le titre de chaque pièce, puis ses appareils. */ .plan-liste-titre{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:14px 6px 6px; border:0;background:none;color:var(--texte);font:inherit;font-size:var(--t-13);font-weight:750} .plan-liste-titre .nom{flex:1} .plan-liste-titre .compte{font-size:var(--t-11);font-weight:500;color:var(--texte-doux)} .plan-liste-titre-piece{cursor:pointer;border-radius:10px} .plan-liste-titre-piece:hover{background:var(--surface-creuse)} .plan-liste-appareil .nom{font-weight:600} .plan-liste-appareil .compte{max-width:45%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .plan-absent{flex:1 1 auto;display:flex;align-items:center;justify-content:center; text-align:center;padding:24px;color:var(--texte-doux);font-size:var(--t-13)} .plan-absent[hidden]{display:none} /* La liste des appareils à poser : un menu appelé par un clic droit ou un appui long, à l'endroit visé. Il ne prend de la place que le temps qu'on s'en serve -- le plan garde toute la hauteur le reste du temps. */ .plan-menu{ position:fixed;z-index:60;min-width:210px;max-width:min(320px,86vw);max-height:min(50vh,380px); overflow-y:auto;overscroll-behavior:contain;padding:6px;border-radius:14px; background:var(--surface);border:1px solid var(--trait);box-shadow:var(--ombre-2); } .plan-menu[hidden]{display:none} /* La tuile de la pièce, posée près de l'ouverture qu'on vient de toucher. Sa largeur est celle qui laisse le rail manipulable. */ .plan-tuile{position:fixed;z-index:61;width:264px} .plan-tuile[hidden]{display:none} .plan-tuile .tuile{width:100%;height:136px;box-shadow:var(--ombre-2)} .plan-tuile .poignee-redim{display:none} .plan-menu-titre{ padding:7px 10px 8px;font-size:var(--t-11);font-weight:650;letter-spacing:.04em; text-transform:uppercase;color:var(--texte-doux); } .plan-menu-vide{padding:4px 10px 10px;font-size:var(--t-13);color:var(--texte-doux)} .appareil-choix{ display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border:none; border-radius:10px;background:none;color:var(--texte);font:inherit;font-size:var(--t-13); font-weight:600;text-align:left;cursor:pointer; } .appareil-choix:hover{background:var(--surface-creuse)} .appareil-choix:active{transform:scale(.99)} .appareil-choix .pastille-type{width:10px;height:10px;border-radius:50%;flex:none} .appareil-choix .piece-choix{margin-left:auto;font-weight:500;color:var(--texte-doux);font-size:var(--t-11)} /* La liste des capteurs d'une pièce : une case par appareil, et un bouton pour refermer. Même dessin que les choix ci-dessus, la case en plus -- on coche ce qu'on veut voir. */ .appareil-coche{ display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px; border-radius:10px;font-size:var(--t-13);font-weight:600;cursor:pointer; } .appareil-coche:hover{background:var(--surface-creuse)} .appareil-coche input{flex:none;width:16px;height:16px;accent-color:var(--accent);cursor:pointer} .appareil-coche .pastille-type{width:10px;height:10px;border-radius:50%;flex:none} .appareil-coche .piece-choix{margin-left:auto;font-weight:500;color:var(--texte-doux);font-size:var(--t-11)} .volet-a-mesurer{ display:flex;align-items:center;gap:8px;padding:5px 2px; font-size:var(--t-13);cursor:pointer; } .volet-a-mesurer input{flex:none;width:15px;height:15px;accent-color:var(--accent);cursor:pointer} .volet-a-mesurer .raison{margin-left:auto;color:var(--texte-doux);font-size:var(--t-11)} .plan-menu-pied{padding:8px 10px 4px} .plan-menu-pied .bouton{width:100%} #page-plan .appareil-g{cursor:grab} #page-plan .appareil-g.attrape{cursor:grabbing} #page-plan .appareil-pastille{stroke:#fff;stroke-width:3;filter:url(#pl-ombre-meuble)} #page-plan .appareil-lettres{font-size:19px;font-weight:800;fill:#fff;text-anchor:middle;dominant-baseline:central;pointer-events:none} /* Les tracés des icônes portent stroke="currentColor" : un attribut de présentation posé sur l'élément lui-même l'emporte sur ce qu'il hérite du groupe. Fixer le stroke du groupe ne suffisait donc pas -- le dessin suivait la couleur du texte, sombre le jour, claire la nuit. On fixe la COULEUR : currentColor vaut alors blanc, sur les deux thèmes, comme il se doit sur une pastille pleine. */ #page-plan .appareil-icone{color:#fff;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} #page-plan .appareil-icone text{fill:#fff;stroke:none} #page-plan .appareil-g.selectionnee .appareil-pastille{stroke:#E24C3F;stroke-width:4} /* Les capteurs : une étiquette de valeurs à la place de l'icône. */ #page-plan .appareil-valeurs text{font-size:21px;font-weight:700;fill:#fff;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums;pointer-events:none} /* La croix de retrait se montre au survol, plus sur une sélection : un clic sur une pastille ouvre ce qu'elle commande. */ /* Plus de croix au survol : ce qu'on montre ou non se décide dans la liste de la pièce, au clic droit. Une croix rouge qui apparaît sous la souris invitait surtout à retirer une pastille par mégarde. */ #page-plan .type-volet .appareil-pastille{fill:#5B86B4} #page-plan .type-piece_volets .appareil-pastille{fill:#3F6A9C} #page-plan .type-lumiere .appareil-pastille{fill:#D9A441} #page-plan .type-capteur .appareil-pastille{fill:#7C8A78} #page-plan .type-borne .appareil-pastille{fill:#8B5E34} #page-plan .type-compteur .appareil-pastille{fill:#7C8A78} /* Beaucoup de traits du plan sont decoratifs (velux, plinthes, la vignette d'ambiance des coins) et se superposent parfois aux lits ou aux futures pastilles d'appareils dans l'ordre de dessin. Sans quoi un doigt posé pile sur un velux « attrape » le velux au lieu du lit qui est dessous. Le plan est donc inerte par défaut, et seuls les lits et les pastilles d'appareils redeviennent saisissables. */ #page-plan .plan-defs{position:absolute;width:0;height:0} /* Le plan repris de l'étude « sécurité sur plan » : l'extérieur (le rez-de-chaussée a été redessiné le 28/09/2026 dans le style de l'étage). Seul le style « rendu » de l'étude est conservé. */ #plan-ext .vignette, #page-plan .plan-defs .vignette, #plan-ext .halo, #page-plan .plan-defs .halo, #plan-ext .reflet, #page-plan .plan-defs .reflet, #plan-ext .lumiere-piece, #page-plan .plan-defs .lumiere-piece, #plan-ext .reflet-vitre, #page-plan .plan-defs .reflet-vitre, #plan-ext .tapis, #page-plan .plan-defs .tapis, #plan-ext .tapis-bord, #page-plan .plan-defs .tapis-bord, #plan-ext .mur-lumiere, #page-plan .plan-defs .mur-lumiere, #plan-ext .mur-ombre, #page-plan .plan-defs .mur-ombre, #plan-ext .ombre-sol, #page-plan .plan-defs .ombre-sol{display:none} #plan-ext .vignette, #page-plan .plan-defs .vignette{display:block; pointer-events:none} #plan-ext .lumiere-piece, #page-plan .plan-defs .lumiere-piece{display:block; pointer-events:none} #plan-ext .murs-g, #page-plan .plan-defs .murs-g{filter:none} #plan-ext .mur-lumiere, #page-plan .plan-defs .mur-lumiere{display:block; stroke:#EDE4D2; stroke-opacity:.55; stroke-linecap:square} #plan-ext .mur-ombre, #page-plan .plan-defs .mur-ombre{display:block; stroke:#000000; stroke-opacity:.22; stroke-linecap:square} #plan-ext .mobilier, #page-plan .plan-defs .mobilier{filter:url(#sq-ombre-meuble)} #plan-ext .reflet, #page-plan .plan-defs .reflet{display:block; pointer-events:none} #plan-ext .reflet-vitre, #page-plan .plan-defs .reflet-vitre{display:block; pointer-events:none; stroke:#FFFFFF; stroke-opacity:.55; stroke-width:2.4; stroke-linecap:round} #plan-ext .tapis, #page-plan .plan-defs .tapis{display:block} #plan-ext .tapis-bord, #page-plan .plan-defs .tapis-bord{display:block} #plan-ext .ombre-sol, #page-plan .plan-defs .ombre-sol{display:block} #plan-ext .eau-p, #page-plan .plan-defs .eau-p{fill:url(#sq-eau-motif) !important} #plan-ext .feuillage, #page-plan .plan-defs .feuillage{fill:#8FB57A} #plan-ext .feuillage2, #page-plan .plan-defs .feuillage2{fill:#6E9A5C; fill-opacity:.9} #plan-ext .feuillage-clair, #page-plan .plan-defs .feuillage-clair{fill:#B9D89E} #plan-ext svg.plan, #page-plan .plan-defs svg.plan{width:100%; height:auto; display:block} #plan-ext .plan[hidden], #page-plan .plan-defs .plan[hidden]{display:none} #plan-ext .mur, #page-plan .plan-defs .mur{stroke:#3B3731; stroke-linecap:square} #plan-ext .mur-lumiere, #page-plan .plan-defs .mur-lumiere, #plan-ext .mur-ombre, #page-plan .plan-defs .mur-ombre{stroke-width:1.6} #plan-ext .vide, #page-plan .plan-defs .vide{stroke:#F3F0EA; stroke-width:12; stroke-linecap:butt} #plan-ext .vantail, #page-plan .plan-defs .vantail{stroke:#3B3731; stroke-width:3; fill:none} #plan-ext .arc, #page-plan .plan-defs .arc{stroke:#8A867E; stroke-width:1.2; fill:none; stroke-dasharray:3 3} #plan-ext .poignee, #page-plan .plan-defs .poignee{fill:#6B665C} #plan-ext .fenetre-fond, #page-plan .plan-defs .fenetre-fond{stroke:#FFFFFF; stroke-width:12} #plan-ext .fenetre, #page-plan .plan-defs .fenetre{stroke:#7FA8C4; stroke-width:4} #plan-ext .baie, #page-plan .plan-defs .baie{stroke:#5B8DB8; stroke-width:6} #plan-ext .croisillon, #page-plan .plan-defs .croisillon{stroke:#FFFFFF; stroke-width:1.4} #plan-ext .porte-garage, #page-plan .plan-defs .porte-garage{fill:#FFF; stroke:#7A7A72; stroke-width:2; stroke-dasharray:6 4} #plan-ext .nom, #page-plan .plan-defs .nom{font-weight:700; fill:#4A463F; pointer-events:none; paint-order:stroke; stroke:rgba(255,255,255,.7); stroke-width:4px; stroke-linejoin:round} #plan-ext .meuble, #page-plan .plan-defs .meuble{fill:#FFFFFF; stroke:#A9A398; stroke-width:1.4} #plan-ext .meuble-l, #page-plan .plan-defs .meuble-l{fill:#F4F1EA; stroke:#C5BFB2; stroke-width:1} #plan-ext .trait-meuble, #page-plan .plan-defs .trait-meuble{stroke:#C5BFB2; stroke-width:1; fill:none} #plan-ext .meuble-accoudoir, #page-plan .plan-defs .meuble-accoudoir{fill:#F0ECE3; stroke:#C5BFB2; stroke-width:1} #plan-ext .pli-coussin, #page-plan .plan-defs .pli-coussin{stroke:#D9D3C6; stroke-width:1; fill:none} #plan-ext .couette, #page-plan .plan-defs .couette{fill:#F0ECE3; stroke:#C9C2B2; stroke-width:1} #plan-ext .pli-couette, #page-plan .plan-defs .pli-couette{stroke:#D9D3C6; stroke-width:1} #plan-ext .tapis, #page-plan .plan-defs .tapis{fill:#E4DAC4; opacity:.85} #plan-ext .tapis-bord, #page-plan .plan-defs .tapis-bord{fill:none; stroke:#C8BB98; stroke-width:1.4; opacity:.7} #plan-ext .marches, #page-plan .plan-defs .marches{fill:#F6F3EC; stroke:#A9A398; stroke-width:1.2} #plan-ext .fleche, #page-plan .plan-defs .fleche{stroke:#8A867E; stroke-width:1.5; fill:none} #plan-ext .voiture, #page-plan .plan-defs .voiture{fill:#D8DDE3; stroke:#7B838C; stroke-width:1.5} #plan-ext .vitre, #page-plan .plan-defs .vitre{fill:#B8C6D4; stroke:none} #plan-ext .feuillage, #page-plan .plan-defs .feuillage{fill:#9DBB86; fill-opacity:.9} #plan-ext .feuillage2, #page-plan .plan-defs .feuillage2{fill:#8AAD72; fill-opacity:.85} #plan-ext .feuillage-clair, #page-plan .plan-defs .feuillage-clair{fill:#C7E0AE; fill-opacity:.9} #plan-ext .tronc, #page-plan .plan-defs .tronc{fill:#7A5A3A} #plan-ext .borne, #page-plan .plan-defs .borne{fill:#FFF; stroke:#2E7D63; stroke-width:2} #plan-ext .cam-oeil, #page-plan .plan-defs .cam-oeil{fill:#3B3731} #plan-ext .det-t, #page-plan .plan-defs .det-t{font-size:10px; font-weight:800; fill:#3B3731; text-anchor:middle; pointer-events:none} #plan-ext .puce-t, #page-plan .plan-defs .puce-t{font-size:11px; font-weight:700; fill:#3B3731} #plan-ext .puce-ico, #page-plan .plan-defs .puce-ico{font-size:11px} #plan-ext 0%, #page-plan .plan-defs 0%, #plan-ext 100%, #page-plan .plan-defs 100%{fill-opacity:.18} #plan-ext 50%, #page-plan .plan-defs 50%{fill-opacity:.5} #plan-ext 0%, #page-plan .plan-defs 0%{r:16; opacity:.8} #plan-ext 100%, #page-plan .plan-defs 100%{r:36; opacity:0} #plan-ext .bandeau, #page-plan .plan-defs .bandeau{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px} #plan-ext .puce-etat, #page-plan .plan-defs .puce-etat{font-size:12px; font-weight:600; padding:6px 10px; border-radius:999px; background:#F1EDE5; color:#6B665C} #plan-ext .puce-etat.vert, #page-plan .plan-defs .puce-etat.vert{background:#E3F0EA; color:#25664B} #plan-ext .puce-etat.orange, #page-plan .plan-defs .puce-etat.orange{background:#FBEBD8; color:#8A5215} #plan-ext .puce-etat.rouge, #page-plan .plan-defs .puce-etat.rouge{background:#F8DDD7; color:#8A2E1F} #plan-ext code, #page-plan .plan-defs code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; background:#F4F1EB; padding:1px 5px; border-radius:5px} #plan-ext ul, #page-plan .plan-defs ul{margin:6px 0 6px 18px; padding:0} /* Comme le plan de l'étage : le décor ne prend pas les gestes. */ #plan-rdc,#plan-ext{pointer-events:none} #plan-etage{pointer-events:none} #page-plan .lit-g, #page-plan .appareil-g, #page-plan .ouverture-g[data-appareil]{pointer-events:auto} #page-plan .ouverture-g[data-appareil]{cursor:pointer} /* ============================================================ LE PLAN LA NUIT Aucun réglage à part : le plan suit le thème sombre comme le reste des pages. Les sols s'éteignent, le verre rayonne -- de nuit, une fenêtre est une lampe vue de dessus -- et un volet fermé l'éteint. Tout se fait par la couleur, jamais par « filter: brightness() » : plusieurs navigateurs n'appliquent pas les filtres CSS aux éléments d'un SVG, et la moitié du plan restait alors en plein jour. ============================================================ */ /* (le plan n'a plus de fond a lui : la page suffit) */ /* La nappe de nuit : chaque pièce porte déjà, par-dessus son sol, le calque qui l'éclaire de jour. De nuit il s'assombrit -- la matière du sol reste visible dessous, simplement éteinte. */ html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .lumiere{fill:#0B0A08; fill-opacity:.74} /* Le carrelage de fond, seul sol sans calque au-dessus : il porte la nuit lui-même. */ html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) g > .sol-carrelage:first-child{fill:#26251F} /* --- l'étage --- */ html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .plinthe{stroke-opacity:.34} /* Les murs, franchement sombres : c'est ce qui redonne aux pièces leurs contours quand les sols sont éteints. */ html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .cloison{stroke:#1B1A16} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .mur-ext{fill:#1B1A16} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .emprise-esc{fill:#25241F} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .marches{fill:#2C2B26; stroke:#4A463F} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .tremie{fill:#1C1B17} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .trait-marche, html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .marches-bord, html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .tremie-bord{stroke:#46423B} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .fleche{stroke:#46423B} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .tapis-lit{fill:#2B2720; fill-opacity:1; stroke:#3C362B; stroke-opacity:.9} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .lit{fill:#3E382E; stroke:#57503F} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .couette{fill:#37312A; stroke:#4E4638} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .tete-lit{fill:#4A4133; stroke:#332D24} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .oreiller{fill:#46403A; stroke:#5A5348} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .pli, html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .rabat{stroke:#554D3F} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .baignoire{fill:#2E2D28; stroke:#4A463F} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .baignoire-fond{fill:#282723; stroke:#403C35} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .plan-travail{fill:#2B2A25; stroke:#46423B} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .conduit{fill:#2B2A25; stroke:#46423B} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .conduit-hachure{stroke:#3E3A33} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .bonde{fill:#4A4E52} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .meuble{fill:#3A2B1C; stroke:#241A11} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .meuble-trait{stroke:#241A11} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .sanitaire-b{fill:#2E2D28; stroke:#46423B} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .sanitaire-b-clair{fill:#34332E; stroke:#46423B} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .sanitaire-r{fill:#3A2B29; stroke:#5E3A33} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .sanitaire-r-clair{fill:#332B29; stroke:#503530} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .vantail{fill:#4A331C; stroke:#2E2012} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .charniere{fill:#2E2012} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .arc{stroke:#5E5850} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .vide{fill:#34322C} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .dormant{stroke:#B79B5E} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .nom{fill:#EDE8DC; stroke:rgba(0,0,0,.5)} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .surface-t{fill:#B8B2A5} /* Le verre, seule source de lumière du plan de nuit. */ html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .velux{fill:#DCC48C; fill-opacity:.62; stroke:#B79B5E; filter:url(#pl-lueur)} /* Les fenêtres, elles, s'allument sans déborder. */ html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .vitrage{fill:#DCC48C; fill-opacity:.62; stroke:#B79B5E; filter:none} /* La part fermée : une ombre franche, qui coupe la lumière. */ html[data-theme="sombre"] #page-plan .velux-ferme{fill:url(#pl-lames-volet-nuit)} /* Le jour de lumière suit l'ouverture -- « --ouvert » vient de la pose. */ html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .ouverture-g .velux-halo{opacity:calc(var(--ouvert, 1) * .38)} /* --- le plan repris de la maquette : l'extérieur --- Ils sont dessinés par : la feuille de style ne voit pas l'instance mais l'original, rangé dans . D'où la troisième portée -- sans elle, les arbres et la piscine restent en plein jour. */ html[data-theme="sombre"] #plan-ext .lumiere-piece, html[data-theme="sombre"] #page-plan .plan-defs .lumiere-piece{display:block; fill:#0B0A08; fill-opacity:.72} html[data-theme="sombre"] #plan-ext rect[fill="#E9E4D9"], html[data-theme="sombre"] #page-plan .plan-defs rect[fill="#E9E4D9"], html[data-theme="sombre"] #plan-ext rect[fill="#E8E1D2"], html[data-theme="sombre"] #page-plan .plan-defs rect[fill="#E8E1D2"]{fill:#1E1D19} html[data-theme="sombre"] #plan-ext rect[fill="#DDD6C8"], html[data-theme="sombre"] #page-plan .plan-defs rect[fill="#DDD6C8"]{fill:#2E2C27} html[data-theme="sombre"] #plan-ext rect[fill="#D7DEC0"], html[data-theme="sombre"] #page-plan .plan-defs rect[fill="#D7DEC0"]{fill:#242C1E} html[data-theme="sombre"] #plan-ext rect[fill="#D3CFC6"], html[data-theme="sombre"] #page-plan .plan-defs rect[fill="#D3CFC6"], html[data-theme="sombre"] #plan-ext circle[fill="#D3CFC6"], html[data-theme="sombre"] #page-plan .plan-defs circle[fill="#D3CFC6"]{fill:#2C2A25} html[data-theme="sombre"] #plan-ext rect[fill="url(#sq-lames)"], html[data-theme="sombre"] #page-plan .plan-defs rect[fill="url(#sq-lames)"]{fill:#2C241B} html[data-theme="sombre"] #plan-ext rect[fill="url(#sq-gazon)"], html[data-theme="sombre"] #page-plan .plan-defs rect[fill="url(#sq-gazon)"]{fill:#202B1B} html[data-theme="sombre"] #plan-ext rect[fill="url(#sq-dalles)"], html[data-theme="sombre"] #page-plan .plan-defs rect[fill="url(#sq-dalles)"]{fill:#2A2925} html[data-theme="sombre"] #plan-ext rect[fill="url(#sq-gravier)"], html[data-theme="sombre"] #page-plan .plan-defs rect[fill="url(#sq-gravier)"], html[data-theme="sombre"] #plan-ext path[fill="url(#sq-gravier)"], html[data-theme="sombre"] #page-plan .plan-defs path[fill="url(#sq-gravier)"]{fill:#26251F} html[data-theme="sombre"] #plan-ext .meuble, html[data-theme="sombre"] #page-plan .plan-defs .meuble, html[data-theme="sombre"] #plan-ext .meuble-l, html[data-theme="sombre"] #page-plan .plan-defs .meuble-l, html[data-theme="sombre"] #plan-ext .marches, html[data-theme="sombre"] #page-plan .plan-defs .marches, html[data-theme="sombre"] #plan-ext .meuble-accoudoir, html[data-theme="sombre"] #page-plan .plan-defs .meuble-accoudoir{fill:#3A362E; stroke:#514C43} html[data-theme="sombre"] #plan-ext .couette, html[data-theme="sombre"] #page-plan .plan-defs .couette{fill:#37312A; stroke:#4E4638} html[data-theme="sombre"] #plan-ext .pli-couette, html[data-theme="sombre"] #page-plan .plan-defs .pli-couette, html[data-theme="sombre"] #plan-ext .pli-coussin, html[data-theme="sombre"] #page-plan .plan-defs .pli-coussin, html[data-theme="sombre"] #plan-ext .trait-meuble, html[data-theme="sombre"] #page-plan .plan-defs .trait-meuble{stroke:#4E4941} html[data-theme="sombre"] #plan-ext .tapis, html[data-theme="sombre"] #page-plan .plan-defs .tapis{fill:#3A352C} html[data-theme="sombre"] #plan-ext .tapis-bord, html[data-theme="sombre"] #page-plan .plan-defs .tapis-bord{stroke:#2E2A24} html[data-theme="sombre"] #plan-ext .nom, html[data-theme="sombre"] #page-plan .plan-defs .nom{fill:#EDE8DC; stroke:rgba(0,0,0,.45)} html[data-theme="sombre"] #plan-ext .vide, html[data-theme="sombre"] #page-plan .plan-defs .vide{stroke:#3A3833} html[data-theme="sombre"] #plan-ext .arc, html[data-theme="sombre"] #page-plan .plan-defs .arc{stroke:#5E5850} html[data-theme="sombre"] #plan-ext .porte-garage, html[data-theme="sombre"] #page-plan .plan-defs .porte-garage{fill:#33312C; stroke:#7A756C} html[data-theme="sombre"] #plan-ext .fenetre, html[data-theme="sombre"] #page-plan .plan-defs .fenetre, html[data-theme="sombre"] #plan-ext .baie, html[data-theme="sombre"] #page-plan .plan-defs .baie{stroke:#DCC48C; filter:none} html[data-theme="sombre"] #plan-ext .croisillon, html[data-theme="sombre"] #page-plan .plan-defs .croisillon{stroke:#3A3020} html[data-theme="sombre"] #plan-ext .fenetre-fond, html[data-theme="sombre"] #page-plan .plan-defs .fenetre-fond{stroke:#26241F} html[data-theme="sombre"] #plan-ext .reflet-vitre, html[data-theme="sombre"] #page-plan .plan-defs .reflet-vitre{display:none} html[data-theme="sombre"] #plan-ext .eau-p, html[data-theme="sombre"] #page-plan .plan-defs .eau-p{fill:#2E5F7A; stroke:#4E8AA8} html[data-theme="sombre"] #plan-ext .eau-t, html[data-theme="sombre"] #page-plan .plan-defs .eau-t{stroke:#7FB4CC} html[data-theme="sombre"] #plan-ext .feuillage, html[data-theme="sombre"] #page-plan .plan-defs .feuillage{fill:#2E4229} html[data-theme="sombre"] #plan-ext .feuillage2, html[data-theme="sombre"] #page-plan .plan-defs .feuillage2{fill:#243522} html[data-theme="sombre"] #plan-ext .feuillage-clair, html[data-theme="sombre"] #page-plan .plan-defs .feuillage-clair{fill:#374E33} html[data-theme="sombre"] #plan-ext .tronc, html[data-theme="sombre"] #page-plan .plan-defs .tronc{fill:#2A1E14} html[data-theme="sombre"] #plan-ext .voiture, html[data-theme="sombre"] #page-plan .plan-defs .voiture{fill:#3E444C} html[data-theme="sombre"] #plan-ext .vitre, html[data-theme="sombre"] #page-plan .plan-defs .vitre{fill:#2A3038} html[data-theme="sombre"] #plan-ext .borne, html[data-theme="sombre"] #page-plan .plan-defs .borne{fill:#2C2A25; stroke:#6FBF9A} html[data-theme="sombre"] #plan-ext .haie, html[data-theme="sombre"] #page-plan .plan-defs .haie{fill:#2C3F26; stroke:#2C3F26} html[data-theme="sombre"] #plan-ext .mur, html[data-theme="sombre"] #page-plan .plan-defs .mur{stroke:#2A2823} html[data-theme="sombre"] #plan-ext .eau-p, html[data-theme="sombre"] #page-plan .plan-defs .eau-p{fill:#1F4E66 !important; stroke:#3E7C99} html[data-theme="sombre"] #plan-ext path[stroke="#8FAF7A"], html[data-theme="sombre"] #page-plan .plan-defs path[stroke="#8FAF7A"]{stroke:#35512E} html[data-theme="sombre"] #plan-ext .etiq, html[data-theme="sombre"] #page-plan .plan-defs .etiq{fill:#C6C0B3} html[data-theme="sombre"] #plan-ext rect[fill="url(#sq-eau-motif)"], html[data-theme="sombre"] #page-plan .plan-defs rect[fill="url(#sq-eau-motif)"]{fill:#1F4E66} html[data-theme="sombre"] #sq-wc *, html[data-theme="sombre"] #sq-lavabo *, html[data-theme="sombre"] #sq-baignoire *, html[data-theme="sombre"] #sq-douche *{fill:#34332E} /* Les pastilles d'appareils gardent leur lisibilité sur fond sombre. */ html[data-theme="sombre"] #page-plan .appareil-pastille{stroke:#0F0E0C; stroke-width:1.5} /* La part fermée : un aplat, pas un voile. Opaque, donc ni le dégradé de la vitre ni le lit dessous ne transparaissent -- un volet fermé ne laisse rien voir, et c'est ce qu'on veut lire d'un coup d'œil. */ /* Le volet fermé se lit à ses lames, pas à son gris : le motif garde le gris chaud moyen en fond et y pose le creux et l'arête de chaque lame. Elles sont perpendiculaires au sens de fermeture, puisque le voile grandit toujours le long de l'axe x du relevé. */ #page-plan .velux-ferme{fill:url(#pl-lames-volet);fill-opacity:1;pointer-events:none} :is(#plan-etage, #plan-rdc) .zone-baie, #plan-ext .zone-baie{fill:transparent} #page-plan .ouverture-g[data-appareil]:hover .velux, #page-plan .ouverture-g.touchee .velux{fill:#CFE3EF; fill-opacity:.65; stroke:#5B86B4} #page-plan .ouverture-g[data-appareil]:hover .vitrage, #page-plan .ouverture-g.touchee .vitrage{fill:#9EC8E0} #page-plan .lit-g{cursor:grab} #page-plan .lit-g.attrape{cursor:grabbing} #page-plan p:last-child{margin:0} :is(#plan-etage, #plan-rdc) .sol-parquet{fill:url(#pl-parquet)} /* Au rez-de-chaussée, les lames sont posées dans l'autre sens (29/09/2026). */ #plan-rdc .sol-parquet{fill:url(#pl-parquet-rdc)} #plan-etage .sol-parquet{fill:url(#pl-parquet-etage)} /* le même parquet à l'étage (Fred, 29/09/2026) */ /* La plaque à induction de l'îlot : verre noir, zones dessinées en gris. */ #plan-rdc .plaque-induction{fill:#2A2A2C; stroke:#111; stroke-width:1.5} #plan-rdc .plaque-zone{fill:none; stroke:#8E8E90; stroke-width:1.4} /* Le socle en béton de la cheminée. */ #plan-rdc .socle-beton{fill:#CBC8C0; stroke:#8F8A80; stroke-width:2} #plan-rdc .socle-grain{fill:none; opacity:.9; pointer-events:none} /* Le canapé du salon : gris clair, sans accoudoirs. */ #plan-rdc .canape{fill:#DCDCD9; stroke:#A9A9A5; stroke-width:1.6; filter:url(#pl-ombre-meuble)} #plan-rdc .canape-dossier{fill:#C3C3BF; stroke:#A2A29E; stroke-width:1} #plan-rdc .canape-coussin{fill:none; stroke:#B9B9B5; stroke-width:1.2} html[data-theme="sombre"] #plan-rdc .canape{fill:#3A3A3C; stroke:#2A2A2C} html[data-theme="sombre"] #plan-rdc .canape-dossier{fill:#303032; stroke:#222} html[data-theme="sombre"] #plan-rdc .canape-coussin{stroke:#4A4A4C} /* La table basse en verre du salon. */ #plan-rdc .table-verre{fill:#CFE3EF; fill-opacity:.55; stroke:#8FB6CB; stroke-width:1.8; filter:url(#pl-ombre-meuble)} #plan-rdc .table-verre-reflet{fill:none; stroke:#FFFFFF; stroke-opacity:.8; stroke-width:1.6; stroke-linecap:round} html[data-theme="sombre"] #plan-rdc .table-verre{fill:#4E7A96; fill-opacity:.35; stroke:#6E9DB6} html[data-theme="sombre"] #plan-rdc .table-verre-reflet{stroke-opacity:.35} /* Les plantes vertes. */ #plan-rdc .plante-pot{fill:#8A8F93; stroke:#5F6468; stroke-width:1.2; filter:url(#pl-ombre-meuble)} #plan-rdc .plante-feuille{fill:#4E8A3C; fill-opacity:.92; stroke:#33632A; stroke-width:.6} #plan-rdc .plante-feuille-claire{fill:#7CB35E; fill-opacity:.9; stroke:#4E8A3C; stroke-width:.5} #plan-rdc .plante-coeur{fill:#2F5A27} #plan-rdc .plante-pot-terre{fill:#B9754C; stroke:#8C5535; stroke-width:1.2; filter:url(#pl-ombre-meuble)} #plan-rdc .plante-feuille-large{fill:#3F7A34; fill-opacity:.94; stroke:#2C5A25; stroke-width:.6} #plan-rdc .plante-nervure{fill:none; stroke:#A8D48C; stroke-width:.9; stroke-opacity:.8} html[data-theme="sombre"] #plan-rdc .plante-feuille-large{fill:#356A2C} html[data-theme="sombre"] #plan-rdc .plante-feuille{fill:#3E7030} html[data-theme="sombre"] #plan-rdc .plante-feuille-claire{fill:#5E9448} /* Le tapis en coco de l'entrée. */ #plan-rdc .tapis-coco{fill:url(#pl-coco); stroke:#6F5730; stroke-width:1.6} #plan-rdc .tapis-coco-fibres{pointer-events:none; opacity:.5} #plan-rdc .tapis-coco-usure{fill:url(#pl-usure); pointer-events:none} #plan-rdc .tapis-coco-bord{fill:none; stroke:#5F4A28; stroke-width:4; stroke-opacity:.55} html[data-theme="sombre"] #plan-rdc .tapis-coco{fill:#6E5A36} html[data-theme="sombre"] #plan-rdc .tapis-coco-fibres{opacity:.25} /* La lampe ronde, sur la console. */ #plan-rdc .lampe-halo{fill:#FFE9A8; fill-opacity:.35} #plan-rdc .lampe{fill:#FFF3CF; stroke:#D9B65E; stroke-width:1.2} #plan-rdc .lampe-coeur{fill:#F2C75A} html[data-theme="sombre"] #plan-rdc .lampe-halo{fill-opacity:.55} /* L'intérieur du placard de l'entrée : étagère à gauche, penderie à droite. */ #plan-rdc .placard-fond{fill:#F3EFE6; fill-opacity:.85} #plan-rdc .placard-trait{fill:none; stroke:#8A8478; stroke-width:1.2; stroke-linecap:round} #plan-rdc .placard-tringle{fill:none; stroke:#6E6A62; stroke-width:2.2; stroke-linecap:round} html[data-theme="sombre"] #plan-rdc .placard-fond{fill:#2C2823} html[data-theme="sombre"] #plan-rdc .placard-trait{stroke:#6A645A} html[data-theme="sombre"] #plan-rdc .placard-tringle{stroke:#8A8478} /* La télé du salon, au mur. */ #plan-rdc .tele{fill:#141416; stroke:#E8E6E0; stroke-width:1.4; filter:url(#pl-ombre-meuble)} #plan-rdc .tele-ecran{fill:none; stroke:#8FC1DC; stroke-width:2.4; stroke-linecap:round} html[data-theme="sombre"] #plan-rdc .tele{fill:#0E0E10; stroke:#9A9892} html[data-theme="sombre"] #plan-rdc .tele-ecran{stroke:#5F93AE} /* Le frigo de la cuisine. */ #plan-rdc .frigo{fill:url(#pl-inox); stroke:#7C8082; stroke-width:1.2; filter:url(#pl-ombre-meuble)} #plan-rdc .frigo-brosse{opacity:.55; pointer-events:none} #plan-rdc .frigo-chant{fill:#9A9EA0} #plan-rdc .frigo-joint{fill:none; stroke:#5F6365; stroke-width:1.2} #plan-rdc .frigo-joint-clair{fill:none; stroke:#FFFFFF; stroke-opacity:.7; stroke-width:.8} #plan-rdc .frigo-reflet{fill:none; stroke:#FFFFFF; stroke-opacity:.75; stroke-width:1} #plan-rdc .frigo-poignee{fill:url(#pl-inox-poignee); stroke:#5A5E60; stroke-width:.5} #plan-rdc .frigo-poignee-ombre{fill:#000; fill-opacity:.28; filter:url(#pl-ao)} html[data-theme="sombre"] #plan-rdc .frigo{fill:#2E2E30; stroke:#4A4A4C} /* Le poêle du salon, vu de dessus. */ #plan-rdc .poele{fill:#2F2F31; stroke:#111; stroke-width:1.5; filter:url(#pl-ombre-meuble)} #plan-rdc .poele-plateau{fill:#3E3E41; stroke:#232325; stroke-width:1} #plan-rdc .poele-conduit{fill:#1A1A1C; stroke:#555; stroke-width:1} html[data-theme="sombre"] #plan-rdc .poele{fill:#141416; stroke:#050505} html[data-theme="sombre"] #plan-rdc .poele-plateau{fill:#1E1E20} html[data-theme="sombre"] #plan-rdc .socle-beton{fill:#3A3935; stroke:#55524B} html[data-theme="sombre"] #plan-rdc .plaque-induction{fill:#141416; stroke:#0A0A0A} /* La table de la salle à manger et ses chaises, vues de dessus (29/09/2026). */ #plan-rdc .table-bord{fill:#6F4A2B; stroke:#4E3219; stroke-width:1.5; filter:url(#pl-ombre-meuble)} #plan-rdc .table-plateau{fill:url(#pl-bois-table)} #plan-rdc .table-lame{fill:none; stroke:#8A5F36; stroke-width:1.3; stroke-opacity:.75} #plan-rdc .table-grain{fill:none; opacity:.9; pointer-events:none} /* Les chaises, bleu pétrole comme les coussins du canapé (Fred, 29/09/2026). */ #plan-rdc .chaise-assise{fill:#1F5F6B; stroke:#154650; stroke-width:1.4; filter:url(#pl-ombre-meuble)} #plan-rdc .chaise-coussin{fill:#2E7482} #plan-rdc .chaise-dossier{fill:#154650} html[data-theme="sombre"] #plan-rdc .table-bord{fill:#2E2116; stroke:#1C130C} html[data-theme="sombre"] #plan-rdc .table-plateau{fill:#4A3624} html[data-theme="sombre"] #plan-rdc .table-lame{stroke:#5C4430} html[data-theme="sombre"] #plan-rdc .chaise-assise{fill:#17444C; stroke:#0E2C32} html[data-theme="sombre"] #plan-rdc .chaise-coussin{fill:#1E525C} html[data-theme="sombre"] #plan-rdc .chaise-dossier{fill:#0E2C32} :is(#plan-etage, #plan-rdc) .sol-carrelage{fill:url(#pl-carrelage)} :is(#plan-etage, #plan-rdc) .sol-carrelage{fill:url(#pl-carrelage-rdc)} :is(#plan-etage, #plan-rdc) .sol-lames{fill:url(#pl-lames-grises)} /* La salle de bain du rez-de-chaussée (douche comprise) : carreaux deux fois plus petits. Après la règle générale du carrelage : à spécificité égale, la dernière gagne. */ #plan-rdc .sol-carrelage-petit{fill:url(#pl-carrelage-petit)} :is(#plan-etage, #plan-rdc) .lumiere{fill:url(#pl-lumiere-piece); pointer-events:none} :is(#plan-etage, #plan-rdc) .mur-ext{fill:#3B3731} :is(#plan-etage, #plan-rdc) .cloisons{filter:url(#pl-ombre-cloison)} :is(#plan-etage, #plan-rdc) .cloison{fill:none; stroke:#3F3A33; stroke-width:10; stroke-linejoin:miter; stroke-miterlimit:8; stroke-linecap:butt} :is(#plan-etage, #plan-rdc) .plinthe{fill:none; stroke:#000; stroke-opacity:.09; stroke-width:5} :is(#plan-etage, #plan-rdc) .vantail{fill:#8B5E34; stroke:#5E3E22; stroke-width:1.4; stroke-linejoin:round} :is(#plan-etage, #plan-rdc) .arc{stroke:#A0866B; stroke-width:1.8; fill:none; stroke-dasharray:9 7} :is(#plan-etage, #plan-rdc) .velux{fill:url(#pl-vitre); fill-opacity:.55; stroke:#8C8C87; stroke-width:5} :is(#plan-etage, #plan-rdc) .velux-halo{fill:url(#pl-halo-jour); filter:url(#pl-halo-velux); opacity:.9} /* Le tapis reprend la laine du rez-de-chaussée : même beige, même liseré. Il ne prend pas les gestes -- c'est le lit qu'on attrape. */ :is(#plan-etage, #plan-rdc) .tapis-lit{fill:#E4DAC4; fill-opacity:.85; stroke:#C8BB98; stroke-width:1.8; stroke-opacity:.75; pointer-events:none} :is(#plan-etage, #plan-rdc) .lit{fill:#FDF7EA; stroke:#C4B79B; stroke-width:2.2; filter:url(#pl-ombre-meuble)} :is(#plan-etage, #plan-rdc) .oreiller{fill:#FFFDF7; stroke:#D8CCB4; stroke-width:1.5} :is(#plan-etage, #plan-rdc) .couette{fill:#EFE6D2; stroke:#C9BCA0; stroke-width:1.6} :is(#plan-etage, #plan-rdc) .pli{stroke:#D6C9AC; stroke-width:1.2; fill:none; stroke-opacity:.9} :is(#plan-etage, #plan-rdc) .marches{fill:#F6F3EC; stroke:#A9A398; stroke-width:2} :is(#plan-etage, #plan-rdc) .trait-marche{stroke:#A49D8E; stroke-width:2.2; fill:none} :is(#plan-etage, #plan-rdc) .fleche{stroke:#6E675C; stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round} :is(#plan-etage, #plan-rdc) .nom{font-weight:750; fill:#3B3731; text-anchor:middle; paint-order:stroke; stroke:rgba(255,255,255,.78); stroke-width:6px; stroke-linejoin:round; font-size:30px} :is(#plan-etage, #plan-rdc) .surface-t{font-size:21px; font-weight:600; fill:#8A867E; text-anchor:middle; paint-order:stroke; stroke:rgba(255,255,255,.7); stroke-width:5px} :is(#plan-etage, #plan-rdc) .vignette-globale{fill:url(#pl-vignette-plan); pointer-events:none} #page-plan .lit-g{cursor:grab} #page-plan .lit-g.attrape{cursor:grabbing} #page-plan .lit-g.attrape .lit{stroke:#9A8A6A; stroke-width:3.5} :is(#plan-etage, #plan-rdc) .tremie{fill:#DCD9D2} :is(#plan-etage, #plan-rdc) .tremie-bord{fill:none; stroke:#8F887B; stroke-width:2.6} :is(#plan-etage, #plan-rdc) .marches{fill:#F6F4EE; stroke:none} :is(#plan-etage, #plan-rdc) .marches-bord{fill:none; stroke:#8F887B; stroke-width:3} :is(#plan-etage, #plan-rdc) .vitrage{fill:#CFE3EF; stroke:#8FB6CB; stroke-width:1.5} :is(#plan-etage, #plan-rdc) .dormant{stroke:#3B3731; stroke-width:3; fill:none; stroke-linejoin:miter} :is(#plan-etage, #plan-rdc) .meneau{stroke:#3B3731; stroke-width:2.2; fill:none} :is(#plan-etage, #plan-rdc) .nom.petit{font-size:22px; fill:#8A867E} :is(#plan-etage, #plan-rdc) .charniere{fill:#5E3E22} :is(#plan-etage, #plan-rdc) .emprise-esc{fill:#EDEAE3} #page-plan .etiquettes{display:none} #page-plan .etiquettes.visible{display:block} #page-plan details.niveau:last-child{border-bottom:none} #page-plan details.niveau[open] > summary::before{transform:rotate(90deg)} :is(#plan-etage, #plan-rdc) .vide{fill:#F6F3ED} :is(#plan-etage, #plan-rdc) .tete-lit{fill:#CBB894; stroke:#B3A07A; stroke-width:1.5} :is(#plan-etage, #plan-rdc) .rabat{fill:none; stroke:#C9BCA0; stroke-width:1.8; stroke-opacity:.9} #page-plan .plan-travail{fill:#E6E2D9; stroke:#A79F8F; stroke-width:2.2; filter:url(#pl-ombre-meuble)} :is(#plan-etage, #plan-rdc) .baignoire{fill:#FFF; stroke:#9E978A; stroke-width:2} :is(#plan-etage, #plan-rdc) .baignoire-fond{fill:#F2F1EC; stroke:#C9C3B6; stroke-width:1.4} :is(#plan-etage, #plan-rdc) .bonde{fill:#C9CDD0} :is(#plan-etage, #plan-rdc) .conduit{fill:#EDE7DC; stroke:#6E675C; stroke-width:2.6} :is(#plan-etage, #plan-rdc) .conduit-hachure{stroke:#9B9284; stroke-width:1.6; fill:none} :is(#plan-etage, #plan-rdc) .meuble{fill:#8B5E34; stroke:#5E3E22; stroke-width:2; filter:url(#pl-ombre-meuble)} :is(#plan-etage, #plan-rdc) .meuble-trait{stroke:#5E3E22; stroke-width:1.6; fill:none; stroke-opacity:.8} :is(#plan-etage, #plan-rdc) .sanitaire-r{fill:#F4D2CC; stroke:#B03A2E; stroke-width:2.2} :is(#plan-etage, #plan-rdc) .sanitaire-r-clair{fill:#FBEEEB; stroke:#D08074; stroke-width:1.4} :is(#plan-etage, #plan-rdc) .sanitaire-b{fill:#FFF; stroke:#6E675C; stroke-width:2.2} :is(#plan-etage, #plan-rdc) .sanitaire-b-clair{fill:#F3F2EE; stroke:#B5AEA2; stroke-width:1.4} /* --- Les vannes thermostatiques : le modèle « étiquette claire » ---- Fond clair, liseré et mode colorés par l'état (orange quand la vanne chauffe, vert quand la consigne est atteinte, bleu au repos, gris quand la vanne ne répond plus). L'icône est celle de la bibliothèque Loxone, avec son plus en rouge et son moins en bleu. */ #page-plan .chauffe-etiquette{fill:#FBF8F2;stroke:#8A867E;stroke-width:3.5} #page-plan .chauffe-g.etat-chaud .chauffe-etiquette{stroke:#C0503A} #page-plan .chauffe-g.etat-atteint .chauffe-etiquette{stroke:#2E9068} #page-plan .chauffe-g.etat-froid .chauffe-etiquette{stroke:#5B86B4} #page-plan .chauffe-icone{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} #page-plan .chauffe-icone .ci-corps{stroke:#191715;stroke-width:1.5} #page-plan .chauffe-icone .ci-plus{stroke:#C0503A;stroke-width:2} #page-plan .chauffe-icone .ci-moins{stroke:#3E7BC8;stroke-width:2} #page-plan .chauffe-flamme{fill:#E8822F;stroke:none;pointer-events:none} #page-plan .ch-temp{font-size:26px;font-weight:800;fill:#191715;dominant-baseline:central; font-variant-numeric:tabular-nums;pointer-events:none} #page-plan .ch-consigne{font-size:17px;font-weight:600;fill:rgba(25,23,21,.62);dominant-baseline:central; font-variant-numeric:tabular-nums;pointer-events:none} #page-plan .ch-mode{font-size:16px;font-weight:600;fill:rgba(25,23,21,.52);dominant-baseline:central; pointer-events:none} #page-plan .chauffe-g.etat-chaud .ch-mode{fill:#A8412C} #page-plan .chauffe-g.etat-atteint .ch-mode{fill:#1F7351} #page-plan .chauffe-g.etat-froid .ch-mode{fill:#3F6A9C} html[data-theme="sombre"] #page-plan .chauffe-etiquette{fill:#1E1C18} html[data-theme="sombre"] #page-plan .chauffe-icone .ci-corps{stroke:#EFECE6} html[data-theme="sombre"] #page-plan .ch-temp{fill:#F2EFE9} html[data-theme="sombre"] #page-plan .ch-consigne{fill:rgba(242,239,233,.66)} html[data-theme="sombre"] #page-plan .ch-mode{fill:rgba(242,239,233,.55)} html[data-theme="sombre"] #page-plan .chauffe-g.etat-chaud .ch-mode{fill:#EE8B77} html[data-theme="sombre"] #page-plan .chauffe-g.etat-atteint .ch-mode{fill:#4FB588} html[data-theme="sombre"] #page-plan .chauffe-g.etat-froid .ch-mode{fill:#7FA8D6} /* La tuile flottante d'une vanne thermostatique : sa couronne de consigne demande de la hauteur, bien plus qu'un volet ou une lampe. */ #page-plan .plan-tuile .tuile.tuile-chauffage, .plan-tuile .tuile.tuile-chauffage { height: 248px; } /* Les escaliers du rez-de-chaussée (29/09/2026) : les petits en gris, celui de l'entrée en ton pierre. En fin de feuille : à spécificité égale avec les règles de l'étage, la dernière gagne. */ #plan-rdc .marches{fill:#CFCDC7} #plan-rdc .trait-marche{stroke:#8E8B84} #plan-rdc .marches-bord{stroke:#7C7970} #plan-rdc .marches-pierre{fill:#DACFBD} #plan-rdc .emprise-esc{fill:#CFC4B0} html[data-theme="sombre"] #plan-rdc .marches{fill:#33322E} html[data-theme="sombre"] #plan-rdc .marches-pierre{fill:#3A342B} html[data-theme="sombre"] #plan-rdc .emprise-esc{fill:#2E2923} /* Les portes pleines (entrée, garage, buanderie) : pas de lueur la nuit, ce ne sont pas des vitrages. */ html[data-theme="sombre"] #plan-rdc .dormant-porte{stroke:#5E5850; filter:none} /* Les bars et l'îlot, en chêne. */ #plan-rdc .plan-chene{fill:url(#pl-chene); stroke:#8A6636; stroke-width:1.8; filter:url(#pl-ombre-meuble)} html[data-theme="sombre"] #plan-rdc .plan-chene{fill:url(#pl-chene-nuit); stroke:#2E2416} /* Le meuble en bois blanc du salon. */ #plan-rdc .meuble-blanc{fill:#F6F3EC; stroke:#B5AE9F; stroke-width:1.6; filter:url(#pl-ombre-meuble)} #plan-rdc .meuble-blanc-trait{fill:none; stroke:#C6BFB0; stroke-width:1.2; stroke-linecap:round} html[data-theme="sombre"] #plan-rdc .meuble-blanc{fill:#77746B; stroke:#4E4B44} html[data-theme="sombre"] #plan-rdc .meuble-blanc-trait{stroke:#5A574F} /* Les vestes de la penderie, vues de dessus. */ #plan-rdc .veste{stroke:rgba(0,0,0,.35); stroke-width:.6} #plan-rdc .veste-col{fill:none; stroke:rgba(255,255,255,.55); stroke-width:.9; stroke-linecap:round; stroke-linejoin:round} /* Le piano droit de la chambre du bas. */ #plan-rdc .piano{fill:#F7F5F0; stroke:#B9B4A8; stroke-width:1.2; filter:url(#pl-ombre-meuble)} /* piano blanc (Fred, 29/09) */ #plan-rdc .piano-trait{fill:none; stroke:#D3CEC3; stroke-width:.9} #plan-rdc .piano-clavier{fill:#FFFFFF; stroke:#8C8880; stroke-width:.6} #plan-rdc .piano-noires{fill:#1A1818} html[data-theme="sombre"] #plan-rdc .piano{fill:#8E8A82; stroke:#5A564F} html[data-theme="sombre"] #plan-rdc .piano-clavier{fill:#B8B4AA} /* Les meubles en bois clair (la table de nuit de la chambre du bas). */ #plan-rdc .meuble-clair{fill:#C9A272; stroke:#8F6B42} html[data-theme="sombre"] #plan-rdc .meuble-clair{fill:#5A452C; stroke:#3A2C1C} /* Les vêtements pliés sur les étagères, vus de dessus. */ #plan-rdc .plie{stroke:rgba(0,0,0,.3); stroke-width:.6} #plan-rdc .plie-trait{fill:none; stroke:rgba(255,255,255,.45); stroke-width:.8; stroke-linecap:round} /* Les coussins bleu pétrole du canapé. */ #plan-rdc .coussin-petrole{fill:#1F5F6B; stroke:#154650; stroke-width:1; filter:url(#pl-ombre-meuble)} #plan-rdc .coussin-petrole-pli{fill:none; stroke:rgba(255,255,255,.28); stroke-width:1.2; stroke-linecap:round} html[data-theme="sombre"] #plan-rdc .coussin-petrole{fill:#17444C; stroke:#0E2C32} /* Rendu réaliste du rez-de-chaussée (Fred, 29/09/2026) : l'ombre des murs sur les sols, la lumière du jour aux fenêtres, le relief des meubles. */ :is(#plan-etage, #plan-rdc) .ao-mur{fill:none; stroke:#1E1710; stroke-width:36; stroke-opacity:.2; stroke-linejoin:round; filter:url(#pl-ao); pointer-events:none} :is(#plan-etage, #plan-rdc) .ao-cloison{fill:none; stroke:#1E1710; stroke-width:16; stroke-opacity:.15; stroke-linejoin:round; stroke-linecap:butt; filter:url(#pl-ao); pointer-events:none} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .ao-mur{stroke:#000; stroke-opacity:.45} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .ao-cloison{stroke:#000; stroke-opacity:.35} :is(#plan-etage, #plan-rdc) .jour{pointer-events:none; opacity:.8} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .jour{opacity:.07} :is(#plan-etage, #plan-rdc) .meuble, :is(#plan-etage, #plan-rdc) .meuble-blanc, :is(#plan-etage, #plan-rdc) .plan-travail, :is(#plan-etage, #plan-rdc) .plan-chene, :is(#plan-etage, #plan-rdc) .canape, :is(#plan-etage, #plan-rdc) .lit, :is(#plan-etage, #plan-rdc) .sanitaire-b, :is(#plan-etage, #plan-rdc) .chaise-assise, :is(#plan-etage, #plan-rdc) .table-bord, :is(#plan-etage, #plan-rdc) .plante-pot, :is(#plan-etage, #plan-rdc) .plante-pot-terre, :is(#plan-etage, #plan-rdc) .frigo, :is(#plan-etage, #plan-rdc) .piano, :is(#plan-etage, #plan-rdc) .coussin-petrole, :is(#plan-etage, #plan-rdc) .tele, :is(#plan-etage, #plan-rdc) .poele, :is(#plan-etage, #plan-rdc) .table-verre{filter:url(#pl-meuble-3d)} #plan-etage .baignoire{filter:url(#pl-meuble-3d)} :is(#plan-etage, #plan-rdc) .mur-ext{stroke:#5A554D; stroke-width:1.4} /* Le petit électroménager du plan de travail : Thermomix, bouilloire, grille-pain. */ #plan-rdc .appareil-sombre{fill:#3A3A3C; stroke:#1E1E20; stroke-width:.8; filter:url(#pl-ombre-meuble)} #plan-rdc .appareil-sombre-clair{fill:#8C8C8E} #plan-rdc .appareil-inox{fill:#CFCFCC; stroke:#8E8E8A; stroke-width:.8; filter:url(#pl-ombre-meuble)} #plan-rdc .appareil-inox-fente{fill:none; stroke:#4A4A48; stroke-width:1.6; stroke-linecap:round} #plan-rdc .appareil-blanc{fill:#F6F4F0; stroke:#A9A59C; stroke-width:.9; filter:url(#pl-ombre-meuble)} #plan-rdc .appareil-blanc-trait{fill:none; stroke:#B9B5AC; stroke-width:1.1; stroke-linecap:round} html[data-theme="sombre"] #plan-rdc .appareil-blanc{fill:#B7B3AA} html[data-theme="sombre"] #plan-rdc .appareil-inox{fill:#8A8A87} /* Rendu d'exception (Fred, 29/09/2026) : matières. */ #plan-rdc .sol-carrelage-petit{fill:url(#pl-travertin)} #plan-rdc .bac-travertin{fill:url(#pl-travertin); stroke:#A8967A; stroke-width:2; filter:url(#pl-ombre-meuble)} #plan-rdc .bac-creux{fill:url(#pl-bac); stroke:#000; stroke-opacity:.14; stroke-width:1} #plan-rdc .bonde{fill:#C9CDD0; stroke:#8F9498; stroke-width:1} #plan-rdc .bonde-trou{fill:#5A5F63} #plan-rdc .canape{fill:url(#pl-gris-canape); filter:url(#pl-tissu-3d)} #plan-rdc .coussin-petrole{fill:url(#pl-petrole); filter:url(#pl-tissu-3d)} #plan-rdc .chaise-assise{fill:url(#pl-petrole)} #plan-rdc .chaise-coussin{fill:url(#pl-petrole-clair)} :is(#plan-etage, #plan-rdc) .lit{fill:url(#pl-drap)} :is(#plan-etage, #plan-rdc) .couette{fill:url(#pl-couette); filter:url(#pl-tissu)} :is(#plan-etage, #plan-rdc) .oreiller{fill:url(#pl-oreiller)} #plan-rdc .tapis-coco{filter:url(#pl-tissu-3d)} #plan-rdc .poele{fill:url(#pl-metal)} #plan-rdc .poele-plateau{fill:url(#pl-metal-clair)} :is(#plan-etage, #plan-rdc) .sanitaire-b-clair{fill:url(#pl-vasque)} #plan-rdc .plante-feuille{fill:url(#pl-feuille)} #plan-rdc .plante-feuille-claire{fill:url(#pl-feuille-claire)} #plan-rdc .plante-feuille-large{fill:url(#pl-feuille-large)} #plan-rdc .table-verre{fill:url(#pl-verre); fill-opacity:1; stroke:#9CC3D8; stroke-width:2} #plan-rdc .vitrage{fill:url(#pl-vitre-reflet)} #plan-rdc .vantail{fill:url(#pl-chene)} #plan-rdc .meuble-blanc, #plan-rdc .piano{fill:url(#pl-blanc-meuble)} :is(#plan-etage, #plan-rdc) g.cloisons{filter:url(#pl-ombre-cloison)} :is(#plan-etage, #plan-rdc) .mur-ext{filter:url(#pl-ombre-mur)} :is(#plan-etage, #plan-rdc) .marche-ombre{fill:none; stroke:#000; stroke-opacity:.13; stroke-width:4; stroke-linecap:butt} :is(#plan-etage, #plan-rdc) .grain-film{pointer-events:none; opacity:.7} html[data-theme="sombre"] #plan-rdc .canape{fill:#3A3A3C} html[data-theme="sombre"] #plan-rdc .coussin-petrole{fill:#17444C} html[data-theme="sombre"] #plan-rdc .chaise-assise{fill:#17444C} html[data-theme="sombre"] #plan-rdc .chaise-coussin{fill:#1E525C} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .lit{fill:#3E382E} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .couette{fill:#37312A} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .oreiller{fill:#46403A} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .sanitaire-b-clair{fill:#34332E} html[data-theme="sombre"] #plan-rdc .table-verre{fill:#4E7A96; fill-opacity:.35} html[data-theme="sombre"] #plan-rdc .meuble-blanc{fill:#77746B} html[data-theme="sombre"] #plan-rdc .frigo{fill:#5E6264} html[data-theme="sombre"] #plan-rdc .frigo-brosse{opacity:.25} html[data-theme="sombre"] #plan-rdc .piano{fill:#8E8A82} html[data-theme="sombre"] #plan-rdc .bac-travertin{fill:#3A3226} html[data-theme="sombre"] :is(#plan-etage, #plan-rdc) .grain-film{opacity:.4} /* ===== La maison en 3D (29/09/2026) : calque plein écran ouvert depuis la page Plan ===== */ .maq3d{position:fixed; inset:0; z-index:80; background:#EDE9E1; display:flex; flex-direction:column; color:#2B2620} .maq3d[hidden]{display:none} .maq3d-barre{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 60px 8px 12px; position:relative; padding-top:calc(8px + env(safe-area-inset-top)); background:rgba(255,255,255,.86); border-bottom:1px solid #D8D2C6; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)} .maq3d-titre{font-size:var(--t-17, 17px); margin-right:6px} .maq3d-boutons{display:flex; gap:6px; flex-wrap:wrap; flex:1 1 auto; align-items:center} .maq3d-sep{width:1px; height:22px; background:#D8D2C6; margin:0 4px} .maq3d-fermer{position:absolute; right:12px; top:calc(8px + env(safe-area-inset-top)); width:38px; height:38px; border-radius:50%; border:1px solid #D8D2C6; background:#fff; font-size:24px; line-height:1; cursor:pointer; color:#2B2620} .maq3d-scene{flex:1 1 auto; min-height:0; position:relative} .maq3d-scene canvas{display:block; width:100%; height:100%} .maq3d-attente{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; color:#6B665C} .maq3d-aide{position:absolute; left:12px; bottom:calc(8px + env(safe-area-inset-bottom)); font-size:12px; color:#6B665C; pointer-events:none} .onglet-niveau.onglet-3d{font-weight:600; letter-spacing:.02em} html[data-theme="sombre"] .maq3d{background:#14161C; color:#E8E4DC} html[data-theme="sombre"] .maq3d-barre{background:rgba(24,26,32,.86); border-color:#33363E} html[data-theme="sombre"] .maq3d-sep{background:#33363E} html[data-theme="sombre"] .maq3d-fermer{background:#23262E; border-color:#33363E; color:#E8E4DC} html[data-theme="sombre"] .maq3d-aide, html[data-theme="sombre"] .maq3d-attente{color:#9A968E} @media (max-width: 820px){ .maq3d-titre{display:none} .maq3d-aide{display:none} } /* ===== Les alarmes sur le plan et les pastilles en alerte (29/09/2026) ===== */ @keyframes alarme-clignote{0%,100%{fill-opacity:.10}50%{fill-opacity:.42}} @keyframes alarme-contour{0%,100%{stroke-opacity:.35}50%{stroke-opacity:1}} @keyframes alarme-onde{0%{r:26;opacity:.85}100%{r:80;opacity:0}} @keyframes pastille-alerte{0%,100%{stroke-opacity:.25}50%{stroke-opacity:1}} @keyframes alerte-halo{0%{r:26;opacity:.9}100%{r:52;opacity:0}} .alarme-plan{pointer-events:none} .alarme-plan .alarme-voile{fill:var(--c-alarme);animation:alarme-clignote 1.4s ease-in-out infinite} .alarme-plan .alarme-contour{fill:none;stroke:var(--c-alarme);stroke-width:6;stroke-linejoin:round;animation:alarme-contour 1.4s ease-in-out infinite} .alarme-plan .alarme-onde{fill:none;stroke:var(--c-alarme);stroke-width:5;animation:alarme-onde 1.6s ease-out infinite} .alarme-plan .alarme-onde-2{animation-delay:.8s} .alarme-plan .alarme-cercle{fill:none;stroke:var(--c-alarme);stroke-width:5} .alarme-plan.terminee .alarme-voile{animation:none;fill-opacity:.16} .alarme-plan.terminee .alarme-contour{animation:none;stroke-opacity:.6;stroke-dasharray:14 10} .alarme-plan.terminee .alarme-onde{display:none} .alarme-plan .alarme-bulle{pointer-events:auto;cursor:pointer;filter:url(#pl-ombre-meuble)} .alarme-plan .alarme-bulle-fond,.alarme-plan .alarme-bulle-pointe{fill:var(--c-alarme)} .alarme-plan.terminee .alarme-bulle-fond,.alarme-plan.terminee .alarme-bulle-pointe{fill:#5E5A54} .alarme-plan .alarme-titre{font:700 26px -apple-system,system-ui,sans-serif;fill:#fff} .alarme-plan .alarme-valeur{font:500 21px -apple-system,system-ui,sans-serif;fill:#fff;fill-opacity:.92} .alarme-plan .alarme-croix{cursor:pointer} .alarme-plan .alarme-croix-fond{fill:rgba(255,255,255,.22)} .alarme-plan .alarme-croix-trait{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round} /* une pastille dont l'appareil est en alerte */ .appareil-g.en-alerte .alerte-halo{fill:none;stroke:var(--c-alerte);stroke-width:4;animation:alerte-halo 1.5s ease-out infinite;pointer-events:none} .appareil-g.en-alerte .appareil-pastille{stroke:var(--c-alerte);stroke-width:5;animation:pastille-alerte 1.2s ease-in-out infinite} /* ===== Le faisceau des caméras (29/09/2026) ===== */ @keyframes faisceau-alarme{0%,100%{opacity:.3}50%{opacity:1}} .faisceaux-cameras{pointer-events:none} .faisceau-camera .faisceau-secteur{opacity:.7;pointer-events:none} .faisceau-camera .faisceau-bord{fill:none;stroke-width:1.5;stroke-opacity:.35;stroke-dasharray:6 6;pointer-events:none} .faisceau-camera.choisi .faisceau-secteur{opacity:1} .faisceau-camera.choisi .faisceau-bord{stroke-opacity:.8} .faisceau-camera.en-alarme .faisceau-secteur{animation:faisceau-alarme 1.2s ease-in-out infinite} .faisceau-camera.en-alarme .faisceau-bord{stroke-opacity:.9;stroke-dasharray:none} .faisceau-camera .faisceau-axe{fill:none;stroke:#2E86DE;stroke-width:2;stroke-dasharray:5 6;pointer-events:none} .faisceau-camera .poignee-faisceau{pointer-events:auto;cursor:grab;touch-action:none} .faisceau-camera .poignee-cible{fill:transparent} .faisceau-camera .poignee-rond{fill:#fff;stroke:#2E86DE;stroke-width:3;filter:url(#pl-ombre-meuble)} html[data-theme="sombre"] .faisceau-camera .faisceau-secteur{opacity:.5} html[data-theme="sombre"] .faisceau-camera .poignee-rond{fill:#23262E} /* ============================================================ PLAN INTERACTIF (30/09/2026, Fred) : le panneau de la pièce touchée, la pièce cernée, l'état des volets à côté des ouvertures, et les calques de chaleur avec leur légende. ============================================================ */ .plan-panneau{ position:fixed;z-index:61;width:min(324px,92vw);max-height:min(72vh,540px);overflow-y:auto;overflow-x:hidden; overscroll-behavior:contain;padding:10px 12px 12px;border-radius:16px; background:var(--surface);border:1px solid var(--trait);box-shadow:var(--ombre-2); color:var(--texte);font-size:var(--t-13); } .plan-panneau[hidden]{display:none} .pce-tete{display:flex;align-items:center;gap:8px;margin-bottom:2px} .pce-piece{flex:1 1 auto;min-width:0;font-size:15px;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pce-chauffe{ flex:none;display:inline-flex;align-items:center;gap:4px;border:0;border-radius:999px;padding:4px 9px; background:var(--surface-creuse);color:var(--texte);font:inherit;font-size:12px;font-weight:650; white-space:nowrap;cursor:pointer; } .pce-chauffe:empty{display:none} .pce-chauffe .pce-consigne{color:var(--texte-doux);font-weight:500} .pce-chauffe svg{width:13px;height:13px;fill:#E8641B;flex:none} .pce-fermer{ flex:none;width:28px;height:28px;border-radius:50%;border:0;padding:0; background:var(--surface-creuse);color:var(--texte-doux);font-size:18px;line-height:1;cursor:pointer; } .pce-section{margin-top:8px} .pce-titre{ display:flex;justify-content:space-between;padding:4px 0 6px; font-size:var(--t-11);font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--texte-doux); } .pce-gestes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:4px} .pce-gestes button{ font:inherit;font-size:var(--t-13);font-weight:600;padding:8px 0;cursor:pointer; border:1px solid var(--trait);border-radius:10px;background:var(--surface);color:var(--texte); } .pce-gestes button:active{transform:scale(.97);background:var(--surface-creuse)} .pce-ligne{display:flex;align-items:center;gap:10px;padding:6px 0} .pce-nom{flex:1 1 auto;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pce-val{flex:none;min-width:50px;text-align:right;font-weight:700;color:#3F6A9C;font-variant-numeric:tabular-nums} .pce-ligne.en-course .pce-val{color:var(--accent)} /* Plus précis que la règle générale des curseurs (100 % de large). */ .plan-panneau input[type=range].pce-curseur{flex:0 0 100px;width:100px;height:auto;margin:0;accent-color:#3F6A9C} .pce-etat{flex:none;color:var(--texte-doux);font-size:var(--t-11)} .pce-inter{ flex:none;position:relative;width:44px;height:26px;padding:0;border-radius:14px;cursor:pointer; border:1px solid var(--trait);background:var(--surface-creuse); } .pce-inter::after{ content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%; background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s; } .pce-inter[aria-checked="true"]{background:#D9A441;border-color:#D9A441} .pce-inter[aria-checked="true"]::after{left:20px} .pce-inter.verrouille{opacity:.55;cursor:default} .pce-vide{padding:6px 0;color:var(--texte-doux)} /* La pièce choisie, cernée sur le plan. */ #page-plan .piece-choisie{fill:var(--accent);fill-opacity:.10;stroke:var(--accent);stroke-width:7;stroke-linejoin:round;pointer-events:none} /* L'état du volet, à côté de son ouverture. */ #page-plan .ouverture-etat rect{fill:#FBF8F2;stroke:#3F6A9C;stroke-width:2.5} #page-plan .ouverture-etat text{font-size:22px;font-weight:700;fill:#3F6A9C;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums} #page-plan .ouverture-g.en-course .ouverture-etat rect{stroke:var(--accent)} #page-plan .ouverture-g.en-course .ouverture-etat text{fill:var(--accent)} #page-plan .ouverture-g.en-course .velux-ferme{animation:plan-course-volet 1s ease-in-out infinite alternate} @keyframes plan-course-volet{from{fill-opacity:1}to{fill-opacity:.45}} html[data-theme="sombre"] #page-plan .ouverture-etat rect{fill:#1E1C18;stroke:#7FA6D3} html[data-theme="sombre"] #page-plan .ouverture-etat text{fill:#BBD3EE} /* Les calques de chaleur. */ .calques-plan{display:inline-flex;gap:7px;margin-left:auto} #page-plan .calque-plan{pointer-events:none} #page-plan svg.calque-actif .appareil-g.type-chauffage{display:none} #page-plan .calque-grand{font-size:38px;font-weight:800;fill:#2b2622;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:#fff;stroke-width:7;stroke-linejoin:round} #page-plan .calque-petit{font-size:21px;font-weight:600;fill:#3a3530;text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:6;stroke-linejoin:round} #page-plan .calque-flamme{fill:#E8641B;stroke:#fff;stroke-width:1.2;paint-order:stroke} #page-plan .sans-vanne .calque-grand{fill:#6b665f} html[data-theme="sombre"] #page-plan .calque-grand{fill:#F3EFE8;stroke:#1E1C18} html[data-theme="sombre"] #page-plan .calque-petit{fill:#D9D3C8;stroke:#1E1C18} html[data-theme="sombre"] #page-plan .calque-flamme{stroke:#1E1C18} .plan-carte{position:relative} .plan-legende{ position:absolute;left:0;bottom:0;z-index:3;pointer-events:none; padding:7px 10px;border-radius:12px;background:var(--surface);border:1px solid var(--trait); box-shadow:var(--ombre-2);font-size:var(--t-11);color:var(--texte-doux); } .plan-legende[hidden]{display:none} .plan-legende-barre{height:9px;width:180px;border-radius:5px;margin:5px 0 3px} .plan-legende-bornes{display:flex;justify-content:space-between;width:180px}