:root {
    --burger-menu-dimension: 32px;
    --burger-menu-position: 2rem;
    
    --main: #A589E0;
    --accent: #A589E0;
    --accent-2: #8A6CC8;

    --alert-main: #A74755;
    --alert-accent: #CE083A;

    --light-grey: #F3F3F3;
    --light: #FFF;
    --light-dark: #333;
    --dark: #000;
    --transparent: rgba(255, 0, 0, 0);
}
/* COLORS  ------------------------------------------------------------------ */
/* --- background --- */
#actualites img,
#banner,
body,
#agenda ul > li,
body.search-results #primary article {
    background-color: var(--light-grey);
}
#main-content,
.nav-container .menu-lines .line,
.nav-container input[type="checkbox"]:checked ~.menu-navbar-container .menu-items,
.pum-container.popmake,
.credits {
    background-color: var(--light);
}
#primary-menu,
#acces-rapide li,
h3:before,
#agenda ul > li date {
    background-color: var(--main);
}
.sub-menu,
.edit-link,
#demarches li,
.site-info-top,
.site-info-bottom,
.socials > div {
    background-color: var(--accent);
}
.header-background {
    background-color: var(--accent-2);
}
#actualites ul > li:hover {
    background-color: #C3C3C3;
    transition: all .3s ease-in-out;
}
#actualites ul > li {
    transition: all .3s ease-in-out;
    background-color: #999;
}
#alert-banner {
    background-color: var(--alert-main);
}
@media screen and (min-device-width: 1024px) {
    .sub-menu > .menu-item-has-children > .sub-menu {
        background-color: var(--accent-2);
    }
    .wp-block-separator {
        background-color: grey;
    }
}
@media screen and (min-device-width: 501px) and (max-device-width: 1024px) {
    #banner {
        background-color: var(--accent);
    }
    #demarches li {
        background-color: transparent;
    }
    ul.sub-menu {
        background-color: var(--main);
    }
}
@media screen and (max-device-width: 501px) {
    ul.sub-menu {
        background-color: var(--main);
    }
}
/* --- color --- */
.site-title,
.site-title:visited,
.site-info-top,
.site-info-bottom a,
.demarches a,
.demarches a:visited,
#agenda date,
#actualites a,
#actualites a:visited,
#alert-banner *,
#demarches a,
#primary-menu > li > a,
.sub-menu > li > a,
#acces-rapide ul > li > a {
    color: var(--light);
}

.post-edit-link,
.post-edit-link:visited,
#agenda a,
#agenda a:visited {
    color: var(--dark);
}
/* .sub-menu > li > a:hover,
#acces-rapide ul > li > a:hover,
#demarches > a:hover {
    color: var(--light-dark);
} */
svg.divider--wavy > path,
.wsp-post > a:visited,
.wsp-category-title > a:visited,
.page_item > a:visited  {
    color: var(--main);
}
/* --- border --- */