/* ===================== */
/*    PAGE TRAVAUX       */
/* ===================== */

.travaux-section {
  background: #ffffff;
  padding: 4rem 2rem;
}

.travaux-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.travaux-label {
  font-size: clamp(12px, 1.4vw, 15px);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #734A26;
  margin-bottom: 1rem;
}

.travaux-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4.5vw, 40px);     /* fluide desktop → mobile */
  font-weight: 400;
  color: #1e3d26;
  line-height: 1.2;
  margin: 0 0 1rem;
}

.travaux-intro {
  color: #5a6e5d;
  max-width: 900px;
  margin-bottom: 3rem;
  font-size: clamp(15px, 1.6vw, 18px);
}

/* Galerie */
.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.galerie-item {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
  background: #d6cfc8;   /* fond visible pendant le chargement des photos */
}

.galerie-item.grande {
  grid-column: span 2;
  aspect-ratio: 16/9;
}

/* La photo 2 s'étire pour remplir la hauteur de la rangée de la grande */
.galerie-item:nth-child(2) {
  aspect-ratio: auto;
  height: 100%;
}

/* Photos de la galerie */
.galerie-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.galerie-item:hover img {
  transform: scale(1.04);   /* léger zoom au survol */
}

/* Légendes au survol */
.galerie-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 1.2rem;
  background: linear-gradient(to top, rgba(30,61,38,0.85), transparent);
  color: #fff;
  font-size: 0.85rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.galerie-item:hover .galerie-caption {
  transform: translateY(0);
}

/* Bouton "+ de photos" : caché en desktop */
.galerie-plus {
  display: none;
  text-align: center;
  margin-top: 1.5rem;
}

.btn-plus-photos {
  padding: 0.9rem 2.4rem;
  background: transparent;
  color: #1e3d26;
  border: 1px solid #1e3d26;
  border-radius: 0;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn-plus-photos:hover {
  background: #1e3d26;
  color: #ffffff;
}

/* ===================== */
/*      RESPONSIVE       */
/* ===================== */

/* Tablette : 2 colonnes */
@media (max-width: 900px) {
  .galerie {
    grid-template-columns: repeat(2, 1fr);
  }

  .galerie-item.grande {
    grid-column: span 2;      /* la grande prend toute la largeur */
  }

  /* La photo 2 reprend son ratio normal (plus de rangée à remplir) */
  .galerie-item:nth-child(2) {
    aspect-ratio: 4/3;
    height: auto;
  }
}

/* Mobile : 1 colonne + système "voir plus" */
@media (max-width: 600px) {
  .travaux-section {
    padding: 3rem 1.25rem;
  }

  .travaux-intro {
    margin-bottom: 2rem;
  }

  .galerie {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .galerie-item.grande {
    grid-column: span 1;
    aspect-ratio: 4/3;        /* même format que les autres en 1 colonne */
  }

  /* Sur mobile (pas de survol) : légendes toujours visibles */
  .galerie-caption {
    transform: translateY(0);
    font-size: 0.8rem;
    padding: 0.8rem 1rem;
  }

  /* Photos au-delà de 3 : cachées tant que non révélées */
  .galerie-item.galerie-cachee {
    display: none;
  }

  .galerie.galerie-ouverte .galerie-item.galerie-cachee {
    display: block;
  }

  /* Bouton visible en mobile */
  .galerie-plus {
    display: block;
  }

  .btn-plus-photos {
    width: 100%;              /* pleine largeur = facile au doigt */
    padding: 1rem;
  }

  /* Bouton masqué une fois la galerie ouverte */
  .galerie.galerie-ouverte + .galerie-plus {
    display: none;
  }
}