/* Version 1.0 VandkaGames du 16/03/2025 */

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

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

/* Mode sombre + Default si aucun theme */
:root, body.vk_darkmode {
    --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: #121212;
    --vk_header_title_color: #E5672B;
    --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: black;
    --vk_separateur_color: rgba(255, 255, 255, 0.2);

    --vk_text_color: #bbbbbb;
    --vk_text_bw_color: white;
    --vk_theme_button_color: #e0e0e0;
    --vk_theme_color: #E5672B;
    --vk_theme_color_hover: #FF7A33;

    /* A changer */
    --vk_text_button_color: #e0e0e0;
    --vk_orange_color: #E5672B;
    --vk_orange_color_hover: #FF7A33;
}

/* Mode clair */
body.vk_lightmode {
    --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: #ffffff;
    --vk_header_title_color: #18629e;
    --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_bw_color: #121212;
    --vk_theme_button_color: #e0e0e0;
    --vk_theme_color: #18629e;
    --vk_theme_color_hover: #155181;

    /* A changer */
    --vk_text_button_color: #e0e0e0;
    --vk_orange_color: #18629e;
    --vk_orange_color_hover: #155181;
}

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

/* 📏 Tailles et affichage*/
:root {
    --vk_menuLateralGauche_width_open: 250px;
    --vk_menuLateralGauche_width_close: 70px;
    --vk_menuLateralGauche_height: 100vh;
    --vk_menuLateralGauche_marginTop: calc(100vh - var(--vk_menuLateralGauche_height));
    --vk_menuLateralDroit_width: 50px;
    --vk_menuLateralDroit_opacity: 0.5;

    --vk_header_height: 75px;
    --vk_header_opacity: 1;

    --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: 80%;
    --vk_pageContainer_padding_top : 3vh;
}

.vkSP_hideHDScreen {
    display: none !important;
} 

.vkSP_hideWithFade {
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

.vkSP_hide{
    opacity: 0;
    visibility: hidden;
    position: absolute;
}


/* ==================================== Class spéciale ==================================== */



/* ==================================== Media Queries pour appareils mobiles ==================================== */

@media (min-width: 1921px) { /* Pour les riches */
 
}

/* 📲 Mode Tablette : Entre 768px et 1024px */
@media (max-width: 1024px) {

}

/* 📱 Mode Mobile : Quand l'écran est inférieur à 768px */
@media (max-width: 768px) {
    :root {
        --vk_header_height: 7vh;
        --vk_menuLateralGauche_width_open: 225px;
        --vk_menuLateralGauche_width_close: 0px;
        --vk_bodySPAContent_height: calc(100vh - var(--vk_header_height));
    }

    .vkSP_hideOnMobile{
        display: none !important;
    } 

    .vkSP_hideHDScreen {
        display: block !important;
    } 

}