/*
 * abonnement-pilier.css — squelette structurel de la page Abonnement.
 * Mêmes classes que le système éditorial de l'encyclopédie (.hero, .layout,
 * .card, .infobox, .faq, .sb…) pour hériter automatiquement de l'habillage
 * de modele-design-codex.css, chargé juste après ce fichier.
 */
:root{--sand:#f4ead8;--paper:#fffaf1;--ink:#162119;--muted:#6f675b;--accent:#7b5054;--accent-dark:#59383c;--line:#dbc9aa;--max:1180px;--serif:'Playfair Display',Georgia,serif;--sans:'Inter',Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--sand);color:var(--ink);font-family:var(--sans);line-height:1.82}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.hero{position:relative;overflow:hidden;background:#071f17}
.hc{position:static;max-width:var(--max);margin:auto;padding:3.8rem 2rem}
.cat{display:inline-flex;background:var(--accent);color:#fff;font-size:.68rem;font-weight:950;padding:.34rem .9rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1rem;border-radius:999px}
h1{font-family:var(--serif);font-size:clamp(2rem,4.35vw,4rem);line-height:1.06;color:var(--ink);max-width:1040px;letter-spacing:-.035em}
h1 em{font-style:italic}
.sub{max-width:880px;margin-top:1rem;color:var(--muted);font-size:1.03rem;line-height:1.75}
.meta{background:var(--paper);border-bottom:1px solid var(--line);padding:.75rem 1.5rem}
.meta div{max-width:var(--max);margin:auto;display:flex;flex-wrap:wrap;gap:1rem;color:var(--muted);font-size:.72rem}
.layout{max-width:var(--max);margin:auto;padding:3.2rem 1.5rem;display:grid;grid-template-columns:minmax(0,1fr) 306px;gap:4rem}
@media(max-width:960px){.layout{grid-template-columns:1fr}.side{position:static!important}}
.chips{background:#e6eee6;border:1px solid #c8d5c8;border-left:5px solid var(--accent);padding:.84rem 1rem;margin-bottom:2.2rem;display:flex;gap:.45rem;flex-wrap:wrap}
.chips b{font-size:.62rem;color:var(--accent-dark);letter-spacing:.12em;text-transform:uppercase}
.chips span{background:#fff;border:1px solid #c8d5c8;color:var(--muted);border-radius:999px;padding:.22rem .72rem;font-size:.65rem}
.body p{font-family:Georgia,var(--serif);font-size:1.15rem;line-height:1.98;margin-bottom:1.65rem}
.kicker{margin-top:3rem;color:var(--accent);font-size:.62rem;font-weight:950;letter-spacing:.15em;text-transform:uppercase;display:flex;gap:.7rem;align-items:center}
.kicker:after{content:'';height:1px;background:var(--line);flex:1}
h2{font-family:var(--serif);font-size:clamp(1.4rem,2.5vw,1.98rem);line-height:1.18;margin:.45rem 0 1rem}
.infobox{background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--accent);padding:1.2rem;margin:2.2rem 0;border-radius:16px}
.infobox h3{font-family:var(--serif);font-size:1.12rem;margin-bottom:.6rem}
.infobox ul{list-style:none}
.infobox li{border-top:1px solid var(--line);padding:.48rem 0;font-size:.88rem;color:var(--muted)}

/* Cartes de formules d'abonnement — extension de .card pour prix + CTA */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin:2.2rem 0}
@media(max-width:760px){.cards{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--accent);padding:1.5rem 1.4rem;border-radius:16px;transition:.2s}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(47,32,8,.11)}
.card.card--premium{border-top-color:var(--accent-dark);box-shadow:0 10px 30px rgba(89,56,60,.14)}
.card__badge{display:inline-block;margin-bottom:.6rem;padding:.2rem .65rem;border-radius:999px;background:var(--accent-dark);color:#fff;font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.card h3{font-family:var(--serif);font-size:1.3rem;margin-bottom:.35rem}
.card .price{font-family:var(--serif);font-size:2.1rem;color:var(--accent-dark);margin:.4rem 0 1rem}
.card .price small{font-family:var(--sans);font-size:.85rem;font-weight:400;color:var(--muted)}
.card ul{list-style:none;margin:0 0 1.5rem}
.card li{padding:.5rem 0;border-top:1px solid var(--line);font-family:var(--sans);font-size:.88rem;color:var(--muted);display:flex;gap:.5rem}
.card li:before{content:'—';color:var(--accent)}
.btn-plan{display:block;width:100%;padding:.85rem 1rem;border:0;border-radius:0;background:var(--accent-dark);color:#fff;font-family:var(--sans);font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-align:center;cursor:pointer;transition:.2s}
.btn-plan:hover{background:var(--accent)}

.verdict,.nextbox,.related,.faq{margin:2.8rem 0;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.vt,.boxt,.faqt{background:var(--accent-dark);color:#fff;padding:.78rem 1.25rem;text-transform:uppercase;letter-spacing:.07em;font-size:.75rem;font-weight:950}
.vc,.boxc{padding:1.35rem 1.6rem}
.vc p,.boxc p{font-family:var(--sans);font-size:1rem;line-height:1.75;color:#3f392f;margin-bottom:.65rem}
.fqi{padding:1rem 1.25rem;border-bottom:1px solid var(--line)}
.fqi:last-child{border:0}
.fqq{font-family:var(--serif);font-weight:900}
.fqa{font-size:.9rem;color:var(--muted);line-height:1.7}
.side{position:sticky;top:1.5rem}
.sb{background:var(--paper);border:1px solid var(--line);margin-bottom:1.5rem;border-radius:16px;overflow:hidden}
.st{background:#e6eee6;border-bottom:3px solid var(--accent);padding:.68rem 1rem;font-size:.68rem;font-weight:950;text-transform:uppercase}
.toc{list-style:none}
.toc a{display:flex;gap:.55rem;padding:.67rem 1rem;border-bottom:1px solid var(--line);font-size:.84rem;color:#37332e}
.toc a:last-child{border:0}
.toc span{color:var(--accent);font-weight:950}
.note{padding:1rem;font-size:.86rem;line-height:1.7;color:var(--muted)}
footer{background:#061711;color:#c7b99b;text-align:center;padding:2rem;font-size:.8rem}
footer a{color:#e5bb68}