* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/*background: linear-gradient(to bottom right, #257f62, #1b3f5f);*/
/*background: linear-gradient(135deg, #1d1f27, #292d3e);*/

/* ==================================== Variables globales ==================================== */

/* Mode sombre + Default si aucun theme */
:root {
    --body-color: #121212;
    --primaryBackgroundColor: #1e1e1e;
    --buttonBackgroundColor: #2a2a2a;
    --inputBackgroundColor: #2a2a2a;
    --buttonBackgroundColorHover: #383838;
    --textColorButton: #e0e0e0;
    --textColor: #bbbbbb;
    --textSecondaryColor: #a0a0a0;
    --blackOrWhire: white;
    --colorShadow: rgba(0, 0, 0, 0.3);
    --altColor: #0056b3;
    --rgb_bodyBackgroundColor: 18, 18, 18;
    --rgb_buttonBackgroundColor: 0, 123, 255;
    --rgb_sidebarColor: 30, 30, 30;


    --vk_body_color: #121212;
    --vk_header_color: #1e1e1e;
    --vk_header_title_color: linear-gradient(to left, rgb(236, 89, 43), rgb(212, 172, 62));
    --vk_component_background_default: #1e1e1e;
    --vk_component_background_secondary: #2a2a2a;
    --vk_button_background_default_color: #2a2a2a;
    --vk_button_background_default_color_hover: #383838;
    --vk_button_background_orange_color: #E5672B;
    --vk_button_background_orange_color_hover: #FF7A33;
    --vk_ctaButton_background_color: #E5672B;
    --vk_ctaButton_background_color_hover: #FF7A33;
    --vk_input_background_default: #2a2a2a;
    --vk_menuLateralGauche_color: #121212;
    --vk_menuLateralDroit_color: #1e1e1e;
    --vk_defaultBorder_color: none;
    --vk_separateur_color: rgba(255, 255, 255, 0.2);

    --vk_text_color: #bbbbbb;
    --vk_text_button_color: #e0e0e0;
    --vk_orange_color: #E5672B;
    --vk_orange_color_hover: #FF7A33;
}

/* Mode clair */
body.light {
    --body-color: #ffffff;
    --primaryBackgroundColor: #f5f5f5;
    --buttonBackgroundColor: #eaeaea;
    --inputBackgroundColor: #eaeaea;
    --buttonBackgroundColorHover: #cccccc;
    --textColorButton: #e0e0e0;
    --textColor: #121212;
    --textSecondaryColor: #606060;
    --blackOrWhire: black;
    --colorShadow: rgba(0, 0, 0, 0.2);
    --altColor: #0056b3;
    --rgb_bodyBackgroundColor: 255, 255, 255;
    --rgb_buttonBackgroundColor: 0, 123, 255;
    --rgb_sidebarColor: 245, 245, 245;

    --vk_body_color: #ffffff;
    --vk_header_color: #f5f5f5;
    --vk_header_title_color: linear-gradient(to left, #1b3f5f, #257f62);
    --vk_component_background_default: #f5f5f5;
    --vk_component_background_secondary: #eaeaea;
    --vk_button_background_default_color: #eaeaea;
    --vk_button_background_default_color_hover: #cccccc;
    --vk_button_background_orange_color: rgb(16, 96, 161);
    --vk_button_background_orange_color_hover: rgb(0, 140, 255);
    --vk_ctaButton_background_color: linear-gradient(45deg, #3366cc, #5a92db);
    --vk_ctaButton_background_color_hover: linear-gradient(45deg, #2a5bb8, #4b80d0);
    --vk_input_background_default: #eaeaea;
    --vk_menuLateralGauche_color: #ffffff;
    --vk_menuLateralDroit_color: #ffffff;
    --vk_defaultBorder_color: #ccc;
    --vk_separateur_color: rgba(0, 0, 0, 0.2);

    --vk_text_color: #121212 ;
    --vk_text_button_color: #e0e0e0;
    --vk_orange_color: #18629e;
    --vk_orange_color_hover: #155181;
}

/* 🔄 Animations */
:root {
    --vk_trans_05: 0.5s ease-in-out;
    --vk_trans_03: 0.3s ease-in-out;
    --spinner-size: 40px;
}

/* 📏 Tailles et affichage*/
:root {
    --vk_menuLateralGauche_width_open: 225px;
    --vk_menuLateralGauche_width_close: 70px;
    --vk_menuLateralDroit_width: 50px;
    --vk_menuLateralDroit_opacity: 0.5;

    --vk_header_height: 75px;
    --vk_header_opacity: 0.75;

    --vk_bodySPAContent_height: calc(100vh - var(--vk_header_height));
    --vk_bodySPAContent_width: calc(100% - var(--vk_menuLateralGauche_width_open) - 10%);

    --vk_pageContainer_height: 100%;
    --vk_pageContainer_width: 100%;
    --vk_pageContainer_padding : none;
    --vk_pageContainer_padding_top : none;
}


/* ==================================== Variables globales pour appareils mobiles ==================================== */

/* 📱 Mode Mobile : Quand l'écran est inférieur à 768px */
@media (max-width: 768px) {
    :root {
        --vk_pageContainer_width: 90%; 
        --vk_pageContainer_maxWidth: 90%;
    }
}

/* 📲 Mode Tablette : Entre 768px et 1024px */
@media (max-width: 1024px) {
    :root {
        --vk_pageContainer_width: 90%; 
        --vk_pageContainer_maxWidth: 90%;
    }
}