).
CORRECTION mission 32, lot B (fait B4) : le bandeau d'état (ancien
, troisième enfant direct de la figure) vit
maintenant DANS .m3d-demo-cadre (bandeau au bas de l'écran de la tablette, maquettes/v4/automatisation-v4.html) — la figure n'a plus que
DEUX enfants directs (.m3d-demo-cadre, .m3d-demo-commandes), ce qui retire le besoin des règles .m3d-demo-etat{grid-column:1/-1}
ci-dessous (supprimées). Les commandes passent en pilules empilées verticalement (site/commun/maison-3d-demo.css) à toutes les
largeurs : la bascule « rangée qui défile » sous 900 px (fait 196, mission 31-BIS) répondait à un débordement propre aux anciens
boutons rectangulaires bout à bout — n'existe plus avec des pilules empilées, donc retirée elle aussi.
BOGUE TROUVÉ ET CORRIGÉ avant publication (vérifié dans un navigateur réel, voir outils/maison-3d-donnees.mjs, commentaire de
sectionDemo()) : une première version posait .v4-demo sur un
qui ENVELOPPAIT la figure (avec la ligne « Essayez » et la mention en
plus) — mais .v4-demo (site/commun/v4.css) est elle-même une grille à deux colonnes attendant deux enfants DIRECTS, et avec trois enfants
réels, la figure entière se retrouvait écrasée dans la seconde colonne (0,6fr), rétrécie. Corrigé : .v4-demo est maintenant posée
DIRECTEMENT sur (fusion de classes, jamais une enveloppe) — la figure DEVIENT ainsi le conteneur grille
de 0b, et les quatre règles ci-dessous placent SES vrais enfants (.m3d-demo-cadre, .m3d-demo-commandes, .m3d-demo-etat) dans les deux
colonnes (et la ligne d'état sur toute la largeur). Spécificité : chaque sélecteur porte .v4-demo EN PLUS des classes déjà utilisées par
site/commun/maison-3d-demo.css, donc plus spécifique qu'elles — aucune dépendance à l'ordre de chargement des deux feuilles. Comme la
ligne « Essayez » et la mention restent des paragraphes FRÈRES de la figure (jamais dedans), .v4-demo ne s'applique qu'à la figure
elle-même : la petite démonstration réutilisée ailleurs sur le site (classe .m3d-demo-petit) et l'article n'ont pas la classe .v4-demo et
ne sont donc pas affectés par les règles ci-dessous. */
/* CORRECTION mission 31-BIS, lot B (fait 196) : l'image de la démonstration cliquable (1,4fr sur 2fr, soit 70 % de la
figure) réduite — les commandes gagnent l'espace libéré mais restent à côté de l'image (grid-column:2), jamais
dessous, dès 900 px. PREMIER ESSAI à 0,7fr (la moitié exacte de 1,4fr) RETIRÉ : à 1 366 px, l'image tombait sous
543 px, et deux points cliquables voisins de la démonstration (chambre/lumière à 70 %,33 % et chambre/rideaux à
73 %,23 %, à 30 px de diamètre fixe chacun, site/commun/maison-3d-demo.css) se chevauchaient, un bloquant les clics
sur l'autre (trouvé par node outils/tester-maison-3d.mjs, section D, qui simule ces clics). Calcul refait : à ce
diamètre et à cet écart réel (≈ 0,0736 × largeur de l'image), il faut au moins ≈ 543 px pour que les deux cercles ne
se touchent pas, avec une marge de sécurité ≈ 560 px retenue ci-dessous (min-width, jamais contourné même si la
fenêtre est plus étroite que 1 366 px) ; 0,9fr (que les 560 px du min-width dépassent déjà à 1 366 px, les deux
agissant ensemble) reste une réduction réelle et visible (de 70 % à ≈ 47 % de la figure), simplement pas « de
moitié exactement » — fonctionnalité avant exactitude littérale d'un nombre. */
/* @media (min-width:901px) : indispensable ici — sans cette garde, la règle l'emportait aussi sous 900 px (deux
classes contre une seule pour .v4-demo{grid-template-columns:1fr} de site/commun/v4.css), ce qui empêchait la
colonne unique de téléphone de reprendre le dessus et faisait déborder la page de 210 px à 390 px (minmax(560px,…)
forçait 560 px de large dans un écran de 390 px). */
@media (min-width:901px){
html[data-theme] .m3d-demo.v4-demo{grid-template-columns:minmax(560px,.9fr) 1fr}
}
/* width:100% indispensable ici : .m3d-demo-cadre (site/commun/maison-3d-demo.css) a margin-inline:auto pour se centrer en flux normal
sur l'article (qui n'a pas .v4-demo) — mais un item de grille avec une largeur auto ET des marges inline auto n'est jamais étiré par
la grille (la spécification d'alignement de boîte neutralise justify-items:stretch dès qu'une marge inline vaut auto), et son contenu
(.m3d-demo-ecran{width:100%}) ne contribue pour ainsi dire rien à une taille de contenu intrinsèque : sans cette règle, le cadre
retombe à la taille de son seul padding (~28 px) sur cette page. Trouvé en navigateur réel après B4 (mission 32, lot B, agrégation). */
html[data-theme] .m3d-demo.v4-demo .m3d-demo-cadre{grid-column:1;width:100%}
html[data-theme] .m3d-demo.v4-demo.js-actif .m3d-demo-commandes{grid-column:2;margin-top:0}
@media (max-width:900px){
html[data-theme] .m3d-demo.v4-demo .m3d-demo-cadre{grid-column:1}
/* min-width:0 : sans lui, la colonne de pilules garde sa largeur minimale INTRINSÈQUE comme largeur minimale de la
piste de grille — même piège CSS Grid que .v4-wrap:has(.v4-tabl){min-width:0}, posé dans site/commun/v4.css pour
le tableau des forfaits : un item de grille garde min-width:auto par défaut (fait 195/196, mission 31-BIS). */
html[data-theme] .m3d-demo.v4-demo.js-actif .m3d-demo-commandes{grid-column:1;min-width:0}
}
/* Mission 33, C1 (ordre du 6 novembre 2026) : blocs propres à la nouvelle maquette, repris des gabarits déjà posés pour Automatisation
(site/commun/v4-automatisation.css) — copiés ici plutôt qu'importés, puisque cette feuille est propre à CETTE page (en-tête du
fichier) et que v4-automatisation.css est propre à l'autre : aucune page ne charge les deux à la fois, les mêmes noms de classe
(.v4-puces, .v4-avant-apres, .v4-apres, .v4-pack*) peuvent donc être repris tels quels sans collision. */
/* « Pour qui » : pastilles. */
html[data-theme] .v4-puces{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
html[data-theme] .v4-puces span{border:1px solid var(--trait);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:14px;color:var(--texte2)}
/* « Une soirée, avant et après » : deux cartes, la seconde bordée d'or. */
html[data-theme] .v4-avant-apres .v4-carte ul{margin:0;padding-left:18px;color:var(--texte2);display:grid;gap:6px;font-size:15px}
html[data-theme] .v4-avant-apres .v4-carte h3{font-family:var(--serif-titres);font-size:20px;margin:0 0 4px}
html[data-theme] .v4-avant-apres .v4-apres{border-color:var(--or);box-shadow:0 0 0 3px rgba(201,150,43,.12)}
/* « Ce que vous obtenez, étape par étape » : quatre étapes sur un fil doré (même motif que .v4-parcours d'Automatisation, à cinq
colonnes — ici renommé .v4-parcours-m3d pour la largeur à quatre colonnes propre à cette page, sans toucher à l'autre feuille). */
html[data-theme] .v4-parcours-m3d{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative;margin-top:24px}
html[data-theme] .v4-parcours-m3d::before{content:"";position:absolute;left:8%;right:8%;top:38px;height:2px;background:linear-gradient(90deg,transparent,var(--or) 10%,var(--or) 90%,transparent);z-index:0}
html[data-theme] .v4-parcours-m3d .v4-etape{position:relative;z-index:1;display:grid;gap:8px;justify-items:center;text-align:center}
html[data-theme] .v4-parcours-m3d .v4-etape-ico{width:76px;height:76px;border-radius:50%;background:var(--surface);border:2px solid var(--or);display:grid;place-items:center;font-family:var(--serif-titres);font-size:30px;font-weight:600;color:var(--or-texte)}
html[data-theme] .v4-parcours-m3d .v4-etape b{font-family:var(--serif-titres);font-size:20px;font-weight:600}
html[data-theme] .v4-parcours-m3d .v4-etape p{font-size:14px;color:var(--texte2);max-width:22ch;margin:0}
html[data-theme] .v4-parcours-m3d .v4-etape .v4-note{margin-top:0}
/* « Deux offres, un seul prix clair » : même gabarit de carte que les packs Automatisation, à deux colonnes au lieu de trois. */
html[data-theme] .v4-packs-deux{grid-template-columns:repeat(2,1fr)}
html[data-theme] .v4-pack{background:var(--surface);border:1px solid var(--trait);border-radius:16px;padding:22px;display:grid;grid-template-rows:auto auto auto 1fr auto auto;gap:12px;min-width:0}
html[data-theme] .v4-pack-reco{border-color:var(--or);box-shadow:0 14px 40px rgba(0,0,0,.10)}
html[data-theme] .v4-pack h3{font-family:var(--serif-titres);font-size:30px;margin:0}
html[data-theme] .v4-pack-pour{font-size:14px;color:var(--texte2);margin:0}
html[data-theme] .v4-pack ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:15px;color:var(--texte2);align-content:start}
html[data-theme] .v4-pack-lignes{display:grid;gap:6px;border-top:1px solid var(--trait);padding-top:12px}
html[data-theme] .v4-pack-lignes>div{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:15px;align-items:baseline}
html[data-theme] .v4-pack-lab{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--or-texte);font-weight:700;min-width:64px}
html[data-theme] .v4-pack-montant{font-family:var(--serif-titres);font-size:26px;font-weight:700;color:var(--texte)}
html[data-theme] .v4-pack-outil{color:var(--texte2)}
/* « Pourquoi chez vous, et pas dans le nuage? » : coloration oui/non du tableau comparatif. */
html[data-theme] .v4-tabl-oui{color:var(--or-texte);font-weight:700}
html[data-theme] .v4-tabl-non{color:var(--texte2)}
@media (max-width:900px){
html[data-theme] .v4-parcours-m3d{grid-template-columns:1fr}
html[data-theme] .v4-parcours-m3d::before{display:none}
html[data-theme] .v4-parcours-m3d .v4-etape{justify-items:start;text-align:left;grid-template-columns:76px 1fr;column-gap:14px}
html[data-theme] .v4-parcours-m3d .v4-etape-ico{grid-row:1/4}
html[data-theme] .v4-packs-deux{grid-template-columns:1fr}
}