.vitrine { max-width: 72rem; margin: 0 auto; padding: var(--space-3) max(var(--space-2), env(safe-area-inset-right)) var(--space-4) max(var(--space-2), env(safe-area-inset-left)); }
.vitrine-intro { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.vitrine-sommaire { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.vitrine-sommaire a { color: var(--text-dim); font-size: .9rem; text-decoration: none; }
.vitrine-sommaire a:hover { color: var(--accent); }
.vitrine-section { display: grid; gap: var(--space-2); padding-block: var(--space-3); border-top: 1px solid var(--border); scroll-margin-top: calc(var(--header-height) + 8px); }
.vitrine-section > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font: 600 1.25rem var(--display); color: var(--text-h); }
.vitrine-section > h2 code { font: .8rem var(--mono); color: var(--text-dim); }
.vitrine-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-2); }
.vitrine-grille--large { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.exemple { display: grid; gap: 8px; align-content: start; min-width: 0; margin: 0; }
.exemple__scene { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.exemple__scene--colonne { flex-direction: column; align-items: stretch; }
.exemple figcaption { display: flex; flex-wrap: wrap; gap: 4px 8px; font: .78rem/1.4 var(--mono); color: var(--text-dim); }
.exemple figcaption code { color: var(--text-h); }
.nuancier { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.nuancier li { display: grid; gap: 4px; font: .75rem var(--mono); color: var(--text-dim); }
.nuancier li::before { content: ''; height: 3rem; background: var(--nuance); border: 1px solid var(--border); }
.coin-demo { width: 6rem; height: 4rem; display: grid; place-items: center; font: .7rem var(--mono); }
.carte-demo { --card-height: 14rem; width: 100%; }
.bascule-theme { margin-left: 8px; }
@media (max-width: 899px) { .bascule-theme .button__label { display: none; } }
.exemple .form-card { margin: 0; }
.derriere-verre { position: relative; min-height: 6rem; }
.verre-demo { position: absolute; left: 30%; right: 0; top: 50%; translate: 0 -50%; height: 4rem; display: grid; place-items: end; padding: 4px 8px; font: .7rem var(--mono); }
.defauts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin: 0; font: .78rem/1.5 var(--mono); }
.defauts__titre { font-weight: 600; color: var(--text-h); }
.defauts div { display: flex; gap: 6px; }
.defauts dt { color: var(--text-dim); }
.defauts dd { margin: 0; color: var(--text-h); }
.cadre-plein { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.exemple--large { grid-column: 1 / -1; }
.cadre-ecran { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); width: fit-content; }
.cadre-ecran__vue { display: block; border: 0; background: var(--bg-0); }
.cadre-ecran__vue--mobile { width: 390px; height: 420px; }
.cadre-ecran__vue--bureau { width: 1000px; height: 260px; }
.provisoire { margin: 0; padding: 6px 10px; font-size: .85rem; color: var(--warning); box-shadow: inset 3px 0 var(--warning); }
.galerie-demo { --card-height: 12rem; --cards-row: 1.5rem; }