/* ================================================================
   STAF-SG — Système d'images universel v3
   Retire les fonds bleus, images visibles, placeholders élégants
   ================================================================ */

/* --- Hero wrap (hero de chaque page) --- */
.img-hero-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.img-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  animation: hero-zoom 14s ease-out forwards;
}

@keyframes hero-zoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1.0); }
}

.img-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Tous les containers des sections hero passent au-dessus */
.hero .container,
.service-hero .container,
.sector-hero .container,
.corridor-hero .container,
.coverage-hero .container,
.page-header .container,
.article-hero .container {
  position: relative;
  z-index: 3;
}

/* --- Image de fond de section (fond léger) --- */
.section-relative {
  position: relative;
  overflow: hidden;
}

.section-bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.section-bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.section-relative .container,
.section-relative > * {
  position: relative;
  z-index: 2;
}

/* --- Séparateur image pleine largeur --- */
.img-separator {
  width: 100%;
  height: 320px;
  overflow: hidden;
  display: block;
}

.img-separator img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}

.img-separator:hover img {
  transform: scale(1.03);
}

@media (max-width: 768px) {
  .img-separator {
    height: 200px;
  }
}

/* --- Galerie photo --- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.gallery-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-grid.cols-2-1 {
  grid-template-columns: 2fr 1fr;
}

.gallery-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0;
  position: relative;
  cursor: pointer;
}

.gallery-item:hover .gallery-img {
  transform: scale(1.05);
}

.gallery-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.gallery-item:first-child .gallery-img {
  height: 360px; /* Grande image en vedette */
}

.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(10,36,84,0.85));
  color: white;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  font-size: 0.875rem;
  font-weight: 500;
}

@media (max-width: 768px) {
  .gallery-grid,
  .gallery-grid.cols-4,
  .gallery-grid.cols-2-1 {
    grid-template-columns: 1fr 1fr;
  }
  .gallery-grid.cols-2 {
    grid-template-columns: 1fr;
  }
  .gallery-item:first-child .gallery-img,
  .gallery-img {
    height: 180px;
  }
}

@media (max-width: 480px) {
  .gallery-grid,
  .gallery-grid.cols-4 {
    grid-template-columns: 1fr;
  }
}

/* --- Image en parallèle du texte (2 colonnes) --- */
.content-with-img {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.content-with-img.img-right {
  direction: rtl;
}

.content-with-img.img-right > * {
  direction: ltr;
}

.content-img-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  aspect-ratio: 4 / 3;
}

.content-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.content-img-wrap:hover img {
  transform: scale(1.04);
}

@media (max-width: 1024px) {
  .content-with-img,
  .content-with-img.img-right {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .content-img-wrap {
    aspect-ratio: 16 / 7;
  }
}

/* --- Placeholder si image absente (jamais de bleu vide) --- */
.img-missing,
.gallery-item.img-missing,
.content-img-wrap.img-missing {
  background: linear-gradient(135deg, #e2e8f0 0%, #f1f4f8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 2px dashed #cbd5e1;
  min-height: 180px;
}

.img-missing::after {
  content: "📸 Image à ajouter dans /images/";
  text-align: center;
  padding: var(--space-md);
}

/* On cache le message en production — à enlever après avoir toutes les images */
/* .img-missing::after { display: none; } */

/* --- Suppression des fonds bleus résiduels sur sections-bg --- */
.section-bg {
  background-color: var(--color-bg-section);
  /* Plus de gradient bleu en background de sections */
}

/* S'assurer que les overlays des heroes n'écrasent plus l'image */
.hero::before,
.service-hero::before,
.sector-hero::before,
.corridor-hero::before,
.coverage-hero::before {
  /* Ces pseudo-éléments qui faisaient le fond bleu sont maintenant
     remplacés par les vrais overlays div dans le HTML.
     On les neutralise pour éviter la double superposition. */
  display: none !important;
}