/* plaquette.net — feuille unique. Aucune webfont (100/100 PageSpeed). */
:root{
  --bg:#f6f5f2;--paper:#fff;--ink:#1b1d21;--graphite:#4a4e56;--line:#d9d7d1;
  --stop:#c8102e;--stop-d:#9d0c24;--ok:#2e7d4f;--warn:#b7791f;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --w:76rem;--r:4px;
}
.s-parement{--stop:#7a5c3e;--stop-d:#5c4530}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--sans)}
.wrap{max-width:var(--w);margin:0 auto;padding:0 1.25rem}
a{color:var(--stop-d);text-underline-offset:.15em}
a:hover{color:var(--stop)}
:focus-visible{outline:3px solid var(--stop);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.5rem 1rem;z-index:99}
.skip:focus{left:1rem}
img,svg{max-width:100%;height:auto}

/* ---------- header ---------- */
.top{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.top__in{display:flex;align-items:center;justify-content:space-between;min-height:3.75rem;gap:1rem;flex-wrap:wrap}
.logo{font:800 1.35rem/1 var(--sans);letter-spacing:-.04em;color:var(--ink);text-decoration:none}
.logo span{color:var(--stop)}
.nav{display:flex;gap:1.5rem;flex-wrap:wrap}
.nav a{color:var(--graphite);text-decoration:none;font-weight:600;font-size:.9375rem;padding:.35rem 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink);border-color:var(--stop)}
.nav-t{position:absolute;opacity:0;pointer-events:none}
.nav-b{display:none;width:2.5rem;height:2.5rem;cursor:pointer;position:relative}
.nav-b span,.nav-b span::before,.nav-b span::after{content:"";position:absolute;left:.5rem;width:1.5rem;height:2px;background:var(--ink);top:50%}
.nav-b span::before{top:-7px}.nav-b span::after{top:7px}
@media(max-width:52rem){
  .nav-b{display:block}
  .nav{display:none;width:100%;flex-direction:column;gap:0;padding-bottom:.75rem}
  .nav a{padding:.65rem 0;border-bottom:1px solid var(--line)}
  .nav-t:checked~.nav{display:flex}
}

/* ---------- typographie ---------- */
main{padding:1.5rem 1.25rem 4rem}
h1{font-size:clamp(1.9rem,4.5vw,2.9rem);line-height:1.08;letter-spacing:-.03em;font-weight:800;margin:.25rem 0 1rem;max-width:44ch}
h2{font-size:clamp(1.35rem,2.6vw,1.75rem);letter-spacing:-.02em;line-height:1.2;margin:2.5rem 0 .75rem;font-weight:800}
h3{font-size:1.15rem;margin:1.5rem 0 .5rem;font-weight:700}
p,ul,ol{max-width:70ch}
li{margin:.25rem 0}
.lead{font-size:1.2rem;color:var(--graphite);max-width:62ch;margin-bottom:1.5rem}
.crumb{font-size:.85rem;color:var(--graphite);margin-bottom:.5rem}
.crumb a{color:var(--graphite)}
.eyebrow{font:600 .75rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--stop);margin:0 0 .5rem}
small,.muted{color:var(--graphite)}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
code{font:.9em var(--mono);background:#ecebe6;padding:.1em .35em;border-radius:var(--r)}

/* ---------- signature : fiche technique + jauge d'usure ---------- */
.fiche{background:var(--paper);border:1px solid var(--ink);border-radius:var(--r);padding:1rem 1.25rem;margin:1.5rem 0;font-family:var(--mono);font-size:.9rem;max-width:44rem;position:relative}
.fiche::before{content:"FICHE";position:absolute;top:-.6em;left:1rem;background:var(--paper);padding:0 .4em;font-size:.7rem;letter-spacing:.15em;color:var(--stop)}
.fiche dl{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.25rem;margin:0}
.fiche dt{color:var(--graphite)}
.fiche dd{margin:0;font-weight:600}
@media(max-width:36rem){.fiche dl{grid-template-columns:1fr;gap:.1rem}.fiche dt{margin-top:.5rem}}
.gauge{margin:1.5rem 0;max-width:44rem;font-family:var(--mono);font-size:.8rem}
.gauge__bar{display:flex;height:2.25rem;border:1px solid var(--ink);border-radius:var(--r);overflow:hidden}
.gauge__bar div{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600}
.g-ok{background:var(--ok);flex:7}.g-warn{background:#996410;flex:3}.g-stop{background:var(--stop);flex:2}
.gauge__lbl{display:flex;justify-content:space-between;margin-top:.35rem;color:var(--graphite)}

/* ---------- blocs ---------- */
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));margin:1.25rem 0}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;text-decoration:none;color:var(--ink);display:block;transition:border-color .15s}
.card:hover{border-color:var(--stop);color:var(--ink)}
.card b{display:block;font-size:1.05rem;margin-bottom:.25rem}
.card span{color:var(--graphite);font-size:.92rem}
.card--hero{border-left:5px solid var(--stop)}
.hero{display:grid;gap:1.5rem;grid-template-columns:1fr;align-items:start;padding:1rem 0 .5rem}
@media(min-width:60rem){.hero{grid-template-columns:1.2fr 1fr}}
table{border-collapse:collapse;width:100%;max-width:56rem;margin:1rem 0;font-size:.95rem;background:var(--paper)}
th,td{border:1px solid var(--line);padding:.55rem .7rem;text-align:left;vertical-align:top}
th{background:#ecebe6;font-weight:700}
.tbl{overflow-x:auto}
.num{font-family:var(--mono);white-space:nowrap}
.note{border-left:4px solid var(--warn);background:#fbf5e8;padding:.75rem 1rem;margin:1.25rem 0;max-width:70ch;border-radius:0 var(--r) var(--r) 0}
.danger{border-left-color:var(--stop);background:#fbeaed}
details{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:.6rem 1rem;margin:.5rem 0;max-width:70ch}
summary{font-weight:700;cursor:pointer}
details p{margin:.6rem 0 .2rem}

/* ---------- produits / CTA Amazon ---------- */
.prod{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));margin:1.25rem 0}
.prod article{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem}
.prod h3{margin:0;font-size:1.05rem}
.prod p{margin:0;font-size:.93rem;color:var(--graphite);flex:1}
.prod .tag{font:600 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--stop)}
.btn{display:inline-block;margin:.25rem .35rem .25rem 0;background:var(--stop);color:#fff;text-decoration:none;font-weight:700;padding:.65rem 1.1rem;border-radius:var(--r);border:0;transition:background .15s}
.btn:hover{background:var(--stop-d);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.cta{background:var(--ink);color:#fff;border-radius:var(--r);padding:1.5rem;margin:2.5rem 0;max-width:56rem}
.cta p{color:#d4d6da}
.cta a.btn{background:#fff;color:var(--ink)}
.cta a.btn:hover{background:var(--bg)}

/* ---------- listes de pages ---------- */
.links{columns:2;column-gap:2rem;padding:0;list-style:none;max-width:none}
.links li{break-inside:avoid;padding:.3rem 0;border-bottom:1px solid var(--line)}
.links a{text-decoration:none}
.links a:hover{text-decoration:underline}
@media(min-width:60rem){.links{columns:3}}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:var(--paper);padding:2rem 0;font-size:.875rem;color:var(--graphite)}
.foot__nav{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;margin:1rem 0}
.foot__nav a{color:var(--graphite)}
.foot__aff{max-width:80ch}