/**
 * Section citation.
 *
 * Figma : bloc centré de 1315 px, texte 48 px vert, guillemets ambre à 96 px.
 * Les guillemets sont posés par le CSS (2 em = 96 px quand le texte fait 48) :
 * l'équipe saisit le texte nu, sans avoir à gérer la typographie française.
 *
 * Emplacement : assets/css/components/section-citation.css
 */

.section-citation {
	padding-block: var(--section-gap);
}

/* Le bloc a sa propre largeur : le conteneur large vaut désormais 1430 px, et
   la citation y gagnait deux lignes de moins que la maquette. */
.citation {
	max-width: var(--container-citation);
	margin: 0 auto;
	text-align: center;
}

.citation__texte {
	font-family: var(--font-display);
	font-size: var(--fs-h1);   /* Figma : 48 px */
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	color: var(--e4y-green);
	/* Pas de text-wrap: balance ici — il égalise les lignes et rétrécit le bloc
	   d'environ 250 px. Figma coupe naturellement, avec une dernière ligne courte. */
}

/* Les deux guillemets n'ont pas la même taille : dans la maquette (node
   73:2771) l'ouvrant est dans un bloc à 96 px, tandis que le fermant n'a
   aucune taille propre et hérite des 48 px du paragraphe. Seul l'ouvrant
   surplombe donc le texte ; les deux restent calés sur la ligne de base. */
.citation__texte::before,
.citation__texte::after {
	color: var(--e4y-amber);
}

.citation__texte::before {
	content: '\201C';          /* “ */
	font-size: 2em;            /* Figma : 96 px pour un texte de 48 px */
	line-height: 0;            /* n'écarte pas les lignes du paragraphe */
}

.citation__texte::after {
	content: '\201D';          /* ” */
}


/* Mobile — les guillemets prennent leur propre ligne.

   Figma 01_MOB les pose centrés au-dessus et au-dessous du texte, et non
   accrochés à la première et à la dernière ligne : sur une colonne étroite,
   l'ouvrant repoussait le début du texte et le fermant pendait tout seul. */
@media (max-width: 767px) {

	/* En haut, voir aussi la marge basse de la section vision : à elles deux,
	   elles font les ~50 px que Figma laisse entre le bouton et le guillemet.
	   En bas, l'arc de la zone teintée arrive plus près qu'en desktop. */
	.section-citation {
		padding-block: var(--space-5) var(--space-6);
	}

	.citation__texte {
		font-size: var(--fs-h2);   /* Figma mobile : ~24 px */
	}

	.citation__texte::before,
	.citation__texte::after {
		display: block;
		font-size: 1.6em;
		line-height: 1;
	}

}

/* ── Attribution (optionnelle) ─────────────────────────────── */

.citation__source {
	margin-block-start: var(--space-5);
	font-size: var(--fs-lead);
	line-height: var(--lh-heading);
	color: var(--color-text);
}

.citation__auteur {
	display: block;
	font-weight: var(--fw-bold);
}

.citation__fonction {
	display: block;
	font-size: var(--fs-body);
	color: var(--color-text-muted);
}