/* =============================================================================
   VARIABLES CSS - MHB Theme
   ============================================================================= */

:root {
    /* Couleurs principales */
    --mhb-primary: #1a365d;
    --mhb-secondary: #007AC1;
    --mhb-accent: #E95323;
    --mhb-accent-hover: #e55a2b;

    /* Fonds */
    --mhb-bg-dark: #001025;
    --mhb-bg-dark-alt: #010E1E;
    --mhb-bg-semi-dark: #1a365de6;
    --mhb-bg-glass: rgba(255, 255, 255, 0.05);
    --mhb-border-glass: rgba(255, 255, 255, 0.08);

    /* Textes */
    --mhb-text-white: #ffffff;
    --mhb-text-gray: #a0aec0;
    --mhb-text-dark: #121929;

    /* Autres */
    --mhb-trophy-gold: #BB9860;
    --mhb-top-menu-bg: #00102578;

    /* Gradients */
    --mhb-gradient-bg: linear-gradient(135deg, #1a365d 0%, #2a4a6b 100%);

    /* Typographie */
    --mhb-font-primary: 'DM Sans', Arial, sans-serif;
    --mhb-font-display: 'Formula Condensed', Arial Black, Arial, sans-serif;

    /* Rayons */
    --mhb-radius-sm: 8px;
    --mhb-radius-md: 16px;
    --mhb-radius-lg: 24px;

    /* Ombres */
    --mhb-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --mhb-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.18);
    --mhb-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.3);

    /* Transitions */
    --mhb-transition-fast: 0.2s ease;
    --mhb-transition-base: 0.3s ease;
    --mhb-transition-smooth: 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    --mhb-transition-bounce: 0.8s cubic-bezier(0.77, 0, 0.18, 1);

    /* Admin bar */
    --mhb-admin-bar-height: 32px;
    --mhb-admin-bar-height-mobile: 46px;

    /* ==========================================================================
       SECTION SPACING SYSTEM
       Valeurs facilement ajustables pour l'ensemble des blocs
       ========================================================================== */

    /* Container max width */
    --mhb-container-max: 1400px;

    /* Marges latérales (bleed = pleine largeur) */
    --mhb-bleed-margin: 50px;
    --mhb-bleed-margin-bottom: 70px;

    /* Section padding (wrapper principal) */
    --mhb-section-padding-x: 50px;
    --mhb-section-padding-bottom: 70px;
    --mhb-section-margin-bottom: 70px;

    /* Content padding (contenu intérieur) */
    --mhb-content-padding-x: 15px;
    --mhb-content-padding-bottom: 50px;

    /* Titre absolute : padding-top sur section */
    --mhb-section-absolute-title-pt: 50px;

    /* Titre absolute : padding-top sur content */
    --mhb-content-absolute-title-pt: 115px;
}

/* =============================================================================
   RESPONSIVE - TABLET (1200px)
   ============================================================================= */
@media (max-width: 1200px) {
    :root {
        --mhb-bleed-margin: 15px;
        --mhb-bleed-margin-bottom: 80px;
        --mhb-section-padding-x: 20px;
        --mhb-section-padding-bottom: 60px;
        --mhb-section-margin-bottom: 40px;
        --mhb-content-padding-x: 15px;
        --mhb-content-padding-bottom: 40px;
    }
}

/* =============================================================================
   RESPONSIVE - TABLET SMALL (1024px)
   ============================================================================= */
@media (max-width: 1024px) {
    :root {
        --mhb-bleed-margin: 10px;
        --mhb-bleed-margin-bottom: 50px;
        --mhb-section-padding-x: 10px;
        --mhb-section-padding-bottom: 40px;
        --mhb-section-margin-bottom: 30px;
        --mhb-content-padding-x: 10px;
        --mhb-content-padding-bottom: 30px;
        --mhb-content-absolute-title-pt: 75px;
    }
}

/* =============================================================================
   RESPONSIVE - MOBILE LARGE (900px)
   ============================================================================= */
@media (max-width: 900px) {
    :root {
        --mhb-bleed-margin-bottom: 40px;
        --mhb-section-padding-bottom: 30px;
        --mhb-section-margin-bottom: 25px;
    }
}

/* =============================================================================
   RESPONSIVE - MOBILE (768px)
   ============================================================================= */
@media (max-width: 768px) {
    :root {
        --mhb-bleed-margin: 0;
        --mhb-bleed-margin-bottom: 30px;
        --mhb-section-padding-x: 0;
        --mhb-section-padding-bottom: 30px;
        --mhb-section-margin-bottom: 20px;
        --mhb-content-padding-x: 15px;
        --mhb-content-padding-bottom: 25px;
        --mhb-content-absolute-title-pt: 55px;
    }
}

/* =============================================================================
   RESPONSIVE - MOBILE SMALL (568px)
   ============================================================================= */
@media (max-width: 568px) {
    :root {
        --mhb-section-padding-bottom: 25px;
        --mhb-section-margin-bottom: 15px;
        --mhb-content-padding-bottom: 20px;
    }
}