/* =====================================================================
   Page Nuancier : filtres à gauche, teintes classées du plus clair au plus foncé.
   Chargé uniquement par nuancier.html, après styles.css.
   ===================================================================== */
.nx{padding-block:clamp(26px,3.6vw,50px) clamp(70px,8vw,110px)}
.nx-layout{display:grid;grid-template-columns:clamp(250px,22vw,300px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}

/* ---------- Colonne de filtres (gauche) ---------- */
.nx-side{position:sticky;top:96px;max-height:calc(100vh - 116px);overflow-y:auto;background:var(--surface);border:1px solid var(--border);
  border-radius:26px;padding:20px 18px;display:flex;flex-direction:column;gap:22px;scrollbar-width:thin}
.nx-block h4{margin:0 0 10px;font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.nx-search{position:relative;display:block}
.nx-search svg{position:absolute;left:14px;top:50%;translate:0 -50%;width:17px;height:17px;color:var(--text-dim);pointer-events:none}
.nx-search input{width:100%;height:44px;padding:0 14px 0 40px;border:1px solid var(--border);border-radius:99px;background:var(--bg);color:var(--text);font:inherit;font-size:.9rem}
.nx-search input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 20%,transparent)}
.nx-search input::-webkit-search-cancel-button{display:none}

.nx-list{display:flex;flex-direction:column;gap:2px}
.nx-opt{display:flex;align-items:center;gap:10px;width:100%;padding:.6em .75em;border:0;border-radius:12px;background:none;color:var(--text);font:inherit;font-size:.9rem;font-weight:600;text-align:left;cursor:pointer;transition:background .15s,color .15s}
.nx-opt:hover{background:var(--well)}
.nx-opt.is-on{background:var(--ink);color:#fff}
.nx-opt i{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.7),0 0 0 3px rgba(23,37,60,.15)}
.nx-opt em{margin-left:auto;font-style:normal;font-family:var(--font-mono);font-size:.72rem;font-weight:400;opacity:.65}
.nx-tones{display:grid;grid-template-columns:1fr;gap:6px}
.nx-tone{display:flex;align-items:center;gap:10px;padding:.5em .7em;border:1px solid var(--border);border-radius:14px;background:var(--bg);color:var(--text);font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s}
.nx-tone:hover{border-color:var(--text-dim)}
.nx-tone.is-on{border-color:var(--ink);background:var(--ink);color:#fff}
.nx-tone b{width:34px;height:18px;border-radius:6px;flex:none;background:var(--g);box-shadow:inset 0 0 0 1px rgba(23,37,60,.15)}
.nx-tone em{margin-left:auto;font-style:normal;font-family:var(--font-mono);font-size:.72rem;font-weight:400;opacity:.65}
.nx-fams{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.nx-fam{aspect-ratio:1;border-radius:50%;border:0;background:var(--c);cursor:pointer;position:relative;box-shadow:inset 0 0 0 1px rgba(23,37,60,.18);transition:transform .15s}
.nx-fam:hover{transform:scale(1.12)}
.nx-fam.is-on{outline:3px solid var(--ink);outline-offset:2px}
.nx-fam-all{background:conic-gradient(#e2231a,#ffb800,#3dcb94,#2f7be0,#8a5cf5,#e2231a)}
.nx-fam-name{margin-top:8px;font-size:.78rem;color:var(--text-dim);min-height:1.2em}
.nx-seg{display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border-radius:99px;background:var(--well)}
.nx-seg button{padding:.55em .3em;border:0;border-radius:99px;background:none;color:var(--text-dim);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}
.nx-seg button.is-on{background:var(--ink);color:#fff}
.nx-reset{width:100%;justify-content:center}
.nx-reset[hidden]{display:none}

/* ---------- Zone principale ---------- */
.nx-main{min-width:0}
.nx-bar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:clamp(18px,2.4vw,28px)}
.nx-bar h2{font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.02em}
.nx-count{font-family:var(--font-mono);font-size:.8rem;color:var(--text-dim)}
.nx-section{margin-bottom:clamp(30px,4vw,46px)}
.nx-sec-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.nx-sec-head h3{font-size:clamp(1.15rem,1.8vw,1.4rem);letter-spacing:-.015em}
.nx-sec-head .nx-count{margin-left:auto}
.nx-sec-note{font-size:.8rem;color:var(--text-dim)}
.nx-sec-dot{width:14px;height:14px;border-radius:50%;flex:none;align-self:center;box-shadow:0 0 0 2px var(--surface),0 0 0 3px rgba(23,37,60,.2)}
.nx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}

/* carte teinte */
.nx-card{display:block;width:100%;padding:8px;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,border-color .2s}
.nx-card:hover{transform:translateY(-4px);box-shadow:0 18px 30px -18px rgba(23,37,60,.5);border-color:var(--text-dim)}
.nx-card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.nx-card.is-sel{outline:3px solid var(--ink);outline-offset:2px}
.nx-chip{position:relative;display:block;height:82px;border-radius:12px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(23,37,60,.12)}
.nx-new{position:absolute;top:7px;left:7px;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;padding:.35em .6em;border-radius:99px;background:var(--t);color:var(--c)}
.nx-name{display:block;margin:9px 4px 0;font-weight:700;font-size:.86rem;line-height:1.2}
.nx-hex{display:block;margin:3px 4px 0;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.03em;color:var(--text-dim)}
.nx-meta{display:block;margin:2px 4px 3px;font-size:.68rem;color:var(--text-dim)}
.nx-empty{padding:40px 16px;text-align:center;border:1px dashed var(--border);border-radius:22px;color:var(--text-dim)}

/* barre « teinte choisie » */
.nx-pick{position:fixed;left:50%;bottom:20px;translate:-50% 0;z-index:400;display:flex;align-items:center;gap:14px;max-width:calc(100vw - 24px);
  padding:10px 10px 10px 12px;border-radius:99px;background:#12234a;color:#fff;box-shadow:0 24px 50px -16px rgba(0,0,0,.6);animation:nxUp .3s cubic-bezier(.2,.8,.3,1)}
.nx-pick[hidden]{display:none}
@keyframes nxUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.nx-pick-dot{width:38px;height:38px;border-radius:50%;flex:none;border:3px solid rgba(255,255,255,.85)}
.nx-pick-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.nx-pick-txt b{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-pick-txt small{font-family:var(--font-mono);font-size:.7rem;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-pick .btn{white-space:nowrap}
.nx-pick-x{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.nx-pick-x svg{width:16px;height:16px}

/* mobile : les filtres passent dans un tiroir */
.nx-mobile-bar{display:none}
@media (max-width:900px){
  .nx-layout{grid-template-columns:1fr}
  .nx-mobile-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
  .nx-side{position:static;max-height:none;display:none}
  .nx-side.open{display:flex}
  .nx-fams{grid-template-columns:repeat(8,1fr)}
}
@media (max-width:520px){
  .nx-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
  .nx-fams{grid-template-columns:repeat(6,1fr)}
  .nx-pick{gap:10px;padding-right:8px}
  .nx-pick .btn{padding-inline:1em;font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){.nx-card,.nx-pick{transition:none;animation:none}}