/* ==========================================================================
   sap-workspace.css — visuel « Espace de travail SAP » du Hero.
   Variables sémantiques uniquement (6 thèmes). Fenêtre technique sobre :
   barre + repères, onglets accessibles, listes. Repli sans JS : blocs empilés.
   ========================================================================== */

.sapws {
  width: 100%;
  max-width: 35rem;
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Barre supérieure + repères de fenêtre (décoratifs) */
.sapws__bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0.6rem var(--space-4);
  background: var(--surface-2);
  border-bottom: var(--bw) solid var(--border);
}
.sapws__dots { display: inline-flex; gap: 0.35rem; }
.sapws__dots i { width: 0.6rem; height: 0.6rem; border-radius: var(--radius-pill); background: var(--border-strong); display: block; }
.sapws__title { font-family: var(--font-mono); font-size: var(--fs-tag); letter-spacing: 0.04em; color: var(--muted); }

/* Onglets — masqués tant que JS n'a pas activé le mode onglets. */
.sapws__tabs { display: none; }
.sapws--enhanced .sapws__tabs {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  padding: var(--space-3) var(--space-3) 0;
  border-bottom: var(--bw) solid var(--border);
}
.sapws__tab {
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  font-weight: 600; font-size: var(--fs-small);
  color: var(--muted);
  background: transparent;
  border: var(--bw) solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.sapws__tab:hover { background: var(--accent); color: var(--text); }
.sapws__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Sélection : PAS uniquement la couleur → gras + fond + barre inférieure. */
.sapws__tab[aria-selected="true"] {
  color: var(--primary);
  background: var(--accent);
  border-bottom-color: var(--primary);
  font-weight: 700;
}

/* Panneaux */
.sapws__panels { padding: var(--space-5) var(--space-5) var(--space-6); }
.sapws__panel + .sapws__panel { margin-top: var(--space-4); border-top: var(--bw) solid var(--border); padding-top: var(--space-4); }
.sapws--enhanced .sapws__panel + .sapws__panel { margin-top: 0; border-top: 0; padding-top: 0; }
.sapws--enhanced .sapws__panel[hidden] { display: none; }
.sapws__panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sapws__panel-title { font-size: var(--fs-small); font-weight: 700; margin-bottom: var(--space-2); }
.sapws--enhanced .sapws__panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.sapws__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.sapws__list li { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--fs-body); color: var(--text); }
.sapws__mark { color: var(--primary); font-weight: 700; flex: 0 0 auto; }

/* Fondu discret au changement d'onglet (mode JS). */
@keyframes sapws-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.sapws--enhanced .sapws__panel:not([hidden]) { animation: sapws-fade 0.25s ease; }
@media (prefers-reduced-motion: reduce) {
  .sapws--enhanced .sapws__panel:not([hidden]) { animation: none; }
  .sapws__tab { transition: none; }
}