/* ==========================================================================
   API Table — styles front des tableaux.
   Variables surchargées en ligne par le shortcode (couleurs du bandeau).
   ========================================================================== */

.atp-table-wrap {
	--atp-bg:            #ffffff;
	--atp-ink:           #23262e;
	--atp-ink-soft:      #535353;
	--atp-line:          #E4E4E4;   /* bordure grise */
	--atp-head-bg:       #254594;   /* bandeau (surcharge possible en ligne) */
	--atp-head-ink:      #ffffff;   /* police bandeau (surcharge possible) */
	--atp-radius:        8px;
	--atp-row-h:         52px;      /* hauteur d'une ligne */
	--atp-font-size:     16px;
	--atp-pad-x:         16px;

	/* Pas de font-family imposée : on hérite de la typo du thème du site. */
	color: var(--atp-ink);
	-webkit-font-smoothing: antialiased;
	/* Léger alinéa à gauche, comme une puce. */
	margin: 1.5rem 0 1.5rem 1.2rem;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Table ------------------------------------------------------------------- */
.atp-table-wrap .atp-table {
	border-collapse: separate;
	border-spacing: 0;
	background: var(--atp-bg);
	border: 1px solid var(--atp-line);
	border-radius: var(--atp-radius);
	overflow: hidden;
	font-size: var(--atp-font-size);
	line-height: 1.35;
	/* Largeur selon le nombre de colonnes (classes posées par le rendu) :
	   tableau étroit (2 col) = un peu plus de la moitié ; large (4 col) = 100%. */
	width: auto;
}
/* Desktop : largeur minimale lisible. */
@media (min-width: 783px) {
	.atp-table-wrap .atp-table {
		min-width: 500px;
	}
	/* 2 colonnes : un peu plus de la moitié du contenu. */
	.atp-table-wrap.atp-cols-2 .atp-table { width: 60%; }
	/* 3 colonnes : large. */
	.atp-table-wrap.atp-cols-3 .atp-table { width: 80%; }
	/* 4 colonnes (et + ) : toute la largeur. */
	.atp-table-wrap.atp-cols-4 .atp-table,
	.atp-table-wrap.atp-cols-5 .atp-table,
	.atp-table-wrap.atp-cols-6 .atp-table { width: 100%; }
}

/* En-tête (bandeau coloré) ------------------------------------------------ */
.atp-table-wrap .atp-table thead th {
	text-align: center;
	font-weight: 600;
	color: var(--atp-head-ink);
	background: var(--atp-head-bg);
	padding: 12px var(--atp-pad-x);
	font-size: var(--atp-font-size);
	line-height: 1.25;
	vertical-align: middle;
	/* Titres sur 2 lignes si besoin (évite le scroll horizontal à 4 colonnes). */
	white-space: normal;
	word-break: normal;
	overflow-wrap: break-word;
}

/* Cellules ---------------------------------------------------------------- */
.atp-table-wrap .atp-table tbody td {
	text-align: center;
	padding: 0 var(--atp-pad-x);
	height: var(--atp-row-h);
	border-top: 1px solid var(--atp-line);
	vertical-align: middle;
	font-variant-numeric: tabular-nums;
}
.atp-table-wrap .atp-table tbody tr:first-child td {
	border-top: 0;
}

/* Légende source sous le tableau / graphique ------------------------------ */
.atp-table-wrap .atp-source,
.atp-source {
	font-size: 12px;
	color: #535353;
	font-style: italic;
	margin: .55rem 0 0;
}
.atp-source a {
	color: inherit;
	text-decoration: underline;
}

/* États ------------------------------------------------------------------- */
.atp-empty,
.atp-error {
	font-size: var(--atp-font-size);
	color: var(--atp-ink-soft);
}

/* Graphique --------------------------------------------------------------- */
.atp-chart-wrap {
	background: var(--atp-bg);
	border: 1px solid var(--atp-line);
	border-radius: var(--atp-radius);
	padding: 1rem 1.2rem;
	margin: 1.5rem 0 1.5rem 1.2rem;
}

/* Responsive : pas de scroll, on resserre un peu. ------------------------- */
@media (max-width: 782px) {
	.atp-table-wrap {
		margin-left: 0;
		--atp-pad-x: 10px;
		--atp-font-size: 15px;
	}
	.atp-table-wrap .atp-table {
		width: 100%;
	}
}