/*
 * E2IT - rail d expertises.
 * Defilement natif par scroll-snap : pas de bibliotheque, donc glisser au
 * doigt, molette horizontale et clavier fonctionnent sans code.
 */

.e2it-rail { position: relative; }

/* Commandes en haut a droite, alignees sur l intro de section. */
.e2it-rail__commandes {
	position: absolute;
	top: -104px;
	right: 0;
	display: flex;
	align-items: center;
	gap: var(--e2it-espace-3);
}

.e2it-rail__compteur {
	margin: 0 var(--e2it-espace-2) 0 0;
	font-family: var(--e2it-police-mono);
	font-size: var(--e2it-mono-taille);
	letter-spacing: var(--e2it-mono-interlettrage);
	color: var(--e2it-texte-tertiaire);
}

.e2it-rail__fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--e2it-cible-tactile);
	height: var(--e2it-cible-tactile);
	padding: 0;
	font-size: 20px;
	line-height: 1;
	color: var(--e2it-marine);
	background: transparent;
	border: 1px solid var(--e2it-bordure);
	border-radius: var(--e2it-rayon-pilule);
	cursor: pointer;
	transition: background-color var(--e2it-duree-rapide) var(--e2it-courbe), border-color var(--e2it-duree-rapide) var(--e2it-courbe), opacity var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-rail__fleche:hover:not([disabled]) { background: var(--e2it-bleu-pale); border-color: var(--e2it-bleu-crete); }
.e2it-rail__fleche[disabled] { opacity: .35; cursor: default; }

/* Piste : le padding de droite laisse volontairement depasser la carte
   suivante hors du cadre. C est ce debord qui annonce la suite, mieux
   qu une fleche. */
/* Le cadre masque et defile. */
.e2it-rail__cadre {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.e2it-rail__cadre::-webkit-scrollbar { display: none; }

/* La piste ne fait que porter les cartes et se deplacer. */
.e2it-rail__piste {
	display: flex;
	gap: var(--e2it-espace-6);
	list-style: none;
	margin: 0;
	padding: 0;
	/* Pas de max-content : les cartes dimensionnees en pourcentage doivent se
	   resoudre sur la largeur du cadre. Elles debordent, c est le cadre qui
	   masque ou fait defiler. */
	flex-wrap: nowrap;
}

.e2it-rail__element {
	/* 3,35 cartes dans le cadre : la quatrieme depasse et annonce la suite,
	   sans recourir a un padding qui couperait la boucle. */
	flex: 0 0 calc((100% - 2.35 * var(--e2it-espace-6)) / 3.35);
	scroll-snap-align: start;
	min-width: 0;
}

.e2it-rail__carte {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--e2it-blanc);
	border: 1px solid var(--e2it-bordure);
	border-radius: var(--e2it-rayon-carte);
	overflow: hidden;
	text-decoration: none;
	transition: transform var(--e2it-duree-rapide) var(--e2it-courbe), box-shadow var(--e2it-duree-rapide) var(--e2it-courbe), border-color var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-rail__carte:hover { transform: translateY(-2px); box-shadow: var(--e2it-eleve); border-color: var(--e2it-bleu-crete); }

.e2it-rail__media { position: relative; display: block; }
.e2it-rail__media img,
.e2it-rail__media-vide {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Sans photo, meme traitement que les cartes d actualites. */
.e2it-rail__media-vide { background: linear-gradient(160deg, var(--e2it-marine), var(--e2it-marine-fonce)); }

.e2it-rail__numero {
	position: absolute;
	top: var(--e2it-espace-3);
	left: var(--e2it-espace-3);
	padding: 4px 9px;
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	letter-spacing: var(--e2it-mono-interlettrage);
	color: var(--e2it-marine);
	background: var(--e2it-blanc);
	border-radius: 4px;
}

.e2it-rail__corps {
	display: flex;
	flex-direction: column;
	gap: var(--e2it-espace-3);
	flex: 1;
	padding: var(--e2it-espace-6);
}

.e2it-rail__titre {
	font-size: var(--e2it-h3-taille);
	font-weight: var(--e2it-h3-graisse);
	line-height: var(--e2it-h3-interligne);
	color: var(--e2it-marine);
}

.e2it-rail__texte {
	font-size: var(--e2it-corps-taille);
	line-height: var(--e2it-corps-interligne);
	color: var(--e2it-texte-secondaire);
}

.e2it-rail__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: var(--e2it-espace-3);
	font-size: var(--e2it-lien-taille);
	font-weight: var(--e2it-lien-graisse);
	color: var(--e2it-bleu-profond);
}

.e2it-rail__fleche-cta { display: inline-block; transition: transform var(--e2it-duree-rapide) var(--e2it-courbe); }
.e2it-rail__carte:hover .e2it-rail__fleche-cta { transform: translateX(4px); }

/* Pied : pastilles, jauge, bouton. */
.e2it-rail__pied {
	display: flex;
	align-items: center;
	gap: var(--e2it-espace-6);
	margin-top: var(--e2it-espace-8);
}

.e2it-rail__pastilles { display: flex; gap: var(--e2it-espace-2); flex: none; }

.e2it-rail__pastille {
	min-width: 38px;
	height: 30px;
	padding: 0 10px;
	font-family: var(--e2it-police-mono);
	font-size: 11px;
	letter-spacing: var(--e2it-mono-interlettrage);
	color: var(--e2it-texte-secondaire);
	background: transparent;
	border: 1px solid var(--e2it-bordure);
	border-radius: var(--e2it-rayon-pilule);
	cursor: pointer;
	transition: background-color var(--e2it-duree-rapide) var(--e2it-courbe), color var(--e2it-duree-rapide) var(--e2it-courbe), border-color var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-rail__pastille:hover { border-color: var(--e2it-bleu-crete); }
.e2it-rail__pastille.est-actif { background: var(--e2it-marine); border-color: var(--e2it-marine); color: var(--e2it-blanc); }

.e2it-rail__jauge { flex: 1; height: 2px; background: var(--e2it-bordure); border-radius: 2px; overflow: hidden; }
.e2it-rail__jauge span { display: block; height: 100%; width: 20%; background: var(--e2it-accent); transition: width var(--e2it-duree-moyenne) var(--e2it-courbe); }

.e2it-rail__bouton { flex: none; }

.e2it-rail__vide { margin: 0; padding: var(--e2it-espace-6); text-align: center; color: var(--e2it-texte-tertiaire); font-size: var(--e2it-etiquette-taille); }

@media (max-width: 1024px) {
	/* Les fleches deviennent la seule commande visible : le glisser au doigt
	   fonctionne, mais rien ne l annonce - une jauge est un indicateur, pas une
	   invitation. Meme dispositif que la section equipe, pour que la page se
	   navigue de la meme facon d un bout a l autre. */
	.e2it-rail { display: flex; flex-direction: column; }
	.e2it-rail__cadre { order: 1; }
	.e2it-rail__commandes {
		order: 2;
		position: static;
		margin-top: var(--e2it-espace-6);
		gap: var(--e2it-espace-2);
	}
	/* Fleches a gauche, compteur pousse a droite, comme dans la barre equipe. */
	.e2it-rail__compteur { order: 2; margin: 0 0 0 auto; }
	.e2it-rail__fleche { width: 48px; height: 48px; }
	.e2it-rail__pied { order: 3; margin-top: var(--e2it-espace-4); }
	/* Pas de boucle au doigt : les copies sortent du rail. Cinq cartes reelles
	   au lieu de quinze, et plus de saut de serie a orchestrer. */
	.e2it-rail__element--copie { display: none; }
	.e2it-rail__element { flex-basis: calc((100% - 1.4 * var(--e2it-espace-6)) / 2.4); }
}

@media (max-width: 767px) {
	/* Une carte a la fois, avec le debord annonce dans la maquette. */
	.e2it-rail__element { flex-basis: 82%; }
	.e2it-rail__piste { gap: var(--e2it-espace-4); }
	.e2it-rail__pied { flex-wrap: wrap; gap: var(--e2it-espace-4); }
	.e2it-rail__pastilles { display: none; }
	.e2it-rail__jauge { flex: 1 1 100%; order: -1; }
	.e2it-rail__bouton { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.e2it-rail__piste { scroll-behavior: auto; }
	.e2it-rail__carte, .e2it-rail__fleche-cta, .e2it-rail__jauge span { transition: none; }
}

/* Les copies ne doivent pas etre annoncees ni atteintes au clavier. */
.e2it-rail__element--copie { pointer-events: auto; }

/* ------------------------------------------------------------------
   Deux modes de navigation

   Tactile : defilement natif au doigt, avec accrochage. C est ce que les
   utilisateurs attendent, et cela fonctionne sans code.

   Souris : la piste ne defile plus du tout et se deplace par transform.
   Empiler defilement programme, accrochage obligatoire et defilement doux
   revenait a faire decider trois mecanismes concurrents de la position
   finale ; le saut etait annule avant d aboutir.

   La bascule se fait sur la presence d une souris, pas sur une largeur :
   c est le pointeur fin qui justifie la navigation aux fleches.
   ------------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
	.e2it-rail__cadre {
		overflow: hidden;
		scroll-snap-type: none;
		scroll-behavior: auto;
	}

	.e2it-rail__piste {
		will-change: transform;
		transition: transform 420ms var(--e2it-courbe);
	}

	/* Repositionnement de boucle : un temps sans transition, pour que le
	   retour a la serie centrale ne se voie pas. */
	.e2it-rail__piste.sans-transition { transition: none; }

	.e2it-rail__element { scroll-snap-align: none; }
}

@media (prefers-reduced-motion: reduce) {
	.e2it-rail__piste { transition: none; }
}

/* Inertie native au doigt : scroll-behavior smooth entre en concurrence
   avec l inertie du navigateur et donne un glisser qui accroche. */
@media (hover: none) {
	.e2it-rail__cadre:not(#e2it) {
		scroll-behavior: auto;
	}
}