/* Frontend editor */
.ct-widget.ct-ignition { position:fixed; left:auto; top:auto; right:20px; bottom:20px; z-index:10000; transition:all 0.5s ease 0s; }
.ct-widget.ct-ignition .ct-ignition__button { position:static; margin-top:10px;}

.ce-element { outline:2px dashed rgba(243, 156, 18, 0.5); }
.ce-element--focused, .ce-element:focus { outline:2px dashed rgba(243, 156, 18, 1); }
/**
 * ----------------------------------------
 * animation bounce-in-right
 * ----------------------------------------
 */
@keyframes bounce-in-right {
  0% {
    -webkit-transform: translateX(600px);
            transform: translateX(600px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateX(-60px);
            transform: translateX(-60px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

/**
 * ----------------------------------------
 * animation slide-in-right
 * ----------------------------------------
 */
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-out-right
 * ----------------------------------------
 */
@keyframes slide-out-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * animation slide-in-fwd-bottom
 * ----------------------------------------
 */
@keyframes slide-in-fwd-bottom {
  0% {
    -webkit-transform: translateZ(-800px) translateY(400px) scale(0.8);
            transform: translateZ(-800px) translateY(400px) scale(0.8);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}

/**
 * General Elements
 **/
html{ font-size: 10px; }
body{ font-size: 14px; line-height: 1.5em; font-family: 'Mont', Arial, sans-serif; font-weight: normal;

    --containerWidth: 100%;
    --asideWidth: calc( ((100vw - var(--containerWidth)) / 2) + (1.5rem / 2) );

    --colorTitre: #764C24;
    --colorCreme: #F5F2EA;
    --colorBoulangerie: #841811;
    /* --colorBoulangerie: #6F0C0E; */
    --colorPatisserie: #BA0A7E;
    --colorChocolat: #40160D;
    --colorDouceur: #DA787F;
    --colorBeige60: #AF967F;

    --swiper-theme-color: #764C24;
    --swiper-pagination-color: #764C24;
}

:focus, button:focus { outline:none; }

/* Images */
img, svg { max-width:100%; height:auto; }
[data-sizes] { display:block; width:100%; }
[data-bg] { background-size:cover; background-repeat:no-repeat; background-position:center center; }
[data-editable]{ min-height: 1em; }
figure{ margin: 0; }

#grid{ position: fixed; z-index: 11; width: 100vw; height: 100vh; left: 0; right: 0; margin: auto; pointer-events: none; }
#grid > div{ height: 100%; }
#grid .row{ height: 100%; }
#grid .col-1{ height: 100%; }
#grid .col-1 span{ display: block; height: 100%; background-color: #009a9a; opacity: 0.1; }

/* Headings */
h1, h2, h3, h4, h5{ margin: 1em 0 0.5em; font-family: Aller, Arial, Helvetica, sans-serif; font-weight: bold; color: var(--colorTitre); }
h1{ font-size: 12rem; opacity: 0.2; line-height: 0.9em; }
h1:after{ content: ''; position: absolute; width: 40px; border-bottom: 1px solid; height: 0; bottom: 0; left: 0; }
h2{ font-size: 3.8rem; }
h3{ font-size: 3.2rem; }
h3{ font-size: 3.2rem; }
h4{ font-size: 2.8rem; }

.titre{ display: flex; flex-direction: column-reverse; }
.titre h2,
.titre h3{ margin-top: 0.2em; margin-bottom: 0.7em; }
.titre p{ opacity: 0.6; font-size: 1.4rem; color: var(--colorTitre); }
.titre h2:empty+p{ display: none; }

/* Paragraphs */
p { margin-bottom:1em; }
p:last-child { margin-bottom:0; }

/* Link */
a { color:inherit; }
a:hover { color:inherit; text-decoration:none; }
a[href$='.pdf']{ display: flex; align-items: center; }
a[href$='.pdf']:after{ content: ''; display: inline-block; height: 1em; width: 1em; transform: translateY(2px); margin-left: 0.5em; transition: all 0.2s ease-out; 
    background-color: var(--colorTitre);
    mask-image: url(../themes/fournils/assets/img/ico-upload.svg); mask-repeat: no-repeat; mask-position: 50% 50%; mask-size: contain;
    -webkit-mask-image: url(../themes/fournils/assets/img/ico-upload.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; -webkit-mask-size: contain; }

/* Lists */
ul, ol { margin-bottom:0; padding:0; list-style:none; }

/* Forms */
.invalid-feedback.visible { display:block !important; }

 /* Classes */
.casper{ display: none; }

.ico{ display: inline-block; position: relative; }
.ico:before{ content: ''; display: inline-block; width: 20px; height: 20px; background-color: var(--colorTitre); transition: all 0.2s ease-out;
    mask-repeat: no-repeat; mask-position: 50% 50%; mask-size: contain;
    -webkit-mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; -webkit-mask-size: contain; }
.ico:hover:before{ background-color: #000; }
.ico.no-text span{ display: none; }
.ico.contact:before{ mask-image: url(../themes/fournils/assets/img/ico-mail.svg); -webkit-mask-image: url(../themes/fournils/assets/img/ico-mail.svg); width: 30px; height: 26px; mask-size: 26px 26px; -webkit-mask-size: 26px 26px; }
.ico.facebook:before{ mask-image: url(../themes/fournils/assets/img/ico-fb.svg); -webkit-mask-image: url(../themes/fournils/assets/img/ico-fb.svg); }
.ico.instagram:before{ mask-image: url(../themes/fournils/assets/img/ico-insta.svg); -webkit-mask-image: url(../themes/fournils/assets/img/ico-insta.svg); }
.ico.linkedin:before{ mask-image: url(../themes/fournils/assets/img/ico-in.svg); -webkit-mask-image: url(../themes/fournils/assets/img/ico-in.svg); }
.ico.pin:before{ mask-image: url(../themes/fournils/assets/img/pin.svg); -webkit-mask-image: url(../themes/fournils/assets/img/pin.svg); }
.ico#h-accueil:before{ mask-image: url('../themes/fournils/assets/img/ico-home.svg'); -webkit-mask-image: url(../themes/fournils/assets/img/ico-home.svg); }

.logo{ display: inline-block; }
.logo img{ height: 100%; display: block; }
.logo.no-text span{ display: none; }

.btn{ display: inline-block; border: 1px solid var(--colorTitre); color: var(--colorTitre); font-size: inherit; text-decoration: none;
    border-radius: 50px; padding: 0.3em 1.5em; margin: 1.5em 0; transition: all 0.2s ease-out; }
.btn:hover{ background-color: rgb(118 76 36 / 30%); color: #fff; border-color: transparent; }

.btn-wrapper > a{ display: inline-block; border: 1px solid var(--colorTitre); color: var(--colorTitre); font-size: inherit; text-decoration: none;
    border-radius: 50px; padding: 0.3em 1.5em; margin: .5em 0 0; transition: all 0.2s ease-out; }
.btn-wrapper > a:hover{ background-color: rgb(118 76 36 / 30%); color: #fff; border-color: transparent; }

.select-wrapper{ position: relative; }
.select-wrapper span{ display: flex; align-items: center; justify-content: space-between; }
.select-wrapper span:after{ content: ''; background: url(../themes/fournils/assets/img/select.svg) no-repeat 50% 50%; width: 10px; height: 5px; display: block; margin-left: 0.5em; }
.select-wrapper ul.select-list{ position: absolute; top: 100%; padding-top: 0.5em; width: 100%; transform: translateX(-2rem); z-index: 1; }
.select-wrapper ul.select-list li{ height: 0; opacity: 0; background-color: #fff; transition: all 0.2s ease-out; }
.select-wrapper ul.select-list a{ line-height: 1em; padding: 0.5em; text-decoration: none; text-align: left; display: block; color: var(--colorTitre); }
.select-wrapper ul.select-list a:hover{ transform: translateX(0.5em); transition: all 0.2s ease-out; }
.select-wrapper.open ul.select-list li{ height: 2em; opacity: 1; }

.close{ position: absolute; cursor: pointer; z-index: 1;  background: url(../themes/fournils/assets/img/close.svg) no-repeat 50% 50%; }

#page { position:relative; width:100%; overflow:hidden; }
#header a,
#footer a{ text-decoration: none; }

.vague{ margin: 40px 0; position: relative; }
.vague>div{ position: relative; z-index: 2; }
.vague:before,
.vague:after{ content:''; position: absolute; height: 20px; width: 100%; top: -19px; left: 0; background: url(../themes/fournils/assets/img/vague-h.svg) repeat-x 50% 100%; background-size: auto 100%; z-index: 0; z-index: 1; }
.vague:after{ transform: rotate(180deg); top: inherit; bottom: -19px; }
.vague.rose{ background-color: #e3989c; color: #fff; text-align: center; padding: 10vmin 0 5vmin; transform: translateY(-5vmin); /*margin: 15vw 0;*/ z-index: 1; }
.vague.rose:before,
.vague.rose:after{ background-image: url(../themes/fournils/assets/img/vague-double.png); }
.vague.rose h2{ color: #fff; }
.vague.triple{ background-color: #e2dad2; }
.vague.triple:before,
.vague.triple:after{ background-image: url(../themes/fournils/assets/img/vague-triple.png); }
.vague.first{ margin-top: 0; padding-top: 0; overflow: visible; }
.vague.first:before{ content: none; }

.bg-creme{ background-color: var(--colorCreme); }
.bg-pois{ background: url(../themes/fournils/assets/img/pois.svg) repeat; background-size: 20px auto; }
.bg-blanc{ background-color: #fff; }

.vpad10{ padding: 10vmin 0; }
.vcenter .row{ align-items: center; }

.visuels-out{ margin: 10vmin 0; }
.visuels-out .row{ align-items: center; }
.visuels-out .visuels{ margin: -8vmin 0; }
.visuels-out .visuels img{ margin: 0.75rem 0; }
.visuels-out .swiper-box{ padding-bottom: 0; }
.visuels-out .swiper-pagination{ bottom: -20px; }

.gravure{ position: relative; }
.gravure:before{ content: ''; position: absolute; top: 50%; z-index: 1; width: 30%; height: 60%; opacity: 0.3; mix-blend-mode: multiply; pointer-events: none;
    background-repeat: no-repeat; background-size: auto 100%; }
.gravure.miche:before{ background-image: url(../themes/fournils/assets/img/pain-miche.png); }
.gravure.tarte:before{ background-image: url(../themes/fournils/assets/img/tartelette.png); height: 15vw; top: inherit; bottom: 0; background-size: contain; right: 0; left: inherit; transform: translateY(70%); }

.swiper-box{ position: relative; padding-bottom: 4em; }
.swiper{ position: relative; overflow: hidden; }
.swiper-pagination{ text-align: center; bottom: 10px; left: 0; width: 100%; z-index: 1; }
.swiper-pagination-bullet{ background-color: var(--colorTitre); margin: 0 4px; width: 10px; height: 10px; }
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active){ opacity: 0.4; }
.swiper-container-horizontal>.swiper-pagination-bullets, 
.swiper-pagination-custom, .swiper-pagination-fraction{ bottom: 0; }
.rose .swiper-pagination-bullet{ background-color: #fff; }

.nowrap{ white-space: nowrap; }

.cover{ position: relative; width: 100%; height: 100%; overflow: hidden; }
.cover>img{ min-width: 100%; min-height: 100%; max-width: none; max-height: none; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; }

.outside{ width: calc(100% + var(--asideWidth)); }


/**
 * PAGES
 **/

/* Accueil */
#accueil .top #headbar{ color: var(--colorTitre); }
#accueil .pinned.top  #headbar:before{ opacity: 1; background-color: transparent; transform: translateX(60%); }
#accueil .top #headbar:before{ opacity: 0; }
#accueil .top #h-accueil:before,
#accueil .top #menu-toggler:before{ background-color: var(--colorTitre); }
#accueil #banniere{ overflow: hidden; height: auto; }
#accueil #banniere:after{ content: none; }
#accueil #banniere .swiper-box{ padding-bottom: 0; }
#accueil #banniere .swiper-slide{ overflow: hidden; /*max-height: 100vmin;*/ height: auto; }
#accueil #banniere .swiper-slide .row{ height: 100%; }
#accueil #banniere .swiper-slide .text{ padding-bottom: 5vmin; margin-bottom: 0; }
#accueil #banniere .swiper-pagination{ display: flex; flex-direction: column; justify-content: center; position: absolute; top: 0; left: 59%; height: 100%; width: 8px; }
#accueil #banniere .swiper-pagination-bullet{ margin: 3px 0; }
#accueil #banniere .index0 h2{ color: var(--colorDouceur); }
#accueil #banniere .index1 h2{ color: var(--colorBoulangerie); }
#accueil #banniere .index2 h2{ color: var(--colorPatisserie); }
#accueil #banniere .index3 h2{ color: var(--colorChocolat); }
    .banner-slide>div{ position: relative; z-index: 1; height: 100%; }
    .banner-slide>.img{ background-color: #000; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
    .banner-slide>.img img{position: absolute; min-width: 100%; min-height: 100%; top: 50%; left: 50%; object-fit: cover; transform: translate(-50%, -50%); opacity: 0.7; }
    .banner-slide .container-lg{ padding-left: 0; padding-right: 0; }
    .banner-slide .texte{ background-color: var(--colorCreme); position: relative; display: flex; flex-direction: column; justify-content: center; padding: 12vmin 100px 0 10vmin; min-height: 100vmin; height: 100%; }
    .banner-slide .texte:before{ content: ''; position: absolute; width: 25px; left: -49px; top: 0; height: 100%; background: url(../themes/fournils/assets/img/vague-v.svg) repeat-y; }
    .banner-slide .texte:after{ content: ''; position: absolute; width: 65vw; left: -25px; top: 0; height: 100%; background-color: var(--colorCreme); z-index: 0; }
    .banner-slide .texte > *{ position: relative; z-index: 1; }
    .banner-slide .logo{ display: flex; align-items: center; justify-content: center; height: 100%; margin-right: var(--asideWidth);}
    .banner-slide .logo img{ width: 350px; height: auto; max-width: 66%; }
    
    .banner-slide .logo{ transform: translateX(100vw);
        -webkit-animation: 0.5s slide-out-right 0.2s cubic-bezier(0.895, 0.030, 0.685, 0.220) both;
                animation: 0.5s slide-out-right 0.2s cubic-bezier(0.895, 0.030, 0.685, 0.220) both; }
    .banner-slide.swiper-slide-active .logo{ transform: translateX(0); 
        -webkit-animation: 1.1s bounce-in-right 0.7s both; 
                animation: 1.1s bounce-in-right 0.7s both; }
    .banner-slide .texte{ transform: translateX(100vw);
        -webkit-animation: 0.5s slide-out-right cubic-bezier(0.895, 0.030, 0.685, 0.220) both;
                animation: 0.5s slide-out-right cubic-bezier(0.895, 0.030, 0.685, 0.220) both; }
    .banner-slide.swiper-slide-active .texte{ transform: translateX(0); 
        -webkit-animation: 1s slide-in-right 0.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
                animation: 1s slide-in-right 0.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; }

.socials.vertical{ transform: translateX(-2.5vw) rotate(-90deg); z-index: 2; position: absolute; left: 100%; top: 100%; transform-origin: left; width: 60vh; height: 5vmin; display: flex; justify-content: center; }
.socials.vertical p{ position: relative; display: flex; align-items: center; justify-content: center; color: #CFC0AE; font-size: 1.8rem; }
.socials.vertical p:before{ content: ''; position: absolute; width: 30%; border-bottom: 1px dashed var(--colorTitre); right: 110%; }
.socials.vertical a{ opacity: 0.5; }
.socials.vertical a:hover{ opacity: 1; }
.socials.vertical a:hover:before{ background-color: var(--colorTitre); }

#gamme{ text-align: center; }
#gamme .visuels .swiper-box{ overflow: hidden; padding-bottom: 0; }
#gamme .visuels .swiper-slide{ border: 15px solid #fff; overflow: hidden; }
#gamme .swiper-box .texte{ max-width: 500px; margin: auto; }
#gamme .swiper-slide img{ transition: all 0.2s ease-out; }
#gamme .swiper-slide-next img{ transform: translateX(20%); }
#gamme .swiper-slide-prev img{ transform: translateX(-20%); }

#nous .swiper-box{ padding-bottom: 0; }
#nous .swiper{ box-shadow: none; }

/* offres & evenements */
#fete h2,
#fete h3{ color: var(--colorDouceur); }
#fete #identite{ margin-bottom: 0; padding-bottom: 10vmin; background-size: calc(var(--containerWidth) * 0.55); background-repeat: repeat-x; background-position: 50% 0;}
#fete #identite h1{ margin-top: 0.6em; width: inherit; }
#fete #identite .texte{ max-width: 600px; text-align: center; margin: auto; }
#fete .notitle{ padding-top: 5vmin; }
#fete .bg-pois article{ padding: 0; }
#fete .bg-pois article > div{ padding-top: 10vmin; padding-bottom: 10vmin; background-color: #fff; }
#fete .bg-pois + .vague{ margin-top: 0; }
#fete #produits > div{ padding-left: 7vmin; padding-right: 7vmin; }
#fetes-de-fin-anneeproduits-autres{ margin-top: 0; }
#autres-fetes .texte{ text-align: center; }
#autres-fetes h2{ color: var(--colorTitre); margin: 10vmin 0 5vmin; }
#autres-fetes .fetes-list{ background-color: rgb(118 76 36 / 50%); }
#autres-fetes .fetes-list>div{ display: flex; justify-content: center; flex-wrap: wrap; }
#autres-fetes a{ position: relative; display: flex; width: 220px; max-width: 50%; justify-content: center; flex-direction: column; text-align: center; }
#autres-fetes a>img{ z-index: 1; }
#autres-fetes a>span{ z-index: 1; position: absolute; right: 0; left: 0; bottom: 0; height: 25%; display: flex; flex-direction: column; align-items: center; font-size: 1.8rem; font-weight: bold; color: var(--colorTitre); opacity: 0.4; line-height: 1em; }
#autres-fetes a>span:after{ content: ''; width: 40px; height: 1px; border-bottom: 1px solid; transform: translateX( calc(50% - 20px) ); margin-top: 5%; }
#autres-fetes a:before{ content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #fff; opacity: 0.5; z-index: 0; }
#autres-fetes a:nth-child(7n+1):before{ opacity: 0.15; }
#autres-fetes a:nth-child(7n+2):before{ opacity: 0.19; }
#autres-fetes a:nth-child(7n+3):before{ opacity: 0.05; }
#autres-fetes a:nth-child(7n+4):before{ opacity: 0.30; }
#autres-fetes a:nth-child(7n+5):before{ opacity: 0.20; }
#autres-fetes a:nth-child(7n+6):before{ opacity: 0.25; }
#autres-fetes a:nth-child(7n+7):before{ opacity: 0.09; }

/* Produits */
#nos-produits #plaisir .titre h2{ font-size: 3.7rem; color: #fff; }
#produits{ padding: 10vmin 0 5vmin; }
#produits .text-center{ max-width: 620px; margin: auto; margin-bottom: 3vmin; }
#produits .swiper-slide .texte{ max-width: 430px; text-align: center; margin: auto; }
#produits .swiper-box{ padding-bottom: 2em; padding-top: 2em; }
#produits .swiper-pagination{ bottom: inherit; top: 0; }
#produits-autres{ padding: 5vmin 0; margin-top: 0; }
#produits-autres .swiper-box{ padding-bottom: 3em; }
#produits-autres .swiper-pagination{ text-align: right; }

    #nos-produits.patisserie h2,
    #nos-produits.patisserie h4,
    #nos-produits.patisserie h3{ color: var(--colorPatisserie); }
    #nos-produits.patisserie .article h2:after{ border-color: var(--colorPatisserie); }
    #nos-produits.patisserie .swiper-pagination-bullet,
    #nos-produits.patisserie .swiper-pagination-bullet-active{ background-color: var(--colorPatisserie); }
    #nos-produits.viennoiserie h2,
    #nos-produits.viennoiserie h4,
    #nos-produits.viennoiserie h3{ color: var(--colorBoulangerie); }
    #nos-produits.viennoiserie .article h2:after{ border-color: var(--colorBoulangerie); }
    #nos-produits.boulangerie h2,
    #nos-produits.boulangerie h4,
    #nos-produits.boulangerie h3{ color: var(--colorBoulangerie); }
    #nos-produits.boulangerie .article h2:after{ border-color: var(--colorBoulangerie); }
    #nos-produits.chocolats-confiserie h2,
    #nos-produits.chocolats-confiserie h4,
    #nos-produits.chocolats-confiserie h3{ color: var(--colorChocolat); }
    #nos-produits.chocolats-confiserie .article h2:after{ border-color: var(--colorChocolat); }

/* Boulangers du doubs */

#boulangers-du-doubs #identite h1{ width: 40%; }
#boulangers-du-doubs #banniere .logo{ max-width: calc( var(--containerWidth) * 0.16); position: absolute; top: 13vmin; left: 50%; transform: translateX(-50%); z-index: 2; }
#boulangers-du-doubs .article h2{ color: var(--colorBoulangerie); }

    #identite>div{ overflow: hidden; }
    #identite h1{ font-size: calc(var(--containerWidth) * 0.075); margin: 0.2em 0 4vmin; transform: translateX(0); transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1); min-height: 1em; }
    #identite h1:after{ content: none; }
    .loading #identite h1{ transform: translateX(100vw); }

    .article{ padding: 10vmin 0; }
    .article h2{ position: relative; padding-bottom: 0.5em; }
    .article h2:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 4rem; height: 0; border-bottom: 1px solid var(--colorBoulangerie); }
    .article .texte{ height: 100%; display: flex; flex-direction: column; justify-content: center; }
    .article .texte .btn{ margin-bottom: 0; margin-top: 5vmin; }
    .article .visuels{ height: 100%; display: flex; flex-direction: column; justify-content: center; }
    .article .visuels > img{ margin: 0.75rem 0; }
    .article .swiper-container-autoheight .swiper-wrapper { align-items: flex-end; }
    .article .swiper-box { padding-bottom: 3em; }
    .article .swiper { padding-bottom: 0; box-shadow: -3px 12px 20px rgba(0, 0, 0, 0.25); }
    .article .swiper.fit{ box-shadow: none; }
    .article .swiper-slide img{ display: block; }
    .article .swiper-pagination{ text-align: right; }
    .article .swiper-pagination-bullet,
    .article .swiper-pagination-bullet-active{ background-color: var(--colorBoulangerie); }
    .article .swiper-box.captions .swiper-slide{ margin-bottom: 6em; }
    .article .swiper-box.captions figcaption{ margin-top: 3em; line-height: 1.2em; position: absolute; top: 100%; }
    .article .swiper-box.captions .swiper-pagination{ top: calc(100% - 5em); }
    
    .article.overflow-btm{ margin-bottom: 10vmin; padding-bottom: 0; }
    .article.overflow-btm .visuels{ justify-content: flex-end; transform: translateY(15vmin); }
    .article.overflow-top{ margin-top: 10vmin; padding-top: 5vmin; overflow: visible; padding-bottom: 0; }
    .article.overflow-top .visuels{ justify-content: flex-start; transform: translateY(-15vmin); }
    .article.vpics .visuels{ justify-content: center; }
    .article.pic-full .texte{ max-width: 620px; margin: auto; margin-bottom: 8vmin; }
    .article.pic-full h2:after{ left: 50%; transform: translateX(-50%); }

/* Notre maison */
#notre-maison #identite h1{ width: 40%; }
#notre-maison #banniere .logo{ max-width: calc( var(--containerWidth) * 0.16); position: absolute; top: 13vmin; left: 50%; transform: translateX(-50%); z-index: 2; }
#notre-maison #intro{ margin-bottom: 0; }
#notre-maison h2{ color: var(--colorDouceur); }
#notre-maison #plaisir h2{ color: #fff; }
#notre-maison #plaisir{ margin-top: 15vmin; }
#notre-maison #historique .anchors ul:before{ content: ''; background: url(../themes/fournils/assets/img/sablier.svg) no-repeat 50% 50%; background-size: 40% 40%; width: 15vmin; height: 100%; position: absolute; right: 100%; }

#lieux .row{ transform: translateY(-8vmin); position: relative; z-index: 1; }
#lieux .teaser{ display: flex; flex-direction: column; text-align: center; }
#lieux .teaser h3{ order: 2; position: relative; padding-bottom: 1em; margin-bottom: 1em; margin-top: 0.2em; font-weight: normal; letter-spacing: 0.03em; }
#lieux .teaser h3:after{ content: ''; position: absolute; width: 100px; max-width: 30%; left: 50%; bottom: 0; border-bottom: 1px solid; transform: translateX(-50%); }
#lieux .teaser img{ order: 1; max-width: 300px; margin: auto; }
#lieux .teaser .texte{ order: 3; max-width: 230px; margin: auto; }

#lieux .teaser#fournil h3{ color: var(--colorBoulangerie); }
#lieux .teaser#fournil .btn{ border-color: var(--colorBoulangerie); color: var(--colorBoulangerie); }
#lieux .teaser#atelier h3{ color: var(--colorPatisserie); }
#lieux .teaser#atelier .btn{ border-color: var(--colorPatisserie); color: var(--colorPatisserie); }

#historique{ background-position: 0 -4px; }
#historique .anchors{ z-index: 2; background-color: var(--colorBeige60); color: var(--colorBeige60); height: 15vmin; font-size: 3rem; font-family: 'Aller'; }
#historique .anchors>div{ height: 100%; padding: 0; }
#historique .anchors ul{ display: flex; align-items: center; justify-content: stretch; flex-wrap: nowrap; height: 100%; position: relative; }
#historique .anchors li{ height: 100%; flex: 1 1 0; }
#historique .anchors li a{ background-color: rgb(255 255 255 / 0.6); text-decoration: none; height: 100%; display: flex; align-items: center; justify-content: center; }
#historique .anchors li:nth-child(even) a{ background-color: rgb(255 255 255 / 0.7); }
#historique .anchors li a:hover{ background-color: rgb(255 255 255 / 0.8); }
#historique .step{ color: #fff; background-color: var(--colorBeige60); overflow: hidden; }
#historique .step .texte{ padding: 5vmin 0; min-height: 70vmin; display: flex; flex-direction: column; justify-content: center; }
#historique .step h3{ color: #fff; opacity: 0.6; margin-top: 0; font-size: 4.6rem; position: relative; margin-bottom: 0.5em; padding-bottom: 0.5em; }
#historique .step h3:after{ content: ''; width: 40px; border-bottom: 2px solid; position: absolute; bottom: 0; left: 0; }
#historique .step h3{ order: 2; line-height: 1.2em; }
#historique .step h4{ order: 1; font-size: 5.4rem; margin: 0; }
#historique .step .description{ order: 3; }
#historique .step .img-wrapper{ height: 100%; position: relative; overflow: hidden; transform: translateX(var(--asideWidth)); }
#historique .step .img-wrapper img{ min-width: 100%; max-width: none; width: auto; min-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#historique .step .visuel{ position: relative; }
#historique .step .visuel:before{ content: ''; position: absolute; z-index: 1; width: 18px; height: 100%; top: 0; left: calc(var(--asideWidth) + 6px); transform: rotate(180deg); background-color: var(--colorBeige60);
    mask-image: url(../themes/fournils/assets/img/vague-v.png); mask-repeat: repeat-y; mask-size: 100% auto; mask-position: 100% 50%;
    -webkit-mask-image: url(../themes/fournils/assets/img/vague-v.png); -webkit-mask-repeat: repeat-y; -webkit-mask-size: 100% auto; -webkit-mask-position: 100% 50%; }
#historique .step.odd .texte{ order: 2; }
#historique .step.odd .visuel{ order: 1; text-align: left; }
#historique .step.odd .img-wrapper{ transform: translateX( calc(var(--asideWidth) * -1) ); }
#historique .step.odd .visuel:before{ left: inherit; right: calc(var(--asideWidth) + 6px); transform: rotate(0); }
#historique .step.patisserie,
#historique .step.patisserie .visuel:before{ background-color: var(--colorDouceur); }
#historique .step.patisserie h3:after{ border-color: var(--colorBoulangerie); }
#historique .step.patisserie h4{ color: var(--colorBoulangerie); }
#historique .step.boulangerie,
#historique .step.boulangerie .visuel:before{ background-color: var(--colorBoulangerie); }
#historique .step.boulangerie h3:after{ border-color: #fff; }
#historique .step.boulangerie h4{ color: #fff; }
#historique .step.violet,
#historique .step.violet .visuel:before{ background-color: var(--colorPatisserie); }
#historique .step.violet h3:after{ border-color: #fff; }
#historique .step.violet h4{ color: #fff; }

#historique .step .btn-wrapper > a{ border-color: #fff; color: #fff; }
#historique .step .btn-wrapper > a:hover{ background-color: rgb(255 255 255 / 30%); color: #fff; }
#historique .step .btn-wrapper > a:after{ background-color: #fff; }

#historique .step#histoire6 .img-wrapper img{ transform: translateY(-50%); left: inherit; right: 0; }
#historique .step#histoire8,
#historique .step#histoire8 .visuel:before{ background-color: #E091C5; }
#historique .step#histoire8 h4{ color: #9B1473; }
#historique .step#histoire10,
#historique .step#histoire10 .visuel:before{ background-color: #D15BA9; }
#historique .step#histoire10 h4{ color: #9B1473; }


/* Ecrin des douceurs */
#ecrin-des-douceurs #identite h1{ width: 40%; }
#ecrin-des-douceurs #banniere .logo{ max-width: calc( var(--containerWidth) * 0.16); position: absolute; top: 13vmin; left: 50%; transform: translateX(-50%); z-index: 2; background-color: #fff; padding: 3vmin; }
#ecrin-des-douceurs h2{ color: var(--colorPatisserie); }
#ecrin-des-douceurs h2:after{ border-color: var(--colorPatisserie); }

/* Fournils */
/* #nos-fournils #headbar:before{ backdrop-filter: none; background-color: transparent; } */
#nos-fournils #banniere{ background-color: #000; }
#nos-fournils #banniere img{ opacity: 0.7; }

#presentation{ padding: 10vmin 0; }
#presentation h1{ color: var(--colorDouceur); font-size: 4.6rem; opacity: 1; margin-top: 0; }
#presentation .row{ align-items: center; }
#presentation .swiper{ padding-bottom: 2em; }
#presentation .swiper-pagination { text-align: right; }

#coords{ padding-bottom: 13vmin; }
#coords .row{ overflow: hidden; }
#coords h3{ color: var(--colorDouceur); font-size: 3.6rem; text-align: center; margin-bottom: 1em; }
    .horaires, .coords .texte, .actu{ padding: 3vmin 5vmin; }
    .horaires ul{ display: flex; flex-direction: column; justify-content: space-evenly; height: 100%; }
    .horaires li{ text-align: center; margin-bottom: 10%; padding-bottom: 10%; position: relative; }
    .horaires li:after{ content: ''; position: absolute; bottom: 0; left: calc(50% - 2.5px); width: 5px; height: 0; border-bottom: 2px solid #fff; }
    .horaires li:last-child:after{ content: none; }
    .horaires{ background-color: #AA9B8E; color: #fff; display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; }
    .coords{ text-align: center; background-color: #fff; color: var(--colorTitre); font-size: 2.8rem; line-height: 1.2em; box-shadow: -2px 6px 10px rgb(0 0 0 / 25%); z-index: 1; position: relative; }
    .coords p{ margin-bottom: 0.2em; }
    .adresse strong{ font-size: 3.2rem; }
    .actu{ height: 100%; background-color: #E5ADAD; color: #fff; overflow: hidden; }
    .actu h3{ position: relative; padding-bottom: 1em; }
    .actu h3:after{ content: ''; position: absolute; bottom: 0; left:0; width: 30px; height: 0; border-bottom: 1px solid #fff; }
    .actu .btn-wrapper>a{ color: #fff; border-color: #fff; }
    .actu .btn-wrapper>a:hover{ background-color: rgba(255, 255, 255, 0.2); color: var(--colorDouceur); }

#gmap{ position: relative; width: 100%; height: 70vmin; overflow: hidden; }
#gmap>img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; height: 100%; width: auto; max-width: none; object-fit: cover; }
    .map-pin{ position: absolute; width: 7rem; height: 7rem; padding: 1.2rem; top: 50%; left: 50%; transform: translate(-50%,-50%); }
    .map-pin:before,
    .map-pin:after{ content: ''; background-color: var(--colorDouceur); width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.2; border-radius: 50%; }
    .map-pin:after{ width: 82.5%; height: 82.5%; }
    .map-pin img{ position: relative; z-index: 1; }
    iframe+.map-pin{ display: none; }

#photos{ padding: 13vmin 1.5rem; }
#photos img{ margin: 0.75rem 0; box-shadow: 0 3px 6px rgb(0 0 0 / 15%); }

/* Pros */
#services-pros .intro h2{ color: var(--colorDouceur); }
#services-pros .intro{ margin-bottom: 10vmin; }
#services-pros .anchors{ text-transform: uppercase; }
#services-pros .step h3{ text-transform: uppercase; }
#services-pros #form{ padding: 10vmin 0; }
#services-pros #form .intro{ max-width: 80%; }

/* Contact */
#contact #intro{ display: flex; align-items: baseline; margin: 10vmin 0; }
#contact #intro .visuel{ width: 20vmin; margin-right: 5vmin; }
#contact #intro h2{ position: relative; padding-bottom: 0.7em; }
#contact #intro h2:after{ content: ''; position: absolute; bottom: 0; left:0; width: 30px; height: 0; border-bottom: 1px solid; }

.form-floating{ margin: 0.75rem 0; color: var(--colorTitre); }
.form-floating>.form-control, 
.form-floating>.form-select{ background-color: rgb(118 76 36 / 10%); border: 0; font-size: 1.4rem; min-height: 4.5rem; color: var(--colorTitre); }
.form-floating>.form-select{ padding-top: 2rem; }
.form-floating>.form-control:focus, .form-floating>.form-control:not(:placeholder-shown){ padding-top: 3rem; }
.form-control:focus,
.form-select:focus{ border-color: var(--colorTitre); box-shadow: inset 0rem 0 0.15rem 0.15rem rgb(118 76 36 / 20%); }
.btn-check:focus+.btn, 
.btn:focus{ box-shadow: 0rem 0 0.15rem 0.15rem rgb(118 76 36 / 20%); }
.form-control.is-invalid:focus, 
.was-validated .form-control:invalid:focus{ box-shadow: inset 0 0 0 0.25rem rgb(220 53 69 / 25%); }

.form-floating>.form-control:focus, 
.form-floating>.form-control:not(:placeholder-shown){ padding-top: 2rem; }
.form-group{ display: flex; width: 100%; align-items: stretch; }
.form-group .form-floating{ width: 30%; }
.form-group .form-floating.city{ width: 70%; }

form .container-lg{ position: relative; margin-bottom: 7vmin; }
form .flex-col{ display: flex; flex-direction: column; justify-content: stretch; }
form .flex-col .auto-height,
form .flex-col .auto-height textarea{ height: 100%; }
form .submit{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }

#contact .bg-creme{ overflow: hidden; }

/* gravures */
#accueil #banniere .gravure:before{ width: 100%; opacity: 1; background-size: contain; background-position: 100% 100%; top: inherit; bottom: 0; }
#accueil #banniere .index0 .gravure:before{ background-image: url(../themes/fournils/assets/gravures/pain-gateau-chocolat.png); height: 18vmin; left: 10vmin; }
#accueil #banniere .index1 .gravure:before{ background-image: url(../themes/fournils/assets/gravures/baguettes-2.png); height: 28vmin; left: 10vmin; opacity: 0.3; background-size: 60% auto; background-position: 100% 50%; }
#accueil #banniere .index2 .gravure:before{ background-image: url(../themes/fournils/assets/gravures/entremet-fruits.png); height: 33vmin; }
#accueil #banniere .index3 .gravure:before{ background-image: url(../themes/fournils/assets/gravures/chocolat-carres.png); height: 25vmin; left: 5vmin; opacity: 0.6; }
#accueil #gamme .gravure{ padding-top: 5vmin; }
#accueil #gamme .gravure:before{ background-image: url(../themes/fournils/assets/gravures/boulanger.png); top: -5vmin; left: -8vmin; height: 35%; }
#accueil #nous .gravure:before{ background-image: url(../themes/fournils/assets/gravures/baguettes-panier.png); top: -20vmin; left: inherit; right: 5%; width: 20%; background-size: contain; }

#nos-fournils #coords{ padding-top: 10vmin; }
#nos-fournils #coords .gravure:before{ background-image: url(../themes/fournils/assets/gravures/baguettes.png); top: -30vmin; left: inherit; right: calc(var(--asideWidth) * -1); width: 50vmin; background-size: contain; opacity: 1; }

#services-pros #historique .gravure:before{ background-image: url(../themes/fournils/assets/gravures/service.png); top: -30%; left: 100%; height: 140%; width: 40vw; background-size: contain; opacity: 1; background-position: 50%50%; }
#services-pros #form .gravure:before{ background-image: url(../themes/fournils/assets/gravures/baguettes-panier.png); top: -8vmin; left: inherit; right: 0; width: 20%; background-size: contain; min-width: 170px; }

    #fete.fetes-de-fin-annee #fetes-de-fin-anneearticle .gravure:before{ background-image: url(../themes/fournils/assets/gravures/sapin.png);  top: inherit; bottom: -18%; left: -8%; width: 20%; background-size: contain; min-width: 170px; background-position: 100% 100%; height: 50%; opacity: 1; }
    #fete.fetes-de-fin-annee #produits .gravure:before{ background-image: url(../themes/fournils/assets/gravures/pain-epices.png); top: inherit; bottom: 5%; left: inherit; right: -5%; width: 20%; background-size: contain; min-width: 170px; background-position: 100% 100%; height: 35%; opacity: 1; }
    #fete.fetes-de-fin-annee #produits .visuels{ position: relative; z-index: 1; }
    
    #fete.epiphanie #epiphaniearticle .gravure:before{ background-image: url(../themes/fournils/assets/gravures/epiphanie-couronne.jpg);  top: inherit; bottom: -5%; left: -8%; width: 20%; background-size: contain; min-width: 170px; background-position: 100% 100%; height: 50%; opacity: 1; }
    #fete.epiphanie #produits .gravure:before{ background-image: url(../themes/fournils/assets/gravures/epiphanie-couronne2.jpg); top: inherit; bottom: -5%; left: inherit; right: -5%; width: 20%; background-size: contain; min-width: 170px; background-position: 100% 100%; height: 35%; opacity: 1; z-index: 2; }
    #epiphanieproduits-autres{ margin-top: 0; }

    #fete.paques #paquesarticle .gravure:before{ background-image: url(../themes/fournils/assets/gravures/paques-oeufs.png);  top: inherit; bottom: -10%; left: -8%; width: 20%; background-size: contain; min-width: 170px; background-position: 100% 100%; height: 50%; opacity: 1; }
    #fete.paques #produits .gravure:before{ background-image: url(../themes/fournils/assets/gravures/paques-lapin.png); top: inherit; bottom: -5%; left: inherit; right: -5%; width: 20%; background-size: contain; min-width: 170px; background-position: 100% 100%; height: 35%; opacity: 1; z-index: 2; }

#boulangers-du-doubs #identite .gravure:before{ background-image: url(../themes/fournils/assets/gravures/baguettes-2.png);top: 0; left: inherit; right: 0; width: 40%; max-width: 390px; background-size: contain; height: 100%; opacity: 0.2; background-position: 100% 50%; }
#boulangers-du-doubs #article3 .gravure:before{ background-image: url(../themes/fournils/assets/gravures/ble-epi.png); top: 0; left: calc(var(--asideWidth) * -1); width: 50%; background-size: contain; height: 20vmin; opacity: 1; background-position: 0 50%; transform: translateY(-100%); }

#ecrin-des-douceurs #article1 .gravure:before{ background-image: url(../themes/fournils/assets/gravures/macarons.png); top: 0; left: inherit; right: 0; width: 20%; max-width: 390px; background-size: contain; height: 40vmin; opacity: 0.6; background-position: 100% 50%; transform: translate(40%,-40%); }
#ecrin-des-douceurs #article3 .gravure:before{ background-image: url(../themes/fournils/assets/gravures/entremet.png); top: -24%; left: inherit; right: 0; width: 20%; max-width: 390px; background-size: contain; height: 40vmin; opacity: 0.6; background-position: 100% 50%; transform: translate(40%,-40%); }

#nos-produits #boulangeriearticle1 .gravure:before{ background-image: url(../themes/fournils/assets/gravures/mains-petrin.png); top: 0; left: inherit; right: 0; width: 20%; max-width: 390px; background-size: contain; height: 40vmin; opacity: 1; background-position: 100% 50%; transform: translate(0,-40%); }
#nos-produits #boulangeriearticle3 h2:before{ content: ''; background-image: url(../themes/fournils/assets/gravures/bio.png); width: 20%; height: 100%; float: right; background-size: contain; background-repeat: no-repeat; background-position: 100% 0; }
#nos-produits.boulangerie #produits .gravure:before{ background-image: url(../themes/fournils/assets/gravures/baguettes-3.png); top: 0; left: inherit; right: 0; width: 20%; max-width: 390px; background-size: contain; height: 50vmin; opacity: 1; background-position: 100% 50%; transform: translate(20%,-50%); }

#nos-produits #viennoiseriearticle1 .gravure:before{ background-image: url(../themes/fournils/assets/gravures/croissant.png); top: 0; left: inherit; right: 0; width: 25%; max-width: 390px; background-size: contain; height: 40vmin; opacity: 0.6; background-position: 100% 50%; transform: translate(-10%,-50%); }
#nos-produits.viennoiserie #produits .gravure:before{ background-image: url(../themes/fournils/assets/gravures/muffins.png); top: 0; left: 0; width: 30%; max-width: 450px; background-size: contain; height: 40vmin; opacity: 0.6; background-position: 100% 50%; transform: translate(-30%,-60%); }

#nos-produits.patisserie #produits .gravure:before{ background-image: url(../themes/fournils/assets/gravures/gateau-part.png); top: 0; left: inherit; right: 0; width: 25%; max-width: 390px; background-size: contain; height: 30vmin; opacity: 0.6; background-position: 100% 50%; transform: translate(-10%,-80%); }
#nos-produits #patisseriearticle2 .gravure:before{ background-image: url(../themes/fournils/assets/gravures/entremet-fruits.png); top: inherit; bottom: 0; left: 0; width: 30%; max-width: 450px; background-size: contain; height: 40vmin; opacity: 0.6; background-position: 100% 50%; transform: translate(-45%,80%); }

#nos-produits #salearticle2 .gravure:before{ background-image: url(../themes/fournils/assets/gravures/sandwich-triangle.png); top: 0; left: inherit; right: 0; width: 25%; max-width: 390px; background-size: contain; height: 40vmin; background-position: 100% 50%; transform: translate(-10%,-90%); opacity: 1; }
#nos-produits #salearticle3 .gravure:before{ background-image: url(../themes/fournils/assets/gravures/pizza.png); top: 0; left: 0; width: 30%; max-width: 450px; background-size: contain; height: 40vmin; opacity: 1; background-position: 100% 50%; transform: translate(-30%,-80%); }

#nos-produits #chocolats-confiseriearticle1 .gravure:before{ background-image: url(../themes/fournils/assets/gravures/chocolat-entremet.png); top: 0; left: inherit; right: 0; width: 25%; max-width: 390px; background-size: contain; height: 40vmin; background-position: 100% 50%; transform: translate(-10%,-70%); opacity: 1; }
#nos-produits #produits                     .gravure:before{ background-image: url(../themes/fournils/assets/gravures/feves-cacao.svg);  top: -3%; left: 10%; width: 23%; max-width: 390px; background-size: contain; height: 40vmin; opacity: 0.8; background-position: 100% 50%; transform: translate(-40%,-80%); }
#nos-produits #chocolats-confiseriearticle5 .gravure:before{ background-image: url(../themes/fournils/assets/gravures/macarons.png); top: 0; left: 0; width: 20%; max-width: 390px; background-size: contain; height: 40vmin; opacity: 0.6; background-position: 100% 50%; transform: translate(-40%,-80%); }


/**
 * LAYOUT
 **/
 
/* Header */
#header{ position: relative; z-index: 3; }

#headbar{ position: absolute; top: 0; width: 100%; z-index: 1; color: #fff; display: flex; align-items: center; justify-content: space-between; height: 12vmin; min-height: 60px; font-family: Aller; font-style: normal; transition: transform 0.2s ease-in-out; }
#headbar:before{ content:''; z-index: 0; position: absolute; width: 100%; height: 100%; background-color: rgb(64 22 13 / 30%); backdrop-filter: blur(3px); transition: all 0.2s linear;
    background: rgb(64 22 13 / 30%); }
#headbar>div{ z-index: 1; display: flex; justify-content: space-between; height: 100%; }
#societes{ display: flex; height: 80%; }
#societes .logo{ padding: 2vmin; }
    #h-ecrin{ background-color: rgb(255 255 255 / 0.3); }
    #h-ecrin:before{ background-image: url('../themes/fournils/assets/img/logo-ecrin-de-douceurs-min.svg'); }
    #h-fournils{ background-color: rgb(255 255 255 / 0.2); }
    #h-fournils:before{ background-image: url('../themes/fournils/assets/img/logo-aux-doux-fournils-min.svg'); }
    #h-accueil:before{ background-color: #fff; }
#headbar-menu{ display: flex; height: 100%; align-items: center; }
#headbar-menu a{ padding: 0 3vmin; }
#menu-toggler{ height: 100%; background-size: contain; font-weight: bold; display: flex; align-items: center; }
#menu-toggler:before{ position: absolute; width: 100%; height: 100%; left: 0; background-color: #fff; mask-position: 50% 80%; -webkit-mask-position: 50% 80%;
    mask-image: url(../themes/fournils/assets/img/epi-blanc.svg); -webkit-mask-image: url(../themes/fournils/assets/img/epi-blanc.svg); }
.not-top #headbar{ position: fixed; transform: translateY(-100%); }
.pinned  #headbar{ position: fixed; transform: translateY(0); }

#menu{ position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; }
#menu:before{ content: ''; position: absolute; z-index: 0; width: 100%; height: 100%; top: 0; left: 0; backdrop-filter: blur(10px); background-color: rgb(64 22 13 / 30%); }
    .bg-menu{ position: relative; z-index: 1; background-repeat: no-repeat; background-position: 0 50%; background-size: cover; height: 100%; display: flex; align-items: center; }
    .menu-logo{ width: 50%; text-align: center; }
    .menu-logo a{ display: inline-block; width: 30%; max-width: 350px; background-color: transparent; border-radius: 50%; transition: all 0.2s ease-out; }
    .menu-logo a:hover{ background-color: var(--colorDouceur); }

    .menu-box{ width: 50%; position: relative; height: 100%;  }
    .menu-box:before{ content: ''; position: absolute; width: 25px; left: 0; top: 0; height: 100%; background: url('../themes/fournils/assets/img/vague-v.svg') repeat-y; }
    .menu-box:after{ content: ''; position: absolute; width: 100%; left: 24px; top: 0; height: 100%; background-color: var(--colorCreme); }
    .menu-wrapper{ padding-left: 5rem; padding-right: 1rem; display: flex; justify-content: center; height: 100%; max-width: 700px;  }
        .primary-menu,
        .secondary-menu{ padding: 5rem 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; }
        .tertiary-menu>*{ margin-top: 5vmin; }
    .menu-wrapper ul{ margin: 0 2rem; }
    .menu-wrapper li{ margin: 0.5em 0; }
    .menu-wrapper li .max,
    .menu-wrapper li .min,
    .menu-wrapper li .med{ line-height: 1em; position: relative; font-family: Aller, Arial, Helvetica, sans-serif; font-weight: bold; color: var(--colorTitre); font-size: 3rem; white-space: nowrap; display: flex; margin-top: 3.5vh; align-items: center; }
    .menu-wrapper li .max{ margin-bottom: 3.5vh; padding-bottom: 3.5vh; }
    .menu-wrapper li .min{ margin-top: 3.5vh; padding-top: 3.5vh; }
    .menu-wrapper li .med{ font-size: 2.6rem; padding-top: 3.5vh; }
    .menu-wrapper li .max:before,
    .menu-wrapper li .min:before,
    .menu-wrapper li .med:before{ content: ''; position: absolute; width: 40px; border-bottom: 1px solid; height: 0; top: 0; left: 2rem; transition: all 0.2s ease-in; }
    .menu-wrapper li .max:before{ top: inherit; bottom: 0; }
    .menu-wrapper li:first-child .med:before{ content: none; }
    .menu-wrapper ul ul{ margin-left: 2rem; }
    .menu-wrapper ul ul li a:before{ content: '-'; margin-right: 0.2em; line-height: 1.2em; }
    .primary-menu a{ display: flex; align-items: center; line-height: 1.2em; transition: all 0.2s ease-in; }
    .primary-menu a:after{ content: ''; margin-left: 0.5em; width: 0.5em; min-width: 0.5em; height: 0.5em; background: url(../themes/fournils/assets/img/fleche.svg) no-repeat 0 50%; transition: all 0.2s ease-in; }
    .primary-menu a:hover{ transform: translateX(0.2em); }
    .primary-menu a:hover:after{ transform: translateX(0.5em); }
    .menu-wrapper li a.max:hover:before,
    .menu-wrapper li a.min:hover:before,
    .menu-wrapper li a.med:hover:before{ transform: translateX(-0.2em); }

    .ico.contact{ display: flex; flex-direction: column-reverse; align-items: center; justify-content: baseline; }
    .socials-wrapper{ display: flex; flex-direction: column; align-items: center; justify-content: baseline; }
    .socials{ display: flex; align-items: center; justify-content: center; }
    .socials a { padding: 0 7px; }

    #menu .close{top: 3vmin; right: 3vmin; width: 2.5vmin; height: 2.5vmin; min-width: 20px; min-height: 20px; }
    
    /* animation menu */
    .loading #menu{ opacity: 0; }
    #menu{ pointer-events: none; }
    #menu:before{ opacity: 0; transition: all 0.7s cubic-bezier(.23,.66,.84,.45); }
    .menu-logo{ transform: translateX(100vw);
        -webkit-animation: 0.5s slide-out-right 0.2s cubic-bezier(0.895, 0.030, 0.685, 0.220) both;
                animation: 0.5s slide-out-right 0.2s cubic-bezier(0.895, 0.030, 0.685, 0.220) both; }
    .menu-box{ transform: translateX(100vw);
        -webkit-animation: 0.5s slide-out-right cubic-bezier(0.895, 0.030, 0.685, 0.220) both;
                animation: 0.5s slide-out-right cubic-bezier(0.895, 0.030, 0.685, 0.220) both; }
    .close{ opacity: 0; transition: all 0.3s ease-out 0s; }

    body.open{ overflow: hidden; }
    body.open #menu{ pointer-events: inherit; }
    body.open #menu:before{ opacity: 1; }
    body.open .menu-logo{ transform: translateX(0); 
        -webkit-animation: 1.1s bounce-in-right 0.7s both; 
                animation: 1.1s bounce-in-right 0.7s both; }
    body.open .menu-box{ transform: translateX(0); 
        -webkit-animation: 1s slide-in-right 0.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
                animation: 1s slide-in-right 0.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}
    body.open .close{ opacity: 1; transform: rotate(360deg); transition: all 0.7s ease-out 0.7s; }


/* Main */
/* #main{ padding-top: 100vmin; } */

#banniere{ height: 17vmin; min-height: 85px; position: relative; width: 100%; z-index: 2; transition: top 0.2s ease-in-out;
    clip-path: url(../themes/fournils/assets/css/#mask-vague); }
#banniere:after{ content: ''; position: absolute; z-index: 1; width: 100%; height: 16px; bottom: -1px; left: 0; background: url(../themes/fournils/assets/img/vague-h.svg) repeat-x 50% 105%; }
#banniere .swiper{ padding-bottom: 0; width: 100%; }
/* #banniere .swiper-pagination-bullet{ background-color: #fff; } */

/* #banniere.not-top{ position: fixed; top: -25vmin; height: 25vmin; }
#banniere.pinned { position: fixed; top: 0; } */


/* Footer */
#plaisir .titre{ padding: 0 5vmin; }
#plaisir .titre h2{ font-size: 7.2rem; }
#plaisir .titre h2:before{ content: '«'; margin-right: 0.5em; }
#plaisir .titre h2:after{ content: '»'; margin-left: 0.5em; }
#plaisir .titre p{ font-size: 2.6rem; color: #fff; }
#plaisir .swiper-slide{ padding: 0 5vmin; }
#plaisir .texte{ max-width: 960px; margin: 0 auto; }

#instagram{ padding-top: 10vmin; padding-bottom: 5vmin; }
#fb{ background-size: cover; background-repeat: no-repeat; background-position: 50% 100%; background-color: #eff2f5;   
    min-height: calc( var(--containerWidth) * 0.4); display: flex; align-items: center; overflow: hidden; }

#map{ padding: 10vmin 0; }
#map .row{ align-items: center; }
#map h2{ margin-top: 0; }
    
    .pin:before{ mask-image: url(../themes/fournils/assets/img/pin.svg); -webkit-mask-image: url(../themes/fournils/assets/img/pin.svg); width: 22px; min-width: 22px; height: 30px; }
    .pin.fournil-du-larmont:before{ background-color: #862900; }
    .pin.fournil-amancey:before{ background-color: #6A1E48; }
    .pin.fournil-du-lac:before{ background-color: #BBAF8F; }
    .pin.fournil-saonois:before{ background-color: #AA1D23; }
    .pin.fournil-de-morteau:before{ background-color: #7C481A; }
    .pin.epicerie-du-val-usiers:before{ background-color: #CE242A; }

    .fournils.list{  columns: 2; margin-top: 13vmin; }
    .fournils.list li{ margin: 0 1em 1em 0; }
    .fournils.list li a{ text-decoration: none; text-transform: uppercase; font-weight: 700; white-space: nowrap; display: flex; align-items: center; }
    .fournils.list a:before{ margin-right: 0.5em; transition: all 0.2 ease-in; }
    .fournils.list a:hover:before{ margin-right: 1em; }
    .fournils.list .pin{ transition: all 0.2s ease-out; }

    .fournils.list .pin.fournil-du-larmont:hover{ color: #862900; }
    .fournils.list .pin.fournil-amancey:hover{ color: #6A1E48; }
    .fournils.list .pin.fournil-du-lac:hover{ color: #BBAF8F; }
    .fournils.list .pin.fournil-saonois:hover{ color: #AA1D23; }
    .fournils.list .pin.fournil-de-morteau:hover{ color: #7C481A; }
    .fournils.list .pin.epicerie-du-val-usiers:hover{ color: #CE242A; }

    .fournils.map{ position: relative; }
    .fournils.map img{ display: block; }
    .fournils.map .pin{ position: absolute; width: 5%; height: 7%; transform: translate(-50%, -50%); overflow: visible; cursor: pointer; }
    .fournils.map .pin:before{ transition: all 0.2s ease-out; width: 100%; height: 100%; }
    .fournils.map .pin:hover:before{ transform: scale(1.2); }
    .fournils.map .pin.fournil-du-larmont{ top: 68.6%; left: 59.8%; }
    .fournils.map .pin.fournil-amancey{ top: 52.3%; left: 47.8%; }
    .fournils.map .pin.fournil-du-lac{ top: 76%; left: 58.6%; }
    .fournils.map .pin.fournil-saonois{ top: 38%; left: 47.7%; }
    .fournils.map .pin.fournil-de-morteau{ top: 50.1%; left: 70.5%; }
    .fournils.map .pin.epicerie-du-val-usiers{ top: 61.4%; left: 57.2%; }

    .fournils.map .pin{ z-index: 1; }
    .fournils.map .pin.open{ z-index: 2; }
    .fournils.map .pin.open{ z-index: 2; }
    .open > .card.fournil{ display: block; }
    .card.fournil{ display: none; position: absolute; bottom: 100%; left: -110px; width: 250px; z-index: 1; padding: 2rem; background-color: var(--colorCreme); 
        -webkit-animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }
    .card.fournil p.nom{ font-size: 1.6rem; }
    .card.fournil p{ margin-bottom: 0.5em; }

#footer{ background-color: var(--colorCreme); color: var(--colorTitre); position: relative; }
#footer .wrapper{ position: relative; padding: 5vmin 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
#footer .wrapper>*{ display: flex; flex-direction: column; justify-content: center; }
#footer .miche:before{ left: 0; background-position: 100% 50%; transform: translate(-40%, -50%); }

#footer .mini-menu a{ font-size: 1.6rem; margin: 0.4em 0; display: block; }

.footer-logo{ justify-content: center; width: 25%; }
.footer-logo img{ display: inline-block; max-width: 200px; margin: auto; }
.labels{ justify-content: space-between; }
.labels img{ display: block; max-height: 45%; width: 150px; }
.labels img + img{ margin-top: 2rem; }
#footer .ico.contact{ flex-direction: column; margin-bottom: 4vmin; }

#footer-legal{ font-size: 1.4rem; clear: both; }
#footer-legal ul{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
#footer-legal li{ padding: 0.5rem; white-space: nowrap; }

#click-outside{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; 
    transition: all 0.2s ease-in; }
#click-outside.open{ pointer-events: inherit; }

.fancybox__track{ justify-content: flex-end; transform: none !important; }
.fancybox__carousel.is-draggable .fancybox__slide{ flex-direction: column; align-items: flex-end; justify-content: flex-end; width: auto; padding: 10vmin; max-width: 650px; }
.fancybox__carousel .fancybox__slide .fancybox__content{ display: flex; max-width: 50vw; border-radius: 3vmin; padding: 5vmin; background-color: #DA787F; color: #fff; }
.fancybox__content>.carousel__button.is-close{ top: 10px; right: 10px; }
.fancybox__content :focus:not(.carousel__button.is-close){ outline: none; }
.fancybox__slide::before, 
.fancybox__slide::after{ content: none; }
.carousel__button svg{ filter: none; }
.fancybox__track h5{ font-size: 3rem; color: #fff; margin-top: 0; }
.fancybox__track .btn-wrapper a{ color: #fff; border-color: #fff; }
.fancybox__backdrop{ background: rgb(255 255 255 / 20%); backdrop-filter: blur(3px); }
body.admin:after{ content:"xl"; position: fixed; bottom: 0; right: 0; padding: 5px 10px; line-height: 30px; background-color:#EEE; z-index: 1000; }

/**
 * XXL
 **/
@media (min-width: 1400px) {
body.admin:after{ content:"xxl"; background-color: black; }
    #fb{ background-size: auto 100%; }
}

/**
 * XL
 **/
@media (max-width: 1399px) {
body.admin:after{ content:"xl"; background-color: red; }

    .menu-box { min-width: 700px; }
    .menu-logo a{ min-width: 200px; }
    #nos-fournils #coords .gravure:before{ top: -20vmin; }

}

/**
 * LG
 **/
@media (max-width: 1199px) {
body.admin:after{ content:"lg"; background-color: orange; }

    .container-xl{ padding-left: 3vmin; padding-right: 3vmin; }
}

/**
 * MD
 **/
@media (max-width: 991px) {
body.admin:after{ content:"md"; background-color: green; }
html{ font-size: 9px; }

    .container-lg { padding-left: 3vmin; padding-right: 3vmin; }
    
    .menu-box { min-width: 380px; }
    .menu-wrapper{ flex-direction: column; align-items: flex-start; padding-top: 5rem; padding-bottom: 5rem; }
    .primary-menu,
    .secondary-menu{ padding: 0; }
    .menu-wrapper li:first-child .med:before{ content: ''; }

    #accueil .pinned.top  #headbar:before{ transform: translateX(50%); }

    #footer:before{ content: none; }
    .fournils.list{  columns: inherit; display: none; }
    .fournils.map{ width: 90%; max-width: 500px; margin: 5vmin auto 0; }
    .gravure.miche:before{ content: none; }

    /* Accueil */
    #accueil #banniere .swiper-pagination{ left: 54%; }
    .banner-slide .logo{ margin-right: 0; }

    /* nos-fourils */
    .actu{ margin-top: 5vmin; }

    /* Notre maison */
    #historique .anchors{ position: absolute; height: 100vh; width: 10vw; min-width: 50px; z-index: 1; font-size: 2.5rem; }
    #historique .anchors ul{ flex-direction: column; height: 100vh; }
    #historique .anchors li{ width: 100%; }
    #historique .anchors ul:before{ position: static; height: 10vh; }
    #historique .step { padding-left: 12vw; }
    #services-pros .anchors li a span { transform: rotate(-90deg); font-size: 2rem; }
}

/**
 * SM
 **/
@media (max-width: 767px) {
body.admin:after{ content:"sm"; background-color: blue; }

    .casper-sm{ display: none; }
    .menu-logo a { width: 70%; min-width: 150px; }
    .bg-menu{ justify-content: flex-end; }
    .menu-box { min-width: inherit; width: 380px; max-width: 98%; }
    .menu-wrapper li .max{ font-size: 2.5rem; }
    .menu-wrapper li .min{ font-size: 2.5rem; }
    .menu-wrapper li .med{ font-size: 2.2rem; }

    .card.fournil { left: -120px; width: 200px; }
    
    #footer .wrapper{ flex-wrap: wrap; }
    #footer .wrapper>*{ width: 50%; }
    .footer-logo img{ max-width: 150px; }
    
    #fb .row{ justify-content: flex-end; text-align: right; }
    #fb .text{ max-width: 460px; }
    #fb.pain:before{ content: none; }

    .fancybox__carousel .fancybox__slide{ max-width: 100vmin; }
    .fancybox__carousel .fancybox__slide .fancybox__content{ max-width: 80vmin !important; }
    
    #banniere:after,
    .vague:before, 
    .vague:after{ background-size: auto 70%; }

    .titre p{ line-height: 1.2em; font-size: 2rem; }
    #plaisir h2{ font-size: 6rem; line-height: 1em; margin-top: 1em; }

    .visuels-out{ margin: 0; padding: 8vmin 0 10px; }
    .visuels-out .visuels{ margin: 0vmin 0; }

    .article.overflow-top{ padding-bottom: 10vmin; }
    .article.overflow-top .visuels{ justify-content: center; transform: none; }
    .article.overflow-btm .visuels{ justify-content: center; transform: none; }
    .article.vpics .visuels { justify-content: flex-start; }
    .article.text4pic5{ padding-bottom: 4vmin; }
    .article.text4pic5 .visuels { justify-content: center; transform: none; }

    .texte{ margin-bottom: 2vmin; }

    /* Accueil */
    #accueil #banniere .swiper-pagination{ left: 46%; }

    /* Nos fourils */
    .horaires ul{ flex-wrap: wrap; align-items: baseline; flex-direction: row; }
    .horaires li{ padding: 1em; margin-bottom: 0; }
    .horaires li:after{ content: none; }

    /* Notre maison */
    #maison .visuel img { margin-top: 5vmin; }
    #lieux .teaser { margin-bottom: 5vmin; }
    #historique .step.odd .texte,
    #historique .step.odd .visuel{ order: inherit; }
    #historique .step .visuel:before{ content: none; }
    #historique .step .texte { min-height: 0; }
    #historique .step .img-wrapper{ transform: none !important; margin-bottom: 5vmin; height: auto; }
    #historique .step .img-wrapper img{ position: static; transform: none; }
    
}

/**
 * XS
 **/
@media (max-width: 575px) {
body.admin:after{ content:"--"; background-color: yellow; }
html{ font-size: 8px; }

    #menu-toggler:before { mask-position: 100% 90%; -webkit-mask-position: 100% 90%; }
    .menu-logo{ display: none; }

    #accueil .pinned.top  #headbar:before{ transform: none; backdrop-filter: none; }
    #footer .wrapper{ flex-direction: column; justify-content: center; text-align: center; }
    #footer .wrapper>*{ width: auto; min-width: 150px; margin: 2vmin 0; }
    .labels img{ max-height: none; }
    #fb{ background-size: auto 70%; }
    #fb .text{ padding-bottom: 15vmin; }

    #banniere:after,
    .vague:before, 
    .vague:after{ background-size: auto 40%; }

    .btn-wrapper > a { margin: 0.5em 0; }

    h2 br{ display: none; }

    /* Accueil */
    #accueil .top #headbar{ color: #fff; }
    #accueil .top #h-accueil:before,
    #accueil .top #menu-toggler:before{ background-color: #fff; }
    #accueil #banniere { background-color: var(--colorCreme); }
    #accueil #banniere .swiper-slide{ max-height: none; }
    .banner-slide{ display: flex; flex-direction: column; }
    .banner-slide > .img{ position: relative; order: 1; }
    .banner-slide > .img img{ position: static; transform: none; order: 1; }
    .banner-slide > .img:after{ content: ''; position: absolute; width: 100%; height: 20px; left: 0; bottom: 0; background: url(../themes/fournils/assets/img/vague-h.svg) repeat-x 50% 100%; background-size: auto 40%; }
    .banner-slide > div{ order: 2; }
    .banner-slide .logo{ position: absolute; top: -56vw; width: 100%; height: 56vw; }
    .banner-slide .logo img{ max-width: 200px; max-height: 200px; width: auto; margin: 20vmin 10vw 10vw; }
    .banner-slide .texte{ min-height: 0; padding: 10vmin; }
    .banner-slide .texte:before{ content: none; }
    #accueil #banniere .swiper-pagination { display: flex; flex-direction: row; justify-content: center; top: 58vw; left: 0; height: 8px; width: 100%; }
    #accueil #banniere .swiper-pagination-bullet { margin: 0 4px; }

    /* Boulangers du doubs */
    #identite h1{ font-size: 5rem; margin: 10vmin 0; }

    #boulangers-du-doubs #banniere .logo{ max-width: calc( var(--containerWidth) * 0.25); top: 70px; }
    #boulangers-du-doubs #identite{ padding-top: 20vmin; }
    #boulangers-du-doubs #identite h1{ width: auto; font-size: 6rem; }
    #nos-maisons #banniere .logo{ max-width: calc( var(--containerWidth) * 0.25); top: 70px; }
    #nos-maisons #identite{ padding-top: 20vmin; }
    #nos-maisons #identite h1{ width: auto; font-size: 6rem; }
    #ecrins-des-douceurs #banniere .logo{ max-width: calc( var(--containerWidth) * 0.25); top: 70px; }
    #ecrins-des-douceurs #identite{ padding-top: 20vmin; }
    #ecrins-des-douceurs #identite h1{ width: auto; font-size: 6rem; }

    /* Notre maison */
    #historique .anchors{ font-size: 2rem; font-weight: bold; }
    #historique .step { padding-left: 60px; padding-right: 10px; }
    #historique .step h3{ font-size: 4rem; }
    #historique .step h4{ font-size: 3.6rem; }
    #historique .step .visuel { padding: 0; }

    
    #boulangers-du-doubs #identite .gravure:before{ content: none; }
}

@media (max-height: 800px) {
    .menu-wrapper{ overflow-y: scroll; justify-content: flex-start; }
}

/* CONTAINER */
body{ --containerWidth: 100%; }
@media (min-width:  576px){ body{ --containerWidth:  540px; } }
@media (min-width:  768px){ body{ --containerWidth:  720px; } }
@media (min-width:  992px){ body{ --containerWidth:  960px; } }
@media (min-width: 1200px){ body{ --containerWidth: 1140px; } }
@media (min-width: 1400px){ body{ --containerWidth: 1320px; } }