/**
 * Fiche d'un champion — /champions/nom-de-l-entreprise/.
 *
 * Pas de maquette pour cette page. Elle emprunte aux autres : le bloc
 * d'identité reprend l'appui du média sur le texte des cartes partenaire, la
 * grille de produits celle de la liste des champions, et le pied de page ses
 * deux boutons de la page introuvable.
 *
 * Emplacement : assets/css/components/champion-fiche.css
 */

.champion-fiche {
	padding-block: var(--space-8) var(--space-7);
}

/* Mobile : le média au-dessus, le texte dessous. */
.champion-fiche__identite {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	align-items: center;
}

/* Le cadre du logo garde les proportions et le fond des cartes, pour que la
   fiche et la carte dont on vient se répondent. Il tient sa place même vide :
   neuf champions sur soixante et un n'ont pas de logo. */
.champion-fiche__media {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 280px;
	aspect-ratio: 418 / 196;
	padding: var(--space-5);
	overflow: hidden;
	background-color: var(--color-bg);
	border-radius: var(--radius-lg);
}

.champion-fiche__logo {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	/* Plusieurs fichiers arrivent sur fond blanc opaque, qui trancherait sur le
	   crème. « Obscurcir » l'efface sans toucher à l'encre, toujours plus
	   sombre que le crème, et reste sans effet sur un logo déjà détouré. */
	mix-blend-mode: darken;
}

/* Le portrait remplit son cadre, à l'inverse du logo. Vers le haut : sur un
   portrait, le visage est rarement au milieu de l'image. */
.champion-fiche__media--portrait {
	padding: 0;
	aspect-ratio: 1 / 1;
}

.champion-fiche__portrait {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Ni logo ni portrait : la marque en filigrane, qui se lit « logo à venir ». */
.champion-fiche__marque {
	width: 45%;
	max-width: 96px;
	height: auto;
	opacity: 0.16;
}

.champion-fiche__corps {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	align-items: center;
	text-align: center;
}

.champion-fiche__desc {
	max-width: 68ch;   /* au-delà, l'œil perd sa ligne en revenant à la marge */
	font-size: var(--fs-lead);
	line-height: var(--lh-body);
	color: var(--color-text-body);
}

/* Le développé se distingue de la présentation courte par la taille, non par
   la couleur : c'est le même propos, poursuivi. La marge haute vaut celle qui
   sépare deux paragraphes du même bloc, pas celle de deux sections. */
.champion-fiche__savoir {
	max-width: 68ch;
	margin-block-start: var(--space-4);
	line-height: var(--lh-body);
	color: var(--color-text-body);
}

.champion-fiche__savoir p + p {
	margin-block-start: var(--space-3);
}

/* ── Chiffres clés ─────────────────────────────────────────── */

/* Aucune fiche n'en porte aujourd'hui ; le champ existe et se remplira. */
.champion-fiche__chiffres {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5) var(--space-7);
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.champion-fiche__chiffre {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	align-items: center;
}

.champion-fiche__valeur {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	color: var(--e4y-green);
	/* Comme les chiffres clés de l'accueil : sans chasse fixe, le nombre
	   tremble à chaque trame pendant le décompte. */
	font-variant-numeric: tabular-nums;
}

.champion-fiche__label {
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

/* ── Boutons ───────────────────────────────────────────────── */

.champion-fiche__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: center;
}


/* ============================================================
   Ses produits
   ============================================================ */

.champion-produits {
	padding-block: var(--space-7) var(--space-8);
}

/* Même grille que la liste des champions : la colonne vaut la carte, et la
   largeur disponible décide du nombre par rangée. */
.champion-produits__grille {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-7) var(--space-5);
	margin: var(--space-7) 0 0;
	padding: 0;
	list-style: none;
}

.champion-produits__item {
	display: flex;
	flex: 0 1 280px;
	max-width: 280px;
}

.champion-produits__item .card-produit {
	width: 100%;
}


/* ============================================================
   Poursuivre la visite
   ============================================================ */

.champion-suite {
	padding-block-end: var(--section-gap);
}

.champion-suite__liens {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: center;
}


@media (min-width: 768px) {

	/* Le média se range à gauche du texte, qui reprend son alignement au fil :
	   centré, une description de six lignes se lit mal. */
	.champion-fiche__identite {
		flex-direction: row;
		gap: var(--space-7);
		align-items: flex-start;
	}

	.champion-fiche__media {
		width: 280px;
	}

	.champion-fiche__corps {
		align-items: flex-start;
		text-align: start;
	}

	.champion-fiche__chiffres,
	.champion-fiche__actions {
		justify-content: flex-start;
	}

}