/*
 * rail.css — Rail flottant (FloatingRail) : extension au survol DESKTOP.
 * Ronde 2, demande propriétaire 2026-10-12 : au survol (curseur), chaque bouton
 * vert s'étend horizontalement et révèle un CTA court (3-4 mots) ; l'icône
 * reste en place, l'étiquette se déplie vers la gauche.
 * Conditions : desktop = (hover:hover) AND (pointer:fine) AND ≥768px.
 * Mobile / pointeur tactile : rien ne change (cercles 56px, icônes seules).
 * Fichier séparé de assets/site.css (CSS levée du bundle approuvé, non retouchée).
 */

.tsp-rail-item {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 3.5rem;
	height: 3.5rem;
	padding: 0 1rem;
	box-sizing: border-box;
	flex: 0 0 auto;
}

/* Repos : étiquette repliée = cercle 56px centré sur l'icône. */
.tsp-rail-label {
	display: inline-block;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	margin-left: 0;
	margin-right: 0;
	white-space: nowrap;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: max-width 0.28s cubic-bezier(0.2, 0.6, 0.2, 1),
		opacity 0.18s ease 0.06s,
		margin-right 0.28s cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Desktop uniquement (≥768px). NB: sans (hover:hover)/(pointer:fine) — les PC
 * tactiles et le headless les renvoient à false et tueraient le CTA souris ;
 * :hover seul suffit (un tap sur mobile navigue avant d'attacher le survol). */
@media (min-width: 768px) {
	.tsp-rail-item:hover .tsp-rail-label,
	.tsp-rail-item:focus-visible .tsp-rail-label {
		max-width: 14rem;
		opacity: 1;
		margin-right: 0.7rem; /* espace entre étiquette et icône */
	}
}