@import url('../font-family/root.css');

/* 1. Déclare ta police locale */
@font-face {
    font-family: 'Inter';
    src: url('Inter.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 3. Applique-la partout */
* {
    font-family: 'Inter', sans-serif;
    color: #151D38;
}

button,
.btn,
button *,
.btn *,
a,
a * {
    color: inherit;
}

.btn-close {
    filter: invert(1);
}

.color-white {
    color: white;
}

.btn-rouge {
    background-color: var(--color-rouge) !important;
    color: white;
}

.btn-bleu-ciel {
    /* color: var(--color-encre) !important; */
}

.btn-jaune {
    background-color: var(--color-jaune) !important;
    color: var(--color-encre) !important;
}

.btn-jaune:hover, 
.btn-jaune:focus, 
.btn-jaune:active {
    /* Remplacez par la couleur de fond que vous voulez au survol (ex: un jaune plus foncé) */
    background-color: var(--color-jaune) !important; 
    
    /* Force la couleur du texte à rester la même */
    color: white; 
    
    /* Optionnel : si une bordure bleue apparaît aussi */
    border-color: var(--color-jaune); 
    
    /* Enlive l'ombre bleue au clic */
    box-shadow: none !important; 
}

.btn-rouge:hover, 
.btn-rouge:focus, 
.btn-rouge:active {
    /* Remplacez par la couleur de fond que vous voulez au survol (ex: un rouge plus foncé) */
    background-color: var(--color-rouge) !important; 
    
    /* Force la couleur du texte à rester la même */
    color: white; 
    
    /* Optionnel : si une bordure bleue apparaît aussi */
    border-color: var(--color-rouge) !important; 
    
    /* Enlive l'ombre bleue au clic */
    box-shadow: none !important; 
}

.btn-custom {
    background-color: var(--btn-color) !important;
    border-color: var(--btn-color) !important;
    color: white; /* Si tous tes boutons ont du texte blanc par défaut */
}

.btn-custom:hover, 
.btn-custom:focus, 
.btn-custom:active {
    /* Il utilise une variable dynamique --btn-color qui changera selon le bouton */
    background-color: var(--btn-color) !important; 
    border-color: var(--btn-color) !important; 
    color: white; 
    box-shadow: none !important; 
}

/* 2. On définit simplement la couleur pour chaque variante */
.btn-rouge  { --btn-color: var(--color-rouge); }
.btn-jaune  { --btn-color: var(--color-jaune); }
.btn-vert   { --btn-color: var(--color-vert); }
.btn-corail { --btn-color: var(--color-corail); }
.btn-annuler { --btn-color: var(--color-annuler); }
.btn-bleu-ciel { --btn-color: var(--color-bleu-ciel); }

.color-white {
    color: white;
}

.color-encre {
    color: var(--color-encre) !important;
}


.color-encre a {
    color: #123456 !important;
}

.color-bleu-ciel {
    color: var(--color-bleu-ciel) !important;
}

/* Rend tous les textes de la boîte blancs */
.left-sign-up, 
.left-sign-up * {
    color: #FFFFFF;
}

/* Optionnel : Style spécifique pour le lien au survol */
.left-sign-up .support-link:hover {
    color: #E0E0E0; /* Devient gris clair au survol */
    text-decoration: underline;
}