/* Bannière de la page d'accueil */

.hero-gite {
  position: relative;
  min-height: 420px;
  margin-bottom: 2rem;
  border-radius: 14px;
  overflow: hidden;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.05),
      rgba(0, 0, 0, 0.50)
    ),
    url("../assets/images/gite/terrasse.jpg");

  background-size: cover;
  background-position: center;
}

.hero-texte {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  color: white;
  text-shadow: 0 2px 6px rgba(0,0,0,.65);
}

.hero-texte h1 {
  color: white;
  font-size: 2.6rem;
  margin: 0;
}

.hero-texte p {
  font-size: 1.15rem;
  margin: .4rem 0 0;
}

/* Couleurs du menu mobile */
.md-nav--primary .md-nav__title,
.md-nav--primary .md-nav__title[for="__drawer"] {
  background-color: #596b45;
  color: white;
}

/* Langue / rubrique actuellement sélectionnée */
.md-nav__link--active {
  color: #8a5739 !important;
}

/* Adaptation smartphone */

@media screen and (max-width: 600px) {

  .hero-gite {
    min-height: 300px;
    border-radius: 10px;
  }

  .hero-texte {
    left: 1.2rem;
    bottom: 1.2rem;
  }

  .hero-texte h1 {
    font-size: 2rem;
  }

  .hero-texte p {
    font-size: 1rem;
  }
}
/* Palette du gîte */

:root {
  --md-primary-fg-color: #596b45;
  --md-primary-fg-color--light: #71845a;
  --md-primary-fg-color--dark: #3f5032;

  --md-accent-fg-color: #a65f3a;
}

/* Liens */

.md-typeset a {
  color: #8a5739;
}

.md-typeset a:hover {
  color: #596b45;
}
/* Barre supérieure du site */
.md-header,
.md-tabs {
  background-color: #596b45;
}
/* Galerie photos */

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 1rem 0 2rem;
}

.photo-gallery img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.photo-gallery img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
}

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

/* Smartphone */
@media screen and (max-width: 500px) {
  .photo-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .photo-gallery img {
    height: 130px;
  }
}
.photo-item {
  margin: 0;
  text-align: center;
}

.photo-item figcaption {
  margin-top: 6px;
  font-size: 0.9rem;
  color: #666;
}