/*
 * Page « Qui sommes-nous ».
 *
 * Les corps de texte et les espacements reprennent l'échelle établie sur la
 * page d'accueil, faute d'export 1:1 de cette maquette.
 */

/* ==========================================================================
   Notre méthode
   ========================================================================== */

.s-method {
	padding-block: 120px;
}

/*
 * Les deux colonnes s'étirent à la même hauteur : le lien de gauche peut
 * ainsi se caler au bas du bloc, à hauteur de la dernière entrée numérotée.
 */
.s-method__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 88px;
}

.s-method__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 33%;
	min-width: 0;
}

.s-method__title {
	margin: 12px 0 0;
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.6;
	text-transform: uppercase;
}

.s-method__text {
	margin-top: var(--space-lg);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.6;
}

.s-method__action {
	/* Repoussé en bas de colonne, au niveau de la dernière entrée. */
	margin: auto 0 0;
	padding-top: var(--space-2xl);
}

/*
 * Liste ordonnée : la numérotation vient d'un compteur CSS, jamais du texte
 * saisi. Le balisage <ol> annonce déjà l'ordre aux lecteurs d'écran.
 */
.s-method__list {
	flex: 1 1 52%;
	min-width: 0;
	counter-reset: methode;
}

.s-method__item {
	display: flex;
	align-items: baseline;
	gap: var(--space-2xl);
	padding-block: 28px;
	border-bottom: 1px solid var(--color-grey);
	font-size: 1.125rem;
	counter-increment: methode;
}

.s-method__item:first-child {
	border-top: 1px solid var(--color-grey);
}

.s-method__item::before {
	content: counter(methode, decimal-leading-zero);
	flex-shrink: 0;
	color: var(--color-violet);
	font-family: var(--font-mono);
	font-size: 1rem;
}

/* ==========================================================================
   Nos expertises
   ========================================================================== */

.s-brands {
	padding-block: 120px;
	background-color: #f2ebff;
}

.s-brands__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-2xl);
	margin-bottom: var(--space-3xl);
}

.s-brands__title {
	flex: 1 1 44%;
	min-width: 0;
	margin: 0;
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.6;
	text-transform: uppercase;
}

.s-brands__text {
	flex: 1 1 44%;
	min-width: 0;
	margin: 0;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.6;
}

.s-brands__list {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.s-brands__card {
	display: flex;
	flex-direction: column;
	flex: 1 1 calc((100% - 48px) / 3);
	min-width: 0;
	border-radius: var(--radius-md);
	background-color: var(--color-white);
	overflow: hidden;
}

/*
 * Zone de logo de hauteur fixe : quels que soient les formats fournis, les
 * trois marques occupent la même surface et sont optiquement alignées.
 */
.s-brands__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 180px;
	padding: var(--space-xl);
	background-color: var(--color-white);
}

/*
 * Hauteur identique pour les trois logos, contain préservant leurs
 * proportions respectives.
 *
 * Le mode de fusion « multiply » efface le fond blanc des fichiers : multiplié
 * par le blanc de la carte, il devient transparent, tandis que les couleurs du
 * logo restent inchangées. Cela ne fonctionne que sur un fond clair et avec des
 * logos réellement blancs derrière — un fond gris ou un JPEG légèrement teinté
 * laisserait une trace visible.
 */
.s-brands__logo-img {
	width: 100%;
	height: 68px;
	object-fit: contain;
	object-position: center;
	mix-blend-mode: multiply;
}

.s-brands__body {
	padding: 0 var(--space-xl) var(--space-xl);
}

.s-brands__name {
	margin: 0 0 var(--space-sm);
	font-size: 1.125rem;
	font-weight: 500;
}

.s-brands__desc {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 300;
	line-height: 1.6;
}

/* ==========================================================================
   Adaptations
   ========================================================================== */

@media (max-width: 1199px) {
	.s-method,
	.s-brands {
		padding-block: var(--space-3xl);
	}

	.s-method__title,
	.s-brands__title {
		font-size: clamp(1.375rem, 0.9rem + 2vw, 2rem);
	}

	.s-method__inner {
		gap: var(--space-2xl);
	}

	.s-brands__card {
		flex-basis: calc((100% - 24px) / 2);
	}
}

@media (max-width: 767px) {
	.s-method__aside,
	.s-method__list,
	.s-brands__title,
	.s-brands__text,
	.s-brands__card {
		flex-basis: 100%;
	}
}