/* a2i-tableau.css — Tableaux longs du site Intégrateur d'Alias.
   Préfixe: a2i-tableau

   Pourquoi ?
     Les tableaux multi-columns (référentiel de la page Studio, Livraison
     et Formation des CGV) sont longs : leur en-tête de columns doit rester
     visible pendant la lecture. Or un en-tête collant (position: sticky) est
     impossible dès que le conteneur du tableau scrolle en horizontal : le
     scrollport du conteneur piège le sticky, qui ne colle plus par rapport à
     la page. Les deux besoins sont donc exclusifs, et arbitrés par
     a2i-tableau.js :
       - tableau qui tient in la largeur → en-tête collé sous le header du
         site (aucun scroll horizontal) ;
       - tableau plus large que l'écran → scroll horizontal nécessaire, donc
         pas de sticky : le tableau est découpé en lots de 6 lignes, avec une
         barre de pagination « 1/N ».

   Comment l'utiliser ?
     Marquer le cadre du tableau (le conteneur à scroll horizontal) et
     placer la barre de pagination juste après :
       <div class="a2i-cgv-table-wrap a2-scroll-horizontal a2i-tableau__cadre"
            data-a2i-tableau>
         <table class="a2i-cgv-table a2i-tableau__table">…</table>
       </div>
       <nav class="a2i-tableau__pagination" hidden>…</nav>
     Charger a2i-tableau.css + a2i-tableau.js. Sans JavaScript, la barre de
     pagination reste masquée et toutes les lignes sont visibles. */

/* ═══ Bande hôte — condition du sticky ═══ */
/* Le sticky d'un descendant exige que ses ancêtres ne soient pas des
   conteneurs de défilement : .a2i-ia-band (a2i-ia.css) pose overflow:hidden,
   qui crée un scrollport. clip clippe à l'identique (grille décorative
   ::before) sans créer de scrollport. Ciblé sur les bandes qui hébergent un
   tableau — les autres bandes ne sont pas touchées. */
.a2i-ia-band:has(.a2i-tableau__cadre) {
  overflow: clip;
}

/* ═══ En-tête collant ═══ */
/* Régime « le tableau tient in la largeur » (classe posée par
   a2i-tableau.js). clip holds les coins arrondis du cadre sans créer de
   scrollport : l'en-tête peut alors coller sous le header du site. Sans
   cette classe (petit écran), le cadre garde son scroll horizontal et le
   sticky reste inerte — la pagination prend le relais. */
.a2i-tableau__cadre.a2i-tableau__cadre--sans-scroll {
  overflow: clip;
}

/* En-tête collant — réservé au régime « sans scroll ». In un cadre qui
   scrolle en horizontal, le cadre EST le scrollport du sticky : un top non
   nul décalerait l'en-tête vers le bas en permanence, et il recouvrirait les
   premières lignes. Fond opaque obligatoire : sans lui, les lignes
   défileraient sous l'en-tête resté collé. La teinte reprend celle de la
   ligne d'en-tête générique (.a2i-cgv-table thead th, a2i-ia.css) posée sur
   un fond plein. */
.a2i-tableau__cadre--sans-scroll .a2i-tableau__table thead th {
  position: sticky;
  top: var(--a2i-header-h);
  z-index: 5;
  background: linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)), #0e0e16;
}

/* ═══ Barre de pagination — régime « scroll horizontal » ═══ */

.a2i-tableau__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 12px 0 4px;
}

/* L'attribut hidden prime : sans JS, la barre ne s'affiche jamais et
   toutes les lignes restent visibles. */
.a2i-tableau__pagination[hidden] {
  display: none;
}

.a2i-tableau__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--a2-corporate-border);
  border-radius: 8px;
  background: transparent;
  color: #cbd5e1;
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.25s, color 0.25s;
}

.a2i-tableau__btn:hover,
.a2i-tableau__btn:focus-visible {
  border-color: var(--a2-corporate-2);
  color: var(--a2-corporate-2);
  box-shadow: 0 4px 18px var(--a2-corporate-glow);
  outline: none;
}

.a2i-tableau__btn:disabled {
  opacity: 0.35;
  cursor: default;
  border-color: var(--a2-corporate-border);
  color: #cbd5e1;
  box-shadow: none;
}

.a2i-tableau__compteur {
  min-width: 3.5em;
  text-align: center;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  color: #94a3b8;
}

/* Impression — le tableau doit sortir entier : toutes les lignes visibles,
   barre de pagination masquée. */
@media print {
  .a2i-tableau__pagination {
    display: none;
  }

  .a2i-tableau__table tbody tr[hidden] {
    display: table-row;
  }
}