/* =========================================================================== Décors de fond — un par page =========================================================================== Les pages ajoutées en version 10 étaient sur un noir plat. Le site, lui, a des fonds travaillés : halos colorés, dégradés, grain. L'écart se voyait immédiatement. Le principe retenu : chaque page a SON décor, tiré de son propre sujet plutôt que d'un catalogue d'effets. Une page peinture montre une coulure, une page façade une texture minérale, un calculateur une grille de mesure. Le fond parle du contenu ; c'est ce qui empêche l'ensemble de ressembler à six variantes du même papier peint. Tous sont posés sur , en pseudo-éléments fixes, sous le contenu. Aucun n'intercepte le pointeur, aucun n'est annoncé aux lecteurs d'écran, et tous s'immobilisent avec prefers-reduced-motion. =========================================================================== */ /* Les décors sont posés en z-index NÉGATIF : ils passent derrière tout le contenu sans qu'on ait besoin de toucher au contenu lui-même. La première version faisait l'inverse — « .fond-base > * { position: relative; z-index: 1 } » pour faire remonter le contenu. C'était une erreur sérieuse : cette règle atteint TOUS les enfants directs de , dont la barre de navigation, qui perdait son « position: fixed » et se mettait à défiler avec la page, laissant en prime la bande vide de son .nav-spacer. Un fond décoratif ne doit jamais avoir d'avis sur le positionnement du reste du document. */ .hero-page.fond-base::before, .hero-page.fond-base::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; } /* --------------------------------------------------------------------------- 1. Pages prestations — la coulure --------------------------------------------------------------------------- Deux voiles de couleur qui descendent lentement, comme une teinte qui migre sur un mur fraîchement chargé. La couleur vient de --fond-accent, posée par la page : les sept métiers ne se ressemblent donc pas. --------------------------------------------------------------------------- */ .hero-page.fond-coulure { /* Safari mobile peut inclure les calques transformés dans la largeur défilable. Le fond reste strictement confiné au premier bandeau. */ overflow: hidden; isolation: isolate; background: radial-gradient(circle at 76% 28%, color-mix(in srgb, var(--fond-accent, #3E7CB1) 25%, transparent), transparent 28%), linear-gradient(135deg, #0b0c0d 0%, color-mix(in srgb, var(--fond-accent, #3E7CB1) 24%, #101113) 62%, #08090a 100%); } /* Les trois halos historiques sont circulaires. Sur les pages prestation ils donnaient l'impression d'un ovale posé au milieu : la matière ci-dessous les remplace et couvre seule toute la surface du bandeau. */ .hero-page.fond-coulure > .halo { display: none; } .hero-page.fond-coulure::before { background: repeating-linear-gradient(103deg, transparent 0 5px, rgba(255,255,255,.045) 6px, transparent 7px 14px), repeating-linear-gradient(7deg, transparent 0 10px, color-mix(in srgb, var(--fond-accent, #3E7CB1) 8%, transparent) 11px, transparent 13px 20px); z-index: 0; opacity: .2; animation: fondPigments 16s linear infinite; } .hero-page.fond-coulure::after { z-index: 2; background: linear-gradient(90deg, rgba(5,6,7,.82) 0%, rgba(5,6,7,.34) 52%, rgba(5,6,7,.08) 100%); } .hero-page.fond-coulure .fond-coulure-matiere { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hero-page.fond-coulure .fond-lavis { position: absolute; display: block; border-radius: 47% 53% 38% 62% / 58% 36% 64% 42%; filter: blur(5px); mix-blend-mode: screen; will-change: transform; } .hero-page.fond-coulure .fond-lavis-a { right: -18%; top: -42%; width: 72%; height: 145%; background: radial-gradient(ellipse at 32% 46%, color-mix(in srgb, var(--fond-accent, #3E7CB1) 85%, transparent), color-mix(in srgb, var(--fond-accent, #3E7CB1) 28%, transparent) 45%, transparent 72%); animation: fondMatiereA 13s ease-in-out infinite alternate; } .hero-page.fond-coulure .fond-lavis-b { right: 8%; bottom: -74%; width: 64%; height: 132%; background: radial-gradient(ellipse at 48% 24%, color-mix(in srgb, var(--fond-accent, #3E7CB1) 64%, transparent), rgba(255,255,255,.09) 38%, transparent 69%); animation: fondMatiereB 17s ease-in-out -6s infinite alternate-reverse; } .hero-page.fond-coulure .fond-pigments { position: absolute; right: 4%; top: 0; width: 58%; height: 100%; opacity: .44; background: radial-gradient(circle at 20% 34%, rgba(255,255,255,.52) 0 1px, transparent 2px), radial-gradient(circle at 66% 72%, color-mix(in srgb, var(--fond-accent, #3E7CB1) 90%, transparent) 0 2px, transparent 3px); background-size: 47px 47px, 83px 83px; animation: fondPigmentsFlottants 22s linear infinite; will-change: transform; } .hero-page.fond-coulure .page-hero { z-index: 3; } @keyframes fondMatiereA { to { transform: translate3d(-12%,8%,0) rotate(18deg) scale(1.12); border-radius: 61% 39% 56% 44% / 39% 61% 41% 59%; } } @keyframes fondMatiereB { to { transform: translate3d(10%,-9%,0) rotate(-14deg) scale(1.16); } } @keyframes fondPigmentsFlottants { to { transform: translate3d(-54px,-83px,0); } } @keyframes fondPigments { to { background-position: 72px 36px, -54px 40px; } } /* Le titre et le chapo du seul bandeau prestation apparaissent en fondu pur pendant 1,5 seconde. Les autres animations et sections restent inchangées. */ .anim-actif .hero-page.fond-coulure .page-hero p[data-anim] { transform: none; transition: none; } .anim-actif .hero-page.fond-coulure .page-hero p[data-anim].est-visible { animation: heroPrestationFondu 1.5s cubic-bezier(.22,.61,.36,1) both; } .anim-actif .hero-page.fond-coulure .page-hero p[data-anim].est-visible { animation-delay: 110ms; } @keyframes heroPrestationFondu { from { opacity: 0; filter: blur(7px); } to { opacity: 1; filter: blur(0); } } /* --------------------------------------------------------------------------- 2. Conseils — le papier --------------------------------------------------------------------------- Des lignes horizontales très pâles, comme une feuille réglée. On lit sur cette page ; le fond doit se tenir tranquille et le dire. --------------------------------------------------------------------------- */ .hero-page.fond-papier::before { background: repeating-linear-gradient(180deg, rgba(243, 239, 230, 0.028) 0px, rgba(243, 239, 230, 0.028) 1px, transparent 1px, transparent 34px), radial-gradient(70% 50% at 50% 0%, rgba(91, 155, 213, 0.16) 0%, transparent 65%); } .hero-page.fond-papier::after { background: linear-gradient(180deg, transparent 60%, var(--bg) 100%); } /* --------------------------------------------------------------------------- 3. Inspirations — le nuancier --------------------------------------------------------------------------- Des bandes obliques de couleur, très diluées : la page parle de teintes, le fond en montre. Elles dérivent doucement, jamais assez pour distraire. --------------------------------------------------------------------------- */ .hero-page.fond-nuancier::before { background: linear-gradient(115deg, rgba(232, 162, 61, 0.16) 0%, rgba(232, 162, 61, 0.16) 14%, rgba(214, 136, 94, 0.13) 14%, rgba(214, 136, 94, 0.13) 28%, rgba(127, 162, 91, 0.12) 28%, rgba(127, 162, 91, 0.12) 42%, rgba(62, 124, 177, 0.12) 42%, rgba(62, 124, 177, 0.12) 56%, transparent 56%); filter: blur(46px); animation: fondNuancier 34s ease-in-out infinite alternate; } .hero-page.fond-nuancier::after { background: radial-gradient(90% 70% at 50% 30%, transparent 0%, rgba(21, 18, 15, 0.78) 70%, var(--bg) 100%); } @keyframes fondNuancier { from { transform: translateX(-6%) rotate(0deg); } to { transform: translateX(5%) rotate(2deg); } } /* --------------------------------------------------------------------------- 4. Calculateur — la grille de mesure --------------------------------------------------------------------------- Un quadrillage de métreur, avec une trame fine et une trame large. C'est un outil de calcul : le fond doit avoir l'air d'un plan, pas d'une ambiance. --------------------------------------------------------------------------- */ .hero-page.fond-grille::before { background: linear-gradient(rgba(232, 162, 61, 0.05) 1px, transparent 1px) 0 0 / 100% 96px, linear-gradient(90deg, rgba(232, 162, 61, 0.05) 1px, transparent 1px) 0 0 / 96px 100%, linear-gradient(rgba(243, 239, 230, 0.022) 1px, transparent 1px) 0 0 / 100% 24px, linear-gradient(90deg, rgba(243, 239, 230, 0.022) 1px, transparent 1px) 0 0 / 24px 100%; } .hero-page.fond-grille::after { background: radial-gradient(72% 58% at 50% 12%, rgba(232, 162, 61, 0.14) 0%, transparent 62%), linear-gradient(180deg, transparent 55%, var(--bg) 100%); } /* --------------------------------------------------------------------------- 5. Nos marques — le pot renversé --------------------------------------------------------------------------- Quatre halos, un par marque, disposés en quinconce. Ils respirent en décalage : la page présente quatre gammes, pas une. --------------------------------------------------------------------------- */ .hero-page.fond-pots::before { background: radial-gradient(26% 22% at 12% 18%, rgba(232, 162, 61, 0.20) 0%, transparent 70%), radial-gradient(24% 20% at 82% 26%, rgba(62, 124, 177, 0.18) 0%, transparent 70%), radial-gradient(22% 20% at 26% 74%, rgba(127, 162, 91, 0.16) 0%, transparent 70%), radial-gradient(24% 22% at 74% 82%, rgba(214, 136, 94, 0.16) 0%, transparent 70%); animation: fondPots 30s ease-in-out infinite alternate; } .hero-page.fond-pots::after { background: linear-gradient(180deg, rgba(21, 18, 15, 0.35) 0%, transparent 40%, var(--bg) 100%); } @keyframes fondPots { from { transform: scale(1); opacity: 0.85; } to { transform: scale(1.12); opacity: 1; } } /* --------------------------------------------------------------------------- 6. Zone d'intervention — les courbes de niveau --------------------------------------------------------------------------- Des anneaux concentriques évoquant une carte : la page dit jusqu'où on se déplace. Le centre est légèrement décalé vers Metz, en haut à gauche. --------------------------------------------------------------------------- */ .hero-page.fond-carte::before { background: repeating-radial-gradient(circle at 32% 26%, rgba(127, 162, 91, 0.10) 0px, rgba(127, 162, 91, 0.10) 1px, transparent 1px, transparent 62px), radial-gradient(60% 46% at 32% 26%, rgba(127, 162, 91, 0.16) 0%, transparent 68%); } .hero-page.fond-carte::after { background: linear-gradient(180deg, transparent 45%, var(--bg) 100%); } /* --------------------------------------------------------------------------- 7. Réalisations — la couture avant / après --------------------------------------------------------------------------- Le fond est coupé en diagonale : mur fatigué à gauche, mur repeint à droite. C'est le sujet même de la page, et le rappel du comparateur des cartes. --------------------------------------------------------------------------- */ .hero-page.fond-couture::before { background: linear-gradient(104deg, rgba(120, 104, 88, 0.16) 0%, rgba(120, 104, 88, 0.16) 48%, rgba(232, 162, 61, 0.02) 48.4%, rgba(91, 155, 213, 0.16) 49%, rgba(91, 155, 213, 0.16) 100%); } .hero-page.fond-couture::after { background: radial-gradient(86% 64% at 50% 22%, transparent 0%, rgba(21, 18, 15, 0.72) 72%, var(--bg) 100%); } /* --------------------------------------------------------------------------- Réglage système : tout s'immobilise. Les décors restent visibles — ils ne gênent personne — mais plus rien ne bouge. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .hero-page.fond-coulure::before, .hero-page.fond-coulure::after, .hero-page.fond-coulure .fond-lavis, .hero-page.fond-coulure .fond-pigments, .hero-page.fond-nuancier::before, .hero-page.fond-pots::before { animation: none; } } /* Sur mobile, les décors animés sont figés : ils coûtent une couche de composition permanente pour un effet que personne ne regarde en scrollant. */ @media (max-width: 720px) { .hero-page.fond-nuancier::before, .hero-page.fond-pots::before { animation: none; } }