/**
 * Responsive Tables Gutenberg
 * Front-end styles
 */

:root {
	--rtg-breakpoint: 782px;
	--rtg-min-width: 640px;
	--rtg-border: rgba(0, 0, 0, .12);
	--rtg-border-strong: rgba(0, 0, 0, .18);
	--rtg-head-bg: rgba(0, 0, 0, .04);
	--rtg-zebra: rgba(0, 0, 0, .02);
	--rtg-label: rgba(0, 0, 0, .62);
	--rtg-radius: 6px;
	--rtg-pad-y: .65rem;
	--rtg-pad-x: .85rem;
}

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

figure[data-rtg] {
	margin-inline: 0;
}

figure[data-rtg] table {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
}

figure[data-rtg] th,
figure[data-rtg] td {
	padding: var(--rtg-pad-y) var(--rtg-pad-x);
	border: 1px solid var(--rtg-border);
	text-align: left;
	vertical-align: top;
	word-break: break-word;
	hyphens: auto;
}

figure[data-rtg] thead th {
	background: var(--rtg-head-bg);
	font-weight: 600;
	border-bottom-color: var(--rtg-border-strong);
}

figure[data-rtg] tbody tr:nth-child(even) {
	background: var(--rtg-zebra);
}

figure[data-rtg] figcaption {
	font-size: .875em;
	opacity: .8;
	margin-top: .5rem;
}

/* Alignements Gutenberg conserves */
figure[data-rtg] .has-text-align-center { text-align: center; }
figure[data-rtg] .has-text-align-right  { text-align: right; }

/* -------------------------------------------------------------------------
 * Mode SCROLL — defilement horizontal
 * ---------------------------------------------------------------------- */

figure[data-rtg="scroll"] .rtg-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	position: relative;
}

figure[data-rtg="scroll"] .rtg-scroll:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

figure[data-rtg="scroll"] .rtg-scroll table {
	min-width: var(--rtg-min-width);
}

figure[data-rtg="scroll"] .rtg-scroll::-webkit-scrollbar {
	height: 8px;
}

figure[data-rtg="scroll"] .rtg-scroll::-webkit-scrollbar-thumb {
	background: var(--rtg-border-strong);
	border-radius: 4px;
}

/* Indicateurs d'ombre laterale */
figure[data-rtg="scroll"] .rtg-scroll::before,
figure[data-rtg="scroll"] .rtg-scroll::after {
	content: "";
	position: sticky;
	top: 0;
	display: block;
	width: 26px;
	height: 100%;
	pointer-events: none;
	opacity: 0;
	transition: opacity .18s ease;
}

figure[data-rtg="scroll"] .rtg-scroll.is-start::after,
figure[data-rtg="scroll"] .rtg-scroll.is-end::before {
	opacity: 1;
}

/* Hint textuel affiche une seule fois */
.rtg-hint {
	font-size: .8125em;
	opacity: .65;
	margin: .35rem 0 0;
	display: none;
}

figure[data-rtg="scroll"] .rtg-scroll.is-scrollable ~ .rtg-hint {
	display: block;
}

/* -------------------------------------------------------------------------
 * Mode STACK — cartes empilees
 * ---------------------------------------------------------------------- */

/*
 * Le bloc @media du mode "stack" est genere dynamiquement par le plugin
 * (voir rtg_stack_media_css() dans responsive-tables.php) afin de respecter
 * le point de rupture configurable dans les reglages.
 * Les media queries CSS n'acceptent pas les variables custom.
 */

/* -------------------------------------------------------------------------
 * Compatibilite Elementor
 * ---------------------------------------------------------------------- */

/* Elementor applique des marges/largeurs sur les tables du text-editor.
   On neutralise uniquement dans notre wrapper. */
.elementor-widget-container figure[data-rtg],
figure[data-rtg].rtg-elementor {
	margin: 0 0 1.2em;
	max-width: 100%;
}

figure[data-rtg].rtg-elementor table {
	margin: 0;
	table-layout: auto;
}

/* Elementor force parfois des largeurs inline heritees de TinyMCE */
figure[data-rtg].rtg-elementor table[width],
figure[data-rtg].rtg-elementor td[width],
figure[data-rtg].rtg-elementor th[width] {
	width: auto !important;
}

figure[data-rtg].rtg-elementor table[style*="width"] {
	width: 100% !important;
}

/* Neutralise les hauteurs fixes qui cassent l'empilement */
figure[data-rtg].rtg-elementor tr[height],
figure[data-rtg].rtg-elementor td[height] {
	height: auto !important;
}

/* -------------------------------------------------------------------------
 * Theme sombre
 * ---------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	:root {
		--rtg-border: rgba(255, 255, 255, .16);
		--rtg-border-strong: rgba(255, 255, 255, .26);
		--rtg-head-bg: rgba(255, 255, 255, .06);
		--rtg-zebra: rgba(255, 255, 255, .03);
		--rtg-label: rgba(255, 255, 255, .68);
	}
}

/* -------------------------------------------------------------------------
 * Impression
 * ---------------------------------------------------------------------- */

@media print {
	figure[data-rtg] .rtg-scroll {
		overflow: visible !important;
	}
	figure[data-rtg] table {
		min-width: 0 !important;
	}
	.rtg-hint {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
 * Accessibilite : mouvement reduit
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	figure[data-rtg="scroll"] .rtg-scroll::before,
	figure[data-rtg="scroll"] .rtg-scroll::after {
		transition: none;
	}
}