/* Effet « affiche » : inclinaison 3D suivant le pointeur, plus reflet spéculaire.
   Géométrie reprise d'Ana Tudor (CodePen YPpqaWM) : deux facteurs dans [-1, 1] pilotent la
   rotation de la carte et le déplacement inverse du reflet.

   Les facteurs sont écrits par js/sheen.js. Le CSS ne fait qu'une multiplication : toute la
   chaîne de division et de substitution de la version d'origine a été retirée, car une seule
   expression invalide y annulait la déclaration transform entière, sans erreur visible — la
   carte cessait de bouger alors que le reflet continuait. */

.ad-sheen-scene {
    --sheen-ma: 12deg; /* angle d'inclinaison maximal */
    --sheen-oz: 4em; /* position du pivot sur l'axe z */
    --sheen-fn: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Valeurs au repos : carte plane, reflet éteint. Le script les remplace au survol. */
    --sheen-di: 0;
    --sheen-dj: 0;
    --sheen-on: 0;

    display: grid;
    perspective: 65em;
}

/* La largeur est portée par la scène, jamais par la carte : une largeur en pourcentage sur la
   carte se résoudrait contre une cellule dimensionnée par son propre contenu, ce qui est
   circulaire. La carte s'étire donc dans la cellule. */
.ad-sheen-scene > * {
    grid-area: 1 / 1;
}

.ad-sheen {
    position: relative;
    transform-origin: 50% 50% var(--sheen-oz);
    transform-style: preserve-3d;
    transform:
        rotateX(calc(var(--sheen-dj, 0) * var(--sheen-ma)))
        rotateY(calc(var(--sheen-di, 0) * var(--sheen-ma)));
    transition: transform 0.4s var(--sheen-fn);
}

/* Reflet : se déplace à l'opposé de l'inclinaison, comme une source lumineuse fixe. */
.ad-sheen::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(65% 65% at 50% 50%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 70%);
    translate: calc(var(--sheen-di, 0) * -18%) calc(var(--sheen-dj, 0) * 18%);
    opacity: var(--sheen-on, 0);
    transition: translate 0.4s var(--sheen-fn), opacity 0.3s ease;
    mix-blend-mode: soft-light;
}

@media (prefers-reduced-motion: reduce) {
    .ad-sheen {
        transform: none;
        transition: none;
    }

    .ad-sheen::after {
        display: none;
    }
}