.nuancier{
  /* identité dimensionchassis.be */
  --paper:#F4F1EA;
  --paper-2:#EFE9DF;
  --bone:#E8E2D5;
  --card:#FFFFFF;
  --text:#16181C;
  --text-dim:#3D4148;
  --text-muted:#5C616B;
  --line:rgba(20,22,28,.10);
  --line-strong:rgba(20,22,28,.18);
  --orange:#E8661A;
  --orange-deep:#C0530F;
  --orange-soft:rgba(232,102,26,.14);
  --anis:#A4D818;
  --anis-soft:rgba(164,216,24,.22);
  --r-md:10px;
  --r-lg:18px;
  --r-xl:28px;
  --shadow-card:0 10px 34px rgba(20,22,28,.07);
  --display:'Manrope',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --lw:clamp(232px,46vw,362px);
  --lh:clamp(46px,8.4vw,64px);
  --pivot:clamp(38px,27%,240px);
}

.nuancier *,.nuancier *::before,.nuancier *::after{box-sizing:border-box}

.nuancier{
  background:var(--paper);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding:clamp(34px,6vw,88px) clamp(20px,4vw,56px);
}
.nuancier :where(h1,h2,h3,p,ul,li,figure,dl,dd){margin:0}
.shell{max-width:1320px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(22px,3vw,34px)}

/* ---------- en-tête ---------- */
.masthead{display:flex;flex-direction:column;gap:12px;max-width:64ch}
.eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);
}
.masthead h1{
  font-family:var(--display);
  font-size:clamp(34px,5.4vw,64px);font-weight:600;letter-spacing:-.035em;line-height:1.02;text-wrap:balance;
}
.range{
  font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);
  margin-top:-4px;font-variant-numeric:tabular-nums;
}
.lede{color:var(--text-dim);font-size:clamp(15px,1.5vw,17px);max-width:60ch;margin-top:4px}

/* ---------- filtres ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-family:var(--body);font-size:13px;font-weight:500;color:var(--text);
  background:rgba(255,255,255,.7);border:.8px solid var(--line-strong);
  padding:9px 17px;border-radius:100px;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.chip:hover{background:#fff;border-color:rgba(20,22,28,.3)}
.chip[aria-pressed="true"]{
  background:var(--orange-deep);border-color:var(--orange-deep);color:#fff;font-weight:600;
  box-shadow:0 6px 18px -6px rgba(232,102,26,.5);
}
.chip .n{opacity:.55;margin-left:7px;font-variant-numeric:tabular-nums}
.chip:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- plateau ---------- */
.board{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:stretch}
@media (max-width:940px){.board{grid-template-columns:minmax(0,1fr)}}

.stage{
  position:relative;overflow:hidden;
  background:radial-gradient(125% 95% at 30% 44%,#FCFAF6 0%,var(--paper-2) 48%,#E1D8C7 100%);
  border:.8px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  min-height:clamp(440px,64vh,620px);
  touch-action:none;cursor:grab;outline:none;
}
.stage.dragging{cursor:grabbing}
.stage:focus-visible{border-color:var(--orange);box-shadow:var(--shadow-card),0 0 0 3px rgba(232,102,26,.25)}

.fan{position:absolute;left:var(--pivot);top:47%;width:0;height:0}
.lam{
  position:absolute;
  left:calc(var(--lh) / -2);top:calc(var(--lh) / -2);
  width:var(--lw);height:var(--lh);
  transform-origin:calc(var(--lh) / 2) calc(var(--lh) / 2);
  border-radius:calc(var(--lh) / 2) 5px 5px calc(var(--lh) / 2);
  background:#ddd;display:block;padding:0;border:0;cursor:pointer;
  box-shadow:0 4px 12px rgba(20,22,28,.22);
  will-change:transform;
}
.lam canvas{display:block;width:100%;height:100%;border-radius:inherit}
.lam .ring{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:.8px solid rgba(20,22,28,.22);
}
.lam .tag{
  position:absolute;right:13px;max-width:calc(100% - 60px);
  font-family:var(--body);font-size:9.5px;font-weight:600;letter-spacing:.01em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;
}
.lam .tag b{font-weight:700;font-variant-numeric:tabular-nums}
.lam.above .tag{top:5px}
.lam.below .tag{bottom:5px}
.lam:not(.above):not(.below) .tag{top:50%;transform:translateY(-50%)}
.lam.is-active{z-index:400}
.lam.is-active .tag{top:50%;bottom:auto;transform:translateY(-50%);font-size:13px;letter-spacing:-.005em}
.lam.is-active .ring{border-width:1.4px;border-color:rgba(20,22,28,.4)}
.lam:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.rivet{
  position:absolute;left:var(--pivot);top:47%;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;z-index:500;pointer-events:none;
  background:conic-gradient(from 40deg,#8F949A,#E9ECEE,#6E7378,#CDD1D5,#7B8085,#E2E5E8,#8F949A);
  box-shadow:0 2px 6px rgba(20,22,28,.4),inset 0 0 0 1px rgba(20,22,28,.28);
}
.rivet::after{
  content:"";position:absolute;inset:8px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#5A5E63,#24262A);
}

.stage-bar{
  position:absolute;left:0;right:0;bottom:0;z-index:600;
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:linear-gradient(180deg,rgba(244,241,234,0),rgba(244,241,234,.9) 62%);
}
.nav-btn{
  width:36px;height:36px;flex:none;border-radius:50%;
  border:.8px solid var(--line-strong);background:#fff;color:var(--text);
  font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.nav-btn:hover{border-color:rgba(20,22,28,.34);box-shadow:0 4px 14px rgba(20,22,28,.10)}
.nav-btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.hint{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.counter{margin-left:auto;font-size:12.5px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.counter b{color:var(--text);font-weight:600}
@media (max-width:600px){.hint{display:none}}
/* sur mobile la lamelle est trop étroite pour le nom : on ne garde que le code */
@media (max-width:680px){
  .lam:not(.is-active) .tag .nm{display:none}
  .lam .tag{font-size:10px}
  .lam.is-active .tag{font-size:12px}
}

/* ---------- fiche ---------- */
.detail{
  background:var(--card);border:.8px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:18px;display:flex;flex-direction:column;gap:16px;
}
.swatch{
  position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/9;
  box-shadow:inset 0 0 0 .8px rgba(20,22,28,.18);background:#ddd;
}
.swatch canvas{display:block;width:100%;height:100%}
.d-code{font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--orange)}
.d-name{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.025em;line-height:1.1;text-wrap:balance;margin-top:4px}
.d-alt{font-size:13.5px;color:var(--text-muted);margin-top:3px}
.flag{
  display:none;align-self:flex-start;margin-top:10px;
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:6px 13px;border-radius:100px;
}
.flag.on{display:inline-block}
.flag.retiree{background:rgba(20,22,28,.07);color:var(--text-muted)}
.flag.nouveau{background:var(--anis-soft);color:#4C6600}

.specs{display:flex;flex-direction:column;border-top:.8px solid var(--line)}
.specs div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:10px 0;border-bottom:.8px solid var(--line)}
.specs dt{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);flex:none}
.specs dd{font-size:14px;text-align:right;color:var(--text)}
.note{
  background:var(--orange-soft);border-radius:var(--r-md);padding:13px 15px;
  font-size:13px;line-height:1.5;color:var(--text-dim);
}
.note b{color:var(--text);font-weight:600}

/* ---------- mentions ---------- */
.legal{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px 34px;
  border-top:.8px solid var(--line);padding-top:20px;
  font-size:13px;line-height:1.55;color:var(--text-muted);
}
.legal strong{
  color:var(--text-dim);font-weight:700;display:block;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:5px;
}

.nuancier .stage{touch-action:pan-y;}



/* ===== Visionneuse (lightbox) : zoom + téléchargement ===== */
.lightbox img{ transition: transform .14s ease; transform-origin: center center; will-change: transform; touch-action: none; }
.lightbox.is-zoomed img{ cursor: grab; }
.lightbox-download{
  position: absolute; bottom: 24px; right: 24px; z-index: 1002;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 100px;
  background: #C0530F; color: #fff !important; text-decoration: none;
  font-family: var(--font-body); font-size: .92rem; font-weight: 600; min-height: 44px;
  box-shadow: 0 6px 22px rgba(0,0,0,.4); border: none; cursor: pointer;
}
.lightbox-download:hover{ background: #AD4A0C; }
.lightbox-download svg{ display:block; }
.lightbox-hint{
  position:absolute; bottom: 30px; left: 24px; z-index:1002;
  color: rgba(255,255,255,.7); font-size:.82rem; font-family:var(--font-body); pointer-events:none;
}
@media (max-width:760px){
  .lightbox-download{ bottom:16px; right:16px; padding:11px 16px; font-size:.86rem; }
  .lightbox-hint{ bottom:22px; left:16px; font-size:.76rem; }
  .lightbox-counter{ bottom: 64px !important; }
}


/* ===== barre de marques (3 nuanciers) ===== */
.nuancier .brandbar{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.nuancier .btabs{display:flex;gap:8px;flex:1;overflow-x:auto;scrollbar-width:none;padding:2px}
.nuancier .btabs::-webkit-scrollbar{display:none}
.nuancier .btab{flex:1;min-width:max-content;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:100px;border:1.5px solid rgba(20,22,28,.12);background:#fff;font-weight:800;font-size:.95rem;cursor:pointer;transition:all .2s ease;color:#16181C;font-family:inherit}
.nuancier .btab:hover{border-color:#A4D818}
.nuancier .btab[aria-pressed="true"]{background:#16181C;color:#fff;border-color:#16181C}
.nuancier .bmat{font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:100px}
.nuancier .bmat.pvc{background:rgba(164,216,24,.22);color:#4A6B00}
.nuancier .bmat.alu{background:rgba(232,102,26,.18);color:#B24C0E}
.nuancier .btab[aria-pressed="true"] .bmat.pvc{background:#A4D818;color:#16181C}
.nuancier .btab[aria-pressed="true"] .bmat.alu{background:#FF7A28;color:#16181C}
.nuancier .bnav{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(20,22,28,.12);background:#fff;font-size:20px;cursor:pointer;flex:none;padding:0}
.nuancier .bnav:hover{border-color:#A4D818}
.nuancier .brandhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;font-family:'Manrope',system-ui,sans-serif}
.nuancier .brandhead #nuBrandTitle{font-weight:800;font-size:1.25rem}
.nuancier .nubadge{font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:100px}
.nuancier .nubadge.pvc{background:#A4D818;color:#16181C}
.nuancier .nubadge.alu{background:#FF7A28;color:#16181C}
.nuancier .bhint{margin-left:auto;font-size:.78rem;color:#6b6b63}
.nuancier .nunote{margin-top:14px;font-size:.82rem;color:#6b6b63;line-height:1.5}
@media (max-width:760px){.nuancier .bhint{display:none}.nuancier .btab{padding:10px 12px;font-size:.86rem}}
/* contraste AA (site multi-pages) */
.page-hero .eyebrow{color:#B04A0C}
.nuancier .bmat.alu{color:#8A3A08}
.nuancier .bmat.pvc{color:#3E5A00}
.chip .n{opacity:.8}
.nuancier .d-code{color:#B04A0C}
.chip .n{opacity:1}