<script lang="ts">
	// Zone A « Résumé immédiat » — critique pour Google AI Overview.
	// Réponse directe en tête (lead) + points essentiels. Rendu en <aside> sémantique.
	interface Props {
		lead: string;
		points?: string[];
		titre?: string;
	}
	let { lead, points = [], titre = 'En résumé' }: Props = $props();
</script>

<aside class="resume" aria-label={titre}>
	<p class="resume__titre"><span class="flag-chip" aria-hidden="true"></span> {titre}</p>
	<p class="resume__lead">{lead}</p>
	{#if points.length}
		<ul class="resume__points">
			{#each points as p (p)}
				<li>{p}</li>
			{/each}
		</ul>
	{/if}
</aside>

<style>
	.resume {
		background: var(--card-bg);
		border: 1px solid var(--line);
		border-left: 4px solid var(--vert-gong);
		border-radius: var(--radius-md);
		padding: var(--space-3);
		margin-block: var(--space-3);
	}
	.resume__titre {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		font-family: var(--font-display);
		text-transform: uppercase;
		letter-spacing: 0.05em;
		font-size: 0.8rem;
		color: var(--muted-fort);
		margin-bottom: 0.6rem;
	}
	.resume__lead {
		font-size: 1.12rem;
		line-height: 1.5;
		color: var(--creme);
		margin-bottom: 0.6rem;
	}
	.resume__points {
		margin: 0;
		padding-left: 1.1rem;
		display: grid;
		gap: 0.3rem;
	}
	.resume__points li {
		color: var(--muted);
	}
</style>
