/* Étape 22, lot A : boîte d'image de taille fixe pour les tuiles d'articles et les cartes de listes.
   La règle de cadrage est calculée à l'affichage d'après les dimensions réelles du fichier (vvv_tile_fit()) :
   - tile-media--cover   : photo en paysage (largeur / hauteur >= 1,2) d'au moins 600 px de large, recadrée, point d'intérêt centre-haut ;
   - tile-media--contain : carte, étiquette, portrait, carré, petite image : image ENTIÈRE, centrée, à sa taille native au plus
     (jamais étirée), sur fond sable, avec un léger marge et un fin filet.
   Les images ne sont pas modifiées. Feuille hors couches (bibliothèque global) : elle l'emporte sur card.css et fidelity-regions.css
   sans les modifier ; elle ne vise que les éléments qui portent la classe tile-media. */

:root{--tm-pad:12px;--tm-bg:var(--c-sand);--tm-line:var(--c-line)}

.tile-media{position:relative;overflow:hidden;box-sizing:border-box;background:var(--tm-bg)}
.tile-media img{display:block}
.tile-media--cover img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 35%}
.tile-media--contain{border:1px solid var(--tm-line)}
.tile-media--contain img{position:absolute;inset:var(--tm-pad);margin:auto;width:auto;height:auto;
  max-width:calc(100% - 2 * var(--tm-pad));max-height:calc(100% - 2 * var(--tm-pad));object-fit:contain}

/* Tuiles d'articles (« Comprendre », « Autres articles », pages de thème) : cadre 3:2 quand la photo est au-dessus,
   colonne de 44 % (cadre 3:2) quand la tuile est assez large ; hauteur de tuile commune à la rangée (grille étirée). */
.art-tile .tile-media{width:auto;aspect-ratio:3/2;align-self:start;margin:var(--space-4) var(--space-4) 0}
@container (min-width: 520px){
  .art-tile:has(.tile-media){grid-template-columns:44cqw minmax(0,1fr)}
  .art-tile .tile-media{margin:var(--space-4) 0 var(--space-4) var(--space-4)}
}
/* Tuile sans image : tuile de texte sur le même fond sable, même hauteur que les voisines de la rangée. */
.art-tile.art-tile--text,.art-tile.art-tile--text:hover{background:var(--c-sand)}
.art-tile.art-tile--text{min-height:200px}