/* ========================================
   Aperçu de carte — le vrai rendu d'un modèle, mis à l'échelle
   ========================================
   Ces vignettes montraient un mini-rendu générique qui ne connaissait du
   modèle que ses couleurs, sa police et la composition de sa ligne de plat.
   Les 19 modèles s'affichaient donc quasiment identiques — et « Comptoir »,
   qui est au fer à gauche et numéroté, apparaissait centré comme les autres.
   La page qui vend des designs montrait des nuanciers.

   Désormais c'est la VRAIE carte, rendue par le même renderer que la page
   publiée et avec sa vraie feuille de style, composée à `--preview-base` px
   de large puis ramenée à la taille de la vignette par template-scale.js.
   ======================================== */

[data-tpl-preview] {
    --preview-base: 800px;
    position: relative;
    overflow: hidden;
    /* Hauteur posée par le script : `transform: scale()` ne réserve aucune
       place, la vignette garderait sinon la hauteur de la carte pleine taille. */
    height: var(--preview-height, 260px);
}

/* Tant que le script n'a pas mesuré, la carte est masquée : mieux vaut une
   vignette vide une fraction de seconde qu'une carte géante qui déborde. */
[data-tpl-preview] .tpl-preview-scaler {
    transform-origin: top left;
    will-change: transform;
}

[data-tpl-preview]:not([style*="--preview-height"]) .tpl-preview-scaler {
    visibility: hidden;
}

/* Une vignette n'est jamais interactive : elle est le sujet d'un lien ou d'un
   bouton qui l'englobe. */
[data-tpl-preview] * {
    pointer-events: none;
    user-select: none;
}

/* Cadrage : on ne montre que le haut de la carte quand la boîte est courte
   (une carte fait presque toujours plus haut que large). */
[data-tpl-preview][data-tpl-crop] {
    height: auto;
    aspect-ratio: 3 / 4;
}

[data-tpl-preview][data-tpl-crop] .tpl-preview-scaler {
    position: absolute;
    inset: 0;
}

/* Le bas s'efface quand la carte est plus haute que son cadre, plutôt que de
   trancher une ligne de texte. Un masque, pas un dégradé de couleur : il
   fonctionne sur les 19 fonds sans avoir à les connaître. */
[data-tpl-preview][data-tpl-crop]::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 14%;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--preview-fade, transparent));
}