/* Accueil vivant (fondateur, 18/10/2026) — `site/accueil_vivant.py`, `_tuile_media.html`,
   `accueil-vivant.js`. Chargée par l'accueil SEULEMENT quand il porte l'histoire ou une vignette
   illustrée : sans eux, l'accueil est celui d'avant, octet pour octet.
   ⚠ Aucune couleur écrite en dur : les variables de l'univers (B-THEME). */

/* L'histoire : deux lignes au-dessus des vignettes, dans la typographie déjà en place
   (`.contenu-page__intro`, `.carte-page__sous-titre`). Ici, l'espacement seulement : le dessin
   du bloc est demandé au design. */
.accueil-histoire{margin:0 0 18px}
.accueil-histoire p{margin:0}

/* La couche d'image d'une vignette : AU-DESSUS du fond (aplat, trame, lueur), SOUS le contenu
   (pastille, flèche, titre : `position:relative`, plus loin dans le document). L'affiche
   est toujours là ; la vidéo, transparente au repos, n'apparaît que pendant la lecture, et
   repart par un fondu de 300 ms vers l'affiche (sa propre première image). */
.tuile__media{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.tuile__affiche,.tuile__video{position:absolute;inset:0;width:100%;height:100%}
.tuile__affiche img{width:100%;height:100%;max-width:none;object-fit:cover}
.tuile__video{object-fit:cover;opacity:0;transition:opacity 300ms ease}
.tuile__media[data-lecture="en-cours"] .tuile__video{opacity:1}
@media (prefers-reduced-motion:reduce){.tuile__video{transition:none}}

/* Le cadre des Cartes au survol (composants.css) est une ombre INTÉRIEURE : sous l'image, il ne
   se verrait plus. Le même, redessiné au-dessus d'elle. */
.tuile--illustree[data-univers="tcg"]:hover::after,
.tuile--illustree[data-univers="tcg"]:focus-visible::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--u-a1);pointer-events:none}

/* 18/10/2026 — le fondateur : « Enlève la mention "Visuel généré par IA" des vignettes, c'est moche ».
   Plus de pastille sur les vignettes : UNE ligne discrète au bas de l'accueil, « Visuels de l'accueil
   générés par IA. » (règlement européen sur l'IA, art. 50), posée seulement quand une vignette est
   illustrée. Le dessin des petites mentions du site (`.medias__legende-ia` : --f-data, 12 px,
   --u-muted), sans fond ni cadre. */
.accueil-mention-ia{font-family:var(--f-data);font-size:12px;line-height:1.4;color:var(--u-muted)}

/* 18/10/2026 — le fondateur : « la mise en page mobile ne permet d'afficher que le tronc de la figurine, ça
   ne va pas ». Sous 768 px, la vignette Figurines est la dernière tuile, pleine largeur, en bande 3:1
   (362 × 120 à 390 px) : une affiche rognée en `cover` n'y montrait que la bande du milieu. Décision prise à
   sa place (intégration v0.2.13.16), À FAIRE VALIDER PAR DESIGN : ILLUSTRÉE (affiche ou vidéo,
   `.tuile--illustree`, posée avec `_tuile_media.html`), elle prend le rapport de son visuel, 16:10
   (≈ 362 × 226 à 390 px) : l'affiche 16:9 y tient entière en hauteur. Sans visuel, rien ne change ;
   ordinateur et tablette (768 px et plus) non plus. */
@media (max-width:767px){.tuile--rayon[data-univers="figurines"].tuile--illustree{height:auto;aspect-ratio:16/10}}