:root {
    --color-dark-red:#9F221C;
    --color-green:#056839;
    --color-beige:#efe8e1;
    --color-dark-beige:#d4d0c1;
    --color-orange-rgb:249, 165, 27;
    --color-rose-rgb:243, 147, 115;
    --color-marron-rgb:131,  63, 29;
    --color-bleu-rgb:0, 99, 144;
    --color-vert-rgb:117, 161, 55;
    --color-violet-rgb:206, 31, 89;
}

body {
    background-image: url(/00DATA/themes/assets/background-planche.png);
    background-attachment:scroll;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: var(--color-beige);
}

.mix-blend-multiply {
    mix-blend-mode:multiply;
}


/* -------------- thematiques ------------------ */
.article img {
    max-width: 100% !important;
}

.thematique.theme_orange .bg {
    background: rgba(var(--color-orange-rgb),var(--bs-bg-opacity));
}

.thematique.theme_orange .bordered {
    border-bottom: 1rem solid rgb(var(--color-orange-rgb));
}

.thematique.theme_orange:hover .bg,.thematique.theme_orange.active .bg {
    background: rgba(var(--color-orange-rgb),1);
}

.thematique.theme_rose .bg {
    background: rgba(var(--color-rose-rgb),var(--bs-bg-opacity));
}

.thematique.theme_rose .bordered {
    border-bottom: 1rem solid rgb(var(--color-rose-rgb));
}

.thematique.theme_rose:hover .bg,.thematique.theme_rose.active .bg {
    background: rgba(var(--color-rose-rgb),1);
}

.thematique.theme_marron .bg {
    background: rgba(var(--color-marron-rgb),var(--bs-bg-opacity));
}

.thematique.theme_marron .bordered {
    border-bottom: 1rem solid rgb(var(--color-marron-rgb));
}

.thematique.theme_marron:hover .bg,.thematique.theme_marron.active .bg {
    background: rgba(var(--color-marron-rgb),1);
}

.thematique.theme_bleu .bg {
    background: rgba(var(--color-bleu-rgb),var(--bs-bg-opacity));
}

.thematique.theme_bleu .bordered {
    border-bottom: 1rem solid rgb(var(--color-bleu-rgb));
}

.thematique.theme_bleu:hover .bg,.thematique.theme_bleu.active .bg {
    background: rgba(var(--color-bleu-rgb),1);
}

.thematique.theme_vert .bg {
    background: rgba(var(--color-vert-rgb),var(--bs-bg-opacity));
}

.thematique.theme_vert .bordered {
    border-bottom: 1rem solid rgb(var(--color-vert-rgb));
}

.thematique.theme_vert:hover .bg,.thematique.theme_vert.active .bg {
    background: rgba(var(--color-vert-rgb),1);
}

.thematique.theme_violet .bg {
    background: rgba(var(--color-violet-rgb),var(--bs-bg-opacity));
}

.thematique.theme_violet .bordered {
    border-bottom: 1rem solid rgb(var(--color-violet-rgb));
}

.thematique.theme_violet:hover .bg,.thematique.theme_violet.active .bg {
    background: rgba(var(--color-violet-rgb),1);
}

.bg-beige {
    background-color: var(--color-beige);
}

.bg-dark-beige {
    background-color: var(--color-dark-beige);
}

.bg-red {
    background-color: var(--color-dark-red);
}

.border-red {
    border-color: var(--color-dark-red);
}


/* -------------- transitions ------------------ */
.anime-opacity {-webkit-transition: opacity 0.2s ease-in-out;-moz-transition: opacity 0.2s ease-in-out;-o-transition: opacity 0.2s ease-in-out;transition:opacity 0.2s ease-in-out}
.anime-height {-webkit-transition: height 0.2s ease-in-out;-moz-transition: height 0.2s ease-in-out;-o-transition: height 0.2s ease-in-out;transition:height 0.2s ease-in-out}
.anime-background {-webkit-transition: background 0.2s ease-in-out;-moz-transition: background 0.2s ease-in-out;-o-transition: background 0.2s ease-in-out;transition:background 0.2s ease-in-out}
.anime-transform {-webkit-transition: transform 0.2s ease-in-out;-moz-transition: transform 0.2s ease-in-out;-o-transition: transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out}
.anime-color {-webkit-transition: color 0.2s ease-in-out;-moz-transition: color 0.2s ease-in-out;-o-transition: color 0.2s ease-in-out;transition:color 0.2s ease-in-out}

.anime-border {
    -webkit-transition: border-color 0.2s ease-in-out;
    -moz-transition: border-color 0.2s ease-in-out;
    -o-transition: border-color 0.2s ease-in-out;
    transition: border-color 0.2s ease-in-out
}

.anime-all {
    -webkit-transition: all 0.2s ease-in-out !important;
    -moz-transition: all 0.2s ease-in-out !important;
    -o-transition: all 0.2s ease-in-out !important;
    transition: all 0.2s ease-in-out !important
}
.fadein { -webkit-animation: fadein 500ms;-moz-animation: fadein 500ms;-ms-animation: fadein 500ms;-o-animation: fadein 500ms;animation: fadein 500ms}

.scroll-smooth {
    scroll-behavior: smooth;
}

.top-5rem {
    top: 5rem;
}

.top-6rem {
    top: 6rem;
}

.w-3rem {
    width: 3rem;
}

.w-4rem {
    width: 4rem;
}

.w-5rem {
    width: 5rem;
}

.w-6rem {
    width: 6rem;
}

.w-30rem {
    width: 30rem;
}

.btn-apb-red {
    color: #FFFFFF;
    background-color: var(--color-dark-red);
    border: 2px solid var(--color-dark-red);
}
.btn-apb-red:hover {
    background: var(--bs-white);
    color: var(--color-dark-red);
    border: 2px solid var(--color-dark-red);
}

.btn-apb-outline-red {
    color: var(--color-dark-red);
    background-color: var(--bs-white);
    border: 2px solid var(--color-dark-red);
}
.btn-apb-outline-red:hover, .btn-apb-outline-red.show {
    background: var(--color-dark-red) !important;
    color: var(--bs-white) !important;
    border: 2px solid var(--color-dark-red) !important;
}


.link-dark-red {
    color: var(--color-dark-red);
    text-decoration: none!important;
    border-bottom: 2px solid transparent;
}

.link-dark-red:hover {
    color: var(--color-dark-red);
    border-bottom: 2px solid var(--color-dark-red);
}

.text-vert {
    color: var(--color-green);
}

.text-dark-red {
    color: var(--color-dark-red);
}

.z-1015 {
    z-index: 1015 !important;
}

.z-1025 {
    z-index: 1025 !important;
}
.z-1030 {
    z-index: 1030 !important;
}
.z-1035 {
    z-index: 1035 !important;
}

.z-1040 {
    z-index: 1040 !important;
}
.z-1045 {
    z-index: 1045 !important;
}

.z-1050 {
    z-index: 1050 !important;
}

.z-2000 {
    z-index: 2000 !important;
}

.fw-semi {font-weight: 600}
.xsmall {font-size: 0.75em}
.fs-big {font-size: 2rem;}

.py-7 {padding-top: 7rem !important;padding-bottom: 7rem !important;}
.pt-7 {padding-top: 7rem}
.mt-6 {
    margin-top: 5rem !important;
}

@media (min-width: 992px) {

    .ratio-lg {
        position: relative;
        width: 100%;
    }
    .ratio-lg::before {
        display: block;
        padding-top: var(--bs-aspect-ratio);
        content: "";
    }
    .ratio-lg > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .fs-big {
        font-size: 4rem;
    }


    .me-lg-6 {
        margin-right: rem !important;
    }
    .ms-lg-6 {
        margin-left: 5rem !important;
    }
    .mb-lg-6 {
        margin-bottom: 5rem !important;
    }
    .mt-lg-6 {
        margin-top: 5rem !important;
    }
    .my-lg-6 {
        margin-top: 5rem !important;
        margin-bottom: 5rem !important;
    }

    .pe-lg-6 {
        padding-right: rem !important;
    }
    .ps-lg-6 {
        padding-left: 5rem !important;
    }
    .pb-lg-6 {
        padding-bottom: 5rem !important;
    }
    .pt-lg-6 {
        padding-top: 5rem !important;
    }
    .py-lg-6 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .p-lg-10 {
        padding-left: 10rem !important;
        padding-right: 10rem !important;
        padding-top: 10rem !important;
        padding-bottom: 10rem !important;
    }

    .pe-lg-10 {
        padding-right: 10rem !important;
    }
    .ps-lg-10 {
        padding-left: 10rem !important;
    }
    .pb-lg-10 {
        padding-bottom: 10rem !important;
    }
    .pt-lg-10 {
        padding-top: 10rem !important;
    }
    .py-lg-10 {
        padding-top: 10rem !important;
        padding-bottom: 10rem !important;
    }
    .px-lg-10 {
        padding-left: 10rem !important;
        padding-right: 10rem !important;

    }

    .p-lg-7 {
        padding-left: 7rem !important;
        padding-right: 7rem !important;
        padding-top: 7rem !important;
        padding-bottom: 7rem !important;
    }

    .pe-lg-7 {
        padding-right: 7rem !important;
    }
    .ps-lg-7 {
        padding-left: 7rem !important;
    }
    .pb-lg-7 {
        padding-bottom: 7rem !important;
    }
    .pt-lg-7 {
        padding-top: 7rem !important;
    }
    .py-lg-7 {
        padding-top: 7rem !important;
        padding-bottom: 7rem !important;
    }
    .px-lg-7 {
        padding-left: 7rem !important;
        padding-right: 7rem !important;
    }
}

@media (min-width: 1200px) {

    .ratio-xl {
        position: relative;
        width: 100%;
    }
    .ratio-xl::before {
        display: block;
        padding-top: var(--bs-aspect-ratio);
        content: "";
    }
    .ratio-xl > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .me-xl-6 {
        margin-right: rem !important;
    }
    .ms-xl-6 {
        margin-left: 5rem !important;
    }
    .mb-xl-6 {
        margin-bottom: 5rem !important;
    }
    .mt-xl-6 {
        margin-top: 5rem !important;
    }
    .my-xl-6 {
        margin-top: 5rem !important;
        margin-bottom: 5rem !important;
    }

    .pe-xl-6 {
        padding-right: rem !important;
    }
    .ps-xl-6 {
        padding-left: 5rem !important;
    }
    .pb-xl-6 {
        padding-bottom: 5rem !important;
    }
    .pt-xl-6 {
        padding-top: 5rem !important;
    }
    .py-xl-6 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .p-xl-10 {
        padding-left: 10rem !important;
        padding-right: 10rem !important;
        padding-top: 10rem !important;
        padding-bottom: 10rem !important;
    }

    .pe-xl-10 {
        padding-right: 10rem !important;
    }
    .ps-xl-10 {
        padding-left: 10rem !important;
    }
    .pb-xl-10 {
        padding-bottom: 10rem !important;
    }
    .pt-xl-10 {
        padding-top: 10rem !important;
    }
    .py-xl-10 {
        padding-top: 10rem !important;
        padding-bottom: 10rem !important;
    }
    .px-xl-10 {
        padding-left: 10rem !important;
        padding-right: 10rem !important;

    }

    .p-xl-7 {
        padding-left: 7rem !important;
        padding-right: 7rem !important;
        padding-top: 7rem !important;
        padding-bottom: 7rem !important;
    }

    .pe-xl-7 {
        padding-right: 7rem !important;
    }
    .ps-xl-7 {
        padding-left: 7rem !important;
    }
    .pb-xl-7 {
        padding-bottom: 7rem !important;
    }
    .pt-xl-7 {
        padding-top: 7rem !important;
    }
    .py-xl-7 {
        padding-top: 7rem !important;
        padding-bottom: 7rem !important;
    }
    .px-xl-7 {
        padding-left: 7rem !important;
        padding-right: 7rem !important;
    }
}