/* =====================================================================
   wandaloo-moto — COPIE de wandaloo-2025/css/occasion-2026.css, l.1-85
   ( sections 1 à 4 ), à garder identique. Toute modification part de 2025.
   ÉCARTS ADMIS :
     - ce bloc d'en-tête ;
     - section 5 ( formulaire .rc26 « Ecrire au vendeur ») non reprise :
       la fiche annonce moto n'utilise pas ce gabarit.
   Chargé par inc/page-load-css.php, APRÈS ui.css, avec ?v=filemtime.
   Contrôle : diff <( tail -n +13 css/occasion-2026.css ) <( sed -n 1,85p
   ../wandaloo-2025/css/occasion-2026.css ) = vide.
   ===================================================================== */

/* =====================================================================
   occasion-2026.css — Cadrage des photos d'annonces occasion
   Chargé par inc/page-load-css.php, APRÈS ui-2025.css et les *-2025.css :
   gagne les égalités de spécificité sans qu'on ait à toucher aux anciens
   fichiers ( même patron que relation-client-2026.css ).

   POURQUOI CE FICHIER
   Les photos déposées par les membres arrivent en 4:3, 3:4 ou 9:16 selon le
   téléphone. L'ancien plugin les ramenait toutes à 800x600 par recadrage, ce
   qui uniformisait la mise en page — au prix du toit et du bas de caisse sur
   une photo portrait, et de façon irréversible.

   Le module 2026 conserve l'image entière ( fit dans 1280x960 ) et
   l'uniformisation se fait ICI, à l'affichage :
     - 'cover'   sur les listings et vignettes : cadrage visuel, rien n'est perdu
     - 'contain' sur la fiche annonce : l'acheteur voit la voiture ENTIÈRE
   Les archives 800x600 profitent du même cadrage sans être retraitées.
   ===================================================================== */

/* ── 1. Listing de recherche ──────────────────────────────────────── */
#result .items img {
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    object-position: center;
    background-color: #2E353E;
}

/* ── 2. Fiche annonce — photo principale ──────────────────────────── */
/* 'contain' et non 'cover' : recadrer couperait la voiture. Le cadre 4:3 fige
   la mise en page — sans lui, une photo portrait poussait le bloc à 1075 px et
   repoussait les caractéristiques sous la ligne de flottaison. */
#annonce .photos .img-bloc .img {
    aspect-ratio: 4 / 3;
    height: auto;
    width: 100%;
    object-fit: contain;
    object-position: center;
    background-color: #22272F;
    border-radius: 4px;
}

/* ── 3. Fiche annonce — vignettes ─────────────────────────────────── */
/* Le <li> porte la hauteur ( 94px ), mais l'image est enfermée dans un
   <a class="img"> SANS hauteur : son height:100% n'avait aucune référence et
   était ignoré — une vignette portrait sortait à 201px et débordait sur la
   ligne suivante. On donne sa hauteur au lien. */
#annonce .photos li a.img {
    display: block;
    height: 100%;
    overflow: hidden;
    border-radius: 3px;
}
#annonce .photos li img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    background-color: #2E353E;
}

/* ── 4. Carrousel « Voitures occasion » ───────────────────────────── */
/* Présent sur la home et une dizaine de pages via inc/bloc-occasion.php.
   Les blocs html/bloc-occasion-*.html sont GÉNÉRÉS : on les cadre ici plutôt
   que dans le HTML, ce qui évite d'avoir à les régénérer.
   Même structure piégeuse que les vignettes : <li><a class="img"><img></a></li> */
#bloc-occasion .owl-carousel li a.img {
    display: block;
    overflow: hidden;
}
#bloc-occasion .owl-carousel li a.img img {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    object-position: center;
    background-color: #2E353E;
}

@media (max-width: 767px) {
    /* Cadre légèrement plus haut sur mobile : la carte est seule sur sa ligne,
       l'image peut respirer sans décaler quoi que ce soit. */
    #result .items img,
    #bloc-occasion .owl-carousel li a.img img { aspect-ratio: 3 / 2; }
}