/*!
 * Tableaux plus larges que leur colonne — site UPS in Space / OJBT.
 *
 * WHY cette feuille existe : le tableau des formules d'intervention demande 388
 * pixels au minimum, quatre colonnes de texte, et la colonne qui l'accueille en
 * fait 260 sur un écran de 320. Avada pose `overflow-x: hidden` sur ses
 * conteneurs : le tableau n'était donc pas seulement à l'étroit, il était
 * **coupé**, et la colonne « Tarif » restait invisible et inatteignable sur un
 * téléphone. Aucun réglage d'Avada ne couvre ce cas ; l'élément Tableau n'a ni
 * mode adaptatif ni zone de défilement.
 *
 * WHY un conteneur et non `display: block` sur le tableau lui-même : la zone qui
 * défile doit pouvoir recevoir le focus et porter un nom, et un `role="region"`
 * posé sur un `<table>` lui retirerait son rôle de tableau. Le conteneur est
 * fabriqué à l'affichage par tableaux.js, qui le nomme d'après la légende.
 *
 * WHY une indication écrite plutôt qu'un simple dégradé : un ombrage sur le bord
 * droit ne se voit pas de tout le monde, et ne se lit pas du tout au lecteur
 * d'écran. La phrase, elle, se lit dans les deux cas, et elle ne s'affiche que
 * lorsque le tableau déborde vraiment.
 */

.ojbt-tableau-defilant {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* La zone reçoit le focus au clavier : il doit se voir. */
.ojbt-tableau-defilant:focus-visible {
  outline: 2px solid var(--awb-color5);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Un tableau qui tient dans sa colonne ne doit pas changer d'allure. */
.ojbt-tableau-defilant > table {
  margin-bottom: 0;
}

.ojbt-tableau-indice {
  margin: 6px 0 18px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--awb-custom_color_1);
}

.ojbt-tableau-indice::before {
  content: "\2194";
  margin-right: 0.45em;
  font-weight: 700;
}