/*!
 * 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;
}

/* ── Respiration des cellules ─────────────────────────────────────────────────
   WHY cette regle : les cellules n'avaient AUCUN espacement horizontal. Mesure a
   l'ecran, sur les deux tableaux du site : « Fidelite, depuis 2022 » touchait
   « Scolaires cycle 2 et 3 », et « Lunette solaire Lunt LS60THa » touchait
   « 60 mm ». Deux valeurs voisines se lisaient comme une seule, ce qui est le pire
   defaut possible pour un tableau.

   WHY en `em` et non en pixels : l'espacement suit alors la taille du texte, y
   compris quand le visiteur l'agrandit. Un ecart fige en pixels se referme des que
   les caracteres grossissent, et le defaut revient a l'endroit meme ou l'on avait
   le plus besoin de lisibilite.

   WHY aucune largeur imposee colonne par colonne : les deux tableaux n'ont ni le
   meme nombre de colonnes ni la meme nature de contenu, et une largeur figee
   deviendrait fausse a la premiere ligne ajoutee. L'espacement suffit : mesure
   apres coup, la repartition automatique redevient lisible d'elle-meme. */
.fusion-table table th,
.fusion-table table td,
.ojbt-tableau-defilant table th,
.ojbt-tableau-defilant table td {
  padding-inline: 1.1em;
}

.fusion-table table th:first-child,
.ojbt-tableau-defilant table th:first-child,
.fusion-table table td:first-child,
.ojbt-tableau-defilant table td:first-child {
  padding-inline-start: 0;
}

/* WHY des chiffres a chasse fixe : les diametres et les focales se lisent en
   colonne. Avec une chasse proportionnelle, « 1 000 mm » et « 200 mm » ne
   s'alignent pas, et l'oeil ne peut plus les comparer d'un coup. */
.fusion-table table td,
.ojbt-tableau-defilant table td {
  font-variant-numeric: tabular-nums;
}