/* Page styleguide (privée, non indexée) : mise en forme des démonstrations uniquement. Aucune valeur en dur : tokens.css. */
.sg-swatch { align-items: center; }
.sg-swatch__chip { flex: 0 0 auto; width: var(--size-pastille-48); height: var(--size-pastille-48); border-radius: var(--radius-12); box-shadow: inset 0 0 0 var(--border-1) var(--brandt-line); }
.sg-swatch__chip--carbon { background: var(--brandt-carbon); }
.sg-swatch__chip--light { background: var(--brandt-light); }
.sg-swatch__chip--red { background: var(--brandt-red); }
.sg-swatch__chip--white { background: var(--brandt-white); }
.sg-swatch__chip--carbon-muted { background: var(--brandt-carbon-muted); }
.sg-swatch__chip--line { background: var(--brandt-line); }
.sg-spaces { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: var(--space-16); }
.sg-space { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.sg-space__box { display: block; background: var(--brandt-red); border-radius: var(--space-4); }
.sg-space__box--4 { width: var(--space-4); height: var(--space-4); }
.sg-space__box--8 { width: var(--space-8); height: var(--space-8); }
.sg-space__box--12 { width: var(--space-12); height: var(--space-12); }
.sg-space__box--16 { width: var(--space-16); height: var(--space-16); }
.sg-space__box--20 { width: var(--space-20); height: var(--space-20); }
.sg-space__box--24 { width: var(--space-24); height: var(--space-24); }
.sg-space__box--28 { width: var(--space-28); height: var(--space-28); }
.sg-space__box--32 { width: var(--space-32); height: var(--space-32); }
.sg-space__box--40 { width: var(--space-40); height: var(--space-40); }
.sg-space__box--48 { width: var(--space-48); height: var(--space-48); }
.sg-space__box--56 { width: var(--space-56); height: var(--space-56); }
.sg-space__box--64 { width: var(--space-64); height: var(--space-64); }
.sg-space__box--80 { width: var(--space-80); height: var(--space-80); }
.sg-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-12); align-items: center; }
.sg-row--start { align-items: flex-start; }
.sg-mobile-width { max-width: var(--size-mobile-content); }
.sg-gap-12 { gap: var(--space-12); }
.sg-hero { position: relative; display: flex; align-items: flex-end; padding: var(--space-24); border-radius: var(--radius-20); overflow: hidden; isolation: isolate; }
.sg-hero__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.sg-header { display: flex; align-items: center; height: var(--header-height); padding-inline: var(--space-24); border-radius: var(--radius-20); }
.sg-header--light { background: var(--brandt-white); color: var(--brandt-carbon); }
.sg-header--dark { background: var(--brandt-carbon); color: var(--brandt-white); }
.sg-nav { display: flex; gap: var(--space-28); }
.site-nav__link.sg-is-hover { border-radius: 0; box-shadow: inset 0 calc(-1 * var(--border-1)) 0 currentColor; }
.sg-markers { max-width: var(--size-gallery); background: var(--brandt-light); }
.maison__marker.sg-is-hover { opacity: 1; }

/* États figés pour la démonstration (mêmes déclarations que les vrais états :hover / :focus-visible des composants) */
.cta--primary.sg-is-hover { background: var(--brandt-white); color: var(--brandt-red); border-color: var(--brandt-red); }
.cta--secondary.sg-is-hover { color: var(--brandt-red); border-color: var(--brandt-red); }
.cta.sg-is-focus { box-shadow: var(--focus-ring); }
.text-button.sg-is-hover { color: var(--brandt-red); }
.submenu__link.sg-is-hover { background: var(--brandt-light); color: var(--brandt-red); }
.fiche__thumb.sg-is-hover::after { box-shadow: inset 0 0 0 var(--border-1-5) var(--brandt-carbon); }
.sg-submenu { position: static; flex: 0 0 auto; }