/* Couche 3D de gestop.fr — s'ajoute à la page existante sans en changer la mise en page. */

/* 1 · Tableau de bord du haut de page posé en perspective, qui se redresse au défilement */
.dashboard-preview.g3d-tilt{perspective:1600px}
.dashboard-preview.g3d-tilt .dashboard-frame{transform-origin:50% 0;will-change:transform;transition:box-shadow .3s}
.dashboard-preview.g3d-tilt .dashboard-frame{box-shadow:0 40px 90px rgba(25,25,23,.14),0 0 0 1px #E8E6E0}

/* 2 · Section épinglée : l'opération en 3D, étage par étage */
.op3d{position:relative;height:520vh;background:#F7F6F2}
.op3d-scene{position:absolute;top:0;left:0;width:100%;height:100vh;overflow:hidden}
.op3d-scene.fixe{position:fixed;top:0}
.op3d-scene.fin{top:auto;bottom:0}
.op3d-scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.op3d-textes{position:absolute;left:clamp(20px,6vw,96px);top:50%;transform:translateY(-50%);width:min(460px,42vw);height:60vh;pointer-events:none}
.op3d-etape{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(24px);transition:opacity .45s ease,transform .45s ease}
.op3d-etape.actif{opacity:1;transform:none;pointer-events:auto}
.op3d-etape .num{font-size:14px;font-weight:700;color:#C52626}
.op3d-etape h2{margin-top:10px;font-size:clamp(32px,4vw,56px);font-weight:900;letter-spacing:-.035em;line-height:1.04;color:#191917}
.op3d-etape p{margin-top:16px;font-size:clamp(15px,1.3vw,18px);line-height:1.6;color:rgba(25,25,23,.62);max-width:40ch}
.op3d-chiffre{margin-top:20px;display:inline-flex;flex-direction:column;align-self:flex-start;background:#fff;border:1px solid #E8E6E0;border-radius:14px;padding:14px 18px;box-shadow:0 14px 34px rgba(25,25,23,.08)}
.op3d-chiffre small{font-size:12px;font-weight:600;color:#9CA3AF}
.op3d-chiffre b{font-size:28px;font-weight:800;letter-spacing:-.02em;color:#191917}
.op3d-cta{display:inline-block;align-self:flex-start;margin-top:24px;background:#C52626;color:#fff;text-decoration:none;font-weight:700;padding:14px 22px;border-radius:12px}
.op3d-pastilles{display:none;position:absolute;right:clamp(14px,3vw,36px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px}
.op3d-pastilles i{width:9px;height:9px;border-radius:50%;background:#DAD6CC;transition:background .3s,transform .3s}
.op3d-pastilles i.actif{background:#C52626;transform:scale(1.4)}
.op3d-etiquette{position:absolute;transform:translate(-50%,-100%);background:#fff;font-weight:700;font-size:12px;padding:6px 10px;border-radius:9px;white-space:nowrap;box-shadow:0 8px 20px rgba(25,25,23,.12),0 0 0 1px #E8E6E0;pointer-events:none;opacity:0;transition:opacity .25s}
.op3d-etiquette.rouge{color:#C52626}.op3d-etiquette.vert{color:#1E7A4C}.op3d-etiquette.ambre{color:#B45309}.op3d-etiquette.gris{color:#6B7280}
@media (max-width:820px){
  .op3d-textes{left:16px;right:16px;width:auto;top:auto;bottom:6vh;transform:none;height:44vh}
  .op3d-etape{justify-content:flex-end;background:rgba(247,246,242,.9);border-radius:16px;padding:16px;inset:auto 0 0 0}
  .op3d-pastilles{display:none}
}
@media (prefers-reduced-motion: reduce){.op3d-etape{transition:none}}

/* 3 · cartes qui s'orientent vers la souris, avec un reflet */
.g3d-carte{position:relative}
.g3d-carte .g3d-reflet{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),rgba(255,255,255,.55),rgba(255,255,255,0) 55%);mix-blend-mode:soft-light}
.g3d-carte:hover .g3d-reflet{opacity:1}
.feature-card.g3d-carte:hover,.p-card.g3d-carte:hover{transform:none}

/* 5 · le film en perspective, comme le tableau de bord */
.film-lancement.g3d-film{transform-origin:50% 0;will-change:transform}

/* 6 · bandeau des fonctionnalités en ruban 3D */
.marquee-wrap.g3d-ruban{perspective:900px;overflow:hidden}
.marquee-wrap.g3d-ruban .marquee{transform:rotateX(28deg) rotateZ(-3deg) scale(1.05);transform-origin:50% 50%}

@media (prefers-reduced-motion: reduce){
  .marquee-wrap.g3d-ruban .marquee{transform:rotateX(16deg) rotateZ(-2deg) scale(1.03)}
}