.container { width: min(1100px, 92%); margin: 0 auto; }

.hero { padding: clamp(2rem, 6vw, 5rem) 0; background: linear-gradient(180deg, #ffffff 0%, #f3f8f5 100%); }
.hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height:1.12; margin: 0 0 1rem; text-align: center; }
.hero p { color: var(--muted); font-size: 1.1rem; margin: 0 0 1.5rem; text-align: center; }
.hero .cta { display:flex; gap:.75rem; flex-wrap: wrap; justify-content: center; }

section { padding: clamp(2rem, 6vw, 4rem) 0; }
.section-title { font-size: 1.8rem; margin: 0 0 1.25rem; }

/* Avantages */
.features { display:grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.card { background: var(--card); border:1px solid var(--border); border-radius: 1rem; padding:1.25rem; }
.card-row { display:grid; grid-template-columns:56px 1fr; gap:1rem; align-items:center; }
.card img { width:56px; height:56px; object-fit:cover; border-radius:.7rem; }

/* Fonctionnement */
.steps { display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; counter-reset: step; }
.step { background: var(--card); border:1px solid var(--border); border-radius:1rem; padding:1.25rem; position:relative; }
.step:before { counter-increment: step; content: counter(step); position:absolute; top:-12px; left:-12px; width:36px; height:36px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow: 0 8px 20px rgba(47,177,114,.35); }

/* Galerie */
.gallery { display:grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.gallery img { width:100%; height:160px; object-fit:cover; border-radius:.8rem; border:1px solid var(--border); background:#fff; }

/* Image longue (pleine largeur du container, sans crop) */
.long-image img {
  display: block;
  width: 100%;
  height: auto; /* conserve le ratio, pas de recadrage */
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: #fff;
}

/* Bandeau CTA */
.band {
  background: radial-gradient(1200px 800px at 20% 0%, rgba(47,177,114,.12), transparent), linear-gradient(135deg, #2fb172 0%, #2a9b63 100%);
  color:#fff; border-radius: 1.25rem; padding: clamp(1.2rem, 3vw, 2rem);
  display:flex; align-items:center; justify-content: space-between; gap:1rem; flex-wrap:wrap;
}
.band h3 { margin:0; font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
.band .actions { display:flex; gap:.6rem; }

@media (max-width: 1000px) {
  .features { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}