/* ============================================================
 * Scrollable Tabs — Phase 10 Sprint 2 (2026-05-09)
 *
 * Pattern réutilisable pour les rangées de tabs qui débordent
 * sur mobile. Sur les écrans étroits, on bascule en scroll
 * horizontal avec scroll-snap pour que chaque tab snap au focus.
 * Indicateur d'ombre droite/gauche pour révéler qu'il y a plus
 * de contenu, masque les barres de scroll natives.
 *
 * Usage HTML :
 *   <div class="tabs-scrollable" role="tablist">
 *     <a class="tab" role="tab">Onglet 1</a>
 *     <a class="tab" role="tab">Onglet 2</a>
 *     ...
 *   </div>
 *
 * Pas de modification visuelle sur >= md (768px). Mobile-first.
 * ============================================================ */

.tabs-scrollable {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 1rem;
  /* Masque la scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Ombres indicatives gauche/droite */
  background:
    linear-gradient(to right, var(--bg-surface, #fff) 30%, rgba(255, 255, 255, 0)) left center / 16px 100% no-repeat local,
    linear-gradient(to left,  var(--bg-surface, #fff) 30%, rgba(255, 255, 255, 0)) right center / 16px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.10), rgba(15, 23, 42, 0)) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.10), rgba(15, 23, 42, 0)) right center / 12px 100% no-repeat scroll;
  background-color: var(--bg-surface, #fff);
}

.tabs-scrollable::-webkit-scrollbar {
  display: none;
}

.tabs-scrollable > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

[data-mode="dark"] .tabs-scrollable,
.dark .tabs-scrollable {
  background:
    linear-gradient(to right, var(--bg-surface) 30%, rgba(15, 23, 42, 0)) left center / 16px 100% no-repeat local,
    linear-gradient(to left,  var(--bg-surface) 30%, rgba(15, 23, 42, 0)) right center / 16px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)) right center / 12px 100% no-repeat scroll;
  background-color: var(--bg-surface);
}

/* Au-delà de tablette, on lève les contraintes scroll si l'espace suffit */
@media (min-width: 768px) {
  .tabs-scrollable {
    overflow-x: visible;
    background: none;
    scroll-snap-type: none;
  }
}