/**
 * Page « E4Y Hub » — familles de partenaires.
 *
 * Grille et non carousel : le filtre par pays masque des bulles, et une grille
 * les recompose d'elle-même là où une piste à défilement laisserait des trous.
 *
 * Figma : bulles de 258 sur quatre colonnes (agrégateurs), de 384 sur deux ou
 * trois (relais, financiers, distribution). Les bulles portent leurs propres
 * proportions, cette feuille ne gère que leur disposition.
 *
 * Emplacement : assets/css/components/hub-famille.css
 */

.hub-famille {
	padding-block: var(--section-gap);
}

/* ── Filtres par pays ──────────────────────────────────────── */

.hub-famille__filtres {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: baseline;
	justify-content: center;
	margin-block-start: var(--space-5);
}

/* Séparateur en balise plutôt qu'en pseudo-élément : le contenu d'un ::after
   est annoncé par plusieurs lecteurs d'écran, et se retrouverait collé au
   libellé du bouton. Ici il est explicitement masqué à l'accessibilité. */
.hub-famille__separateur {
	color: var(--e4y-orange);
}

/* Vert au repos, orange une fois choisi (Figma) : la couleur porte l'état,
   pas seulement la graisse. */
.hub-famille__filtre {
	padding: var(--space-2) 0;
	font-family: var(--font-display);
	font-size: var(--fs-lead);
	color: var(--color-text);
	background: none;
	border: 0;
	cursor: pointer;
	transition: color var(--duration) var(--ease);
}

.hub-famille__filtre:hover {
	color: var(--e4y-orange);
}

/* aria-pressed porte l'état : le style suit l'attribut plutôt qu'une classe,
   ce qui garde l'information au même endroit pour l'affichage et pour les
   technologies d'assistance. La graisse double la couleur, pour que
   l'information ne repose pas sur elle seule. */
.hub-famille__filtre[aria-pressed='true'] {
	font-weight: var(--fw-bold);
	color: var(--e4y-orange);
}

/* ── Grille de bulles ──────────────────────────────────────── */

/* Par défaut la rangée occupe toute la largeur du conteneur : ses bulles
   extrêmes se calent donc sur le logo du header, comme les trois partenaires
   financiers et de distribution de la maquette. */
.hub-famille__grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
	gap: var(--space-6);
	margin-block-start: var(--space-6);
}

/* Rangées que Figma centre — deux relais, quatre agrégateurs. max-width
   plafonne le diamètre des bulles à la valeur du dessin : --bulle-max et
   --colonnes sont posés en style inline par le PHP. Sans ce plafond, quatre
   bulles s'étalent sur tout le conteneur et dépassent de 25 % la maquette. */
.hub-famille__grille--centree {
	max-width: calc(
		var(--colonnes, 4) * var(--bulle-max, 258px) +
		(var(--colonnes, 4) - 1) * var(--space-6)
	);
	margin-inline: auto;
}

.hub-famille__vide {
	margin-block-start: var(--space-6);
	color: var(--color-text-muted);
	text-align: center;
}

.hub-famille__actions {
	display: flex;
	justify-content: center;
	margin-block-start: var(--space-7);
}


/* ============================================================
   Desktop 1200px — nombre de colonnes imposé par la section
   ============================================================ */

@media (min-width: 1200px) {

	/* --colonnes est posé en style inline par le PHP, d'après le champ ACF. */
	.hub-famille__grille {
		grid-template-columns: repeat(var(--colonnes, 4), 1fr);
	}

}


/* ============================================================
   Mobile — deux colonnes, et des filtres sans barre orpheline
   ============================================================ */

@media (max-width: 767px) {

	/* Quatre familles se suivent : à 48 px de chaque côté, elles laissaient
	   116 px entre chaque grille et le titre suivant. */
	.hub-famille {
		padding-block: var(--space-6);
	}

	/* auto-fill sur un minimum de 180 px ne tenait qu'une colonne dans les
	   346 px de la gouttière : chaque logo occupait une pleine largeur et la
	   page atteignait 12 700 px. Deux colonnes imposées ramènent les familles
	   à la longueur d'un écran ou deux. */
	.hub-famille__grille {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-5);
	}

	/* Le plafond est calculé pour les diamètres de la maquette desktop ; sur
	   deux colonnes il n'a plus d'objet. */
	.hub-famille__grille--centree {
		max-width: none;
	}

	/* Les quatre pays passent sur deux lignes, et la barre séparatrice se
	   retrouvait seule en fin de ligne, avant « Togo ». Rien en CSS ne peut
	   l'empêcher de tomber là : elle disparaît, l'écart suffit à séparer. */
	.hub-famille__separateur {
		display: none;
	}

	.hub-famille__filtres {
		gap: var(--space-3) var(--space-5);
	}

	/* Même bouton que partout ailleurs en mobile : la largeur des cartes,
	   libellé à gauche et flèche à droite. Laissés à leur largeur naturelle,
	   les boutons de famille mesuraient 192 et 250 px là où ceux du consortium
	   pilote et des champions en font 280 — trois calages différents sur une
	   même page. */
	.hub-famille__actions .btn {
		gap: var(--space-5);
		justify-content: space-between;
		width: 100%;
		max-width: 280px;
		line-height: var(--lh-heading);
		text-align: start;
		white-space: normal;
	}

}