/* ==========================================================================
   Page « Qui sommes-nous » (URLs shop c111/c121/c143) — SPÉCIFIQUE.
   Réutilise kk-container, kk-hero, kk-h1, kk-lead, kk-card, kk-icotile,
   kk-frame, kk-head, kk-band-alt, kk-stat-n/-l, kk-cta-band (components.css).
   On ne définit ici QUE le propre à la page : grille du héro, chiffres,
   frise, bande sombre, cartes expertise, cartes presse, mission.
   Les sections prennent la largeur du site (--container), SAUF la frise, qui
   garde sa colonne étroite : son axe vertical ne lit bien que resserré.
   ========================================================================== */

/* --- Héro ---------------------------------------------------------------- */

.ap-hero-inner {
	--hero-pt: clamp(40px, 5vw, 68px);
	--hero-pb: clamp(28px, 4vw, 42px);
}

.ap-split {
	display: grid;
	grid-template-columns: 1.4fr 0.85fr;
	gap: clamp(30px, 4vw, 56px);
	align-items: center;
}

@media (max-width: 820px) {
	.ap-split { grid-template-columns: 1fr; }
	.ap-photo { order: -1; justify-self: center; }
}

.ap-lead { --lead-width: 52ch; }

/* Mention d'origine, seule pastille du héro : les chiffres arrivent juste
   en dessous, les répéter ici n'apporterait rien. Tonalité verte — c'est une
   garantie, pas une information neutre : d'où kk-badge--success, sans règle
   propre à la page. */

/* --- Chiffres clés -------------------------------------------------------- */

.ap-stats-wrap {
	padding-top: clamp(30px, 4vw, 48px);
	padding-bottom: clamp(20px, 3vw, 30px);
}

.ap-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(14px, 2vw, 20px);
}

@media (max-width: 560px) {
	.ap-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Chiffres-clés sur fond clair : encre orange, libellé gris ardoise. */
.ap-stat {
	--card-radius: var(--k-r-card);
	--card-padding: 24px 16px;
	text-align: center;
	--stat-max: 38px;
	--stat-color: var(--k-orange);
	--stat-l-color: var(--k-muted);
}

/* --- Colonnes et titres de section ---------------------------------------- */

/* La frise garde sa colonne étroite : ses jalons sont des phrases courtes,
   et l'axe orange à gauche perd son sens s'il court sur toute la page. */
.ap-narrow {
	max-width: 900px;
	margin: 0 auto;
	padding: clamp(40px, 5vw, 68px) clamp(16px, 4vw, 40px);
}

.ap-medium {
	padding-top: clamp(40px, 5vw, 64px);
	padding-bottom: clamp(40px, 5vw, 64px);
}

.ap-narrow h2 {
	font-size: var(--k-h2-l);
	margin: 0 0 clamp(26px, 3.5vw, 38px);
}

.ap-center-h2 {
	font-size: var(--k-h2-l);
	margin: 0 0 clamp(22px, 3vw, 30px);
	text-align: center;
}

/* --- Frise ---------------------------------------------------------------- */

.ap-timeline {
	position: relative;
	padding-left: 34px;
	border-left: 3px solid var(--k-orange);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ap-tl { position: relative; }

.ap-tl::before {
	content: '';
	position: absolute;
	left: -42px;
	top: 3px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--k-orange);
	border: 3px solid var(--k-bg-alt);
}

.ap-tl-date {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-m);
	color: var(--k-orange-dark);
	margin-bottom: 5px;
}

/* Pas de mesure ici : c'est la colonne de .ap-narrow qui la porte. */
.ap-tl p {
	font-size: var(--k-text-l);
	line-height: var(--k-lh);
	color: var(--k-body);
	margin: 0;
}
.ap-tl p strong { color: var(--k-charcoal); }
.ap-tl p a { color: var(--k-orange-dark); font-weight: 700; }

/* Dernier jalon : charcoal, pour marquer le présent. */
.ap-tl--now::before { background: var(--k-charcoal); }
.ap-tl--now .ap-tl-date { color: var(--k-charcoal); }

/* --- Bande sombre marine (expertises + mission) --------------------------- */

.ap-band-inner {
	padding-top: clamp(40px, 5vw, 68px);
	padding-bottom: clamp(40px, 5vw, 68px);
}

.ap-band-h2 {
	color: var(--k-dark-strong);
}
.ap-band-lead { color: var(--k-dark-body); }

/* --- Cartes expertise ------------------------------------------------------
   Elles ne sont pas cliquables : pas de survol animé (règle du projet). */

.ap-exp-grid {
	--grid-min: 300px;
}

.ap-exp {
	--card-padding: clamp(22px, 3vw, 28px);
}

/* --- Ils parlent de nous ---------------------------------------------------
   Les deux cartes sont des liens sortants : le survol est donc légitime, mais
   il se limite à la bordure — pas de déplacement. */

.ap-press-grid {
	--grid-min: 280px;
	--grid-gap: 16px;
	margin-bottom: 18px;
}

.ap-press {
	--card-shadow: none;
	--card-radius: var(--k-r-card);
	--card-padding: 20px 22px;
	display: flex;
	gap: 14px;
	align-items: center;
	text-decoration: none;
	color: inherit;
	transition: border-color .14s;
}

.ap-press:hover,
.ap-press:focus-visible {
	border-color: var(--k-orange);
}

.ap-press-ico {
	--tile-size: 40px;
}

.ap-press-name {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-m);
	color: var(--k-charcoal);
	margin-bottom: 3px;
}

.ap-press-date {
	color: var(--k-soft);
	font-weight: 600;
}

.ap-press p {
	font-size: var(--k-text-m);
	line-height: 1.5;
	color: var(--k-muted);
	margin: 0;
}

.ap-partner {
	font-size: var(--k-text-m);
	line-height: var(--k-lh);
	color: var(--k-soft);
	margin: 0;
	text-align: center;
}
.ap-partner strong { color: var(--k-nav); }

/* --- Mission --------------------------------------------------------------- */

.ap-mission {
	padding-top: clamp(44px, 6vw, 76px);
	padding-bottom: clamp(44px, 6vw, 76px);
	text-align: center;
}

.ap-mission-badge {
	gap: 7px;
	background: rgba(242, 150, 68, 0.15);
	color: var(--k-orange-glow);
	font-family: var(--k-font-title);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ap-mission h2 {
	font-size: var(--k-h2-xl);
	margin: 18px 0 18px;
	color: var(--k-dark-strong);
}

.ap-mission p {
	font-size: var(--k-text-xl);
	line-height: 1.8;
	color: var(--k-dark-body);
	margin: 0 auto;
	max-width: 62ch;
}

.ap-mission p + p {
	margin-top: 18px;
}