/* RESET */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
  color: #333;
  line-height: 1.6;
  padding-top: 70px;
}

a { text-decoration: none; color: inherit; }

/* ===== HEADER ===== */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #74A836; /* vert clair logo */
  border-bottom: 2px solid #5C8E2C;
  z-index: 1000;
  color: #fff;
}
.topbar .inner {
  max-width: 1150px;
  margin: 0 auto;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #fff;
}
.brand img {
  width: 38px;
  height: 38px;
  margin-right: 10px;
  border-radius: 6px;
  background: #fff;
}
.primary {
  display: flex;
  gap: 25px;
}
.primary a {
  color: #fff;
  font-size: 14px;
  opacity: 0.9;
}
.primary a:hover { opacity: 1; text-decoration: underline; }
.cta {
  background: #fff;
  color: #74A836;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 14px;
}
.cta:hover { background: #f1f1f1; }

/* burger */
#menu-toggle { display: none; }
.burger { display: none; font-size: 26px; cursor: pointer; color: #fff; }
@media (max-width:900px){
  .primary {
    display:none;
    position:absolute;top:60px;left:0;right:0;
    flex-direction:column;gap:15px;
    background:#74A836;padding:20px;
  }
  #menu-toggle:checked ~ .primary { display:flex; }
  .burger { display:block; }
}

/* ===== INTRO (fusion hero + méthode) ===== */
.intro {
  background: #f9f9f9;
  padding: 100px 20px 60px;
}
.intro .container { max-width:1150px; margin:0 auto; }
.intro h1 {
  font-size: 42px;
  font-weight: 800;
  color: #333;
  margin-bottom: 15px;
}
.highlight { color: #74A836; }
.intro-text {
  max-width: 700px;
  color: #555;
  font-size: 18px;
  margin-bottom: 25px;
}
.actions {
  display: flex;
  gap: 12px;
  margin-bottom: 35px;
}
.btn {
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
}
.btn-primary { background: #74A836; color: #fff; border: none; }
.btn-primary:hover { background: #8CCF4E; }
.btn-outline { border: 1px solid #74A836; color: #74A836; background: transparent; }
.btn-outline:hover { background: #74A836; color: #fff; }

/* Étapes fusionnées */
.steps-wrapper { margin-top: 50px; }
.steps-wrapper .section-title { font-size: 26px; margin-bottom: 20px; color: #333; }
.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
}
.steps li {
  flex: 1 1 calc(25% - 20px);
  background: #fff;
  border: 1px solid #ddd;
  border-left: 4px solid #74A836;
  border-radius: 10px;
  padding: 15px;
}
.steps h3 { font-size: 16px; margin-bottom: 6px; color: #333; }
.steps p { color: #555; }

/* ===== SECTIONS ===== */
.section { max-width:1150px; margin:60px auto; padding:40px 20px; }
.section-title { font-size:28px; font-weight:bold; margin-bottom:10px; color:#333; }
.section-sub { color:#666; margin-bottom:30px; }

/* ===== PRESTATIONS ===== */
.cards { display: flex; flex-wrap: wrap; gap: 20px; }
.card {
  flex: 1 1 calc(33.333% - 20px);
  min-width: 260px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 20px;
}
.card:hover { border-color: #74A836; }
.card .icon { font-size: 22px; margin-bottom: 8px; }
.card h3 { font-size: 18px; margin-bottom: 6px; color: #333; }
.card p { color: #555; }

/* ===== GALERIE ===== */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 30px;
}
.gallery figure {
  flex: 1 1 calc(33.333% - 15px);
  min-width: 260px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
}
.gallery img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.gallery figcaption {
  padding: 10px;
  font-size: 14px;
  color: #555;
}

/* ===== AVIS ===== */
.testimonials {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.testimonials blockquote {
  flex: 1 1 calc(33.333% - 20px);
  background: #fafafa;
  border-left: 4px solid #74A836;
  border-radius: 10px;
  padding: 15px;
  font-size: 14px;
  color: #333;
}

/* ===== CONTACT ===== */
.contact-grid { display:flex; flex-wrap:wrap; gap:40px; max-width:1150px; margin:0 auto; }
.contact-info, .contact-form-wrapper { flex:1 1 45%; }
.contact-list { list-style:none; margin-top:20px; }
.contact-list li { margin-bottom:10px; color:#555; font-size:15px; }
.contact-list a { color:#74A836; }
.contact-list a:hover { text-decoration: underline; }
.contact-form-wrapper h3 { margin-bottom:15px; font-size:20px; color:#333; }
.contact-form { display:flex; flex-direction:column; gap:10px; }
.contact-form input, .contact-form textarea {
  width:100%; padding:10px; border:1px solid #ccc; border-radius:6px; font-size:14px;
}
.contact-form button {
  align-self:flex-start;
  background:#74A836;
  color:#fff;
  padding:10px 18px;
  border:none;
  border-radius:20px;
  font-weight:bold;
  cursor:pointer;
}
.contact-form button:hover { background:#8CCF4E; }

/* ===== FOOTER ===== */
.footer {
  background:#f4f4f4;
  padding:30px 20px;
  border-top:3px solid #74A836;
}
.footer-grid {
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  justify-content:space-between;
  max-width:1150px;
  margin:0 auto;
}
.footer h4 { margin-bottom:10px; color:#58230D; }
.footer a { color:#74A836; }
.footer a:hover { text-decoration:underline; }
.legal {
  border-top:1px solid #ddd;
  margin-top:15px;
  padding-top:10px;
  text-align:center;
  font-size:13px;
  color:#666;
}