/* ==========================================================================
   ie24 — Graphiques dans les articles ([ie24_graphique])
   Barres horizontales ou colonnes, dessinées en HTML : lisibles sur
   téléphone, chiffres en clair pour les moteurs et les lecteurs d'écran.
   ========================================================================== */

.ie24-graph {
	margin: 2rem 0;
	padding: 1.1rem 1.2rem 0.9rem;
	background: var(--paper-2, #f3f0e6);
	border-top: 3px solid var(--ink, #16140d);
	font-family: var(--font-sans, system-ui, sans-serif);
}
.ie24-graph-tete { display: block; margin: 0 0 0.9rem; }
.ie24-graph-titre {
	display: block;
	font-family: var(--font-serif, Georgia, serif);
	font-size: 1.12rem;
	line-height: 1.3;
	color: var(--ink, #16140d);
}
.ie24-graph-note { display: block; margin-top: 0.25rem; font-size: 0.82rem; line-height: 1.45; color: var(--ink-mute, #6d6552); }

/* --- Barres horizontales --- */
.ie24-graph-corps { position: relative; }
.ie24-graph-ligne {
	display: grid;
	grid-template-columns: minmax(8.5rem, 34%) 1fr 4.6rem;
	align-items: center;
	gap: 0.6rem;
	padding: 0.28rem 0;
	font-size: 0.84rem;
	line-height: 1.25;
}
.ie24-graph-lib { color: var(--ink-soft, #3b372c); }
.ie24-graph-barre { position: relative; display: block; height: 0.8rem; background: rgba(22, 20, 13, 0.06); }
.ie24-graph-barre i { position: absolute; inset: 0 auto 0 0; display: block; background: var(--ink-soft, #3b372c); }
.ie24-graph-ligne.is-accent .ie24-graph-barre i { background: var(--accent, #8a1711); }
.ie24-graph-ligne.is-accent .ie24-graph-lib,
.ie24-graph-ligne.is-accent .ie24-graph-val { color: var(--ink, #16140d); font-weight: 700; }
.ie24-graph-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink, #16140d); white-space: nowrap; }

/* --- Colonnes --- */
.ie24-graph--colonnes .ie24-graph-corps { display: flex; height: 13rem; padding: 0 0 1.5rem 3.4rem; }
.ie24-graph-axe { position: absolute; left: 0; top: 0; bottom: 1.5rem; width: 3.2rem; }
.ie24-graph-axe span {
	position: absolute;
	right: 0;
	transform: translateY(50%);
	font-size: 0.7rem;
	color: var(--ink-mute, #6d6552);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.ie24-graph-trace {
	position: relative;
	flex: 1;
	display: flex;
	align-items: flex-end;
	gap: 2px;
	border-bottom: 1px solid var(--rule-strong, #b9b19a);
	background: linear-gradient(to top, transparent calc(50% - 0.5px), rgba(22, 20, 13, 0.1) calc(50% - 0.5px), rgba(22, 20, 13, 0.1) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
		linear-gradient(to bottom, rgba(22, 20, 13, 0.1) 1px, transparent 1px);
}
.ie24-graph-col { position: relative; flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; outline: none; cursor: default; }
.ie24-graph-col i { display: block; width: 100%; background: var(--ink-soft, #3b372c); transition: opacity 0.15s ease; }
.ie24-graph-col.is-accent i { background: var(--accent, #8a1711); }
.ie24-graph-col b {
	position: absolute;
	left: 0;
	top: calc(100% + 0.35rem);
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--ink-mute, #6d6552);
	white-space: nowrap;
}
.ie24-graph-col:hover i, .ie24-graph-col:focus-visible i { opacity: 0.72; }
.ie24-graph-col:hover::after, .ie24-graph-col:focus-visible::after {
	content: attr(data-val);
	position: absolute;
	bottom: calc(100% + 0.4rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	padding: 0.3rem 0.5rem;
	background: var(--ink, #16140d);
	color: #fff;
	font-size: 0.74rem;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
}
.ie24-graph-col:first-child:hover::after, .ie24-graph-col:first-child:focus-visible::after { left: 0; transform: none; }
.ie24-graph-col:last-child:hover::after, .ie24-graph-col:last-child:focus-visible::after { left: auto; right: 0; transform: none; }

/* --- Chiffres et source --- */
.ie24-graph-chiffres { margin: 0.6rem 0 0; font-size: 0.8rem; }
.ie24-graph-chiffres summary { cursor: pointer; color: var(--ink-soft, #3b372c); font-weight: 600; }
.ie24-graph-chiffres table { width: 100%; margin: 0.5rem 0 0; border-collapse: collapse; }
.ie24-graph-chiffres th, .ie24-graph-chiffres td { padding: 0.25rem 0.4rem; border-bottom: 1px solid var(--rule, #d4cbb2); text-align: left; font-weight: 400; }
.ie24-graph-chiffres td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ie24-graph-source { margin: 0.55rem 0 0; font-size: 0.76rem; line-height: 1.45; color: var(--ink-mute, #6d6552); }
.ie24-graph-source a { color: var(--accent, #8a1711); }

@media (max-width: 560px) {
	.ie24-graph { padding: 0.95rem 0.85rem 0.75rem; margin-left: -0.25rem; margin-right: -0.25rem; }
	.ie24-graph-ligne { grid-template-columns: 1fr 3.9rem; gap: 0.15rem 0.5rem; }
	.ie24-graph-lib { grid-column: 1 / -1; }
	.ie24-graph--colonnes .ie24-graph-corps { height: 11rem; padding-left: 2.9rem; }
	.ie24-graph-axe { width: 2.7rem; }
	.ie24-graph-trace { gap: 1px; }
	.ie24-graph--annees-serrees .ie24-graph-col b.is-impair { display: none; }
}