/*
 * annonces-lbc.css — Citadine Auto
 * ----------------------------------------------------------------------
 * COMPLÉMENT STRICT à style.css et stock.css : ce fichier n'y redéfinit
 * volontairement AUCUNE règle déjà posée ailleurs.
 *
 *   - style.css   fournit .vehicules-grid / .vehicule-card / __media / __title
 *                 / __meta / __price / __link / .vehicules__title / __lead,
 *                 réutilisées TELLES QUELLES ici (même carte, même grille que
 *                 le stock propre — cohérence visuelle immédiate).
 *   - stock.css   fournit le bandeau diagonal "Vendu" et les badges de statut
 *                 (.vehicule-card--vendu/--reserve, __ruban, __badge--*,
 *                 .vehicule-prix__vendu-notice) — repris à l'identique pour
 *                 qu'un véhicule vendu affiche EXACTEMENT le même bandeau,
 *                 qu'il vienne du stock propre ou d'une annonce Leboncoin
 *                 (deux dessins différents pour "VENDU" sur la même page
 *                 serait un défaut visible, voir BRIEF-TECH.md).
 *
 * Classes introduites ici (préfixe .annonce-lbc / .annonces-lbc, propres à
 * ce module, aucun risque de collision) :
 *   .annonces-lbc__lead                         accroche complémentaire
 *   .annonces-lbc__vide                          état vide soigné
 *   .annonces-lbc__grid--retirees                 second groupe (annonces disparues)
 *   .annonces-lbc__cta                            ligne d'appel à l'action finale
 *   .annonce-lbc-card__badge-source               pastille "Sur Leboncoin"
 *   .annonce-lbc-card__externe                    mention "quitte le site" (SEO/UX)
 *   .annonce-lbc-card__media-vide / --brisee       repli photo absente/en échec
 *   .annonce-lbc-card--retiree                     carte non cliquable (lien mort évité)
 *
 * Intégration : à charger APRÈS style.css ET stock.css. Ligne à ajouter dans
 * app/views/layout.php, juste après le <link> vers stock.css :
 *   <link rel="stylesheet" href="<?= e(asset('/assets/css/annonces-lbc.css')) ?>">
 * ----------------------------------------------------------------------
 */

:root {
  --lbc-ink: var(--ink, #0D1B2A);
  --lbc-bleu: var(--bleu, #1B4F9C);
  --lbc-gris: var(--gris, #5A6B80);
  --lbc-fond-2: var(--fond-2, #F5F8FC);
  --lbc-bord: var(--bord, #DFE5EC);
}

.annonces-lbc {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--lbc-bord);
}

.annonces-lbc__lead {
  max-width: 62ch;
}

/* --- État vide (aucune annonce importée pour l'instant) -------------------- */
.annonces-lbc__vide {
  margin-top: 1.25rem;
  padding: 1.5rem 1.75rem;
  background: var(--lbc-fond-2);
  border: 1px dashed var(--lbc-bord);
  border-radius: 10px;
  color: var(--lbc-gris);
}

.annonces-lbc__vide p {
  margin: 0;
}

.annonces-lbc__vide a {
  color: var(--lbc-bleu);
  font-weight: 600;
}

/* --- Grille des annonces retirées : légèrement détachée du groupe actif --- */
.annonces-lbc__grid--retirees {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--lbc-bord);
}

/* --- Pastille source (réutilise la couleur --depot déjà posée dans stock.css,
   aucune couleur redéfinie ici) : juste un peu plus petite pour ne pas
   rivaliser visuellement avec le badge de statut quand les deux cohabitent. */
.annonce-lbc-card__badge-source {
  font-size: .68rem;
  letter-spacing: .02em;
}

/* --- Mention visible "on quitte le site" (contrainte SEO/transparence) ---- */
.annonce-lbc-card__externe {
  display: block;
  padding: 0 var(--e-5, 1rem) var(--e-4, .75rem);
  margin-top: -0.5rem;
  font-size: .78rem;
  color: var(--lbc-gris);
}

/* --- Photo absente ou en échec de chargement : repli visuel discret ------- */
.annonce-lbc-card__media-vide,
.annonce-lbc-card__media--brisee img {
  display: block;
  width: 100%;
  height: 100%;
}

.annonce-lbc-card__media-vide::after,
.annonce-lbc-card__media--brisee::after {
  content: "Photo à venir";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  color: var(--lbc-gris);
  background: var(--lbc-fond-2);
}

.annonce-lbc-card__media--brisee img {
  visibility: hidden;
}

/* --- Carte "retirée" : jamais de lien mort, jamais interactive ------------ */
.annonce-lbc-card--retiree {
  cursor: default;
}

.annonce-lbc-card--retiree:hover {
  transform: none;
}

.annonce-lbc-card--retiree .vehicule-card__media img {
  filter: saturate(.35) brightness(.92);
}

/* Réutilise .vehicule-prix__vendu-notice (stock.css) pour l'encadré ; ce
   complément ne fait qu'ajuster la marge dans le contexte d'une carte. */
.annonce-lbc-card__notice {
  margin: .5rem var(--e-5, 1rem) var(--e-4, .75rem);
}

.annonce-lbc-card__notice a {
  color: var(--lbc-bleu);
  font-weight: 600;
}

/* --- Ligne d'appel à l'action finale --------------------------------------- */
.annonces-lbc__cta {
  margin-top: 2rem;
  text-align: center;
  color: var(--lbc-gris);
}

.annonces-lbc__cta .btn {
  margin-left: .5rem;
}

@media (max-width: 480px) {
  .annonces-lbc__cta {
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }
  .annonces-lbc__cta .btn {
    margin-left: 0;
  }
}