/* ============================================================
   UTILITAIRES DE MOUVEMENT ET DE TEXTURE, PARTAGES PAR LES PAGES 2026
   Repris a l'identique de accueil-2026.css, pilotes par /da-2026.js.
   Regle a ne pas casser : .hp-reveal.is-visible doit TOUJOURS suivre
   .hp-reveal, sinon toute la page reste a opacite 0.
   ============================================================ */

/* --- Quadrillage de fond, avec parallaxe pilotee par --par --- */
.hp-texture{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(#eee9f4 1px,transparent 1px),
                   linear-gradient(90deg,#eee9f4 1px,transparent 1px);
  background-size:28px 28px;
  will-change:transform;transform:translate3d(0,var(--par,0px),0)}
.hp-texture--fade-b{mask-image:linear-gradient(to bottom,black 0%,transparent 78%)}
.hp-texture--fade-t{mask-image:linear-gradient(to top,black 0%,transparent 78%)}
.hp-texture--soft{mask-image:radial-gradient(120% 90% at 70% 20%,black 0%,transparent 72%)}
.hp-texture--dark{background-image:linear-gradient(#221836 1px,transparent 1px),
                                  linear-gradient(90deg,#221836 1px,transparent 1px)}

/* --- Grain, pose une fois par page --- */
.hp-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.22'/></svg>")}

/* --- Orbes flottants, deux rythmes differents --- */
.hp-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(60px);opacity:.5}
.hp-orb--a{width:420px;height:420px;background:radial-gradient(circle,rgba(106,0,255,.20),transparent 70%);
  top:-120px;right:-80px;animation:hp-flotte-a 17s ease-in-out infinite}
.hp-orb--b{width:300px;height:300px;background:radial-gradient(circle,rgba(220,1,255,.14),transparent 70%);
  bottom:-90px;left:8%;animation:hp-flotte-b 23s ease-in-out infinite}
@keyframes hp-flotte-a{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-26px,32px,0) scale(1.07)}}
@keyframes hp-flotte-b{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(30px,-24px,0) scale(.94)}}

/* --- Revelation a l'entree dans l'ecran, en cascade --- */
.hp-reveal{opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .75s cubic-bezier(.22,.7,.25,1),transform .75s cubic-bezier(.22,.7,.25,1)}
.hp-from-l{transform:translate3d(-38px,0,0)}
.hp-from-r{transform:translate3d(38px,0,0)}
.hp-reveal.is-visible{opacity:1;transform:none}
.hp-d1{transition-delay:.09s}
.hp-d2{transition-delay:.18s}
.hp-d3{transition-delay:.27s}
.hp-d4{transition-delay:.36s}
.hp-d5{transition-delay:.45s}
.hp-d6{transition-delay:.54s}

/* --- Tout est pose dans son etat final si l'ecran demande le calme --- */
@media(prefers-reduced-motion:reduce){
  .hp-reveal,.hp-from-l,.hp-from-r{opacity:1!important;transform:none!important;transition:none!important}
  .hp-orb{animation:none!important}
  .hp-texture{transform:none!important}
  .hp-grain{display:none}
}

/* --- Barre d'accent de l'oeil-de-boeuf qui s'etend a la revelation --- */
.eyebrow i{transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,.7,.25,1) .1s}
.is-visible .eyebrow i,.eyebrow.is-visible i{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.eyebrow i{transform:none!important;transition:none!important}}