/* domains/mode/css/style-quiz.css — rubrique STYLE (lot E) : quiz morpho/colorimétrie,
   palettes de couleurs, fiches morphologie / saison / tenue. Préfixe .st-* (jamais ad-/ads-/
   advert/banner-/sponsored : EasyList). Réutilise les variables du socle (css/style.css).
   Contraste AA ≥ 4.5:1 (le NOM et le HEX portent l'info des pastilles, pas la teinte seule),
   :focus-visible sur chaque élément interactif, mobile 360 px sans débordement. */

/* ============================================================ QUIZ ============ */
.st-quiz{
  background:var(--paper);
  border:1.5px solid var(--line-2);
  border-radius:var(--r);
  box-shadow:var(--sh-s);
  padding:22px clamp(14px,4vw,28px);
  margin:0 0 30px;
}
.st-quiz>h2{font:700 clamp(1.3rem,4.4vw,1.7rem)/1.2 var(--f-d);margin:0 0 6px}
.st-quiz-sub{color:var(--muted);margin:0 0 16px}
.st-quiz-alert{margin:0 0 18px}

.st-qz-progress{margin:0 0 14px}
.st-qz-count{font-weight:600;margin:0 0 6px;font-size:.95rem}
.st-qz-bar{height:8px;background:var(--grey-paper);border:1px solid var(--line-2);border-radius:999px;overflow:hidden}
.st-qz-bar i{display:block;height:100%;width:0;background:var(--brass-btn);transition:width .3s ease}

/* Une question = un fieldset. Sans JS : toutes visibles. Avec JS (.is-js) : on n'affiche que
   la courante — le reste porte l'attribut [hidden] (masqué par défaut navigateur). */
.st-qz-q{border:0;padding:0;margin:0 0 26px;min-width:0}
.st-qz .st-qz-q:last-of-type{margin-bottom:8px}
.st-qz-q>legend{display:flex;gap:10px;align-items:flex-start;padding:0;margin:0 0 14px;font:600 1.12rem/1.4 var(--f-b);color:var(--ink)}
.st-qz-q>legend:focus{outline:none}
.st-qz-num{flex:0 0 auto;font:700 .9rem/1 var(--f-b);color:var(--brass-txt);background:var(--tip-bg);border-radius:999px;padding:6px 9px;white-space:nowrap}
.st-qz-num small{opacity:.7;font-weight:600}
.st-qz-text{flex:1 1 auto;min-width:0}

.st-qz-answers{display:grid;gap:9px}
.st-qz-a{position:relative;display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border:1.5px solid var(--line-2);border-radius:var(--r-s);background:var(--ivory);cursor:pointer}
.st-qz-a:hover{border-color:var(--indigo);background:var(--paper)}
/* le radio natif reste focusable mais visuellement remplacé par .st-qz-dot */
.st-qz-a input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.st-qz-dot{flex:0 0 auto;width:20px;height:20px;margin-top:1px;border:2px solid var(--line-2);border-radius:50%;background:var(--paper)}
.st-qz-lbl{flex:1 1 auto;min-width:0}
.st-qz-a input:checked~.st-qz-dot{border-color:var(--brass-btn);background:radial-gradient(circle at center,var(--brass-btn) 0 6px,var(--paper) 7px)}
.st-qz-a input:checked~.st-qz-lbl{font-weight:600}
.st-qz-a:has(input:checked){border-color:var(--brass-btn);background:var(--tip-bg)}
.st-qz-a input:focus-visible~.st-qz-dot{outline:3px solid var(--focus);outline-offset:2px}

.st-qz-nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}
.st-qz-nav .qz-submit{margin-left:auto}
.st-qz-privacy{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.9rem;margin:16px 0 0}
.st-qz-privacy .ico{flex:0 0 auto;color:var(--brass)}

/* ============================================================ PALETTES ======== */
.st-swatches{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.st-swatches-wide{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.st-sw{display:flex;gap:11px;align-items:flex-start;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-s);padding:10px 12px}
.st-sw-chip{flex:0 0 auto;width:30px;height:30px;border-radius:7px;border:1px solid rgba(23,22,26,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.st-sw-txt{display:flex;flex-direction:column;min-width:0}
.st-sw-nom{font-weight:600;color:var(--ink);line-height:1.3}
.st-sw-hex{font:500 .82rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--muted);letter-spacing:.02em}
.st-sw-wide .st-sw-why{display:block;color:var(--muted);font-size:.9rem;margin-top:3px;line-height:1.5}
.st-sw-wide .st-sw-chip{width:34px;height:34px}

/* ============================================================ FICHES ========= */
.st-ratios{margin:0 0 18px;padding:0 0 0 2px;list-style:none;display:grid;gap:8px}
.st-ratios li{position:relative;padding-left:26px}
.st-ratios li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border:2px solid var(--brass);border-radius:3px}

.st-pieces,.st-tenues{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.st-piece,.st-tenue{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-s);padding:15px 17px}
.st-piece h3,.st-tenue h3{margin:0 0 6px;font:600 1.08rem/1.3 var(--f-b);color:var(--indigo)}
.st-piece p,.st-tenue p{margin:0;color:var(--ink)}
.st-lex{white-space:nowrap;font-size:.9rem}

.st-reperes,.st-eviter{margin:0;display:grid;gap:0}
.st-reperes dt,.st-eviter dt{font-weight:600;color:var(--ink);margin:14px 0 4px;font-size:1.05rem}
.st-reperes dt:first-child,.st-eviter dt:first-child{margin-top:0}
.st-reperes dd,.st-eviter dd{margin:0;color:var(--muted);line-height:1.6}

.st-meteo{margin-top:4px}
.st-meteo-card{background:var(--ivory-2);border:1.5px solid var(--line);border-radius:var(--r-s);padding:14px 16px}
.st-meteo-card h3{margin:0 0 6px;font:600 1.05rem/1.3 var(--f-b);color:var(--brass-txt)}
.st-meteo-card p{margin:0;color:var(--ink)}

.st-veille{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.st-veille li{position:relative;padding:11px 14px 11px 40px;background:var(--info-bg);border-radius:var(--r-s)}
.st-veille li::before{content:"";position:absolute;left:14px;top:14px;width:14px;height:14px;border:2px solid var(--indigo);border-radius:4px}

.st-axes{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.st-axes li{display:flex;flex-direction:column;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-s);padding:11px 14px}
.st-axe-k{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--brass-txt);font-weight:600}
.st-axe-v{font-weight:600;color:var(--ink);text-transform:capitalize}

.st-notes{align-items:start}
.st-note{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-s);padding:16px 18px}
.st-note h2{margin:0 0 6px;font:600 1.15rem/1.3 var(--f-d);color:var(--indigo)}
.st-note p{margin:0;color:var(--ink)}

.st-card .card-meta{color:var(--muted)}
.st-sobre .promo-slot{display:none}

@media (max-width:560px){
  .st-qz-nav .qz-submit{margin-left:0;width:100%;justify-content:center}
  .st-qz-a{padding:12px 13px}
}

@media (prefers-reduced-motion: reduce){
  .st-qz-bar i{transition:none}
}