/*******************************************************
FONTS
********************************************************/

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

/*******************************************************
COLOR
********************************************************/

.white {
    color: white !important;
}

.bleu {
    color: #0C4DA2 !important;
}

.jaune {
    color: #FDB813 !important;
}

.vert {
    color: #96BE28 !important;
}


.vert {
    color: #96BE28 !important;
}

.bleuClair {
    background-color: #DFE5F1 !important;
}

.bg-bleu {
    background-color: #0C4DA2 !important;
}

.bg-jaune {
    background-color: #FDB813 !important;
}

.bg-vert {
    background-color: #96BE28 !important;
}

.bg-ivoire {
    background-color: #F8F8F2 !important;
}

.bg-white {
    background-color: white;
}



/*******************************************************
GENERAL
********************************************************/


body {
    font-weight: 400;
    color: #222222;
    font-size: 16px;
    line-height: 24px;
    font-family: 'Fira Sans' !important;
}

p, li, label, td {
    font-weight: 400;
    line-height: 1.5;
    font-size: 16px;
}


#back-to-top {
    position: fixed;
    bottom: 7px;
    right: 7px;
    display: none;
    z-index: 200;
    text-align: center;
}

    #back-to-top .far {
        background-color: #0C4DA2;
        color: white;
        width: 40px;
        height: 40px;
        font-size: 18px;
        line-height: 40px;
        border: 1px solid white;
        border-radius: 100%;
    }

.container-fluid > .row,
.container-fluid > div > .row {
    padding: 0;
}

.max-width {
    max-width: 1400px;
    margin: 0 auto;
}

img {
    max-width: 100%;
}

.agenda .container-img[style*="default.svg"] {
    border: 5px solid #DFE5F1;
}

.recette .container-img[style*="default.svg"] {
    border: 5px solid #F8F8F2;
}

.home-actualite .container-img[style*="default.svg"] {
    border: 5px solid white !important;
}

    .home-actualite .container-img[style*="default.svg"] + .info:before {
        border-top: 5px solid #dfe5f1 !important;
    }

.actualite .container-img[style*="default.svg"] {
    border: 5px solid #F8F8F2;
}

footer {
    clear: both;
}

a {
    display: inline-block;
    color: #0C4DA2;
    font-weight: 500;
}


    a:hover,
    a:active,
    a:focus,
    button:hover,
    button:active,
    button:focus {
        text-decoration: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    a:hover,
    a:active,
    a:focus {
        color: #86A6D1;
    }

.anchor {
    visibility: hidden;
    height: 255px;
    margin-top: -255px;
}

/*.bg-perso {
    display: none !important;
}*/

@media(max-width:991px) {
    .anchor {
        visibility: hidden;
        height: 178px;
        margin-top: -178px;
    }
}

.bg-perso {
    display: none;
}

strong {
    font-weight: 700;
}


/*******************************************************
TITLE
********************************************************/

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    margin-top: 0;
    font-family: 'Fira Sans';
}

    h1,
    h2.home {
        font-family: Anton;
        font-size: 45px;
        margin: 0;
    }

        h1.page span.fond,
        h2.home span.fond,
        h2.detail span.fond,
        h2.pres span.fond {
            display: inline-block;
            background: url(/docs/templates/41/pinceau-bleu-title.svg);
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center;
            color: white;
            padding: 7px 25px;
        }

@media(max-width:992px) {
    h1,
    h2.home {
        font-size: 38px;
    }

        h1.page span.fond,
        h2.home span.fond,
        h2.detail span.fond,
        h2.pres span.fond {
            padding: 7px 12px;
        }
}

h2.detail span.fond,
h2.pres span.fond {
    padding: 7px 15px;
}

h1.page span:not(.fond),
h2.home span:not(.fond),
h2.detail span:not(.fond),
h2.pres span:not(.fond) {
    color: #86A6D1;
}

h1.detail {
    font-family: Anton;
    font-size: 34px;
    color: #0C4DA2;
    margin-bottom: 20px;
}


h2 {
    font-family: Anton;
    font-size: 26px;
}

    h2.pres {
        font-family: Anton;
        font-size: 34px;
    }


/*******************************************************
BTN
********************************************************/

.btn {
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 16px;
    padding: 0 30px;
    width: fit-content;
    border: none;
    letter-spacing: 0;
    justify-content: center;
    border-radius: 50px;
}

    .btn i {
        font-size: 20px;
        margin-right: 10px;
    }

    .btn img {
        margin-right: 10px;
    }


    .btn:hover,
    .btn:active,
    .btn:focus {
        transition: all 0.3s ease;
    }

    .btn.btn-secondary {
        color: #222222;
        background-color: white;
        box-shadow: inset 0 0 0 5px #DFE5F1;
    }

        .btn.btn-secondary:hover,
        .btn.btn-secondary:active,
        .btn.btn-secondary:focus {
            color: #222222;
            background-color: #DFE5F1;
            box-shadow: inset 0 0 0 5px #DFE5F1;
        }

    .btn.btn-secondary-alt {
        color: #222222;
        background-color: white;
        box-shadow: inset 0 0 0 5px #86A6D1;
    }

        .btn.btn-secondary-alt:hover,
        .btn.btn-secondary-alt:active,
        .btn.btn-secondary-alt:focus {
            color: #222222;
            background-color: white;
            box-shadow: inset 0 0 0 0 #86A6D1;
        }

    .btn.btn-jaune {
        color: #222222;
        background-color: #FDB813;
        box-shadow: inset 0 0 0 5px #FCE197;
    }

        .btn.btn-jaune:hover,
        .btn.btn-jaune:active,
        .btn.btn-jaune:focus {
            color: #222222;
            background-color: #FDB813;
            box-shadow: inset 0 0 0 0 #FCE197;
        }

    .btn.btn-default:before {
        content: "";
        position: absolute;
        height: calc(100% + 2px);
        width: calc(100% + 2px);
        box-shadow: inset 0 0 0 5px #DFE5F1;
        border-radius: 50px;
        left: -1px;
        top: -1px;
        transition: all .3s ease;
    }

    .btn.btn-default:hover:before {
        box-shadow: inset 0 0 0 0px #DFE5F1;
        transition: all .3s ease;
    }

    .btn.btn-default {
        color: white;
        position: relative;
        background-color: #0C4DA2;
        /* box-shadow: inset 0 0 0 5px #DFE5F1;*/
    }

        .btn.btn-default:hover,
        .btn.btn-default:active,
        .btn.btn-default:focus {
            color: white;
            background-color: #0C4DA2;
            /*box-shadow: inset 0 0 0 0 #DFE5F1;*/
        }

.btn-danger.active {
    background-color: #DA0812 !important;
}

.btn-success.active {
    background-color: #96BE28 !important;
}


/*******************************************************
HEADER
********************************************************/

header {
    background-color: #0C4DA2;
    padding-top: 25px;
}

    header.fixed {
        position: fixed;
        width: 100%;
        z-index: 100;
    }

.max-width-header {
    max-width: 1580px;
    margin: 0 auto;
}

header img {
    vertical-align: middle;
}

@media(max-width:991px) {
    header {
        padding: 10px 0;
    }

        header img {
            max-width: 83px;
        }
}

header .title {
    font-size: 34px;
    font-family: Anton;
    color: white;
    line-height: 1;
    margin: 0;
    display: inline-block;
    padding-left: 30px;
    vertical-align: middle;
    border-left: 4px solid #FDB813;
    margin-left: 60px;
}

@media(max-width:991px) {
    header .title {
        margin-left: 0;
        padding-left: 10px;
        font-size: 18px;
    }
}

header .btn-mobile {
    font-size: 18px;
    height: 45px;
    width: 45px;
    border-radius: 100%;
    line-height: 45px;
    text-align: center;
    color: #222222;
    background-color: white;
    box-shadow: inset 0 0 0 3px #DFE5F1;
}

    header .btn-mobile.btn-mobile-yellow {
        color: #222222;
        background-color: #FDB813;
        box-shadow: inset 0 0 0 3px #FCE197;
    }

@media(min-width:992px) {
    header .horaire-today {
        position: relative;
        text-align: right;
        padding-right: 65px;
    }

        header .horaire-today:after {
            content: "";
            position: absolute;
            width: 50px;
            height: 38px;
            background: url(/docs/templates/41/store.svg);
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        header .horaire-today p {
            margin: 0;
        }

        header .horaire-today .horaire {
            font-family: Anton;
            font-size: 18px;
            color: white;
            padding-left: 25px;
            position: relative;
        }

            header .horaire-today .horaire:before {
                content: "";
                position: absolute;
                height: 15px;
                left: 0;
                top: 50%;
                width: 15px;
                border-radius: 100%;
                transform: translateY(-50%);
            }

            header .horaire-today .horaire.open:before {
                background-color: #96BE28;
            }

            header .horaire-today .horaire.closed:before {
                background-color: #DA0812;
            }

        header .horaire-today .today {
            font-size: 16px;
            color: white;
        }
}

@media(max-width:991px) {
    header .horaire-today .today {
        display: none;
    }

    header .horaire-today .horaire {
        margin-bottom: 0;
        color: white;
        font-size: 14px;
        display: inline-block;
        font-weight: 500;
        position: relative;
    }

        header .horaire-today .horaire:before {
            content: "";
            position: absolute;
            height: 8px;
            left: -15px;
            top: 50%;
            width: 8px;
            border-radius: 100%;
            transform: translateY(-50%);
        }

        header .horaire-today .horaire.open:before {
            background-color: #96BE28;
        }

        header .horaire-today .horaire.closed:before {
            background-color: #DA0812;
        }

        header .horaire-today .horaire .fa-regular {
            color: #FDB813;
        }
}


/*@media(min-width:992px) {
    header.fixed {
        position: fixed;
        width: 100%;
        z-index: 100;
        background-color: white;
    }
}*/

header .navbar {
    background-color: #DFE5F1;
    padding: 0;
}

@media(min-width:992px) {
    header .navbar {
        margin-top: 25px;
    }
}

header .navbar-toggler .fa-regular {
    color: white;
    font-size: 25px;
    transform: translateY(-5px);
}

header .dropdown-toggle::after {
    content: none;
}

header .dropdown-toggle::before {
    content: "\f107";
    font-family: 'Font Awesome 6 Pro';
    font-weight: 500;
    color: #0C4DA2;
    position: absolute;
    right: 8px;
    top: 51%;
    transform: translateY(-50%);
    font-size: 12px;
}

header .dropdown-menu {
    margin: 0 !important;
    border: none;
    border-top: 3px solid #86A6D1;
    padding: 10px 20px;
    left: 8px !important;
    border-radius: 0;
}

@media(min-width:992px) {
    header .dropdown-menu {
        background-color: #DFE5F1;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        border-radius: 0 0 10px 10px;
    }
}

header .dropdown-menu a {
    color: #0C4DA2;
}

header .navbar.open-menu {
    left: 0;
    transition: left .3s ease;
}

header .navbar-collapse {
    height: 100%;
}
/*
    header .navbar-collapse.collapse {
        display: block !important;
    }*/


header .nav-link {
    display: block;
    font-size: 16px;
    color: #0C4DA2;
    position: relative;
    padding: 18px 25px !important;
}

header .dropdown-item {
    padding: 8px 15px !important;
    position: relative;
}


    header .dropdown-item:before {
        content: "";
        height: 19px;
        width: 3px;
        position: absolute;
        background-color: #FDB813;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0;
        border: none;
    }

    header .dropdown-item:hover:before {
        opacity: 1;
    }

    header .dropdown-item:hover {
        background-color: transparent;
        color: #222222;
    }

header .nav-link:after {
    content: "";
    height: 19px;
    width: 3px;
    position: absolute;
    background-color: #FDB813;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    border: none;
}

header .nav-link.show:after,
header .nav-link:hover:after {
    opacity: 1;
}

header .nav-link.show {
    color: #222222;
}

    header .nav-link.show:before,
    header .nav-link:hover:before {
        color: #222222;
    }


@media(max-width:991px) {
    header {
        position: relative;
    }

        header .navbar {
            position: fixed;
            width: 80%;
            top: 0;
            z-index: 10;
            padding: 20px 0;
            box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.1);
            height: 100%;
            left: -100%;
            background-color: #DFE5F1;
            transition: left .3s ease;
        }

            header .navbar .far {
                font-size: 25px;
                color: #0C4DA2;
                text-align: right;
                width: 100%;
            }

    .navbar.open-menu {
        left: 0;
        transition: left .3s ease;
    }

    header .navbar {
        align-items: flex-start;
        align-content: flex-start;
    }

    header .navbar-collapse {
        height: auto !important;
    }


        header .navbar-collapse.collapse {
            display: block !important;
        }

    header .nav-link {
        display: inline-block;
        font-size: 16px;
        color: #0C4DA2;
        padding: 10px 20px !important;
    }

    header .dropdown-toggle::before {
        right: 0;
    }
}

.reseau-side {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: -2px;
    display: flex;
    flex-direction: column;
    border-radius: 0 10px 10px 0;
    overflow: hidden;
    border: 2px solid white;
    z-index: 3;
}


    .reseau-side a {
        height: 50px;
        width: 50px;
        background-color: #DFE5F1;
        color: #0C4DA2;
        text-align: center;
        font-size: 20px;
        line-height: 50px;
        transition: all .3s ease;
    }

        .reseau-side a + a {
            border-top: 2px solid white;
        }

        .reseau-side a:hover,
        .reseau-side a:active,
        .reseau-side a:focus {
            background-color: #F8F8F2;
            color: #222222;
            transition: all .3s ease;
        }

@media(max-width:991px) {
    .reseau-side {
        display: none;
    }
}

/*******************************************************
FOOTER
********************************************************/

footer {
    background-color: #0C4DA2;
}

    footer .content {
        padding: 20px 0;
        color: white;
    }

@media(max-width:991px) {
    footer .content {
        text-align: center;
    }
}

footer .newsletter-footer {
    background-color: #DFE5F1;
    position: relative;
    padding-bottom: 35px !important;
}

@media(max-width:1080px) {
    footer .newsletter-footer {
        padding-bottom: 65px !important;
    }
}

footer .newsletter-footer:after {
    content: "";
    position: absolute;
    height: 49px;
    width: 100%;
    bottom: -1px;
    left: 0;
    background: url(/docs/templates/41/herbe.svg);
    background-size: contain;
}

footer .newsletter-footer img {
    width: 100px;
}

footer .newsletter-footer p {
    margin: 0;
}

footer .newsletter-footer .title {
    font-size: 30px;
    font-family: Anton;
    color: #0C4DA2;
}

@media(max-width:767px) {
    footer .newsletter-footer .title {
        font-size: 24px;
    }
}

footer ul {
    margin: 0;
    padding: 0;
}

    footer ul li {
        display: inline-block;
        color: white;
        position: relative;
    }

        footer ul li + li {
            padding-left: 30px;
        }

            footer ul li + li:before {
                content: "";
                position: absolute;
                height: 4px;
                width: 4px;
                background-color: white;
                border-radius: 100%;
                left: 12px;
                top: 50%;
                transform: translateY(-50%);
            }

        footer ul li a {
            color: white;
            text-decoration: none;
        }

@media(max-width:991px) {
    footer ul li a {
        padding: 5px 0;
    }
}

.reseau p {
    font-size: 24px;
    font-family: Anton;
    margin: 0;
    display: inline-block;
}

@media(max-width:767px) {
    .reseau:not(.share) p {
        display: block !important;
        margin: 15px 0;
    }
}

@media(min-width:768px) {
    .reseau p {
        border-left: 4px solid #FDB813;
        padding-left: 35px;
        line-height: 1;
    }
}

.reseau img {
    margin: 0 20px;
}

.reseau p,
.reseau img,
.reseau a {
    vertical-align: middle;
    display: inline-block;
}

.reseau a {
    color: #0C4DA2;
    font-size: 20px;
    position: relative;
    z-index: 1;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background: url(/docs/templates/41/reseau-circle-bleu.svg);
    transition: all .3s ease;
}

    .reseau a:before {
        content: "";
        position: absolute;
        height: 40px;
        width: 40px;
        background-color: #0C4DA2;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        border-radius: 100%;
        z-index: -1;
        opacity: 0;
        transition: all .3s ease;
    }

.reseau.share a:before {
    height: 31px;
    width: 31px;
}

.reseau a:hover:before {
    opacity: 1;
    transition: all .3s ease;
}

.reseau a + a {
    margin-left: 15px;
}

.reseau a:hover,
.reseau a:active,
.reseau a:focus {
    color: white;
    transition: all .3s ease;
}

.reseau.reseau-footer a {
    color: white;
    background: url(/docs/templates/41/reseau-circle-blanc.svg);
}

    .reseau.reseau-footer a:before {
        background-color: white;
    }

    .reseau.reseau-footer a:hover,
    .reseau.reseau-footer a:active,
    .reseau.reseau-footer a:focus {
        color: #0C4DA2;
        transition: all .3s ease;
    }

.reseau.reseau-footer p {
    color: white;
}

footer h2 {
    font-size: 28px;
    font-family: Anton;
    padding-left: 15px;
    border-left: 4px solid #FDB813;
    line-height: 1;
}

@media(max-width:991px) {
    footer h2 {
        display: inline-block;
    }
}

footer .info-centre-footer {
    margin-top: 30px;
}

footer .score {
    margin-top: 0;
    line-height: 1.2;
}

    footer .score span {
        display: inline-block;
        vertical-align: middle;
    }

    footer .score .nb {
        font-size: 25px;
        color: #FDB813;
        font-weight: 700;
    }

    footer .score .nb-avis {
        font-size: 14px;
    }

footer .chalandise {
    font-size: 14px;
}

footer .copyright {
    display: none;
}

footer .copyright-footer {
    border-top: 1px solid white;
    padding: 5px 0;
}

/*******************************************************
HOME
********************************************************/

#homeCarousel .carousel-inner {
    border: 1px solid #DFE5F1;
}

#homeCarousel li::marker {
    content: none;
}

#homeCarousel .carousel-indicators li {
    height: 20px;
    width: 20px;
    opacity: 1;
    border-radius: 100%;
    background-color: #86A6D1;
    border: none;
}

    #homeCarousel .carousel-indicators li.active {
        background-color: #0C4DA2;
    }

.fiche-magasin {
    padding: 40px 0;
}

    .fiche-magasin .content {
        text-align: center;
        position: relative;
        color: white;
        padding: 30px 50px 60px 50px;
    }

@media(min-width:992px) {
    .fiche-magasin .content {
        width: 390px;
    }
}

.fiche-magasin .content:after,
.fiche-magasin .content:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
}

.fiche-magasin .content:after {
    background: url(/docs/pages/28/fond-pinceau-magasin2.svg);
    height: 100%;
    width: 105%;
}

@media(max-width:767px) {
    .fiche-magasin .content:after {
        width: 100%;
    }
}

.fiche-magasin .content:before {
    background: url(/docs/pages/28/fond-pinceau-magasin1.svg);
    height: 100%;
    width: 100%;
}

.fiche-magasin .content h1.home {
    font-size: 50px;
    position: relative;
    text-transform: uppercase;
}

    .fiche-magasin .content h1.home span {
        color: #0C4DA2;
        background-color: #FDB813;
        transform: rotate(-5deg) translateY(-25px);
        font-size: 30px;
        display: inline-block;
        padding: 2px 5px;
    }


.fiche-magasin .content .score {
    margin-top: 0;
}

    .fiche-magasin .content .score .nb {
        font-size: 26px;
        font-weight: 900;
        color: #FDB813;
    }

    .fiche-magasin .content .score .nb-avis {
        font-size: 14px;
        display: block;
    }

.fiche-magasin .content .horaires-day .horaire,
.fiche-magasin .content .horaire-today .today {
    display: none;
}

.fiche-magasin .content .horaires-day p,
.fiche-magasin .content .horaire-today p {
    font-family: Anton;
    margin: 0;
    font-size: 18px;
}

.fiche-magasin .content .horaire-today p {
    position: relative;
    display: inline-block;
}

    .fiche-magasin .content .horaire-today p:before {
        content: "";
        position: absolute;
        height: 15px;
        left: -25px;
        top: 50%;
        width: 15px;
        border-radius: 100%;
        transform: translateY(-50%);
    }

    .fiche-magasin .content .horaire-today p.open:before {
        background-color: #96BE28;
    }

.fiche-magasin .content .adresse {
    margin: 30px 0;
}

.fiche-magasin .content img {
    position: absolute;
    bottom: 8%;
    left: 15%;
}

.intro-magasin {
    background-color: #F8F8F2;
    padding: 100px 0 50px;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 0;
}

    .intro-magasin:before {
        content: "";
        position: absolute;
        height: 190px;
        width: 120%;
        z-index: -1;
        left: 50%;
        top: -143px;
        transform: translateX(-50%);
        background-color: white;
        border-radius: 100%;
    }

@media(max-width:991px) {
    .intro-magasin:before {
        width: 160%;
    }
}

.intro-magasin h2.intro {
    font-size: 30px;
    font-family: Anton;
    position: relative;
    display: inline-block;
    margin-bottom: 50px;
    text-align: start;
    padding-left: 255px;
}

    .intro-magasin h2.intro span:not(.side) {
        font-size: 44px;
        color: #0C4DA2;
        text-transform: uppercase;
        display: block;
    }

    .intro-magasin h2.intro .side {
        position: absolute;
        font-size: 56px;
        color: white;
        text-transform: uppercase;
        display: inline-block;
        transform: rotate(-5deg);
        background-color: #0C4DA2;
        padding: 2px 5px;
        top: 15px;
        left: 0;
    }

@media(max-width:991px) {
    .intro-magasin h2.intro {
        display: block;
        padding-left: 0;
        padding-top: 100px;
    }

        .intro-magasin h2.intro span:not(.side) {
            font-size: 36px;
        }

        .intro-magasin h2.intro .side {
            font-size: 50px;
        }
}

.home-avis-client {
    padding: 80px 0;
    background-color: #F8F8F2;
}

@media(max-width:991px) {
    .home-avis-client {
        padding: 50px 0;
    }
}


.home-avis-client .score {
    margin-top: 0;
}

    .home-avis-client .score .nb {
        font-size: 48px;
        color: #FDB813;
        font-weight: 700;
    }

    .home-avis-client .score .total {
        font-size: 14px;
    }

.avis {
    background-color: white;
    padding: 30px;
    height: 100%;
    border-radius: 5px;
}


    .avis .name {
        font-weight: 700;
        display: inline-block;
        margin: 0 5px 0 0;
        position: relative;
        margin-bottom: 10px;
        padding-left: 60px;
    }

        .avis .name img {
            position: absolute;
            left: 0;
            max-width: 50px;
        }

        .avis .name span {
            font-weight: 300;
            display: block;
        }

    .avis .star {
        display: inline-block;
        vertical-align: top;
        line-height: 1.4;
        margin: 0;
        float: right;
    }

        .avis .star .fas {
            font-size: 13px;
            color: #ffc100;
        }

    .avis .aspect {
        margin-bottom: 20px;
    }

        .avis .aspect span {
            font-weight: 700;
        }


/*******************************************************
FORM
********************************************************/
.filtre .form-select {
    font-size: 18px;
    padding: 10px 45px 10px 15px;
    border: 5px solid #DFE5F1;
    border-radius: 5px;
    --bs-form-select-bg-img: url(data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%227%22%20viewBox%3D%220%200%2013%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5.81641%206.43359L1.31641%201.93359C1%201.61719%200.894531%201.125%201.07031%200.703125C1.24609%200.28125%201.66797%200%202.125%200H11.125C11.582%200%2011.9688%200.28125%2012.1445%200.703125C12.3203%201.125%2012.2148%201.61719%2011.8984%201.93359L7.39844%206.43359C6.97656%206.89062%206.23828%206.89062%205.81641%206.43359Z%22%20fill%3D%22%2386A6D1%22%2F%3E%3C%2Fsvg%3E);
    position: relative;
}


    .filtre .form-select:active,
    .filtre .form-select:focus {
        outline: none !important;
        border: 5px solid #DFE5F1;
        box-shadow: none !important;
    }

.filtre p {
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

    .filtre p + i {
        height: 52px;
        width: 52px;
        line-height: 52px;
        font-size: 22px;
        text-align: center;
        color: #0C4DA2;
        vertical-align: middle;
        background-color: #DFE5F1;
        border-radius: 5px;
        margin-left: 15px;
    }

/*******************************************************
MODULE GENERIQUE
********************************************************/

.fil-ariane {
    margin: 0;
    padding: 30px 0;
}

    .fil-ariane li {
        display: inline-block;
        color: #0C4DA2;
    }

        .fil-ariane li a {
            font-weight: 400 !important;
        }

        .fil-ariane li + li {
            margin-left: 45px;
            position: relative;
        }

            .fil-ariane li + li:before {
                content: "\f105";
                font-family: 'Font Awesome 6 Pro';
                position: absolute;
                font-weight: 400;
                color: #0C4DA2;
                left: -28px;
                top: 50%;
                transform: translateY(-50%);
            }

        .fil-ariane li a {
            color: #0C4DA2;
            text-decoration: none;
        }

        .fil-ariane li:last-child a {
            font-weight: 500 !important;
        }

.module-total {
    font-size: 23px;
    font-family: Anton;
    color: #0C4DA2;
}

.filtre {
    margin-top: 50px;
}

.liste-page {
    padding: 50px 0;
}

.lien-detail {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1;
    padding: 3px 10px;
    position: relative;
    text-decoration: none;
    z-index: 0;
    transition: all .3s ease;
}

    .lien-detail:hover {
        color: #222222;
        transition: all .3s ease;
    }

    .lien-detail:before {
        content: "";
        position: absolute;
        z-index: -1;
        height: 100%;
        width: 3px;
        left: 0;
        top: 0;
        background-color: #FDB813;
        transition: all .3s ease;
    }

    .lien-detail:hover:before {
        width: 100%;
        transition: all .3s ease;
    }


.share p {
    border-left: 3px solid #FDB813;
    padding-left: 20px;
    font-size: 18px !important;
    font-weight: 700;
    color: #0C4DA2 !important;
    font-family: 'Fira Sans' !important;
    line-height: 1;
    color: white;
    font-size: 24px;
    margin: 0;
    display: inline-block;
}


.share a {
    height: 40px;
    width: 40px;
    line-height: 40px;
    font-size: 16px;
}

    .share a + a {
        margin-left: 7px;
    }

.detail-page {
    margin: 20px 0 50px;
}

    .detail-page .date {
        margin-top: 0;
        font-family: Anton;
    }

    .detail-page img:not(.no-border) {
        border-radius: 5px;
        border: 10px solid #DFE5F1;
        max-height: 800px;
    }

    .detail-page .presentation {
        margin-top: 40px;
    }

@media(max-width:991px) {
    .detail-page .presentation {
        margin-top: 20px;
    }
}

.detail-page .telechargement {
    font-family: Anton;
    font-size: 26px;
    color: #0C4DA2;
    margin-top: 48px;
    text-decoration: none;
}

    .detail-page .telechargement img {
        padding: 0 20px;
    }

@media(max-width:991px) {
    .detail-page .telechargement {
        font-size: 18px;
    }

        .detail-page .telechargement img {
            width: 100px;
        }
}

.badge {
    padding: 4px 10px;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 500;
    margin-right: 20px;
}

    .badge.bleu {
        background-color: #DFE5F1;
        color: #0C4DA2;
    }

    .badge.jaune {
        background-color: #FCE197;
        color: #222222 !important;
    }

    .badge.blanc {
        background-color: white;
        color: #0C4DA2 !important;
    }

/*******************************************************
PAGER
********************************************************/

.pagination-container {
    margin-bottom: 50px;
}

.pagination {
    justify-content: center;
}

    .pagination .page-item .page-link {
        height: 46px;
        width: 46px;
        box-shadow: inset 0 0 0 2px #86A6D1;
        line-height: 46px;
        text-align: center;
        color: #86A6D1;
        font-size: 20px;
        border: none;
        margin: 0 3px;
        padding: 0;
        border-radius: 100%;
    }

    .pagination .page-item.active .page-link,
    .pagination .page-item:hover .page-link {
        color: white;
        background-color: #86A6D1;
        box-shadow: inset 0 0 0 2px #86A6D1;
        transition: all 0.3s ease;
    }

    .pagination .page-item.disabled .page-link {
        color: #86A6D1;
        background-color: #DFE5F1;
        box-shadow: inset 0 0 0 2px #DFE5F1;
    }

/*******************************************************
ACTUALITES
********************************************************/


.actualite .content {
    background-color: #F8F8F2;
    overflow: hidden;
    border-radius: 5px;
    height: 100%;
    position: relative;
}


    .actualite .content .container-img {
        aspect-ratio: 12 / 7;
        background-position: center;
        background-size: cover !important;
    }

    .actualite .content .info {
        padding: 15px 30px 120px 30px;
        position: relative;
        z-index: 0;
    }

        .actualite .content .info:before {
            content: "";
            position: absolute;
            height: 90px;
            width: 120%;
            z-index: -1;
            left: 50%;
            top: -30px;
            transform: translateX(-50%);
            background-color: #F8F8F2;
            border-radius: 100%;
        }

        .actualite .content .info p {
            font-family: Anton;
            font-size: 16px;
            margin: 0;
        }

        .actualite .content .info h2 {
            font-family: Anton;
            font-size: 24px;
            color: #0C4DA2;
            margin-bottom: 30px;
        }

    .actualite .content .lien-detail {
        position: absolute;
        bottom: 30px;
        right: 30px;
    }

.home-actualite {
    background-color: #DFE5F1;
    padding: 80px 0;
}

@media(max-width:991px) {
    .home-actualite {
        background-color: #DFE5F1;
        padding: 50px 15px;
    }
}


.home-actualite .aside-actualite {
    background-color: white;
    border-radius: 5px;
    height: 100%;
    padding: 50px;
    position: relative;
}

@media(max-width:767px) {
    .home-actualite .aside-actualite {
        padding: 35px;
    }
}

.home-actualite .aside-actualite p {
    color: #0C4DA2;
}

.home-actualite .aside-actualite .top-corner {
    position: absolute;
    top: -20px;
    left: -20px;
}

.home-actualite .aside-actualite .bottom-corner {
    position: absolute;
    bottom: -20px;
    right: -20px;
    transform: rotate(180deg);
}

.home-actualite .aside-actualite p span {
    display: block;
    font-weight: 700;
    font-size: 20px;
}

.home-actualite .actualite .content {
    background-color: white;
}

    .home-actualite .actualite .content .info:before {
        background-color: white;
    }


.liste-page.actualite .content {
    background-color: #F8F8F2;
}

    .liste-page.actualite .content .info:before {
        background-color: #F8F8F2;
    }

    .liste-page.actualite .content .info h2,
    .home-actualite .actualite .content .info h3 {
        font-family: Anton;
        font-size: 24px;
        color: #0C4DA2;
        margin-bottom: 30px;
    }


/* bugfix détail */

#mod-61 .products-grid {
    margin-top: 40px;
    height: auto !important;
}

#mod-61 .widget-catalog-push-container,
#mod-61 .widget-catalog-push-container .widget-catalog-push,
#mod-61 .widget-catalog-push-container .widget-product-grid {
    position: initial !important;
}

    #mod-61 .widget-catalog-push-container .block-title-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #mod-61 .widget-catalog-push-container .block-title {
        font: 400 32px / 36px "Anton", no-serif;
        color: #0c4da2;
    }

#mod-61 .block-title-container .block-link a {
    color: white;
    position: relative;
    background-color: #0C4DA2;
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 16px;
    padding: 0 30px;
    width: fit-content;
    font-weight: 400;
    border: none;
    letter-spacing: 0;
    justify-content: center;
    border-radius: 50px;
    text-decoration: none;
}

    #mod-61 .block-title-container .block-link a:before {
        content: "";
        position: absolute;
        height: calc(100% + 2px);
        width: calc(100% + 2px);
        box-shadow: inset 0 0 0 5px #DFE5F1;
        border-radius: 50px;
        left: -1px;
        top: -1px;
        transition: all .3s ease;
    }

    #mod-61 .block-title-container .block-link a:hover,
    #mod-61 .block-title-container .block-link a:active,
    #mod-61 .block-title-container .block-link a:focus {
        color: white;
        background-color: #0C4DA2;
    }

        #mod-61 .block-title-container .block-link a:hover:before,
        #mod-61 .block-title-container .block-link a:active:before,
        #mod-61 .block-title-container .block-link a:focus:before {
            box-shadow: inset 0 0 0 0px #DFE5F1;
            transition: all .3s ease;
        }

#mod-61 .products-grid .products.list.items {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
    padding: 0;
    list-style: none;
}

    #mod-61 .products-grid .products.list.items img {
        border: none;
    }


    #mod-61 .products-grid .products.list.items .product-image-photo {
        margin: 0 auto;
        display: block;
    }


#mod-61 .products-grid .product.photo {
    width: 100%;
}

@media (min-width: 768px) {
    #mod-61 .products-grid .products.list.items {
        margin: 0 -10px
    }
}

#mod-61 .products-grid .products.list.items .item.product.product-item {
    width: calc(50% - 10px);
    padding: 10px;
    margin: 0 5px 10px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    position: relative
}

@media (min-width: 768px) {
    #mod-61 .products-grid .products.list.items .item.product.product-item {
        width: calc(33% - 20px);
        padding: 20px;
        margin: 0 10px 20px
    }
}

@media (min-width: 1280px) {
    #mod-61 .products-grid .products.list.items .item.product.product-item {
        width: calc(25% - 19px)
    }

        #mod-61 .products-grid .products.list.items .item.product.product-item:nth-child(4n) {
            margin: 0 0 20px 5px
        }
}


#mod-61 .add-to-cart-animation {
    display: none;
}

#mod-61 .product-infos-flags .infos-flags {
    padding: 0;
    list-style: none;
}

#mod-61 .product-infos-flags {
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 1;
}

#mod-61 .product-items .product-infos-flags .flags {
    display: flex;
    margin-bottom: 10px;
}

#mod-61 .product-item-link {
    font: 700 18px / 23px "Fira Sans", no-serif;
    margin-bottom: 5px;
    display: block;
}

#mod-61 .attribute-label {
    color: #0c4da2;
    font-size: 16px;
}

#mod-61 .products-grid .products.list.items .item.product.product-item .container-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 3px;
    flex: 0 0 100%;
}

@media (min-width: 768px) {
    #mod-61 .products-grid .products.list.items .item.product.product-item .container-price {
        flex: 0 0 50%;
        max-width: 50%
    }

        #mod-61 .products-grid .products.list.items .item.product.product-item .container-price .price-for-wrapper {
            width: 100%
        }
}

#mod-61 .products-grid .products.list.items .item.product.product-item .product-item-volume + .product-item-volume,
#mod-61 .products-grid .products.list.items .item.product.product-item .weight-middle + .product-item-volume {
    margin-left: 5px;
}

#mod-61 .tab-see-all-wrapper,
#mod-61 .towishlist {
    display: none;
}

#mod-61 .pagebuilder-column-line ol:not(.products) {
    padding: 0;
    list-style: none;
    counter-reset: item;
}

    #mod-61 .pagebuilder-column-line ol:not(.products) li:not(.product,.falgs) {
        counter-increment: item;
        position: relative;
        padding-left: 33px;
        padding-top: 4px;
        margin-top: 8px;
    }

        #mod-61 .pagebuilder-column-line ol:not(.products) li:not(.product,.falgs):before {
            content: counter(item);
            font: 900 13px / 160% "Anton", no-serif;
            color: #fff;
            display: inline-block;
            background: url(https://www.biocoop.fr/static/version1748239662/frontend/Biocoop/fusion/fr_FR/Biocoop_Cms/images/icons/ol-bg.svg) no-repeat;
            background-size: contain;
            width: 27px;
            height: 27px;
            text-align: center;
            padding: 5px 1px 4px 0;
            position: absolute;
            top: 0;
            left: 0;
        }

#mod-61 h2[data-content-type="heading"],
#mod-61 h2[data-content-type="heading"],
#mod-61 h2[data-content-type="heading"],
#mod-61 [data-content-type="text"] h2,
#mod-61 [data-content-type="text"] h2,
#mod-61 [data-content-type="text"] h2 {
    font-size: 1.4em;
    font-family: "Anton", no-serif;
    color: #0c4da2;
}

#mod-61 h3[data-content-type="heading"],
#mod-61 h3[data-content-type="heading"],
#mod-61 h3[data-content-type="heading"],
#mod-61 [data-content-type="text"] h3,
#mod-61 [data-content-type="text"] h3,
#mod-61 [data-content-type="text"] h3 {
    font-size: 1.3em;
    font-family: "Anton", no-serif;
    color: #0c4da2;
}

#mod-61 h4[data-content-type="heading"],
#mod-61 h4[data-content-type="heading"],
#mod-61 h4[data-content-type="heading"],
#mod-61 [data-content-type="text"] h4,
#mod-61 [data-content-type="text"] h4,
#mod-61 [data-content-type="text"] h4 {
    font-size: 1.2em;
    font-family: "Anton", no-serif;
    color: #0c4da2;
}

#mod-61 sub {
    line-height: normal;
}

#mod-61 [data-pb-style=BE6CC31],
#mod-61 [data-pb-style=RT26XIN] {
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
    border-style: dotted;
    border-color: #0c4da2;
    width: calc(50% - 20px);
    padding: 20px;
    align-self: stretch;
}

/* col */

[data-content-type="image"] {
    margin: 1em 40px;
    text-align: center !important;
}

[data-appearance="contained"] img {
    max-height: 450px !important;
}

#mod-61 [data-pb-style=YJ00HFD] {
    display: flex;
    width: 100%;
}

#mod-61 [data-pb-style=HD9QT66],
#mod-61 [data-pb-style=XH83HU6] {
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
    background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    width: 83.3333%;
    align-self: center;
}

#mod-61 [data-pb-style=HD9QT66] {
    width: 16.6667%;
}

#mod-61 [data-pb-style=Q26F4K3] {
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
    background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    width: 66.6667%;
    align-self: stretch;
}

#mod-61 [data-pb-style=D3CD4IS] {
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
    background-color: #0c4da2;
    width: 33.3333%;
    margin-left: 40px;
    padding: 20px;
    align-self: center;
}

@media (max-width: 989px) {
    #mod-61 .pagebuilder-column {
        flex-basis: 100%;
        margin: 0 !important;
    }

    #mod-61 .pagebuilder-column-line {
        flex-wrap: wrap;
    }
}


/*******************************************************
OFFRES D'EMPLOI
********************************************************/

.offre-emploi .content {
    padding: 30px 30px 90px 30px;
    border-radius: 5px;
    background-color: #F8F8F2;
    position: relative;
}

.offre-emploi p {
    margin: 0;
    font-family: Anton;
    font-size: 16px;
}

.offre-emploi h2 {
    font-family: Anton;
    font-size: 26px;
    color: #0C4DA2;
    margin-bottom: 20px;
}

.offre-emploi a {
    position: absolute;
    bottom: 30px;
    right: 30px;
}

/*******************************************************
RECETTE
********************************************************/

.recette .content {
    border-radius: 5px;
    background-color: #F8F8F2;
    overflow: hidden;
    height: 100%;
}


.recette .container-img {
    background-size: cover !important;
    background-position: center !important;
}

@media(max-width:991px) {
    .recette .container-img {
        height: 300px;
    }
}

.recette .side-content {
    padding: 30px 15px 80px 15px;
    position: relative;
    height: 100%;
}


.recette .content h2,
.recette .content h3 {
    font-size: 24px;
    font-family: Anton;
    margin-bottom: 20px;
}

.recette .content p {
    position: relative;
    padding-left: 13px;
    margin: 5px 0;
}

    .recette .content p:before {
        content: "";
        position: absolute;
        height: 3px;
        width: 3px;
        background-color: #222222;
        border-radius: 100%;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
    }

.recette a:not(.btn) {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.home-recette {
    padding: 80px 0;
}


@media(max-width:991px) {
    .home-recette {
        padding: 50px 0;
    }
}

.detail-page.detail-recette {
    margin-bottom: 0;
}

.detail-recette .info-recette,
.detail-recette .resume {
    margin-top: 20px;
}

    .detail-recette .info-recette img {
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
    }

@media(max-width:767px) {
    .detail-recette .info-recette img {
        max-width: 56px;
    }

    .detail-recette .info-recette .col-md-auto + .col-md-auto {
        margin-top: 25px;
    }
}

.detail-recette .info-recette p {
    margin: 0;
    display: inline-block;
    vertical-align: middle;
}

    .detail-recette .info-recette p span {
        font-family: Anton;
        font-size: 18px;
        display: block;
    }

.detail-recette .description {
    margin-top: 20px;
}

.detail-recette .presentation {
    background-color: #F8F8F2;
    padding: 70px 0 50px 0;
    overflow: hidden;
    z-index: 0;
    position: relative;
    margin: 0;
}

    .detail-recette .presentation:before {
        content: "";
        position: absolute;
        height: 190px;
        width: 120%;
        z-index: -1;
        left: 50%;
        top: -137px;
        transform: translateX(-50%);
        background-color: white;
        border-radius: 100%;
    }

@media(max-width:991px) {
    .detail-recette .presentation:before {
        width: 160%;
    }
}

.detail-recette .presentation h2 {
    margin-bottom: 40px;
}

.detail-recette .presentation .presentation-recette {
    position: relative;
    padding: 0 20px;
}

@media(min-width:992px) {
    .detail-recette .presentation .presentation-recette {
        padding-right: 290px;
    }
}

.detail-recette .presentation .presentation-recette:before {
    content: "";
    position: absolute;
    background: url(/docs/templates/41/fond-recette.svg);
    bottom: 50px;
    right: 0;
    height: 224px;
    width: 224px;
    background-size: 100%;
}

@media(max-width:767px) {
    .detail-recette .presentation .presentation-recette:before {
        content: none;
    }
}

/*******************************************************
PRODUCTEUR LOCAUX // PRODUCTEUR NATIONAUX // PARTENAIRES LOCAUX
********************************************************/

.producteurs-locaux .content,
.partenaires-locaux .content,
.producteurs-nationaux .content {
    background-color: #DFE5F1;
    overflow: hidden;
    border-radius: 5px;
    height: 100%;
    position: relative;
}


    .producteurs-locaux .content .container-img,
    .partenaires-locaux .content .container-img {
        aspect-ratio: 4 / 3;
        background-position: center !important;
        box-shadow: inset 0 0 0 5px #DFE5F1;
        background-size: cover !important;
    }

    .producteurs-nationaux .content .container-img {
        aspect-ratio: 3 / 2;
        background-position: center !important;
        box-shadow: inset 0 0 0 5px #DFE5F1;
        background-size: cover !important;
    }

    .producteurs-locaux .content .info,
    .partenaires-locaux .content .info,
    .producteurs-nationaux .content .info {
        padding: 0 30px 90px 30px;
        position: relative;
        z-index: 0;
    }

        .producteurs-locaux .content .info:before,
        .partenaires-locaux .content .info:before,
        .producteurs-nationaux .content .info:before {
            content: "";
            position: absolute;
            height: 60px;
            width: 120%;
            z-index: -1;
            left: 50%;
            top: -30px;
            transform: translateX(-50%);
            background-color: #DFE5F1;
            border-radius: 100%;
        }

        .producteurs-locaux .content .info h2,
        .producteurs-locaux .content .info h3,
        .partenaires-locaux .content .info h2,
        .partenaires-locaux .content .info h3,
        .producteurs-nationaux .content .info h2,
        .producteurs-nationaux .content .info h3 {
            font-family: Anton;
            font-size: 24px;
            margin-bottom: 0;
            margin-top: 10px;
        }

            .producteurs-locaux .content .info h2 + p,
            .partenaires-locaux .content .info h2 + p,
            .producteurs-nationaux .content .info h2 + p {
                color: #0C4DA2;
                font-weight: 500;
                margin-bottom: 30px;
                margin-top: 0;
                line-height: 1.2;
            }

    .producteurs-nationaux .content p {
        margin: 10px 0 !important;
        font-weight: 500;
    }

    .producteurs-nationaux .content a:not(.lien-detail),
    .producteurs-nationaux .content .resume {
        margin-top: 30px;
    }

    .producteurs-nationaux .content a:not(.lien-detail) {
        margin-top: 30px;
        word-break: break-word;
    }

    .producteurs-locaux .content .lien-detail,
    .partenaires-locaux .content .lien-detail,
    .producteurs-nationaux .content .lien-detail {
        position: absolute;
        bottom: 30px;
        right: 30px;
    }

.home-producteurs-locaux {
    padding: 80px 0;
}

.home-producteurs-nationaux {
    padding: 80px 0;
    background-color: #F8F8F2;
}

@media(max-width:991px) {
    .home-producteurs-locaux,
    .home-producteurs-nationaux {
        padding: 50px 0;
    }
}

.home-producteurs-nationaux h3 {
    font-size: 24px;
    color: #0C4DA2;
    font-family: Anton;
    margin: 0;
}

.detail-producteurs-nationaux .adresse {
    color: #0C4DA2;
    font-weight: 500;
    line-height: 1.2;
}

.detail-producteurs-nationaux h1 {
    margin-bottom: 10px;
}

.detail-producteurs-nationaux .info {
    margin-top: 30px;
}

    .detail-producteurs-nationaux .info p {
        margin-bottom: 20px;
    }

        .detail-producteurs-nationaux .info p span {
            font-family: Anton;
            display: block;
            font-size: 18px;
        }



.embed-responsive {
    margin: 0;
    border-radius: 5px;
}

.consent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    padding: 0 15px;
}


/*******************************************************
AGENDA
********************************************************/

.home-agenda {
    padding: 80px 0;
}


@media(max-width:991px) {
    .home-agenda {
        padding: 50px 0;
    }
}

.agenda .content {
    border-radius: 5px;
    background-color: #DFE5F1;
    overflow: hidden;
}

    .agenda .content p {
        font-family: Anton;
        font-size: 16px;
        margin: 0;
    }

.agenda .container-img {
    background-size: cover !important;
    background-position: center !important;
    aspect-ratio: 4/3;
}

.agenda .side-content {
    padding: 30px 20px 90px 20px;
    position: relative;
    height: 100%;
}


.agenda .content h2,
.agenda .content h3 {
    font-size: 24px;
    font-family: Anton;
    color: #0C4DA2;
    margin-bottom: 20px;
    margin-top: 5px;
}

.agenda a:not(.btn) {
    position: absolute;
    bottom: 30px;
    right: 30px;
}

/*******************************************************
MAGAZINE
********************************************************/

.magazine img {
    border: 10px solid #DFE5F1;
}

.magazine .content-full,
.magazine .content {
    height: 100%;
}

.magazine .content-full {
    background-color: #DFE5F1;
    padding: 30px;
    border-radius: 10px;
}

    .magazine .content-full img {
        max-width: 233px;
    }

    .magazine .content-full h2 + p {
        font-size: 20px;
        font-weight: 700;
        color: #0C4DA2;
        margin: 10px 0;
    }

    .magazine .content-full p {
        font-size: 18px;
    }

.magazine .content {
    background-color: #DFE5F1;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    position: relative;
}

    .magazine .content p {
        margin: 0;
    }

        .magazine .content p:not(.date) {
            font-size: 24px;
            font-family: Anton;
        }

        .magazine .content p.date {
            font-size: 14px;
            line-height: 1.2;
        }

    .magazine .content a {
        font-size: 14px;
        color: #222222;
        font-weight: 400;
        padding: 5px 15px;
        line-height: 1;
        background-color: white;
        border-radius: 30px;
        text-decoration: none;
    }

        .magazine .content a i {
            font-size: 14px;
            color: #222222;
            font-weight: 300;
            text-decoration: none;
            margin-right: 5px;
        }

.home-magazine {
    padding: 80px 0;
    background-color: #DFE5F1;
    position: relative;
}

@media(max-width:991px) {
    .home-magazine {
        padding: 50px 0;
    }
}

.home-magazine:after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    background: repeating-linear-gradient(to right, #0C4DA2 0px, #0C4DA2 15px,#DFE5F1 15px, #DFE5F1 30px);
    bottom: 0;
    left: 0;
}


.home-magazine .magazine .content-full {
    background-color: white;
}

.home-magazine h3 {
    font-size: 24px;
    font-family: Anton;
    margin: 30px 0;
}

/*******************************************************
EQUIPE
********************************************************/

.equipe .content {
    background-color: #DFE5F1;
    overflow: hidden;
    height: 100%;
    border: 5px solid #DFE5F1;
    border-radius: 5px;
}


    .equipe .content .info {
        padding: 0 30px 30px 30px;
        position: relative;
        z-index: 0;
    }

        .equipe .content .info:before {
            content: "";
            position: absolute;
            height: 60px;
            width: 120%;
            z-index: -1;
            left: 50%;
            top: -30px;
            transform: translateX(-50%);
            background-color: #DFE5F1;
            border-radius: 100%;
        }


/*******************************************************
CLICK & COLLECT
********************************************************/

.click-collect {
    margin: 50px 0;
    border-radius: 10px;
    overflow: hidden;
}

    .click-collect .container-img {
        background-size: cover !important;
        background-position: center !important;
    }

    .click-collect .content {
        padding: 40px 30px;
        column-gap: 30px;
        background: url(/docs/pages/28/fond-click-collect.webp);
        background-position: center;
        background-size: cover !important;
    }

        .click-collect .content h2 {
            font-size: 48px;
            color: #0C4DA2;
            margin-bottom: 30px;
        }

            .click-collect .content h2 span {
                font-size: 32px;
                color: white;
                display: block;
            }

    .click-collect .content {
        max-width: 100%;
    }

@media(max-width:992px) {
    .click-collect .content {
        padding: 40px 30px;
        row-gap: 30px;
        background: url(/docs/pages/28/fond-click-collect.webp);
        background-position: center;
        background-size: cover !important;
    }

    .click-collect .container-img {
        height: 300px;
    }
}

/*******************************************************
PRESENTATION MAGASIN
********************************************************/
.entete {
    background-color: #F9F9F9;
    text-align: center;
    padding-bottom: 30px;
}

    .entete h1 {
        color: #0C4DA2;
        margin-bottom: 15px;
    }

    .entete h2 {
        margin-bottom: 30px;
    }

    .entete h1 + h2 span {
        transform: rotate(-3.8deg);
        padding: 2px 10px;
        color: white;
        text-transform: uppercase;
        display: inline-block;
        background-color: #96BE28;
        font-size: 30px;
    }

    .entete .btn {
        margin: 0 15px;
    }

.presentation-horaire {
    padding: 80px 0;
}

@media(max-width:991px) {
    .presentation-horaire {
        padding: 50px 0;
    }
}

.presentation-horaire h2 {
    margin-bottom: 20px;
}

.presentation-horaire .horaires-day .horaire,
.presentation-horaire .horaire-today .today {
    display: none;
}

.presentation-horaire .horaires-day p,
.presentation-horaire .horaire-today p {
    font-family: Anton;
    margin: 0;
    font-size: 22px;
}

    .presentation-horaire .horaire-today p.open {
        color: #96BE28;
    }

.presentation-horaire .horaires {
    padding: 0;
    margin: 0;
}

    .presentation-horaire .horaires li {
        list-style: none;
        font-size: 20px;
    }

        .presentation-horaire .horaires li + li {
            margin-top: 20px;
        }

@media(max-width:767px) {
    .presentation-horaire .horaires li + li {
        margin-top: 10px;
    }
}

.presentation-horaire .horaires li.today {
    display: inline-block;
    background: url(/docs/pages/28/pinceau-horaire.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    font-weight: 700;
    color: white;
    padding: 5px 20px;
}

.presentation-horaire .horaires li.closed {
    color: #DA0812;
}

#carouselPhotos .carousel-inner {
    border-radius: 10px;
}

.horaires-supp {
    text-align: center;
    border-radius: 30px;
    padding: 30px;
    border: 1px solid #FEE4A7;
    background: #FEF7E5;
    margin-top: 30px;
}

    .horaires-supp h2 {
        font-size: 22px;
    }

    .horaires-supp ul:not(.horaires-supp-liste),
    .horaires-supp ol:not(.horaires-supp-liste) {
        display: inline-block;
    }

        .horaires-supp ul:not(.horaires-supp-liste) li,
        .horaires-supp ol:not(.horaires-supp-liste) li {
            text-align: left;
        }

    .horaires-supp .horaires-supp-liste {
        margin: 0;
        padding: 0;
    }

        .horaires-supp .horaires-supp-liste li {
            display: inline-block;
            padding: 0 15px 0 20px;
            position: relative;
        }

            .horaires-supp .horaires-supp-liste li span.date {
                font-weight: 700;
            }

            .horaires-supp .horaires-supp-liste li.closed .horairesAm {
                color: #DA0812;
            }

            .horaires-supp .horaires-supp-liste li:before {
                content: "";
                position: absolute;
                width: 10px;
                height: 10px;
                border-radius: 100%;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                background-color: #96BE28;
            }

            .horaires-supp .horaires-supp-liste li.closed:before {
                background-color: #DA0812;
            }

.itineraire {
    padding: 60px 0;
    background-color: #F8F8F2;
    text-align: center;
}

    .itineraire h2 {
        margin-bottom: 40px;
    }

    .itineraire h3 {
        font-size: 24px;
        color: #0C4DA2;
        font-weight: 700;
        margin: 20px 0;
    }

@media(min-width:992px) {
    .itineraire .column-border > div[class^="col"] + div[class^="col"] {
        border-left: 1px solid #0C4DA2;
    }
}

@media(max-width:991px) {
    .itineraire .column-border > div[class^="col"] + div[class^="col"] {
        border-top: 1px solid #0C4DA2;
    }

    .itineraire .column-border > div[class^="col"] {
        padding-top: 25px;
        padding-bottom: 15px;
    }
}



.itineraire .gps i {
    font-size: 34px;
    height: 64px;
    width: 64px;
    text-align: center;
    line-height: 64px;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    border-radius: 100%;
    background-position: center !important;
    background: url(/docs/templates/41/circle-gps-black.svg) white;
}

.itineraire .gps a {
    font-size: 18px;
    color: #222222;
    text-decoration: none;
}

    .itineraire .gps a b {
        font-weight: 400 !important;
    }

.itineraire .gps p {
    margin-top: 8px;
    margin-bottom: 0;
}

.itineraire .mapContainer {
    margin-top: 50px;
    border-radius: 30px;
    border: 5px solid #DFE5F1;
}

.services {
    padding: 100px 0 60px 0;
    background-color: #DFE5F1;
    text-align: center;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

    .services:before {
        content: "";
        position: absolute;
        height: 190px;
        width: 120%;
        z-index: -1;
        left: 50%;
        top: -143px;
        transform: translateX(-50%);
        background-color: #F8F8F2;
        border-radius: 100%;
    }

@media(max-width:991px) {
    .services:before {
        width: 160%;
    }
}

.services h2 {
    margin-bottom: 40px;
}

.services .liste {
    padding: 30px 40px;
    border-radius: 10px;
    background: white;
}

    .services .liste p {
        font-size: 24px;
        font-weight: 700;
        margin: 0;
    }

    .services .liste > * {
        row-gap: 40px;
    }

.about {
    padding: 60px 0;
    text-align: center;
}

@media(max-width:991px) {
    .about {
        padding: 30px 0;
        text-align: center;
    }
}

.about .info-magasin,
.about .resume {
    margin-top: 60px;
}

@media(max-width:767px) {
    .about .info-magasin,
    .about .resume {
        margin-top: 30px;
    }
}

.about .info-magasin img {
    margin-right: 10px;
}

@media(max-width:767px) {
    .about .info-magasin img {
        max-width: 80px;
    }
}

.about .info-magasin p {
    font-family: Anton;
    font-size: 26px;
    color: #0C4DA2;
    text-align: start;
    margin: 0;
}

@media(max-width:767px) {
    .about .info-magasin p {
        margin: 25px 0;
    }
}

.about .info-magasin p span {
    font-size: 20px;
    color: #222222;
    display: block;
}

.about .info-magasin p,
.about .info-magasin img {
    display: inline-block;
    vertical-align: middle;
}

.about .reseau {
    margin-top: 50px;
}

    .about .reseau img {
        width: 52px;
    }


/*******************************************************
INFOWINDOW
********************************************************/

.gm-style .gm-style-iw {
    font-weight: 400;
}

.gm-style .gm-style-iw-c {
    padding: 0;
    max-height: 290px !important;
}

.gm-style .gm-style-iw-d {
    max-height: 290px !important;
}


.gm-style .gm-style-iw-t::after {
    height: 0;
}

.gm-style-iw .infowindows {
    font-size: 16px;
    text-align: start;
    padding: 15px;
    line-height: 1.3;
    font-family: 'Fira Sans' !important;
}

.infowindows [itemprop=name] {
    margin-bottom: 10px;
    font-size: 18px;
    color: #0C4DA2;
}

.infowindows .map-phone-number,
.infowindows .map-opening-time {
    margin: 10px 0;
    position: relative;
    padding-left: 25px;
}

    .infowindows .map-phone-number:before,
    .infowindows .map-opening-time:before {
        position: absolute;
        font-family: 'Font Awesome 6 Pro';
        font-weight: 400;
        color: #0C4DA2;
        left: 0;
        top: 1px;
    }

    .infowindows .map-phone-number:before {
        content: "\f095";
    }

    .infowindows .map-opening-time:before {
        content: "\f017";
    }

.infowindows .map-phone-number {
    font-weight: 700;
}


.infowindows .map-bt-itineraire {
    height: 45px;
    display: flex;
    align-items: center;
    font-size: 16px;
    padding: 0 30px;
    width: fit-content;
    border: none;
    letter-spacing: 0;
    justify-content: center;
    border-radius: 50px;
    color: white;
    position: relative;
    background-color: #0C4DA2;
    transition: all .3s ease;
}

    .infowindows .map-bt-itineraire:before {
        content: "";
        position: absolute;
        height: calc(100% + 2px);
        width: calc(100% + 2px);
        box-shadow: inset 0 0 0 5px #DFE5F1;
        border-radius: 50px;
        left: -1px;
        top: -1px;
        transition: all .3s ease;
    }

    .infowindows .map-bt-itineraire:hover:before,
    .infowindows .map-bt-itineraire:active:before,
    .infowindows .map-bt-itineraire:focus:before {
        box-shadow: inset 0 0 0 0px #DFE5F1;
        transition: all .3s ease;
    }

    .infowindows .map-bt-itineraire:hover,
    .infowindows .map-bt-itineraire:active,
    .infowindows .map-bt-itineraire:focus {
        color: white;
        background-color: #0C4DA2;
    }

    .infowindows .map-bt-itineraire:not(:disabled):not(.disabled).active:focus,
    .infowindows .map-bt-itineraire:not(:disabled):not(.disabled):active:focus {
        outline: none;
        box-shadow: none;
    }

    .infowindows .map-bt-itineraire:not(:disabled):not(.disabled).active,
    .infowindows .map-bt-itineraire:not(:disabled):not(.disabled):active {
        border-color: none;
        color: white;
        background-color: #0C4DA2;
        outline: none;
        box-shadow: inset 0 0 0 5px #DFE5F1;
    }

/*******************************************************
FORM
********************************************************/

.newsletter,
.contact {
    padding-bottom: 50px;
}

    .newsletter .title-contact span {
        transform: rotate(-3.8deg);
        padding: 2px 10px;
        color: white;
        text-transform: uppercase;
        display: inline-block;
        background-color: #96BE28;
        font-size: 30px;
        margin-bottom: 10px;
    }


    .contact .adresse span {
        font-size: 24px;
        font-weight: 700;
        display: block;
        margin-bottom: 10px;
        color: #0C4DA2;
    }

.formulaire {
    background-color: #F9F9F9;
    padding: 40px 50px;
    border-radius: 10px;
}

@media(max-width:991px) {
    .formulaire {
        padding: 20px;
        margin-top: 35px;
    }
}


.formulaire h2 {
    color: #0C4DA2;
}

    .formulaire h2,
    .formulaire h2 + p {
        text-align: center;
    }

form label {
    color: #0C4DA2;
    font-weight: 500;
    margin-bottom: 5px;
}

form .form-control {
    border: 1px solid #DFE5F1;
    padding: 10px;
}

    form .form-control:active,
    form .form-control:focus {
        border: 1px solid #0C4DA2;
        background-color: #DFE5F1;
        box-shadow: none;
        outline: none;
    }

    form .form-control[type="radio"] {
        display: none;
    }

        form .form-control[type="radio"] + label {
            font-weight: 500;
            color: #0C4DA2;
            position: relative;
            padding-left: 20px;
        }

            form .form-control[type="radio"] + label:before {
                content: "\f111";
                position: absolute;
                font-family: 'Font Awesome 6 Pro';
                font-weight: 400;
                color: #0C4DA2;
                left: 0;
                font-size: 14px;
                top: 0px;
            }

            form .form-control[type="radio"] + label::after {
                content: "\f192";
                position: absolute;
                font-family: 'Font Awesome 6 Pro';
                font-weight: 900;
                left: 0;
                font-size: 14px;
                top: 0px;
                color: #0C4DA2;
                opacity: 0;
            }

        form .form-control[type="radio"]:checked + label:after {
            opacity: 1;
        }

    form .form-control[type="checkbox"] {
        display: none;
    }

        form .form-control[type="checkbox"] + label {
            font-weight: 400;
            position: relative;
            padding-left: 30px;
            font-size: 16px;
            line-height: 1.2;
            color: #0C4DA2;
            margin-bottom: 15px;
        }

            form .form-control[type="checkbox"] + label:before {
                content: "\f0c8";
                position: absolute;
                font-family: 'Font Awesome 6 Pro';
                font-weight: 400;
                left: 0;
                font-size: 22px;
                top: -2px;
            }

            form .form-control[type="checkbox"] + label::after {
                content: "\f14a";
                position: absolute;
                font-family: 'Font Awesome 6 Pro';
                font-weight: 900;
                left: 0;
                font-size: 22px;
                top: -2px;
                color: #0C4DA2;
                opacity: 0;
            }

        form .form-control[type="checkbox"]:checked + label:after {
            opacity: 1;
        }

form textarea {
    min-height: 180px !important;
}

.form-control.input-validation-error,
.form-control.input-validation-error:focus,
.form-control.input-validation-error:active {
    border: 1px solid #DA0812;
    background-color: #F7E2E3;
}

.field-validation-error span {
    margin-top: 5px;
    display: inline-block;
    font-size: 13px;
    color: #DA0812;
}

.encadre-info.bleu {
    background-color: #DFE5F1;
    color: #0C4DA2;
    padding: 15px;
    font-size: 13px;
    text-align: center;
    border-radius: 5px;
    font-weight: 500;
}

    .encadre-info.bleu i {
        font-size: 13px;
        margin-right: 10px;
    }

form .form-captcha > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

.confirmation-contact {
    padding-bottom: 50px;
}

    .confirmation-contact h2 {
        color: #0C4DA2;
    }


.alert {
    background-color: #f7e2e3;
    text-align: center;
    border: none;
}

.validation-summary-errors ul {
    margin: 0;
    padding: 0;
}

    .validation-summary-errors ul li {
        font-size: 13px;
        font-weight: 500;
        color: #da0812;
    }


/*******************************************************
PAGE 404
********************************************************/

.page-error {
    text-align: center;
}

    .page-error .max-width {
        padding: 80px 0;
    }

    .page-error .row:last-child .col-md-12 {
        display: flex;
        margin-top: 40px;
        justify-content: center;
    }


    .page-error h1 {
        color: #0C4DA2;
        display: inline-block;
        position: relative;
        padding-bottom: 100px;
        padding-left: 60px;
    }

        .page-error h1 span {
            font-size: 30px;
            position: absolute;
            text-transform: uppercase;
            background-color: #FDB813;
            padding: 3px 5px;
            top: 60px;
            left: 60px;
            transform: rotate(-5deg);
        }

        .page-error h1:before {
            content: "";
            position: absolute;
            background: url(/docs/templates/41/point-exclamation.svg);
            height: 96px;
            width: 27px;
            left: 0;
            top: 10px;
            background-repeat: no-repeat;
            transform: rotate(-8deg);
        }


    .page-error img {
        display: block;
        margin: 0 auto;
    }

    .page-error .title {
        font-size: 26px;
        color: #0C4DA2;
        font-family: Anton;
    }

        .page-error .title + p strong {
            display: block;
            margin-bottom: 5px;
        }


/*******************************************************
NEWSLETTER
********************************************************/

#newsletter {
    display: none;
    position: fixed;
    width: 360px;
    z-index: 4;
    background-color: #dfe5f1;
    padding: 40px 35px;
    border-radius: 10px;
    border: 2px solid #86A6D1;
    top: 40px;
    box-shadow: 0px 0px 8px 5px rgba(0, 0, 0, 0.10);
    left: 40px;
}

    #newsletter h2 {
        position: relative;
        padding-left: 80px;
    }

        #newsletter h2 img {
            position: absolute;
            top: 10px;
            left: 0;
        }

    #newsletter .close-newsletter {
        position: absolute;
        right: 15px;
        top: 15px;
        font-size: 20px;
        color: #0c4da2;
    }

        #newsletter .close-newsletter:hover {
            cursor: pointer;
        }

/*******************************************************
COOKIE BAR
********************************************************/

.weCookieBar .btn {
    height: 40px;
    margin: 5px;
    display: inline-block;
}

.weCookieBar .btn-default:before {
    box-shadow: inset 0 0 0 4px #DFE5F1;
}

.weCookieBar #weCookieButton1 {
    color: white;
}

#cookiesModal .modal-content {
    background-color: #dfe5f1;
    border: 2px solid #86a6d1;
}

#cookiesModal .modal-header {
    border: none;
}

#cookiesModal .modal-title {
    font-family: Anton;
    font-size: 36px;
    color: #0c4da2;
}

#cookiesModal h3 {
    font-family: Anton;
    font-size: 26px;
    margin-top: 20px;
}

#cookiesModal .btn {
    height: 40px;
    padding: 0 20px;
}

#cookiesModal .form-group + .form-group {
    margin-top: 15px;
}

#cookiesModal .close {
    background-color: transparent;
    font-size: 45px;
    color: #0c4da2;
}

/*******************************************************
AVIS CLIENTS
********************************************************/

.liste-page.avis-client .avis {
    background-color: #F8F8F2;
}

.score-liste .score {
    margin-left: 30px;
}

    .score-liste .score p {
        margin: 0;
    }

        .score-liste .score p .nb {
            font-size: 48px;
            color: #FDB813;
            font-weight: 700;
        }

        .score-liste .score p .total {
            font-size: 14px;
            margin-top: 5px;
        }


/*******************************************************
PHOTOS
********************************************************/

.GalleryContainer {
    padding: 40px 0;
}


    .GalleryContainer h2 {
        color: #0C4DA2;
    }

    .GalleryContainer .resume {
        margin-bottom: 30px;
    }

/*******************************************************
PAGE LIBRE
********************************************************/

.page-libre {
    padding-bottom: 50px;
}


/*******************************************************
PAGE BIOCOOP
********************************************************/

.page-biocoop .intro {
    padding: 50px 0;
}

    .page-biocoop .intro .img-border {
        border: 10px solid #DFE5F1;
        border-radius: 5px;
    }

    .page-biocoop .intro .title {
        color: #0C4DA2;
        margin-top: 10px;
        font-size: 34px;
    }

        .page-biocoop .intro .title span {
            display: block;
            color: #222222;
            font-size: 26px;
        }

.page-biocoop .principe {
    padding: 60px;
    border-radius: 20px;
    background-color: #DFE5F1;
}

@media(max-width:767px) {
    .page-biocoop .principe {
        padding: 40px;
    }
}


.page-biocoop .principe h2 + p {
    font-size: 22px;
    font-family: Anton;
}

.page-biocoop .principe img {
    border: 4px solid white;
    border-radius: 5px;
}


/*******************************************************
MENTIONS LEGALES
********************************************************/

.mention-legale {
    padding-bottom: 50px;
}

    .mention-legale h2 {
        margin-top: 30px;
    }

    .mention-legale h3 {
        font-size: 20px;
        font-weight: 500;
    }


/*******************************************************
PAGE LIBRE
********************************************************/


/*******************************************************
CONTENT BUILDER
********************************************************/

.page-libre .embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
}

    .page-libre .embed-responsive iframe {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

.pcr-app[data-theme=nano] .pcr-selection {
   display:none;
}