/* ================= VARIANTE 3D =================
   Effets ajoutés par-dessus la page anthracite. Tout est désactivé si l'utilisateur
   a demandé à réduire les animations (prefers-reduced-motion). */

/* ---------- Hero : composition en relief, qui suit la souris ---------- */
.fx3d .hero-visual{transform-style:preserve-3d;transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .9s var(--ease);will-change:transform}
.fx3d .hero-visual.live{transition:transform .18s linear}
.fx3d .hero-photo{transform:translateZ(0);box-shadow:var(--sx,0px) var(--sy,30px) 70px -30px rgba(var(--ink-rgb),.55);transition:box-shadow .3s}
.fx3d .hero-photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 45%,transparent 60%);background-size:250% 100%;background-position:var(--gx,50%) 0;mix-blend-mode:soft-light}
.fx3d .float-card{animation-name:bob3d}
.fx3d .float-card.f1{--z:95px}
.fx3d .float-card.f2{--z:60px}
@keyframes bob3d{0%,100%{transform:translateZ(var(--z)) translateY(0)}50%{transform:translateZ(var(--z)) translateY(-10px)}}
.fx3d .float-card{box-shadow:0 40px 60px -30px rgba(var(--ink-rgb),.55)}

/* Macaron = pièce qui se retourne (face « 7j/7 », revers « MR ») */
.fx3d .seal{background:none;transform:translateZ(140px);transform-style:preserve-3d;box-shadow:none}
.coin-spin{position:absolute;inset:0;transform-style:preserve-3d;animation:coinFlip 9s var(--ease) infinite}
.coin-face{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 32% 28%,#3E454D,var(--ink) 62%);backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.35),inset 0 2px 6px rgba(255,255,255,.08)}
.coin-face.back{transform:translateZ(-8px) rotateY(180deg);text-align:center}
.coin-face.back .coin-mark{font-family:var(--f-display);font-weight:700;font-size:34px;letter-spacing:-.05em;color:var(--gold);line-height:1}
.coin-face.back small{display:block;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-muted);margin-top:4px}
.coin-rim{position:absolute;inset:0;border-radius:50%;background:#1C2025;transform:translateZ(calc(var(--k) * -1px));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.25)}
.coin-shadow{position:absolute;inset:8% 8% -12%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--ink-rgb),.45),transparent);transform:translateZ(-150px) translateY(30px);filter:blur(6px)}
@keyframes coinFlip{0%,38%{transform:rotateY(0)}50%,88%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}

/* ---------- Cartes qui basculent au survol (avec reflet) ---------- */
[data-tilt]{position:relative;transform-style:preserve-3d}
.tilt-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .4s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.32),transparent 55%);mix-blend-mode:soft-light}
[data-tilt].tilting .tilt-glare{opacity:1}
[data-tilt].tilting{box-shadow:0 40px 60px -36px rgba(var(--ink-rgb),.5)}
.fx3d .tarif-big{transform:translateZ(40px)}
.fx3d .tarif h3,.fx3d .trust-item h3{transform:translateZ(26px)}
.fx3d .trust-item .ic{transform:translateZ(46px)}
.fx3d .tarif dl{transform:translateZ(14px)}

/* ---------- Parcours : chaque étape se déplie ---------- */
.fx3d .steps{perspective:900px}
.fx3d .step{transform-origin:50% 0;transform:rotateX(-80deg) translateZ(-20px);opacity:0;transition:transform .9s var(--ease),opacity .9s var(--ease)}
.fx3d .step.on{transform:none;opacity:1}
.fx3d .step .dot{box-shadow:0 14px 26px -12px rgba(0,0,0,.6)}
.fx3d .step.on .dot{box-shadow:0 0 0 6px rgba(var(--accent-rgb),.14),0 18px 34px -12px rgba(var(--accent-rgb),.55)}

/* ---------- Scènes WebGL ---------- */
.gl-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.gl-on .gl-canvas{opacity:1}
.final .gl-canvas{z-index:0}
.final.gl-on::before{opacity:0}
.final.gl-on .wrap{z-index:1}
.final.gl-on h2,.final.gl-on .lead,.final.gl-on .eyebrow{text-shadow:0 2px 30px rgba(var(--ink-rgb),.9)}

.fx3d-badge{position:fixed;left:20px;top:calc(var(--head-h) + 14px);z-index:40;background:var(--ink);color:var(--gold);font:600 11px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;border-radius:999px;box-shadow:0 10px 24px -12px rgba(0,0,0,.5);pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .fx3d .hero-visual,.fx3d .seal,.fx3d .float-card,.fx3d .tarif-big,.fx3d .tarif h3,.fx3d .trust-item h3,.fx3d .trust-item .ic,.fx3d .tarif dl,.fx3d .step{transform:none!important}
  .coin-spin{animation:none}
  .fx3d .step{opacity:1}
}