/* realisations : ex-bloc <style> de realisations-blueprint-light.php, source de vérité depuis le 09/09/2026 (plan poids-html-blueprint-light, lot 2). Tokens : var(--color-*) uniquement. */
/* Aligner le header sur le fond de page (le bundle compile fournit --reals-bg). */
body.page-realisations { --header-bg-scrolled: var(--reals-bg); }
/* SSR complet (avant hydratation JS), GÉOMÉTRIE = grille bento (12 colonnes,
   spans featured/wide/tall identiques à realisations-grid.js) : le swap
   SSR→JS est neutre en layout (CLS 0,31→~0, audit perf 2026-07-06 F1). */
.reals-ssr-grid{list-style:none;margin:0;padding:2rem 5vw 4rem;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-flow:row dense;gap:28px}
.reals-ssr-grid__item{grid-column:span 4}
.reals-ssr-grid__item--featured{grid-column:span 8;grid-row:span 2;min-height:560px}
.reals-ssr-grid__item--wide{grid-column:span 8}
.reals-ssr-grid__item--tall{grid-column:span 4;grid-row:span 2;min-height:560px}
.reals-ssr-grid__tagline{grid-column:span 4}
@media (max-width:1024px){.reals-ssr-grid{grid-template-columns:repeat(2,1fr)}.reals-ssr-grid__item,.reals-ssr-grid__item--featured,.reals-ssr-grid__item--wide,.reals-ssr-grid__item--tall{grid-column:span 1;grid-row:span 1;min-height:0}.reals-ssr-grid__tagline{grid-column:span 2}}
@media (max-width:768px){.reals-ssr-grid{grid-template-columns:1fr}.reals-ssr-grid__tagline{grid-column:span 1}}
.reals-ssr-grid__item img{width:100%;height:100%;min-height:0;aspect-ratio:3/2;object-fit:cover;border-radius:10px;display:block}
.reals-ssr-grid__item--featured img,.reals-ssr-grid__item--tall img{aspect-ratio:auto;height:100%}
.reals-ssr-grid__link{text-decoration:none;color:inherit;display:block}
.reals-ssr-grid h2{font-size:1.05rem;line-height:1.3;margin:.7rem 0 .25rem;font-weight:600}
.reals-ssr-grid p{color:var(--color-gray-600);font-size:.9rem;margin:0}
/* Zone d'en-tête : styles FINAUX inline (identiques à realisations.css) —
   sans eux, l'arrivée du CSS async à ~750 ms re-layoutait toute la zone
   (padding 140px + clamp 72px) → shift 0,15 (audit perf F1). Valeurs copiées
   du computed post-hydratation ; ne pas dériver. */
.reals-header{max-width:1400px;margin:0 auto;padding:140px 40px 40px}
.reals-title{font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:clamp(36px,6vw,72px);font-weight:800;line-height:1.05;letter-spacing:-.03em;color:var(--color-bleu);margin:0}
.reals-title em{font-style:italic;font-weight:400}
.reals-meta{font-size:16px;line-height:1.7;margin:0;padding:0}
.reals-updated{margin:8px 0 0}
@media (max-width:768px){.reals-header{padding:110px 20px 24px}}
/* Barre de filtres AVANT hydratation : le SSR non stylé s'étalait sur 264 px
   puis s'effondrait à 73 px au rewrite JS → shift 0,099 (audit perf F1).
   Clamp à la hauteur finale ; realisations.js pose .is-hydrated au init. */
#realsFilters:not(.is-hydrated){min-height:73px;max-height:73px;overflow:hidden}
@media (max-width:768px){#realsFilters:not(.is-hydrated){min-height:56px;max-height:56px}}
/* Date de mise à jour : isolée et discrète sous le compteur. */
.reals-updated{margin:.5rem 0 0;font-size:.72rem;letter-spacing:.02em;color:var(--color-gray-text,#999);opacity:.7}
.reals-updated time{font-weight:500}