body{font-family:"Public Sans",system-ui,-apple-system,sans-serif}
.accueil{min-height:100svh;max-width:1040px;margin:0 auto;padding:20px 20px 24px;display:flex;flex-direction:column;gap:32px}
.tete{display:flex;justify-content:space-between;align-items:center}
.marque{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;font-size:20px;color:var(--accent)}
.discret{font-weight:600;font-size:15px;text-decoration:none;min-height:44px;display:inline-grid;place-items:center}
.liens{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}
main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:40px}
.hero{display:grid;gap:28px;align-items:center}
.sur-titre{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:10px}
.hero h1{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:clamp(36px,7vw,58px);line-height:1.04;font-weight:700;letter-spacing:-.015em}
.intro{font-size:18px;color:var(--muted);margin:16px 0 24px;max-width:34em}
.cta{display:inline-grid;place-items:center;min-height:52px;padding:0 24px;border-radius:12px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:17px;text-decoration:none}
.cta:focus-visible,.discret:focus-visible,.pied a:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.serre{width:100%;height:auto;display:block}
.s-corps{fill:var(--accent-soft)}
.s-toit{fill:var(--accent-soft);opacity:.7}
.s-trait path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.s-plante path{fill:none;stroke:var(--ok);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.etapes{display:grid;gap:12px}
.etapes article{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.etapes span{grid-row:span 2;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-weight:700}
.etapes h2{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:19px}
.etapes p{color:var(--muted);font-size:15px;margin-top:2px}
.pied{display:flex;justify-content:space-between;gap:16px;font-size:14px}
.pied a{color:var(--muted);min-height:44px;display:inline-grid;place-items:center}
@media (min-width:760px){
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px}
  .etapes{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
}