/* ==========================================================================
   EFFET « AFFICHE 3D » — module réutilisable · Choumi Comedy Club
   Tilt 3D au survol + pop-out du design (adapté du reel Instagram
   https://www.instagram.com/p/DG-qA-VTEef/ — recalibré sobre : 3D pur,
   AUCUN scale/zoom, bleu Choumi).

   Import (avec le JS compagnon) :
     <link rel="stylesheet" href="shared/affiche-3d/affiche-3d.css">
     <script defer src="shared/affiche-3d/affiche-3d.js"></script>

   Markup minimal (la taille de la carte est à la charge du contexte —
   poser width + aspect-ratio sur .affiche3d) :
     <div class="affiches3d">                          ← scène (perspective)
       <article class="affiche3d affiche3d--popout" tabindex="0">
         <div class="affiche3d__fond"><img src="affiche.webp" alt="…"></div>
         <img class="affiche3d__sujet" src="affiche-sujet.webp"
              alt="" aria-hidden="true">                ← généré par outils/
         <div class="affiche3d__reflet"></div>
       </article>
     </div>
   Sans couche pop-out : retirer --popout et l'img .affiche3d__sujet.

   Réglages (variables CSS, surchargeables sur .affiches3d ou .affiche3d) —
   défauts branchés sur les tokens du site avec repli autonome :
     --a3d-perspective  profondeur de la scène          (1200px)
     --a3d-profondeur   avancée du design au survol     (45px)
     --a3d-voile        assombrissement du fond, 0 à 1  (0.55)
     --a3d-reflet       intensité du reflet, 0 à 1      (0.16)
   L'inclinaison max se règle côté JS : data-a3d-max="5" (degrés) sur la
   scène ou la carte.

   Accessibilité : prefers-reduced-motion coupe tilt (JS) et transitions ;
   cartes focusables (tabindex) → même rendu au :focus-visible.
   ========================================================================== */

.affiches3d {
  perspective: var(--a3d-perspective, 1200px);
}

.affiche3d {
  position: relative;
  border-radius: var(--radius-md, 10px);
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-flip, cubic-bezier(0.22, 1, 0.36, 1)),
              box-shadow 0.5s var(--ease-flip, cubic-bezier(0.22, 1, 0.36, 1));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  outline: none;
}
/* Pendant le suivi souris, le JS pilote le transform : transition coupée */
.affiche3d--suivi {
  transition: box-shadow 0.5s var(--ease-flip, cubic-bezier(0.22, 1, 0.36, 1));
}

.affiche3d:hover,
.affiche3d:focus-visible {
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.7),
    0 0 40px color-mix(in srgb, var(--blue, #57b3f2) 10%, transparent); /* halo --blue discret */
}
.affiche3d:focus-visible {
  outline: 2px solid var(--blue, #57b3f2);
  outline-offset: 4px;
}

/* --- Couche 1 : le fond (l'affiche complète, rognée par la carte) ------- */
.affiche3d__fond {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  transform: translateZ(0);
}
.affiche3d__fond img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Voile qui « détache » le design quand il avance (cartes pop-out only) */
.affiche3d--popout .affiche3d__fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 8, var(--a3d-voile, 0.55));
  opacity: 0;
  transition: opacity var(--duree-etat, 0.25s);
}
.affiche3d--popout:hover .affiche3d__fond::after,
.affiche3d--popout:focus-visible .affiche3d__fond::after { opacity: 1; }

/* --- Couche 2 : le design extrait (pop-out) ----------------------------- */
/* Même cadrage que le fond → au repos, superposition invisible. Au survol :
   3D PUR — le design avance en profondeur (translateZ), AUCUN scale ;
   l'agrandissement apparent est celui, naturel, d'un objet qui approche.
   La carte n'a pas d'overflow:hidden (seul le fond est rogné) : le design
   déborde librement du cadre quand la carte est inclinée. */
.affiche3d__sujet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  transition: transform 0.5s var(--ease-flip, cubic-bezier(0.22, 1, 0.36, 1));
  pointer-events: none;
}
.affiche3d--popout:hover .affiche3d__sujet,
.affiche3d--popout:focus-visible .affiche3d__sujet {
  transform: translateZ(var(--a3d-profondeur, 45px));
}

/* --- Reflet « papier glacé » qui suit le curseur (--rx/--ry posées JS) --- */
.affiche3d__reflet {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: translateZ(calc(var(--a3d-profondeur, 45px) + 15px));
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duree-etat, 0.25s);
  background: radial-gradient(
    380px circle at var(--rx, 50%) var(--ry, 50%),
    rgba(245, 246, 248, var(--a3d-reflet, 0.16)),
    transparent 60%);
}
.affiche3d:hover .affiche3d__reflet { opacity: 1; }

/* --- Mouvement réduit : tout est statique (le tilt JS est aussi coupé) --- */
@media (prefers-reduced-motion: reduce) {
  .affiche3d,
  .affiche3d__sujet { transition: none !important; }
  .affiche3d--popout:hover .affiche3d__sujet,
  .affiche3d--popout:focus-visible .affiche3d__sujet { transform: none; }
  .affiche3d--popout:hover .affiche3d__fond::after,
  .affiche3d--popout:focus-visible .affiche3d__fond::after { opacity: 0; }
}