/**
 * Section « LE CONSORTIUM » — page d'accueil.
 *
 * Figma : titre 48 px, sous-titre 20 px sur 848 px, trois cartes sur
 * 1300 px de large (= --container-max), CTA or centré.
 *
 * Emplacement : assets/css/components/section-consortium.css
 */

/* Pas de padding en haut : la section programme qui précède déclare déjà
   padding-block-end: var(--space-9) (80 px), ce qui correspond aux 78 px
   Figma entre le bas de l'anneau et le titre. En ajouter ici le doublerait. */
.section-consortium {
	padding-block-start: 0;
	padding-block-end: var(--section-gap);
	text-align: center;
}

/* Titre et sous-titre : voir le composant section-entete. */

.section-consortium__carousel {
	margin-block-start: var(--space-2);   /* Figma : 8 px avant la rangée de flèches */
	/* Les cartes reprennent l'alignement à gauche par défaut : seuls les
	   textes internes sont centrés, via le composant card-partenaire. */
	text-align: start;
}

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


/* ============================================================
   Mobile — les partenaires s'empilent

   Figma 01_MOB les pose les uns sous les autres plutôt que de les faire
   défiler : sur 402 px, une carte occupe déjà toute la largeur, et le
   défilement horizontal n'ajoute qu'un geste. La piste redevient une
   colonne ; le script constate qu'il n'y a plus rien à faire défiler et
   escamote les flèches de lui-même.

   Réglage propre à cette section, et non au composant carousel : c'est la
   seule dont nous ayons la maquette mobile.
   ============================================================ */

@media (max-width: 767px) {

	/* Ordre de la maquette : les cartes, le bouton, puis les flèches. Le bouton
	   vit dans une section, les flèches dans le composant carousel : display:
	   contents promeut les enfants du carousel au niveau du conteneur, seul
	   moyen de glisser l'un entre les autres sans toucher au balisage. */
	.section-consortium .container {
		display: flex;
		flex-direction: column;
	}

	.section-consortium__carousel {
		display: contents;
	}

	/* Figma laisse 37 px d'encre entre le titre et le sous-titre, contre les
	   27 que donne l'écart par défaut du composant en-tête. */
	.section-consortium .section-entete__soustitre {
		margin-block-start: var(--space-5);
	}

	.section-consortium .carousel__piste {
		order: 1;
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: var(--space-6);                 /* Figma : ~32 px entre les cartes */
		justify-items: center;
		margin-block-start: var(--space-7);  /* Figma : 44 px sous le sous-titre */
		overflow: visible;
		scroll-snap-type: none;
	}

	/* Figma pose les cartes et le bouton sur 280 px au milieu de l'écran, et
	   non d'une gouttière à l'autre. */
	.section-consortium .carousel__item {
		width: 100%;
		max-width: 280px;
	}

	.section-consortium__actions {
		order: 2;
		margin-block-start: var(--space-6);  /* Figma : 35 px sous la dernière carte */
	}

	/* Le bouton s'étale à la largeur des cartes, libellé à gauche et flèche
	   repoussée à droite, comme dans la maquette — où il tient sur deux
	   lignes. D'où l'annulation du nowrap global : sans elle, le libellé
	   passait sous la flèche au lieu de se replier. */
	.section-consortium__actions .btn {
		width: 100%;
		max-width: 280px;
		justify-content: space-between;
		white-space: normal;
		text-align: start;
		line-height: var(--lh-heading);
		/* L'écart avec la flèche décide de la coupure : à 8 px, « de » restait
		   sur la première ligne. Figma coupe après « offre ». */
		gap: var(--space-5);
	}

	.section-consortium .carousel__nav {
		order: 3;
		margin-block: var(--space-7) 0;      /* Figma : 43 px sous le bouton */
	}

}