section { padding: 4.5rem 0; }

.titre-section { text-align: center; margin-bottom: 3rem; }
.titre-section h2 { font-size: 2.2rem; color: var(--couleur-principale-fonce); }
.titre-section p { margin-top: 0.6rem; opacity: 0.8; }

/* ---------- Bannière ---------- */
.hero {
  background: linear-gradient(135deg, rgba(31,122,51,0.95), rgba(47,158,68,0.88));
  /* Plus tard : on ajoutera une photo de fond ici */
  color: #fff;
  padding: 7rem 0;
  text-align: center;
}
.hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 800px; margin: 0 auto 1.2rem; }
.hero p { max-width: 600px; margin: 0 auto 2rem; font-size: 1.1rem; opacity: 0.95; }

/* ---------- Cartes services ---------- */
.grille-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}

.carte {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s, box-shadow 0.25s;
}
.carte:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1); }

.carte-image {
  height: 220px;
  background: var(--couleur-clair);   /* remplacé par une photo plus tard */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}
.carte-image img { width: 100%; height: 100%; object-fit: cover; }

.carte-texte { padding: 1.5rem; }
.carte-texte h3 { margin-bottom: 0.5rem; color: var(--couleur-principale-fonce); }
.carte-texte p { margin-bottom: 1rem; font-size: 0.95rem; }
.lien-fleche { color: var(--couleur-principale); font-weight: 600; }
.lien-fleche:hover { text-decoration: underline; }

/* ---------- Pourquoi nous ---------- */
.fond-clair { background: var(--couleur-clair); }

.grille-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.atout { text-align: center; padding: 1.5rem 1rem; }
.atout-icone { font-size: 2.2rem; margin-bottom: 0.8rem; }
.atout h3 { font-size: 1.15rem; margin-bottom: 0.4rem; color: var(--couleur-principale-fonce); }
.atout p { font-size: 0.95rem; }

/* ---------- Appel à l'action ---------- */
.cta {
  background: var(--couleur-principale);
  color: #fff;
  text-align: center;
}
.cta h2 { font-size: 2rem; margin-bottom: 1rem; }
.cta p { margin-bottom: 1.8rem; opacity: 0.95; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grille-3 { grid-template-columns: 1fr; }
  .grille-4 { grid-template-columns: repeat(2, 1fr); }
  section { padding: 3rem 0; }
  .hero { padding: 4.5rem 0; }
}
@media (max-width: 500px) {
  .grille-4 { grid-template-columns: 1fr; }
}