/* ============================================================
   Pages IGA — composants visuels et animations
   S'appuie sur le design system de main.css
   ============================================================ */

:root {
	--iga-ok: #4ade80;
	--iga-warn: #fbbf24;
	--iga-danger: #f87171;
	--iga-idle: #64748b;
	--iga-violet: #a78bfa;
}

.iga-wide {
	max-width: 62rem;
}

.iga-lead {
	font-size: 1.1rem;
	color: var(--fg);
}

/* ===== Definition en une phrase ===== */

.iga-definition {
	margin: 0 0 2rem 0;
	padding: 1.5rem 1.75rem;
	border-left: solid 3px var(--accent);
	border-radius: 0 8px 8px 0;
	background: linear-gradient(90deg, var(--accent-soft), transparent 80%);
	font-size: 1.05rem;
	line-height: 1.7;
}

	.iga-definition strong {
		color: var(--fg-strong);
	}

/* ===== Grille de tuiles ===== */

.iga-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem 0;
}

.iga-tile {
	position: relative;
	padding: 1.4rem 1.4rem 1.4rem 1.4rem;
	border: solid 1px var(--border);
	border-radius: var(--radius);
	background-color: var(--surface-strong);
	transition: border-color 0.25s ease-in-out, transform 0.25s ease-in-out;
}

	.iga-tile:hover {
		border-color: var(--accent-border);
		transform: translateY(-3px);
	}

	.iga-tile .num {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2rem;
		height: 2rem;
		margin-bottom: 0.8rem;
		border-radius: 8px;
		background-color: var(--accent-soft);
		border: solid 1px var(--accent-border);
		color: var(--accent);
		font-family: var(--mono);
		font-size: 0.85rem;
	}

	.iga-tile h3 {
		margin-bottom: 0.5rem;
		font-size: 1.02rem;
	}

	.iga-tile p {
		margin: 0;
		font-size: 0.92rem;
		color: var(--fg-muted);
	}

/* ===== Schema sources -> IGA -> cibles ===== */

.iga-flow {
	margin: 0 0 1.5rem 0;
	padding: 1.5rem;
	border: solid 1px var(--border);
	border-radius: var(--radius);
	background-color: var(--surface-strong);
	overflow-x: auto;
}

	.iga-flow svg {
		display: block;
		width: 100%;
		min-width: 34rem;
		height: auto;
	}

	.iga-flow .box {
		fill: rgba(255, 255, 255, 0.04);
		stroke: rgba(255, 255, 255, 0.18);
		stroke-width: 1.5;
	}

	.iga-flow .box-core {
		fill: rgba(56, 189, 248, 0.12);
		stroke: var(--accent);
		stroke-width: 2;
	}

	.iga-flow .lbl {
		fill: #e7eaf0;
		font-size: 15px;
		font-family: var(--sans);
	}

	.iga-flow .lbl-sm {
		fill: rgba(231, 234, 240, 0.6);
		font-size: 12.5px;
		font-family: var(--sans);
	}

	.iga-flow .lbl-core {
		fill: #ffffff;
		font-size: 17px;
		font-weight: 600;
		font-family: var(--sans);
	}

	.iga-flow .wire {
		stroke: rgba(255, 255, 255, 0.22);
		stroke-width: 1.5;
		fill: none;
	}

	.iga-flow .pulse {
		fill: var(--accent);
	}

	.iga-flow .pulse-a { animation: iga-run-in 3.2s linear infinite; }
	.iga-flow .pulse-b { animation: iga-run-in 3.2s linear infinite 1.1s; }
	.iga-flow .pulse-c { animation: iga-run-in 3.2s linear infinite 2.2s; }
	.iga-flow .pulse-d { animation: iga-run-out 3.2s linear infinite 0.6s; }
	.iga-flow .pulse-e { animation: iga-run-out 3.2s linear infinite 1.7s; }
	.iga-flow .pulse-f { animation: iga-run-out 3.2s linear infinite 2.8s; }

@keyframes iga-run-in {
	0%   { transform: translateX(0);     opacity: 0; }
	12%  { opacity: 1; }
	88%  { opacity: 1; }
	100% { transform: translateX(150px); opacity: 0; }
}

@keyframes iga-run-out {
	0%   { transform: translateX(0);     opacity: 0; }
	12%  { opacity: 1; }
	88%  { opacity: 1; }
	100% { transform: translateX(150px); opacity: 0; }
}

/* ===== Onglets de scenario ===== */

.iga-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.25rem 0;
	padding: 0;
	list-style: none;
}

.iga-tab {
	padding: 0.55rem 1rem;
	border: solid 1px var(--border);
	border-radius: 999px;
	background-color: var(--surface);
	color: var(--fg-muted);
	font-family: inherit;
	font-size: 0.88rem;
	cursor: pointer;
	transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

	.iga-tab:hover {
		color: var(--fg-strong);
		border-color: var(--border-strong);
	}

	.iga-tab[aria-selected="true"] {
		border-color: var(--accent);
		background-color: var(--accent-soft);
		color: var(--accent);
	}

/* ===== Arbre decisionnel ===== */

.iga-tree {
	padding: 1.5rem;
	border: solid 1px var(--border);
	border-radius: var(--radius);
	background-color: var(--surface-strong);
}

/* Fil d'ariane du parcours */

.iga-path {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1.25rem 0;
	padding: 0;
	list-style: none;
	font-size: 0.78rem;
}

	.iga-path li {
		padding: 0.3rem 0.7rem;
		border-radius: 999px;
		background-color: var(--surface);
		border: solid 1px var(--border);
		color: var(--fg-muted);
	}

	.iga-path li.here {
		border-color: var(--accent-border);
		background-color: var(--accent-soft);
		color: var(--accent);
	}

/* Panneau question / resultat */

.iga-panel {
	min-height: 11rem;
	padding: 1.4rem;
	border: solid 1px var(--border);
	border-radius: 8px;
	background-color: rgba(0, 0, 0, 0.22);
}

	.iga-panel.swap {
		animation: iga-fade-up 0.35s ease-out;
	}

	.iga-panel .ask {
		margin: 0 0 0.4rem 0;
		font-size: 1.1rem;
		font-weight: 600;
		color: var(--fg-strong);
	}

	.iga-panel .hint {
		margin: 0 0 1.1rem 0;
		font-size: 0.86rem;
		color: var(--fg-muted);
	}

	.iga-panel h4 {
		margin: 0 0 0.5rem 0;
		font-size: 1.05rem;
	}

	.iga-panel p {
		font-size: 0.93rem;
		color: var(--fg-muted);
	}

.iga-answers {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 1.1rem;
}

.iga-answer {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.8rem 1rem;
	border: solid 1px var(--border);
	border-radius: 8px;
	background-color: var(--surface);
	color: var(--fg);
	font-family: inherit;
	font-size: 0.92rem;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

	.iga-answer:before {
		content: '\2192';
		color: var(--accent);
		opacity: 0.55;
		transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
	}

	.iga-answer:hover {
		border-color: var(--accent);
		background-color: var(--accent-soft);
		transform: translateX(3px);
	}

	.iga-answer:hover:before {
		opacity: 1;
		transform: translateX(2px);
	}

/* Carte de l'arbre */

.iga-map {
	margin-top: 1.5rem;
	padding: 1.25rem;
	border: solid 1px var(--border);
	border-radius: 8px;
	background-color: rgba(0, 0, 0, 0.18);
	overflow-x: auto;
}

	.iga-map ul {
		list-style: none;
		margin: 0;
		padding: 0 0 0 1.1rem;
	}

	.iga-map > ul {
		padding-left: 0;
	}

	.iga-map li {
		position: relative;
		padding: 0.25rem 0 0.25rem 0.9rem;
	}

	.iga-map > ul > li {
		padding-left: 0;
	}

	/* Connecteurs */
	.iga-map li:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		border-left: solid 1px var(--border);
	}

	.iga-map li:last-child:before {
		bottom: auto;
		height: 1.05rem;
	}

	.iga-map > ul > li:before {
		display: none;
	}

	.iga-map .edge {
		display: block;
		font-size: 0.72rem;
		color: var(--fg-muted);
		opacity: 0.75;
		margin-bottom: 0.15rem;
	}

	.iga-map .ask,
	.iga-map .leaf {
		display: inline-block;
		padding: 0.28rem 0.65rem;
		border-radius: 6px;
		font-size: 0.8rem;
		cursor: pointer;
		border: solid 1px var(--border);
		background-color: var(--surface);
		color: var(--fg-muted);
		transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	}

	.iga-map .ask:hover,
	.iga-map .leaf:hover {
		color: var(--fg-strong);
		border-color: var(--border-strong);
	}

	.iga-map .leaf {
		font-weight: 600;
	}

	.iga-map .leaf[data-state="ok"]     { color: var(--iga-ok);     border-color: rgba(74, 222, 128, 0.35); }
	.iga-map .leaf[data-state="warn"]   { color: var(--iga-warn);   border-color: rgba(251, 191, 36, 0.35); }
	.iga-map .leaf[data-state="danger"] { color: var(--iga-danger); border-color: rgba(248, 113, 113, 0.35); }
	.iga-map .leaf[data-state="idle"]   { color: #94a3b8;           border-color: rgba(148, 163, 184, 0.35); }

	/* Chemin parcouru */
	.iga-map li.on > .ask,
	.iga-map li.on > .leaf {
		background-color: var(--accent-soft);
		border-color: var(--accent-border);
		color: var(--fg-strong);
	}

	.iga-map li.on > .edge {
		color: var(--accent);
		opacity: 1;
	}

	.iga-map li.current > .ask,
	.iga-map li.current > .leaf {
		box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.35);
	}

/* ===== Legende ===== */

.iga-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1rem 0 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.8rem;
	color: var(--fg-muted);
}

	.iga-legend li {
		display: flex;
		align-items: center;
		gap: 0.4rem;
	}

	.iga-legend i {
		width: 0.7rem;
		height: 0.7rem;
		border-radius: 2px;
		display: inline-block;
	}

/* ===== Questions de l'integrateur ===== */

.iga-qa {
	margin: 0;
	padding: 0;
	list-style: none;
}

.iga-qa > li {
	margin-bottom: 0.6rem;
	border: solid 1px var(--border);
	border-radius: 8px;
	background-color: var(--surface-strong);
	overflow: hidden;
}

.iga-qa details summary {
	padding: 1rem 1.25rem;
	cursor: pointer;
	font-weight: 600;
	color: var(--fg-strong);
	font-size: 0.98rem;
	list-style: none;
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	transition: background-color 0.2s ease-in-out;
}

	.iga-qa details summary::-webkit-details-marker {
		display: none;
	}

	.iga-qa details summary:hover {
		background-color: rgba(255, 255, 255, 0.03);
	}

	.iga-qa details summary:before {
		content: '+';
		flex: 0 0 auto;
		width: 1.3rem;
		height: 1.3rem;
		margin-top: 0.1rem;
		border-radius: 4px;
		background-color: var(--accent-soft);
		border: solid 1px var(--accent-border);
		color: var(--accent);
		font-family: var(--mono);
		font-size: 0.85rem;
		line-height: 1.15rem;
		text-align: center;
		transition: transform 0.2s ease-in-out;
	}

	.iga-qa details[open] summary:before {
		content: '−';
	}

.iga-qa details .body {
	padding: 0 1.25rem 1.15rem 3.2rem;
	font-size: 0.92rem;
	color: var(--fg-muted);
	animation: iga-fade-up 0.3s ease-out;
}

	.iga-qa details .body p {
		margin: 0 0 0.7rem 0;
	}

	.iga-qa details .body p:last-child {
		margin-bottom: 0;
	}

	.iga-qa details .body code {
		font-family: var(--mono);
		font-size: 0.85em;
		padding: 0.1rem 0.35rem;
		border-radius: 4px;
		background-color: rgba(255, 255, 255, 0.07);
		color: var(--fg);
	}

/* ===== Encart interne ===== */

.iga-internal {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	margin: 0 0 2rem 0;
	padding: 1rem 1.25rem;
	border: dashed 1px var(--iga-violet);
	border-radius: 8px;
	background-color: rgba(167, 139, 250, 0.07);
	font-size: 0.9rem;
	color: var(--fg-muted);
}

	.iga-internal .tag {
		flex: 0 0 auto;
		padding: 0.15rem 0.55rem;
		border-radius: 999px;
		background-color: rgba(167, 139, 250, 0.18);
		color: var(--iga-violet);
		font-family: var(--mono);
		font-size: 0.7rem;
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}

/* ===== Carte d'appel vers une autre page ===== */

/* ===== Photographies (traitement volontairement discret) ===== */

/* Paire de vignettes, alignees a gauche */

.iga-photo-strip {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
	max-width: 30rem;
	margin: 0 0 2rem 0;
}

	.iga-photo-strip img {
		display: block;
		width: 100%;
		height: 11rem;
		object-fit: cover;
		border: solid 1px var(--border);
		border-radius: 8px;
		background-color: var(--bg-alt);
	}

	.iga-photo-strip figcaption {
		grid-column: 1 / -1;
		font-size: 0.8rem;
		color: var(--fg-muted);
	}

/* Vignette isolee, largeur contenue */

.iga-photo-sm {
	max-width: 15rem;
	margin: 2rem 0 0 0;
}

	.iga-photo-sm img {
		display: block;
		width: 100%;
		height: auto;
		border: solid 1px var(--border);
		border-radius: 8px;
		background-color: var(--bg-alt);
	}

	.iga-photo-sm figcaption {
		margin-top: 0.5rem;
		font-size: 0.8rem;
		color: var(--fg-muted);
	}

@media screen and (max-width: 520px) {

	.iga-photo-strip img {
		height: 8rem;
	}

}

.iga-next {
	display: block;
	margin-top: 1.5rem;
	padding: 1.5rem;
	border: solid 1px var(--accent-border);
	border-radius: var(--radius);
	background:
		radial-gradient(ellipse 420px 220px at 100% 0%, rgba(56, 189, 248, 0.14), transparent 70%),
		var(--surface-strong);
	color: var(--fg);
	transition: transform 0.25s ease-in-out, border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

	.iga-next:hover {
		transform: translateY(-3px);
		border-color: var(--accent);
		box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.4);
		text-decoration: none;
	}

	.iga-next h3 {
		margin: 0.5rem 0 0.4rem 0;
	}

	.iga-next p {
		margin: 0 0 0.9rem 0;
		color: var(--fg-muted);
		font-size: 0.93rem;
	}

	.iga-next .go {
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
		color: var(--accent);
		font-weight: 600;
		font-size: 0.9rem;
	}

/* ===== Sommaire ===== */

.iga-toc {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 2rem 0;
	padding: 0;
	list-style: none;
}

	.iga-toc a {
		display: block;
		padding: 0.5rem 0.9rem;
		border: solid 1px var(--border);
		border-radius: 999px;
		background-color: var(--surface);
		color: var(--fg-muted);
		font-size: 0.84rem;
		transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	}

	.iga-toc a:hover {
		border-color: var(--accent);
		background-color: var(--accent-soft);
		color: var(--accent);
		text-decoration: none;
	}

/* ===== Tableau comparatif ===== */

.iga-table-wrap {
	overflow-x: auto;
	border: solid 1px var(--border);
	border-radius: var(--radius);
	background-color: var(--surface-strong);
}

.iga-table {
	width: 100%;
	min-width: 32rem;
	border-collapse: collapse;
	font-size: 0.9rem;
}

	.iga-table th, .iga-table td {
		padding: 0.85rem 1rem;
		text-align: left;
		border-bottom: solid 1px var(--border);
		vertical-align: top;
	}

	.iga-table th {
		color: var(--fg-strong);
		font-weight: 600;
		background-color: rgba(255, 255, 255, 0.03);
	}

	.iga-table tr:last-child td {
		border-bottom: none;
	}

	.iga-table td {
		color: var(--fg-muted);
	}

/* ===== Accessibilite / mouvement reduit ===== */

@media (prefers-reduced-motion: reduce) {

	.iga-flow .pulse {
		animation: none;
		opacity: 0.9;
	}

	.iga-chart .curve.draw {
		animation: none;
		stroke-dashoffset: 0;
	}

	.iga-chart .marker {
		transition: none;
	}

	.iga-detail.swap {
		animation: none;
	}

	.iga-qa details .body {
		animation: none;
	}

}

@media screen and (max-width: 640px) {

	.iga-player {
		padding: 1.1rem;
	}

	.iga-step {
		flex: 1 1 100%;
	}

	.iga-internal {
		flex-direction: column;
		gap: 0.6rem;
	}

		.iga-internal .tag {
			align-self: flex-start;
		}

	.iga-qa details .body {
		padding-left: 1.25rem;
	}

	.iga-definition {
		padding: 1.15rem 1.25rem;
	}

}