/* Section — La maison Brandt Energy (V3, mise à jour du 22/10 : pastilles inactives à 50 %, positions recalées). */
.maison__inner { display: flex; flex-direction: column; gap: var(--space-20); align-items: center; }
.maison__row1 { display: flex; flex-direction: column; gap: var(--space-20); width: 100%; }
.maison__title { display: flex; flex-direction: column; gap: var(--space-12); text-align: center; }
/* Visuel : maison 3D posée comme dans la maquette (pas de recadrage cover), cadre transparent sur la section blanche.
   Ratio et cadrage : tokens --maison-ratio et --maison-img-x / -y / -w (mobile 358 × 288, image à 105 % ; desktop 736 × 442, image à 84,9 %). */
.maison__visual { position: relative; width: 100%; aspect-ratio: var(--maison-ratio); border-radius: var(--radius-20); overflow: hidden; }
.maison__img { position: absolute; left: var(--maison-img-x); top: var(--maison-img-y); width: var(--maison-img-w); height: auto; max-width: none; } /* cadrage repris de la maquette (tokens) */
/* Pastilles (composant Figma « Repère — La maison ») : bouton 44 px, rond 22 px carbone filet blanc 2 px (24 px gris clair filet carbone en desktop).
   Inactive : opacité 50 % ; active (aria-pressed) : rouge, 100 % ; survol et focus : 100 %. Positions = centres en % du visuel. */
.maison__marker { position: absolute; left: var(--xm); top: var(--ym); width: var(--size-target-44); height: var(--size-target-44); transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; opacity: var(--idle-opacity); transition: opacity var(--transition); }
.maison__marker span { width: var(--size-marker); height: var(--size-marker); border-radius: 50%; background: var(--brandt-carbon); box-shadow: inset 0 0 0 var(--border-2) var(--brandt-white); transition: background-color var(--transition), transform var(--transition); }
.maison__marker:hover, .maison__marker:focus-visible, .maison__marker[aria-pressed="true"] { opacity: 1; }
.maison__marker:hover span { transform: scale(var(--hover-scale)); }
.maison__marker[aria-pressed="true"] span { background: var(--brandt-red); }
.maison__marker:focus-visible { box-shadow: var(--focus-ring); }
.maison__row2 { display: flex; flex-direction: column; gap: var(--space-20); width: 100%; align-items: center; }
.maison__card { width: 100%; display: grid; }
/* Les 5 contenus occupent la même cellule : la carte prend la hauteur du plus long, pas de saut au changement. */
.maison__legend { grid-area: 1 / 1; visibility: hidden; }
.maison__legend.is-current { visibility: visible; }
.maison__legend { display: flex; flex-direction: column; gap: var(--space-8); }
.maison__legend-head { display: flex; align-items: center; gap: var(--space-12); }
/* Carte équipement (Figma « La maison — Carte équipement ») : rang en pastille rouge (Body), nom (Body), titre (H2), texte (Body) — mêmes styles en mobile et en desktop (tailles par les tokens). */
.maison__counter { display: inline-flex; align-items: center; padding: var(--space-4) var(--space-8); border-radius: var(--radius-pill); background: var(--brandt-red); color: var(--brandt-white); font-size: var(--text-body-size); line-height: var(--text-body-lh); font-weight: var(--text-body-weight); }
.maison__name { font-size: var(--text-body-size); line-height: var(--text-body-lh); font-weight: var(--text-body-weight); }
.maison__legend-title { font-size: var(--text-h2-size); line-height: var(--text-h2-lh); font-weight: var(--text-h2-weight); }
.maison__nav { gap: var(--space-8); }
@media (min-width: 1024px) {
  .maison__inner { gap: var(--space-12); }
  .maison__row1 { flex-direction: row; gap: var(--space-24); align-items: stretch; }
  .maison__title { flex: 0 0 var(--size-column-title); justify-content: center; padding-top: var(--space-24); text-align: left; gap: var(--space-16); }
  .maison__visual { flex: 1 1 auto; width: auto; border-radius: var(--radius-12); }
  .maison__marker { left: var(--x); top: var(--y); }
  .maison__marker span { background: var(--brandt-light); box-shadow: inset 0 0 0 var(--border-2) var(--brandt-carbon); }
  .maison__marker[aria-pressed="true"] span { background: var(--brandt-red); }
  .maison__row2 { flex-direction: row; align-items: center; gap: var(--space-16); }
  .maison__card { flex: 1 1 auto; padding: var(--space-24) var(--space-28); gap: var(--space-12); }
  .maison__legend { gap: var(--space-12); }
  .maison__counter { padding: var(--space-4) var(--space-12); }
  .maison__nav { flex: 0 0 auto; gap: var(--space-12); }
}