/* =========================================================================
   PoolConcept 2026 — Accessoires (CSS dedicat)
   Identité : LE MÉCANISME. Planche technique — lames, profils, glissières.
   Aucune photo : ligne d'or sur noir, comme un plan d'atelier.
   ========================================================================= */
:root{
  --x-noir:#070708; --x-noir2:#0c0c0e;
  --x-ivoire:#EFEBE3; --x-gris:#9a9a9e;
  --x-or:#C8A24C; --x-or2:#E4C879; --x-orsoft:rgba(200,162,76,.34);
  --x-line:rgba(239,235,227,.12);
  --x-disp:"Bodoni Moda", Georgia, serif;
  --x-ui:"Space Grotesk", system-ui, sans-serif;
  --x-mono:"Space Mono", ui-monospace, monospace;
  --x-e:cubic-bezier(.22,.61,.36,1); --x-slow:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--x-noir);color:var(--x-ivoire);font-family:var(--x-ui);font-weight:300;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
/* planche millimétrée */
body::before{content:"";position:fixed;inset:0;z-index:-2;opacity:.5;
  background-image:linear-gradient(var(--x-line) 1px,transparent 1px),linear-gradient(90deg,var(--x-line) 1px,transparent 1px);
  background-size:40px 40px}
body::after{content:"";position:fixed;inset:0;z-index:-1;
  background:radial-gradient(130% 90% at 50% 20%,transparent 40%,rgba(7,7,8,.86) 100%)}

/* ---------- HERO : le volet se déroule ---------- */
.x-hero{position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(6rem,14vh,9rem) clamp(1.2rem,4vw,3rem) 0;max-width:1200px;margin-inline:auto}
.x-hero .eyebrow{font-family:var(--x-mono);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--x-or2)}
.x-hero h1{font-family:var(--x-disp);font-weight:500;font-size:clamp(2.4rem,7vw,5.2rem);line-height:1;margin:.5rem 0 0}
.x-hero .sub{color:var(--x-gris);max-width:56ch;margin:1.2rem 0 0;font-size:1.02rem}

.volet{width:100%;max-width:900px;margin:clamp(2.4rem,6vh,4rem) 0 0;height:auto;display:block;overflow:visible}
.volet .frame{fill:none;stroke:var(--x-or2);stroke-width:1.4;stroke-linecap:round}
.volet .thin{stroke:var(--x-orsoft);stroke-width:1}
.volet .eau{fill:rgba(122,162,190,.07);stroke:var(--x-orsoft);stroke-width:1;stroke-dasharray:5 4}
/* lames : sortent une à une du coffre */
.volet .lame{fill:rgba(200,162,76,.10);stroke:var(--x-or2);stroke-width:1.1;
  transform:translateX(-58px);opacity:0;transition:transform 1s var(--x-slow),opacity .4s var(--x-e)}
html.js-on .volet.run .lame{transform:none;opacity:1}
.volet .axe{fill:none;stroke:var(--x-or2);stroke-width:1.4}
.volet .axe-spin{transform-box:fill-box;transform-origin:center;animation:none}
html.js-on .volet.run .axe-spin{animation:axeSpin 2.6s var(--x-e) 1 forwards}
@keyframes axeSpin{to{transform:rotate(-300deg)}}
.volet .dimt{font-family:"Space Mono",monospace;font-size:9px;fill:var(--x-or2);letter-spacing:.08em}
.volet .lbl{font-family:"Space Mono",monospace;font-size:8.5px;fill:var(--x-gris);letter-spacing:.14em}

/* ---------- SOMMAIRE : rail des 5 familles ---------- */
.x-rail{position:sticky;top:0;z-index:20;background:rgba(7,7,8,.82);backdrop-filter:blur(8px);
  border-block:1px solid var(--x-line);margin-top:clamp(3rem,8vh,5rem)}
.x-rail .inner{max-width:1200px;margin-inline:auto;padding:0 clamp(1.2rem,4vw,3rem);
  display:flex;gap:clamp(.8rem,2vw,1.6rem);overflow-x:auto;scrollbar-width:none}
.x-rail .inner::-webkit-scrollbar{display:none}
.x-rail a{flex:0 0 auto;padding:1rem .2rem;text-decoration:none;color:var(--x-gris);
  font-family:var(--x-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid transparent;transition:.3s var(--x-e);white-space:nowrap}
.x-rail a:hover,.x-rail a.on{color:var(--x-or2);border-bottom-color:var(--x-or)}
.x-rail a i{font-style:normal;color:var(--x-or);margin-right:.6em}

/* ---------- FAMILLE ---------- */
.fam{max-width:1200px;margin-inline:auto;padding:clamp(4rem,10vh,7rem) clamp(1.2rem,4vw,3rem);
  border-bottom:1px solid var(--x-line)}
.fam:last-of-type{border-bottom:0}
.fam .head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.fam .no{font-family:var(--x-mono);font-size:.7rem;letter-spacing:.24em;color:var(--x-or2)}
.fam h2{font-family:var(--x-disp);font-weight:500;font-size:clamp(1.8rem,4.2vw,3rem);margin:0}
.fam .body{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.4rem);
  align-items:center;margin-top:clamp(1.8rem,4.5vh,2.8rem)}
@media (max-width:900px){.fam .body{grid-template-columns:1fr}}

/* schéma mécanique */
.mech{position:relative;border:1px solid var(--x-line);background:var(--x-noir2);padding:clamp(1rem,2.4vw,1.8rem);
  opacity:0;transform:translateY(16px);transition:.9s var(--x-slow)}
.mech.in{opacity:1;transform:none}
.mech svg{width:100%;height:auto;display:block;overflow:visible}
.mech .ln{fill:none;stroke:var(--x-or2);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.mech .thin{stroke:var(--x-orsoft);stroke-width:1}
.mech .dash{stroke-dasharray:5 4}
.mech .fill{fill:rgba(200,162,76,.09)}
.mech .eau{fill:rgba(122,162,190,.10)}
.mech .t{font-family:"Space Mono",monospace;font-size:8.5px;fill:var(--x-gris);letter-spacing:.12em}
.mech .to{font-family:"Space Mono",monospace;font-size:9px;fill:var(--x-or2);letter-spacing:.1em}
.mech .cote{stroke:var(--x-orsoft);stroke-width:1}
/* pièces qui bougent selon la variante choisie */
.mech .move{transition:transform .7s var(--x-slow),opacity .5s var(--x-e)}

/* variantes (leurs vrais produits) */
.vars{display:flex;flex-direction:column;gap:.7rem}
.vars .v{width:100%;text-align:left;background:none;border:1px solid var(--x-line);color:var(--x-ivoire);
  padding:clamp(.9rem,2vw,1.2rem);cursor:pointer;border-radius:1px;transition:.35s var(--x-e);
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
.vars .v:hover{border-color:var(--x-orsoft)}
.vars .v.on{border-color:var(--x-or);background:rgba(200,162,76,.05)}
.vars .v .k{font-family:var(--x-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--x-or2);
  padding-top:.2em}
.vars .v .n{font-family:var(--x-disp);font-weight:500;font-size:1.15rem;margin:0 0 .3rem}
.vars .v p{margin:0;color:var(--x-gris);font-size:.92rem;line-height:1.6}
.fam .more{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.4rem;
  font-family:var(--x-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--x-ivoire);text-decoration:none;border-bottom:1px solid var(--x-or);padding-bottom:.35rem;
  transition:.3s var(--x-e)}
.fam .more:hover{color:var(--x-or2);gap:1rem}

/* ---------- CTA ---------- */
.x-cta{max-width:1200px;margin-inline:auto;padding:clamp(4rem,9vh,6rem) clamp(1.2rem,4vw,3rem) clamp(5rem,12vh,8rem);text-align:center}
.x-cta .rule{width:1px;height:clamp(40px,8vh,70px);background:linear-gradient(transparent,var(--x-or2));margin:0 auto clamp(1.4rem,4vh,2.2rem)}
.x-cta h2{font-family:var(--x-disp);font-weight:500;font-size:clamp(1.8rem,4.6vw,3.4rem);margin:0 0 1.6rem}
.x-cta h2 em{font-style:italic;color:var(--x-or2)}
.x-cta button{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--x-mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--x-ivoire);background:none;border:1px solid var(--x-or);
  padding:.9rem 1.8rem;border-radius:1px;cursor:pointer;transition:.35s var(--x-e)}
.x-cta button:hover{background:var(--x-or);color:#000}

a:focus-visible,button:focus-visible{outline:2px solid var(--x-or2);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  .mech{opacity:1;transform:none}
  html.js-on .volet .lame{transform:none;opacity:1}
}


/* ---------- Galerie photo par famille (composant gallery.js/.css) ---------- */
.fam-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,1.2vw,1rem);
  margin-top:clamp(1.8rem,4vh,2.6rem)}
@media (max-width:860px){.fam-gal{grid-template-columns:repeat(2,1fr)}}
.fam-gal .pc-gitem{aspect-ratio:4/3}