@font-face {
    font-family: 'Montserrat';
    src: url('../../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
}

/* Définition des variables globales par défaut (mode clair) */
:root {
    --near-white-gray: #f9fafb;
    --black: #000000;
    --light-gray-blue: #e5e7eb;
    --white: #ffffff;
    --vivid-blue: #2563eb;
    --deep-blue: #1d4ed8;
    --lightest-gray: #f3f4f6;
    --charcoal-gray: #374151;
    --charcoal: #1F2937;
    --slate-gray: #6b7280;
    --off-white: #f9fafb;
    --cool-gray: #4b5563;
    --vivid-red: #ef4444;
    --deep-red: #dc2626;
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
    :root {
        --near-white-gray: #171717;
        --black: #a3a3a3;
        --light-gray-blue: #404040;
        --white: #171717;
        --vivid-blue: #2563eb;
        --deep-blue: #1d4ed8;
        --lightest-gray: #262626;
        --charcoal-gray: #686e76;
        --charcoal: #ffffff;
        --slate-gray: #737373;
        --off-white: #404040;
        --cool-gray: #a3a3a3;
        --vivid-red: #ef4444;
        --deep-red: #dc2626;
    }
}

html {
    height: -webkit-fill-available;
}

body {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    margin: 0;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    background-color: var(--lightest-gray);
    color: var(--charcoal);
}

@media only screen and (max-width: 768px) {
    body {
        height: 100dvh;
    }
}

h1,
h2,
h3,
h4 {
    margin: 0;
}

.form-style-1 {
    background-color: var(--white);
    border-radius: 16px;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
    box-sizing: border-box;
    padding: 20px;
}

.button-style-1 {
    text-decoration: none;
    align-items: center;
    appearance: button;
    background-color: var(--vivid-blue);
    border-radius: 8px;
    border: none;
    box-sizing: border-box;
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin-top: 20px;
    padding: 8px 12px;
    width: 100%;
}

.button-style-1:hover {
    background-color: var(--deep-blue);
}

.button-style-2 {
    align-items: center;
    appearance: button;
    text-decoration: none;
    background-color: var(--white);
    border: solid 1px var(--light-gray-blue);
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    box-sizing: border-box;
    color: var(--charcoal);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
}

.button-style-2:hover {
    background-color: var(--off-white);
}

.input-container {
    margin-top: 20px;
}

.input-container label {
    color: var(--charcoal);
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

input,
select,
textarea {
    appearance: none;
    background-color: var(--white);
    border: solid 1px var(--light-gray-blue);
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--black);
    display: block;
    font-size: 14px;
    font-weight: 400;
    padding: 10px 12px;
    width: 100%;
}

textarea {
    resize: none;
}

input[type='radio'] {
    appearance: auto;
    width: auto;
}

.radio-container {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
}

.input-container .radio-container label {
    margin-bottom: 0;
}

input[type='checkbox'] {
    appearance: auto;
    width: auto;
}

.checkbox-container {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
}

.input-container .checkbox-container label {
    margin-bottom: 0;
}

.error-message-style-1 {
    color: #ff0000;
    font-weight: bold;
    font-size: 16px;
    display: block;
    animation: vibration 0.5s ease-in-out;
    padding-top: 5px;
    text-align: center;
}

@keyframes vibration {
    0% {
        transform: translateX(-3px);
    }

    20% {
        transform: translateX(3px);
    }

    40% {
        transform: translateX(-3px);
    }

    60% {
        transform: translateX(3px);
    }

    80% {
        transform: translateX(-3px);
    }

    100% {
        transform: translateX(0);
    }
}

.hidden {
    display: none;
}

.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    padding: 20px;
    box-sizing: border-box;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: flex;
}

.popup-container.hidden {
    display: none;
}

.popup {
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 10px 40px 10px;
    box-sizing: border-box;
    max-width: 500px;
    width: 500px;
    margin: auto;
}

.popup .popup-header {
    padding: 10px 16px;
    border-bottom: solid 1px var(--light-gray-blue);
    display: flex;
    align-items: center;
}

.popup .popup-body {
    padding: 16px;
}

.popup .popup-footer {
    padding: 8px 16px;
    border-top: solid 1px var(--light-gray-blue);
    display: flex;
    justify-content: end;
}

.popup .close-popup-button {
    display: flex;
    justify-content: center;
    align-items: center;
    appearance: none;
    background-color: var(--lightest-gray);
    border-radius: 9999px;
    border: none;
    box-sizing: border-box;
    color: var(--charcoal);
    cursor: pointer;
    height: 32px;
    width: 32px;
    min-height: 32px;
    min-width: 32px;
    margin-right: 0px;
    margin-left: auto;
    padding: 0;
}

.popup .close-popup-button:hover {
    background-color: var(--light-gray-blue);
}

.popup .close-popup-button::before {
    content: " ";
    /* Icône ou texte ajouté avant le bouton */
    background-image: url('data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic2hyaW5rLTAgc2l6ZS00IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xOCA2IDYgMTgiPjwvcGF0aD48cGF0aCBkPSJtNiA2IDEyIDEyIj48L3BhdGg+PC9zdmc+');
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.popup .popup-body .action-buttons-container {
    display: flex;
    align-items: center;
    justify-content: end;
    padding-top: 16px;
    flex-direction: row-reverse;
}

.popup .popup-body .action-buttons-container button {
    width: auto;
    margin: 0 5px;
}

.table-container-style-1 table {
    border-collapse: collapse;
    box-sizing: border-box;
    width: 100%;
}

.table-container-style-1 table tr td,
.table-container-style-1 table tr th {
    padding: 16px 12px;
    border-top: solid 1px var(--light-gray-blue);
    border-bottom: solid 1px var(--light-gray-blue);
    text-align: left;
}

.table-container-style-1 table tr:last-child td {
    border-bottom: none;
}

.table-container-style-2 {
    background-color: var(--white);
    border: solid 1px var(--light-gray-blue);
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    box-sizing: border-box;
}

.table-container-style-2 table {
    border-collapse: collapse;
    box-sizing: border-box;
    width: 100%;
}

.table-container-style-2 table thead {
    background-color: var(--near-white-gray);
}

.table-container-style-2 table tr td,
.table-container-style-2 table tr th {
    padding: 12px 24px;
    text-align: left;
    border-top: solid 1px var(--light-gray-blue);
    border-bottom: solid 1px var(--light-gray-blue);
}

.table-container-style-2 .table-container-header {
    box-sizing: border-box;
    padding: 16px 24px;
}

.table-container-style-2 .table-container-footer {
    padding: 16px 24px;
}

.table-container-style-2 .table-container-body .table-section-title td {
    background-color: var(--lightest-gray);
    padding: 5px 10px;
    font-style: italic;
}


.month-year-selector {
    display: inline;
}

.month-year-selector select {
    display: inline;
    width: auto;
    padding: 5px 10px;
}

.month-year-selector button.button-style-1 {
    display: inline;
    width: auto;
    padding: 5px 10px;
    margin: 0;
}


.notification {
    position: fixed;
    right: -450px;
    top: 0;
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    margin: 10px;
    max-width: 400px;
    width: calc(100vw - 40px);
    animation: notification-appears 5s ease-out;
}

.notification.success {
    background-color: #eaf2ea;
}

.notification.error {
    background-color: #fbeaea;
}

.notification-progress-bar {
    width: 100%;
    height: 3px;
    margin-top: 5px;
}

.notification-progress-bar .filling {
    height: 100%;
    width: 100%;
    animation: progress-bar-filling 5s linear;
}

.notification.success .notification-progress-bar .filling {
    background-color: #2d7c31;
}

.notification.error .notification-progress-bar .filling {
    background-color: #d22b2b;
}

.notification-content {
    display: flex;
}

@keyframes notification-appears {
    0% {
        right: -450px;
    }

    20% {
        right: 0px;
    }

    80% {
        right: 0px;
    }

    100% {
        right: -450px;
    }
}

@keyframes progress-bar-filling {
    0% {
        width: 0;
    }

    20% {
        width: 0;
    }

    80% {
        width: 100%;
    }

    100% {
        width: 100%;
    }
}

.notification .notification-text .notification-title {
    font-weight: bold;
}

.notification .notification-text {
    padding-left: 10px;
}

.notification.success .notification-icon {
    align-self: center;
    width: 25px;
    height: 25px;
    min-width: 25px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgdmVyc2lvbj0iMS4xIgogICB3aWR0aD0iNTEyIgogICBoZWlnaHQ9IjUxMiIKICAgeD0iMCIKICAgeT0iMCIKICAgdmlld0JveD0iMCAwIDUxMiA1MTIiCiAgIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTIiCiAgIHhtbDpzcGFjZT0icHJlc2VydmUiCiAgIGNsYXNzPSIiCiAgIGlkPSJzdmcxMzgiCiAgIHNvZGlwb2RpOmRvY25hbWU9Im5vdGlmaWNhdGlvbi1zdWNjZXNzLWljb24uc3ZnIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIxLjIuMiAoYjBhODQ4NjUsIDIwMjItMTItMDEpIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzCiAgICAgaWQ9ImRlZnMxNDIiIC8+PHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGlkPSJuYW1lZHZpZXcxNDAiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjMDAwMDAwIgogICAgIGJvcmRlcm9wYWNpdHk9IjAuMjUiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlY2hlY2tlcmJvYXJkPSIwIgogICAgIGlua3NjYXBlOmRlc2tjb2xvcj0iI2QxZDFkMSIKICAgICBzaG93Z3JpZD0iZmFsc2UiCiAgICAgaW5rc2NhcGU6em9vbT0iMC40NjA5Mzc1IgogICAgIGlua3NjYXBlOmN4PSIyNTQuOTE1MjUiCiAgICAgaW5rc2NhcGU6Y3k9IjI1NiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE0NDAiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iNzY2IgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyNSIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzEzOCIgLz48ZwogICAgIGlkPSJnMTM2IgogICAgIHN0eWxlPSJmaWxsOiMyZDdjMzE7ZmlsbC1vcGFjaXR5OjEiPjxwYXRoCiAgICAgICBkPSJNMjU2IDBDMTE0LjgzMyAwIDAgMTE0LjgzMyAwIDI1NnMxMTQuODMzIDI1NiAyNTYgMjU2IDI1Ni0xMTQuODUzIDI1Ni0yNTZTMzk3LjE2NyAwIDI1NiAwem0wIDQ3Mi4zNDFjLTExOS4yNzUgMC0yMTYuMzQxLTk3LjA0Ni0yMTYuMzQxLTIxNi4zNDFTMTM2LjcyNSAzOS42NTkgMjU2IDM5LjY1OWMxMTkuMjk1IDAgMjE2LjM0MSA5Ny4wNDYgMjE2LjM0MSAyMTYuMzQxUzM3NS4yNzUgNDcyLjM0MSAyNTYgNDcyLjM0MXoiCiAgICAgICBmaWxsPSIjMDAwMDAwIgogICAgICAgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIKICAgICAgIGNsYXNzPSIiCiAgICAgICBpZD0icGF0aDEzMiIKICAgICAgIHN0eWxlPSJmaWxsOiMyZDdjMzE7ZmlsbC1vcGFjaXR5OjEiIC8+PHBhdGgKICAgICAgIGQ9Ik0zNzMuNDUxIDE2Ni45NjVjLTguMDcxLTcuMzM3LTIwLjYyMy02Ljc2Mi0yNy45OTkgMS4zNDhMMjI0LjQ5MSAzMDEuNTA5IDE2Ni4wNTMgMjQyLjFjLTcuNzE0LTcuODEzLTIwLjI0Ni03LjkzMi0yOC4wMzktLjIzOC03LjgxMyA3LjY3NC03LjkzMiAyMC4yMjYtLjIzOCAyOC4wMzlsNzMuMTUxIDc0LjM2MWExOS44MDQgMTkuODA0IDAgMCAwIDE0LjEzOCA1LjkyOWMuMTE5IDAgLjI1OCAwIC4zNzcuMDJhMTkuODQyIDE5Ljg0MiAwIDAgMCAxNC4yOTctNi41MDRsMTM1LjA1OS0xNDguNzIyYzcuMzU4LTguMTMxIDYuNzYzLTIwLjY2My0xLjM0Ny0yOC4wMnoiCiAgICAgICBmaWxsPSIjMDAwMDAwIgogICAgICAgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIKICAgICAgIGNsYXNzPSIiCiAgICAgICBpZD0icGF0aDEzNCIKICAgICAgIHN0eWxlPSJmaWxsOiMyZDdjMzE7ZmlsbC1vcGFjaXR5OjEiIC8+PC9nPjwvc3ZnPgo=");
}

.notification.error .notification-icon {
    align-self: center;
    width: 25px;
    min-width: 25px;
    height: 25px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgdmVyc2lvbj0iMS4xIgogICB3aWR0aD0iNTEyIgogICBoZWlnaHQ9IjUxMiIKICAgeD0iMCIKICAgeT0iMCIKICAgdmlld0JveD0iMCAwIDUxMS45OTUgNTExLjk5NSIKICAgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMiIKICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIKICAgY2xhc3M9IiIKICAgaWQ9InN2ZzEzOCIKICAgc29kaXBvZGk6ZG9jbmFtZT0ibm90aWZpY2F0aW9uLWVycm9yLWljb24uc3ZnIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIxLjIuMiAoYjBhODQ4NjUsIDIwMjItMTItMDEpIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzCiAgICAgaWQ9ImRlZnMxNDIiIC8+PHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGlkPSJuYW1lZHZpZXcxNDAiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjMDAwMDAwIgogICAgIGJvcmRlcm9wYWNpdHk9IjAuMjUiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlY2hlY2tlcmJvYXJkPSIwIgogICAgIGlua3NjYXBlOmRlc2tjb2xvcj0iI2QxZDFkMSIKICAgICBzaG93Z3JpZD0iZmFsc2UiCiAgICAgaW5rc2NhcGU6em9vbT0iMC40NjA5Mzc1IgogICAgIGlua3NjYXBlOmN4PSIyNTQuOTE1MjUiCiAgICAgaW5rc2NhcGU6Y3k9IjI1NiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE0NDAiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iNzY2IgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyNSIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzEzOCIgLz48ZwogICAgIGlkPSJnMTM2IgogICAgIHN0eWxlPSJmaWxsOiNkMjJiMmI7ZmlsbC1vcGFjaXR5OjEiPjxwYXRoCiAgICAgICBkPSJNNDM3LjEyNiA3NC45MzljLTk5LjgyNi05OS44MjYtMjYyLjMwNy05OS44MjYtMzYyLjEzMyAwQzI2LjYzNyAxMjMuMzE0IDAgMTg3LjYxNyAwIDI1Ni4wMDVzMjYuNjM3IDEzMi42OTEgNzQuOTkzIDE4MS4wNDdjNDkuOTIzIDQ5LjkyMyAxMTUuNDk1IDc0Ljg3NCAxODEuMDY2IDc0Ljg3NHMxMzEuMTQ0LTI0Ljk1MSAxODEuMDY2LTc0Ljg3NGM5OS44MjYtOTkuODI2IDk5LjgyNi0yNjIuMjY4LjAwMS0zNjIuMTEzek00MDkuMDggNDA5LjAwNmMtODQuMzc1IDg0LjM3NS0yMjEuNjY3IDg0LjM3NS0zMDYuMDQyIDAtNDAuODU4LTQwLjg1OC02My4zNy05NS4yMDQtNjMuMzctMTUzLjAwMXMyMi41MTItMTEyLjE0MyA2My4zNy0xNTMuMDIxYzg0LjM3NS04NC4zNzUgMjIxLjY2Ny04NC4zNTUgMzA2LjA0MiAwIDg0LjM1NSA4NC4zNzUgODQuMzU1IDIyMS42NjcgMCAzMDYuMDIyeiIKICAgICAgIGZpbGw9IiMwMDAwMDAiCiAgICAgICBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIgogICAgICAgY2xhc3M9IiIKICAgICAgIGlkPSJwYXRoMTMyIgogICAgICAgc3R5bGU9ImZpbGw6I2QyMmIyYjtmaWxsLW9wYWNpdHk6MSIgLz48cGF0aAogICAgICAgZD0ibTM0MS41MjUgMzEwLjgyNy01Ni4xNTEtNTYuMDcxIDU2LjE1MS01Ni4wNzFjNy43MzUtNy43MzUgNy43MzUtMjAuMjkuMDItMjguMDQ2LTcuNzU1LTcuNzc1LTIwLjMxLTcuNzU1LTI4LjA2NS0uMDJsLTU2LjE5IDU2LjExMS01Ni4xOS01Ni4xMTFjLTcuNzU1LTcuNzM1LTIwLjMxLTcuNzU1LTI4LjA2NS4wMi03LjczNSA3Ljc1NS03LjczNSAyMC4zMS4wMiAyOC4wNDZsNTYuMTUxIDU2LjA3MS01Ni4xNTEgNTYuMDcxYy03Ljc1NSA3LjczNS03Ljc1NSAyMC4yOS0uMDIgMjguMDQ2IDMuODY4IDMuODg3IDguOTY1IDUuODExIDE0LjA0MyA1LjgxMXMxMC4xNTUtMS45NDQgMTQuMDIzLTUuNzkybDU2LjE5LTU2LjExMSA1Ni4xOSA1Ni4xMTFjMy44NjggMy44NjggOC45NDUgNS43OTIgMTQuMDIzIDUuNzkyYTE5LjgyOCAxOS44MjggMCAwIDAgMTQuMDQzLTUuODExYzcuNzMzLTcuNzU2IDcuNzMzLTIwLjMxMS0uMDIyLTI4LjA0NnoiCiAgICAgICBmaWxsPSIjMDAwMDAwIgogICAgICAgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIKICAgICAgIGNsYXNzPSIiCiAgICAgICBpZD0icGF0aDEzNCIKICAgICAgIHN0eWxlPSJmaWxsOiNkMjJiMmI7ZmlsbC1vcGFjaXR5OjEiIC8+PC9nPjwvc3ZnPgo=");
}

a.go-back-button::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1IDE4TDkgMTJMMTUgNiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==');
    background-size: contain;
    background-repeat: no-repeat;
}

a.go-back-button {
    display: inline-flex;
    align-items: center;
    background-color: #ffffff;
    border: solid 1px #e5e7eb;
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    padding: 4px 8px;
    text-decoration: none;
    cursor: pointer;
}

a.go-back-button:hover {
    background-color: #f9fafb;
}

.button-style-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border: solid 1px #e5e7eb;
    border-radius: 12px;
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    color: #374151;
    font-size: 20px;
    font-weight: 500;
    padding: 4px 8px;
    text-decoration: none;
    cursor: pointer;
    height: 100px;
    width: 300px;
}

.button-style-4 {
    text-decoration: none;
    align-items: center;
    appearance: button;
    background-color: var(--vivid-red);
    border: none;
    color: #ffffff;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
}

.button-style-4:hover {
    background-color: var(--deep-red);
}

.table-style-5 {
    border-collapse: collapse;
    width: 100%;
}

.table-style-5 tr td {
    border-top: solid 1px var(--light-gray-blue);
    padding: 16px 0;
}

.table-style-5 tr:first-child td {
    border-top: none;
}



.card {
    background-color: var(--white);
    border: solid 1px var(--light-gray-blue);
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    box-sizing: border-box;
}

.card .card-header {
    padding: 16px;
    border-bottom: solid 1px var(--light-gray-blue);
}

.card .card-body {
    padding: 16px;
}

.card .card-footer {
    padding: 16px;
    border-top: solid 1px var(--light-gray-blue);
}

input[readonly],
select[readonly] {
    background-color: var(--lightest-gray);
    /* Couleur de fond pour indiquer que le champ est inactif */
    color: var(--medium-gray);
    /* Couleur du texte grisé */
    pointer-events: none;
    /* Désactive les événements souris */
}

.btn-container {
    display: flex;
    align-items: center;
}

.btn-container .button-style-1 {
    width: auto;
    margin: 0;
}

.btn-container.reverse {
    flex-direction: row-reverse;
}

.btn-container.r-align {
    justify-content: end;
}

ul.list-style-1 {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul.list-style-1 li {
    padding: 16px 0;
    border-bottom: solid 1px #e5e7eb;
}

ul.list-style-1 li:last-child {
    border-bottom: none;
}


.alert-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    padding: 20px;
    box-sizing: border-box;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.alert {
    border-radius: 12px;
    background-color: #FFFFFF;
    border: solid 1px #E5E7EB;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 0px 0px;
    width: 670px;
    max-width: 670px;
}

.alert .alert-footer {
    background-color: #F9FAFB;
    padding: 12px 16px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    display: flex;
    justify-content: end;
    column-gap: 8px;
}

.alert .alert-body {
    padding: 40px;
}

.alert .alert-body .alert-title {
    box-sizing: border-box;
    color: #1E2939;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px 0;
    padding: 0;
}

.alert .alert-body .alert-message {
    box-sizing: border-box;
    color: #6A7282;
    font-size: 16px;
    font-weight: 400;
    margin: 0 0 8px 0;
    padding: 0;
}

@media (prefers-color-scheme: dark) {
    .alert .alert-body .alert-message {
        color: #737373;
    }

    .alert .alert-body .alert-title {
        color: #e5e5e5;
    }

    .alert {
        background-color: #262626;
        border: solid 1px #404040;
    }

    .alert .alert-footer {
        background-color: #404040;
    }
}