/* Trackary — pages de contenu (guides, pages piliers, comparatifs, outils, pages légales, 404).
   Chargée après base.css (polices, couleurs, boutons, en-tête, FAQ, pied communs avec l’accueil).
   Remplace les anciennes /seo.css et /legal.css. Pages générées par tools/seo/build_pages.py (coquille : tools/seo/shell.py). */

/* ---------- cadre ---------- */
.pg{padding:calc(var(--hdr) + clamp(24px,4vw,48px)) 0 clamp(80px,9vw,120px);background:linear-gradient(180deg,var(--bg2) 0,var(--bg) 520px)}
.pg-in{width:min(1200px,calc(100% - 48px));margin-inline:auto}
.pg-in>*,.article{max-width:760px;margin-inline:auto}
.pg-in>.related,.pg-in>.hub,.pg-in>.cta,.pg-in>.wl-sec{max-width:1040px}

/* ---------- fil d’Ariane, titre ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;margin-bottom:clamp(28px,4vw,44px);font-size:14px;font-weight:500;color:var(--dim)}
.crumbs a{color:var(--muted);transition:color .2s}
.crumbs a:hover{color:var(--ink)}
.crumbs span:not([aria-current]){color:var(--line2)}
.crumbs [aria-current]{color:var(--ink)}
.eyebrow{display:inline-flex;align-items:center;min-height:32px;margin:0 0 20px;padding:5px 14px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:600;color:var(--muted)}
.pg h1{font-weight:700;font-size:clamp(36px,5.2vw,64px);line-height:1.04;letter-spacing:-.045em;text-wrap:balance;margin:0 0 22px}
.byline{margin:-6px 0 26px;font-size:14px;color:var(--dim)}
.byline b{color:var(--ink);font-weight:600}
.byline a{text-decoration:underline;text-underline-offset:3px}
.lead{margin:0 0 34px;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--muted)}

/* ---------- réponse courte, sommaire, encadrés ---------- */
.answer{margin:0 0 30px;padding:22px 24px;border-radius:22px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.answer b{display:block;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.answer p{font-size:18px;line-height:1.6}
.toc{margin:0 0 44px;padding:20px 24px;border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-size:15px}
.toc b{display:block;margin-bottom:10px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.toc ol{list-style:decimal;padding-left:22px;display:grid;gap:6px}
.toc a{color:var(--muted);font-weight:500;transition:color .2s}
.toc a:hover{color:var(--ink)}
.honest{margin:44px 0 0;padding:20px 24px;border-radius:0 18px 18px 0;background:var(--surface);box-shadow:inset 4px 0 0 var(--lime),inset 0 0 0 1px var(--line);font-size:15px;color:var(--muted)}
[data-theme=dark] .honest{box-shadow:inset 4px 0 0 var(--lime),inset 0 0 0 1px var(--line)}
.honest p{margin:0}
.sources{margin:30px 0 0;font-size:14px;color:var(--muted)}
.sources b{color:var(--ink)}
.sources ul{margin:8px 0 0;padding-left:20px}
.sources li+li{margin-top:4px}
.sources a{display:inline-block;padding:3px 0;color:var(--accent);font-weight:600}
.answer-cta{margin:36px 0 0;font-weight:600}
.answer-cta a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ---------- texte ---------- */
.prose{font-size:17px;line-height:1.7}
.prose h2{margin:56px 0 16px;font-weight:700;font-size:clamp(26px,3vw,36px);line-height:1.12;letter-spacing:-.035em;text-wrap:balance;scroll-margin-top:calc(var(--hdr) + 16px)}
.prose h3{margin:30px 0 10px;font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.015em}
.prose h4{margin:22px 0 8px;font-size:17px;font-weight:600}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:22px}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin:7px 0}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--accent);font-weight:600;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px;transition:text-decoration-color .2s}
.prose a:hover{text-decoration-color:var(--accent)}
.prose strong,.prose b{font-weight:600;color:var(--ink)}
.prose .kicker{margin:56px 0 -40px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.prose dl{margin:0}
.prose dt{margin:24px 0 4px;font-weight:600;font-size:18px}
.prose dd{margin:0;padding-bottom:16px;border-bottom:1px solid var(--line)}
.prose table{width:100%;border-collapse:separate;border-spacing:0;margin:20px 0 28px;font-size:15px;line-height:1.5;border-radius:18px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.prose th,.prose td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.prose th{background:var(--surface);font-weight:600;font-size:14px}
.prose tr:last-child td{border-bottom:0}
.prose ol.steps{counter-reset:st;list-style:none;padding:0}
.prose ol.steps li{counter-increment:st;position:relative;margin:0;padding:12px 0 12px 46px;border-bottom:1px solid var(--line)}
.prose ol.steps li::before{content:counter(st);position:absolute;left:0;top:12px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--forest);color:#fff;font-size:13px;font-weight:700}
[data-theme=dark] .prose ol.steps li::before{background:var(--lime);color:var(--forest)}

/* ---------- téléchargements, calculateur ---------- */
.downloads{display:grid;gap:10px;margin:0 0 34px}
.dl-h{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.dl{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:20px;background:var(--forest);color:#fff;transition:transform .35s var(--spring),box-shadow .3s}
.dl:hover{transform:translateY(-3px);box-shadow:0 20px 40px -20px var(--shadow2)}
.dl b{display:block;font-size:16px;line-height:1.3;font-weight:600}
.dl small{display:block;font-size:13px;line-height:1.4;color:#b9cdbf}
.dl-ico{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--lime);color:var(--forest);font-size:11px;font-weight:700;letter-spacing:.04em}
.dl-go{margin-left:auto;font-size:22px;font-weight:700;color:var(--lime)}
[data-theme=dark] .dl{background:var(--surface2);box-shadow:inset 0 0 0 1px var(--line2)}
.calc{display:grid;gap:14px;margin:20px 0 30px;padding:24px;border-radius:24px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line2);scroll-margin-top:calc(var(--hdr) + 16px)}
.calc h3{margin:0;font-size:20px}
.calc label{display:grid;gap:6px;font-size:14px;font-weight:600}
.calc select,.calc input{width:100%;padding:11px 14px;border-radius:14px;border:1px solid var(--line2);background:var(--card);color:var(--ink);font:inherit;font-size:16px}
.calc output{display:block;padding:14px 16px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-size:16px}
.calc output.late{background:#fbe3df;color:#7d1a0f;box-shadow:inset 0 0 0 1px #e2a49a}
.calc output.soon{background:#fff1d6;color:#6b4300;box-shadow:inset 0 0 0 1px #e8c27a}
.calc output.ok{background:#e9f8d4;color:#1f4d12;box-shadow:inset 0 0 0 1px #a9d27f}
.calc-src{margin:0!important;font-size:13px;color:var(--muted)!important}

/* ---------- FAQ, liens, guides ---------- */
.faq,.related,.hub{margin-top:clamp(64px,7vw,96px)}
.faq>h2,.related>h2,.hub>h2{font-weight:700;font-size:clamp(30px,3.6vw,46px);line-height:1.05;letter-spacing:-.04em;text-wrap:balance}
.faq .faq-list{margin-top:26px}
.qa-a p+p{margin-top:10px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:26px}
.card{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:22px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);transition:transform .45s var(--spring),box-shadow .3s,background .3s}
.card:hover{transform:translateY(-4px);background:var(--card);box-shadow:inset 0 0 0 1px var(--line2),0 24px 50px -26px var(--shadow2)}
.card b{font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
.card span{font-size:14px;line-height:1.5;color:var(--muted)}
.hub ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 24px;margin:20px 0 0;padding:0;list-style:none}
.hub a{color:var(--accent);font-weight:600}
.other{margin-top:40px;color:var(--muted)}

/* ---------- bloc final ---------- */
.cta{margin-top:clamp(72px,8vw,110px);padding:clamp(32px,5vw,60px);border-radius:32px;background:var(--forest);color:#fff;text-align:center;box-shadow:0 30px 60px -30px var(--shadow2)}
[data-theme=dark] .cta{background:var(--surface2);box-shadow:inset 0 0 0 1px var(--line2)}
.cta h2{max-width:20ch;margin:0 auto;font-weight:700;font-size:clamp(30px,4vw,52px);line-height:1.04;letter-spacing:-.04em;text-wrap:balance}
.cta p{max-width:600px;margin:16px auto 0;color:#bcd0c2;font-size:17px}
[data-theme=dark] .cta p{color:var(--muted)}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 26px;margin-top:28px}
.cta-alt{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:#e4efe6;border-bottom:2px solid rgba(255,255,255,.25);transition:border-color .2s}
.cta-alt:hover{border-color:var(--lime)}
[data-theme=dark] .cta-alt{color:var(--ink)}
.article .cta{max-width:none}

/* ---------- pages légales (texte inchangé, mise en page seule) ---------- */
.pg-in.legal-doc{max-width:760px;font-size:16px;line-height:1.65}
.legal-doc>*{max-width:none}
.legal-doc h1{margin-bottom:0}
.legal-doc .date{margin:16px 0 40px;font-size:14px;color:var(--dim)}
.legal-doc h2{margin:40px 0 12px;padding-top:28px;border-top:1px solid var(--line);font-weight:700;font-size:clamp(21px,2.2vw,26px);line-height:1.2;letter-spacing:-.025em;scroll-margin-top:calc(var(--hdr) + 16px)}
.legal-doc h3{margin:24px 0 8px;font-size:18px;font-weight:600}
.legal-doc p{margin:0 0 12px}
.legal-doc ul,.legal-doc ol{margin:0 0 14px;padding-left:22px}
.legal-doc ul{list-style:disc}
.legal-doc ol{list-style:decimal}
.legal-doc li{margin:0 0 6px}
.legal-doc main a,.legal-doc a{color:var(--accent);font-weight:600;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.legal-doc .toc{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 10px;padding:16px 20px;font-size:14px}
.legal-doc .toc a{color:var(--muted);font-weight:500;text-decoration:none}
.legal-doc .table{margin:6px 0 18px;overflow-x:auto;border-radius:18px;box-shadow:inset 0 0 0 1px var(--line)}
.legal-doc table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.legal-doc th,.legal-doc td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.legal-doc th{background:var(--surface);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.legal-doc tbody tr:last-child td{border-bottom:0}

/* ---------- 404 ---------- */
.nf{padding:clamp(20px,6vw,80px) 0;text-align:center}
.nf .lead{margin-bottom:30px}
.nf-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.nf-en{margin-top:26px;font-size:14px}
.nf-en a{color:var(--accent);font-weight:600}

/* ---------- petits écrans ---------- */
@media (max-width:760px){
  .pg-in{width:calc(100% - 40px)}
  .prose{font-size:16px}
  .prose h2{margin-top:46px}
  .prose table{display:block;overflow-x:auto}
  .cta{border-radius:26px;text-align:left}
  .cta h2,.cta p{margin-inline:0}
  .cta-actions{justify-content:flex-start}
  .crumbs{font-size:13px}
}
@media (max-width:560px){
  .legal-doc .table{box-shadow:none;border-radius:0;overflow:visible}
  .legal-doc thead{display:none}
  .legal-doc table,.legal-doc tbody,.legal-doc tr,.legal-doc td{display:block}
  .legal-doc tr{margin:0 0 10px;padding:6px 0;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line)}
  .legal-doc td{padding:6px 14px;border:0}
  .legal-doc td::before{content:attr(data-label);display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
}
@media (prefers-reduced-motion:reduce){
  .card,.dl{transition:none}
  .card:hover,.dl:hover{transform:none}
}
/* mode « ouvert depuis l’appli » (?app=1, tools/seo/build_app_pages.py) : ni en-tête ni pied */
.in-app .pg{padding-top:clamp(24px,5vw,48px)}
.nf{min-height:calc(100svh - var(--hdr) - 420px);display:grid;align-content:center}