/*
 Theme Name:      Divi Child CNFR2
 Template:        Divi
 Version:         1.6.0
*/

/* --- 1. POLICES & VARIABLES DYNAMIQUES --- */
@import url('https://fonts.googleapis.com/css2?family=Passion+One&family=Roboto+Condensed:wght@400;700&display=swap');

body.color-blue-cnfr { --primary: #14b8d4; --secondary: #0c4961; }
body.color-blue      { --primary: #5bcaff; --secondary: #0c4961; }
body.color-green     { --primary: #cddc39; --secondary: #5d5d5d; }
body.color-orange    { --primary: #ffb74d; --secondary: #111; }
body.color-orange-alt{ --primary: #ef7d16; --secondary: #111; }
body.color-lilac     { --primary: #9e8fb2; --secondary: #392759; }

/* --- 2. SOCLE TYPO & RESET --- */
h1, h2, h3, h4, h5, h6 { font-family: 'Passion One', cursive !important; text-transform: uppercase; }
body { font-family: 'Open Sans', Arial, sans-serif; background-color: #fff !important; }

/* --- 3. NAVIGATION & TOPBAR (DESKTOP) --- */
#topbar { background-color: #f5f5f5; height: 40px; display: flex; align-items: center; }

.globalnavigation ul > li > a {
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    padding: 25px 15px !important;
    color: var(--secondary) !important;
}

#menu-top_menu li a, #menu-menu-haut-de-page li a {
    background-color: transparent !important;
    color: var(--secondary) !important;
    border: 1px solid var(--secondary) !important;
    padding: 0.4rem 0.75rem !important;
    border-radius: 4px;
}

#menu-top_menu li a:hover { background-color: var(--secondary) !important; color: #fff !important; }

/* --- 4. LA NOUVELLE GRILLE D'ACTIVITÉS (DESKTOP) --- */
.activites-grid .et_pb_row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 25px !important;
    width: 95% !important;
}

.activites-grid .et_pb_column { width: 100% !important; margin: 0 !important; float: none !important; }

.activites-grid .et_pb_tax_item_column .et_pb_column {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    height: 100% !important;
}

/* --- 5. STYLES DES PLUGINS & TABLEAUX --- */
.tribe-events-page-title { text-align: left; text-transform: uppercase; font-size: 40px !important; }
#tribe-bar-form .tribe-bar-submit input[type='submit'] { background: var(--primary); }

#wpmem_reg input[type='text'], #wpmem_login input[type='text'] {
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 4px;
    padding: 8px 10px;
}
#wpmem_reg input[type='submit'] { background-color: var(--secondary) !important; color: #fff; }

.wpcf7-text, .wpcf7-textarea { background-color: #eee !important; border: none !important; padding: 16px !important; width: 100%; }
.wpcf7-submit { background-color: var(--primary) !important; color: #fff !important; border-radius: 3px; border: none; padding: 10px 20px; }

.table-responsive { width: 100%; overflow-x: auto; }
@media screen and (max-width: 767px) {
    .table-responsive td { display: block; padding-left: 50% !important; position: relative; text-align: right; border-bottom: 1px solid #eee; }
    .table-responsive td:before { content: attr(data-label); position: absolute; left: 10px; font-weight: bold; color: var(--secondary); }
}

/* ==========================================================================
   BLOC MOBILE UNIFIÉ (980px et moins)
   ========================================================================== */
@media (max-width: 980px) {

    /* 1. ASPECT BOUTONS (MENU & ACTIVITÉS) */
    .mobile_menu_bar, .et_pb_menu__mobile_menu_toggle {
        background-color: #ffffff !important;
        border: 2px solid var(--primary) !important;
        border-radius: 8px !important;
        width: auto !important;
        height: 45px !important;
        padding: 0 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
        margin: 0 auto 20px auto !important;
        transition: all 0.3s ease !important;
    }

    .mobile_menu_bar:before { content: "\61" !important; font-family: 'ETmodules' !important; color: var(--primary) !important; font-size: 24px !important; }
    .mobile_menu_bar:after { font-family: 'Roboto Condensed', sans-serif !important; font-weight: 700 !important; font-size: 14px !important; margin-left: 10px !important; }

    .mobile_nav.closed .mobile_menu_bar:after { content: "MENU" !important; color: var(--primary) !important; }
    #home-thematiques .mobile_nav.closed .mobile_menu_bar:after { content: "ACTIVITÉS" !important; color: var(--primary) !important; }

    .mobile_nav.opened .mobile_menu_bar { background-color: var(--primary) !important; border-color: var(--primary) !important; }
    .mobile_nav.opened .mobile_menu_bar:before { content: "\4d" !important; color: #ffffff !important; }
    .mobile_nav.opened .mobile_menu_bar:after { content: "FERMER" !important; color: #ffffff !important; }

    .et_pb_menu_inner_container .mobile_nav { display: flex; justify-content: flex-end; width: 100%; }

    /* 2. PANNEAUX ET HIÉRARCHIE DES SOUS-MENUS */
    .et_mobile_menu {
        border-top: 4px solid var(--primary) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
        border-radius: 0 0 15px 15px !important;
        background: #ffffff !important;
    }

    .et_mobile_menu li a { color: var(--secondary) !important; font-weight: 700 !important; border-bottom: 1px solid #f2f2f2 !important; }

    .et_mobile_menu .sub-menu { background-color: #f9f9f9 !important; }
    .et_mobile_menu li ul li a {
        padding-left: 30px !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        border-left: 3px solid var(--primary) !important;
    }

    /* 3. GRILLE D'ACTUS MOBILE */
    body .col3-blog .et_pb_ajax_pagination_container {
        display: grid !important;
        grid-template-columns: repeat(1, 1fr) !important;
        grid-gap: 30px !important;
    }
} /* FIN DU BLOC MOBILE */