/* =====================================================
   VOYAGE EXPRESS — Gestion images & bannières
   ===================================================== */

/* ---- Helper : image avec fallback ---- */
.ve-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---- HERO HOME ---- */
.hero-photo-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/public/assets/images/hero/hero-home.jpg');
  background-size: cover;
  background-position: center right;
  z-index: 0;
}
/* Fallback Unsplash si pas de photo locale */
.hero-photo-bg.no-local::before {
  background-image: url('https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?w=1920&q=80');
}

/* ---- BANNIÈRES PAGES ---- */
.page-banner {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}
.page-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(13,31,60,.88) 0%,
    rgba(13,31,60,.72) 60%,
    rgba(13,31,60,.45) 100%
  );
  z-index: 1;
}
.page-banner__content {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Variantes par page */
.banner-horaires   .page-banner__bg { background-image: url('/public/assets/images/hero/hero-horaires.jpg'),   url('https://images.unsplash.com/photo-1570125909232-eb263c188f7e?w=1920&q=75'); }
.banner-services   .page-banner__bg { background-image: url('/public/assets/images/hero/hero-services.jpg'),   url('https://images.unsplash.com/photo-1464219789935-c2d9d9aba644?w=1920&q=75'); }
.banner-contact    .page-banner__bg { background-image: url('/public/assets/images/hero/hero-contact.jpg'),    url('https://images.unsplash.com/photo-1423592707957-3b212afa6733?w=1920&q=75'); }
.banner-colis      .page-banner__bg { background-image: url('/public/assets/images/hero/hero-colis.jpg'),      url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=1920&q=75'); }
.banner-faq        .page-banner__bg { background-image: url('/public/assets/images/hero/hero-faq.jpg'),        url('https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=1920&q=75'); }
.banner-blog       .page-banner__bg { background-image: url('/public/assets/images/hero/hero-blog.jpg'),       url('https://images.unsplash.com/photo-1488998527040-85054a85150e?w=1920&q=75'); }
.banner-reservation .page-banner__bg { background-image: url('/public/assets/images/hero/hero-home.jpg'),      url('https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?w=1920&q=75'); }
.banner-legal      .page-banner__bg { background-image: url('/public/assets/images/hero/hero-contact.jpg'),    url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?w=1920&q=75'); }

/* ---- CARTES VILLES ---- */
.city-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  height: 280px;
}
.city-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.city-card:hover .city-card__img { transform: scale(1.05); }
.city-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,31,60,.85) 0%, transparent 60%);
}
.city-card__content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem;
  color: #fff;
}

/* ---- CARTE SERVICE avec image ---- */
.service-img-card {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  height: 220px;
  margin-bottom: 1rem;
}
.service-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- BLOG card image ---- */
.blog-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.blog-card-img-wrap {
  overflow: hidden;
  height: 200px;
  background: var(--ve-light);
}
.blog-card-img-wrap img {
  transition: transform .4s ease;
}
.blog-card-img-wrap:hover img { transform: scale(1.05); }

/* ---- OG image hidden (SEO) ---- */
.og-image-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .page-banner { min-height: 240px; }
  .city-card   { height: 200px; }
}