/* © 2026 DRAK Infinity (NEQ 2281240509). Mission 27, fait 170. Démonstration cliquable de la Maison 3D (cinq photos
   site/img/maison-3d/etat-{base,sa,ch,ri,ex}.webp). Remplace l'ancienne feuille site/commun/maquette-3d.css (bloc SVG,
   voir _a_supprimer/). Partagée entre la page Maison 3D connectée et l'article.
   CORRECTION mission 32, lot B (fait B4, ordre du 6 novembre 2026, maquettes/v4/automatisation-v4.html, onglet « Maison
   3D (démonstration) ») : habillage en tablette (cadre sombre arrondi, écran 4:3, bandeau d'état dans l'écran, commandes
   en pilules) plutôt que le cadre plat 1024×688 et les boutons rectangulaires d'avant. Jetons du site, jamais ceux de la
   maquette : var(--panneau) existe déjà sous ce nom (site/commun/v3.css) pour un fond sombre de panneau — réutilisé ici
   pour le boîtier de la tablette plutôt que la couleur fixe #0b1120 de la maquette, pour rester correct dans les deux
   thèmes (--panneau vaut #0b1a3a en clair, #071229 en nuit : un boîtier sombre dans les deux cas, comme un vrai appareil).
   var(--or), var(--trait), var(--surface), var(--texte), var(--texte2), var(--btn-texte) existent déjà sous ces noms. */
.m3d-demo{margin:0 0 26px}
.m3d-demo-essai{margin:0 0 10px;font-weight:600;color:var(--texte)}

/* Le boîtier de la tablette : fond sombre, coins arrondis, un petit bouton sur le bord (::after), comme un vrai appareil
   — volontairement le même aspect dans les deux thèmes (un boîtier physique n'a pas de « mode clair »). */
.m3d-demo-cadre{position:relative;background:var(--panneau);border-radius:26px;padding:14px;box-shadow:var(--ombre),inset 0 0 0 2px rgba(255,255,255,.06);max-width:720px;margin-inline:auto}
.m3d-demo-cadre::after{content:"";position:absolute;right:6px;top:50%;width:4px;height:36px;border-radius:2px;background:rgba(255,255,255,.14);transform:translateY(-50%)}
.m3d-demo-ecran{position:relative;width:100%;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--panneau)}
.m3d-demo-ecran img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.m3d-demo-calque{opacity:0;transition:opacity .55s ease}
.m3d-demo-calque.visible{opacity:1}

/* Commandes masquées par défaut : la page fonctionne sans JavaScript (seule la photo etat-base.webp reste visible). Le script
   (site/commun/maison-3d-demo.js) ajoute la classe js-actif dès son exécution pour les révéler ; sans JavaScript, elles n'apparaissent jamais. */
.m3d-demo-point,.m3d-demo-commandes,.m3d-demo-bandeau{display:none}
.m3d-demo.js-actif .m3d-demo-point{display:block}
.m3d-demo.js-actif .m3d-demo-commandes{display:flex}
/* display:flex (jamais block) : .m3d-demo-bandeau{display:flex;gap:8px} (plus bas) pose l'espacement entre le titre <b> et l'état
   <span> ; une règle js-actif qui le repasserait à block (plus spécifique, qui l'emporterait malgré l'ordre du fichier) collait les
   deux textes l'un contre l'autre sans espace — trouvé en navigateur réel après B4 (mission 32, lot B, agrégation). */
.m3d-demo.js-actif .m3d-demo-bandeau{display:flex}

/* Points dorés pulsants sur les pièces cliquables (fidèle à la maquette : .point, 30px, anneau doré animé). */
.m3d-demo-point{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.9);background:var(--or);box-shadow:0 0 0 6px var(--puce),0 4px 14px rgba(0,0,0,.35);cursor:pointer;padding:0}
.m3d-demo-point::after{content:"";position:absolute;inset:-14px;border-radius:50%;animation:m3d-demo-pulse 2.4s ease-out infinite;border:2px solid var(--puce)}
.m3d-demo-point:hover::after,.m3d-demo-point:focus-visible::after{animation:none}
.m3d-demo-point[aria-pressed="true"]{background:var(--panneau-bord)}
.m3d-demo-point:focus-visible{outline:3px solid var(--or-texte);outline-offset:3px}
@keyframes m3d-demo-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.5);opacity:0}}

/* Bandeau d'état, EN BAS DE L'ÉCRAN (dans la tablette, fidèle à la maquette : .bandeau, fondu dégradé sombre, couleurs
   fixes — posé sur la photo elle-même, pas sur le fond de la page, comme l'était déjà l'ancienne étiquette au survol). */
.m3d-demo-bandeau{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;background:linear-gradient(0deg,rgba(11,17,32,.85),transparent);color:#f1ecdf;font-size:13px;font-family:var(--sans);display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;pointer-events:none}
.m3d-demo-bandeau b{font-family:var(--serif);font-size:16px;font-weight:600}

/* Commandes en pilules, point lumineux doré (allumé) ou éteint (classe .off posée par le script sur le bouton de la
   pièce active, puisque cliquer une pièce l'ÉTEINT visuellement dans la maison — même sens que l'ancien mécanisme). */
.m3d-demo-commandes{flex-direction:column;align-items:stretch;gap:10px;margin-top:0}
.m3d-demo-pilule{font:inherit;text-align:left;border:1px solid var(--trait);background:var(--surface);color:var(--texte);border-radius:999px;padding:10px 16px;display:flex;align-items:center;gap:10px;cursor:pointer;font-size:15px;font-family:var(--sans)}
.m3d-demo-pilule:focus-visible{outline:3px solid var(--or-texte);outline-offset:2px}
.m3d-demo-point-dot{width:10px;height:10px;border-radius:50%;background:var(--or);box-shadow:0 0 8px var(--or);flex:none}
.m3d-demo-pilule.off .m3d-demo-point-dot{background:var(--trait);box-shadow:none}
.m3d-demo-tout{justify-content:center;border-color:var(--or);font-weight:700}

@media (prefers-reduced-motion:reduce){
  .m3d-demo-point::after{animation:none}
  .m3d-demo-calque{transition:none}
}
@media (max-width:480px){
  .m3d-demo-point{width:26px;height:26px}
  .m3d-demo-pilule{padding:9px 13px;font-size:14px}
}

/* Reprise en plus petit ailleurs sur le site (même rôle que l'ancien .m3d-demo-petit) : inchangé, sans classe v4-demo. */
.m3d-demo.m3d-demo-petit{max-width:560px;margin:4px auto 10px}