/* Metalary — pages de référencement (outils, fiches, métiers, listes). S’ajoute à base.css de l’accueil (mêmes polices,
   couleurs, en-tête et pied). Règles de l’app : rayons 8 à 10 px, citron seulement sur vert forêt, texte contrasté.
   Fond des dessins = couleur __BG__ du relevé (meta.json → svgColors) : #F5F6F3 en clair, #0F2219 en sombre. */
:root{--plan-bg:#f5f6f3;--plan-grid:rgba(23,53,38,.07);--r:10px;--r-s:8px}
[data-theme=dark]{--plan-bg:#0f2219;--plan-grid:rgba(143,176,158,.08)}
.mt-tuyauterie{--c:var(--tuy);--ct:var(--tuy-t)}
.mt-soudure{--c:var(--soud);--ct:var(--soud-t)}
.mt-chaudronnerie{--c:var(--chaud);--ct:var(--chaud-t)}
.mt-atelier{--c:var(--atel);--ct:var(--atel-t)}
.mt-usinage{--c:var(--usi);--ct:var(--usi-t)}
.m-tuyauterie{--c:var(--tuy)}.m-soudure{--c:var(--soud)}.m-chaudronnerie{--c:var(--chaud)}.m-atelier{--c:var(--atel)}.m-usinage{--c:var(--usi)}
[data-theme=dark] .m-tuyauterie{--c:var(--tuy-t)}[data-theme=dark] .m-chaudronnerie{--c:var(--chaud-t)}[data-theme=dark] .m-atelier{--c:var(--atel-t)}[data-theme=dark] .m-usinage{--c:var(--usi-t)}
[data-theme=dark] .mt-tuyauterie,[data-theme=dark] .mt-chaudronnerie,[data-theme=dark] .mt-atelier,[data-theme=dark] .mt-usinage{--c:var(--ct)}

/* en-tête : toujours sur fond (pas de hero dessous) */
.hdr{background:var(--hdr-bg);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 var(--line)}
.nav a[aria-current=page]{color:var(--ink)}
.sheet{border-radius:var(--r)}
.sheet a{border-radius:var(--r-s)}
.sheet .sheet-sep{height:1px;background:var(--line);margin:6px 8px}
@media (max-width:1240px){.nav .nav-m{display:none}}

/* page */
.seo-main{padding:calc(var(--hdr) + 22px) 0 clamp(56px,7vw,96px);font-size:17px;line-height:1.6}
.seo-wrap{width:min(1080px,calc(100% - 48px));margin-inline:auto}
.prose{max-width:760px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:2px 0;font-size:14px;color:var(--muted);font-weight:500}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"›";margin:0 9px;color:var(--dim)}
.crumbs a{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px;padding:6px 0}
.crumbs a:hover{color:var(--ink);text-decoration-color:currentColor}
.crumbs [aria-current]{color:var(--ink)}
.seo-main h1{font-weight:700;font-size:clamp(32px,4.4vw,52px);line-height:1.08;letter-spacing:-.035em;margin:18px 0 0;max-width:22ch;text-wrap:balance}
.seo-main h2{font-weight:700;font-size:clamp(24px,2.4vw,30px);line-height:1.15;letter-spacing:-.025em;margin:0 0 16px}
.seo-main h3{font-weight:600;font-size:18px;line-height:1.3;letter-spacing:-.01em;margin:0 0 8px}
.seo-main p+p{margin-top:12px}
.seo-main section{margin-top:clamp(40px,5vw,64px)}
.seo-main a.lnk,.prose a,.sources a,.meta a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.seo-main a.lnk:hover,.prose a:hover,.sources a:hover,.meta a:hover{text-decoration-thickness:2px}
.kicker{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-weight:600;font-size:15px;color:var(--ct,var(--muted))}
.kicker::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c,var(--dim))}
.kicker+h1{margin-top:8px}
.lead{margin-top:18px;max-width:760px;font-size:clamp(17px,1.4vw,19px);color:var(--muted)}
.enbref{margin-top:22px;max-width:760px;padding:18px 20px;border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.enbref h2{font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.enbref p{font-size:18px;line-height:1.55;color:var(--ink)}

/* exemple statique (point de montage du calculateur) */
.calc{margin-top:28px;padding:clamp(16px,2.4vw,24px);border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.calc-note{font-size:14px;color:var(--muted);margin-bottom:14px}
.calc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px}
.calc-side{display:grid;gap:18px;align-content:start;min-width:0}
.calc-grid>.panel{align-self:start}
.panel{padding:16px 18px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.panel h3{font-size:14px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.kv>div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-top:1px solid var(--line)}
.kv>div:first-child{border-top:0}
.kv dt{color:var(--muted);font-size:15.5px}
.kv dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.kv dd small{display:block;font-weight:400;font-size:13.5px;color:var(--muted);line-height:1.4;margin-top:2px}
.res>div.is-primary{display:block;margin:2px 0 10px;padding:14px 16px;border-radius:var(--r-s);background:var(--forest);border-top:0}
.res>div.is-primary dt{color:#dfe9e3;font-size:15px}
.res>div.is-primary dd{text-align:left;font-size:clamp(26px,3vw,34px);letter-spacing:-.02em;color:var(--lime);margin-top:2px}
.res>div.is-primary dd small{color:#dfe9e3;font-size:14px;letter-spacing:0}
.res>div.is-primary+div{border-top:0}
[data-theme=dark] .res>div.is-primary{background:var(--deep);box-shadow:inset 0 0 0 1px rgba(200,255,0,.32)}
.res dd.multi{text-align:left}
.warn{margin-top:12px;display:grid;gap:8px}
.warn li{padding:10px 12px;border-radius:var(--r-s);background:var(--surface);box-shadow:inset 3px 0 0 var(--soud);font-size:15px;color:var(--ink)}
.plan{margin:0;padding:12px;border-radius:var(--r);background-color:var(--plan-bg);background-image:linear-gradient(var(--plan-grid) 1px,transparent 1px),linear-gradient(90deg,var(--plan-grid) 1px,transparent 1px);background-size:20px 20px;box-shadow:inset 0 0 0 1px var(--line2)}
.plan svg{width:100%;height:auto;max-height:440px}
.plan figcaption{margin-top:8px;font-size:14px;color:var(--muted)}
.plan.sm svg{max-height:260px}

/* calcul détaillé */
.steps{counter-reset:st;display:grid;gap:12px;max-width:860px}
.steps li{counter-increment:st;position:relative;padding:14px 16px 14px 56px;border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.steps li::before{content:counter(st);position:absolute;left:14px;top:14px;width:28px;height:28px;border-radius:var(--r-s);display:grid;place-items:center;background:var(--forest);color:var(--lime);font-weight:700;font-size:14px}
.steps h3{margin:0 0 4px}
.formula{font-family:var(--mono);font-size:16px;color:var(--ink)}
.appl{font-family:var(--mono);font-size:15px;color:var(--muted);margin-top:2px!important;overflow-wrap:anywhere}
.tbl{margin-top:22px}
.tbl h3{margin-bottom:10px}
.tbl-wrap{overflow-x:auto;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);background:var(--card)}
.tbl table{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:9px 12px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.tbl thead th{border-top:0;background:var(--surface);font-weight:600;color:var(--ink);white-space:nowrap}
.tbl td.n{text-align:right;white-space:nowrap}
.tbl td small{display:block;color:var(--muted);font-size:13px}
.tbl .note{margin-top:8px;font-size:14.5px;color:var(--muted);max-width:760px}
.figs{display:grid;gap:18px;margin-top:22px}
.worked>.panel,.worked>.warn{margin-top:4px;max-width:860px}
.worked .det-h{margin:26px 0 12px;font-size:20px}
.calc-note{max-width:760px}

/* comment faire, FAQ, limites, sources */
.usage{counter-reset:us;display:grid;gap:10px;max-width:760px}
.usage li{counter-increment:us;display:flex;gap:12px}
.usage li::before{content:counter(us);flex:none;width:28px;height:28px;border-radius:var(--r-s);display:grid;place-items:center;background:var(--surface2);color:var(--ink);font-weight:700;font-size:14px;margin-top:1px}
.seo-main .faq-list{margin-top:0;max-width:860px;gap:10px}
.seo-main .qa{border-radius:var(--r)}
.seo-main .qa summary{font-size:17px;padding:16px 18px}
.seo-main .qa-a{padding:0 18px 18px}
.sources{display:grid;gap:10px;max-width:860px}
.sources li{padding-left:16px;position:relative;font-size:15.5px;color:var(--muted)}
.sources li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:2px;background:var(--dim)}
.sources b{color:var(--ink);font-weight:600}
.meta{margin-top:16px!important;font-size:15px;color:var(--muted)}

/* dans l’app */
.inapp{margin-top:clamp(40px,5vw,64px);padding:clamp(20px,3vw,32px);border-radius:var(--r);background:var(--forest);color:#fff}
.inapp h2{color:#fff}
.inapp p{color:#dfe9e3;max-width:680px}
.inapp ul{display:grid;gap:6px;margin:12px 0 0}
.inapp li{display:flex;gap:10px;color:#fff;font-weight:500}
.inapp li::before{content:"";flex:none;width:8px;height:8px;margin-top:.55em;border-radius:2px;background:var(--lime)}
.app-btn{display:inline-flex;align-items:center;min-height:48px;margin-top:18px;padding:12px 20px;border-radius:var(--r-s);background:var(--lime);color:var(--forest);font-weight:700}
.app-btn:hover{background:#d4ff33}
.inapp a:focus-visible{outline-color:var(--lime)}

/* cartes de liens (outils liés, listes, métiers) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.card{display:flex;flex-direction:column;gap:4px;min-height:64px;padding:14px 16px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s,background .2s}
.card:hover{box-shadow:inset 0 0 0 1px var(--line2),0 12px 28px -18px var(--shadow2)}
.card b{font-weight:600;color:var(--ink);font-size:17px;line-height:1.3}
.card span{font-size:15px;color:var(--muted);line-height:1.45}
.card.mt-tuyauterie,.card.mt-soudure,.card.mt-chaudronnerie,.card.mt-atelier,.card.mt-usinage{box-shadow:inset 0 0 0 1px var(--line),inset 3px 0 0 var(--c)}
.rel h3{margin:22px 0 10px}
.grp{margin-top:clamp(36px,4vw,52px)}
.grp-h{display:flex;align-items:center;gap:10px}
.grp-h::before{content:"";width:12px;height:12px;border-radius:3px;background:var(--c)}
.grp-h a{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px}
.grp-h a:hover{text-decoration-color:currentColor}
.metiers{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.metiers a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:var(--r-s);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-weight:600;font-size:15px}
.metiers a::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--c)}
.metiers a:hover{background:var(--surface2)}

/* fiches de référence */
.blk{margin-top:clamp(32px,4vw,48px)}
.blk>p{max-width:760px}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.item{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.item .ico{flex:none;width:84px;padding:6px;border-radius:var(--r-s);background:var(--plan-bg);box-shadow:inset 0 0 0 1px var(--line)}
.item .ico svg{width:100%;height:auto;max-height:64px}
.item .sw{flex:none;width:36px;height:36px}
.item b{display:block;font-weight:600;color:var(--ink)}
.item code,.code-parts code,.designation{font-family:var(--mono);font-weight:600;color:var(--ink)}
.item code{display:inline-block;margin-right:6px;padding:0 6px;border-radius:4px;background:var(--surface2);font-size:14px}
.item p{font-size:15.5px;color:var(--muted);margin-top:2px}
.designation{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px;font-size:clamp(22px,3vw,30px)}
.designation span{padding:4px 10px;border-radius:var(--r-s);background:var(--forest);color:var(--lime)}
.code-parts{counter-reset:cp;display:grid;gap:8px;max-width:760px}
.code-parts li{display:flex;gap:12px;align-items:baseline}
.code-parts code{flex:none;min-width:48px;padding:2px 8px;border-radius:var(--r-s);background:var(--surface2);text-align:center}
.legend{display:grid;gap:6px;margin-top:10px;font-size:15px;color:var(--muted)}
.legend li{display:flex;gap:10px}
.legend b{flex:none;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;background:var(--surface2);color:var(--ink);font-size:13px}

@media (max-width:760px){
  .seo-wrap{width:calc(100% - 32px)}
  .calc-grid{grid-template-columns:1fr}
  .steps li{padding-left:50px}
  .steps li::before{left:12px}
  .items{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
}
@media (min-width:1900px){.seo-wrap{width:min(1160px,calc(100% - 96px))}}