/* Socle UI WeFrame : jetons partagés + états de base. Spécificité nulle (:where) : les réglages des éléments gagnent toujours. */
:root{
  --wf-ui-r-card:14px;
  --wf-ui-r-btn:10px;
  --wf-ui-r-chip:8px;
  --wf-ui-r-badge:6px;
  --wf-ui-tap:44px;
  --wf-ui-s1:4px;--wf-ui-s2:8px;--wf-ui-s3:12px;--wf-ui-s4:16px;--wf-ui-s5:24px;--wf-ui-s6:32px;
  --wf-ui-dur:.2s;
  --wf-ui-ease:cubic-bezier(.2,.7,.2,1);
  --wf-ui-accent:#111;
  --wf-ui-on-accent:#fff;
  --wf-ui-focus:currentColor;
  --wf-ui-shadow:0 1px 2px rgb(0 0 0 / .06),0 4px 16px rgb(0 0 0 / .08);
}

:where([class^="wf-"],[class*=" wf-"]) :where(a,button,summary,select,input,[tabindex]):focus-visible{
  outline:2px solid var(--wf-ui-focus);
  outline-offset:2px;
}

:where(.wf-ui-btn){
  display:inline-flex;align-items:center;justify-content:center;gap:var(--wf-ui-s2);
  min-height:var(--wf-ui-tap);margin:0;padding:0 var(--wf-ui-s5);
  border:1px solid transparent;border-radius:var(--wf-ui-r-btn);
  background:var(--wf-ui-accent);color:var(--wf-ui-on-accent);
  font:inherit;font-weight:600;line-height:1;text-decoration:none;cursor:pointer;
  transition:filter var(--wf-ui-dur) var(--wf-ui-ease),transform var(--wf-ui-dur) var(--wf-ui-ease);
}
:where(.wf-ui-btn):hover{filter:brightness(1.08)}
:where(.wf-ui-btn):active{transform:translateY(1px)}
:where(.wf-ui-btn--ghost){background:transparent;color:inherit;border-color:currentColor}
:where(.wf-ui-btn[disabled],.wf-ui-btn[aria-disabled="true"]){opacity:.45;pointer-events:none}

:where(.wf-ui-chip){
  display:inline-flex;align-items:center;gap:var(--wf-ui-s1);
  min-height:32px;padding:0 var(--wf-ui-s3);border-radius:var(--wf-ui-r-chip);
  background:color-mix(in srgb,currentColor 8%,transparent);line-height:1;
}
:where(.wf-ui-badge){
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.8em;height:1.8em;padding:0 .45em;border-radius:var(--wf-ui-r-badge);
  font-weight:700;line-height:1;
}

:where(.wf-ui-seg){display:flex;max-width:460px;border:1px solid currentColor;border-radius:var(--wf-ui-r-btn);overflow:hidden}
:where(.wf-ui-seg) > :where(*){flex:1;min-height:var(--wf-ui-tap);margin:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
:where(.wf-ui-seg) > :where(* + *){border-left:1px solid currentColor}
:where(.wf-ui-seg) > :where([aria-pressed="true"],[aria-selected="true"],.is-active){background:var(--wf-ui-accent);color:var(--wf-ui-on-accent)}

/* Zone tactile 44 px sans changer la taille visible */
:where(.wf-ui-hit){position:relative}
:where(.wf-ui-hit)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--wf-ui-tap));height:max(100%,var(--wf-ui-tap));transform:translate(-50%,-50%)}

:where(.wf-ui-sr){position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

:where(.wf-ui-empty){display:grid;place-items:center;gap:var(--wf-ui-s2);padding:var(--wf-ui-s6) var(--wf-ui-s4);border:1px dashed color-mix(in srgb,currentColor 25%,transparent);border-radius:var(--wf-ui-r-card);text-align:center;opacity:.8}

@media (prefers-reduced-motion:reduce){
  :where(.wf-ui-btn,.wf-ui-seg > *){transition:none}
  :where(.wf-ui-btn):active{transform:none}
}