/* =====================================================================
   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; }
}

/* =========================================================================
   5) Formulaire « Ecrire au vendeur » — page annonce occasion
   -------------------------------------------------------------------------
   Reutilise TEL QUEL le gabarit .rc26 du module leads 2026
   ( css/relation-client-2026.css, charge juste AVANT ce fichier par
   inc/page-load-css.php ). Rien n'est redefini ici : on se contente de poser
   les memes custom properties que celles produites par
   Auto::cssRelationClientVars() cote leads.

   Une annonce d'occasion n'a pas de charte annonceur : on prend donc les
   valeurs de REPLI du module leads, celles qu'une marque non chartee recoit
   deja. Rendu strictement identique, et coherent avec le dark mode de la
   page ( carte #1F1F1E, champs #252523 ).

   Un premier essai en orange wandaloo ( #EF5A28 ) a ete ecarte : trop
   present a l'oeil sur un bloc de cette taille, et contraste blanc/orange
   a 3,3 seulement ( AA texte normal = 4,5 ). Le repli, lui, passe largement.
   ========================================================================= */
.rc26--occasion{
  --rc-texte:#EFE9DF;
  --rc-contour:#35352F;
  --rc-fond:#444444;
  --rc-sur-fond:#EFE9DF;
}

/* Bandeau : le repli #2B2B29 est tres proche de la carte #1F1F1E. On garde le
   filet du gabarit ( border-bottom 2px --rc-contour ) et on remonte le titre
   d'un cran pour que l'en-tete se detache quand meme du corps. */
.rc26--occasion .rc26__band h2{color:#F4EFE7}

/* Bouton d'envoi : meme gris que le bandeau ( #444 ), les deux points forts
   de la carte se repondent. Contraste texte #F4EFE7 sur #444 = 8,1 ( AA large ). */
.rc26--occasion .rc26__go{
  background:#444444;
  border-color:#555555;
  color:#F4EFE7;
}
.rc26--occasion .rc26__go:hover{filter:brightness(1.18)}

/* Message d'erreur du captcha. Place hors de .rc26__turnstile, dont la
   hauteur est figee par le @container ( scale .86 en colonne etroite ) :
   un message a l'interieur serait rogne. */
.rc26 .rc26__cap-err{
  display:none;
  font-size:11.5px;
  color:var(--rc26-ko,#E2554B);
  text-align:center;
  margin:0 0 8px;
}
.rc26 .rc26__cap-err.is-show{display:block}