/* ═══════════════════════════════════════════════════════════════════════════
   a2-scroll-horizontal-lite.css — Scroll horizontal des conteneurs larges (lite)
   Préfixe : a2-scroll-horizontal-* / classe utilitaire sur le conteneur.

   Pourquoi ?
     Les tableaux multi-colonnes (CGV, Studio, confidentialité) et tout
     contenu plus large que le viewport débordent en portrait smartphone :
     le conteneur doit proposer un scroll horizontal INTERNE avec la
     scrollbar du socle — même épaisseur et même couleur que le scroll
     vertical (voir css/a2-scrollbar-lite.css). La barre n'apparaît que
     si le contenu dépasse.

   Comment l'utiliser ?
     Appliquer la classe .a2-scroll-horizontal sur le conteneur scrollable
     (ex. le wrap d'un tableau) et charger le compagnon
     a2-scroll-horizontal-lite.js : drag à la souris (curseur grab) —
     le tactile scrolle déjà nativement avec inertie. Les variables
     --a2-scrollbar-* viennent de css/a2-scrollbar-lite.css quand il est
     chargé ; chaque fallback reprend la même valeur (6px, purple
     corporate #667eea à 30 %, 55 % au survol, piste transparente) —
     le fichier est autonome.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Classe utilitaire : scroll horizontal adaptatif (apparaît seulement si
   nécessaire). min-width: 0 est indispensable dans un parent flex pour
   que le scroll s'adapte à la largeur disponible. */
.a2-scroll-horizontal {
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
}

/* Affordance du drag souris (compagnon a2-scroll-horizontal-lite.js) —
   pointer:fine uniquement : sur tactile le swipe natif suffit.
   Safari ancien ne connaît que la forme préfixée -webkit-grab —
   déclarée avant la forme standard (ignorée si inconnue). */
@media (pointer: fine) {
  .a2-scroll-horizontal {
    cursor: -webkit-grab;
    cursor: grab;
  }
  .a2-scroll-horizontal--drag {
    cursor: -webkit-grabbing;
    cursor: grabbing;
    user-select: none;
  }
}

/* ═══ Scrollbar — même rendu que a2-scrollbar-lite.css ═══ */

/* Firefox uniquement — @-moz-document est ignoré par Chrome/Safari/Edge.
   Firefox ne supporte pas ::-webkit-scrollbar ; scrollbar-width: thin est
   la seule option (Firefox ne permet pas de fixer une hauteur en px). */
@-moz-document url-prefix() {
  .a2-scroll-horizontal {
    scrollbar-width: thin;
    scrollbar-color: var(--a2-scrollbar-thumb, rgba(102, 126, 234, 0.3)) var(--a2-scrollbar-track, transparent);
  }
}

/* WebKit / Blink (Chrome, Safari, Edge) */
.a2-scroll-horizontal::-webkit-scrollbar {
  width: var(--a2-scrollbar-size, 6px);
  height: var(--a2-scrollbar-size, 6px);
}

.a2-scroll-horizontal::-webkit-scrollbar-track {
  background: var(--a2-scrollbar-track, transparent);
}

.a2-scroll-horizontal::-webkit-scrollbar-thumb {
  background: var(--a2-scrollbar-thumb, rgba(102, 126, 234, 0.3));
  border-radius: var(--a2-scrollbar-radius, 2px);
}

.a2-scroll-horizontal::-webkit-scrollbar-thumb:hover {
  background: var(--a2-scrollbar-thumb-hover, rgba(102, 126, 234, 0.55));
}