/* Actualités — géométrie des photos.
   Voir inc/ck-news-media.php pour le diagnostic complet.

   RÈGLE UNIQUE : une photo d'actualité n'est jamais recadrée. Jamais de
   `object-fit: cover`, jamais de hauteur imposée à une image dont la largeur
   est également imposée. Mieux vaut de l'espace autour qu'une tête coupée.

   Cette feuille n'est chargée que sur les écrans d'actualité, et toutes ses
   règles sont préfixées par .ck-news-media : elle ne peut pas atteindre la
   Revue de presse, la Galerie, les Sponsors, l'Encadrement ni le Hero. */

/* =========================================================================
   1. La photo en tête de l'article
   =========================================================================
   C'est le sujet principal de la page : elle s'affiche à son format, entière.
   `width: auto` + `height: auto` font que la boîte de l'élément EST le format
   de la photo — il n'existe alors plus aucune surface à recadrer, et aucune
   bande vide non plus. Le seul garde-fou est une hauteur maximale, pour qu'un
   format téléphone très vertical ne demande pas trois écrans de défilement :
   une photo ainsi limitée devient simplement moins large, jamais coupée.
   `svh` tient compte des barres mobiles. */
.ck-news-media .post-thumbnail img.ck-news-photo {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 72svh;
    margin-inline: auto;
    object-fit: fill;   /* la boîte a déjà le bon format : aucun ajustement */
    border-radius: 0;
}

/* Le parent enferme cette photo dans une carte à hauteur pleine et à
   débordement masqué. Sans cela, la carte garderait la hauteur de l'ancien
   cadre et rogner reviendrait par la fenêtre. */
.ck-news-media .post-thumbnail .card {
    display: block;
    height: auto;
    overflow: visible;
}

/* La légende du parent se superpose à la photo en position absolue. Elle est
   vide sur ce site ; on la neutralise pour qu'elle ne réserve pas de hauteur
   au-dessus d'une photo devenue plus étroite. */
.ck-news-media .post-thumbnail .card-img-overlay:empty {
    display: none;
}

/* =========================================================================
   2. Les cartes de la liste Actualités et des articles similaires
   =========================================================================
   Un cadre de format fixe aurait été le réflexe, mais il gaspille : une photo
   panoramique dans un cadre 4/3 laisse près de la moitié du cadre vide, alors
   qu'elle n'avait aucun besoin d'être encadrée. On fait donc l'inverse : la
   largeur est pleine, la hauteur suit le format de la photo, et seule une
   hauteur maximale borne les formats très verticaux.

   La largeur n'est pas imposée non plus : elle suit la photo dans la limite
   de la carte. Une photo horizontale occupe donc toute la largeur, une photo
   verticale butée en hauteur devient simplement plus étroite et se centre.
   Il n'y a alors aucune bande rapportée autour de l'image : ce qui reste est
   le fond de la carte, une respiration et non un cadre vide. Une petite photo
   n'est pas non plus gonflée au-delà de sa taille réelle.

   Conséquence : tout ce qui est horizontal, du paysage au panoramique, tient
   exactement, sans un pixel perdu ni ajouté. Les hauteurs de carte restent
   proches les unes des autres — la grille tient debout sans qu'aucune photo
   soit amputée. */
.ck-news-media .card-img-top.ck-news-photo {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 30rem;
    margin-inline: auto;
    object-fit: contain;
}

/* Les cartes « articles similaires », en bas d'un article, sont d'un autre
   type : le titre y est posé PAR-DESSUS la photo, et le parent leur impose
   une hauteur pleine en `!important`. On ne peut donc pas y laisser la
   hauteur suivre la photo ; on remplace seulement le recadrage par un
   `contain`, sur l'anthracite du site. La photo est alignée en haut du cadre
   pour que le titre superposé retombe sur le fond sombre plutôt que sur
   l'image. */
.ck-news-media .card-img.ck-news-photo {
    max-height: none;
    object-fit: contain;
    object-position: center top;
    background: #202225;
}

/* Le parent agrandit l'image de 10 % à l'intérieur d'un cadre à débordement
   masqué, ce qui retire un bandeau sur chaque bord — y compris au repos, et
   y compris sur une photo horizontale déjà au bon format. Remis à l'échelle
   réelle : plus aucun bord n'est perdu. L'effet de survol du parent reste
   possible, il part simplement de 1. */
.ck-news-media .card-img-top.ck-news-photo,
.ck-news-media .card-img-top-div .card-img-top.ck-news-photo {
    transform: none;
}

/* =========================================================================
   3. Petits écrans
   =========================================================================
   Sous 768 px la colonne est unique et la photo occupe déjà toute la largeur
   utile : on relâche la hauteur maximale de la photo d'article, qui n'a plus
   de raison d'être aussi contraignante, tout en gardant une limite. */
@media (max-width: 767.98px) {
    .ck-news-media .post-thumbnail img.ck-news-photo {
        max-height: 80svh;
    }
    /* En colonne unique, la même limite en rem rendrait les photos verticales
       démesurées : on la resserre pour que la liste reste parcourable au
       pouce. Les formats horizontaux, eux, ne l'atteignent jamais. */
    .ck-news-media .card-img-top.ck-news-photo {
        max-height: 24rem;
    }
}

/* Aucune animation ajoutée ici ; on se contente de neutraliser celles que la
   mise à l'échelle du parent aurait entretenues. */
@media (prefers-reduced-motion: reduce) {
    .ck-news-media .card-img-top.ck-news-photo,
    .ck-news-media .card-img.ck-news-photo,
    .ck-news-media .post-thumbnail img.ck-news-photo {
        transition: none;
    }
}