/*
 * T032 (#109) — images des pages ville : stabilite de mise en page.
 *
 * La feuille generee (dist/pages/ville.css) fixait `height: 300px` sur
 * `.city-image-section img`. Deux consequences :
 *
 *  - sur mobile, une bande de 300 px de haut sur 360 px de large impose un
 *    recadrage extreme (object-fit: cover) et l'image parait « zoomee » ;
 *  - la hauteur etait une constante, independante du ratio reel de la
 *    photo : sur un ecran large, l'image etait etiree puis recadree.
 *
 * On remplace la hauteur fixe par un ratio explicite, identique a celui
 * annonce par les attributs width/height du <img> (1200x800 = 3:2). Le
 * navigateur reserve donc la bonne place AVANT le chargement de l'image
 * (CLS), et `object-fit: cover` continue de remplir le cadre sans
 * deformation. Le max-height evite qu'une image panoramique n'occupe tout
 * l'ecran sur desktop.
 *
 * Ce fichier est separe de dist/pages/ville.css volontairement : cette
 * derniere est un artefact fige par l'extraction de la T063 (#140) et
 * n'a plus de source dans le template ; l'ajouter ici garantit qu'aucune
 * regeneration ne peut l'ecraser.
 */

.city-image-section img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    max-height: 520px;
    object-fit: cover;
    display: block;
}

/* Mobile : un ratio plus haut lit mieux sur un ecran etroit qu'un 3:2
   qui ressemble a une vignette. */
@media (max-width: 640px) {
    .city-image-section img {
        aspect-ratio: 4 / 3;
        max-height: 340px;
    }
}