/* ═══════════════════════════════════════════════════════════════════
   CONFIGURATION DES COULEURS
   ───────────────────────────────────────────────────────────────────
   Couleurs du logo HDF 10 ans (habillage : titres, bandeaux, accents) :        */
:root {
	--brand-1: #130c80;
	/* bleu profond   */
	--brand-2: #5abaae;
	/* vert d'eau     */
	--brand-3: #f72154;
	/* framboise      */

	/* Couleurs des séries de graphiques - versions ajustées des
   couleurs du logo, validées pour la lisibilité (contraste et
   daltonisme). Si vous les changez, gardez des teintes proches. */
	--serie-1: #4640d6;
	/* bleu    (dérivé de --brand-1) : "déposées"            */
	--serie-2: #2e9e8f;
	/* vert    (dérivé de --brand-2) : "traitées / validées" */
	--serie-3: #e11d4f;
	/* rose    (dérivé de --brand-3) : "en cours / restant"  */
	--serie-4: #b45309;
	/* ambre   (complémentaire)      : "programmées"         */

	/* Rampe ordonnée (funnel LEADER), du plus clair au plus foncé */
	--rampe-1: #a5a1ec;
	--rampe-2: #7f7ae3;
	--rampe-3: #4640d6;
	--rampe-4: #221c86;

	/* Neutres */
	--ink: #1b1b33;
	--ink-2: #55556b;
	--ink-3: #8a8a9d;
	--surface: #ffffff;
	--line: #e3e3ec;
	--grid: #ececf3;
	--delta-pos: #1a7f37;
	--delta-neg: #c62828;
}

/* ═══════════════════════════════════════════════════════════════ */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
	scroll-behavior:smooth;
}

body {
	font-family:
		"Segoe UI",
		system-ui,
		-apple-system,
		sans-serif;
	background: #e7e8ef;
	color: var(--ink);
	font-size: 9pt;
	line-height: 1.35;
}

/* ── Pages A4 paysage ─────────────────────────────────────────── */
.page {
	width: 297mm;
	height: 210mm;
	background: var(--surface);
	margin: 8mm auto;
	box-shadow: 0 2px 14px rgba(20, 20, 60, 0.18);
	padding: 9mm 11mm 7mm;
	display: flex;
	flex-direction: column;
	gap: 2.8mm;
	position: relative;
	overflow: hidden;
}

@page {
	size: A4 landscape;
	margin: 0;
}

@media print {
	body {
		background: none;
	}

	/* 209.7mm : évite qu'un arrondi de rendu crée une page blanche intercalaire */
	.page {
		margin: 0;
		box-shadow: none;
		page-break-after: always;
		height: 209.7mm;
	}

	.page:last-child {
		page-break-after: auto;
	}

	.toolbar,
	#tooltip {
		display: none !important;
	}
}

/* ── Bandeau tricolore + en-têtes ─────────────────────────────── */
.stripe {
	display: flex;
	height: 1.6mm;
	border-radius: 1mm;
	overflow: hidden;
	flex: none;
}

.stripe i {
	flex: 1;
}

.stripe i:nth-child(1) {
	background: var(--brand-1);
}

.stripe i:nth-child(2) {
	background: var(--brand-2);
}

.stripe i:nth-child(3) {
	background: var(--brand-3);
}

.page-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex: none;
}

.page-head h2 {
	font-size: 15pt;
	font-weight: 700;
	color: var(--brand-1);
	letter-spacing: -0.01em;
}

.page-head .sub {
	font-size: 8pt;
	color: var(--ink-2);
	margin-top: 0.5mm;
}

.badge {
	font-size: 7.5pt;
	font-weight: 600;
	color: var(--brand-1);
	background: color-mix(in srgb, var(--brand-1) 7%, white);
	border: 1px solid color-mix(in srgb, var(--brand-1) 22%, white);
	padding: 1.2mm 3mm;
	border-radius: 10mm;
	white-space: nowrap;
}

.page-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: none;
	border-top: 1px solid var(--line);
	padding-top: 1.6mm;
	font-size: 6.5pt;
	color: var(--ink-3);
}

/* ── Tuiles KPI ───────────────────────────────────────────────── */
.kpis {
	display: grid;
	gap: 2.8mm;
	flex: none;
}

.kpis.c5 {
	grid-template-columns: repeat(5, 1fr);
}

.kpis.c6 {
	grid-template-columns: repeat(6, 1fr);
}

.kpi {
	background: color-mix(in srgb, var(--brand-1) 3.5%, white);
	border: 1px solid var(--line);
	border-left: 0.9mm solid var(--kc, var(--brand-1));
	border-radius: 1.6mm;
	padding: 1.8mm 2.4mm;
	min-height: 17mm;
}

.kpi .lab {
	font-size: 6.6pt;
	color: var(--ink-2);
	line-height: 1.25;
	min-height: 6mm;
}

.kpi .val {
	font-size: 14.5pt;
	font-weight: 650;
	letter-spacing: -0.01em;
	margin-top: 0.4mm;
}

.kpi .sub {
	font-size: 6.6pt;
	color: var(--ink-3);
	margin-top: 0.2mm;
}

.delta {
	font-size: 6.8pt;
	font-weight: 600;
}

.delta.pos {
	color: var(--delta-pos);
}

.delta.neg {
	color: var(--delta-neg);
}

.delta.nul {
	color: var(--ink-3);
	font-weight: 400;
}

/* ── Graphiques ───────────────────────────────────────────────── */
.charts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4mm;
	flex: 1;
	min-height: 0;
}

.chart {
	display: flex;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
}

.chart h3 {
	font-size: 8.5pt;
	font-weight: 650;
	color: var(--ink);
	flex: none;
	margin-bottom: 1mm;
}

.chart h3 small {
	font-weight: 400;
	color: var(--ink-3);
	font-size: 7pt;
}

.plot {
	flex: 1;
	min-height: 0;
	position: relative;
	overflow: hidden;
}

.plot svg {
	position: absolute;
	inset: 0;
	display: block;
}

.legend {
	display: flex;
	gap: 4mm;
	flex-wrap: wrap;
	flex: none;
	margin-top: 1.2mm;
	font-size: 6.8pt;
	color: var(--ink-2);
}

.legend .lg {
	display: inline-flex;
	align-items: center;
	gap: 1.4mm;
}

.legend .lg i {
	width: 2.6mm;
	height: 2.6mm;
	border-radius: 0.7mm;
	flex: none;
}

/* ── Jauges ───────────────────────────────────────────────────── */
.meter {
	margin-bottom: 2.2mm;
}

.meter .m-lab {
	display: flex;
	justify-content: space-between;
	font-size: 6.8pt;
	color: var(--ink-2);
	margin-bottom: 0.8mm;
}

.meter .m-lab b {
	color: var(--ink);
	font-weight: 650;
}

.meter .track {
	height: 2.4mm;
	border-radius: 2mm;
	background: color-mix(in srgb, var(--mc, var(--serie-2)) 16%, white);
	overflow: hidden;
}

.meter .fill {
	height: 100%;
	border-radius: 2mm;
	background: var(--mc, var(--serie-2));
}

/* ── Tableaux de données ──────────────────────────────────────── */
table.data {
	width: 100%;
	border-collapse: collapse;
	font-size: 6.4pt;
	flex: none;
}

table.data th,
table.data td {
	padding: 1mm 1.4mm;
	border-bottom: 1px solid var(--line);
}

table.data thead th {
	font-size: 6pt;
	font-weight: 600;
	color: var(--ink-2);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-align: right;
	border-bottom: 1.5px solid color-mix(in srgb, var(--brand-1) 35%, white);
	white-space: nowrap;
}

table.data thead th:first-child {
	text-align: left;
}

table.data td {
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--ink-2);
}

table.data td:first-child {
	text-align: left;
	color: var(--ink);
	max-width: 62mm;
}

table.data tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--brand-1) 2.5%, white);
}

table.data td:last-child,
table.data th:last-child {
	font-weight: 650;
	color: var(--ink);
	background: color-mix(in srgb, var(--brand-1) 6%, white);
}

.tbl-title {
	font-size: 7.5pt;
	font-weight: 650;
	color: var(--ink-2);
	margin-bottom: 1mm;
	flex: none;
}

/* ── Page synthèse ────────────────────────────────────────────── */
.cover-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex: none;
	padding: 2mm 0 1mm;
}

.cover-head h1 {
	font-size: 24pt;
	font-weight: 750;
	color: var(--brand-1);
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.cover-head .sub {
	font-size: 9.5pt;
	color: var(--ink-2);
	margin-top: 1.4mm;
}

.cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4mm;
	flex: 1;
	min-height: 0;
}

.card {
	border: 1px solid var(--line);
	border-top: 1.2mm solid var(--cc, var(--brand-1));
	border-radius: 2mm;
	padding: 3.2mm 3.6mm;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	min-height: 0;
}

.card h3 {
	font-size: 9.5pt;
	font-weight: 700;
	color: var(--ink);
}

.card .tag {
	font-size: 6.6pt;
	color: var(--ink-3);
	margin-bottom: 1.6mm;
}

.card .hero {
	font-size: 23pt;
	font-weight: 700;
	color: var(--cc, var(--brand-1));
	letter-spacing: -0.02em;
	line-height: 1;
}

.card .hero-lab {
	font-size: 7pt;
	color: var(--ink-2);
	margin: 0.6mm 0 2mm;
}

.card .rows {
	flex: 1;
}

.card .r {
	display: flex;
	justify-content: space-between;
	gap: 3mm;
	font-size: 7.4pt;
	padding: 0.9mm 0;
	border-bottom: 1px dotted var(--line);
}

.card .r:last-child {
	border-bottom: none;
}

.card .r span {
	color: var(--ink-2);
}

.card .r b {
	font-weight: 650;
	white-space: nowrap;
}

.card.note {
	background: color-mix(in srgb, var(--brand-1) 4%, white);
	border-top-color: var(--brand-2);
}

.card.note ul {
	list-style: none;
	font-size: 7.6pt;
	color: var(--ink-2);
}

.card.note li {
	padding: 1.2mm 0 1.2mm 4mm;
	position: relative;
	border-bottom: 1px dotted var(--line);
}

.card.note li:last-child {
	border-bottom: none;
}

.card.note li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2.6mm;
	width: 2mm;
	height: 2mm;
	border-radius: 50%;
	background: var(--brand-2);
}

.card.note li b {
	color: var(--ink);
}

/* ── Sections demi-page (AJA / DJA) ──────────────────────────── */
.half {
	display: flex;
	flex-direction: column;
	gap: 2.2mm;
	min-height: 0;
}

.half.grow {
	flex: 1;
}

.sec-title {
	font-size: 10.5pt;
	font-weight: 700;
	color: var(--brand-1);
	flex: none;
	display: flex;
	align-items: baseline;
	gap: 2.5mm;
}

.sec-title small {
	font-size: 7pt;
	font-weight: 400;
	color: var(--ink-3);
}

.divider {
	border: none;
	border-top: 1px solid var(--line);
	flex: none;
	margin: 1mm 0;
}

.cols {
	display: grid;
	gap: 4mm;
	min-height: 0;
}

.footnote {
	font-size: 6.4pt;
	color: var(--ink-3);
	flex: none;
}

/* ── Funnel ───────────────────────────────────────────────────── */
.funnel {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2.6mm;
	min-height: 0;
}

.fstage .f-lab {
	display: flex;
	justify-content: space-between;
	font-size: 7pt;
	color: var(--ink-2);
	margin-bottom: 0.7mm;
}

.fstage .f-lab b {
	color: var(--ink);
	font-weight: 650;
}

.fstage .f-bar {
	height: 5.5mm;
	border-radius: 0 1.4mm 1.4mm 0;
	min-width: 2mm;
}

/* ── Infobulle ────────────────────────────────────────────────── */
#tooltip {
	position: fixed;
	display: none;
	z-index: 99;
	pointer-events: none;
	background: var(--ink);
	color: #fff;
	border-radius: 6px;
	padding: 7px 10px;
	font-size: 11px;
	line-height: 1.5;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	max-width: 240px;
}

#tooltip .t-head {
	font-weight: 600;
	margin-bottom: 3px;
}

#tooltip .t-row {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

#tooltip .t-row i {
	width: 8px;
	height: 8px;
	border-radius: 2px;
	flex: none;
}

#tooltip .t-row b {
	margin-left: auto;
	font-weight: 600;
	padding-left: 10px;
}

/* ── Canevas de la frise (proportions du PPTX : 16/9) ─────────── */
.canvas {
	position: relative;
	width: 100%;
	aspect-ratio: 960/540;
	flex: none;
}

/* La grande flèche chronologique, teintée par famille d'étapes */
.frise {
	position: absolute;
	left: 2.4%;
	top: 41.11%;
	width: 96.35%;
	height: 24.44%;
	clip-path: polygon(0 30%, 88% 30%, 88% 0, 100% 50%, 88% 100%, 88% 70%, 0 70%);
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--serie-1) 15%, white) 0%,
		color-mix(in srgb, var(--serie-1) 15%, white) 40%,
		color-mix(in srgb, var(--serie-2) 16%, white) 47%,
		color-mix(in srgb, var(--serie-2) 16%, white) 63%,
		color-mix(in srgb, var(--serie-3) 13%, white) 71%,
		color-mix(in srgb, var(--serie-3) 13%, white) 100%
	);
}

/* Bulles-étapes (callouts), avec pointe vers la flèche */
.co {
	position: absolute;
	z-index: 3;
	background: color-mix(in srgb, var(--cc, var(--serie-1)) 7%, white);
	border: 1px solid color-mix(in srgb, var(--cc, var(--serie-1)) 45%, white);
	border-radius: 1.6mm;
	padding: 1.3mm 1.6mm;
	font-size: 6.1pt;
	line-height: 1.28;
	color: var(--ink-2);
	box-shadow: 0 1px 3px rgba(20, 20, 60, 0.08);
}

.co b {
	color: var(--ink);
	font-size: 6.3pt;
}

.co.down::after,
.co.up::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	border-left: 1.5mm solid transparent;
	border-right: 1.5mm solid transparent;
}

.co.down::after {
	bottom: -2.1mm;
	border-top: 2.2mm solid
		color-mix(in srgb, var(--cc, var(--serie-1)) 45%, white);
}

.co.up::after {
	top: -2.1mm;
	border-bottom: 2.2mm solid
		color-mix(in srgb, var(--cc, var(--serie-1)) 45%, white);
}

/* Bulles de délais (ovales ambre = « infobulles » de cadence) */
.ov {
	position: absolute;
	z-index: 3;
	border-radius: 50%;
	background: color-mix(in srgb, var(--serie-4) 9%, white);
	border: 1px solid color-mix(in srgb, var(--serie-4) 32%, white);
	color: color-mix(in srgb, var(--serie-4) 82%, black);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1.6mm 3.4mm;
	font-size: 5.8pt;
	line-height: 1.25;
	font-weight: 600;
}

.ov b {
	font-weight: 700;
}

/* Éléments posés sur la flèche */
.onA {
	position: absolute;
	z-index: 3;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid color-mix(in srgb, var(--cc, var(--serie-1)) 40%, white);
	border-radius: 1.4mm;
	padding: 1.1mm 1.5mm;
	font-size: 6pt;
	line-height: 1.28;
	color: var(--ink-2);
}

.onA b {
	color: var(--ink);
}

.onA .num {
	color: var(--cc, var(--serie-1));
	font-weight: 700;
}

/* Flèche verticale « Mail info SIEFA » */
.siefa {
	position: absolute;
	z-index: 2;
	left: 77.19%;
	top: 37.04%;
	width: 4.9%;
	height: 22.96%;
	clip-path: polygon(18% 0, 82% 0, 82% 68%, 100% 68%, 50% 100%, 0 68%, 18% 68%);
	background: color-mix(in srgb, var(--serie-2) 22%, white);
	display: flex;
	justify-content: center;
	padding: 1.2mm 1mm 0;
	font-size: 5.4pt;
	line-height: 1.2;
	font-weight: 600;
	text-align: center;
	color: color-mix(in srgb, var(--serie-2) 75%, black);
}

/* Connecteurs pointillés entre bulles et flèche */
.lnk {
	position: absolute;
	z-index: 1;
	width: 0;
	border-left: 1px dashed
		color-mix(in srgb, var(--cc, var(--serie-1)) 55%, white);
}

/* Renvoi (*) en haut à droite, comme sur l'original */
.canvas .note {
	position: absolute;
	right: 0;
	top: 0;
	width: 38%;
	z-index: 3;
	font-size: 5.8pt;
	color: red;
	line-height: 1.3;
	text-align: right;
}

/* ── Spécifique AJA : frises de jalons (« 2 ans / 4 ans / 5 ans ») ── */
.tline {
	position: absolute;
	z-index: 1;
	height: 0;
	border-top: 1.2px solid color-mix(in srgb, var(--brand-1) 40%, white);
}

.tline::after {
	content: "";
	position: absolute;
	right: -0.5mm;
	top: -1.15mm;
	border-top: 1mm solid transparent;
	border-bottom: 1mm solid transparent;
	border-left: 1.8mm solid color-mix(in srgb, var(--brand-1) 40%, white);
}

.tchip {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 6.3pt;
	font-weight: 600;
	color: color-mix(in srgb, var(--serie-4) 82%, black);
	background: color-mix(in srgb, var(--serie-4) 9%, white);
	border: 1px solid color-mix(in srgb, var(--serie-4) 32%, white);
	border-radius: 10mm;
	padding: 0.6mm 2.5mm;
	transform: translateY(-55%);
}

/* Annotation « installation de l'agriculteur (SIRET) » */
.sir {
	position: absolute;
	z-index: 2;
	font-size: 6.3pt;
	font-style: italic;
	color: var(--ink-2);
	line-height: 1.28;
}

/* Tiges fléchées des analyses (remplacent les flèches pleines dont
       le clip-path rognait le texte) */
.shaft {
	position: absolute;
	z-index: 1;
	width: 0;
	border-left: 1.4px solid color-mix(in srgb, var(--serie-2) 55%, white);
}

.shaft::after {
	content: "";
	position: absolute;
	left: -2.05mm;
	bottom: -0.5mm;
	border-left: 1.9mm solid transparent;
	border-right: 1.9mm solid transparent;
	border-top: 2.4mm solid color-mix(in srgb, var(--serie-2) 55%, white);
}

/* ── Spécifique LEADER ────────────────────────────────────────── */

/* Badges acteurs (GAL, SDR, DIRAP, ASP, DIGA) */
.actor {
	display: inline-block;
	color: #fff;
	font-size: 5.2pt;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.25mm 1.3mm;
	border-radius: 0.7mm;
	margin-right: 0.8mm;
	vertical-align: 0.1mm;
}

.actor.gal {
	background: var(--brand-1);
}
.actor.sdr {
	background: color-mix(in srgb, var(--serie-2) 85%, black);
}
.actor.dirap {
	background: var(--serie-4);
}
.actor.asp {
	background: var(--serie-1);
}
.actor.diga {
	background: var(--serie-3);
}

/* Lignes de phase sous la flèche (couleur par phase via --tc) */
.tline-leader {
	position: absolute;
	z-index: 1;
	height: 0;
	border-top: 1.2px solid
		color-mix(in srgb, var(--tc, var(--brand-1)) 45%, white);
}

.tline-leader::after {
	content: "";
	position: absolute;
	right: -0.5mm;
	top: -1.15mm;
	border-top: 1mm solid transparent;
	border-bottom: 1mm solid transparent;
	border-left: 1.8mm solid
		color-mix(in srgb, var(--tc, var(--brand-1)) 45%, white);
}

/* Étiquette de phase, posée sur sa ligne */
.ph {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 7pt;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--pc, var(--brand-1));
	background: var(--surface);
	border: 1px solid color-mix(in srgb, var(--pc, var(--brand-1)) 45%, white);
	border-radius: 10mm;
	padding: 0.6mm 2.5mm;
	transform: translateY(-55%);
}

/* Pastilles de délais (minimum / moyenne / maximum) */
.dl {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 5.9pt;
	font-weight: 600;
	line-height: 1.25;
	color: color-mix(in srgb, var(--serie-4) 82%, black);
	background: var(--surface);
	border: 1px solid color-mix(in srgb, var(--serie-4) 40%, white);
	border-radius: 10mm;
	padding: 0.6mm 1.6mm;
}

.dl.avg {
	background: color-mix(in srgb, var(--serie-4) 14%, white);
	font-weight: 700;
}

/* Libellés verticaux (dépôt / réalisation / paiement) */
.vlab {
	position: absolute;
	z-index: 2;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 6pt;
	font-weight: 700;
	color: var(--ink-2);
	text-align: center;
	letter-spacing: 0.02em;
}