/* ═══════════════════════════════════════════════════════════════
   SGC — Kit d'états & interactions réutilisable (21/06/2026)
   Boutons (tous états), skeletons, états vide/erreur, feedback.
   Accessible : focus-visible, aria-busy, prefers-reduced-motion, tap 40px+.
   Tokens SGC (sgc-variables.css). API JS : sgc-states.js.
   Namespacé .sgc-btn / .sgc-st-* — aucune collision avec l'existant.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --sgc-st-ring: 0 0 0 3px rgba(var(--accent-rgb), .35);
  --sgc-st-dur: .18s;
  --sgc-st-ease: var(--ease, cubic-bezier(.4, 0, .2, 1));
}

/* ───────────────── BOUTON ───────────────── */
.sgc-btn {
  --_bg: var(--surface2);
  --_bd: var(--border);
  --_fg: var(--textbright);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box; min-height: 40px; padding: 0 16px;
  font-family: var(--font-display, inherit); font-size: var(--fs-md);
  font-weight: 600; letter-spacing: .2px; line-height: 1; white-space: nowrap;
  color: var(--_fg); background: var(--_bg);
  border: 1px solid var(--_bd); border-radius: var(--radius);
  cursor: pointer; user-select: none; position: relative; isolation: isolate;
  transition: background var(--sgc-st-dur) var(--sgc-st-ease),
              border-color var(--sgc-st-dur) var(--sgc-st-ease),
              color var(--sgc-st-dur) var(--sgc-st-ease),
              box-shadow var(--sgc-st-dur) var(--sgc-st-ease),
              transform .08s ease;
  -webkit-tap-highlight-color: transparent;
}
.sgc-btn__ico { display: inline-flex; width: 16px; height: 16px; flex: 0 0 auto; }
.sgc-btn__ico svg { width: 100%; height: 100%; }

/* Variantes */
.sgc-btn--primary   { --_bg: var(--accent); --_bd: var(--accent); --_fg: #06121e; }
.sgc-btn--secondary { --_bg: var(--surface2); --_bd: var(--border); --_fg: var(--textbright); }
.sgc-btn--ghost     { --_bg: transparent; --_bd: transparent; --_fg: var(--textmid); }
.sgc-btn--danger    { --_bg: rgba(255,80,80,.12); --_bd: rgba(255,80,80,.45); --_fg: var(--danger); }

/* Tailles */
.sgc-btn--sm { min-height: 32px; padding: 0 12px; font-size: var(--fs-base, 13px); gap: 6px; }
.sgc-btn--lg { min-height: 48px; padding: 0 22px; font-size: var(--fs-lg); }
.sgc-btn--block { display: flex; width: 100%; }

/* Hover (pointeur fin uniquement, jamais si disabled/loading) */
@media (hover: hover) {
  .sgc-btn:not(:disabled):not(.is-loading):hover { filter: brightness(1.08); border-color: rgba(var(--accent-rgb), .5); }
  .sgc-btn--ghost:not(:disabled):not(.is-loading):hover { background: rgba(var(--accent-rgb), .08); color: var(--textbright); filter: none; }
}
/* Focus clavier — anneau accent net */
.sgc-btn:focus-visible { outline: none; box-shadow: var(--sgc-st-ring); border-color: var(--accent); z-index: 1; }
/* Press — scale centré (n'affecte pas la mise en page) */
.sgc-btn:not(:disabled):not(.is-loading):active { transform: scale(.97); }

/* Disabled */
.sgc-btn:disabled, .sgc-btn[aria-disabled="true"], .sgc-btn.is-disabled {
  opacity: .5; cursor: not-allowed; filter: none; transform: none; box-shadow: none;
}
/* Loading — texte masqué (largeur conservée) + spinner centré */
.sgc-btn.is-loading { cursor: progress; color: transparent !important; pointer-events: none; }
.sgc-btn.is-loading > * { visibility: hidden; }
.sgc-btn.is-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto; visibility: visible;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--_fg); border-top-color: transparent;
  animation: sgc-st-spin .7s linear infinite;
}
/* Loading générique sur N'IMPORTE QUEL <button> (sgcAction sur boutons non-.sgc-btn,
   ex. .cmd-btn / .mkt-submit-btn). Spinner clair, visible sur les boutons sombres SGC. */
button.is-loading {
  position: relative; cursor: progress; pointer-events: none;
  color: transparent !important;
}
button.is-loading > * { visibility: hidden; }
button.is-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto; visibility: visible;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(230,240,255,.7); border-top-color: transparent;
  animation: sgc-st-spin .7s linear infinite;
}

/* ───────────────── SKELETON ───────────────── */
.sgc-st-skeleton {
  display: block; position: relative; overflow: hidden;
  /* lumière semi-transparente → visible sur n'importe quel fond sombre (8 écrans consommateurs) */
  background: rgba(255,255,255,.055); border-radius: var(--radius);
}
.sgc-st-skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform: translateX(-100%); animation: sgc-st-shimmer 1.4s infinite;
}
.sgc-st-skeleton--text    { height: .9em; margin: .35em 0; border-radius: 4px; }
.sgc-st-skeleton--title   { height: 1.4em; width: 60%; margin: .4em 0 .8em; border-radius: 5px; }
.sgc-st-skeleton--line-sm { width: 40%; }
.sgc-st-skeleton--circle  { border-radius: 50%; }
.sgc-st-skeleton--btn     { height: 40px; width: 120px; border-radius: var(--radius); }
.sgc-st-skeleton--card    { height: 120px; border-radius: var(--radius-lg, var(--radius)); }
/* Presets (sgcSkeleton('list'|'grid'|'page')) */
.sgc-st-skel-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.sgc-st-skel-row  { height: 40px; border-radius: var(--radius); }
.sgc-st-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 4px 0; }

/* ───────────────── ÉTATS VIDE / ERREUR ───────────────── */
.sgc-st-empty, .sgc-st-error {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; padding: 40px 24px; color: var(--textsoft);
}
.sgc-st-ico { width: 44px; height: 44px; opacity: .6; display: inline-flex; }
.sgc-st-ico svg { width: 100%; height: 100%; }
.sgc-st-error .sgc-st-ico { color: var(--danger); opacity: .85; }
.sgc-st-title { font-family: var(--font-display, inherit); font-size: var(--fs-lg); font-weight: 600; color: var(--textbright); }
.sgc-st-sub { font-size: var(--fs-md); color: var(--textsoft); max-width: 44ch; line-height: 1.5; }
.sgc-st-actions { margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ───────────────── KEYFRAMES ───────────────── */
@keyframes sgc-st-spin    { to { transform: rotate(360deg); } }
@keyframes sgc-st-shimmer { 100% { transform: translateX(100%); } }
@keyframes sgc-st-pulse   { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* ───────────────── ACCESSIBILITÉ — mouvement réduit ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .sgc-btn { transition: color .01s, background .01s; }
  .sgc-btn:not(:disabled):not(.is-loading):active { transform: none; }
  .sgc-btn.is-loading::after { animation-duration: 1.6s; }
  .sgc-st-skeleton::after { animation: none; }
  .sgc-st-skeleton { animation: sgc-st-pulse 1.6s ease-in-out infinite; }
}