:root {
    --base-spacer: 16px;
    --site-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.25);
    --site-box-shadow-light: 0 0 3px 0px rgba(0, 0, 0, 0.25);
    --container-px: calc(var(--base-spacer) * 1.5);
    --chart-pink: #FFC9E8;
    --chart-gray: #949499;
    --chart-gray-50: #cfd0d2;
    --chart-gray-25: #e7e8e9;
}

/* Overwrite Bootstrap default horizontal padding */
.container {
    padding-right: var(--container-px);
    padding-left: var(--container-px);
}

.h-fit {
    height: fit-content;
}

.w-fit {
    width: fit-content;
}
.w-60 {
    width: 60%;
}
.w-40 {
    width: 40%;
}
.w-1x {
    width: var(--base-spacer);
}
.w-1-25x {
    width: calc(var(--base-spacer) * 1.25);
}
.w-1-5x {
    width: calc(var(--base-spacer) * 1.5);
}
.w-2x {
    width: calc(var(--base-spacer) * 2);
}

.mt-6 {
    margin-top: 6rem;
}
.mb-6 {
    margin-bottom: 6rem;
}
.ms-6 {
    margin-left: 6rem;
}

.pt-6 {
    padding-top: 6rem;
}
.pb-6 {
    padding-bottom: 6rem;
}

.fs-7 {
    font-size: 0.75rem;
}

.text-uppercase {
    text-transform: uppercase;
}

.bg-chart-pink {
    background-color: var(--chart-pink);
}
.bg-chart-gray-100 {
    background-color: var(--chart-gray);
}
.bg-chart-gray-50 {
    background-color: var(--chart-gray-50);
}
.bg-chart-gray-25 {
    background-color: var(--chart-gray-25);
}
.bg-size-cover {
    background-size: cover;
}

.text-chart-pink {
    color: var(--chart-pink);
}
.text-chart-gray {
    color: var(--chart-gray);
}

.border-chart-gray-100 {
    border-color: var(--chart-gray) !important;
}

.box-shadow-light {
    box-shadow: var(--site-box-shadow-light);
}
.box-shadow-base {
    box-shadow: var(--site-box-shadow);
}

.page-header {
    height: 250px;
    background-size: 100%;
    background-position: center top;
    background-repeat: no-repeat;
}

.post-type-archive .page-header {
    background-position: center bottom;
    height: 550px;   
}

.page-header-title {
    font-weight: bold;
    font-size: 2.5rem;
}

@media (min-width: 768px) {
    .page-header {
        height: 450px;
    }
    .page-header-title  {
      font-size: 5rem;
    }
  }
@media (min-width: 1200px) {
    .page-header {
        height: 570px;
    }
  }

.ruler-base {
    height: 3px;
    width: calc(75% + var(--container-px));
    background-color: var(--chart-pink);
}
.ruler-bold {
    height: 6px;
    width: calc(75% + var(--container-px));
    background-color: var(--chart-pink);
}
@media (min-width: 768px) {
    .-ms-base {
        margin-left: calc(var(--container-px) * -1);
    }
    .-mx-base {
        margin-left: calc(var(--container-px) * -1);
        margin-right: calc(var(--container-px) * -1);
    }
}
.socials-card-ruler {
    height: 2px;
    width: 75%;
    background-color: var(--chart-pink);
}

.theme-filter-badge {
    padding: 0.5rem 1rem;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    box-shadow: var(--site-box-shadow-light);
    border-radius: 2rem;
}
.theme-filter-badge img {
    filter: grayscale(100%);
}
.theme-filter-badge label {
    cursor: pointer;
}
.theme-filter-badge.active {
    background-color: var(--chart-pink);
}
.theme-filter-badge:hover img {
    transition: 0.5s;
}
.theme-filter-badge.active img,
.theme-filter-badge:hover img {
    filter: none;
}

/* Ligne graphique type soulignement sous titre */

.block-border-title {
    width: 70px;
    height: 4px;
    position: relative;
    animation-name: example;
    animation-timing-function: ease-in-out;
    animation-duration: 0.5s;
}

@keyframes example {
    0% {
        width: 0px;
        background-color: #5264bb;
        left: -60px;
        top: 0px;
    }
    100% {
        width: 70px;
        background-color: #5264bb;
        left: 0px;
        top: 0px;
    }
}


/*  ligne de couleur */

.bg-green {
    background-color: #5264bb;
}


/* Couleur de ligne  campagne*/

.bg-bleuv1 {
    background-color: #2f3e8b;
}

.bg-light {
    padding-bottom: 0;
}


/* NAV */


/* reset bogue padding */

.nav-item {
    padding: 0;
}


/* Lien actif menu nav */



/* Hover NAV inactif Soulignement Rubrique*/




/* Effet soulignement HOVER https://codepen.io/martinwolf/pen/eNNdme/ */


/* DropDown Box*/

#navbarDropdown .menu-item {
    /* Reset padding */
    padding-left: 0px;
}

.menu-item a {
    color: black;
}

.dropdown-menu .nav-item {
    color: black;
}

.dropdown-menu .active {
    color: white !important;
}

.dropdown-menu .active>a {
    background-color: #5264bb;
    color: white !important;
}


/* Sous-Menu Dropdown : Survol Hover & Lien Active */

.dropdown-menu .nav-item a:hover,
.dropdown-item .active>a {
    /* background-color: #5264bb; */
    color: #5264bb;
}


/* https://jsfiddle.net/ThinkingStiff/dWHzF/*/


/* Ligne animée en hover : donne la cicle */

.animateLine:hover::after {
    width: 100%;
}

.animateLine::after {
    position: relative;
    content: '';
    display: block;
    width: 0;
    height: 4px;
    background: #5264bb;
    -webkit-transition: width .3s;
    transition: width .3s;
}


/* Source de survol -> cible */

.titleCardCampaign:hover~.animateLine {}


/* corriger hauteur de Div */

.divSetHeight {
    min-height: 0px;
}

.valeur1 {
    min-height: 110px;
    /* carte présentation */
}

.valeur2 {
    min-height: 90px;
    /* carte présentation */
}

.valeur3 {
    min-height: 300px;
    /* carte présentation */
}