/* ===== 1. Reset et styles globaux ===== */
body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  color: #2e2e2e;
  background-color: #fdfdf8;
}

a { text-decoration: none; color: #4caf50; font-weight: bold; transition: 0.3s; }
a:hover { color: #388e3c; text-decoration: underline; }

img { display: block; max-width: 100%; height: auto; }

/* ===== 2. SECTION HERO (Bannière) ===== */
#hero {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
              url('https://raw.githubusercontent.com/eclatsdeverteternelle-43/eclatsdevert_eternel/main/banniere.png') center/cover no-repeat;
  color: white;
  padding: 80px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 450px;
}

#hero .hero-content {
  max-width: 900px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-logo {
  margin-bottom: 20px;
  height: 140px;
  width: auto;
  filter: drop-shadow(0px 4px 10px rgba(0,0,0,0.3));
}

.hero-title {
  font-size: 3rem;
  margin: 0 0 10px 0;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero-subtitle {
  font-size: 1.5rem;
  margin-bottom: 30px;
  font-weight: 300;
}

.button, .contact-btn {
  display: inline-block;
  background-color: #4caf50;
  color: white;
  padding: 14px 30px;
  border-radius: 8px;
  font-weight: bold;
  transition: 0.3s ease;
  border: none;
  cursor: pointer;
}

.button:hover, .contact-btn:hover { 
  background-color: #2e7d32; 
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* ===== 3. Navigation ===== */
nav {
  display: flex;
  justify-content: center;
  gap: 25px;
  background-color: #ffffff;
  padding: 18px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

nav a { color: #555; font-size: 0.95rem; }
nav a.active { color: #2e7d32; border-bottom: 3px solid #2e7d32; }
nav a:hover { color: #2e7d32; }

/* ===== 4. Contenu & Sections ===== */
main { padding: 20px; }

#accueil, .page-section, .zone-intervention {
  background-color: #ffffff;
  padding: 50px 30px;
  border-radius: 15px;
  margin: 40px auto;
  max-width: 1000px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

h2 { font-size: 2.2rem; color: #2e7d32; text-align: center; margin-bottom: 30px; }
h3 { font-size: 1.6rem; color: #558b2f; margin-top: 30px; border-bottom: 2px solid #f0f4f0; padding-bottom: 10px; }

ul { list-style: none; padding: 0; }
ul li { position: relative; padding-left: 35px; margin-bottom: 15px; font-size: 1.1rem; }
ul li::before { content: '🌿'; position: absolute; left: 0; top: 0; }

/* ===== 5. SLIDER AVANT/APRÈS ===== */
.before-after-slider {
  position: relative;
  width: 100%;
  max-width: 750px;
  aspect-ratio: 4/3;
  margin: 30px auto;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.after-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  border-right: 4px solid white;
  z-index: 2;
}

.slider-input {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: transparent;
  appearance: none;
  cursor: ew-resize;
  z-index: 10;
}

/* ===== 6. GRILLE DES SERVICES ===== */
#services {
  max-width: 1100px;
  margin: 40px auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
}

.service-card {
  background: #ffffff;
  padding: 40px 25px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  text-align: center;
  border-top: 6px solid #4caf50;
  transition: 0.3s;
}

.service-card:hover { transform: translateY(-10px); }
.service-card h4 { color: #2e7d32; font-size: 1.3rem; margin-bottom: 15px; }

/* ===== 7. SAP & AVIS GOOGLE ===== */
#sap {
  display: flex;
  align-items: center;
  gap: 30px;
  max-width: 1000px;
  margin: 40px auto;
  padding: 30px;
  background-color: #f1f8e9;
  border-radius: 15px;
}

#sap img { width: 130px; }

#avis-google {
  max-width: 1100px;
  margin: 60px auto;
}

.avis-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.avis-card {
  background: white;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
  border-left: 6px solid #4caf50;
  display: flex;
  flex-direction: column;
}

.avis-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.avis-nom { font-weight: bold; color: #2e7d32; }
.avis-etoiles { color: #fbbc05; font-size: 0.8rem; }
.avis-texte { font-style: italic; color: #444; font-size: 0.95rem; margin: 0; }

/* ===== 8. Footer & Mobile ===== */
footer {
  text-align: center;
  padding: 50px 20px;
  background-color: #f7faf5;
  margin-top: 60px;
  border-top: 1px solid #e0eadd;
}

@media (max-width: 768px) {
  .hero-title { font-size: 2.2rem; }
  #hero { min-height: 400px; }
  #sap { flex-direction: column; text-align: center; }
  nav { gap: 10px; padding: 10px; }
  nav a { font-size: 0.85rem; }
}