/* =====================================================================
   MI12 FUN CENTER — illus.css
   Le cadre des illustrations d'activité. Rien de plus.

   POURQUOI DES ILLUSTRATIONS ET PAS DES PHOTOS
   --------------------------------------------
   Le client n'a pas fourni ses photos. Plutôt que des cadres vides ou
   des images de banque qui ne montrent pas SES salles, chaque activité
   a un dessin : il dit ce qu'on y fait sans prétendre montrer le lieu.
   Quand les photos arriveront, elles prendront la même place — le
   conteneur et le rapport d'image ne changent pas.

   IMAGES FIXES (demande client, 27/07/2026)
   -----------------------------------------
   Les scènes étaient du SVG animé. Elles sont maintenant servies en PNG
   depuis assets/illus/. Les dessins et leurs styles vivent dans
   scripts/ (illus-scenes.js + illus-scenes.css), qui n'est PAS déployé :
   on les corrige là, puis `node scripts/rendre-illus.mjs` régénère les
   images. Plus une seule animation d'illustration sur le site.

   LES PNG SONT TRANSPARENTS
   -------------------------
   Le fond sombre et la trame diagonale ci-dessous restent en CSS. Gravés
   dans les images, ils les faisaient passer de 199 ko à 3,5 Mo — une
   trame de lignes fines ne se compresse pas.
   ===================================================================== */

.illus {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 70% 0%, rgba(228, 3, 46, 0.16), transparent 62%),
    var(--surface);
  border: 1px solid var(--line);
}

/* L'image elle-même. `cover` : le PNG est en 16/9, mais le héros ou une
   fiche peuvent imposer un autre rapport — on recadre plutôt que de
   déformer un dessin. */
.illus__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Trame de fond commune : les lignes au sol d'une salle de jeu. Fixe —
   elle glissait lentement, c'était la dernière animation de fond. */
.illus::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line-tactic, rgba(255,255,255,0.05)) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-tactic, rgba(255,255,255,0.05)) 1px, transparent 1px);
  background-size: 42px 42px;
  transform: skewX(var(--skew));
  /* Le skew fait rentrer du vide sur les côtés : on élargit la trame de
     part et d'autre pour qu'elle couvre encore tout le cadre. */
  inset: 0 -14% 0 -14%;
}


/* ---------- Légende posée sur la scène ---------- */
.illus__tag {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  padding: 9px 16px 9px 14px;
  background: var(--accent); color: var(--on-accent);
  transform: skewX(var(--skew)) translateX(-6px);
  font-family: var(--font-display); font-stretch: var(--w-label);
  font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.illus__tag span { display: block; transform: skewX(var(--skew-fix)); }