/* Deep Beauty — Effets : hero (particules, aura, grain), boîtes animées, fonds en dérive, en-tête collant réduit. */

/* ---------- Hero : fond animé et sur-fonds ---------- */
.heros { background: var(--emplacement-sombre); }
/* Sur-fond 1 : grain fin (bruit fractal), léger scintillement par pas. Sur-fond 2 : lueurs blanches qui respirent. */
.heros::before, .heros::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.heros::before { inset: -50%; opacity: 0.09; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E"); animation: grain-bouge 1.2s steps(6) infinite; }
.heros::after { background: radial-gradient(ellipse 55% 60% at 18% 30%, rgba(255, 255, 255, 0.08), transparent 70%), radial-gradient(ellipse 45% 55% at 85% 75%, rgba(255, 255, 255, 0.06), transparent 70%); mix-blend-mode: screen; animation: respire 14s ease-in-out infinite; }
@keyframes grain-bouge {
	0% { transform: translate3d(0, 0, 0); }
	20% { transform: translate3d(-4%, 3%, 0); }
	40% { transform: translate3d(3%, -5%, 0); }
	60% { transform: translate3d(-6%, -2%, 0); }
	80% { transform: translate3d(5%, 4%, 0); }
	100% { transform: translate3d(0, 0, 0); }
}

/* ---------- Hero : particules puis aura sur le titre ---------- */
.hero-particules { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; --rf-particle-color: #ffffff; transition: opacity 0.85s ease; }
.hero-particules.est-fondu { opacity: 0; }
.hero-particules-actif .heros-titre:not(.heros-titre-logo), .hero-particules-actif h1:not(.masque) { visibility: hidden; } /* le titre se forme par les particules, puis apparaît */
.hero-aura { position: absolute; z-index: 2; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 100%); filter: blur(24px); mix-blend-mode: screen; transform-origin: center; animation: rf-aura-reveal var(--duree-aura) ease-out both; }
@keyframes rf-aura-reveal {
	0% { transform: scale(0.72); opacity: 0; }
	30% { transform: scale(1.08); opacity: 0.95; }
	65% { transform: scale(1.2); opacity: 0.65; }
	100% { transform: scale(1.48); opacity: 0; }
}

/* ---------- Boîtes animées : halo qui suit la souris et bordure lumineuse (souris seulement) ----------
 * Le JavaScript pose --mx et --my (en pixels, dans la carte) ; sans lui, rien ne s'affiche. */
.carte-produit, .mode, .chiffre, .domaine { position: relative; isolation: isolate; }
.carte-produit::before, .mode::before, .chiffre::before, .domaine::before,
.carte-produit::after, .mode::after, .chiffre::after, .domaine::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; }
.carte-produit::before, .mode::before, .chiffre::before, .domaine::before { z-index: -1; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(31, 34, 43, 0.07), transparent 65%); }
.carte-produit::after, .mode::after, .chiffre::after, .domaine::after { z-index: 2; padding: 1.5px; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(31, 34, 43, 0.75), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.bloc-sombre .chiffre::before, .bloc-sombre .mode::before { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.12), transparent 65%); }
.bloc-sombre .chiffre::after, .bloc-sombre .mode::after { background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.85), transparent 70%); }
@media (hover: hover) {
	.carte-produit:hover::before, .mode:hover::before, .chiffre:hover::before, .domaine:hover::before,
	.carte-produit:hover::after, .mode:hover::after, .chiffre:hover::after, .domaine:hover::after { opacity: 1; }
	.bouton:hover, .heros-bouton:hover { transform: translateY(-2px); }
	.heros-bouton:hover { transform: translateX(-50%) translateY(-2px); }
}

/* ---------- Fonds animés : motif de points en dérive ----------
 * Un décalage d'exactement un pas du motif : la boucle est invisible. Seules les sections à l'écran animent (.dans-ecran). */
@keyframes derive-points { from { background-position: 0 0; } to { background-position: var(--pas-points) var(--pas-points); } }
@keyframes derive-translation { to { translate: var(--pas-points) var(--pas-points); } }
.intro { overflow: clip; }
.intro::before { content: ""; position: absolute; inset: calc(var(--pas-points) * -1) 0 0 calc(var(--pas-points) * -1); z-index: 0; pointer-events: none; background: var(--points-sombres) 0 0 / var(--pas-points) var(--pas-points); animation: derive-translation var(--duree-derive) linear infinite; }
.intro > * { position: relative; z-index: 1; }
.dans-ecran > .couche-ruban, .dans-ecran.bloc-domaines::before, .dans-ecran.bloc-domaines::after, .dans-ecran.bloc-accompagnement::before,
.dans-ecran.bloc-comparatif::after, .dans-ecran.bloc-ambiance::before { animation: derive-points var(--duree-derive) linear infinite; }
.pied.dans-ecran::before { animation: derive-translation var(--duree-derive) linear infinite; }

/* ---------- En-tête collant réduit ---------- */
.entete { transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s; }
.entete.est-collant { position: fixed; inset: 0 0 auto; background: rgba(17, 18, 23, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 28px -12px rgba(0, 0, 0, 0.55); animation: entete-descend 0.4s var(--ease-sortie) both; }
.entete.est-collant .entete-haut { display: none; }
.entete.est-collant .entete-barre { padding-top: 8px; padding-bottom: 8px; }
.entete.est-collant .entete-logo img { width: clamp(150px, 14vw, 190px); }
@keyframes entete-descend { from { transform: translateY(-100%); } to { transform: none; } }

/* ---------- Mouvement réduit : tous les effets de ce fichier s'arrêtent ---------- */
@media (prefers-reduced-motion: reduce) {
	.heros::before, .heros::after, .hero-aura, .intro::before, .pied.dans-ecran::before,
	.dans-ecran > .couche-ruban, .dans-ecran.bloc-domaines::before, .dans-ecran.bloc-domaines::after,
	.dans-ecran.bloc-accompagnement::before, .dans-ecran.bloc-comparatif::after, .dans-ecran.bloc-ambiance::before,
	.entete.est-collant { animation: none; }
	.hero-particules, .hero-aura { display: none; }
	.hero-particules-actif .heros-titre { visibility: visible; }
	.carte-produit::before, .mode::before, .chiffre::before, .domaine::before,
	.carte-produit::after, .mode::after, .chiffre::after, .domaine::after { display: none; }
	.bouton:hover, .heros-bouton:hover { transform: none; }
	.heros-bouton:hover { transform: translateX(-50%); }
	.entete { transition: none; }
}