/* Variables de couleur */
:root {
    --mg-red: #CC1219;
}

.MG-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 25px 50px; /* Moins haut, mais beaucoup plus large sur les côtés */
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    font-size: 15px; /* On réduit la police pour retrouver la proportion de la photo 1 */
    letter-spacing: 0.5px; /* Un tout petit peu d'espace entre les lettres pour faire propre */
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
    line-height: 1; /* Garde le texte bien centré verticalement sans espace parasite */
}

/* STYLE 1 : ROUGE PLEIN -> Hover BLANC */
.MG-button.MG-button--filled-red {
    background-color: var(--mg-red);
    color: #FFFFFF;
}
.MG-button.MG-button--filled-red:hover {
    background-color: #FFFFFF;
    color: var(--mg-red);
    border-color: white !important; 
}

/* STYLE 2 : BORDURE ROUGE (Texte Rouge) -> Hover ROUGE PLEIN */
.MG-button.MG-button--outline-red {
	border: 2px solid var(--mg-red);
    background-color: transparent;
    color: var(--mg-red);
}
.MG-button.MG-button--outline-red:hover {
    background-color: var(--mg-red);
    color: #FFFFFF;
}

/* STYLE 3 : BORDURE ROUGE (Texte Noir) -> Hover ROUGE PLEIN */
.MG-button.MG-button--outline-black {
	border: 2px solid var(--mg-red);
    background-color: transparent;
    color: #000000;
}
.MG-button.MG-button--outline-black:hover {
    background-color: var(--mg-red);
    color: #FFFFFF;
}