/* =========================================================
   CNB PLONGEE - THEME CLAIR
   Ce fichier doit être chargé EN DERNIER
   ========================================================= */


/* ---------------------------------------------------------
   THEME CLAIR GENERAL
   --------------------------------------------------------- */

html.light-theme,
html.light-theme body,
body.light-theme {
    background: #f5f5f5 !important;
    color: #222222 !important;
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

html.light-theme header,
body.light-theme header {
    background: #ffffff !important;
    color: #222222 !important;

    border-bottom:
        1px solid #dddddd !important;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.08) !important;
}


html.light-theme .brand strong,
body.light-theme .brand strong {
    color: #222222 !important;
}


/* ---------------------------------------------------------
   MENU
   --------------------------------------------------------- */

html.light-theme header nav a,
html.light-theme header nav .top,
body.light-theme header nav a,
body.light-theme header nav .top {
    color: #222222 !important;
}


html.light-theme header nav a:hover,
html.light-theme header nav .top:hover,
body.light-theme header nav a:hover,
body.light-theme header nav .top:hover {
    color: #0066cc !important;
}


/* ---------------------------------------------------------
   SOUS-MENUS
   --------------------------------------------------------- */

html.light-theme .dropdown .panel,
body.light-theme .dropdown .panel {
    background: #ffffff !important;

    border:
        1px solid #dddddd !important;
}


html.light-theme .dropdown .panel a,
body.light-theme .dropdown .panel a {
    color: #222222 !important;
}


html.light-theme .dropdown .panel a:hover,
body.light-theme .dropdown .panel a:hover {
    background: #eef3f5 !important;
    color: #0066cc !important;
}


/* ---------------------------------------------------------
   SECTIONS
   --------------------------------------------------------- */

html.light-theme .section,
body.light-theme .section {
    background: #ffffff !important;
    color: #222222 !important;

    border-color: #dddddd !important;
}


html.light-theme .section h1,
html.light-theme .section h2,
html.light-theme .section h3,
body.light-theme .section h1,
body.light-theme .section h2,
body.light-theme .section h3 {
    color: #222222 !important;
}


html.light-theme .lead,
body.light-theme .lead {
    color: #666666 !important;
}


/* ---------------------------------------------------------
   CARTES
   --------------------------------------------------------- */

html.light-theme .card,
body.light-theme .card {
    background: #ffffff !important;
    color: #222222 !important;

    border-color: #dddddd !important;
}


html.light-theme .card h3,
body.light-theme .card h3 {
    color: #0066cc !important;
}


html.light-theme .card p,
body.light-theme .card p {
    color: #555555 !important;
}


/* ---------------------------------------------------------
   ACTUALITES
   --------------------------------------------------------- */

html.light-theme .news,
body.light-theme .news {
    background: #f5f5f5 !important;
    color: #222222 !important;
}


html.light-theme .news h2,
body.light-theme .news h2 {
    color: #222222 !important;
}


html.light-theme .news-card,
body.light-theme .news-card {
    background: #ffffff !important;
    color: #222222 !important;

    border-color: #dddddd !important;
}


html.light-theme .news-card .content,
body.light-theme .news-card .content {
    background: #ffffff !important;
}


html.light-theme .news-card h3,
body.light-theme .news-card h3 {
    color: #0066cc !important;
}


html.light-theme .news-card p,
body.light-theme .news-card p {
    color: #555555 !important;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

html.light-theme footer,
body.light-theme footer {
    background: #ffffff !important;
    color: #666666 !important;

    border-top:
        1px solid #dddddd !important;
}


/* ---------------------------------------------------------
   BOUTON THEME
   --------------------------------------------------------- */

html.light-theme .theme-toggle,
body.light-theme .theme-toggle {
    background: #ffffff !important;
    color: #222222 !important;

    border:
        1px solid #cccccc !important;
}


/* =========================================================
   SMARTPHONE / TABLETTE
   ========================================================= */

@media (max-width: 1160px) {


    html.light-theme,
    html.light-theme body,
    body.light-theme {
        background: #f5f5f5 !important;
    }


    /* HEADER */

    html.light-theme header,
    body.light-theme header {
        background: #ffffff !important;
    }


    /* HAMBURGER */

    html.light-theme .hamburger,
    body.light-theme .hamburger {
        background: #eeeeee !important;

        border:
            1px solid #dddddd !important;
    }


    html.light-theme .hamburger span,
    body.light-theme .hamburger span {
        background: #222222 !important;
    }


    /* MENU LATERAL */

    html.light-theme #navMenu,
    body.light-theme #navMenu {
        background: #ffffff !important;

        color: #222222 !important;

        box-shadow:
            -5px 0 20px
            rgba(0, 0, 0, 0.15) !important;
    }


    html.light-theme #navMenu li,
    body.light-theme #navMenu li {
        border-bottom:
            1px solid #e5e5e5 !important;
    }


    html.light-theme #navMenu a,
    html.light-theme #navMenu a.top,
    body.light-theme #navMenu a,
    body.light-theme #navMenu a.top {
        color: #222222 !important;
    }


    /* SOUS-MENU MOBILE */

    html.light-theme #navMenu .panel,
    body.light-theme #navMenu .panel {
        background: #f8f9fa !important;
    }


    html.light-theme #navMenu .panel a,
    body.light-theme #navMenu .panel a {
        color: #333333 !important;
    }


    /* CARTES MOBILE */

    html.light-theme .card,
    html.light-theme .news-card,
    html.light-theme .section,
    body.light-theme .card,
    body.light-theme .news-card,
    body.light-theme .section {
        background: #ffffff !important;
        color: #222222 !important;
    }

}


/* ---------------------------------------------------------
   IMPORTANT : LE HERO CONSERVE SA PHOTO
   --------------------------------------------------------- */

html.light-theme .hero,
body.light-theme .hero {
    color: #ffffff !important;
}


html.light-theme .hero h1,
html.light-theme .hero p,
body.light-theme .hero h1,
body.light-theme .hero p {
    color: #ffffff !important;
}
/* =========================================================
   HERO - THEME CLAIR
   L'image de fond est fournie dynamiquement par index.php
   ========================================================= */

html.light-theme .hero,
body.light-theme .hero {
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

html.light-theme .hero h1,
html.light-theme .hero p,
body.light-theme .hero h1,
body.light-theme .hero p {
    color: #ffffff !important;
}