/**
 * Page « Le Programme » — section « Nos participants ».
 *
 * Reprend le carousel du consortium ; seules les cartes diffèrent (fond crème
 * et bouton), traité par des options du composant card-partenaire.
 *
 * Emplacement : assets/css/components/pgm-participants.css
 */

.pgm-participants {
	padding-block-start: var(--space-9);   /* Figma : 77 px sous le bouton */
	padding-block-end: var(--section-gap);
}

.pgm-participants__carousel {
	margin-block-start: var(--space-2);   /* la rangée de flèches suit */
	text-align: start;
}

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


/* ============================================================
   Mobile — même rythme que le consortium de l'accueil

   La piste garde son défilement : le nombre de participants n'est pas connu
   d'avance, là où la maquette de l'accueil empile trois cartes de consortium.
   Tout le reste est repris tel quel — carte de 280 px au milieu de l'écran et
   non d'une gouttière à l'autre, 48 px sous le titre, et un bouton à la
   largeur des cartes, libellé à gauche et flèche à droite.
   ============================================================ */

@media (max-width: 767px) {

	.pgm-participants {
		padding-block-start: var(--space-8);
	}

	/* Les 8 px du socle ne servaient qu'à décoller la piste de la rangée de
	   flèches, qui passe sous les cartes en mobile. */
	.pgm-participants__carousel {
		margin-block-start: var(--space-7);
	}

	/* La colonne de la piste garde toute la largeur — c'est elle qui règle le
	   pas du défilement, une carte par écran. C'est la carte qui se resserre,
	   et non l'élément de piste : plafonné, celui-ci cessait d'être étiré par
	   la grille et se calait au bord gauche de sa colonne, sans que ni
	   justify-items ni des marges automatiques n'y changent quoi que ce soit.
	   Sur la carte, simple bloc dans le flux, les marges automatiques
	   fonctionnent. */
	.pgm-participants .card-partenaire {
		max-width: 280px;
		margin-inline: auto;
	}

	.pgm-participants__actions {
		margin-block-start: var(--space-6);
	}

	.pgm-participants__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;
	}

}