/* Iris 234 — expérience minérale et repère spectral discret. */
:root:not(.autumn-mode){--color:#E2DDD1}

.spectrum-tools{
 position:absolute;z-index:5;left:clamp(5px,1.2vw,18px);bottom:clamp(7px,1vw,14px);
 max-width:min(246px,50%);font-family:'DM Sans',Arial,sans-serif;
}
.spectrum-toggle{
 display:inline-flex;align-items:center;gap:8px;min-height:30px;
 padding:6px 9px;border:1px solid var(--line);border-radius:30px;
 background:color-mix(in srgb,var(--color) 90%,white 10%);
 color:var(--ink);font-size:10px;letter-spacing:.1px;white-space:nowrap;
 box-shadow:0 1px 5px rgba(30,30,30,.04);
}
.spectrum-toggle[aria-pressed="true"]{background:rgba(249,247,241,.88);color:#302D28}
.spectrum-toggle:hover,.spectrum-toggle:focus-visible{border-color:currentColor}
.spectrum-wheel{
 width:13px;height:13px;flex:0 0 13px;border-radius:50%;
 background:conic-gradient(from 0deg,#dfcc7a 0deg,#b97477 90deg,#8094bf 180deg,#92b6a2 270deg,#dfcc7a 360deg);
 border:1px solid rgba(48,45,40,.14);
}
.spectrum-note{
 position:absolute;left:0;bottom:calc(100% + 8px);
 width:min(255px,70vw);max-width:255px;
 border-radius:5px;padding:9px 11px;
 background:rgba(250,248,243,.94);color:#302D28;
 font-size:10px;line-height:1.45;box-shadow:0 3px 18px rgba(35,30,25,.09);
}
#spectrumLayer{pointer-events:none;opacity:.96;transition:opacity .25s ease}

/* Keep the actual selected colour in the immersive view only. */
#immersive{--color:var(--immersive-color);--ink:var(--immersive-ink)}
#immersive::backdrop{background:var(--immersive-color,var(--color))!important}
html.is-immersive,html.is-immersive body{background:var(--immersive-color,var(--color))!important}

/* Twenty leaves fit with breathing room; no parasitic Windows scrollbar. */
@media(min-width:1050px) and (min-height:580px){
 .palette-mode .neutral-section{overflow:hidden;min-width:0}
 .palette-mode .neutral-strip{
  display:grid;grid-template-columns:repeat(20,minmax(0,1fr));
  justify-content:stretch;justify-items:center;align-items:center;
  column-gap:clamp(2px,.32vw,6px);
  box-sizing:border-box;width:100%;min-width:0;
  padding-inline:clamp(16px,2vw,32px);
  height:74px;overflow:hidden!important;scrollbar-width:none;
 }
 .palette-mode .neutral-strip::-webkit-scrollbar{display:none}
 .palette-mode .neutral-strip button{
  flex:none;min-width:0!important;
  width:min(100%,35px);max-width:35px;min-height:0;height:66px;
  padding:0;justify-self:center;
 }
 .palette-mode .neutral-strip button svg{display:block;width:100%;height:100%}
}
@media(max-width:720px){
 .spectrum-tools{left:0;bottom:1px;max-width:48%}
 .spectrum-toggle{font-size:9px;min-height:31px;padding:5px 7px;gap:5px}
 .spectrum-note{display:none!important} /* Complete explanation remains available under Informations. */
}
@media(prefers-reduced-motion:reduce){
 #spectrumLayer{transition:none}
}