:root {
    --background: #FFFFFF;
    --accent-color-pink: #DB147C;
    --accent-color-blue: #009FE3;
    --text: #393939;
    --accent-color-dark-blue: #2c3e50;
    --surface-1: #ededed;
    --surface-2: #c2c2c2;
}

@font-face {
    font-family: 'Roboto';
    src: url('/e-mersion-decouverte/public/fonts/Roboto-Variable.ttf') format('truetype');
}

@font-face {
    font-family: 'Stormfaze';
    src: url('/e-mersion-decouverte/public/fonts/Stormfaze.otf') format('opentype');
}

.titre {
    font-family: 'Stormfaze', sans-serif;
}

body, html  {
    font-family: Roboto, sans-serif;
}

.roboto-bold {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

.translate-up-5px {
    transform: translateY(-5px);
}

.selected-accent-color-pink {
    background-color: rgb(157 23 77);
}
.selected-accent-color-blue {
    background-color: rgb(7 89 133);
}

.scrollbar-custom {
    overflow-x: scroll !important;
    scrollbar-color: #ec4899 #f3f4f6;
}

.scrollbar-custom::-webkit-scrollbar {
    height: 12px;
    background: #f3f4f6;
}

.scrollbar-custom::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #3b82f6, #ec4899);
    border-radius: 8px;
    min-width: 40px;
    border: 2px solid #f3f4f6;
}

.choices {
    flex: 1;
}
.choices__inner {
    background: transparent !important;
    border: 1px solid #c2c2c2 !important;
    border-radius: 0.75rem !important;
}

.choices__input {
    background: transparent !important;
    color: var(--text) !important;
}

.choices__list--multiple .choices__item {
    background-color: var(--accent-color-dark-blue) !important;
    border: 1px solid var(--accent-color-dark-blue) !important;
}

#formation-description a,
#metier-description a {
    color: var(--accent-color-pink);
    text-decoration: underline;
}

#formation-description a:hover,
#metier-description a:hover {
    color: var(--accent-color-blue);
    text-decoration: underline;
}