.Page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    color: var(--page-color);
    background: var(--page);
}

@media (max-width: 768px) {
    .Page {
        font-size: 13px;
    }
}

:root {
    /* ******************************************* */
    /* LES VARIABLES DE COULEURS GÉNÉRALES DU SITE */
    /* ******************************************* */

    /* Notre rose */
    --light-pink: #FF82DA;
    --pink: #FF74D5;
    --dark-pink: #E95CC3;
    --deep-pink: #FF51CE;
    --translucent-pink: rgba(255, 116, 213, 0.5);

    /* Le rose de l'AE */
    /*--light-pink: #FFB2B2;
    --pink: #FFA2A2;
    --dark-pink: #A66A6A;
    --deep-pink: #8A5858;
    --translucent-pink: rgba(255, 162, 162, 0.5);*/

    --orangy-red: #F44336;
    --red: #FF0000;
    --dark-red: #D10101;
    --deep-red: #600000;

    --green: #51E600;
    --dark-green: #349800;

    --blue: #0000FF;
    --dark-blue: #0700D2;

    --gold: #FFD700;
    --dark-gold: #832d03;
    --silver: #C0C0C0;
    --bronze: #CD7F32;

    --sky-blue: #007BFF;
    --translucent-dark-sky-blue: rgba(0, 123, 255, 0.2);

    --apple-green: #00a800;
    --translucent-dark-apple-green: rgba(0, 168, 0, 0.2);

    --apple-red: #ff4040;
    --translucent-dark-apple-red: rgba(255, 64, 64, 0.2);

    --white: #FFFFFF;
    --dark-white: #DADADA;
    --deep-white: #C0C0C0;
    --extremely-light-gray: #989898;
    --very-light-gray: #84848;
    --slightly-lighter-gray: #767676;
    --light-gray: #555555;
    --gray: #454545;
    --dark-gray: #303030;
    --deep-gray: #1B1B1B;
    --light-black: #131313;
    --black: #000000;

    /* ********************************************* */
    /* LES VARIABLES DE COULEUR DES ELEMENTS DU SITE */
    /* ********************************************* */

    --page: var(--deep-gray);
    --page-color: var(--white);

    --text-title-color: var(--white);
    --text-search-input-color: var(--light-gray);

    --page-parts: var(--gray);
    --page-parts-color: var(--white);

    --part-div: var(--dark-gray);
    --part-div-color: var(--white);

    --login-page: var(--pink);
    --login-page-color: var(--white);
    --login-page-translucent-background: var(--translucent-pink);

    --login-button: var(--white);
    --login-button-color: var(--black);
    --login-button-hover: var(--dark-white);

    --login-guest-button: var(--black);
    --login-guest-button-color: var(--white);
    --login-guest-button-hover: var(--dark-gray);

    --pink-button: var(--pink);
    --pink-button-hover: var(--dark-pink);
    --pink-button-color: var(--white);

    --admin-button: var(--red);
    --admin-button-hover: var(--dark-red);
    --admin-button-color: var(--white);

    --top-bar: var(--light-gray);
    --top-bar-color: var(--white);

    --search-bar: var(--white);
    --search-bar-color: var(--black);
    --search-bar-placeholder-color: var(--very-light-gray);

    --filter-zone: var(--light-gray);
    --filter-zone-color: var(--white);

    --filter-zone-button-color: var(--white);
    --filter-zone-button-source: var(--dark-blue);
    --filter-zone-button-place: var(--slightly-lighter-gray);

    --filter-slider-zone: var(--dark-gray);
    --filter-slider-zone-color: var(--white);
    --filter-zone-slider-track: var(--light-pink);

    --filter-groups: var(--dark-gray);
    --filter-groups-color: var(--white);

    --scrollbar-track: var(--light-pink);
    --scrollbar-thumb: var(--pink);

    --challenge-bar: var(--pink);
    --challenge-bar-color: var(--white);
    --challenge-bar-hover: var(--dark-pink);

    --challenge-bar-button: var(--deep-pink);
    --challenge-bar-button-color: var(--white);

    --challenge-state-logo-green: var(--green);
    --challenge-state-logo-red: var(--red);

    --challenge-bar-description: var(--light-gray);
    --challenge-bar-description-color: var(--white);

    --challenge-bar-description-text: var(--slightly-lighter-gray);
    --challenge-bar-description-text-color: var(--white);

    --challenge-bar-description-button-color: var(--white);
    --challenge-bar-description-button-add-proof: var(--green);
    --challenge-bar-description-button-add-proof-hover: var(--dark-green);
    --challenge-bar-description-button-modify: var(--pink);
    --challenge-bar-description-button-modify-hover: var(--dark-pink);

    --challenge-bar-description-infos-color: var(--white);
    --challenge-bar-description-infos-difficulty: var(--red);
    --challenge-bar-description-infos-source: var(--filter-zone-button-source);
    --challenge-bar-description-infos-place: var(--filter-zone-button-place);

    --challenge-bar-description-groupes: var(--slightly-lighter-gray);
    --challenge-bar-description-groupes-color: var(--white);
    --challenge-bar-description-groupes-grp: var(--extremely-light-gray);
    --challenge-bar-description-groupes-grp-color: var(--white);

    --add-image-button: var(--black);
    --add-image-button-color: var(--white);
    --add-image-button-hover: var(--light-black);

    --select-difficulty-button: var(--red);
    --select-difficulty-button-color: var(--white);
    --select-difficulty-button-title-color: var(--deep-red);

    --select-reward-button: var(--blue);
    --select-reward-button-color: var(--white);
    --select-reward-button-input: var(--white);
    --select-reward-button-input-color: var(--black);));

    --select-place-button: var(--extremely-light-gray);
    --select-place-button-color: var(--white);
    --select-place-button-hover: var(--light-gray);

    --podium: var(--white);
    --podium-color: var(--black);

    --groupe-1: var(--gold);
    --groupe-1-color: var(--dark-gold);
    --groupe-2: var(--silver);
    --groupe-2-color: var(--white);
    --groupe-3: var(--bronze);
    --groupe-3-color: var(--black);

    --leaderboard-bar: var(--pink);
    --leaderboard-bar-color: var(--black);
    --leaderboard-bar-rank: var(--dark-pink);
    --leaderboard-bar-rank-color: var(--black);
    --leaderboard-bar-points: var(--dark-pink);
    --leaderboard-bar-points-color: var(--white);

    --preuve-box: var(--pink);
    --preuve-box-color: var(--white);
    --preuve-header: var(--dark-pink);
    --preuve-header-color: var(--white);

    --okay-button: var(--green);
    --okay-button-color: var(--white);
    --okay-button-hover: var(--dark-green);
    --nope-button: var(--red);
    --nope-button-color: var(--white);
    --nope-button-hover: var(--dark-red);

    --snackbar: var(--orangy-red);
    --snackbar-color: var(--white);

    --select-button: var(--black);
    --select-button-color: var(--white);
    --usr-status-selected: var(--sky-blue);
    --usr-status-selected-background: var(--translucent-dark-sky-blue);
    --grp-status-add: var(--apple-green);
    --grp-status-add-background: var(--translucent-dark-apple-green);
    --grp-status-remove: var(--apple-red);
    --grp-status-remove-background: var(--translucent-dark-apple-red);
}