/* jw-table-scroll.css — dire qu'un tableau d'article glisse (julienweb.fr, 13/09/2026)
 *
 * POURQUOI CE FICHIER EXISTE
 * --------------------------
 * Depuis le 11/09/2026, le gabarit d'article #6905 passe les tableaux en
 * `display:block; overflow-x:auto` sur mobile : un tableau plus large que la colonne glisse
 * dans son cadre au lieu de faire défiler toute la page. Les générateurs récents font la même
 * chose avec leur propre conteneur (.dg-tw, .uf-tw, .gl-tw) et une largeur minimale.
 *
 * Personne ne le disait au lecteur. Relevé du 13/09 à 375 px : 29 tableaux glissent, répartis
 * dans 17 articles — la coupure tombe en plein mot et la dernière colonne reste invisible.
 * D'où l'habillage posé par js/jw-table-scroll.js : dégradé au bord droit + mention sous le
 * tableau, les deux visibles SEULEMENT quand le tableau glisse vraiment, et estompés une fois
 * arrivé au bout.
 *
 * Les couleurs du dégradé viennent du JS (--jw-tw-fond / --jw-tw-fond0), qui lit le fond
 * réellement peint derrière le tableau : un fondu vers le blanc jurerait sur les sections
 * grises du site. Si le JS ne se charge pas, aucun habillage n'est posé et le tableau glisse
 * comme avant — dégradé, jamais cassé.
 *
 * Le premier article équipé, #11758, porte le même habillage EN DUR dans son contenu
 * (classes .dg-tw-h / .dg-tw-aide, écrites par son générateur) : le JS le reconnaît et le
 * laisse tranquille.
 */

.jw-tw-h {
	position: relative;
}

.jw-tw-h .jw-tw-aide {
	display: none;
	margin: 5px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #6b6591;
	text-align: right;
	transition: opacity .25s;
}

/* `is-glissant` est posé par le JS, et retiré dès que le tableau tient dans sa colonne
   (rotation de l'écran, fenêtre agrandie). Rien n'est affiché « au cas où ». */
.jw-tw-h.is-glissant .jw-tw-aide {
	display: block;
}

.jw-tw-h.is-glissant::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 24px; /* la hauteur de la mention : le dégradé s'arrête au bas du tableau */
	width: 36px;
	background: linear-gradient(to right, var(--jw-tw-fond0, rgba(255, 255, 255, 0)), var(--jw-tw-fond, #fff) 82%);
	pointer-events: none;
	transition: opacity .25s;
}

/* Arrivé au bout : il n'y a plus rien à découvrir, l'indice s'efface. */
.jw-tw-h.is-au-bout::after {
	opacity: 0;
}

.jw-tw-h.is-au-bout .jw-tw-aide {
	opacity: .35;
}

/* Un contenu qui glisse doit s'atteindre au clavier (WCAG 2.1.1) : le JS pose tabindex="0"
   sur la zone défilante, encore faut-il voir où on est. */
.jw-tw-h [tabindex="0"]:focus-visible {
	outline: 2px solid #1E91D4;
	outline-offset: 2px;
}