/* Feuille de style partagée des pages de contenu SEO — charte ONN-OFF */
:root{
  --cream:#F6F1E8; --gold:#8C6A2E; --gold-d:#6F521F;
  --ink:#211C13; --muted:#6F6553; --panel:#EFEADD; --line:#E4DCCB;
  --maxw:760px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:'Hanken Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
a{color:var(--gold-d)}
h1,h2,h3{font-family:Georgia,'Newsreader','Spectral',serif; line-height:1.18; letter-spacing:-.01em; color:var(--ink); text-wrap:balance; margin:0}
h1{font-size:clamp(30px,5vw,44px); font-weight:700}
h2{font-size:clamp(23px,3.4vw,30px); font-weight:700; margin-top:44px}
h3{font-size:19px; margin-top:26px}
p{margin:16px 0}
.eyebrow{font-family:'Hanken Grotesk',sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:800; color:var(--gold)}

/* header / footer */
.site-header{border-bottom:1px solid var(--line); background:rgba(246,241,232,.9); backdrop-filter:blur(8px); position:sticky; top:0; z-index:10}
.site-header .row{display:flex; align-items:center; justify-content:space-between; height:60px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em; font-size:19px; text-decoration:none; color:var(--ink)}
.logo .sw{width:38px;height:22px;border-radius:999px;background:var(--gold);position:relative;flex:none}
.logo .sw::after{content:"";position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:var(--cream)}
.logo b{color:var(--ink)} .logo i{font-style:normal;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:15px;padding:11px 20px;border-radius:10px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .12s,background .12s}
.btn-primary{background:var(--gold);color:#fff}
.btn-primary:hover{background:var(--gold-d);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--gold)}
.site-header .btn{padding:8px 15px;font-size:14px}

/* article */
main{padding:38px 0 10px}
.lede{font-size:19px;color:var(--muted)}
.crumb{font-size:13px;color:var(--muted);margin-bottom:14px}
.crumb a{color:var(--muted);text-decoration:none} .crumb a:hover{color:var(--gold)}
ul.check{list-style:none;padding:0;margin:18px 0;display:grid;gap:11px}
ul.check li{display:flex;gap:11px;align-items:flex-start}
ul.check li::before{content:"✓";color:var(--gold);font-weight:800;flex:none}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;margin:28px 0}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{font-weight:700;cursor:pointer;list-style:none;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--gold);font-weight:800;margin-right:10px}
.faq details[open] summary::before{content:"–"}
.cta-band{background:var(--ink);color:var(--cream);border-radius:20px;padding:40px;text-align:center;margin:44px 0}
.cta-band h2{color:#fff;margin-top:0}
.cta-band p{color:#D8CDB8;max-width:44ch;margin:12px auto 0}
.cta-band .btns{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.cta-band .btn-ghost{color:var(--cream);border-color:rgba(246,241,232,.35)}
.cta-band .btn-ghost:hover{border-color:var(--cream)}
footer{border-top:1px solid var(--line);margin-top:40px;padding:30px 0 50px;color:var(--muted);font-size:14px}
footer .row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--muted);text-decoration:none;margin-left:16px}
footer a:hover{color:var(--gold)}
@media(max-width:560px){ footer .row{flex-direction:column} footer a{margin:0 16px 0 0} .cta-band,.panel{padding:24px} }