/* Le relief des posters (relief-poster.js) : l'inclinaison, la lumière, le reflet, le grain.
 *
 * ⚠️ LE `transform` D'UN POSTER EST À NOUS. Un poster `[data-relief]` ne règle
 * plus sa propre rotation par `transform`, mais par les propriétés `rotate` et
 * `translate` (son penché, son flottement) : le navigateur les applique PAR-DESSUS
 * ce `transform`. Les deux se composent au lieu de s'écraser.
 */

[data-relief] {
  transform:
    perspective(var(--relief-perspective, 900px))
    rotateX(var(--relief-rx, 0deg))
    rotateY(var(--relief-ry, 0deg));
}
/* Un calque graphique pour les posters à l'écran seulement : sur iPhone, chaque
   calque coûte de la mémoire (le plantage du 30 septembre, visionneuse.js). */
[data-relief].relief-actif,
[data-relief].relief-actif .relief-lumiere,
[data-relief].relief-actif .relief-reflet { will-change: transform; }

/* ⚠️ NI Z-INDEX NI OPACITÉ SUR `.relief` : sans contexte d'empilement à lui, ses
   calques se mélangent à l'IMAGE du poster. Avec, ils se mélangeraient à un
   fond vide, et la lumière disparaîtrait. Ce qui doit rester au-dessus de la
   lumière (l'étiquette) prend donc un z-index. */
.relief {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
  border-radius: inherit;
}
/* Le calque est un `span` vide, posé dans des pages qui stylent déjà leurs
   `span` : une règle comme `.mini span { background: … }` le peignait d'une
   image opaque, par-dessus le poster (l'éventail 1982, 26 octobre). Deux
   classes de spécificité : il garde un fond transparent. */
[data-relief] > .relief { background: none; }
[data-relief] > .sticker { z-index: 1; }

/* La lumière et le reflet font deux fois le poster : on les fait glisser
   (transform, sans repeindre) sans jamais découvrir leur bord. */
.relief-lumiere,
.relief-reflet {
  position: absolute; left: -50%; top: -50%;
  width: 200%; height: 200%;
}

/* La tache de lumière, et l'ombre qui gagne loin d'elle. En lumière douce
   (soft-light) : le blanc éclaire, le noir assombrit, le gris ne change rien. */
.relief-lumiere {
  background: radial-gradient(closest-side,
    rgb(255 255 255 / var(--relief-lumiere, 0.5)),
    rgb(255 255 255 / 0) var(--relief-taille, 55%),
    rgb(0 0 0 / var(--relief-ombre, 0.3)) 100%);
  mix-blend-mode: soft-light;
  transform: translate(var(--relief-tx, 0%), var(--relief-ty, 0%));
}

/* La bande brillante du papier semi-brillant. Elle glisse à l'inverse de la
   lumière, et plus vite : c'est ce décalage qui fait croire au relief. */
.relief-reflet {
  background: linear-gradient(115deg,
    rgb(255 255 255 / 0) calc(50% - var(--relief-largeur, 12%)),
    rgb(255 255 255 / var(--relief-reflet, 0.18)) 50%,
    rgb(255 255 255 / 0) calc(50% + var(--relief-largeur, 12%)));
  mix-blend-mode: screen;
  transform: translate(calc(var(--relief-tx, 0%) * -1.5), calc(var(--relief-ty, 0%) * -1.5));
}

/* Le grain du papier : un bruit gris, en tuile de 180 px, mélangé en lumière
   douce. Une image, pas un filtre : le navigateur la dessine une fois. */
.relief::after {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 180px 180px;
  opacity: var(--relief-grain, 0.35);
  mix-blend-mode: soft-light;
}

/* Page zoomée au pincement : on coupe tout (visionneuse.js). */
html.page-zoomee .relief { display: none; }
html.page-zoomee [data-relief] { will-change: auto; }