/* buy-forum-backlinks.com : thème « Thread & Link » (magazine éditorial, inspiration Authority Hacker / NYT-like).
   Papier crème, encre noire, accent rouge brique, serif de titre + sans de lecture, lettrine, colonnes à filets. */
:root{
  --paper:#f6f1e7;--paper2:#efe7d6;--white:#fffdf8;--ink:#161412;--ink2:#3a352f;--muted:#6f675c;--rule:#d9cfbc;
  --red:#b6382a;--red-d:#8f2a1f;--teal:#1f5f5b;--gold:#c99a2e;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;--sans:"Source Sans 3","Helvetica Neue",Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--red-d);text-underline-offset:3px}img{max-width:100%;height:auto;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

.promo{background:var(--ink);color:#f3ead8;font-size:14px;text-align:center;padding:8px 12px;letter-spacing:.02em}
.promo b{font-family:var(--mono);color:#ffd27a}.promo a{color:#ffd27a;margin-left:8px;font-weight:600}

/* masthead façon journal */
.mast{border-bottom:3px double var(--ink);background:var(--paper)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:12px}
.mast .date{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.logo{font-family:var(--serif);font-weight:900;font-size:30px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;line-height:1}
.logo span{color:var(--red)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--red);color:#fff;font-weight:700;text-decoration:none;border-radius:4px;padding:14px 24px;font-size:16.5px;letter-spacing:.01em;box-shadow:0 3px 0 var(--red-d);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--red-d)}
.btn.sm{padding:8px 15px;font-size:14px;box-shadow:0 2px 0 var(--red-d)}.btn.xl{padding:17px 30px;font-size:18px}
.btn.ink{background:var(--ink);box-shadow:0 3px 0 #000}
.section-bar{border-bottom:1px solid var(--rule)}
.section-bar .wrap{display:flex;gap:22px;overflow-x:auto;font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;padding-top:9px;padding-bottom:9px;white-space:nowrap}
.section-bar a{color:var(--ink2);text-decoration:none}.section-bar a.on{color:var(--red);font-weight:700}

/* une */
.front{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:44px;padding:40px 0 34px;border-bottom:1px solid var(--ink)}
.kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:12px}
h1{font-family:var(--serif);font-weight:800;font-size:clamp(34px,5vw,60px);line-height:1.04;letter-spacing:-.015em;margin:0 0 18px}
h1 em{font-style:italic;color:var(--red)}
.dek{font-family:var(--serif);font-size:clamp(19px,2.2vw,23px);line-height:1.45;color:var(--ink2);margin:0 0 18px;font-style:italic}
.byline{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--muted);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:10px 0;margin-bottom:20px}
.byline .av{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#f3ead8;display:grid;place-items:center;font-family:var(--serif);font-weight:700}
.byline a{color:var(--ink);font-weight:700;text-decoration:none}
.front-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.front-cta small{font-size:13.5px;color:var(--muted)}

/* encadré « fiche » à droite */
.card-side{background:var(--white);border:1px solid var(--ink);padding:22px 22px 18px;position:relative}
.card-side:before{content:"";position:absolute;inset:6px -6px -6px 6px;border:1px solid var(--rule);z-index:-1}
.card-side h3{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px;color:var(--muted)}
.price-big{display:flex;align-items:baseline;gap:8px;border-bottom:1px solid var(--rule);padding-bottom:12px;margin-bottom:10px}
.price-big b{font-family:var(--serif);font-size:56px;line-height:1;color:var(--red)}
.price-big span{font-size:15px;color:var(--ink2)}
.facts{list-style:none;margin:0 0 14px;padding:0}
.facts li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dotted var(--rule);font-size:15.5px}
.facts li b{text-align:right}
.card-side .btn{width:100%}
.card-side .note{font-size:12.5px;color:var(--muted);margin-top:10px;text-align:center}

/* chiffres en bandeau */
.figures{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--ink)}
.fig{padding:18px 14px;text-align:center;border-right:1px solid var(--rule)}
.fig:last-child{border-right:0}
.fig b{display:block;font-family:var(--serif);font-size:clamp(26px,3.6vw,38px);line-height:1.05}
.fig span{font-size:13.5px;color:var(--muted)}

/* corps : article + colonne « dans ce numéro » */
.body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;padding:34px 0 10px}
.article{max-width:720px}
.rail{border-left:1px solid var(--rule);padding-left:26px}
.rail .sticky{position:sticky;top:20px}
.rail h4{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px;color:var(--red)}
.rail ol{margin:0 0 22px;padding-left:20px;font-size:15px;line-height:1.45}
.rail li{margin-bottom:9px}.rail li a{color:var(--ink2);text-decoration:none}.rail li a:hover{color:var(--red)}
.rail .box{background:var(--ink);color:#efe6d3;padding:18px;font-size:15px}
.rail .box b{display:block;font-family:var(--serif);font-size:21px;color:#fff;margin-bottom:6px;line-height:1.2}
.rail .box .btn{width:100%;margin-top:12px}

/* vidéo héros façon « une animée » */
.hv{position:relative;width:100%;aspect-ratio:16/9;container-type:inline-size;overflow:hidden;background:var(--ink);margin:0 0 30px;border:1px solid var(--ink)}
.hv:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 28px)}
.hv-sc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:7cqi 8cqi;opacity:0;transition:opacity .5s,transform .6s;transform:translateY(1.5cqi)}
.hv-sc.on{opacity:1;transform:none}
.hv-k{font-family:var(--mono);font-size:1.8cqi;letter-spacing:.14em;text-transform:uppercase;color:#ffd27a;margin-bottom:2cqi;border-bottom:1px solid #ffd27a;padding-bottom:.6cqi}
.hv-t{font-family:var(--serif);font-weight:800;font-size:6.6cqi;line-height:1.04;color:#f6f1e7}
.hv-t em{color:#ff8a73}
.hv-s{margin-top:2cqi;font-family:var(--serif);font-style:italic;font-size:2.7cqi;color:#cfc4ae;max-width:80%}
.hv-n{font-family:var(--serif);font-weight:900;font-size:16cqi;line-height:.95;color:#ff8a73}
.hv-l{margin-top:1.4cqi;font-size:2.8cqi;color:#efe6d3;max-width:80%}
.hv-rows{display:grid;gap:1.6cqi;width:86%}
.hv-row{display:flex;gap:2.2cqi;align-items:center;color:#f6f1e7;font-size:2.6cqi;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:1.2cqi}
.hv-row i{font-style:normal;font-family:var(--serif);font-weight:800;color:#ffd27a;font-size:3.4cqi;min-width:4cqi}
.hv-cta{margin-top:2.8cqi;display:inline-block;background:var(--red);color:#fff;font-weight:700;font-size:2.4cqi;padding:1.5cqi 3.4cqi;text-decoration:none;border-radius:.6cqi}
.hv-bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:#ffd27a}
.hv-replay{position:absolute;right:2cqi;bottom:2cqi;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;cursor:pointer;opacity:0;transition:opacity .3s}
.hv:hover .hv-replay,.hv-replay.show{opacity:.9}
@media (max-width:560px){.hv{aspect-ratio:4/5}.hv-sc{padding:9cqi}.hv-k{font-size:3.2cqi}.hv-t{font-size:10.5cqi}.hv-s{font-size:4.4cqi}.hv-n{font-size:25cqi}.hv-l{font-size:4.8cqi}.hv-row{font-size:4.2cqi}.hv-row i{font-size:5.4cqi;min-width:7cqi}.hv-cta{font-size:4.4cqi;padding:2.6cqi 5cqi}}

/* aperçu IA = « l'essentiel » encadré journal */
.aio{border-top:4px solid var(--ink);border-bottom:1px solid var(--ink);padding:18px 0 16px;margin:0 0 30px}
.aio-h{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:8px}
.aio p.direct{font-family:var(--serif);font-size:21px;line-height:1.45;margin:0 0 12px}
.aio ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 22px}
.aio li{font-size:15.5px;padding-left:18px;position:relative;line-height:1.45}
.aio li:before{content:"■";position:absolute;left:0;top:0;color:var(--red);font-size:10px;line-height:2.2}
.aio .src{margin-top:10px;font-size:12.5px;color:var(--muted);font-style:italic}

/* prose éditoriale */
.prose>p:first-of-type::first-letter,.dropcap::first-letter{font-family:var(--serif);float:left;font-size:4.4em;line-height:.82;padding:6px 10px 0 0;color:var(--red);font-weight:800}
.prose h2{font-family:var(--serif);font-weight:800;font-size:clamp(27px,3.4vw,36px);line-height:1.15;margin:54px 0 14px;padding-top:16px;border-top:1px solid var(--ink)}
.prose h3{font-family:var(--serif);font-size:22px;margin:28px 0 8px}
.prose p{margin:0 0 17px}.prose ul,.prose ol{padding-left:24px;margin:0 0 18px}.prose li{margin-bottom:7px}
.pull{font-family:var(--serif);font-style:italic;font-size:clamp(23px,3vw,29px);line-height:1.3;color:var(--red-d);border-left:4px solid var(--red);padding:4px 0 4px 20px;margin:30px 0}

/* cas pratique = « Le reportage » */
.case{background:var(--white);border:1px solid var(--ink);padding:26px 28px 6px;margin:28px 0}
.case-top{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--ink);padding:3px 9px}
.chip.gold{background:var(--ink);color:#ffd27a;border-color:var(--ink)}
.case>h3{font-family:var(--serif);font-size:26px;line-height:1.2;margin:10px 0 8px}
.cstep{display:grid;grid-template-columns:54px minmax(0,1fr);gap:4px 14px;padding:18px 0;border-top:1px dotted var(--rule)}
.cstep .n{font-family:var(--serif);font-weight:900;font-size:42px;line-height:1;color:var(--red)}
.cstep h4{font-family:var(--serif);font-size:20px;margin:4px 0 6px}
.cstep>div{min-width:0}
.cstep p{margin:0 0 12px}
.shot{margin:10px 0;border:1px solid var(--ink);background:#fff}
.shot figcaption{font-size:13.5px;color:var(--muted);padding:8px 12px;border-top:1px solid var(--rule);font-style:italic}
.brief{background:var(--paper2);border-left:3px solid var(--ink);font-family:var(--mono);font-size:13.5px;line-height:1.65;padding:14px 16px;white-space:pre-wrap;overflow-x:auto;margin:10px 0}
.cost{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));border:1px solid var(--ink);margin:14px 0}
.cost div{padding:12px;text-align:center;border-right:1px solid var(--rule)}
.cost div:last-child{border-right:0}
.cost b{display:block;font-family:var(--serif);font-size:24px}.cost span{font-size:12.5px;color:var(--muted)}
.cost .tot{background:var(--ink);color:#f6f1e7}.cost .tot b{color:#ffd27a}.cost .tot span{color:#cfc4ae}
.tip{background:#fbf4dd;border:1px solid #e7d39a;padding:12px 16px;font-size:16px;margin:12px 0}
.tip b{color:var(--red-d)}

.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0}
.tbl{width:100%;border-collapse:collapse;font-size:15.5px;background:var(--white);border-top:3px solid var(--ink);border-bottom:1px solid var(--ink)}
.tbl th{text-align:left;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:11px 12px;border-bottom:1px solid var(--ink)}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl .hl{background:#fbefe6}.tbl th.hl{color:var(--red)}

.verdict2{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);margin:20px 0;background:var(--white)}
.verdict2>div{padding:18px 20px}
.verdict2>div+div{border-left:1px solid var(--ink)}
.verdict2 h3{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px}
.verdict2 .pro h3{color:var(--teal)}.verdict2 .con h3{color:var(--red)}
.verdict2 ul{list-style:none;padding:0;margin:0}.verdict2 li{padding-left:22px;position:relative;margin-bottom:8px;font-size:16px}
.verdict2 .pro li:before{content:"+";position:absolute;left:0;color:var(--teal);font-weight:800}
.verdict2 .con li:before{content:"−";position:absolute;left:0;color:var(--red);font-weight:800}

.mid-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;border-top:3px solid var(--red);border-bottom:1px solid var(--red);padding:20px 0;margin:36px 0}
.mid-cta b{font-family:var(--serif);font-size:24px;display:block;line-height:1.2}.mid-cta span{color:var(--ink2);font-size:16px}
.code-box{font-family:var(--mono);background:var(--ink);color:#ffd27a;padding:1px 7px;font-weight:600}

.faq{border-top:3px solid var(--ink);margin:16px 0}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--serif);font-weight:700;font-size:19px;padding:16px 34px 16px 0;position:relative;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:12px;font-size:26px;color:var(--red);font-family:var(--sans)}
.faq details[open] summary:after{content:"−"}
.faq details p{margin:0 0 16px;color:var(--ink2)}

.rel{display:grid;grid-template-columns:repeat(3,1fr);border-top:3px solid var(--ink);margin:16px 0}
.rel a{display:block;padding:18px 18px 18px 0;text-decoration:none;color:var(--ink);border-right:1px solid var(--rule)}
.rel a+a{padding-left:18px}.rel a:last-child{border-right:0}
.rel small{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.rel b{display:block;font-family:var(--serif);font-size:20px;line-height:1.25;margin:6px 0}
.rel span{font-size:15px;color:var(--muted)}

.final{background:var(--ink);color:#efe6d3;text-align:center;padding:64px 22px;margin-top:60px}
.final h2{font-family:var(--serif);font-size:clamp(28px,4vw,44px);color:#f6f1e7;margin:0 0 12px;line-height:1.12}
.final p{font-family:var(--serif);font-style:italic;font-size:19px;color:#cfc4ae;max-width:620px;margin:0 auto 24px}
.final .btn{box-shadow:0 3px 0 #000}

.ft{border-top:3px double var(--ink);padding:36px 0 90px;font-size:14.5px;color:var(--muted)}
.ft h4{font-family:var(--serif);font-size:19px;color:var(--ink);margin:0 0 12px}
.kw{columns:3;column-gap:28px;margin-bottom:26px}
.kw a{display:block;color:var(--ink2);text-decoration:none;padding:4px 0;border-bottom:1px dotted var(--rule);break-inside:avoid}
.kw a:hover{color:var(--red)}
.ft .legal{border-top:1px solid var(--rule);padding-top:16px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}
.ft .legal a{color:var(--muted)}

.mbar{display:none}
@media (max-width:900px){
  .front{grid-template-columns:1fr;gap:26px;padding-top:26px}
  .body{grid-template-columns:1fr;gap:0}.rail{display:none}
}
@media (max-width:640px){
  body{font-size:17.5px}
  .mast .date{display:none}.logo{font-size:25px}
  .figures .fig{padding:12px 6px}.fig span{font-size:12px}
  .aio ul,.verdict2,.rel{grid-template-columns:1fr}
  .verdict2>div+div{border-left:0;border-top:1px solid var(--ink)}
  .rel a,.rel a+a{padding:16px 0;border-right:0;border-bottom:1px solid var(--rule)}
  .case{padding:18px 16px 2px}.cstep{grid-template-columns:38px minmax(0,1fr)}.cstep .n{font-size:32px}
  .mid-cta{grid-template-columns:1fr}.mid-cta .btn,.front-cta .btn{width:100%}
  .kw{columns:1}.promo{font-size:13px}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:2px solid var(--ink);gap:10px;align-items:center;transform:translateY(110%);transition:transform .25s}
  .mbar.show{transform:none}.mbar .btn{flex:1;padding:13px 10px;font-size:15.5px}
  .mbar small{font-size:12px;color:var(--ink2);line-height:1.25;max-width:100px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.mid-cta .code-box{color:#ffd27a}
@media (max-width:640px){.promo{font-size:12.5px;padding:7px 8px}.promo .long{display:none}.promo a{margin-left:6px}}
