/*
 * rail.css — Rail flottant (FloatingRail) : extension au survol DESKTOP.
 * Ronde 3 (2026-10-12, demande propriétaire) : port du mécanisme du site
 * paysage — 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 = ≥768px uniquement (mêmes règles que le rail paysage :
 * 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).
 * Fichier séparé de assets/site.css (CSS levée du bundle approuvé, non retouchée).
 */

.tsr-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. */
.tsr-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). */
@media (min-width: 768px) {
	.tsr-rail-item:hover .tsr-rail-label,
	.tsr-rail-item:focus-visible .tsr-rail-label {
		max-width: 14rem;
		opacity: 1;
		margin-right: 0.7rem; /* espace entre étiquette et icône */
	}
}