/* Pages de guide (référencement) : même charte « Pelouse & Craie » que la vitrine (site/index.html), en version lecture. */
@font-face{font-family:"Big Shoulders Display";font-weight:700 900;font-display:swap;src:url(./fonts/big-shoulders-display-latin-var.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:400 800;font-stretch:62% 125%;font-display:swap;src:url(./fonts/archivo-latin-var.woff2) format("woff2")}
:root{
  color-scheme:dark;
  --bg:#0c2119;--surface:#123023;--ink:#eef3ea;--muted:#a9bdaf;--line:rgba(238,243,234,.12);--line-strong:rgba(238,243,234,.24);
  --stripe:rgba(238,243,234,.025);--glass:rgba(18,48,35,.72);
  --accent:#ff7a2f;--accent-ink:#1b1206;--accent-text:#ff9a5c;--accent-soft:rgba(255,122,47,.14);
  --shadow:0 24px 60px rgba(0,0,0,.4);
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --ui:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:light){:root{
  color-scheme:light;
  --bg:#f4f7f2;--surface:#fff;--ink:#0f2a1e;--muted:#4c6656;--line:rgba(15,42,30,.12);--line-strong:rgba(15,42,30,.24);
  --stripe:rgba(15,42,30,.03);--glass:rgba(255,255,255,.78);--accent-text:#b9480a;--shadow:0 24px 60px rgba(15,42,30,.18);
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.top{position:sticky;top:12px;z-index:10;padding:0 12px}
.top-in{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:8px 8px 8px 16px;border:1px solid var(--line);border-radius:22px;background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
.brand{display:flex;align-items:center;gap:10px;font:900 24px/1 var(--display);text-transform:uppercase;text-decoration:none}
.brand b{color:var(--accent);font-weight:inherit}
.brand img{width:32px;height:32px;border-radius:22.5%}
.top .btn{margin-left:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:16px;font:800 17px var(--ui);text-decoration:none;background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 30px rgba(255,122,47,.28)}
.btn.small{min-height:44px;padding:0 18px;font-size:15px;border-radius:14px}
.crumbs{font:600 14px var(--ui);color:var(--muted);margin:40px 0 18px}
.crumbs a{color:var(--muted)}
.guide{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start;padding-bottom:64px}
.guide article{min-width:0;max-width:66ch}
h1{font:900 clamp(44px,8vw,84px)/.9 var(--display);text-transform:uppercase;margin:0 0 22px;text-wrap:balance}
h1 em{font-style:normal;color:var(--accent)}
h2{font:900 clamp(30px,4.4vw,42px)/.95 var(--display);text-transform:uppercase;margin:44px 0 14px;text-wrap:balance}
.lead{font-size:21px;color:var(--muted);margin:0 0 8px}
article p,article li{color:var(--ink)}
article ul,article ol{padding-left:1.2em;display:grid;gap:6px}
article li::marker{color:var(--accent)}
article strong{font-weight:700}
.facts{border-collapse:collapse;width:100%;font:15px var(--ui);margin:16px 0}
.facts th,.facts td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.facts th{color:var(--muted);font-weight:600}
.tablewrap{overflow-x:auto}
.phone{position:sticky;top:96px;border-radius:44px;padding:10px;background:#050d09;box-shadow:var(--shadow),inset 0 0 0 2px rgba(255,255,255,.08)}
.phone img{border-radius:34px;width:100%;height:auto;aspect-ratio:644/1400;object-fit:cover}
.cta{margin-top:48px;padding:28px;border:1px solid var(--line-strong);border-radius:24px;background:var(--surface);display:grid;gap:14px;justify-items:start}
.cta p{margin:0;color:var(--muted)}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font:700 18px var(--ui)}
.faq details p{margin:10px 0 0;color:var(--muted)}
.more{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.more a{font:600 15px var(--ui);text-decoration:none;padding:10px 14px;border:1px solid var(--line-strong);border-radius:12px;min-height:44px;display:inline-flex;align-items:center}
footer{border-top:1px solid var(--line);padding:40px 0 56px;color:var(--muted);font-size:15px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:12px}
@media (max-width:860px){.guide{grid-template-columns:1fr;gap:32px}.phone{position:static;max-width:280px;margin:0 auto}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}