/* * Section "Bénéfices" — fond de charte reproduit en CSS natif. * * Remplace le fond vert foncé et le "plasma" animé par les quatre couleurs de la * charte NovAstérion, une par coin, fondues vers le centre, avec un grain de type * spray : * * haut-gauche Pluie Indigo #827EFC (var --indigo) * haut-droite Brume de bambou #DCFF66 (var --bambou) * bas-gauche Beige #FFF5E2 (var --beige) * bas-droite Mousse de jardin #08E0AD * * Chaque couleur part de son coin en pleine saturation et s'efface avant le * centre : c'est le recouvrement des quatre qui produit le fondu clair du milieu, * comme sur le visuel de charte. Attention, la variable --vert-fonce du design system * vaut #004131 (le vert foncé du texte) et non la "Mousse de jardin" : cette * dernière est donc écrite en dur. * * Le grain est un feTurbulence SVG en data URI : pas d'image à charger, il se * redimensionne sans jamais pixeliser. * * Les sélecteurs sont préfixés par .elementor-151 pour passer devant le CSS du * design, qui est inline dans le et donc chargé après cette feuille : à * !important égal, c'est la spécificité qui tranche. */ /* --- le fond lui-même ------------------------------------------------------ */ .elementor-151 .na-benefit-plasma-section { background-color: var( --beige, #fff5e2 ) !important; background-image: /* Pluie Indigo, haut-gauche */ radial-gradient( 116% 108% at 0% 0%, rgba( 130, 126, 252, 0.92 ) 0%, rgba( 130, 126, 252, 0.5 ) 24%, rgba( 130, 126, 252, 0 ) 58% ), /* Brume de bambou, haut-droite */ radial-gradient( 116% 108% at 100% 0%, rgba( 220, 255, 102, 0.92 ) 0%, rgba( 220, 255, 102, 0.5 ) 24%, rgba( 220, 255, 102, 0 ) 58% ), /* Beige, bas-gauche */ radial-gradient( 118% 112% at 0% 100%, rgba( 255, 245, 226, 0.96 ) 0%, rgba( 255, 245, 226, 0.6 ) 26%, rgba( 255, 245, 226, 0 ) 60% ), /* Mousse de jardin, bas-droite */ radial-gradient( 118% 112% at 100% 100%, rgba( 8, 224, 173, 0.88 ) 0%, rgba( 8, 224, 173, 0.46 ) 24%, rgba( 8, 224, 173, 0 ) 58% ), /* éclaircissement central, là où les quatre se recouvrent */ radial-gradient( 72% 62% at 50% 50%, rgba( 255, 245, 226, 0.62 ) 0%, rgba( 255, 245, 226, 0 ) 72% ) !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; color: #004131 !important; } /* Le "plasma" animé d'origine devient le voile de grain. */ .elementor-151 .na-benefit-plasma-section::before { inset: 0 !important; background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23s)'/%3E%3C/svg%3E" ) !important; background-size: 220px 220px !important; background-repeat: repeat !important; background-position: 0 0 !important; filter: none !important; transform: none !important; animation: none !important; opacity: 0.22 !important; mix-blend-mode: overlay !important; z-index: 1 !important; } /* Le voile sombre n'a plus lieu d'être sur un fond clair. */ .elementor-151 .na-benefit-plasma-section::after { background: none !important; content: none !important; } /* --- texte : inversé pour un fond clair ------------------------------------ */ .elementor-151 .na-benefit-plasma-section .na-heading .elementor-heading-title, .elementor-151 .na-benefit-plasma-section .na-heading h2 { color: #004131 !important; text-shadow: none !important; } .elementor-151 .na-benefit-plasma-section .na-intro, .elementor-151 .na-benefit-plasma-section .na-intro p { color: rgba( 0, 65, 49, 0.78 ) !important; text-shadow: none !important; } .elementor-151 .na-benefit-plasma-section .na-benefit h3 { color: #004131 !important; text-shadow: none !important; } .elementor-151 .na-benefit-plasma-section .na-benefit p { color: rgba( 0, 65, 49, 0.76 ) !important; text-shadow: none !important; } /* --- cartes : adaptées au fond clair --------------------------------------- */ .elementor-151 .na-benefit-plasma-section .na-benefit { background: rgba( 255, 255, 255, 0.34 ) !important; border: 1px solid rgba( 0, 65, 49, 0.16 ) !important; backdrop-filter: blur( 2px ) !important; } .elementor-151 .na-benefit-plasma-section .na-benefit:hover, .elementor-151 .na-benefit-plasma-section .na-benefit:focus-within { background: rgba( 255, 255, 255, 0.52 ) !important; border-color: rgba( 0, 65, 49, 0.28 ) !important; } /* La pastille lumineuse d'angle passe en accent discret sur fond clair. */ .elementor-151 .na-benefit-plasma-section .na-benefit::before { background: radial-gradient( circle, rgba( 255, 255, 255, 0.55 ), rgba( 255, 255, 255, 0 ) 70% ) !important; opacity: 0.7 !important; } @media ( prefers-reduced-motion: reduce ) { .elementor-151 .na-benefit-plasma-section::before { animation: none !important; } }