/* ====================================================== */
/*          CONTENU COMPLET POUR VOTRE button.css         */
/* ====================================================== */

/* 1. On définit le thème ROUGE et la POLICE */
:root {
	/* Thème Rouge "Le Wagon" */
	--bg-button: #E70000;                       /* Fond rouge vif */
	--border-button: #E70000;                   /* Bordure rouge vif */
	--color-button: white;                      /* Texte blanc */
	--font-button: 'Roboto', sans-serif;        /* Police de votre site */
	--transition-easing: cubic-bezier(0.19, 1, 0.22, 1);

	/* --- Couleurs au survol (hover) --- */
	--bg-button-hover: #D00000;                  /* Un rouge un peu plus sombre */
	--border-button-hover: #D00000;
	--color-button-hover: white;
	--shadow-button-hover: 0 5px 15px rgba(0, 0, 0, 0.2); /* Une ombre plus douce */

	/* --- Masque animé (on le rend subtil) --- */
	--bg-mask: white;                           /* Le masque sera blanc */

	/* --- État actif (au clic) --- */
	--bg-button-active: #B00000;                 /* Encore plus sombre au clic */
	--color-button-active: white;
}

/* 2. On ajuste la TAILLE et l'ASPECT du bouton */
.button {
	display: inline-block; /* Important pour que le bouton ne prenne pas toute la largeur */
	background-color: var(--bg-button);
	border: 1px solid var(--border-button);
	border-radius: 4px; /* Arrondi identique à votre ancien bouton */
	cursor: pointer;
	overflow: hidden;
	padding: 15px 25px; /* Taille similaire à votre ancien bouton */
	position: relative;
	text-align: center;
	transition: all 0.3s var(--transition-easing);
	user-select: none;
}

/* 3. On ajuste la POLICE du lien dans le bouton */
.button a {
	color: var(--color-button);
	font-family: var(--font-button);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.5px;
	position: relative;
	text-decoration: none;
	white-space: nowrap;
	z-index: 2;
	
	/* --- AJOUTS POUR L'ALIGNEMENT --- */
	display: inline-flex;  /* On active Flexbox sur le lien */
	align-items: center;  /* On centre verticalement le texte ET la flèche */
	gap: 8px;             /* On ajoute un espace propre entre le texte et la flèche */
}

/* 4. On garde les animations, mais en ajustant le masque */
.button .mask {
	background-color: var(--bg-mask);
	height: 100px;
	position: absolute;
	transform: translate3d(-120%, -50px, 0) rotate3d(0, 0, 1, 45deg);
	transition: all 1.1s var(--transition-easing);
	width: 200px;
	z-index: 1;
	opacity: 0.15; /* On rend le masque plus subtil */
}

.button .shift {
	display: inline-block;
	font-size: 22px; /* On la rend plus grande et plus visible */
	font-weight: 700;
	transition: all 0.4s var(--transition-easing);
	/* On n'a plus besoin de 'vertical-align', Flexbox s'en charge ! */
}

/* --- :HOVER - Effets au survol --- */

.button:hover {
	background-color: var(--bg-button-hover);
	border-color: var(--border-button-hover);
	box-shadow: var(--shadow-button-hover);
	transform: translateY(-2px); /* Léger effet de soulèvement */
}

.button:hover a {
	color: var(--color-button-hover);
}

.button:hover .mask {
	transform: translate3d(120%, -100px, 0) rotate3d(0, 0, 1, 90deg);
}

.button:hover .shift {
	transform: translateX(5px); /* Le "›" se décale un peu plus */
}

/* --- :ACTIVE - Effet au clic --- */
.button:active {
	background-color: var(--bg-button-active);
	transform: translateY(0); /* Le bouton revient à sa place */
	box-shadow: none; /* On enlève l'ombre au clic */
}

.button:active a {
	color: var(--color-button-active);
}