/* ===========================================================================
   APROPOS-v2 — feuille de la page « À propos » (2026-08-25)
   Remplace intégralement la feuille issue de D-C (1 522 octets).

   Ne dépend que de tokens vérifiés présents dans assets/edv-production.css
   le 2026-08-25 (--color-*, --text-*, --space-*, --gutter, --maxw,
   --radius-*, --font-*) et des primitives .section / .wrap / .band--* /
   .eyebrow / .btn / .stamp / .dropcap / .signature.

   La classe `btn--ink`, définie ici dans la version précédente, disparaît :
   le gabarit utilise désormais `btn--primary` / `btn--secondary`, qui vivent
   dans edv-production.css. Vérifié : `btn--ink` n'est utilisée nulle part
   ailleurs dans le thème.
   =========================================================================== */

/* ---- 01 · hero ---------------------------------------------------------- */

.apropos-hero__grid {
	display: grid;
	gap: var(--space-10);
	align-items: center;
}

@media (min-width: 900px) {
	.apropos-hero__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
		gap: var(--space-16);
	}
}

.apropos-hero__nom {
	font-size: var(--text-hero);
	margin: 0 0 var(--space-5);
}

.apropos-hero__lede {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-style: italic;
	line-height: 1.25;
	color: var(--color-bordeaux);
	margin: 0 0 var(--space-8);
	max-width: 24ch;
}

.apropos-hero__recit {
	font-size: var(--text-md);
	color: var(--color-ink-2);
	max-width: 54ch;
	margin: 0;
}

.apropos-hero__recit strong {
	color: var(--color-ink);
	font-weight: 600;
}

.apropos-hero__stamps {
	list-style: none;
	margin: var(--space-8) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.apropos-hero__portrait {
	position: relative;
	justify-self: center;
	width: min(100%, 420px);
	margin: 0;
}

.apropos-hero__portrait img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 50%;
}

.apropos-hero__portrait::after {
	content: "";
	position: absolute;
	inset: -14px;
	border: 1px solid var(--color-line-soft);
	border-radius: 50%;
	pointer-events: none;
}

/* ---- 02 · le parcours --------------------------------------------------- */

.apropos-parcours__titre {
	font-size: var(--text-3xl);
	max-width: 20ch;
	margin: 0;
}

.apropos-frise {
	list-style: none;
	margin: var(--space-12) 0 0;
	padding: 0;
	display: grid;
	gap: var(--space-10);
}

@media (min-width: 720px) {
	.apropos-frise {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-10) var(--space-8);
	}
}

@media (min-width: 1080px) {
	.apropos-frise {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.apropos-frise .jalon {
	border-top: 1px solid var(--color-line);
	padding-top: var(--space-5);
}

.jalon__an {
	font-family: var(--font-mono);
	font-size: var(--text-2xl);
	font-weight: 500;
	line-height: 1;
	color: var(--color-bordeaux);
	font-variant-numeric: tabular-nums;
	margin: 0 0 var(--space-2);
}

.jalon__lieu {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--color-ink-3);
	margin: 0 0 var(--space-5);
}

.apropos-frise .jalon p:not(.jalon__an):not(.jalon__lieu) {
	color: var(--color-ink-2);
	margin: 0;
}

.apropos-frise .jalon p:not(.jalon__an):not(.jalon__lieu) + p {
	margin-top: var(--space-4);
}

.apropos-frise .jalon strong {
	color: var(--color-ink);
	font-weight: 600;
}

/* ---- 03 · ce que je crois ----------------------------------------------- */

.apropos-crois__titre {
	font-size: var(--text-3xl);
	max-width: 20ch;
	margin: 0 0 var(--space-12);
}

.apropos-crois__grid {
	display: grid;
	gap: var(--space-10);
	align-items: start;
}

@media (min-width: 900px) {
	.apropos-crois__grid {
		grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
		gap: var(--space-16);
	}
}

.apropos-crois__photo {
	margin: 0;
}

.apropos-crois__photo img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-sm);
}

.apropos-crois__photo figcaption {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: .1em;
	color: var(--color-ink-3);
	margin-top: var(--space-4);
}

.apropos-crois .credo {
	border-top: 1px solid var(--color-line-soft);
	padding-top: var(--space-5);
	margin-top: var(--space-8);
}

.apropos-crois .credo:first-child {
	border-top: 1px solid var(--color-line);
	margin-top: 0;
}

.apropos-crois .credo h3 {
	font-size: var(--text-xl);
	margin: 0 0 var(--space-3);
}

.apropos-crois .credo p {
	color: var(--color-ink-2);
	max-width: 62ch;
	margin: 0;
}

.apropos-crois .credo strong {
	color: var(--color-ink);
	font-weight: 600;
}

/* ---- 04 · ce que je refuse (bande bordeaux) ----------------------------- */

.apropos-refus__titre {
	font-size: var(--text-3xl);
	max-width: 14ch;
	margin: 0;
}

.apropos-refus__intro {
	font-size: var(--text-md);
	color: var(--color-rose);
	max-width: 52ch;
	margin: var(--space-5) 0 0;
}

.apropos-refus__grid {
	display: grid;
	gap: var(--space-8);
	margin-top: var(--space-12);
}

@media (min-width: 820px) {
	.apropos-refus__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-10);
	}
}

.apropos-refus .refus {
	border-top: 1px solid rgba(250, 244, 230, .35);
	padding-top: var(--space-5);
}

.apropos-refus .refus h3 {
	font-size: var(--text-xl);
	color: var(--color-cream);
	margin: 0 0 var(--space-3);
}

.apropos-refus .refus p {
	color: var(--color-rose);
	margin: 0;
}

.apropos-refus .refus strong {
	color: var(--color-cream);
	font-weight: 600;
}

/* ---- 05 · au-delà du verre ---------------------------------------------- */

.apropos-verre__grid {
	display: grid;
	gap: var(--space-10);
}

@media (min-width: 900px) {
	.apropos-verre__grid {
		grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
		gap: var(--space-16);
	}
}

.apropos-verre__titre {
	font-size: var(--text-3xl);
	margin: 0 0 var(--space-8);
}

/* La colonne des rôles se dimensionne sur le plus long d'entre eux
   (`max-content` + `subgrid`), au lieu d'une largeur fixe qu'il faudrait
   rallonger a chaque libellé plus long. « Président fondateur » débordait
   des 9.5rem d'origine et passait seul a deux lignes.
   Sans subgrid, chaque li retombe sur une colonne unique : rôle au-dessus
   de l'intitulé, lisible, simplement moins compact. */

.apropos-verre__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.apropos-verre__liste li {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	row-gap: var(--space-2);
	align-items: baseline;
	border-top: 1px solid var(--color-line-soft);
	padding: var(--space-4) 0;
}

@media (min-width: 620px) {
	.apropos-verre__liste {
		grid-template-columns: max-content minmax(0, 1fr);
	}

	.apropos-verre__liste li {
		column-gap: var(--space-5);
	}
}

.apropos-verre__liste li:first-child {
	border-top: 1px solid var(--color-line);
}

.apropos-verre__liste .role {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-ink-3);
	white-space: nowrap;
}

.apropos-verre__liste .quoi {
	color: var(--color-ink);
	font-weight: 500;
}

.apropos-verre__texte p {
	font-size: var(--text-md);
	color: var(--color-ink-2);
	max-width: 56ch;
	margin: 0;
}

.apropos-verre__texte p + p {
	margin-top: var(--space-5);
}

.apropos-verre__texte strong {
	color: var(--color-ink);
	font-weight: 600;
}

.apropos-verre__sign {
	margin-top: var(--space-8) !important;
	max-width: none;
}

/* ---- 06 · CTA ----------------------------------------------------------- */

.apropos-cta {
	text-align: center;
}

.apropos-cta__lede {
	font-size: var(--text-3xl);
	margin: 0 0 var(--space-8);
}

.apropos-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: center;
	margin: 0;
}