/*
 * pages/a-propos.css — Styles spécifiques à la page À propos.
 * Chargé via inc/enqueue.php (body.page-template-tpl-a-propos).
 *
 * Sections :
 *   - .about-mission   → positionnement éditorial (Fraunces italic, paragraphes)
 *   - .home-stats      → chiffres clés (shell promu dans components.css)
 *   - .about-values    → 4 cards numérotées (01 → 04)
 *   - .about-team      → paragraphe agrégé (pas de CPT équipe)
 *   - .about-qualifs   → section-dark, grid 4 qualifs + sous-bloc ACN
 */

/* ════════════════════════════════════════════════════════════════════
 * TITRE DE SECTION — signature Fraunces italic rouge (fragment)
 * Pattern partagé entre plusieurs sections de la page.
 * ════════════════════════════════════════════════════════════════════ */

.about-mission__title,
.about-values__title,
.about-team__title,
.about-qualifs__title {
	font-family:     var(--font-display);
	font-size:       clamp(1.75rem, 3.2vw, 2.75rem);
	font-weight:     500;
	line-height:     var(--lh-tight);
	letter-spacing:  -0.015em;
	margin:          0 0 var(--space-6);
}

.about-mission__title em,
.about-values__title em,
.about-team__title em,
.about-qualifs__title em {
	font-style: italic;
	color:      var(--bw-red);
}

.about-mission__kicker,
.about-values__kicker,
.about-team__kicker,
.about-qualifs__kicker {
	display:         inline-block;
	font-family:     var(--font-mono);
	font-size:       var(--text-xs);
	font-weight:     var(--fw-semi);
	letter-spacing:  0.18em;
	text-transform:  uppercase;
	color:           var(--bw-red);
	margin:          0 0 var(--space-4);
}

/* ════════════════════════════════════════════════════════════════════
 * #1 MISSION — éditorial centré, 2 paragraphes narratifs
 * ════════════════════════════════════════════════════════════════════ */

.about-mission__inner {
	max-width:  780px;
	margin:     0 auto;
	text-align: center;
}

.about-mission__title {
	color: var(--fg);
}

.about-mission__text {
	font-size:   var(--text-md);
	color:       var(--fg-muted);
	line-height: var(--lh-relaxed);
	margin:      0 0 var(--space-5);
}

.about-mission__text:last-child {
	margin-bottom: 0;
}

.about-mission__text strong {
	color:       var(--fg);
	font-weight: var(--fw-semi);
}

/* ════════════════════════════════════════════════════════════════════
 * #3 VALEURS — grid 4 cards numérotées (01/02/03/04 Fraunces)
 * ════════════════════════════════════════════════════════════════════ */

.about-values__title {
	color: var(--fg);
}

.about-values .section-header {
	text-align: center;
}

.about-values__grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   var(--space-8);
}

@media (max-width: 960px) {
	.about-values__grid {
		grid-template-columns: repeat(2, 1fr);
		gap:                   var(--space-8);
	}
}

@media (max-width: 560px) {
	.about-values__grid {
		grid-template-columns: 1fr;
		gap:                   var(--space-6);
	}
}

.about-value {
	display:         flex;
	flex-direction:  column;
	gap:             var(--space-3);
	padding:         var(--space-6) 0;
	border-top:      1px solid var(--border);
	position:        relative;
}

.about-value__number {
	font-family:     var(--font-display);
	font-style:      italic;
	font-weight:     500;
	font-size:       clamp(2rem, 4vw, 2.75rem);
	line-height:     1;
	color:           var(--bw-red);
	letter-spacing:  -0.02em;
	font-variant-numeric: tabular-nums;
}

.about-value__title {
	font-family:  var(--font-body);
	font-size:    var(--text-lg);
	font-weight:  var(--fw-semi);
	color:        var(--fg);
	margin:       0;
	letter-spacing: -0.005em;
}

.about-value__desc {
	font-size:   var(--text-sm);
	color:       var(--fg-muted);
	line-height: var(--lh-relaxed);
	margin:      0;
}

/* Stagger reveal 0/80/160/240 ms */
.about-values__grid > .bw-reveal:nth-child(1) { --bw-reveal-delay:   0ms; }
.about-values__grid > .bw-reveal:nth-child(2) { --bw-reveal-delay:  80ms; }
.about-values__grid > .bw-reveal:nth-child(3) { --bw-reveal-delay: 160ms; }
.about-values__grid > .bw-reveal:nth-child(4) { --bw-reveal-delay: 240ms; }

/* ════════════════════════════════════════════════════════════════════
 * #4 ÉQUIPE — narratif bref, centré
 * ════════════════════════════════════════════════════════════════════ */

.about-team {
	background: var(--surface);
}

.about-team__inner {
	max-width:  780px;
	margin:     0 auto;
	text-align: center;
}

.about-team__title {
	color: var(--fg);
}

.about-team__text {
	font-size:   var(--text-md);
	color:       var(--fg-muted);
	line-height: var(--lh-relaxed);
	margin:      0;
}

/* ════════════════════════════════════════════════════════════════════
 * #5 QUALIFICATIONS — section-dark, grid 2x2, + sous-bloc ACN
 * Red line draw au sommet (pattern .home-stats).
 * ════════════════════════════════════════════════════════════════════ */

html.js-reveals-ready .about-qualifs::before {
	content:    '';
	position:   absolute;
	top:        0;
	left:       0;
	height:     1px;
	width:      0;
	background: var(--bw-red);
	transition: width 700ms cubic-bezier(.22, .61, .36, 1);
	z-index:    2;
}

html.js-reveals-ready .about-qualifs.is-visible::before {
	width: 100%;
}

.about-qualifs__header {
	text-align:    center;
	margin-bottom: var(--space-12);
}

.about-qualifs__title {
	color: #e8eaed;
}

.about-qualifs__grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   var(--space-6);
	margin-bottom:         var(--space-10);
}

@media (max-width: 760px) {
	.about-qualifs__grid {
		grid-template-columns: 1fr;
	}
}

.about-qualif {
	display:         flex;
	flex-direction:  column;
	gap:             var(--space-3);
	padding:         var(--space-6);
	border:          1px solid color-mix(in srgb, #e8eaed 15%, transparent);
	border-radius:   var(--radius-sm);
	background:      color-mix(in srgb, #e8eaed 3%, transparent);
	transition:      border-color var(--transition), background-color var(--transition);
}

.about-qualif:hover {
	border-color: color-mix(in srgb, var(--bw-red) 60%, transparent);
	background:   color-mix(in srgb, var(--bw-red) 4%, transparent);
}

.about-qualif__header {
	display:         flex;
	align-items:     baseline;
	justify-content: space-between;
	gap:             var(--space-3);
	padding-bottom:  var(--space-2);
	border-bottom:   1px solid color-mix(in srgb, var(--bw-red) 35%, transparent);
}

.about-qualif__type {
	font-family:    var(--font-mono);
	font-size:      var(--text-xs);
	font-weight:    var(--fw-semi);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color:          var(--bw-red);
}

.about-qualif__year {
	font-family:    var(--font-mono);
	font-size:      var(--text-xs);
	font-weight:    var(--fw-semi);
	letter-spacing: 0.08em;
	color:          color-mix(in srgb, #e8eaed 70%, transparent);
	font-variant-numeric: tabular-nums;
	white-space:    nowrap;
}

.about-qualif__note {
	color:      color-mix(in srgb, #e8eaed 55%, transparent);
	margin-left: var(--space-1);
}

.about-qualif__name {
	font-family:    var(--font-display);
	font-size:      var(--text-xl);
	font-weight:    500;
	line-height:    1.2;
	color:          #f3f5f7;
	margin:         var(--space-1) 0 0;
	letter-spacing: -0.01em;
}

.about-qualif__desc {
	font-size:   var(--text-sm);
	color:       color-mix(in srgb, #e8eaed 75%, transparent);
	line-height: var(--lh-relaxed);
	margin:      0;
}

/* Stagger 0/80/160/240 ms sur les 4 qualifs */
.about-qualifs__grid > .bw-reveal:nth-child(1) { --bw-reveal-delay:   0ms; }
.about-qualifs__grid > .bw-reveal:nth-child(2) { --bw-reveal-delay:  80ms; }
.about-qualifs__grid > .bw-reveal:nth-child(3) { --bw-reveal-delay: 160ms; }
.about-qualifs__grid > .bw-reveal:nth-child(4) { --bw-reveal-delay: 240ms; }

/* ── Sous-bloc ACN (adhésion, traitée à part des qualifs) ────────── */

.about-qualifs__acn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-wrap:       wrap;
	gap:             var(--space-2);
	padding-top:     var(--space-6);
	margin:          0;
	border-top:      1px solid color-mix(in srgb, #e8eaed 10%, transparent);
	font-family:     var(--font-mono);
	font-size:       var(--text-xs);
	letter-spacing:  0.12em;
	text-transform:  uppercase;
	text-align:      center;
}

.about-qualifs__acn-label {
	color:       color-mix(in srgb, #e8eaed 55%, transparent);
	font-weight: var(--fw-semi);
}

.about-qualifs__acn-sep {
	color:       var(--bw-red);
	font-weight: var(--fw-bold);
}

.about-qualifs__acn-name {
	color:       #f3f5f7;
	font-weight: var(--fw-semi);
}

/* ════════════════════════════════════════════════════════════════════
 * REDUCED MOTION
 * ════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	html.js-reveals-ready .about-qualifs::before {
		width:      100%;
		transition: none;
	}
	.about-qualif {
		transition: none;
	}
}