/* ===== Reset et layout ===== */
html, body {
  margin:0;
  padding:0;
  height:100%;
}

body {
  display:flex;
  flex-direction:column;
  font-family: "Poppins", arial, serif;
  background:#f4f1ee;
  color:#2b2b2b;
  min-height:100vh;
}

/* ===== Header ===== */
.header-flex {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 25px 40px;
}

.logo {
  width: 130px;
  height: auto;
}

.header-text {
  text-align: center;
}

.header-text h1 {
  font-size: 2.5rem;
  margin: 0 0 0.2rem 0;
}

.header-text p {
  margin: 0.2rem 0;
}

/* Mobile */
@media (max-width: 768px) {
  .header-flex {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 10px;
  }

  .logo {
    width: 100px;
    margin: 0 auto 10px auto;
  }
}

/* ===== Navigation ===== */
nav {
  background:#2f4f3f;
  text-align:center;
  padding:0.8rem;
}

nav a {
  color:white;
  margin:0 1rem;
  text-decoration:none;
  font-weight:600;
}

nav a:hover {
  text-decoration:underline;
}

/* ===== Main content ===== */
main {
  flex:1;
  max-width:1000px;
  margin:2rem auto;
  width:90%;
}

/* ===== Sections ===== */
section {
  background:white;
  padding:2rem;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
  margin-bottom:2rem;
}

h2 {
  color:#3a5f4f;
}

p {
  line-height:1.6;
}

/* ===== CTA Button ===== */
.cta {
  display:inline-block;
  margin-top:1rem;
  padding:0.8rem 1.5rem;
  background:#3a5f4f;
  color:white;
  text-decoration:none;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
  border:none;
}

.cta:hover {
  background:#2f4f3f;
}

/* ===== Galerie SLIDESHOW ===== */
/* ===== Galerie Slideshow PROPRE ===== */

#galleryContainer {
  display: none;
  margin-top: 1.5rem;
}

.slideshow {
  position: relative;
  max-width: 750px;   /* largeur contrôlée */
  margin: 0 auto;     /* centré */
}

.slide {
  display: none;
  width: 100%;
  height: auto;       /* IMPORTANT : plus de hauteur forcée */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.slide.active {
  display: block;
}

/* Flèches */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(47,79,63,0.7);
  color: white;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 50%;
  font-size: 18px;
  transition: 0.3s;
}

.prev { left: -40px; }
.next { right: -40px; }

.prev:hover, .next:hover {
  background: #2f4f3f;
}

/* Mobile */
@media (max-width: 768px) {
  .slideshow {
    max-width: 100%;
  }

  .prev { left: 10px; }
  .next { right: 10px; }
}

/* Mobile */
@media (max-width: 768px) {
  .slideshow {
    max-width: 100%;
  }

  .prev { left: 10px; }
  .next { right: 10px; }
}

/* Mobile */
@media (max-width:768px) {
  .slideshow {
    height: 300px;
  }

  .slide {
    height: 300px;
  }
}

/* ===== Footer ===== */
footer {
  background: #2f4f3f;
  color:white;
  text-align:center;
  padding:1rem;
  font-size:0.9rem;
  flex-shrink:0;
}