/*-----------------------*/
/*-----Common Things-----*/
/*-----------------------*/
body {
    margin: 0;
    padding: 0;
    background-color: #F1FAFF;
}

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

p {
    max-width: 700px;
}

.content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

a {
    text-decoration: none;
}

/*------------------------*/
/*-----Font Hierarchy-----*/
/*------------------------*/

/*--------Good One--------*/
.text-size_10 { font-size: 13.206rem !important; /* ≈ 211.30px */ } /* Correspondant à U_10 */
.text-size_9 { font-size: 10.202rem; /* ≈ 163.23px */ } /* Correspondant à U_9 */
.text-size_8 { font-size: 7.882rem; /* ≈ 126.11px */ } /* Correspondant à U_8 */
.text-size_7 { font-size: 6.089rem; /* ≈ 97.42px */ } /* Correspondant à U_7 */
.text-size_6 { font-size: 4.704rem; /* ≈ 75.26px */ } /* Correspondant à U_6 */
.text-size_5 { font-size: 3.634rem; /* ≈ 58.14px */ } /* Correspondant à U_5 */
.text-size_4 { font-size: 2.807rem; /* ≈ 44.91px */ } /* Correspondant à U_4 */
.text-size_3 { font-size: 2.169rem; /* ≈ 34.70px */ } /* Correspondant à U_3 */
.text-size_2 { font-size: 1.676rem; /* ≈ 26.82px */ } /* Correspondant à U_2 */
.text-size_1 { font-size: 1.294rem; /* ≈ 20.70px */ } /* Correspondant à U_1 */
.text-size_0 { font-size: 1rem; /* = 16px */ } /* Correspondant à U_0 */
.text-size_-1 { font-size: 0.773rem; /* ≈ 12.37px */ } /* Correspondant à U_-1 */
.text-size_-2 { font-size: 0.597rem; /* ≈ 9.55px */ } /* Correspondant à U_-2 */
.text-size_-3 { font-size: 0.461rem; /* ≈ 7.38px */ } /* Correspondant à U_-3 */
.text-size_-4 { font-size: 0.356rem; /* ≈ 5.70px */ } /* Correspondant à U_-4 */

@media (min-width: 1440px) {
    .text-size_10 { font-size: 13.206rem; } /* No change, this remains the largest */
    .text-size_9 { font-size: 13.206rem; } /* Takes the size of U_10 */
    .text-size_8 { font-size: 10.202rem; } /* Takes the size of U_9 */
    .text-size_7 { font-size: 7.882rem; } /* Takes the size of U_8 */
    .text-size_6 { font-size: 6.089rem; } /* Takes the size of U_7 */
    .text-size_5 { font-size: 4.704rem; } /* Takes the size of U_6 */
    .text-size_4 { font-size: 3.634rem; } /* Takes the size of U_5 */
    .text-size_3 { font-size: 2.807rem; } /* Takes the size of U_4 */
    .text-size_2 { font-size: 2.169rem; } /* Takes the size of U_3 */
    .text-size_1 { font-size: 1.676rem; } /* Takes the size of U_2 */
    .text-size_0 { font-size: 1.294rem; } /* Takes the size of U_1 */
    /* Sizes below U_0 remain unchanged */
    .text-size_-1 { font-size: 1rem; }
    .text-size_-2 { font-size: 0.773rem; }
    .text-size_-3 { font-size: 0.597rem; }
    .text-size_-4 { font-size: 0.461rem; }
}

/*-----What font?-----*/
.alpino {font-family: 'Alpino-regular';}
.alpino-bold {font-family: 'Alpino-Bold';}
.alpino-black {font-family: 'Alpino-Black';}
.alpino-thin {font-family: 'Alpino-Thin';}
.alpino-light {font-family: 'Alpino-Light';}
.alpino-medium {font-family: 'Alpino-Medium';}
.eskool {font-family: 'Eskool';}


/*-----Text Colors-----*/
/* Blue (Primary) */
.text-color-blue-hover { color: var(--blue-400, rgba(51, 144, 225, 1)); } /* Hover */
.text-color-blue-active { color: var(--blue-600, rgba(0, 106, 197, 1)); } /* Active */
.text-color-blue-focus { color: var(--blue-500, rgba(0, 116, 217, 1)); } /* Focus */
.text-color-blue-deskiz { color: var(--blue-500, rgba(0, 116, 217, 1)); } /* Deskiz */

/* Red (Secondary) */
.text-color-red-hover { color: var(--red-400, rgba(255, 103, 94, 1)); } /* Hover */
.text-color-red-active { color: var(--red-600, rgba(232, 59, 49, 1)); } /* Active */
.text-color-red-focus { color: var(--red-500, rgba(255, 65, 54, 1)); } /* Focus */
.text-color-red-deskiz { color: var(--red-500, rgba(255, 65, 54, 1)); } /* Deskiz */

/* Yellow (CTA - Emphasis) */
.text-color-yellow-hover { color: var(--yellow-400, rgba(255, 229, 67, 1)); } /* Hover */
.text-color-yellow-active { color: var(--yellow-600, rgba(232, 203, 18, 1)); } /* Active */
.text-color-yellow-focus { color: var(--yellow-500, rgba(255, 223, 2, 1)); } /* Focus */
.text-color-yellow-deskiz { color: var(--yellow-500, rgba(255, 223, 2, 1)); } /* Deskiz */

/* Navy */
.text-color-navy-hover { color: var(--navy-400, rgba(60, 75, 104, 1)); } /* Hover */
.text-color-navy-active { color: var(--navy-600, rgba(0, 27, 62, 1)); } /* Active */
.text-color-navy-focus { color: var(--navy-500, rgba(11, 18, 68, 1)); } /* Focus */
.text-color-navy-deskiz { color: var(--navy-500, rgba(11, 18, 68, 1)); } /* Deskiz */

/* Black */
.text-color-black-hover { color: var(--black-400, rgba(70, 72, 76, 1)); } /* Hover */
.text-color-black-active { color: var(--black-600, rgba(22, 24, 28, 1)); } /* Active */
.text-color-black-focus { color: var(--black-500, rgba(24, 26, 31, 1)); } /* Focus */
.text-color-black-deskiz { color: var(--black-500, rgba(24, 26, 31, 1)); } /* Deskiz */

/* Additional Shades for Various States */

/* Blue (Primary) */
.text-color-blue-200-hover { color: var(--blue-200, rgba(138, 191, 238, 1)); } /* Hover */
.text-color-blue-300-active { color: var(--blue-300, rgba(84, 162, 230, 1)); } /* Active */
.text-color-blue-600-focus { color: var(--blue-600, rgba(0, 106, 197, 1)); } /* Focus */

/* Red (Secondary) */
.text-color-red-200-hover { color: var(--red-200, rgba(255, 168, 163, 1)); } /* Hover */
.text-color-red-300-active { color: var(--red-300, rgba(255, 128, 120, 1)); } /* Active */
.text-color-red-600-focus { color: var(--red-600, rgba(232, 59, 49, 1)); } /* Focus */

/* Yellow (CTA - Emphasis) */
.text-color-yellow-200-hover { color: var(--yellow-200, rgba(255, 240, 147, 1)); } /* Hover */
.text-color-yellow-300-active { color: var(--yellow-300, rgba(255, 234, 98, 1)); } /* Active */
.text-color-yellow-600-focus { color: var(--yellow-600, rgba(232, 203, 18, 1)); } /* Focus */

/* Navy */
.text-color-navy-200-hover { color: var(--navy-200, rgba(159, 168, 185, 1)); } /* Hover */
.text-color-navy-300-active { color: var(--navy-300, rgba(92, 104, 130, 1)); } /* Active */
.text-color-navy-600-focus { color: var(--navy-600, rgba(0, 27, 62, 1)); } /* Focus */

/* Black */
.text-color-black-200-hover { color: var(--black-200, rgba(149, 150, 152, 1)); } /* Hover */
.text-color-black-300-active { color: var(--black-300, rgba(100, 102, 105, 1)); } /* Active */
.text-color-black-600-focus { color: var(--black-600, rgba(22, 24, 28, 1)); } /* Focus */

/* Blue (Primary) */
.text-color-blue-50 { color: var(--blue-50, rgba(230, 241, 255, 1)); }
.text-color-blue-100 { color: var(--blue-100, rgba(176, 212, 243, 1)); }
.text-color-blue-200 { color: var(--blue-200, rgba(138, 191, 238, 1)); }
.text-color-blue-300 { color: var(--blue-300, rgba(84, 162, 230, 1)); }
.text-color-blue-400 { color: var(--blue-400, rgba(51, 144, 225, 1)); }
.text-color-blue-500 { color: var(--blue-500, rgba(0, 116, 217, 1)); }
.text-color-blue-600 { color: var(--blue-600, rgba(0, 106, 197, 1)); }
.text-color-blue-700 { color: var(--blue-700, rgba(0, 82, 154, 1)); }
.text-color-blue-800 { color: var(--blue-800, rgba(0, 64, 119, 1)); }
.text-color-blue-900 { color: var(--blue-900, rgba(0, 49, 91, 1)); }

/* Red (Secondary) */
.text-color-red-50 { color: var(--red-50, rgba(255, 236, 235, 1)); }
.text-color-red-100 { color: var(--red-100, rgba(255, 196, 193, 1)); }
.text-color-red-200 { color: var(--red-200, rgba(255, 168, 163, 1)); }
.text-color-red-300 { color: var(--red-300, rgba(255, 128, 120, 1)); }
.text-color-red-400 { color: var(--red-400, rgba(255, 103, 94, 1)); }
.text-color-red-500 { color: var(--red-500, rgba(255, 65, 54, 1)); }
.text-color-red-600 { color: var(--red-600, rgba(232, 59, 49, 1)); }
.text-color-red-700 { color: var(--red-700, rgba(181, 46, 38, 1)); }
.text-color-red-800 { color: var(--red-800, rgba(140, 36, 30, 1)); }
.text-color-red-900 { color: var(--red-900, rgba(107, 27, 23, 1)); }

/* Yellow (CTA - Emphasis) */
.text-color-yellow-50 { color: var(--yellow-50, rgba(255, 252, 232, 1)); }
.text-color-yellow-100 { color: var(--yellow-100, rgba(255, 245, 182, 1)); }
.text-color-yellow-200 { color: var(--yellow-200, rgba(255, 240, 147, 1)); }
.text-color-yellow-300 { color: var(--yellow-300, rgba(255, 234, 98, 1)); }
.text-color-yellow-400 { color: var(--yellow-400, rgba(255, 229, 67, 1)); }
.text-color-yellow-500 { color: var(--yellow-500, rgba(255, 223, 2, 1)); }
.text-color-yellow-600 { color: var(--yellow-600, rgba(232, 203, 18, 1)); }
.text-color-yellow-700 { color: var(--yellow-700, rgba(181, 153, 14, 1)); }
.text-color-yellow-800 { color: var(--yellow-800, rgba(140, 123, 11, 1)); }
.text-color-yellow-900 { color: var(--yellow-900, rgba(107, 94, 8, 1)); }

/* Navy */
.text-color-navy-50 { color: var(--navy-50, rgba(231, 236, 240, 1)); }
.text-color-navy-100 { color: var(--navy-100, rgba(187, 195, 208, 1)); }
.text-color-navy-200 { color: var(--navy-200, rgba(159, 168, 185, 1)); }
.text-color-navy-300 { color: var(--navy-300, rgba(92, 104, 130, 1)); }
.text-color-navy-400 { color: var(--navy-400, rgba(60, 75, 104, 1)); }
.text-color-navy-500 { color: var(--navy-500, rgba(11, 18, 68, 1)); }
.text-color-navy-600 { color: var(--navy-600, rgba(0, 27, 62, 1)); }
.text-color-navy-700 { color: var(--navy-700, rgba(8, 21, 48, 1)); }
.text-color-navy-800 { color: var(--navy-800, rgba(6, 17, 37, 1)); }
.text-color-navy-900 { color: var(--navy-900, rgba(5, 14, 30, 1)); }

/* Black */
.text-color-black-50 { color: var(--black-50, rgba(232, 232, 233, 1)); }
.text-color-black-100 { color: var(--black-100, rgba(187, 186, 197, 1)); }
.text-color-black-200 { color: var(--black-200, rgba(149, 150, 152, 1)); }
.text-color-black-300 { color: var(--black-300, rgba(100, 102, 105, 1)); }
.text-color-black-400 { color: var(--black-400, rgba(70, 72, 76, 1)); }
.text-color-black-500 { color: var(--black-500, rgba(24, 26, 31, 1)); }
.text-color-black-600 { color: var(--black-600, rgba(22, 24, 28, 1)); }
.text-color-black-700 { color: var(--black-700, rgba(17, 18, 22, 1)); }
.text-color-black-800 { color: var(--black-800, rgba(13, 14, 17, 1)); }
.text-color-black-900 { color: var(--black-900, rgba(10, 11, 13, 1)); }

/*-----Background Colors-----*/
/* Blue (Primary) */
.bg-color-blue-hover { background-color: var(--blue-400, rgba(51, 144, 225, 1)); } /* Hover */
.bg-color-blue-active { background-color: var(--blue-600, rgba(0, 106, 197, 1)); } /* Active */
.bg-color-blue-focus { background-color: var(--blue-500, rgba(0, 116, 217, 1)); } /* Focus */
.bg-color-blue-deskiz { background-color: var(--blue-500, rgba(0, 116, 217, 1)); } /* Deskiz */

/* Red (Secondary) */
.bg-color-red-hover { background-color: var(--red-400, rgba(255, 103, 94, 1)); } /* Hover */
.bg-color-red-active { background-color: var(--red-600, rgba(232, 59, 49, 1)); } /* Active */
.bg-color-red-focus { background-color: var(--red-500, rgba(255, 65, 54, 1)); } /* Focus */
.bg-color-red-deskiz { background-color: var(--red-500, rgba(255, 65, 54, 1)); } /* Deskiz */

/* Yellow (CTA - Emphasis) */
.bg-color-yellow-hover { background-color: var(--yellow-400, rgba(255, 229, 67, 1)); } /* Hover */
.bg-color-yellow-active { background-color: var(--yellow-600, rgba(232, 203, 18, 1)); } /* Active */
.bg-color-yellow-focus { background-color: var(--yellow-500, rgba(255, 223, 2, 1)); } /* Focus */
.bg-color-yellow-deskiz { background-color: var(--yellow-500, rgba(255, 223, 2, 1)); } /* Deskiz */

/* Navy */
.bg-color-navy-hover { background-color: var(--navy-400, rgba(60, 75, 104, 1)); } /* Hover */
.bg-color-navy-active { background-color: var(--navy-600, rgba(0, 27, 62, 1)); } /* Active */
.bg-color-navy-focus { background-color: var(--navy-500, rgba(11, 18, 68, 1)); } /* Focus */
.bg-color-navy-deskiz { background-color: var(--navy-500, rgba(11, 18, 68, 1)); } /* Deskiz */

/* Black */
.bg-color-black-hover { background-color: var(--black-400, rgba(70, 72, 76, 1)); } /* Hover */
.bg-color-black-active { background-color: var(--black-600, rgba(22, 24, 28, 1)); } /* Active */
.bg-color-black-focus { background-color: var(--black-500, rgba(24, 26, 31, 1)); } /* Focus */
.bg-color-black-deskiz { background-color: var(--black-500, rgba(24, 26, 31, 1)); } /* Deskiz */

/* Additional Shades for Various States */

/* Blue (Primary) */
.bg-color-blue-200-hover { background-color: var(--blue-200, rgba(138, 191, 238, 1)); } /* Hover */
.bg-color-blue-300-active { background-color: var(--blue-300, rgba(84, 162, 230, 1)); } /* Active */
.bg-color-blue-600-focus { background-color: var(--blue-600, rgba(0, 106, 197, 1)); } /* Focus */

/* Red (Secondary) */
.bg-color-red-200-hover { background-color: var(--red-200, rgba(255, 168, 163, 1)); } /* Hover */
.bg-color-red-300-active { background-color: var(--red-300, rgba(255, 128, 120, 1)); } /* Active */
.bg-color-red-600-focus { background-color: var(--red-600, rgba(232, 59, 49, 1)); } /* Focus */

/* Yellow (CTA - Emphasis) */
.bg-color-yellow-200-hover { background-color: var(--yellow-200, rgba(255, 240, 147, 1)); } /* Hover */
.bg-color-yellow-300-active { background-color: var(--yellow-300, rgba(255, 234, 98, 1)); } /* Active */
.bg-color-yellow-600-focus { background-color: var(--yellow-600, rgba(232, 203, 18, 1)); } /* Focus */

/* Navy */
.bg-color-navy-200-hover { background-color: var(--navy-200, rgba(159, 168, 185, 1)); } /* Hover */
.bg-color-navy-300-active { background-color: var(--navy-300, rgba(92, 104, 130, 1)); } /* Active */
.bg-color-navy-600-focus { background-color: var(--navy-600, rgba(0, 27, 62, 1)); } /* Focus */

/* Black */
.bg-color-black-200-hover { background-color: var(--black-200, rgba(149, 150, 152, 1)); } /* Hover */
.bg-color-black-300-active { background-color: var(--black-300, rgba(100, 102, 105, 1)); } /* Active */
.bg-color-black-600-focus { background-color: var(--black-600, rgba(22, 24, 28, 1)); } /* Focus */

/* Full Range of Colors */

/* Blue (Primary) */
.bg-color-blue-50 { background-color: var(--blue-50, rgba(230, 241, 255, 1)); }
.bg-color-blue-100 { background-color: var(--blue-100, rgba(176, 212, 243, 1)); }
.bg-color-blue-200 { background-color: var(--blue-200, rgba(138, 191, 238, 1)); }
.bg-color-blue-300 { background-color: var(--blue-300, rgba(84, 162, 230, 1)); }
.bg-color-blue-400 { background-color: var(--blue-400, rgba(51, 144, 225, 1)); }
.bg-color-blue-500 { background-color: var(--blue-500, rgba(0, 116, 217, 1)); }
.bg-color-blue-600 { background-color: var(--blue-600, rgba(0, 106, 197, 1)); }
.bg-color-blue-700 { background-color: var(--blue-700, rgba(0, 82, 154, 1)); }
.bg-color-blue-800 { background-color: var(--blue-800, rgba(0, 64, 119, 1)); }
.bg-color-blue-900 { background-color: var(--blue-900, rgba(0, 49, 91, 1)); }

/* Red (Secondary) */
.bg-color-red-50 { background-color: var(--red-50, rgba(255, 236, 235, 1)); }
.bg-color-red-100 { background-color: var(--red-100, rgba(255, 196, 193, 1)); }
.bg-color-red-200 { background-color: var(--red-200, rgba(255, 168, 163, 1)); }
.bg-color-red-300 { background-color: var(--red-300, rgba(255, 128, 120, 1)); }
.bg-color-red-400 { background-color: var(--red-400, rgba(255, 103, 94, 1)); }
.bg-color-red-500 { background-color: var(--red-500, rgba(255, 65, 54, 1)); }
.bg-color-red-600 { background-color: var(--red-600, rgba(232, 59, 49, 1)); }
.bg-color-red-700 { background-color: var(--red-700, rgba(181, 46, 38, 1)); }
.bg-color-red-800 { background-color: var(--red-800, rgba(140, 36, 30, 1)); }
.bg-color-red-900 { background-color: var(--red-900, rgba(107, 27, 23, 1)); }

/* Yellow (CTA - Emphasis) */
.bg-color-yellow-50 { background-color: var(--yellow-50, rgba(255, 252, 232, 1)); }
.bg-color-yellow-100 { background-color: var(--yellow-100, rgba(255, 245, 182, 1)); }
.bg-color-yellow-200 { background-color: var(--yellow-200, rgba(255, 240, 147, 1)); }
.bg-color-yellow-300 { background-color: var(--yellow-300, rgba(255, 234, 98, 1)); }
.bg-color-yellow-400 { background-color: var(--yellow-400, rgba(255, 229, 67, 1)); }
.bg-color-yellow-500 { background-color: var(--yellow-500, rgba(255, 223, 2, 1)); }
.bg-color-yellow-600 { background-color: var(--yellow-600, rgba(232, 203, 18, 1)); }
.bg-color-yellow-700 { background-color: var(--yellow-700, rgba(181, 153, 14, 1)); }
.bg-color-yellow-800 { background-color: var(--yellow-800, rgba(140, 123, 11, 1)); }
.bg-color-yellow-900 { background-color: var(--yellow-900, rgba(107, 94, 8, 1)); }

/* Navy */
.bg-color-navy-50 { background-color: var(--navy-50, rgba(231, 236, 240, 1)); }
.bg-color-navy-100 { background-color: var(--navy-100, rgba(187, 195, 208, 1)); }
.bg-color-navy-200 { background-color: var(--navy-200, rgba(159, 168, 185, 1)); }
.bg-color-navy-300 { background-color: var(--navy-300, rgba(92, 104, 130, 1)); }
.bg-color-navy-400 { background-color: var(--navy-400, rgba(60, 75, 104, 1)); }
.bg-color-navy-500 { background-color: var(--navy-500, rgba(11, 18, 68, 1)); }
.bg-color-navy-600 { background-color: var(--navy-600, rgba(0, 27, 62, 1)); }
.bg-color-navy-700 { background-color: var(--navy-700, rgba(8, 21, 48, 1)); }
.bg-color-navy-800 { background-color: var(--navy-800, rgba(6, 17, 37, 1)); }
.bg-color-navy-900 { background-color: var(--navy-900, rgba(5, 14, 30, 1)); }

/* Black */
.bg-color-black-50 { background-color: var(--black-50, rgba(232, 232, 233, 1)); }
.bg-color-black-100 { background-color: var(--black-100, rgba(187, 186, 197, 1)); }
.bg-color-black-200 { background-color: var(--black-200, rgba(149, 150, 152, 1)); }
.bg-color-black-300 { background-color: var(--black-300, rgba(100, 102, 105, 1)); }
.bg-color-black-400 { background-color: var(--black-400, rgba(70, 72, 76, 1)); }
.bg-color-black-500 { background-color: var(--black-500, rgba(24, 26, 31, 1)); }
.bg-color-black-600 { background-color: var(--black-600, rgba(22, 24, 28, 1)); }
.bg-color-black-700 { background-color: var(--black-700, rgba(17, 18, 22, 1)); }
.bg-color-black-800 { background-color: var(--black-800, rgba(13, 14, 17, 1)); }
.bg-color-black-900 { background-color: var(--black-900, rgba(10, 11, 13, 1)); }


/*-----Border Colors-----*/
/* Blue (Primary) */
.border-color-blue-hover { border: 1px solid var(--blue-400, rgba(51, 144, 225, 1)); } /* Hover */
.border-color-blue-active { border: 1px solid var(--blue-600, rgba(0, 106, 197, 1)); } /* Active */
.border-color-blue-focus { border: 1px solid var(--blue-500, rgba(0, 116, 217, 1)); } /* Focus */
.border-color-blue-deskiz { border: 1px solid var(--blue-500, rgba(0, 116, 217, 1)); } /* Deskiz */

/* Red (Secondary) */
.border-color-red-hover { border: 1px solid var(--red-400, rgba(255, 103, 94, 1)); } /* Hover */
.border-color-red-active { border: 1px solid var(--red-600, rgba(232, 59, 49, 1)); } /* Active */
.border-color-red-focus { border: 1px solid var(--red-500, rgba(255, 65, 54, 1)); } /* Focus */
.border-color-red-deskiz { border: 1px solid var(--red-500, rgba(255, 65, 54, 1)); } /* Deskiz */

/* Yellow (CTA - Emphasis) */
.border-color-yellow-hover { border: 1px solid var(--yellow-400, rgba(255, 229, 67, 1)); } /* Hover */
.border-color-yellow-active { border: 1px solid var(--yellow-600, rgba(232, 203, 18, 1)); } /* Active */
.border-color-yellow-focus { border: 1px solid var(--yellow-500, rgba(255, 223, 2, 1)); } /* Focus */
.border-color-yellow-deskiz { border: 1px solid var(--yellow-500, rgba(255, 223, 2, 1)); } /* Deskiz */

/* Navy */
.border-color-navy-hover { border: 1px solid var(--navy-400, rgba(60, 75, 104, 1)); } /* Hover */
.border-color-navy-active { border: 1px solid var(--navy-600, rgba(0, 27, 62, 1)); } /* Active */
.border-color-navy-focus { border: 1px solid var(--navy-500, rgba(11, 18, 68, 1)); } /* Focus */
.border-color-navy-deskiz { border: 1px solid var(--navy-500, rgba(11, 18, 68, 1)); } /* Deskiz */

/* Black */
.border-color-black-hover { border: 1px solid var(--black-400, rgba(70, 72, 76, 1)); } /* Hover */
.border-color-black-active { border: 1px solid var(--black-600, rgba(22, 24, 28, 1)); } /* Active */
.border-color-black-focus { border: 1px solid var(--black-500, rgba(24, 26, 31, 1)); } /* Focus */
.border-color-black-deskiz { border: 1px solid var(--black-500, rgba(24, 26, 31, 1)); } /* Deskiz */

/* Additional Shades for Various States */

/* Blue (Primary) */
.border-color-blue-200-hover { border: 1px solid var(--blue-200, rgba(138, 191, 238, 1)); } /* Hover */
.border-color-blue-300-active { border: 1px solid var(--blue-300, rgba(84, 162, 230, 1)); } /* Active */
.border-color-blue-600-focus { border: 1px solid var(--blue-600, rgba(0, 106, 197, 1)); } /* Focus */

/* Red (Secondary) */
.border-color-red-200-hover { border: 1px solid var(--red-200, rgba(255, 168, 163, 1)); } /* Hover */
.border-color-red-300-active { border: 1px solid var(--red-300, rgba(255, 128, 120, 1)); } /* Active */
.border-color-red-600-focus { border: 1px solid var(--red-600, rgba(232, 59, 49, 1)); } /* Focus */

/* Yellow (CTA - Emphasis) */
.border-color-yellow-200-hover { border: 1px solid var(--yellow-200, rgba(255, 240, 147, 1)); } /* Hover */
.border-color-yellow-300-active { border: 1px solid var(--yellow-300, rgba(255, 234, 98, 1)); } /* Active */
.border-color-yellow-600-focus { border: 1px solid var(--yellow-600, rgba(232, 203, 18, 1)); } /* Focus */

/* Navy */
.border-color-navy-200-hover { border: 1px solid var(--navy-200, rgba(159, 168, 185, 1)); } /* Hover */
.border-color-navy-300-active { border: 1px solid var(--navy-300, rgba(92, 104, 130, 1)); } /* Active */
.border-color-navy-600-focus { border: 1px solid var(--navy-600, rgba(0, 27, 62, 1)); } /* Focus */

/* Black */
.border-color-black-200-hover { border: 1px solid var(--black-200, rgba(149, 150, 152, 1)); } /* Hover */
.border-color-black-300-active { border: 1px solid var(--black-300, rgba(100, 102, 105, 1)); } /* Active */
.border-color-black-600-focus { border: 1px solid var(--black-600, rgba(22, 24, 28, 1)); } /* Focus */

/* Blue (Primary) */
.border-color-blue-50 { border: 1px solid var(--blue-50, rgba(230, 241, 255, 1)); }
.border-color-blue-100 { border: 1px solid var(--blue-100, rgba(176, 212, 243, 1)); }
.border-color-blue-200 { border: 1px solid var(--blue-200, rgba(138, 191, 238, 1)); }
.border-color-blue-300 { border: 1px solid var(--blue-300, rgba(84, 162, 230, 1)); }
.border-color-blue-400 { border: 1px solid var(--blue-400, rgba(51, 144, 225, 1)); }
.border-color-blue-500 { border: 1px solid var(--blue-500, rgba(0, 116, 217, 1)); }
.border-color-blue-600 { border: 1px solid var(--blue-600, rgba(0, 106, 197, 1)); }
.border-color-blue-700 { border: 1px solid var(--blue-700, rgba(0, 82, 154, 1)); }
.border-color-blue-800 { border: 1px solid var(--blue-800, rgba(0, 64, 119, 1)); }
.border-color-blue-900 { border: 1px solid var(--blue-900, rgba(0, 49, 91, 1)); }

/* Red (Secondary) */
.border-color-red-50 { border: 1px solid var(--red-50, rgba(255, 236, 235, 1)); }
.border-color-red-100 { border: 1px solid var(--red-100, rgba(255, 196, 193, 1)); }
.border-color-red-200 { border: 1px solid var(--red-200, rgba(255, 168, 163, 1)); }
.border-color-red-300 { border: 1px solid var(--red-300, rgba(255, 128, 120, 1)); }
.border-color-red-400 { border: 1px solid var(--red-400, rgba(255, 103, 94, 1)); }
.border-color-red-500 { border: 1px solid var(--red-500, rgba(255, 65, 54, 1)); }
.border-color-red-600 { border: 1px solid var(--red-600, rgba(232, 59, 49, 1)); }
.border-color-red-700 { border: 1px solid var(--red-700, rgba(181, 46, 38, 1)); }
.border-color-red-800 { border: 1px solid var(--red-800, rgba(140, 36, 30, 1)); }
.border-color-red-900 { border: 1px solid var(--red-900, rgba(107, 27, 23, 1)); }

/* Yellow (CTA - Emphasis) */
.border-color-yellow-50 { border: 1px solid var(--yellow-50, rgba(255, 252, 232, 1)); }
.border-color-yellow-100 { border: 1px solid var(--yellow-100, rgba(255, 245, 182, 1)); }
.border-color-yellow-200 { border: 1px solid var(--yellow-200, rgba(255, 240, 147, 1)); }
.border-color-yellow-300 { border: 1px solid var(--yellow-300, rgba(255, 234, 98, 1)); }
.border-color-yellow-400 { border: 1px solid var(--yellow-400, rgba(255, 229, 67, 1)); }
.border-color-yellow-500 { border: 1px solid var(--yellow-500, rgba(255, 223, 2, 1)); }
.border-color-yellow-600 { border: 1px solid var(--yellow-600, rgba(232, 203, 18, 1)); }
.border-color-yellow-700 { border: 1px solid var(--yellow-700, rgba(181, 153, 14, 1)); }
.border-color-yellow-800 { border: 1px solid var(--yellow-800, rgba(140, 123, 11, 1)); }
.border-color-yellow-900 { border: 1px solid var(--yellow-900, rgba(107, 94, 8, 1)); }

/* Navy */
.border-color-navy-50 { border: 1px solid var(--navy-50, rgba(231, 236, 240, 1)); }
.border-color-navy-100 { border: 1px solid var(--navy-100, rgba(187, 195, 208, 1)); }
.border-color-navy-200 { border: 1px solid var(--navy-200, rgba(159, 168, 185, 1)); }
.border-color-navy-300 { border: 1px solid var(--navy-300, rgba(92, 104, 130, 1)); }
.border-color-navy-400 { border: 1px solid var(--navy-400, rgba(60, 75, 104, 1)); }
.border-color-navy-500 { border: 1px solid var(--navy-500, rgba(11, 18, 68, 1)); }
.border-color-navy-600 { border: 1px solid var(--navy-600, rgba(0, 27, 62, 1)); }
.border-color-navy-700 { border: 1px solid var(--navy-700, rgba(8, 21, 48, 1)); }
.border-color-navy-800 { border: 1px solid var(--navy-800, rgba(6, 17, 37, 1)); }
.border-color-navy-900 { border: 1px solid var(--navy-900, rgba(5, 14, 30, 1)); }

/* Black */
.border-color-black-50 { border: 1px solid var(--black-50, rgba(232, 232, 233, 1)); }
.border-color-black-100 { border: 1px solid var(--black-100, rgba(187, 186, 197, 1)); }
.border-color-black-200 { border: 1px solid var(--black-200, rgba(149, 150, 152, 1)); }
.border-color-black-300 { border: 1px solid var(--black-300, rgba(100, 102, 105, 1)); }
.border-color-black-400 { border: 1px solid var(--black-400, rgba(70, 72, 76, 1)); }
.border-color-black-500 { border: 1px solid var(--black-500, rgba(24, 26, 31, 1)); }
.border-color-black-600 { border: 1px solid var(--black-600, rgba(22, 24, 28, 1)); }
.border-color-black-700 { border: 1px solid var(--black-700, rgba(17, 18, 22, 1)); }
.border-color-black-800 { border: 1px solid var(--black-800, rgba(13, 14, 17, 1)); }
.border-color-black-900 { border: 1px solid var(--black-900, rgba(10, 11, 13, 1)); }





/*------------------------*/
/*------------------------*/
/*------------------------*/
/*------------------------*/
/*------------------------*/
/*------------------------*/
/*------------------------*/
/*-------OLD ELEMENTS-----*/
/*------------------------*/
/*------------------------*/
/*------------------------*/
/*------------------------*/
/*------------------------*/
/*------------------------*/
/*------------------------*/

.text-size_10 { font-size: 13.206rem; /* ≈ 211.30px */ } /* Correspondant à U_10 */
.text-size_9 { font-size: 10.202rem; /* ≈ 163.23px */ } /* Correspondant à U_9 */
.text-size_8 { font-size: 7.882rem; /* ≈ 126.11px */ } /* Correspondant à U_8 */
.text-size_7 { font-size: 6.089rem; /* ≈ 97.42px */ } /* Correspondant à U_7 */
.text-size_6 { font-size: 4.704rem; /* ≈ 75.26px */ } /* Correspondant à U_6 */
.text-size_5 { font-size: 3.634rem; /* ≈ 58.14px */ } /* Correspondant à U_5 */
.text-size_4 { font-size: 2.807rem; /* ≈ 44.91px */ } /* Correspondant à U_4 */
.text-size_3 { font-size: 2.169rem; /* ≈ 34.70px */ } /* Correspondant à U_3 */
.text-size_2 { font-size: 1.676rem; /* ≈ 26.82px */ } /* Correspondant à U_2 */
.text-size_1 { font-size: 1.294rem; /* ≈ 20.70px */ } /* Correspondant à U_1 */
.text-size_0 { font-size: 1rem; /* = 16px */ } /* Correspondant à U_0 */
.text-size_-1 { font-size: 0.773rem; /* ≈ 12.37px */ } /* Correspondant à U_-1 */
.text-size_-2 { font-size: 0.597rem; /* ≈ 9.55px */ } /* Correspondant à U_-2 */
.text-size_-3 { font-size: 0.461rem; /* ≈ 7.38px */ } /* Correspondant à U_-3 */
.text-size_-4 { font-size: 0.356rem; /* ≈ 5.70px */ } /* Correspondant à U_-4 */

/*--------------------------*/
/*-----Background-Color-----*/
/*--------------------------*/
.bg-white { background-color: var(--main-colorsblanc-deskiz, rgba(255, 255, 255, 1)); }
.bg-dark-blue { background-color: var(--main-colorsbleu-fonc-deskiz, rgba(4, 46, 76, 1)); }
.bg-yellow { background-color: var(--main-colorsjaune-deskiz, rgba(255, 201, 1, 1)); }
.bg-red { background-color: var(--main-colorsrouge-deskiz, rgba(255, 71, 76, 1)); }
.bg-blue { background-color: var(--main-colorsbleu-deskiz, rgba(2, 216, 233, 1)); }
.bg-green { background-color: var(--main-colorsgreen-deskiz, rgba(12, 220, 115, 1)); }
.bg-black { background-color: var(--Main-Colors-Black-Deskiz, rgba(24, 26, 31, 1)); }
.bg-white-blue { background-color: var(--Main-Colors-Bleu-Blanc-Deskiz, rgba(241, 250, 255, 1)); }

.bg-dark-blue-light { background-color: var(--foundation---dark--blue---light, rgba(230, 234, 237, 1)); }
.bg-dark-blue-light-hover { background-color: var(--foundation---dark--blue---light-hover, rgba(217, 224, 228, 1)); }
.bg-dark-blue-light-active { background-color: var(--foundation---dark--blue---light-active, rgba(177, 190, 200, 1)); }
.bg-dark-blue-normal { background-color: var(--foundation---dark--blue---normal, rgba(4, 46, 76, 1)); }
.bg-dark-blue-normal-hover { background-color: var(--foundation---dark--blue---normal-hover, rgba(4, 41, 68, 1)); }
.bg-dark-blue-normal-active { background-color: var(--foundation---dark--blue---normal-active, rgba(3, 37, 61, 1)); }
.bg-dark-blue-dark { background-color: var(--foundation---dark--blue---dark, rgba(3, 35, 57, 1)); }
.bg-dark-blue-dark-hover { background-color: var(--foundation---dark--blue---dark-hover, rgba(2, 28, 46, 1)); }
.bg-dark-blue-dark-active { background-color: var(--foundation---dark--blue---dark-active, rgba(2, 21, 34, 1)); }
.bg-dark-blue-darker { background-color: var(--foundation---dark--blue---darker, rgba(1, 16, 27, 1)); }

.bg-blue-light { background-color: var(--foundation----blue---light, rgba(230, 251, 253, 1)); }
.bg-blue-light-hover { background-color: var(--foundation----blue---light-hover, rgba(217, 249, 252, 1)); }
.bg-blue-light-active { background-color: var(--foundation----blue---light-active, rgba(177, 243, 248, 1)); }
.bg-blue-normal { background-color: var(--foundation----blue---normal, rgba(2, 216, 233, 1)); }
.bg-blue-normal-hover { background-color: var(--foundation----blue---normal-hover, rgba(2, 194, 210, 1)); }
.bg-blue-normal-active { background-color: var(--foundation----blue---normal-active, rgba(2, 173, 186, 1)); }
.bg-blue-dark { background-color: var(--foundation----blue---dark, rgba(2, 162, 175, 1)); }
.bg-blue-dark-hover { background-color: var(--foundation----blue---dark-hover, rgba(1, 130, 140, 1)); }
.bg-blue-dark-active { background-color: var(--foundation----blue---dark-active, rgba(1, 97, 105, 1)); }
.bg-blue-darker { background-color: var(--foundation----blue---darker, rgba(1, 76, 82, 1)); }

.bg-red-light { background-color: var(--foundation----red---light, rgba(255, 237, 237, 1)); }
.bg-red-light-hover { background-color: var(--foundation----red---light-hover, rgba(255, 227, 228, 1)); }
.bg-red-light-active { background-color: var(--foundation----red---light-active, rgba(255, 198, 200, 1)); }
.bg-red-normal { background-color: var(--foundation----red---normal, rgba(255, 71, 76, 1)); }
.bg-red-normal-hover { background-color: var(--foundation----red---normal-hover, rgba(230, 64, 68, 1)); }
.bg-red-normal-active { background-color: var(--foundation----red---normal-active, rgba(204, 57, 61, 1)); }
.bg-red-dark { background-color: var(--foundation----red---dark, rgba(191, 53, 57, 1)); }
.bg-red-dark-hover { background-color: var(--foundation----red---dark-hover, rgba(153, 43, 46, 1)); }
.bg-red-dark-active { background-color: var(--foundation----red---dark-active, rgba(115, 32, 34, 1)); }
.bg-red-darker { background-color: var(--foundation----red---darker, rgba(89, 25, 27, 1)); }

.bg-yellow-light { background-color: var(--foundation----yellow---light, rgba(255, 250, 230, 1)); }
.bg-yellow-light-hover { background-color: var(--foundation----yellow---light-hover, rgba(255, 247, 217, 1)); }
.bg-yellow-light-active { background-color: var(--foundation----yellow---light-active, rgba(255, 238, 176, 1)); }
.bg-yellow-normal { background-color: var(--foundation----yellow---normal, rgba(255, 201, 1, 1)); }
.bg-yellow-normal-hover { background-color: var(--foundation----yellow---normal-hover, rgba(230, 181, 1, 1)); }
.bg-yellow-normal-active { background-color: var(--foundation----yellow---normal-active, rgba(204, 161, 1, 1)); }
.bg-yellow-dark { background-color: var(--foundation----yellow---dark, rgba(191, 151, 1, 1)); }
.bg-yellow-dark-hover { background-color: var(--foundation----yellow---dark-hover, rgba(153, 121, 1, 1)); }
.bg-yellow-dark-active { background-color: var(--foundation----yellow---dark-active, rgba(115, 90, 0, 1)); }
.bg-yellow-darker { background-color: var(--foundation----yellow---darker, rgba(89, 70, 0, 1)); }

.bg-green-light { background-color: var(--foundation----green---light, rgba(231, 252, 241, 1)); }
.bg-green-light-hover { background-color: var(--foundation----green---light-hover, rgba(219, 250, 234, 1)); }
.bg-green-light-active { background-color: var(--foundation----green---light-active, rgba(180, 244, 212, 1)); }
.bg-green-normal { background-color: var(--foundation----green---normal, rgba(12, 220, 115, 1)); }
.bg-green-normal-hover { background-color: var(--foundation----green---normal-hover, rgba(11, 198, 104, 1)); }
.bg-green-normal-active { background-color: var(--foundation----green---normal-active, rgba(10, 176, 92, 1)); }
.bg-green-dark { background-color: var(--foundation----green---dark, rgba(9, 165, 86, 1)); }
.bg-green-dark-hover { background-color: var(--foundation----green---dark-hover, rgba(7, 132, 69, 1)); }
.bg-green-dark-active { background-color: var(--foundation----green---dark-active, rgba(5, 99, 52, 1)); }
.bg-green-darker { background-color: var(--foundation----green---darker, rgba(4, 77, 40, 1)); }


/*----------------------*/
/*-----Border-Color-----*/
/*----------------------*/
.border-white { border-color: var(--main-colorsblanc-deskiz, rgba(255, 255, 255, 1)); }
.border-dark-blue { border-color: var(--main-colorsbleu-fonc-deskiz, rgba(4, 46, 76, 1)); }
.border-yellow { border-color: var(--main-colorsjaune-deskiz, rgba(255, 201, 1, 1)); }
.border-red { border-color: var(--main-colorsrouge-deskiz, rgba(255, 71, 76, 1)); }
.border-blue { border-color: var(--main-colorsbleu-deskiz, rgba(2, 216, 233, 1)); }
.border-green { border-color: var(--main-colorsgreen-deskiz, rgba(12, 220, 115, 1)); }
.border-black { border-color: var(--Main-Colors-Black-Deskiz, rgba(24, 26, 31, 1)); }
.border-white-blue { border-color: var(--Main-Colors-Bleu-Blanc-Deskiz, rgba(241, 250, 255, 1)); }

.border-dark-blue-light { border-color: var(--foundation---dark--blue---light, rgba(230, 234, 237, 1)); }
.border-dark-blue-light-hover { border-color: var(--foundation---dark--blue---light-hover, rgba(217, 224, 228, 1)); }
.border-dark-blue-light-active { border-color: var(--foundation---dark--blue---light-active, rgba(177, 190, 200, 1)); }
.border-dark-blue-normal { border-color: var(--foundation---dark--blue---normal, rgba(4, 46, 76, 1)); }
.border-dark-blue-normal-hover { border-color: var(--foundation---dark--blue---normal-hover, rgba(4, 41, 68, 1)); }
.border-dark-blue-normal-active { border-color: var(--foundation---dark--blue---normal-active, rgba(3, 37, 61, 1)); }
.border-dark-blue-dark { border-color: var(--foundation---dark--blue---dark, rgba(3, 35, 57, 1)); }
.border-dark-blue-dark-hover { border-color: var(--foundation---dark--blue---dark-hover, rgba(2, 28, 46, 1)); }
.border-dark-blue-dark-active { border-color: var(--foundation---dark--blue---dark-active, rgba(2, 21, 34, 1)); }
.border-dark-blue-darker { border-color: var(--foundation---dark--blue---darker, rgba(1, 16, 27, 1)); }

.border-blue-light { border-color: var(--foundation----blue---light, rgba(230, 251, 253, 1)); }
.border-blue-light-hover { border-color: var(--foundation----blue---light-hover, rgba(217, 249, 252, 1)); }
.border-blue-light-active { border-color: var(--foundation----blue---light-active, rgba(177, 243, 248, 1)); }
.border-blue-normal { border-color: var(--foundation----blue---normal, rgba(2, 216, 233, 1)); }
.border-blue-normal-hover { border-color: var(--foundation----blue---normal-hover, rgba(2, 194, 210, 1)); }
.border-blue-normal-active { border-color: var(--foundation----blue---normal-active, rgba(2, 173, 186, 1)); }
.border-blue-dark { border-color: var(--foundation----blue---dark, rgba(2, 162, 175, 1)); }
.border-blue-dark-hover { border-color: var(--foundation----blue---dark-hover, rgba(1, 130, 140, 1)); }
.border-blue-dark-active { border-color: var(--foundation----blue---dark-active, rgba(1, 97, 105, 1)); }
.border-blue-darker { border-color: var(--foundation----blue---darker, rgba(1, 76, 82, 1)); }

.border-red-light { border-color: var(--foundation----red---light, rgba(255, 237, 237, 1)); }
.border-red-light-hover { border-color: var(--foundation----red---light-hover, rgba(255, 227, 228, 1)); }
.border-red-light-active { border-color: var(--foundation----red---light-active, rgba(255, 198, 200, 1)); }
.border-red-normal { border-color: var(--foundation----red---normal, rgba(255, 71, 76, 1)); }
.border-red-normal-hover { border-color: var(--foundation----red---normal-hover, rgba(230, 64, 68, 1)); }
.border-red-normal-active { border-color: var(--foundation----red---normal-active, rgba(204, 57, 61, 1)); }
.border-red-dark { border-color: var(--foundation----red---dark, rgba(191, 53, 57, 1)); }
.border-red-dark-hover { border-color: var(--foundation----red---dark-hover, rgba(153, 43, 46, 1)); }
.border-red-dark-active { border-color: var(--foundation----red---dark-active, rgba(115, 32, 34, 1)); }
.border-red-darker { border-color: var(--foundation----red---darker, rgba(89, 25, 27, 1)); }

.border-yellow-light { border-color: var(--foundation----yellow---light, rgba(255, 250, 230, 1)); }
.border-yellow-light-hover { border-color: var(--foundation----yellow---light-hover, rgba(255, 247, 217, 1)); }
.border-yellow-light-active { border-color: var(--foundation----yellow---light-active, rgba(255, 238, 176, 1)); }
.border-yellow-normal { border-color: var(--foundation----yellow---normal, rgba(255, 201, 1, 1)); }
.border-yellow-normal-hover { border-color: var(--foundation----yellow---normal-hover, rgba(230, 181, 1, 1)); }
.border-yellow-normal-active { border-color: var(--foundation----yellow---normal-active, rgba(204, 161, 1, 1)); }
.border-yellow-dark { border-color: var(--foundation----yellow---dark, rgba(191, 151, 1, 1)); }
.border-yellow-dark-hover { border-color: var(--foundation----yellow---dark-hover, rgba(153, 121, 1, 1)); }
.border-yellow-dark-active { border-color: var(--foundation----yellow---dark-active, rgba(115, 90, 0, 1)); }
.border-yellow-darker { border-color: var(--foundation----yellow---darker, rgba(89, 70, 0, 1)); }

.border-green-light { border-color: var(--foundation----green---light, rgba(231, 252, 241, 1)); }
.border-green-light-hover { border-color: var(--foundation----green---light-hover, rgba(219, 250, 234, 1)); }
.border-green-light-active { border-color: var(--foundation----green---light-active, rgba(180, 244, 212, 1)); }
.border-green-normal { border-color: var(--foundation----green---normal, rgba(12, 220, 115, 1)); }
.border-green-normal-hover { border-color: var(--foundation----green---normal-hover, rgba(11, 198, 104, 1)); }
.border-green-normal-active { border-color: var(--foundation----green---normal-active, rgba(10, 176, 92, 1)); }
.border-green-dark { border-color: var(--foundation----green---dark, rgba(9, 165, 86, 1)); }
.border-green-dark-hover { border-color: var(--foundation----green---dark-hover, rgba(7, 132, 69, 1)); }
.border-green-dark-active { border-color: var(--foundation----green---dark-active, rgba(5, 99, 52, 1)); }
.border-green-darker { border-color: var(--foundation----green---darker, rgba(4, 77, 40, 1)); }


/*--------------------*/
/*-----Text-Color-----*/
/*--------------------*/
.text-color-white { color: var(--main-colorsblanc-deskiz, rgba(255, 255, 255, 1)); }
.text-color-dark-blue { color: var(--main-colorsbleu-fonc-deskiz, rgba(4, 46, 76, 1)); }
.text-color-yellow { color: var(--main-colorsjaune-deskiz, rgba(255, 201, 1, 1)); }
.text-color-red { color: var(--main-colorsrouge-deskiz, rgba(255, 71, 76, 1)); }
.text-color-blue { color: var(--main-colorsbleu-deskiz, rgba(2, 216, 233, 1)); }
.text-color-green { color: var(--main-colorsgreen-deskiz, rgba(12, 220, 115, 1)); }
.text-color-black { color: var(--Main-Colors-Black-Deskiz, rgba(24, 26, 31, 1)); }
.text-color-white-blue { color: var(--Main-Colors-Bleu-Blanc-Deskiz, rgba(241, 250, 255, 1)); }

.text-color-dark-blue-light { color: var(--foundation---dark--blue---light, rgba(230, 234, 237, 1)); }
.text-color-dark-blue-light-hover { color: var(--foundation---dark--blue---light-hover, rgba(217, 224, 228, 1)); }
.text-color-dark-blue-light-active { color: var(--foundation---dark--blue---light-active, rgba(177, 190, 200, 1)); }
.text-color-dark-blue-normal { color: var(--foundation---dark--blue---normal, rgba(4, 46, 76, 1)); }
.text-color-dark-blue-normal-hover { color: var(--foundation---dark--blue---normal-hover, rgba(4, 41, 68, 1)); }
.text-color-dark-blue-normal-active { color: var(--foundation---dark--blue---normal-active, rgba(3, 37, 61, 1)); }
.text-color-dark-blue-dark { color: var(--foundation---dark--blue---dark, rgba(3, 35, 57, 1)); }
.text-color-dark-blue-dark-hover { color: var(--foundation---dark--blue---dark-hover, rgba(2, 28, 46, 1)); }
.text-color-dark-blue-dark-active { color: var(--foundation---dark--blue---dark-active, rgba(2, 21, 34, 1)); }
.text-color-dark-blue-darker { color: var(--foundation---dark--blue---darker, rgba(1, 16, 27, 1)); }

.text-color-blue-light { color: var(--foundation----blue---light, rgba(230, 251, 253, 1)); }
.text-color-blue-light-hover { color: var(--foundation----blue---light-hover, rgba(217, 249, 252, 1)); }
.text-color-blue-light-active { color: var(--foundation----blue---light-active, rgba(177, 243, 248, 1)); }
.text-color-blue-normal { color: var(--foundation----blue---normal, rgba(2, 216, 233, 1)); }
.text-color-blue-normal-hover { color: var(--foundation----blue---normal-hover, rgba(2, 194, 210, 1)); }
.text-color-blue-normal-active { color: var(--foundation----blue---normal-active, rgba(2, 173, 186, 1)); }
.text-color-blue-dark { color: var(--foundation----blue---dark, rgba(2, 162, 175, 1)); }
.text-color-blue-dark-hover { color: var(--foundation----blue---dark-hover, rgba(1, 130, 140, 1)); }
.text-color-blue-dark-active { color: var(--foundation----blue---dark-active, rgba(1, 97, 105, 1)); }
.text-color-blue-darker { color: var(--foundation----blue---darker, rgba(1, 76, 82, 1)); }

.text-color-red-light { color: var(--foundation----red---light, rgba(255, 237, 237, 1)); }
.text-color-red-light-hover { color: var(--foundation----red---light-hover, rgba(255, 227, 228, 1)); }
.text-color-red-light-active { color: var(--foundation----red---light-active, rgba(255, 198, 200, 1)); }
.text-color-red-normal { color: var(--foundation----red---normal, rgba(255, 71, 76, 1)); }
.text-color-red-normal-hover { color: var(--foundation----red---normal-hover, rgba(230, 64, 68, 1)); }
.text-color-red-normal-active { color: var(--foundation----red---normal-active, rgba(204, 57, 61, 1)); }
.text-color-red-dark { color: var(--foundation----red---dark, rgba(191, 53, 57, 1)); }
.text-color-red-dark-hover { color: var(--foundation----red---dark-hover, rgba(153, 43, 46, 1)); }
.text-color-red-dark-active { color: var(--foundation----red---dark-active, rgba(115, 32, 34, 1)); }
.text-color-red-darker { color: var(--foundation----red---darker, rgba(89, 25, 27, 1)); }

.text-color-yellow-light { color: var(--foundation----yellow---light, rgba(255, 250, 230, 1)); }
.text-color-yellow-light-hover { color: var(--foundation----yellow---light-hover, rgba(255, 247, 217, 1)); }
.text-color-yellow-light-active { color: var(--foundation----yellow---light-active, rgba(255, 238, 176, 1)); }
.text-color-yellow-normal { color: var(--foundation----yellow---normal, rgba(255, 201, 1, 1)); }
.text-color-yellow-normal-hover { color: var(--foundation----yellow---normal-hover, rgba(230, 181, 1, 1)); }
.text-color-yellow-normal-active { color: var(--foundation----yellow---normal-active, rgba(204, 161, 1, 1)); }
.text-color-yellow-dark { color: var(--foundation----yellow---dark, rgba(191, 151, 1, 1)); }
.text-color-yellow-dark-hover { color: var(--foundation----yellow---dark-hover, rgba(153, 121, 1, 1)); }
.text-color-yellow-dark-active { color: var(--foundation----yellow---dark-active, rgba(115, 90, 0, 1)); }
.text-color-yellow-darker { color: var(--foundation----yellow---darker, rgba(89, 70, 0, 1)); }

.text-color-green-light { color: var(--foundation----green---light, rgba(231, 252, 241, 1)); }
.text-color-green-light-hover { color: var(--foundation----green---light-hover, rgba(219, 250, 234, 1)); }
.text-color-green-light-active { color: var(--foundation----green---light-active, rgba(180, 244, 212, 1)); }
.text-color-green-normal { color: var(--foundation----green---normal, rgba(12, 220, 115, 1)); }
.text-color-green-normal-hover { color: var(--foundation----green---normal-hover, rgba(11, 198, 104, 1)); }
.text-color-green-normal-active { color: var(--foundation----green---normal-active, rgba(10, 176, 92, 1)); }
.text-color-green-dark { color: var(--foundation----green---dark, rgba(9, 165, 86, 1)); }
.text-color-green-dark-hover { color: var(--foundation----green---dark-hover, rgba(7, 132, 69, 1)); }
.text-color-green-dark-active { color: var(--foundation----green---dark-active, rgba(5, 99, 52, 1)); }
.text-color-green-darker { color: var(--foundation----green---darker, rgba(4, 77, 40, 1)); }

/*-----Border Colors-----*/
/* Blue (Primary) */
.border-color-blue-hover { border: 1px solid var(--blue-400, rgba(51, 144, 225, 1)); } /* Hover */
.border-color-blue-active { border: 1px solid var(--blue-600, rgba(0, 106, 197, 1)); } /* Active */
.border-color-blue-focus { border: 1px solid var(--blue-500, rgba(0, 116, 217, 1)); } /* Focus */
.border-color-blue-deskiz { border: 1px solid var(--blue-500, rgba(0, 116, 217, 1)); } /* Deskiz */

/* Red (Secondary) */
.border-color-red-hover { border: 1px solid var(--red-400, rgba(255, 103, 94, 1)); } /* Hover */
.border-color-red-active { border: 1px solid var(--red-600, rgba(232, 59, 49, 1)); } /* Active */
.border-color-red-focus { border: 1px solid var(--red-500, rgba(255, 65, 54, 1)); } /* Focus */
.border-color-red-deskiz { border: 1px solid var(--red-500, rgba(255, 65, 54, 1)); } /* Deskiz */

/* Yellow (CTA - Emphasis) */
.border-color-yellow-hover { border: 1px solid var(--yellow-400, rgba(255, 229, 67, 1)); } /* Hover */
.border-color-yellow-active { border: 1px solid var(--yellow-600, rgba(232, 203, 18, 1)); } /* Active */
.border-color-yellow-focus { border: 1px solid var(--yellow-500, rgba(255, 223, 2, 1)); } /* Focus */
.border-color-yellow-deskiz { border: 1px solid var(--yellow-500, rgba(255, 223, 2, 1)); } /* Deskiz */

/* Navy */
.border-color-navy-hover { border: 1px solid var(--navy-400, rgba(60, 75, 104, 1)); } /* Hover */
.border-color-navy-active { border: 1px solid var(--navy-600, rgba(0, 27, 62, 1)); } /* Active */
.border-color-navy-focus { border: 1px solid var(--navy-500, rgba(11, 18, 68, 1)); } /* Focus */
.border-color-navy-deskiz { border: 1px solid var(--navy-500, rgba(11, 18, 68, 1)); } /* Deskiz */

/* Black */
.border-color-black-hover { border: 1px solid var(--black-400, rgba(70, 72, 76, 1)); } /* Hover */
.border-color-black-active { border: 1px solid var(--black-600, rgba(22, 24, 28, 1)); } /* Active */
.border-color-black-focus { border: 1px solid var(--black-500, rgba(24, 26, 31, 1)); } /* Focus */
.border-color-black-deskiz { border: 1px solid var(--black-500, rgba(24, 26, 31, 1)); } /* Deskiz */

/* Additional Shades for Various States */

/* Blue (Primary) */
.border-color-blue-200-hover { border: 1px solid var(--blue-200, rgba(138, 191, 238, 1)); } /* Hover */
.border-color-blue-300-active { border: 1px solid var(--blue-300, rgba(84, 162, 230, 1)); } /* Active */
.border-color-blue-600-focus { border: 1px solid var(--blue-600, rgba(0, 106, 197, 1)); } /* Focus */

/* Red (Secondary) */
.border-color-red-200-hover { border: 1px solid var(--red-200, rgba(255, 168, 163, 1)); } /* Hover */
.border-color-red-300-active { border: 1px solid var(--red-300, rgba(255, 128, 120, 1)); } /* Active */
.border-color-red-600-focus { border: 1px solid var(--red-600, rgba(232, 59, 49, 1)); } /* Focus */

/* Yellow (CTA - Emphasis) */
.border-color-yellow-200-hover { border: 1px solid var(--yellow-200, rgba(255, 240, 147, 1)); } /* Hover */
.border-color-yellow-300-active { border: 1px solid var(--yellow-300, rgba(255, 234, 98, 1)); } /* Active */
.border-color-yellow-600-focus { border: 1px solid var(--yellow-600, rgba(232, 203, 18, 1)); } /* Focus */

/* Navy */
.border-color-navy-200-hover { border: 1px solid var(--navy-200, rgba(159, 168, 185, 1)); } /* Hover */
.border-color-navy-300-active { border: 1px solid var(--navy-300, rgba(92, 104, 130, 1)); } /* Active */
.border-color-navy-600-focus { border: 1px solid var(--navy-600, rgba(0, 27, 62, 1)); } /* Focus */

/* Black */
.border-color-black-200-hover { border: 1px solid var(--black-200, rgba(149, 150, 152, 1)); } /* Hover */
.border-color-black-300-active { border: 1px solid var(--black-300, rgba(100, 102, 105, 1)); } /* Active */
.border-color-black-600-focus { border: 1px solid var(--black-600, rgba(22, 24, 28, 1)); } /* Focus */

/* Blue (Primary) */
.border-color-blue-50 { border: 1px solid var(--blue-50, rgba(230, 241, 255, 1)); }
.border-color-blue-100 { border: 1px solid var(--blue-100, rgba(176, 212, 243, 1)); }
.border-color-blue-200 { border: 1px solid var(--blue-200, rgba(138, 191, 238, 1)); }
.border-color-blue-300 { border: 1px solid var(--blue-300, rgba(84, 162, 230, 1)); }
.border-color-blue-400 { border: 1px solid var(--blue-400, rgba(51, 144, 225, 1)); }
.border-color-blue-500 { border: 1px solid var(--blue-500, rgba(0, 116, 217, 1)); }
.border-color-blue-600 { border: 1px solid var(--blue-600, rgba(0, 106, 197, 1)); }
.border-color-blue-700 { border: 1px solid var(--blue-700, rgba(0, 82, 154, 1)); }
.border-color-blue-800 { border: 1px solid var(--blue-800, rgba(0, 64, 119, 1)); }
.border-color-blue-900 { border: 1px solid var(--blue-900, rgba(0, 49, 91, 1)); }

/* Red (Secondary) */
.border-color-red-50 { border: 1px solid var(--red-50, rgba(255, 236, 235, 1)); }
.border-color-red-100 { border: 1px solid var(--red-100, rgba(255, 196, 193, 1)); }
.border-color-red-200 { border: 1px solid var(--red-200, rgba(255, 168, 163, 1)); }
.border-color-red-300 { border: 1px solid var(--red-300, rgba(255, 128, 120, 1)); }
.border-color-red-400 { border: 1px solid var(--red-400, rgba(255, 103, 94, 1)); }
.border-color-red-500 { border: 1px solid var(--red-500, rgba(255, 65, 54, 1)); }
.border-color-red-600 { border: 1px solid var(--red-600, rgba(232, 59, 49, 1)); }
.border-color-red-700 { border: 1px solid var(--red-700, rgba(181, 46, 38, 1)); }
.border-color-red-800 { border: 1px solid var(--red-800, rgba(140, 36, 30, 1)); }
.border-color-red-900 { border: 1px solid var(--red-900, rgba(107, 27, 23, 1)); }

/* Yellow (CTA - Emphasis) */
.border-color-yellow-50 { border: 1px solid var(--yellow-50, rgba(255, 252, 232, 1)); }
.border-color-yellow-100 { border: 1px solid var(--yellow-100, rgba(255, 245, 182, 1)); }
.border-color-yellow-200 { border: 1px solid var(--yellow-200, rgba(255, 240, 147, 1)); }
.border-color-yellow-300 { border: 1px solid var(--yellow-300, rgba(255, 234, 98, 1)); }
.border-color-yellow-400 { border: 1px solid var(--yellow-400, rgba(255, 229, 67, 1)); }
.border-color-yellow-500 { border: 1px solid var(--yellow-500, rgba(255, 223, 2, 1)); }
.border-color-yellow-600 { border: 1px solid var(--yellow-600, rgba(232, 203, 18, 1)); }
.border-color-yellow-700 { border: 1px solid var(--yellow-700, rgba(181, 153, 14, 1)); }
.border-color-yellow-800 { border: 1px solid var(--yellow-800, rgba(140, 123, 11, 1)); }
.border-color-yellow-900 { border: 1px solid var(--yellow-900, rgba(107, 94, 8, 1)); }

/* Navy */
.border-color-navy-50 { border: 1px solid var(--navy-50, rgba(231, 236, 240, 1)); }
.border-color-navy-100 { border: 1px solid var(--navy-100, rgba(187, 195, 208, 1)); }
.border-color-navy-200 { border: 1px solid var(--navy-200, rgba(159, 168, 185, 1)); }
.border-color-navy-300 { border: 1px solid var(--navy-300, rgba(92, 104, 130, 1)); }
.border-color-navy-400 { border: 1px solid var(--navy-400, rgba(60, 75, 104, 1)); }
.border-color-navy-500 { border: 1px solid var(--navy-500, rgba(11, 18, 68, 1)); }
.border-color-navy-600 { border: 1px solid var(--navy-600, rgba(0, 27, 62, 1)); }
.border-color-navy-700 { border: 1px solid var(--navy-700, rgba(8, 21, 48, 1)); }
.border-color-navy-800 { border: 1px solid var(--navy-800, rgba(6, 17, 37, 1)); }
.border-color-navy-900 { border: 1px solid var(--navy-900, rgba(5, 14, 30, 1)); }

/* Black */
.border-color-black-50 { border: 1px solid var(--black-50, rgba(232, 232, 233, 1)); }
.border-color-black-100 { border: 1px solid var(--black-100, rgba(187, 186, 197, 1)); }
.border-color-black-200 { border: 1px solid var(--black-200, rgba(149, 150, 152, 1)); }
.border-color-black-300 { border: 1px solid var(--black-300, rgba(100, 102, 105, 1)); }
.border-color-black-400 { border: 1px solid var(--black-400, rgba(70, 72, 76, 1)); }
.border-color-black-500 { border: 1px solid var(--black-500, rgba(24, 26, 31, 1)); }
.border-color-black-600 { border: 1px solid var(--black-600, rgba(22, 24, 28, 1)); }
.border-color-black-700 { border: 1px solid var(--black-700, rgba(17, 18, 22, 1)); }
.border-color-black-800 { border: 1px solid var(--black-800, rgba(13, 14, 17, 1)); }
.border-color-black-900 { border: 1px solid var(--black-900, rgba(10, 11, 13, 1)); }

/*-------------------*/
/*-----Animation-----*/
/*-------------------*/
.content {
    animation: transitionIn 0.5s;
}
@keyframes transitionIn {
    from {
        opacity: 0;
        transform: rotateX(-10deg);
    }

    to {
        opacity: 1;
        transform: rotateX(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
.fade-in {
    animation: fadeIn 0.5s forwards; /* Use forwards to keep the final state */
}
.fade-out {
    animation: fadeOut 0.5s forwards;
}


/* Initially hidden elements */
.hidden {
    display: none !important;
    opacity: 0;
}



/*------------------*/
/*---Color styles---*/
/*------------------*/
:root {
    --main-colorsblanc-deskiz: rgba(255, 255, 255, 1);
    --main-colorsbleu-fonc-deskiz: rgba(4, 46, 76, 1);
    --main-colorsjaune-deskiz: rgba(255, 201, 1, 1);
    --main-colorsrouge-deskiz: rgba(255, 71, 76, 1);
    --main-colorsbleu-deskiz: rgba(2, 216, 233, 1);
    --main-colorsgreen-deskiz: rgba(12, 220, 115, 1);
    --Main-Colors-Black-Deskiz: rgba(24, 26, 31, 1);
    --Main-Colors-Bleu-Blanc-Deskiz: rgba(241, 250, 255, 1);

    --foundation---dark--blue---light: rgba(230, 234, 237, 1);
    --foundation---dark--blue---light-hover: rgba(217, 224, 228, 1);
    --foundation---dark--blue---light-active: rgba(177, 190, 200, 1);
    --foundation---dark--blue---normal: rgba(4, 46, 76, 1);
    --foundation---dark--blue---normal-hover: rgba(4, 41, 68, 1);
    --foundation---dark--blue---normal-active: rgba(3, 37, 61, 1);
    --foundation---dark--blue---dark: rgba(3, 35, 57, 1);
    --foundation---dark--blue---dark-hover: rgba(2, 28, 46, 1);
    --foundation---dark--blue---dark-active: rgba(2, 21, 34, 1);
    --foundation---dark--blue---darker: rgba(1, 16, 27, 1);

    --foundation----blue---light: rgba(230, 251, 253, 1);
    --foundation----blue---light-hover: rgba(217, 249, 252, 1);
    --foundation----blue---light-active: rgba(177, 243, 248, 1);
    --foundation----blue---normal: rgba(2, 216, 233, 1);
    --foundation----blue---normal-hover: rgba(2, 194, 210, 1);
    --foundation----blue---normal-active: rgba(2, 173, 186, 1);
    --foundation----blue---dark: rgba(2, 162, 175, 1);
    --foundation----blue---dark-hover: rgba(1, 130, 140, 1);
    --foundation----blue---dark-active: rgba(1, 97, 105, 1);
    --foundation----blue---darker: rgba(1, 76, 82, 1);

    --foundation----red---light: rgba(255, 237, 237, 1);
    --foundation----red---light-hover: rgba(255, 227, 228, 1);
    --foundation----red---light-active: rgba(255, 198, 200, 1);
    --foundation----red---normal: rgba(255, 71, 76, 1);
    --foundation----red---normal-hover: rgba(230, 64, 68, 1);
    --foundation----red---normal-active: rgba(204, 57, 61, 1);
    --foundation----red---dark: rgba(191, 53, 57, 1);
    --foundation----red---dark-hover: rgba(153, 43, 46, 1);
    --foundation----red---dark-active: rgba(115, 32, 34, 1);
    --foundation----red---darker: rgba(89, 25, 27, 1);

    --foundation----yellow---light: rgba(255, 250, 230, 1);
    --foundation----yellow---light-hover: rgba(255, 247, 217, 1);
    --foundation----yellow---light-active: rgba(255, 238, 176, 1);
    --foundation----yellow---normal: rgba(255, 201, 1, 1);
    --foundation----yellow---normal-hover: rgba(230, 181, 1, 1);
    --foundation----yellow---normal-active: rgba(204, 161, 1, 1);
    --foundation----yellow---dark: rgba(191, 151, 1, 1);
    --foundation----yellow---dark-hover: rgba(153, 121, 1, 1);
    --foundation----yellow---dark-active: rgba(115, 90, 0, 1);
    --foundation----yellow---darker: rgba(89, 70, 0, 1);

    --foundation----green---light: rgba(231, 252, 241, 1);
    --foundation----green---light-hover: rgba(219, 250, 234, 1);
    --foundation----green---light-active: rgba(180, 244, 212, 1);
    --foundation----green---normal: rgba(12, 220, 115, 1);
    --foundation----green---normal-hover: rgba(11, 198, 104, 1);
    --foundation----green---normal-active: rgba(10, 176, 92, 1);
    --foundation----green---dark: rgba(9, 165, 86, 1);
    --foundation----green---dark-hover: rgba(7, 132, 69, 1);
    --foundation----green---dark-active: rgba(5, 99, 52, 1);
    --foundation----green---darker: rgba(4, 77, 40, 1);
    
    --secondary--colors---jaune----blanc--cassé--deskiz: rgba(255, 250, 232, 1);
    --secondary--colors---bleu--deskiz--cassé: rgba(3, 166, 166, 1);
    --secondary--colors---rouge--deskiz--cassé: rgba(219, 55, 63, 1);
    --secondary--colors---jaune--deskiz--cassé: rgba(190, 154, 20, 1);
    --secondary--colors---jaune----blanc--deskiz: rgba(254, 241, 191, 1);
    --secondary--colors---bleu--cassé--deskiz: rgba(100, 135, 156, 1);
    --secondary--colors---vert--deskiz--cassé: rgba(3, 171, 90, 1);
    --secondary--colors---rouge----blanc-cassé--deskiz: rgba(255, 249, 249, 1);
    --specifics---panel--hover--button: rgba(10, 58, 88, 1);
    --specifics---dark--blue--selected: rgba(0, 27, 38, 1);
    --specifics---purple-for-stats: rgba(157, 79, 219, 1);
}


/*------------------------*/
/*------Font Uploads------*/
/*------------------------*/
  @font-face {
    font-family: 'Alpino-Bold';
    src: url('../font/Alpino-Bold.woff2') format('woff2'),
        url('../font/Alpino-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Alpino-Black';
    src: url('../font/Alpino-Black.woff2') format('woff2'),
        url('../font/Alpino-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Alpino-Thin';
    src: url('../font/Alpino-Thin.woff2') format('woff2'),
        url('../font/Alpino-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Alpino-Regular';
    src: url('../font/Alpino-Regular.woff2') format('woff2'),
        url('../font/Alpino-Regular.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Alpino-Light';
    src: url('../font/Alpino-Light.woff2') format('woff2'),
        url('../font/Alpino-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Alpino-Medium';
    src: url('../font/Alpino-Medium.woff2') format('woff2'),
        url('../font/Alpino-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
      font-family: 'Eskool';
      src: url('../font/Eskool-Regular.woff2') format('woff2'),
          url('../font/Eskool-Regular.woff') format('woff');
      font-weight: 100;
      font-style: normal;
      font-display: swap;
  }



/*------------------------*/
/*-----Swiper Library-----*/
/*------------------------*/
.swiper { /*Used for freeMode in homepage*/
    width: 100%;
    overflow: visible !important;
}

.swiper-slide { /*Used for freeMode in homepage*/
    width: unset !important;
}