/* design.css — couche de design commune (pages d'offre, hubs, articles).
   Appliquée par scripts/design.mjs (lien injecté dans chaque page, idempotent).
   Contrastes AA vérifiés sur --ivory #F4EFE6 / --paper #EDE5D6 : terra #A9461F 5,1:1, clay #735843 5,7:1. */

/* ---------- Titres d'article ---------- */
article{counter-reset:sect}
.fil{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--clay)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 12px;border:1px solid var(--line);
  border-radius:100px;background:rgba(237,229,214,.55)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--terra)}
h1.title{position:relative;font-size:clamp(36px,6.4vw,62px);line-height:1.04;letter-spacing:-.028em;
  margin:6px 0 26px;padding-bottom:26px}
h1.title::after{content:"";position:absolute;left:0;bottom:0;width:84px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--terra) 0 62%,var(--line) 62% 100%)}
.meta{border-bottom:0;padding-bottom:0;margin-bottom:34px}
article h2:not(#sources):not(#questions-frequentes):not(#rubrique-titre):not(#en-resume){
  counter-increment:sect;margin-top:64px;padding-top:26px;border-top:1px solid var(--line);position:relative}
article h2:not(#sources):not(#questions-frequentes):not(#rubrique-titre):not(#en-resume)::before{
  content:counter(sect,decimal-leading-zero);display:block;margin-bottom:12px;
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.14em;color:var(--terra)}
article h2:not(#sources):not(#questions-frequentes):not(#rubrique-titre):not(#en-resume)::after{
  content:"";position:absolute;left:0;top:-2px;width:44px;height:3px;background:var(--terra);border-radius:3px}
article h3{padding-left:16px;border-left:3px solid var(--line)}

/* ---------- Réponse en tête, citation, tableaux ---------- */
.en-bref{position:relative;padding:24px 26px 22px 28px;border-left:0;border-radius:16px;
  background:linear-gradient(135deg,var(--paper),#F1EADB);box-shadow:inset 0 0 0 1px var(--line)}
.en-bref::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 4px 4px 0;background:var(--terra)}
.en-bref .lbl{display:inline-block;margin-bottom:10px;padding:4px 10px;border-radius:100px;background:var(--ink);color:var(--ivory);letter-spacing:.14em}
blockquote{position:relative;margin:36px 0;padding:22px 26px 22px 30px;border-left:0;border-radius:16px;background:var(--paper);font-size:23px;line-height:1.32}
blockquote::before{content:"\201C";position:absolute;right:20px;top:-6px;font-family:"Fraunces",serif;font-size:90px;line-height:1;color:var(--terra);opacity:.35}
@media(min-width:701px){.tbl-scroll{border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);background:rgba(255,255,255,.35)}
  article table th{border-bottom:2px solid var(--terra)}
  article tbody tr:nth-child(even) td{background:rgba(237,229,214,.45)}}

/* ---------- Schémas ---------- */
figure.schema{margin:34px -12px 38px;padding:26px 22px 20px;border-radius:18px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
figure.schema svg{display:block;width:100%;height:auto;max-width:100%}
figure.schema .s-t{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;fill:var(--terra)}
figure.schema .s-h{font-family:"Fraunces",Georgia,serif;font-size:19px;fill:var(--ink)}
figure.schema .s-p{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:14.5px;fill:var(--ink-soft)}
figure.schema .s-n{font-family:var(--mono);font-size:13px;font-weight:500;fill:var(--ivory)}
figure.schema .s-box{fill:var(--ivory);stroke:var(--line);stroke-width:1.5}
figure.schema .s-hot{fill:var(--terra);stroke:var(--terra)}
figure.schema .s-hot-t{fill:var(--ivory)}
figure.schema .s-ink{fill:var(--ink);stroke:var(--ink)}
figure.schema .s-link{stroke:var(--clay);stroke-width:1.6;fill:none}
figure.schema .s-arr{fill:var(--clay)}
figure.schema .sv{display:none}
@media(max-width:700px){figure.schema{margin-left:0;margin-right:0;padding:18px 14px 12px}
  figure.schema .sh{display:none}figure.schema .sv{display:block;margin:0 auto;max-width:420px}}

/* ---------- Pages d'offre ---------- */
.svc-hero{overflow:hidden;background:
  radial-gradient(900px 420px at 92% -10%,rgba(169,70,31,.13),transparent 62%),
  linear-gradient(var(--ivory),var(--ivory))}
.svc-hero::before{content:"";position:absolute;right:-60px;top:-40px;width:520px;height:520px;pointer-events:none;opacity:.55;
  background:repeating-radial-gradient(circle at 50% 50%,transparent 0 34px,rgba(115,88,67,.18) 34px 35px);
  -webkit-mask-image:radial-gradient(circle at 60% 40%,#000 0,transparent 68%);mask-image:radial-gradient(circle at 60% 40%,#000 0,transparent 68%)}
.svc-hero>*{position:relative}
.svc-hero .eyebrow{padding:7px 14px 7px 12px;border:1px solid var(--line);border-radius:100px;background:rgba(237,229,214,.7)}
.svc-hero .eyebrow::before{display:none}
h1.svc-h1{font-size:clamp(38px,6.4vw,76px);line-height:1;letter-spacing:-.03em;max-width:17ch}
.svc-hero .svc-lead{border-left:3px solid var(--terra);padding-left:20px}
.kicker{padding:6px 14px 6px 12px;border:1px solid var(--line);border-radius:100px;width:max-content;max-width:100%;background:rgba(244,239,230,.6)}
.kicker::before{width:8px;height:8px;border-radius:50%;background:var(--terra)}
.section h2{position:relative;padding-bottom:22px}
.section h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--terra) 0 60%,var(--line) 60% 100%)}
.cta-final h2::after,.related h2::after,.faq h2::after{display:none}
.cta-final h2{padding-bottom:0}

.pain-grid{gap:18px}
.pain{border:0;margin:0;padding:30px 28px 32px;border-radius:18px;background:var(--paper);position:relative;
  box-shadow:inset 0 0 0 1px var(--line);transition:transform .3s,box-shadow .3s}
.pain::before{content:"";position:absolute;left:28px;top:0;width:44px;height:4px;border-radius:0 0 4px 4px;background:var(--terra)}
.pain:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--clay),0 14px 30px -18px rgba(27,23,20,.35)}
.pain .no{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:50%;
  background:var(--ink);color:var(--ivory);font-size:13px}
.pain:last-child{margin:0}

.promise ul{gap:14px}
.promise li{padding:18px 20px 18px 50px;border-radius:14px;background:rgba(244,239,230,.75);box-shadow:inset 0 0 0 1px var(--line)}
.promise li::before{left:20px;top:19px;font-size:15px}

.deliv-grid{border:0;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
.deliv-card{border:0;padding:30px 28px 32px;border-radius:18px;background:var(--paper);position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line);transition:transform .3s,box-shadow .3s}
.deliv-card::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle,rgba(169,70,31,.16),transparent 70%)}
.deliv-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--clay),0 14px 30px -18px rgba(27,23,20,.35)}
@media(max-width:900px){.deliv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.deliv-grid{grid-template-columns:1fr}}

.steps{counter-reset:etape;position:relative;gap:18px;grid-template-columns:repeat(auto-fit,minmax(176px,1fr))}
.step{border:0;padding:26px 26px 28px;border-radius:18px;background:var(--ivory);box-shadow:inset 0 0 0 1px var(--line);position:relative}
.step .sn{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border-radius:100px;
  background:var(--terra);color:var(--ivory);font-weight:600}

.proof-grid{border:0;gap:18px}
.proof-item{border:0;padding:26px 28px;border-radius:18px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.engagements li{padding:14px 18px 14px 46px;border-radius:12px;background:var(--paper)}
.engagements li::before{left:18px;top:13px}
.related ul{gap:14px}
.related li{border:0;padding:18px 20px;border-radius:14px;background:var(--ivory);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .25s}
.related li:hover{box-shadow:inset 0 0 0 1px var(--terra)}
.faq details{border:0;padding:20px 24px;margin:0 0 12px;border-radius:16px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.faq details:last-of-type{border-bottom:0}
.faq details[open]{box-shadow:inset 0 0 0 1px var(--terra)}
.cta-final{background:radial-gradient(700px 360px at 85% 0,rgba(255,255,255,.14),transparent 65%),
  radial-gradient(520px 320px at 5% 100%,rgba(0,0,0,.14),transparent 70%),var(--terra)}

@media(prefers-reduced-motion:reduce){.pain,.deliv-card,.related li{transition:none}.pain:hover,.deliv-card:hover{transform:none}}

/* ---------- Hubs : parcours ---------- */
nav.toc[aria-label="Étapes"]{background:transparent;padding:0;border-radius:0}
nav.toc[aria-label="Étapes"] p{margin:0 0 14px;color:var(--terra-deep)}
nav.toc[aria-label="Étapes"] ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;counter-reset:parc}
nav.toc[aria-label="Étapes"] li{counter-increment:parc;position:relative;margin:0}
nav.toc[aria-label="Étapes"] li a{display:block;height:100%;padding:44px 16px 16px;border-radius:14px;background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line);font-family:"Fraunces",serif;font-size:17px;line-height:1.2;text-decoration:none;transition:box-shadow .25s,transform .25s}
nav.toc[aria-label="Étapes"] li a::before{content:counter(parc,decimal-leading-zero);position:absolute;left:16px;top:14px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;color:var(--terra)}
nav.toc[aria-label="Étapes"] li a:hover{box-shadow:inset 0 0 0 1px var(--terra);transform:translateY(-2px)}
ul.guides{list-style:none;padding:0;display:grid;gap:12px;margin:18px 0 24px}
ul.guides li{padding:18px 22px;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:16px;color:var(--ink-soft);line-height:1.5}
ul.guides li a{font-family:"Fraunces",serif;font-size:20px;line-height:1.25;color:var(--ink);text-decoration:none}
ul.guides li:hover{box-shadow:inset 0 0 0 1px var(--terra)}