Composants
Les composants structurels de Site 2026 — page, header, conteneurs, cartes, footer et icônes — construits exclusivement avec les variables du système. Chaque composant est présenté avec un aperçu réel, ses classes, ses variantes et ses règles techniques.
Page & layout
.page s'applique au <body> ; .page-layout installe une grille trois rangées header / main / footer où 1fr sur main garantit le sticky footer.
{{ codePageLayout }}
Header
.site-header est sticky et isolé (isolation: isolate) ; .header-wrapper porte le style visuel : fond translucide White 20%, bordure XXS Grey 100, rayon card-outer. Sa hauteur suit --layout-header-height : 56px → 72px → 99px.
{{ codeHeader }}
Container
.container centre le contenu à 80rem avec un padding latéral fluide, et active les Container Queries. Les modifiers n'écrasent que max-width et s'utilisent en complément : class="container container--narrow".
{{ codeContainer }}
Card
Le composant central du système : conteneur flex vertical avec media 16/9, body en stack et footer d'actions ancré en bas (margin-block-start: auto). Chaque carte est son propre contexte de Container Query.
.card — défaut
.card--horizontal
Media carré fluide — clamp(thumbnail-md, 40%, thumbnail-xl) — et séparateur du footer qui bascule d'horizontal à vertical. Repli en colonne sous 430px.
.card--featured
Fond Marine Blue 800, media cinémascope 21/9, respiration --spacing-component-lg et titre XL. Déjà sombre : aucune inversion en dark mode.
{{ codeCard }}