. L'ancienne grille etait en z-index 0, donc au-dessus du texte (elle etait a 3 % d'opacite, ca ne se voyait pas) ; le mesh, lui, est opaque. */ .srv-mesh-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: #000; } .srv-mesh-bg::before, .srv-mesh-bg::after, .srv-mesh-bg span { content: ''; position: absolute; border-radius: 50%; filter: blur(120px); opacity: .5; will-change: transform, background; transition: background 1.6s var(--mesh-ease); } .srv-mesh-bg::before { width: 780px; height: 780px; top: -200px; left: -150px; background: var(--mesh-1); animation: srvMeshA 24s ease-in-out infinite alternate; } .srv-mesh-bg::after { width: 880px; height: 880px; top: 30%; right: -200px; background: var(--mesh-2); animation: srvMeshB 28s ease-in-out infinite alternate; } .srv-mesh-bg span { display: block; width: 680px; height: 680px; bottom: -150px; left: 35%; background: var(--mesh-3); animation: srvMeshC 26s ease-in-out infinite alternate; } .srv-mesh-bg span::after { content: ''; position: absolute; width: 560px; height: 560px; top: -300px; right: -200px; border-radius: 50%; background: var(--mesh-4); filter: blur(120px); opacity: .55; transition: background 1.6s var(--mesh-ease); animation: srvMeshD 30s ease-in-out infinite alternate; } .srv-mesh-grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.6)); mix-blend-mode: multiply; } @keyframes srvMeshA { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(80px,60px,0) scale(1.1); } 100% { transform: translate3d(40px,120px,0) scale(.95); } } @keyframes srvMeshB { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-100px,80px,0) scale(1.05); } 100% { transform: translate3d(-50px,-30px,0) scale(1.12); } } @keyframes srvMeshC { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(80px,-60px,0) scale(1.08); } 100% { transform: translate3d(-80px,-30px,0) scale(.96); } } @keyframes srvMeshD { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-60px,60px,0) scale(1.1); } 100% { transform: translate3d(60px,-50px,0) scale(1); } } /* Mobile : 4 radial-gradient statiques au lieu de 4 blobs flous animes. Rendu quasi identique, cout GPU quasi nul. */ @media (max-width: 768px) { .srv-mesh-bg { background: radial-gradient(60% 45% at 12% 8%, rgba(220,38,38,.55) 0%, transparent 60%), radial-gradient(70% 50% at 92% 32%, rgba(168,85,247,.55) 0%, transparent 60%), radial-gradient(55% 45% at 50% 92%, rgba(59,130,246,.55) 0%, transparent 60%), radial-gradient(45% 40% at 28% 78%, rgba(236,72,153,.55) 0%, transparent 60%), #000; } .srv-mesh-bg::before, .srv-mesh-bg::after, .srv-mesh-bg span, .srv-mesh-bg span::after { display: none !important; } } @media (prefers-reduced-motion: reduce) { .srv-mesh-bg::before, .srv-mesh-bg::after, .srv-mesh-bg span, .srv-mesh-bg span::after { animation: none !important; } } /* =================================== BLOCS CLAIRS SUR LE MESH L'ancien fond etait un gris-bleu uniforme (#1a1a24 -> #242d42) : des blocs a 2-8 % de blanc y restaient lisibles. Le mesh, lui, alterne du noir et des halos colores. Plutot que d'opacifier en sombre, on inverse comme les cards de references de /applications : surface blanche frostee, texte noir, le mesh ne se voit plus qu'autour. Restent volontairement sombres : - .aci-aurora-card conteneur video, pas un bloc de texte - .pvB-card media + fondu noir vers le corps de card : la passer en clair demande de refaire le degrade, pas juste le fond - .pvB-eyebrow, .pvB-ticker, .aci-sector-pill pastilles posees sur le fond, au meme niveau que les titres de section - .amp-step:hover etat de survol d'une grille bordee, pas un panneau !important : Astro scope certains blocs