:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  /* Thème clair : blanc, noir, or foncé. Textes ≥ 5,6:1, traits ≥ 3:1 */
  --bg:#FFFFFF; --surface:#F2F1EE; --raise:#FFFFFF; --ink:#0A0A0A; --muted:#3D3D3D;
  --gold:#7A5A00; --line:#8A8A8A; --hair:rgba(0,0,0,.12); --amber:#A34700;
  --btn:#0A0A0A; --btn-ink:#FFFFFF; --btn-line:#0A0A0A; --glow:rgba(201,151,58,.18);
  --plate-a:#E4B85A; --plate-b:#B98A2E; --plate-ink:#000000;
  --head:#383E42; --head-ink:#FFFFFF; --head-gold:#EBC15A;
  --display:"Barlow","Segoe UI",system-ui,-apple-system,sans-serif;
  --body:"Barlow","Segoe UI",system-ui,-apple-system,sans-serif;
  --hh:4.75rem;
  --script:"Pinyon Script","Snell Roundhand","Apple Chancery",cursive;
  --roman:"Cinzel","Trajan Pro","Times New Roman",serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#23272A; --surface:#1C1F22; --raise:#383E42; --ink:#FFFFFF; --muted:#C9C9C9;
    --gold:#EBC15A; --line:#8C9398; --hair:rgba(255,255,255,.13); --amber:#FF9F1C;
    --btn:#EBC15A; --btn-ink:#000000; --btn-line:#EBC15A; --glow:rgba(255,159,28,.16);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#23272A; --surface:#1C1F22; --raise:#383E42; --ink:#FFFFFF; --muted:#C9C9C9;
  --gold:#EBC15A; --line:#8C9398; --hair:rgba(255,255,255,.13); --amber:#FF9F1C;
  --btn:#EBC15A; --btn-ink:#000000; --btn-line:#EBC15A; --glow:rgba(255,159,28,.16);
}
@media (prefers-contrast:more){:root{--muted:var(--ink);--hair:var(--line)}}

*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(var(--hh) + env(safe-area-inset-top,0px) + .75rem);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.15rem;line-height:1.6}
img,svg{max-width:100%;display:block}
a{color:var(--gold);text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:2px}
.wrap{width:min(100% - 2.5rem,74rem);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-6rem;z-index:60;background:var(--head-gold);color:#000;padding:.8rem 1.2rem;text-decoration:none;font-weight:600}
.skip:focus{top:1rem}

h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1;margin:0;letter-spacing:.005em}
h2{font-size:clamp(2.6rem,6vw,4.4rem);max-width:18ch}
h3{font-size:1.9rem;font-weight:600}
p{margin:0;max-width:62ch}
.lead{color:var(--muted);margin-top:1rem;font-size:1.2rem}
.block{padding-block:clamp(3.5rem,7vw,6rem)}
.band{background:var(--surface);border-block:1px solid var(--hair)}
/* Liseré « passepoil » or, clin d’œil aux têtes d’ampli */
.piping{position:relative}
.piping::after{content:"";position:absolute;inset:6px;border:1px solid var(--gold);border-radius:inherit;pointer-events:none;opacity:.55}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;font:inherit;font-weight:600;font-size:1.08rem;cursor:pointer;text-decoration:none;padding:.6rem 1.6rem;border:2px solid var(--btn-line);background:var(--btn);color:var(--btn-ink);border-radius:3px}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--btn);color:var(--btn-ink)}

/* En-tête collant : le menu reste toujours accessible */
.head{position:sticky;top:0;z-index:40;background:var(--head);color:var(--head-ink);border-bottom:2px solid var(--head-gold);padding-top:env(safe-area-inset-top,0px)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:41;background:var(--head)}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--hh)}
.brand{text-decoration:none;color:var(--head-gold);line-height:1;white-space:nowrap;display:flex;flex-direction:column;justify-content:center;padding:.35rem 0}
.brand .wm{font-family:var(--roman);font-weight:600;font-size:1.55rem;letter-spacing:.05em;display:flex;align-items:baseline}
.brand .wm-m{font-family:var(--script);font-weight:400;font-size:2.7rem;line-height:.7;letter-spacing:0;margin-right:-.12em;position:relative;top:.06em}
.brand sup{font-family:var(--body);font-size:.55rem;letter-spacing:0;margin-left:.15em;align-self:flex-start;margin-top:.1rem}
.brand .tag{font-family:var(--script);font-size:1.3rem;line-height:1.1;color:#FFFFFF;margin:.1rem 0 0 1.35rem;letter-spacing:.01em}
.brand:hover .tag{color:var(--head-gold)}
.tools{display:flex;gap:.5rem;align-items:center}
.hbtn{display:inline-grid;place-items:center;min-height:2.9rem;min-width:2.9rem;font:inherit;font-size:1rem;font-weight:600;background:transparent;color:#FFFFFF;border:0;border-radius:3px;cursor:pointer;padding:0 .5rem;white-space:nowrap}
.hbtn:hover{color:var(--head-gold)}
#menu-btn .close{display:none}
#menu-btn[aria-expanded="true"] .burger{display:none}
#menu-btn[aria-expanded="true"] .close{display:inline}
#nav{display:flex;align-items:center;gap:.4rem}
#nav ul{display:flex;list-style:none;margin:0;padding:0}
#nav ul a{display:inline-flex;align-items:center;min-height:2.9rem;padding:0 .8rem;color:#FFFFFF;text-decoration:none;font-weight:500;white-space:nowrap;border-bottom:3px solid transparent}
#nav ul a:hover,#nav ul a[aria-current="true"]{color:var(--head-gold);border-bottom-color:var(--head-gold)}
#nav .cta-nav{display:inline-flex;align-items:center;min-height:2.9rem;padding:0 1.2rem;margin-left:.4rem;background:var(--head-gold);color:#000;font-weight:600;text-decoration:none;border-radius:3px;white-space:nowrap}
#nav .cta-nav:hover{background:#FFD36B}
#menu-btn{display:none}
@media (max-width:77rem){
  .tools{margin-left:auto}
  .top{flex-wrap:wrap}
  #menu-btn{display:inline-block}
  #nav{order:3;width:100%;display:none;flex-direction:column;align-items:stretch;padding:.4rem 0 1rem;border-top:1px solid rgba(255,255,255,.14)}
  #nav.open{display:flex}
  #nav ul{flex-direction:column}
  #nav ul a{border-bottom:0;border-left:3px solid transparent;padding-left:.9rem}
  #nav ul a[aria-current="true"]{border-left-color:var(--head-gold)}
  #nav .cta-nav{margin:.6rem 0 0;justify-content:center}
}
@media (max-width:30rem){.brand .wm{font-size:1.25rem}.brand .wm-m{font-size:2.2rem}.brand .tag{font-size:1.08rem;margin-left:1.05rem}.tools{gap:.35rem}}
@media (max-width:24rem){.top{gap:.5rem}.brand .wm{font-size:1.08rem}.brand .wm-m{font-size:1.95rem}.brand .tag{font-size:.95rem;margin-left:.75rem}.hbtn{padding:0 .7rem}}
@media (max-width:20.5rem){.brand .tag{display:none}}

/* Ouverture : la photo se fond dans le noir */
.hero{position:relative;background:#000;color:#FFFFFF}
.hero img{width:100%;height:clamp(15rem,52vw,42rem);object-fit:cover;object-position:center 42%}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:35%;background:linear-gradient(transparent,#000);pointer-events:none}
.intro{background:var(--bg);color:#FFFFFF;padding:clamp(2rem,4vw,3.2rem) 0 clamp(2.8rem,5vw,4rem)}
.intro-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:1.2rem clamp(2rem,6vw,5rem);align-items:end}
.intro h1{font-family:var(--body);font-weight:300;font-size:clamp(2.1rem,4.2vw,3.2rem);line-height:1.12;letter-spacing:-.01em;max-width:14ch;color:#FFFFFF;padding-top:1.2rem;border-top:1px solid #EBC15A}
.intro p{font-size:1.15rem;line-height:1.7;color:#D0D0D0;margin:0;max-width:52ch}
@media (max-width:52rem){.intro-grid{grid-template-columns:1fr}}
.intro .cta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem;margin-top:1.6rem}
.intro .btn{--btn:transparent;--btn-ink:#EBC15A;--btn-line:#EBC15A;font-weight:500;min-height:2.9rem;padding:.5rem 1.3rem;border-width:1px}
.intro .btn:hover{background:#EBC15A;color:#000}
.intro .textlink{color:#FFFFFF;font-weight:500;text-decoration:underline;text-decoration-color:#EBC15A;text-underline-offset:.35em;display:inline-flex;align-items:center;min-height:2.9rem}
.intro .textlink:hover{color:#EBC15A}
.intro .btn.ghost{color:#FFFFFF;border-color:#FFFFFF}
.intro .btn.ghost:hover{background:#FFFFFF;color:#000}
/* La façade dorée : bandeau de repères */
.faceplate{background:linear-gradient(180deg,#F2CB6A,#D7A63E 55%,#C9973A);color:#000;border-block:3px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.faceplate ul{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:0}
.faceplate li{padding:1.1rem 1.2rem;font-weight:500}
.faceplate li+li{border-left:1.5px solid rgba(0,0,0,.55)}
.faceplate b{display:block;font-family:var(--display);font-weight:800;font-size:1.75rem;line-height:1.05;letter-spacing:.02em}
@media (max-width:56rem){.faceplate ul{grid-template-columns:1fr 1fr}.faceplate li:nth-child(3){border-left:0}.faceplate li:nth-child(n+3){border-top:1.5px solid rgba(0,0,0,.55)}}

/* Trouvez le bon câble */
.rig{margin-top:2.4rem;display:grid;gap:1.4rem}
.picks{display:flex;flex-wrap:wrap;gap:.55rem;margin:0;padding:0;list-style:none}
.picks button{font:inherit;font-size:1.02rem;font-weight:600;cursor:pointer;min-height:2.9rem;padding:.4rem 1rem;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:3px}
.picks button:hover{border-color:var(--gold);color:var(--gold)}
.picks button[aria-pressed="true"]{background:var(--btn);border-color:var(--btn-line);color:var(--btn-ink)}
.picks button[aria-pressed="true"]::before{content:"✓ "}
.stage{border-radius:10px;background-color:#1A1D20;background-image:
  radial-gradient(36rem 16rem at 50% 45%,rgba(255,159,28,.14),transparent 70%),
  repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 2px,transparent 2px 6px),
  repeating-linear-gradient(-45deg,rgba(255,255,255,.035) 0 2px,transparent 2px 6px);
  padding:clamp(1rem,3vw,2.2rem);border:2px solid #000;box-shadow:0 20px 50px -25px rgba(0,0,0,.7)}
.stage svg{width:100%;height:auto;margin-inline:auto}
.stage svg.v{max-width:30rem}
.dev .chassis{fill:#121212;stroke:#5A5A5A;stroke-width:1.5}
.dev .g{fill:none;stroke:#EBC15A;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dev .lamp{fill:#FF9F1C}
.dev text{font-family:var(--body);font-size:15px;font-weight:600;fill:#FFFFFF}
.stage svg:not(.v) .dev text{font-size:18px}
.dev.on .chassis{stroke:#EBC15A;stroke-width:2.6}
.cable{fill:none;stroke:#4A4A4A;stroke-width:3.5;stroke-linecap:round}
.cable.on{stroke:#EBC15A;stroke-width:6;filter:drop-shadow(0 0 7px #FF9F1C)}
.pulse{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:round;stroke-dasharray:2 26;animation:flow 1.1s linear infinite}
.hit{fill:none;stroke:transparent;stroke-width:26;cursor:pointer}
@keyframes flow{to{stroke-dashoffset:-28}}
.answer{border:1.5px solid var(--line);border-radius:10px;background:var(--raise);padding:clamp(1.3rem,3vw,2rem);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.4rem 2.5rem}
.kicker{color:var(--muted);font-weight:600}
.answer h3{font-size:2.3rem;color:var(--gold);margin-top:.2rem}
.answer p{margin-top:.7rem}
.answer ul.pts{margin:0;padding-left:1.2rem}
.answer ul.pts li{margin-bottom:.45rem}
.answer .btn{margin-top:1.3rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0;padding:0;list-style:none}
.chips a,.chips span{display:inline-flex;align-items:center;min-height:2.75rem;padding:.2rem .95rem;border:1.5px solid var(--line);border-radius:3px;color:var(--ink);text-decoration:none;font-weight:600;font-size:1rem}
.chips a:hover{border-color:var(--gold);background:var(--gold);color:var(--bg)}
@media (max-width:52rem){.answer{grid-template-columns:1fr}}
.family .ph{display:block;width:calc(100% + 2.8rem);height:auto;max-width:none;margin:-1.4rem -1.4rem 1.2rem;aspect-ratio:4/3;object-fit:cover;background:#000}
.family .ph.fit{object-fit:contain}
.family .ph.swap{animation:phin .25s ease-out}
@keyframes phin{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.family .ph.swap{animation:none}}
.family .fam-intro{color:var(--ink);margin-top:.7rem;font-size:1.05rem}
.alerte{margin-top:.8rem;border-left:4px solid var(--amber);background:var(--surface);padding:.6rem .8rem;font-size:1rem;color:var(--ink)}
.hint-sel{margin-top:1rem;font-size:1rem;color:var(--muted)}
.mchip{font:inherit;font-weight:600;font-size:1rem;cursor:pointer;min-height:2.75rem;padding:.2rem .95rem;border:1.5px solid var(--line);border-radius:3px;background:transparent;color:var(--ink)}
.mchip:hover{border-color:var(--gold);color:var(--gold)}
.mchip[aria-pressed="true"]{background:var(--btn);border-color:var(--btn-line);color:var(--btn-ink)}
.sheet:not(:empty){margin-top:1rem;padding-top:1rem;border-top:2px solid var(--gold)}
.sheet h4{font-family:var(--display);font-weight:700;font-size:1.7rem;line-height:1.05;margin:0;color:var(--gold)}
.sheet h4 span{display:block;font-family:var(--body);font-style:italic;font-weight:400;font-size:1.05rem;line-height:1.35;color:var(--ink);margin-top:.3rem}
.sheet p{margin-top:.6rem;color:var(--ink);font-size:1.05rem}
.specs{margin:.8rem 0 0;border-top:1px solid var(--hair)}
.specs div{display:grid;grid-template-columns:7.5rem 1fr;gap:.6rem;padding:.45rem 0;border-bottom:1px solid var(--hair);font-size:1rem}
.specs dt{font-weight:600;color:var(--gold)}
.specs dd{margin:0}
.sheet .btn{margin-top:1rem}
.coord{margin:1.6rem 0 0}
.coord div{display:grid;grid-template-columns:7rem 1fr;gap:.6rem;padding:.35rem 0}
.coord dt{font-weight:600;color:var(--muted)}
.coord dd{margin:0;overflow-wrap:anywhere;min-width:0}
.final > *{min-width:0}
.coord a{font-weight:600}
@media (min-width:52rem){
  #fam-secteur{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:2.2rem;align-items:start}
  #fam-secteur > *{grid-column:2}
  #fam-secteur > .ph{grid-column:1;grid-row:1 / span 40;align-self:stretch;width:calc(100% + 1.4rem);height:calc(100% + 2.9rem);min-height:17rem;margin:-1.4rem 0 -1.5rem -1.4rem;aspect-ratio:auto}
}
@media (min-width:64.01rem){.family:not(.wide) .ph{aspect-ratio:16/10}}
#fam-barrette .ph{aspect-ratio:2/1}
.ordre{margin-top:1.4rem;padding:1.2rem 1.3rem;border:1.5px solid var(--line);border-radius:6px;background:var(--bg)}
.ordre h5{font-family:var(--display);font-weight:700;font-size:1.5rem;margin:0;line-height:1.1}
.ordre > p{margin-top:.5rem;font-size:1.02rem;color:var(--muted)}
.ordre ol{list-style:none;counter-reset:o;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;position:relative}
.ordre ol::before{content:"";position:absolute;left:1.4rem;right:calc(25% - 1.15rem);top:1.4rem;height:2px;background:var(--gold)}
.ordre li{counter-increment:o;position:relative;display:grid;gap:.25rem;align-content:start}
.ordre .sock{width:2.8rem;height:2.8rem;border-radius:50%;background:var(--btn);border:2px solid var(--btn-line);display:grid;place-items:center;position:relative;margin-bottom:.4rem}
.ordre .sock::after{content:counter(o);font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--btn-ink)}
.ordre li b{font-weight:600;line-height:1.25}
.ordre li span:not(.sock){color:var(--muted);font-size:1rem;line-height:1.4}
.ordre .alerte{margin-top:1.2rem}
@media (max-width:52rem){.ordre ol{grid-template-columns:1fr;gap:.9rem}.ordre ol::before{left:1.35rem;right:auto;top:1.4rem;bottom:1.4rem;width:2px;height:auto}
 .ordre li{grid-template-columns:2.8rem 1fr;column-gap:.9rem}.ordre .sock{grid-row:span 2;margin:0}}
#guide{border-top:1px solid var(--hair);position:relative}
#guide[hidden],#branchement[hidden]{display:none}
#branchement{border-top:1px solid var(--hair);position:relative}
.ordre-sec{border:0;background:none;padding:0;margin-top:2rem}
.ordre-sec > p:first-child{color:var(--muted);margin:0}
.sheet .guide{display:flex;width:fit-content;align-items:center;min-height:2.75rem;margin:.4rem 0 .2rem;font-weight:500}
.gd-close{position:absolute;top:clamp(3.5rem,7vw,6rem);right:0;display:inline-flex;align-items:center;gap:.5rem;min-height:2.9rem;padding:0 1rem;background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--ink);font:inherit;font-weight:500;cursor:pointer}
.gd-close:hover{border-color:var(--gold);color:var(--gold)}
@media (max-width:40rem){.gd-close{position:static;margin-bottom:1.2rem}}
.gd-rules{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem;margin-top:2rem}
.gd-safe{border:2px solid var(--amber);border-radius:6px;padding:1.2rem 1.3rem;background:var(--raise)}
.gd-safe h3{font-size:1.6rem;color:var(--amber)}
.gd-safe p{margin-top:.5rem}
.gd-tips{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.gd-tips li{border-left:4px solid var(--gold);padding:.4rem 0 .4rem 1rem}
.gd-tips b{display:block}
.gd-cases{margin-top:1.8rem;border-top:1.5px solid var(--line)}
.gd-cases details{border-bottom:1.5px solid var(--line)}
.gd-cases summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:2.8rem 1fr auto;gap:1rem;align-items:center;padding:1rem .2rem;min-height:4rem}
.gd-cases summary::-webkit-details-marker{display:none}
.gd-cases summary::after{content:"+";font-family:var(--display);font-weight:700;font-size:2rem;line-height:1;color:var(--gold);width:2rem;text-align:center}
.gd-cases details[open] summary::after{content:"−"}
.gd-cases summary .n{width:2.8rem;height:2.8rem;border-radius:50%;background:var(--btn);color:var(--btn-ink);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.3rem}
.gd-cases summary b{display:block;font-family:var(--display);font-weight:700;font-size:1.6rem;line-height:1.1}
.gd-cases summary small{display:block;color:var(--muted);font-size:1rem;margin-top:.15rem}
.gd-cases summary:hover b{color:var(--gold)}
.gd-body{padding:0 0 1.5rem 3.8rem;display:grid;gap:1rem;max-width:52rem}
.gd-warn{border-left:4px solid var(--amber);background:var(--raise);padding:.75rem .95rem;max-width:none}
.gd-warn b{color:var(--amber)}
.gd-need{margin:0;border:1.5px solid var(--line);border-radius:4px;padding:.3rem 1rem}
.gd-need div{display:grid;grid-template-columns:7.5rem 1fr;gap:.6rem;padding:.45rem 0}
.gd-need div+div{border-top:1px solid var(--hair)}
.gd-need dt{font-weight:600;color:var(--gold)}
.gd-need dd{margin:0}
.gd-steps{margin:0;padding-left:1.4rem;display:grid;gap:.55rem}
.gd-steps li::marker{font-weight:700;color:var(--gold)}
.gd-todo{color:var(--muted);font-style:italic;font-size:1rem}
@media (max-width:52rem){.gd-rules{grid-template-columns:1fr}.gd-body{padding-left:0}.gd-need div{grid-template-columns:1fr;gap:0}}
.sch-fig{margin:.4rem 0 0;padding:1rem;border:1.5px solid var(--line);border-radius:8px;background:var(--bg);max-width:30rem}
.sch{width:100%;height:auto;display:block}
.sch text{font-family:var(--body);font-size:14px;fill:var(--ink)}
.sch .s{font-size:13px}
.sch .b{font-weight:600}
.sch .big{font-size:18px}
.sch .m{fill:var(--muted)}
.sch .gl{fill:var(--gold);font-weight:600}
.sch .dv{fill:var(--raise);stroke:var(--line);stroke-width:1.5}
.sch .plate{fill:var(--bg);stroke:var(--line)}
.sch .pl{fill:var(--bg);stroke:var(--ink);stroke-width:1.6}
.sch .dot{fill:var(--ink)}
.sch .pos{fill:var(--bg);stroke:var(--ink);stroke-width:2}
.sch .gpost{fill:#EBC15A;stroke:#000;stroke-width:1.5}
.sch .plug{fill:#EBC15A;stroke:#000;stroke-width:1.5}
.sch .gb{fill:#111;stroke:#EBC15A;stroke-width:2}
.sch .gbt{fill:#EBC15A}
.sch .gc{fill:none;stroke:#C9973A;stroke-width:5;stroke-linecap:round}
.sch .gcx{fill:none;stroke:#C9973A;stroke-width:4;stroke-linecap:round;opacity:.6}
.sch .ex{fill:none;stroke:var(--line);stroke-width:3;stroke-linecap:round}
.sch .sep{stroke:var(--hair);stroke-width:1.5}
.sch .no{fill:none;stroke:var(--amber);stroke-width:2;stroke-dasharray:7 5}
.sch .wa{fill:var(--amber)}
.sch .cross{stroke:var(--amber);stroke-width:5;stroke-linecap:round}
.sch-leg{list-style:none;margin:.8rem 0 0;padding:.6rem 0 0;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-size:.95rem;color:var(--muted)}
.sch-leg li{display:flex;align-items:center;gap:.5rem}
.sch-leg i{display:inline-block;width:2rem;height:5px;border-radius:3px}
.sch-leg .lg{background:#C9973A}
.sch-leg .lx{background:var(--line);height:3px}
.chips-h{margin-top:1rem;font-weight:600;color:var(--muted);font-size:1rem}
.answer .chips{margin-top:.6rem}
.answer.has-ph{grid-template-columns:minmax(0,15rem) minmax(0,1.15fr) minmax(0,1fr)}
.answer.has-ph .a-ph{grid-column:1;grid-row:1 / span 2;align-self:start}
.answer.has-ph .a-txt{grid-column:2;grid-row:1}
.answer.has-ph .a-pts{grid-column:3;grid-row:1}
.answer.has-ph .a-sheet{grid-column:2 / -1;grid-row:2}
.answer .a-sheet:empty{display:none}
.answer .a-sheet{margin-top:0}
.answer .a-ph{transition:opacity .2s}
@media (max-width:64rem){
  .answer.has-ph{grid-template-columns:minmax(0,12rem) minmax(0,1fr)}
  .answer.has-ph .a-pts{grid-column:1 / -1;grid-row:3}
  .answer.has-ph .a-sheet{grid-column:2;grid-row:2}
}
@media (max-width:40rem){
  .answer.has-ph{grid-template-columns:1fr}
  .answer.has-ph .a-txt{grid-column:1;grid-row:1}
  .answer.has-ph .a-ph{grid-column:1;grid-row:2;aspect-ratio:4/3;max-height:none}
  .answer.has-ph .a-sheet{grid-column:1;grid-row:3}
  .answer.has-ph .a-pts{grid-column:1;grid-row:4}
}
.answer .ordre ol{grid-template-columns:1fr 1fr}
.answer .ordre ol::before{display:none}
@media (max-width:52rem){.answer .ordre ol{grid-template-columns:1fr}}
.variants{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;list-style:none;margin:1.1rem 0 0;padding:0}
.variants li{display:flex}
.variants a{display:flex;flex-direction:column;width:100%;text-decoration:none;color:var(--ink);border:1.5px solid var(--line);border-radius:4px;overflow:hidden;background:#000}
.variants a:hover{border-color:var(--gold)}
.variants img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block}
.variants span.v{display:block;flex:1;padding:.55rem .7rem;font-weight:600;font-size:1rem;line-height:1.25;background:var(--raise)}
.variants a:hover span.v{color:var(--gold)}
@media (max-width:40rem){.variants{grid-template-columns:1fr 1fr}}

.answer.has-ph{grid-template-columns:minmax(0,15rem) minmax(0,1.1fr) minmax(0,1fr)}
.answer .ph{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:6px;background:#000}
.answer .ph.fit{object-fit:contain}
@media (max-width:64rem){.answer.has-ph{grid-template-columns:minmax(0,12rem) minmax(0,1fr)}.answer.has-ph>div:last-child{grid-column:1 / -1}}
@media (max-width:40rem){.answer.has-ph{grid-template-columns:1fr}.answer .ph{aspect-ratio:16/10;max-height:15rem}}

@media (max-width:47.99rem){.stage{order:-1}}

/* Collection compacte */
.families{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.2rem;margin-top:2.6rem}
.family{grid-column:span 3}
.family{border:1.5px solid var(--line);border-top:4px solid var(--gold);border-radius:4px;background:var(--raise);padding:1.4rem 1.4rem 1.5rem}
.family h3{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.family h3 small{font-family:var(--body);font-size:1rem;font-weight:600;color:var(--muted)}
.family p{color:var(--muted);margin-top:.4rem}
.family .guide{display:inline-flex;align-items:center;min-height:2.75rem;margin-top:.4rem;font-weight:600}
.family.wide{grid-column:1 / -1}
@media (max-width:64rem){.families{grid-template-columns:1fr 1fr}.family{grid-column:span 1}.family.wide{grid-column:1 / -1}}
@media (max-width:40rem){.families{grid-template-columns:1fr}.family,.family.wide{grid-column:auto}}
.howto{margin-top:1.4rem;color:var(--muted)}

/* Rangs : graduations façon potentiomètre */
.scale{display:grid;grid-template-columns:repeat(6,1fr);list-style:none;margin:2.4rem 0 0;padding:0;position:relative}
.scale::before{content:"";position:absolute;left:8%;right:8%;top:1.4rem;height:2px;background:var(--line)}
.scale button{position:relative;width:100%;background:none;border:0;cursor:pointer;color:var(--ink);font:inherit;padding:0 .2rem .4rem;display:grid;justify-items:center;gap:.55rem;min-height:5.5rem}
.scale .dot{width:2.8rem;height:2.8rem;border-radius:50%;border:2px solid var(--line);background:var(--bg);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.25rem}
.scale .nm{font-family:var(--display);font-weight:700;font-size:1.55rem;line-height:1}
.scale button:hover .dot{border-color:var(--gold)}
.scale button[aria-pressed="true"] .dot{background:var(--btn);border-color:var(--btn-line);color:var(--btn-ink)}
.scale button[aria-pressed="true"] .nm{color:var(--gold);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.3em}
@media (max-width:40rem){.scale{grid-template-columns:repeat(3,1fr);row-gap:1rem}.scale::before{display:none}}
.rank-card{margin-top:1.6rem;border:1.5px solid var(--line);border-radius:4px;background:var(--raise);padding:clamp(1.3rem,3vw,2rem);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2rem;align-items:center}
.rank-card h3{font-size:2.4rem;color:var(--gold)}
.rank-card p{margin-top:.5rem}
@media (max-width:52rem){.rank-card{grid-template-columns:1fr}}
.note{color:var(--muted);margin-top:1.2rem}

/* Atelier */
.atelier{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.quote{margin:0;background:var(--raise);color:#FFFFFF;border-radius:10px;padding:clamp(1.6rem,4vw,2.6rem)}
.quote blockquote{margin:0;font-family:var(--body);font-style:italic;font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.4}
.quote figcaption{color:#EBC15A;margin-top:1.2rem;font-weight:600}
.parts{margin:1.6rem 0 0;border-top:2px solid var(--ink)}
.parts div{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--hair)}
.parts dt{color:var(--gold);font-weight:600}
.parts dd{margin:0;color:var(--muted)}
.steps{list-style:none;counter-reset:s;margin:1.8rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 1.6rem}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.6rem 1fr;gap:.8rem;align-items:start}
.steps li::before{content:counter(s);width:2.6rem;height:2.6rem;border-radius:50%;background:var(--btn);color:var(--btn-ink);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.3rem}
.steps b{display:block}
.steps span{color:var(--muted)}
@media (max-width:56rem){.atelier{grid-template-columns:1fr}}
@media (max-width:30rem){.steps{grid-template-columns:1fr}.parts div{grid-template-columns:1fr;gap:.1rem}}

/* Écouter, contacter */
.final{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.dealer{background:var(--raise);color:#FFFFFF;border-radius:10px;padding:clamp(1.5rem,3vw,2.2rem)}
.dealer .kicker{color:#C9C9C9}
.dealer h3{font-size:2.3rem;color:#EBC15A;margin-top:.2rem}
.dealer address{font-style:normal;margin-top:.7rem;font-size:1.15rem}
.dealer .btn{--btn:#EBC15A;--btn-ink:#000;--btn-line:#EBC15A}
.dealer .btn:hover{color:#FFFFFF}
.dealer .more{color:#C9C9C9;margin-top:1rem}
.avis{margin-top:2rem;border:1.5px dashed var(--line);border-radius:6px;padding:1.2rem 1.3rem;color:var(--muted)}
.avis b{color:var(--ink)}
.social{display:flex;gap:.6rem;list-style:none;margin:0;padding:0}
.social a{display:inline-grid;place-items:center;width:2.9rem;height:2.9rem;border:1.5px solid currentColor;border-radius:50%;color:var(--gold)}
.social a:hover{background:var(--gold);border-color:var(--gold);color:var(--bg)}
.social svg{width:1.3rem;height:1.3rem}
.follow{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.8rem}
form{display:grid;gap:1.1rem;margin-top:1.6rem}
label{display:grid;gap:.35rem;font-weight:600}
label .hint{font-weight:400;color:var(--muted);font-size:1rem}
input,textarea{font:inherit;color:var(--ink);background:var(--raise);border:1.5px solid var(--line);border-radius:3px;padding:.7rem .85rem;min-height:3rem;width:100%}
textarea{min-height:6.5rem;resize:vertical}
.err{color:var(--amber);font-size:1rem;font-weight:600}
.err:empty{display:none}
[aria-invalid="true"]{border:2px solid var(--amber)}
.sent{border:2px solid var(--gold);border-radius:4px;padding:1.3rem;margin-top:1.6rem}
@media (max-width:56rem){.final{grid-template-columns:1fr}}
.dealers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;list-style:none;margin:2.4rem 0 0;padding:0}
.dealer{display:flex;flex-direction:column}
.dealer .tel{margin-top:.6rem;font-size:1.15rem}
.dealer .tel a{color:#FFFFFF;font-weight:600}
.dealer .links{margin-top:auto;padding-top:1.3rem;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center}
.dealer .links .btn{margin-top:0}
.dealer .links a:not(.btn){color:#EBC15A;font-weight:600;display:inline-flex;align-items:center;min-height:2.75rem}
@media (max-width:60rem){.dealers{grid-template-columns:1fr}}


footer{background:#1C1F22;color:#C9C9C9;padding-block:3rem;font-size:1.02rem;border-top:2px solid #EBC15A}
footer a{color:#C9C9C9;text-decoration:none}
footer a:hover{color:#EBC15A;text-decoration:underline}
.sitemap{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.sitemap h2{font-family:var(--display);font-size:1.4rem;color:#FFFFFF;margin-bottom:.5rem;max-width:none}
.sitemap ul{list-style:none;margin:0;padding:0}
.sitemap li{margin-bottom:.25rem}
.sitemap a{display:inline-block;padding:.15rem 0}
.legal{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:1.2rem 2.5rem;justify-content:space-between;align-items:center}
footer .social a{color:#EBC15A}
footer .social a:hover{background:#EBC15A;color:#000}
@media (max-width:52rem){.sitemap{grid-template-columns:1fr 1fr}}

/* Retour en haut */
.totop{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:30;width:3.2rem;height:3.2rem;border-radius:50%;border:2px solid #000;background:#EBC15A;color:#000;display:grid;place-items:center;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.35);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.totop.show{opacity:1;visibility:visible}
.totop svg{width:1.4rem;height:1.4rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pulse{display:none}.totop{transition:none}}
@media (forced-colors:active){.btn,.picks button,.scale .dot,.social a{border:2px solid ButtonText}.cable.on{stroke:Highlight}}

/* ===== Typographie fine, appliquée à tout le site ===== */
h1,h2,h3,h4,h5{letter-spacing:-.01em}
h2{font-weight:300;font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.15;max-width:22ch;padding-top:1rem;border-top:1px solid var(--gold)}
.sitemap h2{border-top:0;padding-top:0}
h3{font-weight:400;line-height:1.2}
.lead{font-size:1.12rem;line-height:1.7}
.btn{font-weight:500;border-width:1px;font-size:1.02rem}
.kicker{font-weight:500}
.picks button,.mchip,.chips a,.chips span{font-weight:500;border-width:1px}
.picks button[aria-pressed="true"]::before,.picks button[aria-pressed="true"]{font-weight:500}
/* Bandeau de repères : une ligne fine sur fond noir */
.faceplate{background:var(--bg);color:#D0D0D0;border-block:0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:none}
.faceplate li{font-weight:400;padding:1.3rem 1.2rem}
.faceplate li+li{border-left:1px solid rgba(255,255,255,.1)}
.faceplate b{font-weight:400;font-size:1.3rem;letter-spacing:0;color:#EBC15A;margin-bottom:.15rem}
@media (max-width:56rem){.faceplate li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}}
/* Titres internes */
.family{border-top-width:1px}
.family h3{font-size:1.55rem}
.answer h3{font-size:1.85rem;font-weight:300}
.rank-card h3{font-size:1.9rem;font-weight:300}
.dealer h3{font-size:1.75rem;font-weight:300}
.dealer::after,.piping::after{opacity:.35}
.sheet h4{font-weight:400;font-size:1.45rem;line-height:1.15}
.ordre h5{font-weight:400;font-size:1.3rem}
.ordre .sock::after,.steps li::before,.gd-cases summary .n,.scale .dot{font-weight:400}
.gd-cases summary b{font-weight:400;font-size:1.35rem}
.gd-cases summary::after{font-weight:300}
.scale .nm{font-weight:400;font-size:1.3rem}
.scale button[aria-pressed="true"] .nm{font-weight:500;text-decoration-thickness:1px}
.scale .dot,.ordre .sock{border-width:1px}
.steps li::before{font-size:1.15rem}
.sitemap h2{font-weight:500;font-size:1.05rem;letter-spacing:.02em}
.quote blockquote{font-weight:300}
.gd-safe{border-width:1px}
.mchip[aria-pressed="true"],.picks button[aria-pressed="true"]{font-weight:500}

/* ===== En-tête avec logo centré ===== */
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:1rem;min-height:var(--hh)}

.logo{grid-column:2;grid-row:1;display:block;padding:.45rem 0}
.logo img{height:4.8rem;width:auto}
#menu-btn{grid-column:3;grid-row:1;justify-self:end}
.cta-top{grid-column:3;grid-row:1;justify-self:end;display:inline-flex;align-items:center;min-height:2.9rem;padding:0 1.2rem;border:1px solid #EBC15A;color:#EBC15A;font-weight:500;text-decoration:none;border-radius:3px;white-space:nowrap}
.cta-top:hover{background:#EBC15A;color:#000}
#nav{grid-column:1 / -1;grid-row:2;justify-content:center;border-top:1px solid rgba(255,255,255,.14)}
#nav .cta-nav{display:none}
#nav ul a{min-height:2.75rem;font-size:1rem}
@media (max-width:77rem){
  .cta-top{display:none}
  #nav{border-top:1px solid rgba(255,255,255,.14)}
  #nav .cta-nav{display:inline-flex}
  .logo img{height:3.3rem}
  .tools{margin-left:0}
}
@media (min-width:77.01rem){#menu-btn{display:none}}
@media (max-width:24rem){.logo img{height:2.6rem}}
:root{--hh:4.6rem}
@media (min-width:77.01rem){html{scroll-padding-top:calc(8.8rem + env(safe-area-inset-top,0px))}}
/* ===== Défilement de la gamme ===== */
.reel{position:relative;background:var(--bg);padding:6px 0}
.reel-view{overflow:hidden}
.reel-track{display:flex;gap:6px;list-style:none;margin:0;padding:0;width:max-content;animation:reel 70s linear infinite}
.reel:hover .reel-track,.reel:focus-within .reel-track,.reel.paused .reel-track{animation-play-state:paused}
@keyframes reel{to{transform:translateX(calc(-50% - 3px))}}
.reel li a{position:relative;display:block;width:clamp(13rem,30vw,24rem);aspect-ratio:1;overflow:hidden;color:#FFFFFF;text-decoration:none}
.reel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.reel li a:hover img{transform:scale(1.04)}
.reel li span{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1rem .8rem;background:linear-gradient(transparent,rgba(0,0,0,.82));font-size:1rem;font-weight:400}
.reel li a:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
.reel-pause{position:absolute;right:1rem;bottom:1.1rem;width:2.9rem;height:2.9rem;border-radius:50%;border:1px solid #EBC15A;background:rgba(0,0,0,.7);color:#EBC15A;display:grid;place-items:center;cursor:pointer}
.reel-pause:hover{background:#EBC15A;color:#000}
.reel-pause .i-play{display:none}
.reel.paused .reel-pause .i-play{display:inline}
.reel.paused .reel-pause .i-pause{display:none}
@media (prefers-reduced-motion:reduce){
  .reel-track{animation:none}
  .reel-view{overflow-x:auto;scroll-snap-type:x mandatory}
  .reel li{scroll-snap-align:start}
  .reel li[aria-hidden="true"]{display:none}
  .reel-pause{display:none}
}

/* ===== Sélecteur de langue ===== */
.lang{grid-column:3;grid-row:1;justify-self:end;margin-right:3.4rem}
.lang select{appearance:none;-webkit-appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23EBC15A' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .45rem center/.7rem;color:#FFFFFF;border:0;font:inherit;font-weight:500;font-size:1rem;min-height:2.9rem;padding:0 1.6rem 0 .6rem;cursor:pointer;border-radius:3px}
.lang select:hover{color:#EBC15A}
.lang select option{background:#383E42;color:#FFFFFF}
@media (min-width:77.01rem){.lang{margin-right:14.8rem}}
.intro h1 .m-logo{display:inline-block;height:1.5em;width:auto;vertical-align:-.42em;margin-left:-.12em}

/* ===== Épuration ===== */
.ordre{padding:0}
.ordre > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:3.2rem;padding:.4rem 1.2rem;font-weight:500;font-size:1.1rem}
.ordre > summary::-webkit-details-marker{display:none}
.ordre > summary::after{content:"+";font-weight:300;font-size:1.7rem;line-height:1;color:var(--gold)}
.ordre[open] > summary::after{content:"−"}
.ordre > summary:hover{color:var(--gold)}
.ordre-body{padding:0 1.3rem 1.2rem}
.ordre-body > p:first-child{margin-top:0;font-size:1.02rem;color:var(--muted)}
.rig-out{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;border-top:1px solid var(--line);padding-top:1.2rem}
.rig-out .ro-txt{font-size:1.25rem;font-weight:300;margin:0}
.rig-out .ro-txt b{font-weight:500;color:var(--gold)}
.rig-out .ro-go{display:flex;flex-wrap:wrap;gap:.6rem}
.family.hl{outline:3px solid var(--gold);outline-offset:4px;box-shadow:0 0 0 8px rgba(235,193,90,.18);transition:outline-color .3s,box-shadow .3s}
.family:focus{outline:none}
.family.hl:focus{outline:2px solid var(--gold)}
.ranks-line{margin-top:1.8rem;padding:1.1rem 0;border-block:1px solid var(--hair);display:grid;grid-template-columns:auto 1fr;gap:.6rem 2rem;align-items:center}
.rl-title{margin:0;font-weight:500;color:var(--gold)}
.rl{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.rl li{display:flex;align-items:center;gap:.45rem}
.rl .n{width:1.7rem;height:1.7rem;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:.9rem;color:var(--muted)}
.rl-note{grid-column:1 / -1;margin:0;color:var(--muted);font-size:1rem;max-width:none}
@media (max-width:52rem){.ranks-line{grid-template-columns:1fr}}
.sitemap{grid-template-columns:repeat(2,minmax(0,18rem))}

/* ===== Guides dépliés sur place ===== */
button.guide{background:none;border:0;padding:0;font:inherit;font-weight:500;color:var(--gold);text-decoration:underline;text-underline-offset:.22em;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem}
button.guide::after{content:"";width:.55rem;height:.55rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
button.guide[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,0)}
button.guide:hover{text-decoration-thickness:2px}
.sheet button.guide{display:flex;width:fit-content;margin:.4rem 0 .3rem}
.inline-panel{grid-column:1 / -1;width:auto;margin:0;padding:clamp(1.3rem,3vw,2rem);border:1px solid var(--gold);border-radius:4px;background:var(--bg)}
.inline-panel.pop{animation:panelIn .28s ease-out}
@keyframes panelIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.inline-panel.pop{animation:none}}
.inline-panel > h2{font-size:clamp(1.4rem,2.6vw,1.9rem);border-top:0;padding-top:0}
.inline-panel .ordre-sec{margin-top:1.2rem}
.gd-fold{margin-top:1.4rem;background:none;border:0;padding:0;font:inherit;font-weight:500;color:var(--gold);text-decoration:underline;text-underline-offset:.22em;cursor:pointer;min-height:2.75rem}

/* ===== Ajouts SEO : pages familles, guides, liens internes ===== */
.intro h1 .h1-kw{display:block;font-size:clamp(1rem,1.6vw,1.15rem);font-weight:500;letter-spacing:.01em;line-height:1.4;color:#EBC15A;margin-bottom:.6rem;max-width:none}
.fam-pages{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--hair)}
.fam-pages p{font-weight:600}
.fam-pages ul{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.fam-pages a{display:inline-flex;align-items:center;min-height:2.75rem}
.family .fam-link{display:inline-flex;align-items:center;min-height:2.75rem;margin:.6rem 1.4rem 0 0;font-weight:500}
.panel-more{margin-top:1.4rem}
.crumbs{padding-top:1.4rem;font-size:1rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem .5rem;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--line)}
.crumbs a{color:var(--muted)}
.page-head{padding-block:1rem clamp(2.2rem,5vw,3.4rem)}
.page-head h1{font-weight:300;font-size:clamp(2.2rem,5vw,3.5rem);line-height:1.08;max-width:22ch;padding-top:1rem;margin-top:.8rem;border-top:1px solid var(--gold)}
.page-head .alerte{max-width:62ch}
.products{display:grid;gap:1.6rem}
.product{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1.4rem 2.4rem;align-items:start;background:var(--raise);border:1px solid var(--hair);border-top:2px solid var(--gold);padding:1.4rem;scroll-margin-top:calc(var(--hh) + 1rem)}
.product > img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#000}
.product > img.fit{object-fit:contain}
.product h2{font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:600;max-width:none;border-top:0;padding-top:0}
.product .accroche{font-style:italic;margin-top:.5rem;color:var(--ink)}
.product .desc{color:var(--muted);margin-top:.8rem}
.product .btn{margin-top:1.2rem}
.product .textlink{display:inline-flex;align-items:center;min-height:2.75rem;margin-left:1.2rem}
.variants-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:1.2rem;margin-top:1.4rem}
.variants-grid figure{margin:0;background:var(--raise);border:1px solid var(--hair);padding:1rem}
.variants-grid img{width:100%;height:auto;background:#000}
.variants-grid figcaption{margin-top:.7rem;font-weight:600}
.variants-grid .btn{margin-top:.8rem;width:100%}
.more-fams h2{font-size:clamp(1.8rem,4vw,2.6rem)}
.more-fams ul{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.4rem 1.6rem}
.more-fams a{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:500}
.cta-band p{margin-top:1rem}
.cta-band .btn{margin-top:1.4rem}
.guide-page .panel{padding-top:1.6rem}
.page-head .textlink{display:inline-flex;align-items:center;min-height:2.75rem;margin-top:.8rem;font-weight:500}
@media (max-width:47.99rem){.product{grid-template-columns:1fr}.product .textlink{margin-left:0}}

.lang-sub select{appearance:none;-webkit-appearance:none}

/* ===== En-tête compact (ordinateur) et masquable (mobile) ===== */
.head{transition:transform .28s ease}
.head.hidden{transform:translateY(-100%)}
@media (min-width:77.01rem){
  html{scroll-padding-top:calc(4.6rem + env(safe-area-inset-top,0px))}
  .head.compact{position:fixed;left:0;right:0;top:0;animation:head-in .28s ease-out;box-shadow:0 6px 18px rgba(0,0,0,.28)}
  .head.compact .top{grid-template-columns:auto 1fr auto;min-height:3.75rem}
  .head.compact .logo{grid-column:1;grid-row:1;padding:.2rem 0}
  .head.compact .logo img{height:2.6rem}
  .head.compact #nav{grid-column:2;grid-row:1;border-top:0}
  .head.compact #nav ul a{min-height:3.75rem}
}
@keyframes head-in{from{transform:translateY(-100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.head{transition:none}.head.compact{animation:none}}