/* ═══════════════════════════════════════════════════════════════
   STARTING BLOCK — COUCHE IMMERSIVE 3D
   Profondeur, relief et parallaxe. Sobre, performant, accessible.
   Tout est en transform/opacity (compositing GPU).
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. SCÈNE : perspective sur les conteneurs de cartes ─── */
.i3d-scene{perspective:1400px;perspective-origin:50% 40%}

/* ─── 2. CARTE 3D : socle ─── */
.i3d{
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .5s cubic-bezier(.16,1,.3,1),
             box-shadow .5s cubic-bezier(.16,1,.3,1);
}
/* Pendant le suivi souris, on coupe la transition pour un rendu direct */
.i3d.i3d-live{transition:box-shadow .3s ease}

/* Élévation au survol : ombre douce, jamais criarde */
.i3d-lift:hover{
  box-shadow:0 18px 50px -12px rgba(20,20,20,.18),
             0 6px 18px -6px rgba(200,16,46,.10);
}

/* ─── 3. COUCHES INTERNES : le contenu « flotte » au-dessus ─── */
.i3d-layer{transform:translateZ(28px);transform-style:preserve-3d}
.i3d-layer-soft{transform:translateZ(14px)}
.i3d-layer-deep{transform:translateZ(46px)}

/* ─── 4. REFLET : trait lumineux qui suit le curseur ─── */
.i3d-sheen{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  opacity:0;transition:opacity .45s ease;
  background:radial-gradient(
     420px circle at var(--mx,50%) var(--my,50%),
     rgba(255,255,255,.30), transparent 62%);
  mix-blend-mode:overlay;
}
.i3d:hover .i3d-sheen{opacity:1}
/* Sur fond sombre, le reflet passe en rouge de la charte */
.i3d-dark .i3d-sheen{
  background:radial-gradient(
     420px circle at var(--mx,50%) var(--my,50%),
     rgba(248,80,96,.22), transparent 60%);
  mix-blend-mode:screen;
}

/* ─── 5. PARALLAXE DE PROFONDEUR AU DÉFILEMENT ─── */
.i3d-par{will-change:translate}

/* ─── 6. RÉVÉLATION EN PROFONDEUR (remplace un simple fondu) ─── */
.i3d-rise{
  opacity:0;
  transform:perspective(1200px) translate3d(0,38px,-60px) rotateX(7deg);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),
             transform .85s cubic-bezier(.16,1,.3,1);
}
.i3d-rise.in{
  opacity:1;
  transform:perspective(1200px) translate3d(0,0,0) rotateX(0);
}

/* ─── 7. PISTE D'ÉLAN : couloirs en perspective (clin d'œil au concept) ─── */
.i3d-track{
  position:absolute;inset:auto 0 0 0;height:38%;
  pointer-events:none;z-index:0;opacity:.5;
  perspective:340px;perspective-origin:50% 0%;
  overflow:hidden;
}
.i3d-track-in{
  position:absolute;inset:0;
  transform:rotateX(62deg) translateZ(-30px);
  transform-origin:50% 0%;
  background-image:
    linear-gradient(90deg,transparent 49.4%,rgba(200,16,46,.30) 49.4%,rgba(200,16,46,.30) 50.6%,transparent 50.6%),
    linear-gradient(90deg,transparent 24.6%,rgba(20,20,20,.10) 24.6%,rgba(20,20,20,.10) 25.4%,transparent 25.4%),
    linear-gradient(90deg,transparent 74.6%,rgba(20,20,20,.10) 74.6%,rgba(20,20,20,.10) 75.4%,transparent 75.4%);
  background-size:100% 100%;
  mask-image:linear-gradient(to bottom,transparent,#000 45%,transparent 92%);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 45%,transparent 92%);
}

/* ─── 8. TEXTE FANTÔME EN PROFONDEUR ─── */
.i3d-ghost{will-change:translate}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITÉ — respect absolu de la préférence système.
   Si l'utilisateur réduit les animations : tout redevient statique.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .i3d,.i3d-live{transform:none !important;transition:none !important}
  .i3d-layer,.i3d-layer-soft,.i3d-layer-deep{transform:none !important}
  .i3d-sheen{display:none !important}
  .i3d-par,.i3d-ghost{transform:none !important;translate:none !important}
  .i3d-rise{opacity:1 !important;transform:none !important;transition:none !important}
  .i3d-track{display:none !important}
}

/* Écrans tactiles : pas de tilt souris, mais on garde le relief au toucher */
@media (hover:none){
  .i3d-sheen{display:none}
  .i3d{transition:transform .35s ease, box-shadow .35s ease}
  .i3d:active{transform:scale(.985)}
}