:root{
  --vert:#14532d; --vert-clair:#e8f1ea; --vert-vif:#166534; --encre:#17211a; --gris:#4b5a50;
  --fond:#fbfaf6; --carte:#ffffff; --trait:#d9dfd8; --alerte:#7a2e0e;
}
@media (prefers-color-scheme:dark){
  :root{--vert:#7bc79a; --vert-clair:#16251c; --vert-vif:#2a7e4e; --encre:#eef2ee; --gris:#aebbb2;
    --fond:#0f1712; --carte:#17211a; --trait:#2b3a30; --alerte:#f0b08f}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--encre);
  font:17px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  padding-bottom:84px}
a{color:var(--vert)}
.wrap{max-width:720px;margin:0 auto;padding:0 18px}
header.top{background:var(--vert-clair);border-bottom:1px solid var(--trait)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;padding-bottom:12px}
.marque{font-weight:800;letter-spacing:.02em;text-decoration:none;color:var(--vert);font-size:1.05rem}
.marque small{display:block;font-weight:500;letter-spacing:0;color:var(--gris);font-size:.78rem}
.tel-haut{white-space:nowrap;font-weight:700;text-decoration:none;color:var(--vert);padding:10px 4px}
h1{font-size:1.75rem;line-height:1.2;margin:.9em 0 .4em}
h2{font-size:1.3rem;line-height:1.25;margin:0 0 .5em}
h3{font-size:1.02rem;margin:0 0 .2em}
section{padding:26px 0;border-top:1px solid var(--trait)}
section:first-of-type{border-top:0}
.hero{padding:6px 0 26px}
.lead{font-size:1.08rem;color:var(--gris);margin:.2em 0 1.1em}
.boutons{display:grid;gap:10px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:12px 18px;border-radius:12px;
  font-weight:800;font-size:1.12rem;text-decoration:none;text-align:center;border:2px solid var(--vert-vif)}
.btn.principal{background:var(--vert-vif);color:#fff}
.btn.second{background:transparent;color:var(--vert)}
.petit{font-size:.88rem;color:var(--gris)}
.cartes{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.cartes li{background:var(--carte);border:1px solid var(--trait);border-radius:12px;padding:12px 14px}
.cartes p{margin:.1em 0 0;color:var(--gris);font-size:.95rem}
.famille{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--vert);margin:16px 0 6px}
ol.etapes{margin:0;padding-left:1.3em}
ol.etapes li{margin:.45em 0}
.garantie{background:var(--vert-clair);border:1px solid var(--trait);border-left:5px solid var(--vert-vif);border-radius:10px;padding:14px 16px}
.garantie p{margin:.4em 0}
.avis{font-size:1.15rem;font-weight:700}
.zones{display:flex;flex-wrap:wrap;gap:8px;margin:.4em 0 0;padding:0;list-style:none}
.zones li{background:var(--carte);border:1px solid var(--trait);border-radius:999px;padding:6px 14px;font-size:.95rem}
details{background:var(--carte);border:1px solid var(--trait);border-radius:10px;padding:0 14px;margin:8px 0}
summary{cursor:pointer;font-weight:700;padding:13px 0;list-style-position:inside}
details p{margin:0 0 14px}
dl.id{margin:0}
dl.id dt{font-weight:700;margin-top:.8em}
dl.id dd{margin:.1em 0 0}
footer{border-top:1px solid var(--trait);padding:22px 0 30px;font-size:.9rem;color:var(--gris)}
footer a{color:var(--gris)}
.barre{position:fixed;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:2fr 1fr;gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--fond);border-top:1px solid var(--trait)}
.barre .btn{min-height:50px;font-size:1.02rem;padding:8px 10px}
:focus-visible{outline:3px solid var(--vert-vif);outline-offset:2px}
@media (min-width:720px){
  body{padding-bottom:0}.barre{display:none}
  .boutons{grid-template-columns:1fr 1fr}
  h1{font-size:2.1rem}
}
@media print{.barre{display:none}body{padding:0}}