/* Rail de formations — les cartes défilent horizontalement pendant que la page
   défile verticalement. Sans JavaScript, le rail reste un défilement tactile
   classique : aucune fonctionnalité n'est perdue. */

/* Pleine largeur imposée. Le shortcode peut atterrir dans n'importe quel
   conteneur contraint : la mise en page de WordPress (`.is-layout-constrained`)
   y recentre l'élément et plafonne sa largeur. Il faut gagner avant que GSAP
   ne fige cette géométrie dans son `pin-spacer` — d'où le `!important`, seul
   endroit du thème où il est employé. */
.soform-rail.soform-rail {
	/* Pas d'écart de bloc : sans ça une bande sans grain apparaît entre cette
	   section et la suivante. */
	margin-block: 0 !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-right: calc(50% - 50vw) !important;
	margin-left: calc(50% - 50vw) !important;
}

.soform-rail {
	--soform-rail-card-w: 380px;
	--soform-rail-card-h: 460px;
	--soform-rail-gap: 24px;
	--soform-rail-encre: var(--theme-palette-color-1, #17120f);
	--soform-rail-page: var(--theme-palette-color-8, #f6f0ea);
	--soform-rail-sombre: var(--theme-palette-color-6, #e3d8cd);
	--soform-rail-filet: rgba(23, 18, 15, 0.12);

	position: relative;

	padding: clamp(64px, 8vw, 100px) 0;
	background-color: var(--soform-rail-page);
}

/* Au-dessus du grain de section (z-index 0) : sans ça le titre et le bouton
   « Voir le catalogue » passaient sous la texture. */
.soform-rail__sticky > .ct-container,
.soform-rail__head {
	position: relative;
	z-index: 1;
}

.soform-rail__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(32px, 4vw, 56px);
}

.soform-rail__title {
	margin: 0;
}

.soform-rail__button {
	padding: 14px 28px;
	border-radius: 999px;
	background-color: #ffffff;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.6px;
	color: var(--soform-rail-encre);
	text-decoration: none;
	transition: transform 0.25s ease;
}

.soform-rail__button:hover {
	transform: translateY(-2px);
}

/* Piste ------------------------------------------------------------------ */

.soform-rail__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;

	/* Le rognage vertical coupait le soulèvement des cartes au survol et leur
	   ombre : on repousse la limite de 24 px, compensés par la marge. */
	padding-block: 24px;
	margin-block: -24px;
}

.soform-rail__viewport::-webkit-scrollbar {
	display: none;
}

.soform-rail__track {
	display: flex;
	gap: var(--soform-rail-gap);
	/* Gouttière alignée sur le conteneur du thème. `--theme-container-width`
	   vaut `min(100%, 90vw)` chez Blocksy : sans la borne haute, la première
	   carte tombait 8 px à droite du bord du contenu. */
	padding: 0 max(
		calc((100vw - min(var(--theme-container-width, 1280px), var(--theme-normal-container-max-width, 1280px))) / 2),
		20px
	);
	width: max-content;
}

.soform-rail__card {
	position: relative;
	display: flex;
	width: var(--soform-rail-card-w);
	height: var(--soform-rail-card-h);
	flex: 0 0 var(--soform-rail-card-w);
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	padding: 24px 28px 28px;
	border-radius: 10px;
	background-color: var(--soform-rail-encre);
	color: var(--soform-rail-page);
	text-decoration: none;
	transition: transform 0.35s ease;
}

.soform-rail__card:hover,
.soform-rail__card:focus,
.soform-rail__card:focus-visible,
.soform-rail__card:active {
	/* La carte est un lien : sans ces couleurs figées, le survol appliquait la
	   couleur de lien du thème et le titre virait au brun délavé sur la photo. */
	color: var(--soform-rail-page);
}

.soform-rail__card:hover {
	transform: translateY(-6px);
}

.soform-rail__media,
.soform-rail__veil {
	position: absolute;
	inset: 0;
}

.soform-rail__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Cadrage propre à la formation (`--fuite`, `--zoom`, écrits en ligne sur
	   `.soform-rail__media`). Par défaut, cadré à droite : les visuels des
	   formations (30/09/2026) portent le logo et le titre incrustés à gauche. */
	object-position: var(--fuite, 100% 50%);
	transform: scale(var(--zoom, 1));
	transform-origin: var(--fuite, 100% 50%);
	transition: transform 0.6s ease;
}

.soform-rail__card:hover .soform-rail__image {
	transform: scale(calc(var(--zoom, 1) * 1.05));
}

.soform-rail__veil {
	background-image: linear-gradient(
		180deg,
		rgba(23, 18, 15, 0.1) 0%,
		rgba(23, 18, 15, 0) 45%,
		rgba(23, 18, 15, 0.92) 100%
	);
}

.soform-rail__badge {
	position: absolute;
	top: 24px;
	left: 24px;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.18);
	font-size: 12px;
	letter-spacing: 0.5px;
	color: #ffffff;
}

.soform-rail__legend {
	position: relative;
	display: flex;
	max-width: 250px;
	flex-direction: column;
	gap: 6px;
}

.soform-rail__name {
	font-family: var(--theme-font-family, inherit);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
}

.soform-rail__sub {
	font-size: 14px;
	line-height: 1.58;
	color: var(--soform-rail-sombre);
}

.soform-rail__go {
	position: absolute;
	right: 28px;
	bottom: 28px;
	display: flex;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background-color: var(--soform-rail-page);
	color: var(--soform-rail-encre);
	transition: transform 0.25s ease;
}

.soform-rail__card:hover .soform-rail__go {
	transform: translateX(3px);
}

/* Carte finale ----------------------------------------------------------- */

/* Carte sombre : en blanc sur le crème de la section, elle se dissolvait dans
   le fond et ne se lisait plus comme la fin du rail. En encre, elle referme la
   série des photos et devient le point d'arrivée du parcours horizontal. */
.soform-rail__card--cta {
	justify-content: space-between;
	padding: 32px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background-color: var(--soform-rail-encre);
	color: var(--soform-rail-page);
}

.soform-rail__card--cta .soform-rail__legend {
	max-width: none;
	gap: 12px;
}

.soform-rail__card--cta .soform-rail__name {
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.soform-rail__card--cta .soform-rail__sub {
	font-size: 16px;
	line-height: 1.6;
	color: var(--soform-rail-sombre);
}

/* Au-dessus du grain de la carte (::before, z-index 0 — voir functions.php). */
.soform-rail__cta-foot {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.soform-rail__cta-label {
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

/* Pastille posée dans le flux (et non en absolu comme sur les cartes photo) :
   claire sur la carte sombre, comme les pastilles des cartes photo. */
.soform-rail__go--inline {
	position: static;
	width: 44px;
	height: 44px;
	background-color: var(--soform-rail-page);
	color: var(--soform-rail-encre);
}

/* Progression ------------------------------------------------------------ */

.soform-rail__progress {
	position: relative;
	height: 2px;
	margin-top: clamp(32px, 4vw, 56px);
	background-color: var(--soform-rail-filet);
	overflow: hidden;
}

.soform-rail__progress-bar {
	position: absolute;
	inset: 0 auto 0 0;
	width: 22%;
	background-color: var(--soform-rail-encre);
}

/* Mode épinglé : activé seulement quand GSAP a pris la main. */
.soform-rail.is-pinned .soform-rail__viewport {
	overflow: hidden;
}

/* Épinglée, la section doit remplir l'écran. Sa hauteur naturelle (831 px sur
   un viewport de 900) laissait deux défauts liés : un vide sous les cartes
   pendant tout le parcours, et la section suivante qui remontait dans les
   dernières dizaines de pixels du défilement horizontal — le bas du
   `pin-spacer` entrait dans le champ avant la fin de l'épinglage. À 100vh, le
   haut de la section suivante coïncide exactement avec le bas de l'écran au
   moment où GSAP relâche : on ne la voit pas arriver. */
.soform-rail.is-pinned {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	justify-content: center;
}

.soform-rail.is-pinned > .soform-rail__sticky {
	width: 100%;
}

/* Le shortcode écrit `--soform-rail-card-w` en style EN LIGNE sur la section :
   une redéfinition de la variable ici ne pouvait pas gagner, et la largeur de
   carte mobile n'a donc jamais été appliquée — 380 px de carte sur un écran de
   390. On plafonne la largeur rendue plutôt que la variable, ce qui laisse le
   réglage du shortcode agir sur grand écran sans avoir à passer par
   `!important`. */
@media (max-width: 689.98px) {
	.soform-rail__card {
		width: min(var(--soform-rail-card-w), 78vw);
		flex-basis: min(var(--soform-rail-card-w), 78vw);
		height: min(var(--soform-rail-card-h, 420px), calc(100vh - 210px));
	}
}

/* La carte de l'institut réemploie la carte du catalogue sans la modifier : il
   n'y a donc rien à habiller ici. La classe `soform-rail--carte` ne sert plus
   qu'à deux choses — le repérage par `assets/carte/carte.js`, qui fait sauter
   la barre du hero à la bonne carte, et l'ancre `#carte`. */