/* ============================================================ 00 — Décor global de page · Figma nodes : 5369:22818 « lignes » (1440×11171 @ y=81) : 2 lignes de grille verticales x=120 / x=1320 + 3 séparateurs horizontaux + sparkle + étoiles basses de page. 5369:18891 / 5369:19217 / 5369:19380 « Mask group » : rails latéraux hachurés 120×791. 5369:19215 « Line 350 » : séparateur y=2112. 5369:24819 « Ellipse 1 » : halo gradient flou (~y=7259). Tous ces éléments sont décoratifs : aria-hidden="true" et pointer-events:none. Les offsets `top` en px sont valables dans la page assemblée (wrapper position:relative de 12552px) — voir sections/00-decor.html pour les points d'insertion. Décor masqué sous 768px (maquette desktop-only). ============================================================ */ /* ---- Lignes de grille verticales (5369:22819 / 5369:22820) ---- 2 traits de 1px, x=120 et x=1320, de y=81 (sous le header) jusqu'à y≈11252. Pur CSS, aucun asset. */ .page-lines { position: absolute; top: 81px; /* mesuré : départ sous la barre de nav */ left: 0; right: 0; height: 11171px; /* mesuré : s'arrête ~1300px avant le pied de page — ajuster à l'assemblage */ pointer-events: none; z-index: 0; } .page-lines::before, .page-lines::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-border); } .page-lines::before { left: clamp(20px, 8.33vw, 120px); } .page-lines::after { right: clamp(20px, 8.33vw, 120px); } /* ---- Rails latéraux hachurés (Mask groups 120×791) ------------ Lignes horizontales ~1px (1.3px Figma) au pas de 6.5px, couleur #E5E5E5 (--color-media-bg), avec fondu vertical d'apparition/ disparition (mask). Pur CSS, aucun asset. */ .side-decor { position: absolute; width: 120px; height: 791px; /* hauteur par défaut, surcharger par instance si besoin */ pointer-events: none; z-index: 0; background: repeating-linear-gradient( to bottom, var(--color-media-bg) 0 1px, transparent 1px 6.5px ); /* fondu mesuré Figma : 0 → 50% @33.5% → 100% @48% → 50% @68.8% → 0 */ -webkit-mask-image: linear-gradient(180deg, transparent 8.85%, rgba(0, 0, 0, 0.5) 33.47%, #000 48%, rgba(0, 0, 0, 0.5) 68.8%, transparent 100%); mask-image: linear-gradient(180deg, transparent 8.85%, rgba(0, 0, 0, 0.5) 33.47%, #000 48%, rgba(0, 0, 0, 0.5) 68.8%, transparent 100%); } .side-decor--left { left: 0; } .side-decor--right { right: 0; } /* Instances de la maquette */ .side-decor--hero { top: 64px; } /* 5369:18891 — zone hero, côté gauche */ .side-decor--zone2 { top: 1870px; } /* 5369:19217 + 5369:19380 (superposés dans Figma → une seule instance suffit) */ /* ---- Séparateurs horizontaux 1px ------------------------------ Purs CSS (--color-border). Deux largeurs : contenu (1200px centré, comme x=120→1321) ou full-bleed 1440. */ .page-separator { position: absolute; left: 50%; transform: translateX(-50%); width: min(var(--container-max), calc(100% - 2 * clamp(20px, 8.33vw, 120px))); height: 1px; background: var(--color-border); pointer-events: none; z-index: 0; } .page-separator--full { width: 100%; } /* Instances de la maquette */ .page-separator--s1 { top: 2112px; } /* 5369:19215 « Line 350 » */ .page-separator--s2 { top: 4902px; } /* 5369:23120 (x=120, w=1201) */ .page-separator--s3 { top: 5667px; } /* 5369:23122 — full-bleed */ .page-separator--s4 { top: 6496px; } /* 5369:23123 — full-bleed */ /* ---- Halo gradient flou (.glow-ellipse) ------------------------ SVG exporté (ellipse coral→violet + flou gaussien débordant). S'utilise en . Le fichier inclut la marge de flou : l'ellipse « utile » fait ~426×626, le SVG rendu 1013×1429. */ .glow-ellipse { position: absolute; left: 50%; width: 1013px; height: 1429px; max-width: none; /* Centrage par `translate` et non `transform` : .glow-ellipse--mid est une cible de parallaxe (js/interactions.js) et `.plx { transform: … }` écrasait ce centrage — même piège que .hero__halo. */ translate: -50% -50%; pointer-events: none; z-index: 0; } /* Instance de la maquette : node 5369:24819, box y=7259 (top) → centre vertical ≈ 7572px. x non déterminable depuis le node (vector page-level) : centré par défaut, ajuster à l'assemblage. */ .glow-ellipse--mid { top: 7572px; } /* Variante 100% CSS (fallback sans asset, approximation du SVG) */ .glow-ellipse--css { background: radial-gradient(closest-side at 50% 32%, rgba(255, 119, 74, 0.28), transparent 70%), radial-gradient(closest-side at 52% 62%, rgba(103, 94, 255, 0.35), transparent 72%); filter: blur(60px); } /* ---- Sparkle & étoiles de bas de page ------------------------- Images décoratives ponctuelles du node « lignes ». Positions mesurées Figma, ancrées au centre du viewport (page 1440). */ .decor-sparkle, .decor-star { position: absolute; pointer-events: none; z-index: 0; } /* retour 13/08 : .decor-sparkle--1 (24×24 @ 2486) supprimée — elle « flottait » sans raison dans le fond de la section 03-preoccupations. */ .decor-star--violet-1 { top: 10061px; left: calc(50% + 195px); width: 38px; height: 37px; } /* 5377:25285 (x=915) */ .decor-star--violet-2 { top: 10120px; left: calc(50% - 560px); width: 52px; height: 51px; } /* retour 13/08 : pendant gauche */ .decor-star--orange-1 { top: 10242px; left: calc(50% - 485px); width: 102px; height: 100px; } /* 5377:25286 (x=235) */ .decor-star--orange-2 { top: 10361px; left: calc(50% - 361px); width: 46px; height: 45px; } /* 5377:25288 (x=359) */ /* ---- Responsive ------------------------------------------------ */ @media (max-width: 1024px) { .side-decor { display: none; } /* rails 120px trop larges pour tablette */ } @media (max-width: 768px) { .page-lines, .decor-sparkle, .decor-star, .glow-ellipse--mid { display: none; } /* maquette desktop-only : décor retiré sur mobile */ } /* --- retours 13/08 : les étoiles décoratives doivent rester visibles au-dessus des fonds de section (la bande conviction les recouvrait) --- */ .decor-star, .decor-sparkle { z-index: 2; pointer-events: none; }