/* 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); }
/**
 * Layout
 **/
#grid{ position: fixed; z-index: 11; max-width: var(--containerWidth); width: 100vw; height: 100vh; left: 0; right: 0; margin: auto; pointer-events: none; mix-blend-mode: multiply;}
#grid .col-1{ height: 100%; }
#grid .col-1 span{ display: block; height: 100%; background-color: #BFFFFF; opacity: 0.1; }

.overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; display: flex; align-items: center; justify-content: center; z-index: 1; background: rgb(62 64 64 / 80%); transition: all 0.3s linear; }
.overlay .alert{ position: relative; border-radius: 0; border: 1px solid #000; color: #000; }
.overlay .alert:before{ content: ''; position: absolute; right: -1.5rem; top: -1.5rem; color: var(--jaune); font-family: var(--textFont); font-size: 3rem; background: url(/themes/serac/assets/img/plus.svg) no-repeat 100% 0; background-size: 200%; transform: rotate(45deg); width: 3rem; height: 3rem; }
.overlay .alert-success{ background-color: var(--jaune); }
.overlay .alert-danger{ background-color: var(--grisActuC); }


 /* Global */
#page { position:relative; width:100%; overflow:hidden; z-index: 1; }

/* Header */

#header{ background-color: #000; font-family: var(--titleFont); z-index: 10; position: fixed; top: 0; left: 0; width: 100%; height: calc(var(--headerHeight) + var(--headerTopHeight)); }
#header > .container-lg { display: flex; align-items: flex-start; justify-content: space-between; height: 0; }

#header .menu-top{display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; min-height: var(--headerTopHeight);}
#header .bot-menu{display: flex; flex-direction: row; align-items: center; justify-content: space-between; height: var(--headerHeight); width: 100%;}
.menu-top a,.bot-menu a {text-decoration: none;}
.menu-top a:hover,.bot-menu a:hover {color: var(--jaune);}
#header .menu {flex-direction: column;}

#header .top-menu-left {display: flex; flex-direction: row; align-items: center; gap: 35px; color: #fff; opacity: .7;}
#header .top-menu-right {display: flex; flex-direction: row; align-items: center; gap: 35px; color: #fff; opacity: .7;}

#menu .title{ color: var(--jaune); text-transform: uppercase; display: flex; margin-top: 5vh; margin-bottom: .5em; }
#menu .resp {display: none;}
    #site-name{ width: 33rem; min-width: 33rem; order: 2; position: relative; top: 0; z-index: 2; padding-bottom: 7.5rem; }
    #site-name:after{ content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-color: #000;
    clip-path: polygon(0% 0%, 100% 0%, 100% 67%, 50% 100%, 0% 67%); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 67%, 50% 100%, 0% 67%); }
    /*#site-name:after{ content: ''; display: block; mask-image: url(../img/h2.svg);  -webkit-mask-image: url(../img/h2.svg);  top: 100%; width: 100%; height: 50%; margin: 0; mask-position: 50% -1px; -webkit-mask-position: 50% -1px; background-color: #000; position: absolute; z-index: 0; }*/
    #site-name .h1{ background-color: #000; margin: 0; position: relative; height: 15rem; padding-top: calc(var(--headerHeight) + var(--headerTopHeight)); }
    #site-name .h1:after{ content: none; }
        #logo-serac{ height: var(--headerHeight); display: flex; align-items: center; justify-content: center; padding: 1rem 2rem; top: 0px; width: 33rem; z-index: 1; background-color: #000; }
        #logo-serac img{ display: flex; align-items: center; }
        #logo-serac:after{ background-color: var(--jaune) ; display: block; margin: 10px auto 0; mask-image: url(../themes/serac/assets/img/h2.svg); -webkit-mask-image: url(../themes/serac/assets/img/h2.svg); position: absolute; top: 5.5rem; width: 50%; height: 50%; }

        #logo-tfm{ display: flex; align-items: baseline; justify-content: center; padding: 1rem 2rem; height: 100%; }
        #logo-tfm img{ display: flex; align-items: center; max-height: 160%; }

    #right-menu{ order: 3; width: 33%; text-transform: uppercase; color: #fff; height: var(--headerHeight); line-height: 1em; padding: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 35px; }
        .hamburger{ position: relative; z-index: 2; }
        .hamburger-box{ margin-left: 0.5em;}
        .hamburger-inner, 
        .hamburger-inner:after, 
        .hamburger-inner:before,
        .hamburger.is-active .hamburger-inner, 
        .hamburger.is-active .hamburger-inner:after, 
        .hamburger.is-active .hamburger-inner:before{ background-color: var(--jaune); }
        .hamburger:hover,
        .hamburger.is-active:hover{ opacity: 1; }

    #menu-toggler {display: none;}
    #menuv2 .h1 {margin: 0;}
    #left-menu{width: 33%; padding-right: 3em; height: var(--headerHeight); display: flex; align-items: center; gap: 35px; color: #fff; }
    #left-menu a, .pointer_menu {text-decoration: none; transition: all .4s ease; cursor: pointer;}
    #left-menu a:hover, .pointer_menu:hover {color: #F8E01A;}
    /* #search-block .search-form{ height: var(--searchFormHeight); border: 1px solid var(--jaune); display: flex; align-items: center; background-color: #000; }
    #search-block   input{ width: 100%; color: var(--blanc); line-height: var(--searchFormHeight); padding-left: 0.5rem; background: transparent none; border: 0; }
    #search-block   button{ border: 0; background: transparent none; min-width: var(--searchFormHeight); padding: 0; height: var(--searchFormHeight); width: var(--searchFormHeight); display: flex; align-items: center; justify-content: flex-start; margin: 0; }
    #search-block   button:before{ width: calc(var(--searchFormHeight) / 1.7); min-width: calc(var(--searchFormHeight) / 1.7); height: calc(var(--searchFormHeight) / 1.7); margin: 0.7rem 0.9rem;} */

    .logo_tf {position: absolute; top: calc(var(--headerHeight) + var(--headerTopHeight)); left: 0; right: 0; margin: auto; z-index: 2; width: max-content;}

#menu{ position: fixed; top: var(--headerHeight); z-index: 1; height: calc(100% - var(--headerHeight)); overflow-y: scroll; background-color: rgb(0 0 0 / 90%); font-family: var(--titleFont); transition: all 0.7s ease-out; width: 100%; transform: translateY(-100%);  }
#menu .container-lg{ padding-top: 15rem; padding-bottom: 1rem; }
    .menu-pages{ text-align: start; }
    .menu-pages > * { display: flex; justify-content: flex-end; }
    .menu-pages hr{ display: inline-block; max-width: 30rem; }
    #menu .resp a,
    .menu-pages a{ display: inline-block; white-space: nowrap; position: relative; text-transform: uppercase; color: var(--blanc); text-decoration: none; font-size: 2rem; padding: .45em 0; }
    .menu-pages a:after{ content: ''; width: 0; height: 0; border-bottom: 1px solid var(--jaune); position: absolute; bottom: 1.2rem; left: 50%; transition: all 0.3s ease-out; }
    .menu-pages a:hover{ color: var(--jaune); }
    .menu-pages a:hover:after{ width: 100%; left: 0%; }
    .menu-pages a.ico.mail{ margin-right: 0; display: flex; justify-content: flex-end; float: right; }
.not-top + #menu{ margin-top: -10rem; }
.open .not-top + #menu{ margin-top: 0; }
.open #menu{ transform: translateY(0); }


#horraire{ position: fixed; top: var(--headerHeight); z-index: 1; height: calc(100% - var(--headerHeight)); overflow-y: scroll; background-color: rgb(0 0 0 / 90%); font-family: var(--titleFont); transition: all 0.7s ease-out; width: 100%; transform: translateY(-100%);  }
#horraire .title{ color: var(--jaune); text-transform: uppercase; display: flex; margin-top: 5vh; margin-bottom: .5em; }
#horraire .container-lg{ padding-top: 15rem; padding-bottom: 1rem; }
#horraire .unhorraire {color: #fff; display: flex; flex-direction: row;}
#horraire .unhorraire .jour {min-width: 120px;}
#horraire h3 {color: #fff; text-align: start;}
#horraire .horraire {display: flex; flex-direction: column; gap: 16px;}
.not-top + #horraire{ margin-top: -10rem; }
.open-horraire .not-top + #horraire{ margin-top: 0; }
.open-horraire  #horraire{ transform: translateY(0); }
    
    .contact{ color: var(--jaune); padding: .45em 0; display: flex; align-items: center; justify-content: flex-start; margin-top: 2.75em; line-height: 2rem; }
    .contact a{ text-decoration: none; margin-right: 2em; }
    .contact a:hover{ color:var(--blanc); }

    .promotions .heading{ color: var(--blanc); text-transform: uppercase; font-size: 2rem; margin: 1em 0 .5em; }
    .promotions .heading a{ display: inline-block; white-space: nowrap; position: relative; text-transform: uppercase; color: var(--blanc); text-decoration: none; font-size: 2rem; padding: .45em 0; }
    .promotions .heading a:after{ content: ''; width: 0; height: 0; border-bottom: 1px solid var(--jaune); position: absolute; bottom: 1.2rem; left: 50%; transition: all 0.3s ease-out; }
    .promotions .heading a:hover{ color: var(--jaune); }
    .promotions .heading a:hover:after{ width: 100%; left: 0%; }
    .promotions   .list-items{ display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin: 0 -1.5% }
        
        .promo{ width: 30%; position: relative; margin: 1.5%; }
        .promo > *{ transition: all 0.3s linear; }
        .promo .title{ margin: 0; position: absolute; bottom: 0; left: 0; max-width: 100%; transform: translate(0); white-space: nowrap; text-transform: uppercase; color: var(--grisF);  z-index: 1; margin-top: 1em; margin-bottom: 0.5em; }
        .promo .title strong{ padding: 0 .5rem; max-width: 100%; text-overflow: ellipsis; overflow: hidden; display: block; }
        .promo .prom{ opacity: 0; margin-bottom: 0; position: absolute; bottom: -1px; min-width: 35%; text-transform: uppercase; color: var(--jaune); background: url(../themes/serac/assets/img/card-mini-g.svg) no-repeat 0 100%; background-size: 100%; z-index: 2; font-size: 3rem; line-height: 1em; }
        .promo img{ max-width: 100%; }
        
        .promo:before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../themes/serac/assets/img/card-mini-j.svg) no-repeat 50% 100%; background-size: 120%; transition: all 0.3s linear; }
        .promo:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--grisActuF); opacity: 0; }
        
        .promo:hover:before{ opacity: 0; }
        .promo:hover:after{ opacity: 0.7; }
        .promo:hover .prom{ opacity: 1; }
        .promo:hover .title{ bottom: 50%; left: 50%; width: auto; transform: translate(-50%, 50%); }

    .coords{ color: var(--blanc); display: flex; justify-content: flex-start; align-items: flex-start; margin: 1em 0; gap: 2em; }
    .coords .ico{ align-items: baseline; }
        .adresse.ico{ display: grid; grid-template-columns: 40px 1fr; }
        .adresse.ico:before{ background-color: var(--blanc); grid-column: 1 / span 1; height: 35px; transform: translateY(5px); }
        .adresse h3{ grid-column: 2 / span 1; margin-bottom: 0.3em; margin-top: 0; }
        .adresse p{ grid-column: 2 / span 1; margin-bottom: 0.3em; }
        .horaires.ico{ display: grid; grid-template-columns: 40px 1fr; }
        .horaires.ico:before{ background-color: var(--blanc); grid-column: 1 / span 1; transform: translateY(10px); }
        .horaires p{ grid-column: 2 / span 1; margin-bottom: 0.3em; }

    .social p{ color: var(--jaune); text-transform: uppercase; display: flex; }
    .social p a:hover:before{ background-color: var(--blanc); }
    .social p span{ margin-right: 1em; }

#aside-menu{ transform: rotate(-90deg) translateX(97.7%); transform-origin: bottom right; background-color: var(--jaune);  position: fixed; right: 0; bottom: 6.95vw; z-index: 5; display: flex; align-items: center; justify-content: space-evenly; 
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 2.3% 100%); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 2.3% 100%); }
#aside-menu a{ text-decoration: none; color: #000; font-family: var(--titleFont); text-transform: uppercase; line-height: var(--headerHeight); margin: 0; padding: 0 2em; }
#aside-menu a.shop{ border-left: 1px solid #000; }
#aside-menu a:before{ background-color: #000; transform: rotate(90deg); }


/* Footer */
#footer{ background-color: var(--grisF); padding: 2rem 0; font-family: var(--titleFont); }
#footer .container{}
#footer   .foot-head{ display: flex; align-items: center; justify-content: flex-end; }
    #newsletter{}
    #newsletter .fieldset{ display: flex; align-items: center; justify-content: stretch; border: 1px solid var(--jaune); padding-left: 0.5rem; }
    #newsletter label{ color: var(--jaune); text-transform: uppercase; margin-bottom: 0.5rem;}
    #newsletter input{ color: var(--grisM); }
    #newsletter button{ color: var(--jaune); text-transform: uppercase; background-color: transparent; border: 0 none; margin: 0; outline: none; }

    #plus-que-pro{ display: flex; align-items: center; justify-content: center; margin: 1rem 0 2rem; }
    #plus-que-pro .logo{ max-width: 140px; margin-right: 2rem; }
    #plus-que-pro .widget{ }
        #plus-que-pro .PQP-widget--A { background: transparent; border: none; }
        #plus-que-pro .PQP-widget .PQP-widget__link-container,
        #plus-que-pro .PQP-widget__rating .PQP-widget__rating__note,
        #plus-que-pro .PQP-widget__rating .PQP-widget__rating__note-max{ color: var(--blanc); font-family: var(--titleFont); letter-spacing: 0.1em; }
        #plus-que-pro .PQP-widget__n-reviews{ font-style: normal; }
        #plus-que-pro .PQP-widget__picto-next{ display: none; }

    #back-top{ text-transform: uppercase; color: var(--blanc); text-decoration: none; position: relative;}
    #back-top:before{ content: ''; background-color: var(--jaune) ; display: block; width: 50px; height: 10px; margin: 0 auto 5px; transform: rotate(180deg);
    mask-image: url(../themes/serac/assets/img/h2.svg); -webkit-mask-image: url(../themes/serac/assets/img/h2.svg); }
    #back-top:after{ content: ''; width: 0; height: 0; border-bottom: 1px solid var(--jaune); position: absolute; bottom: .2rem; left: 50%; transition: all 0.3s ease-out; }
    #back-top:hover{ color: var(--jaune); }
    #back-top:hover:after{ width: 100%; left: 0%; }

#footer .coords-block{ display: flex; flex-direction: column; justify-content: space-between; }
#footer .contact{ margin-top: 0; }

#footer .menu-pages{ column-count: 2; column-gap: 2rem; margin: 5rem 0 1.6rem; }
#footer .menu-pages li a{ font-size: 1.8rem; padding: 0.3em 0; }
#footer .menu-pages li a:after{ bottom: .5rem;}

#footer p.legals{ display: flex; align-items: center; justify-content: flex-end; font-size: 1.4rem; font-family: var(--textFont); }
#footer p.legals a{ color: var(--jaune); padding: 0 2rem; text-decoration: none; opacity: 0.4; z-index: 1; }
#footer p.legals a:hover{ opacity: 1; }



/* Main */
#main{ z-index: 0; position: relative; display: flex; flex-direction: column; padding-top: var(--headerHeight); overflow: hidden; }
#main > #intro{ order: 1; position: relative; top: -1px; background-color: #fff; z-index: 1; }
#main > #visuels{ order: 0; z-index: 2; }
#main > section{ order: 2; z-index: 1; background-color: #fff; }

#visuels{ position: relative; overflow: hidden; height: calc(100vmin - var(--headerHeight) - 11rem); background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); 
    clip-path: polygon(0% 0%, 100% 0%, 100% 82%, 50% 99.9%, 0% 82%); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 82%, 50% 99.9%, 0% 82%); }

/*#visuels:before{ content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 3000px; height: 0; padding-top: 205px; background-color: #fff; z-index: 4; pointer-events: none;
    clip-path: polygon(0% 0%, 50% 99%, 100% 0%, 100% 100%, 0% 100%); -webkit-clip-path: polygon(0% 0%, 50% 99%, 100% 0%, 100% 100%, 0% 100%); 
    /*mask-image: url(../img/img_v_mask.svg); -webkit-mask-image: url(../img/img_v_mask.svg);
    mask-position: 50% 100%; -webkit-mask-position: 50% 100%;
    mask-size: 100% auto; -webkit-mask-size: 100% auto;*/ }
#visuels:after{ content: ''; position: absolute; bottom: 0px; left: 0; width: 100%; height: 1px; background-color: #fff; z-index: 4; }
#visuels   .swiper-container{ height: 100%; }
#visuels   .swiper-container-horizontal > .swiper-pagination-bullets{ margin-bottom: 2vw;}
#visuels   .swiper-pagination-bullet{ border-radius: 0; width: 1.6rem; height: 1.6rem; margin: 0 0.7rem; }
#visuels   .swiper-slide{ position: relative; background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); }
#visuels     .container { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding-bottom: 8vw; }
#visuels     .h1,
#visuels     h2{ z-index: 1; color: var(--blanc); text-transform: uppercase; margin: 0; margin-bottom: 8vw; max-width: 50%; text-align: left; min-width: 1em; min-height: 1em; }
#visuels     h2:after{ content: none; }
#visuels     img{ mix-blend-mode: multiply; width: 100%; }

#visuels .slide-text{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; }
#visuels .slide-text img.ligne-lumiere{ width: auto; max-width: 35%; }
#visuels .slide-text p.description{ text-transform: uppercase; color: var(--blanc); font-size: 5.5rem; line-height: 1.3em; margin: 1em 0 0; }
/**
 * General Elements
 **/
:root{
    --containerWidth: 1320px;
    --asideWidth: calc( ((100vw - var(--containerWidth)) / 2) + (1.5rem / 2) );
    
    --blanc: #f1f1f1;
    --jaune: #f8e01a;
    --grisF: #404040;
    --grisM: #737373;
    --grisActuF: #a8a8a8;
    --grisActuC: #d4d4d4;
    
    --titleFont: 'fjalla', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    --textFont: 'faricy-new-web', Arial, sans-serif;

    --swiper-theme-color: var(--jaune);
    --headerHeight: 6.5rem;
    --headerTopHeight:48px;
    --searchFormHeight: 4rem;
}
html{ font-size: 10px; }
body{ font-size: 1.8rem; font-family: var(--textFont); }

.menu_bot {display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end;}

/* 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; }
.lazyload[data-src] { opacity: 0; transition: opacity 0.2s ease-in; }
.lazyloaded[data-src] { opacity: 1; }

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

*:before,
*:after{
    mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; 
    mask-size: contain; -webkit-mask-size: contain; 
    mask-position: 50% 50%; -webkit-mask-position: 50% 50%; 
}
.svg-bg{
    mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; 
    mask-size: cover; -webkit-mask-size: cover; 
    mask-position: 50% 50%; -webkit-mask-position: 50% 50%;
}

/* Titles */
h1, .h1, h2, h3, .h3, h4, h5{ font-family: var(--titleFont); font-weight: normal; margin: 1.5em 0 0.5em; }
h1, .h1, h2{ font-size: 4rem; text-align: center; text-transform: uppercase;}
h1:after, 
h2:after{ content: ''; background-color: var(--jaune) ; display: block; width: 50px; height: 10px; margin: 10px auto 0; 
    mask-image: url(../themes/serac/assets/img/h2.svg); -webkit-mask-image: url(../themes/serac/assets/img/h2.svg); }
h3,.h3{ font-size: 3rem; }

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

hr{ width: 100%; height: 1px; border: 0; background-color: var(--jaune); margin: 0.5em 0; opacity: 1; }

.exergue{ color: var(--grisActuF); font-family: var(--titleFont); font-size: 1.9rem; }

.columns-2c-g2rem{ column-count: 2; column-gap: 2rem; }

.fullW{ width: 100vw; transform: translateX(calc( var(--asideWidth) * -1 )); }

/* Link */
a { color:inherit; }
a:hover { text-decoration:none; }

.ico{ display: flex; align-items: center; margin-right: 1em; }
.ico:before{ content: ''; background-color: var(--jaune); width: 3rem; min-width: 3rem; height: 3rem; margin-right: 0.5em; }
.ico.notext{ overflow: hidden; white-space: nowrap; width: 3rem; }
.ico.notext:before{ margin-right: 0; }
.ico.facebook:before{ mask-image: url(../themes/serac/assets/img/fb.svg); -webkit-mask-image: url(../themes/serac/assets/img/fb.svg); }
.ico.youtube:before{ mask-image: url(../themes/serac/assets/img/youtube.svg); -webkit-mask-image: url(../themes/serac/assets/img/youtube.svg); }
.ico.tel:before{ mask-image: url(../themes/serac/assets/img/tel.svg); -webkit-mask-image: url(../themes/serac/assets/img/tel.svg); }
.ico.mail:before{ mask-image: url(../themes/serac/assets/img/mail.svg); -webkit-mask-image: url(../themes/serac/assets/img/mail.svg); }
.ico.shop:before{ mask-image: url(../themes/serac/assets/img/cart.svg); -webkit-mask-image: url(../themes/serac/assets/img/cart.svg); }
.ico.search:before{ mask-image: url(../themes/serac/assets/img/search.svg); -webkit-mask-image: url(../themes/serac/assets/img/search.svg); }
.ico.horaires:before{ mask-image: url(../themes/serac/assets/img/time.svg); -webkit-mask-image: url(../themes/serac/assets/img/time.svg); }
.ico.adresse:before{ mask-image: url(../themes/serac/assets/img/pin.svg); -webkit-mask-image: url(../themes/serac/assets/img/pin.svg); }

.dl{ display: flex; align-items: baseline; padding: 0 0.5rem; text-decoration: none; }
.dl:hover{ background-color: #f2e01b; color: inherit; }
.dl:before{ content: ''; background-image: url(../themes/serac/assets/img/paperclip.svg);width: 1.5rem; min-width: 1.5rem; height: 1.5rem; margin-right: 0.2em; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; }

.plus{ display: block; width: 5rem; min-width: 5rem; height: 5rem; white-space: nowrap; text-indent: 5rem; overflow: hidden; background: url(../themes/serac/assets/img/plus.svg) no-repeat 0 50%; background-size: 100% auto; margin: auto; }
.plus:hover{ background-position: 100% 50%; }

.goto{ text-transform: uppercase; color: var(--jaune); position: relative; display: flex; align-items: center; justify-content: flex-end; text-decoration: none; }
.goto:after{ content: ''; display: block; width: 3.6rem; min-width: 3.6rem; height: 5rem; white-space: nowrap; text-indent: 5rem; overflow: hidden; background: url(../themes/serac/assets/img/goto.svg) no-repeat 0 50%; background-size: 200% auto; margin-left: 1em; }
.goto:hover{ color: var(--blanc); }
.goto:hover:after{ background-position: 100% 50%; }

.casper{ display: none; }

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

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

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

input,
select,
textarea,
input{ border: 0; background-color: transparent; border-radius: 0; }

.btn{ display: inline-block; border-radius: 0; margin: 1em auto; background-color: #000; border: 1px solid var(--jaune); text-transform: uppercase; font-size: 2rem; font-family: var(--titleFont); color: var(--jaune); padding: 0.5rem 1rem; }
.btn:hover{ background-color: var(--jaune); color: #000; }

#header .btn.yellow {margin: 0;}
.btn.yellow {background-color: #F8E01A; color: #000; display: flex; flex-direction: row; gap: 16px; align-items: center;}



/*
 * ------------------- PAGES -------------------------------
 */

/* ACCUEIL */
#accueil #visuels{ background: #F1F1F1; height: 50vh; }
#accueil #visuels .btns {display: flex; flex-direction: row; justify-content: start;}
#accueil #visuels .btns a {margin: 0;}
#accueil #visuels .row {align-items: stretch;}
#accueil #visuels .swiper-slide {background: inherit;}
#accueil .visuel_left { height: auto; align-items: flex-end; display: flex; flex-direction: column; justify-content: center; }
#accueil .visuel_left .content {max-width: calc(1340px / 2 ); padding-right: 5vw; }
#accueil .visuel_left .content > div {display: flex; flex-direction: column; gap: 36px;}
#accueil .visuel_left h1 {color: #000; margin: initial;text-align: start; max-width: initial;}
#accueil .visuel_left h1::after {content: initial;}
#accueil #visuels {-webkit-clip-path: initial; clip-path: initial;}


#accueil .actualites{ position: relative; overflow: visible; z-index: 1; }
#accueil .actualites .fleche-anim-bg{ content: ''; position: absolute; left: 0; top: 0; background-color: #dfdfdf; width: 50vw; height: 56vw; max-width: 750px; max-height: 750px;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%); -webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%); }
#accueil .actualites .fleche-anim-bg.end{ transform: rotate(180deg); top: inherit; bottom: 250px; left: inherit; right: 0; }

.actualites .container-lg{ padding-left: var(--headerHeight); padding-right: var(--headerHeight); position: relative; z-index: 1; }

#main > section#selection{ background-color: transparent; }
#selection .selection-list{ position: relative; background-color: var(--grisActuF); margin-top: 5rem; padding: 0 7.5rem; }
#selection .swiper-container{ max-width: calc(100% - 10rem); margin: auto; }
#selection .swiper-slide{ height: auto; }
#selection .swiper-slide:before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; border:3rem solid #fff; border-left-color: var(--grisF); border-right-color: var(--grisF); }
#selection .swiper-button-prev{ padding: 0 7px; left: 7.5rem; transform: rotate(180deg); }
#selection .swiper-button-next{ padding: 0 7px; right: 7.5rem; }
#selection .swiper-button-next:after, 
#selection .swiper-button-prev:after{ content: ''; width: 100%; height: 100%; background-color: #000;
        clip-path: polygon(0% 0%, 100% 50%, 0% 100%); -webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%); }

    .selection-item{ position: relative; overflow: hidden; height: 100%;width: 100%; display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-end; margin: auto; transition: all 0.3s linear; }
    .selection-item .text{ transition: all 0.3s linear; position: relative; z-index: 2; margin-top: 80%; padding: 1.5rem; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: start; color: #FFF; }
    .selection-item .text:before{ content: ''; position: absolute; z-index: -1; width: 100%; height: calc(100% + 40px); left: 0; top: -40px; background-color: var(--grisM);
        clip-path: polygon(-1px 40px, 50% 0, 101% 40px, 100% 100%, -1px 101%); -webkit-clip-path: polygon(-1px 40px, 50% 0, 101% 40px, 100% 100%, -1px 101%); }
    .selection-item .text h3{ margin-top: 0.7em; text-align: right; font-size: 2.6rem; }
    .selection-item .text .description{ font-size: 1.6rem; line-height: 1.2em; }
    .selection-item .text .description p{ margin-bottom: 0.5em; }
    .selection-item .text a.plus{ position: absolute; z-index: 2; top: -34px; left: 50%; transform: translate(-50%, -50%);}
    .selection-item .text-hover{ transition: all 0.3s linear; opacity: 0; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
    .selection-item .text-hover a{ color: #fff; text-align: center; text-decoration: none; display: flex; flex-direction: column; margin: 0;}
    .selection-item .text-hover a:before{ width: 5rem; height: 4rem; }
    .selection-item .text-hover a strong{ display: block; color: var(--jaune); font-weight: normal; text-transform: uppercase; }
    .selection-item .main-image{ position: absolute; z-index: 1; width: 100%; height: 100%; background-color: #000; }
    .selection-item .main-image img{ position: absolute; min-width: 100%; min-height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .selection-item.odd .text{ color: var(--blanc); }
    .selection-item.odd .text:before{ background-color: var(--grisF); }

    .selection-item:hover{ transform: scale(0.9, 0.92); }
    .selection-item:hover .text{ transform: translateY(150%); }
    .selection-item:hover .text-hover{ opacity: 1; }
    .selection-item:hover .main-image img{ opacity: 0.1; }

#video iframe{ display: block; width: 100vw; height: 56vw; max-height: calc(100vh - var(--headerHeight));}

#qualites{ position: relative; padding-top: 6.5rem; }
#qualites:before{ content: ''; position: absolute; top: 0; left: 0;width: 100%; height: 100%; background-color: var(--blanc);
    clip-path: polygon(0 80px, 50% 0, 100% 80px, 100% 100%, 0 100%); -webkit-clip-path: polygon(0 50px, 50% 0, 100% 50px, 100% 100%, 0 100%); }
#qualites .container{ z-index: 1; position: relative; }
#qualites ul{ display: flex; align-items: flex-start; justify-content: space-evenly; }
#qualites li{ max-width: 18rem; color: var(--grisF); text-transform: uppercase; font-family: var(--titleFont); text-align: center; }
    .picto{ display: block; max-width: 18rem; }
    .picto.circle{ position: relative; width: 18rem; height: 18rem; display: flex; align-items: center; justify-content: center; }
    .picto.circle:before{ content: ''; position: absolute; width: calc(100% - 4px); height: calc(100% - 4px); left: 2px; top: 2px; border: 1px solid var(--grisF); border-radius: 50%; }
    .picto.circle img{ max-height: 9rem; max-width: 9rem; opacity: 0.75; }
    .picto.circle svg{ stroke: var(--grisF); position: absolute; width: 100%; height: 100%; left: 0; top: 0; transform: rotate(-90deg); stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 5px; }
    .picto.circle svg circle{ stroke-dasharray: 1000;  stroke-dashoffset: 1000; }
    .picto.circle.animate svg circle{ animation: dash 3s cubic-bezier(0,.37,.78,.6) forwards ; }
    .picto-text{ display: block; margin: 1em 0; line-height: 1.3em; font-size: 2.2rem; }
    @keyframes dash {
        to {
            stroke-dashoffset: 0;
        }
    }

#visite-virtuelle { padding:50px 0; background-color:#000 !important; }

/* ENTREPRISE */
#entreprise #main{ background: var(--grisF); }

#entreprise #visuels{ background: #fff; }
#entreprise #visuels:before,
#entreprise #visuels:after { background-color: var(--grisF); }

#entreprise #intro{ background-color: var(--grisF ); }
#entreprise #intro h1{ color: var(--blanc); }
#entreprise #intro h1:after{ background-color: var(--jaune); }
#entreprise #intro .exergue{ margin: 2em 0;}
#entreprise #intro .section-contact{ background-color: #000; text-align: center; }
#entreprise #intro .section-contact:after{ content: ''; background-color: var(--jaune); transform: rotate(180deg); display: block; width: 50px; height: 10px; margin: 0 auto; 
    mask-image: url(../themes/serac/assets/img/h2.svg); -webkit-mask-image: url(../themes/serac/assets/img/h2.svg); }

#entreprise #historique{ color: #000; padding-bottom: 6.5rem; background-color: var(--jaune); }
#entreprise #historique h2:after{ background-color: #000; }
    .time-items{ background: url(../themes/serac/assets/img/dash-line.svg) repeat-y 50% 0; background-size: 1px auto; }
    .time-items h3{ width: 50%; font-size: 8rem; color: var(--jaune); text-shadow: 0 0 3px #000; border-bottom: 1px solid #000; position: relative; margin-top: 0.5em; }
    .time-items h3:after{ content: ''; position: absolute; left: calc(100% - 8px); bottom: -1px; width: 15px; height: 15px; background-color: #000; }
    .time-items :nth-child(4n +3) { text-align: right; left: 50%; }
    .time-items :nth-child(4n +3):after { left: -8px; }
    .time-items p{ text-align: center; background-color: var(--jaune); max-width: 500px; margin: auto; line-height: 2em; }

/* ACTUALITES / PROMOS */
#actu-promo .actualites{ margin-top: 5rem; }
.actualite{ position: relative; padding: 3rem; }
.actualite.odd{ background-color: var(--blanc); }
.actualite.odd .row{ flex-direction: row-reverse; }
.actualite .row{ justify-content: center; }
.actualite .description{ display: flex; flex-direction: column; align-items: flex-start;  }
.actualite h2{ text-align: left; text-transform: none; font-size: 3rem; margin-top: 0; /* font-family: var(--textFont); */}
.actualite h2:after{ content: none; }
.actualite h3{ font-size: 4.5rem; font-weight: bold; color: #000; background-color: var(--jaune); font-family: var(--textFont); padding: 10px 20px; margin-top: .5rem; }
.actualite hr{ background-color: #000; }
.actualite .promo-block{ text-align: center; }
.actualite p.date{ background-color: #000; padding: 2px 4px; color: var(--jaune); margin-bottom: 0.5rem; }
.actualite .col-right{ position: relative; }
.actualite a.fancybox{ display: block;}
.actualite a img{ width: 100%; padding: .5rem; }
.actualite .thumbs{ display: flex; align-items: center; justify-content: flex-start; }
    .a2a_default_style{ position: absolute; top: 0.4rem; right: 1.2rem; width: 3.6rem; height: 5rem; background-color: var(--jaune); 
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%); }
    .a2a_default_style a{ display: block; width: 3.6rem; height: 5rem; background-color: #000;
        mask-image: url(../themes/serac/assets/img/share.svg); -webkit-mask-image: url(../themes/serac/assets/img/share.svg); }
    .a2a_default_style:hover{ background-color: #000; } 
    .a2a_default_style:hover a{ background-color: #fff; } 
.actualite iframe { max-width:100% !important; }

.actus-list{ justify-content: space-evenly; max-width: 1100px; margin: 6.5rem auto; flex-wrap: wrap; }
.actus-list a {text-decoration: none;}
.actus-list a:hover {color: initial;}
.actus-list > div{ margin-bottom: 3rem; }

    .actu{ position: relative; height: 100%; width: 100%; display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-end; max-width: 330px; margin: auto; }
    .actu .text{ position: relative; z-index: 1; padding: 1.5rem; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: start; }
    .actu .text:before{ content: ''; position: absolute; z-index: -1; width: 100%; height: calc(100% + 40px); left: 0; top: -40px; background-color: var(--blanc);
        clip-path: polygon(-1px 0, 50% 40px, 101% 0, 100% 100%, -1px 101%); -webkit-clip-path: polygon(-1px 0, 50% 40px, 101% 0, 100% 100%, -1px 101%); }
    .actu .text h3{ margin-top: 0.7em; text-align: right; font-size: 2.6rem; }
    .actu .text h4{ font-family: var(--textFont); font-size: 6.5rem; font-weight: bold; margin: 0; color: var(--blanc); }
    .actu .text .description{ font-size: 1.6rem; line-height: 1.2em; }
    .actu .text .description p{ margin-bottom: 0.5em; }
    .actu .text a.plus{ position: absolute; z-index: 1; top: -6px; left: 50%; transform: translate(-50%, -50%);}
    .actu .a2a_default_style{ top: 0; right: 0; }
    .actu  img{ position: relative; z-index: 0; width: 100%; }
    .actu.promotion .text:before{ background-color: var(--grisActuF); }
    .actu.promotion .text h3{ color: #fff; }



/* PRODUITS */
#produits #main{ overflow: visible;}
#produits h1{ margin-bottom: 1.5em; }

    #filtres{ margin: 1em 0 1.5rem; border-bottom: 1px solid var(--grisF); position: relative; z-index: 10; }
    #filtres-toggler{ text-transform: uppercase; color: var(--grisF); position: relative; display: flex; align-items: center; justify-content: flex-end; text-decoration: none; margin-bottom: 5px; }
    #filtres-toggler:after{ content:''; width: 1.5em; min-width: 1.5em; height: 1.5em; background: url(../themes/serac/assets/img/filtres.svg) no-repeat 50% 50%; margin-left: 1em; }
    #filtres-items{ position: absolute; top: 100%; right: 0; text-align: right; overflow: hidden; }
    #filtres-items ul{ transform: translateY( calc(-100% - 10px) ); transition: all 0.7s linear; }
    #filtres-items li{ background-color: var(--jaune); margin-top: 5px; text-transform: uppercase; padding: 0.1em 0.5em; cursor: pointer; opacity: 0.9; }
    #filtres-items li:hover{ opacity: 1; }
    #filtres.open ul{ transform: translate(0, 0); }

    #produits-items{ min-height: 200px; display: flex; flex-wrap: wrap; }
        .produit-wrapper{ height: auto; }
        .produit-wrapper.invisible{ display: none; }
        .produit{ position: relative; z-index: 1; width: 100%; height: calc(100% - 15px); display: flex; flex-direction: column; max-width: 360px; margin: 0 auto 1.5rem; }
        .produit .text{ order:2; padding: 50px 15px 0; position: relative; z-index: 1; height: 100%; margin-top: -50px; display: flex; flex-direction: column; justify-content: space-between; color: var(--blanc);
            clip-path: polygon(0% 0, 50% 35px, 100% 0, 100% 100%, 0% 100%); -webkit-clip-path: polygon(0% 0, 50% 35px, 100% 0, 100% 100%, 0% 100%); }
        .produit .text h3{ font-family: var(--textFont); margin-top: 0; }
        .produit.clair .text{ background-color: var(--grisM); }
        .produit.fonce .text{ background-color: var(--grisF); }
        .produit img{ order: 1; position: relative; z-index: 0; width: 100%; }

        .catalogues{ order: 3; position: relative; }
        .produit.clair .catalogues{ background-color: var(--grisM); }
        .produit.fonce .catalogues{ background-color: var(--grisF); }        
        .catalogues .goto{ cursor: pointer; align-items: flex-end; }
        .catalogues ul{ transition: all 0.7s linear; position: absolute; top: 100%; width: 100%; transform: translateY(-100%); z-index: -1; border-top: 1px solid #000;  }
        .catalogues li{ background-color: var(--jaune); margin-top: 5px; text-transform: uppercase; padding: 0.1em 0.5em; opacity: 0.9; }
        .catalogues li:hover{ opacity: 1; }
        .catalogues li a{ color: #000; text-decoration: none; display: block; text-align: right; }
        .produit.closing{ z-index: 4; }
        .produit.open{ z-index: 4; }
        .produit.open .catalogues ul{ transform: translateY(0); }



/* CONTACT */
#contact{ color: #000; background-color: var(--jaune); }
#contact #main > #intro,
#contact #visuels:before,
#contact #visuels:after{ background-color: var(--jaune); }

#contact h1:after, 
#contact h2:after{ background-color: #000; }
#contact h2{ text-align: left; }
#contact h2:after{ content: none; }

#contact h2{ font-family: var(--titleFont); font-size: 2rem; text-transform: uppercase; margin-bottom: 2em; }
.publi-form-label{ font-family: var(--titleFont); font-size: 2rem; text-transform: uppercase; height: 4rem; padding: 0.6rem 0 0.4rem 2rem; line-height: 4rem; background: url(../themes/serac/assets/img/arrow-right.svg) no-repeat 0 50%; background-size: auto 2rem; display: flex; align-items: center; }

    .publi-form-item{ margin: 0 0 1.5rem; }
    .publi-form-control{ font-size: 1.6rem; border-radius: 0; width: 100%; }

    .publi-form-text .publi-form-label{ display: none; }
    .publi-form-text .publi-form-control{ background-color: transparent; border: 0; border-bottom: 1px solid #000; background: url(../themes/serac/assets/img/arrow-right.svg) no-repeat 0 50%; background-size: auto 2rem; height: 4rem; padding: 0.6rem 0 0.4rem 2rem; line-height: 4rem; }
    .publi-form-text .publi-form-control::placeholder{ font-family: var(--titleFont); text-transform: uppercase; color: #000; opacity: 0.5; }

    .publi-form-checkboxes{ padding-top: 1em; }
    .publi-form-check{ display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; margin: 0 0 1em; }
    .publi-form-check .publi-form-check-label{ font-family: var(--textFont); text-transform: uppercase; margin-left: 0.8em; font-size: 1.4rem; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .publi-form-check .publi-form-check-input{ border: 1px solid #000; width: 2rem; min-width: 2rem; height: 2rem; background-color: transparent; border-radius: 0; 
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        -webkit-print-color-adjust: exact;
        color-adjust: exact; }
    .publi-form-check .publi-form-check-input:checked{ background: url('../themes/serac/assets/img/checked.svg') no-repeat 50% 50%; background-size: 1.4rem; }
    
    .textarea-column{ display: flex; flex-direction: column; align-items: stretch; justify-content: space-between;}
    .publi-form-textarea{ height: calc(100% - 14rem); }
    .publi-form-textarea .publi-form-control{ border: 1px solid #000; padding: 0.6rem 0 0.4rem; height: 100%; }

    .form-invalid-feedback{ font-size: 1.4rem; color: #800; min-height: 3.5rem; padding: 0.5em 0.2em; opacity: 0; }
    .form-invalid-feedback.visible{ opacity: 1; }

    .publi-form-submit{ display: flex; align-items: center; justify-content: center; }
    .publi-form-submit:before,
    .publi-form-submit:after{ content: ''; display: inline-block; padding: 0.6rem 0 0.4rem; width:2rem; height: 4rem; line-height: 4rem; background: url(../themes/serac/assets/img/arrow-right.svg) no-repeat 50% 50%; background-size: auto 2rem; }
    .publi-form-submit:after{ transform: rotate(180deg); }
    .publi-form-submit button{ font-family: var(--titleFont); font-size: 2.3rem; text-transform: uppercase; padding: 0.1em 0.6em 0; transition: all 0.3s linear; margin: 1em 0; }
    .publi-form-submit button:hover{ padding: 0.1em 0.3em 0; }

#contact #coordonnees{ color: var(--blanc); z-index: 2; }
#contact #coordonnees .container{ position: relative; padding-bottom: 2rem; height: 100%; top: var(--headerHeight); }
#contact #coordonnees .container:before{ content: ''; position: absolute; top: 0; height: 100%; width: 83.3333333333%; left: 0; right: 0; margin: auto; background-color: #000; z-index: -1; }
#contact #coordonnees h2{ color: var(--jaune); font-size: 3rem; margin-bottom: 0.7em; }
#contact #coordonnees h3{ color: var(--jaune); margin-bottom: 0.2em; margin-top: 1em;}
#contact #coordonnees .col-g{ justify-content: space-between; display: flex; flex-direction: column; }
#contact #coordonnees .tel-mail{ font-family: var(--titleFont); margin-top: 3rem; }
#contact #coordonnees .tel-mail a{ color: var(--jaune); text-decoration: none; margin: 1em 0; }
#contact #coordonnees .ico:before{ background-color: var(--jaune); }
#contact .captcha{ display: flex; align-items: center; justify-content: center; }

/* #contact_forms_flash:before{ content: ""; position: fixed; z-index: 1; top: 0; left: 0; width: 100vw; height: 100vh; backdrop-filter: blur(3px); background-color: rgb(0 0 0 / 20%); transition: all .3s linear; } */
#contact_forms_flash .alert{ position: fixed; z-index: 2; top: 50vh; left: 50vw; transform: translate(-50%, -50%); min-width: 40%; }
#contact_forms_flash .alert .close{ border: 0; background-color: transparent; font-size: 2em; float: right; line-height: 0.5em; }

#main > section#map{ background-color: #000; }
#map iframe { width: 100%; display: block; height: calc(100vmin - 13rem); opacity: 0.9; }

#accueil .categori_promo {padding: 5vh 0;}

.categori_promo .cat {box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);}
.categori_promo a:hover {color: initial;}
.categori_promo .date,
.listing_all_promo .unepromo .date {background-color: #000; color: #F8E01A; text-transform: uppercase; width: max-content; padding: 4px 8px;}
.categori_promo .plus_cat {display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; font-weight: 700;}
.categori_promo .top  {display: flex; flex-direction: column; gap: 1.6rem;}
.categori_promo .right  {display: flex; flex-direction: column; justify-content: space-between;}
.categori_promo .right h3  {margin: 0;}
.categori_promo a {text-decoration: none;}

.listing_all_promo .title {text-align: center;}
.listing_all_promo hr {margin: 3vh 0; background-color: #ccc;}
.listing_all_promo .unepromo {align-items: center;}
.listing_all_promo .unepromo .btn {width: max-content; align-items: flex-start; margin: 0; margin-top: 2vh;}

#promo-detail .listing_all_promo {padding-top: 300px;}
#promo-detail h1 { text-align: start;}
#promo-detail h1::after { content: initfial;}

.listing_all_articles {padding-bottom: 5vh;}
.listing_all_articles h3{margin: 1em 0;}
.listing_all_articles .ref {background-color: #000; color: #F8E01A; padding: 4px; width: max-content; text-transform: uppercase;}
.listing_all_articles .content {padding: 2rem;}
.listing_all_articles .unarticle {box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12); padding: 0;}
.unarticle .bot_article {display: flex; flex-direction: row; align-items: center; justify-content: space-between;}
.unarticle .bot_article .prix {width: max-content; display: flex; flex-direction: column;}
.unarticle .bot_article .prix .h3 {margin: 0; display: flex; align-items: flex-start; gap: 4px;}
.unarticle .bot_article .btn {width: max-content;}
.unarticle .ht {color: #6C6C6C; font-size: 1.6rem;}
.unarticle .ttc {color: #6C6C6C;}


/* LEGAL */
#main > section.legal{ margin: 15rem 0; }
#main > section.legal h2{ font-size: 3rem; }
#main > section.legal h2:after{ content: none; }

/* merci */

#core-merci { display:flex; align-items:center; justify-content:center; min-height:100vh; background:#f8e01a; color:#404040; }
    --jaune: #f8e01a;
    --grisF: #404040;
    --grisM: #737373;
#core-merci .main { width:100%; }
#core-merci .content { text-align:center; }
#core-merci .content h1 { font-weight:500; font-size:40px; text-transform:uppercase; display:flex; flex-direction:column; justify-content:center; align-items:center; }
#core-merci .content hr { margin:30px auto; max-width:50px; height:3px; background:#404040; border:none; }
#core-merci .content .code { font-size:120px; font-weight:300; }
#core-merci .content .btn { color:#404040; background:transparent; border:2px solid #404040; border-radius:99px; padding:10px 15px; text-transform:uppercase; margin:20px 10px 0 10px; display:inline-block; font-size:13px; transition:all 0.5s ease 0s; }
#core-merci .content .btn:hover { text-decoration:none; background:#737373; color:#FFF; }

#content_blog {padding: 5vh 0;}
#content_blog h2 {text-align: left; padding: 3vh 0;}
#content_blog h3 {padding: 2vh 0;}
#content_blog h2::after {content: initial;}

#blog-detail #visuels .h1 {position: relative;}
body.admin:after{ content:"xxl"; position: fixed; bottom: 0; right: 0; padding: 5px 10px; line-height: 30px; background-color:black; color: #fff; z-index: 1000; }
/**
 * XXL
 **/
@media (min-width: 1400px) {

}

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

#accueil .visuel_left .content {padding: 20px;}

}

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

.logo_tf {display: none;}

#header {height: var(--headerHeight);}
.menu-top {display: none !important;}
 #menu-toggler {display: block;} 
#left-menu {display: none;}
#right-menu {display: none;}

#menu .resp {display: flex; flex-direction: column;}
#menu .title {display: none;}
}

/**
 * MD
 **/
@media (max-width: 991px) {

#accueil #visuels {height: initial;}
#accueil .visuel_left {order: 2; align-items: flex-start;}
#accueil .visuel_right {order: 1;}
body.admin:after{ content:"md"; background-color: green; }
html{ font-size: 9px; }
:root{ --containerWidth: 720px; }

    h3{ font-size: 2rem; }
    p { font-size: 1.5rem; }
    .columns-2c-g2rem{ column-count: 1; }

    .not-top + #menu{ margin-top: 0; }
    #menu .container-lg{ padding-left: 1em; padding-right: 8.5rem; }
    .contact{ flex-wrap: wrap; }
    .contact a{ white-space: nowrap; }
    .coords{ flex-wrap: wrap; }
    .coords p{ white-space: nowrap; }
    
    #footer .menu-pages{ column-count: 1; }

    #visuels .container { padding-bottom: 15vw; }
    #visuels .slide-text p.description{ font-size: 6rem; margin-top: .5em;}

    .actu .text h3 { font-size: 2.2rem; }
    .actu .text h4 { font-size: 4.5rem; }
    .actu .text p + p { display: none; }

    #contact .publi-form-check { margin: 0 0 0.5em; }
    #contact #coordonnees .container:before{ width: calc(100% - 15px); }

    #promo-detail .listing_all_promo {padding-top: 100px;}
}

/**
 * SM
 **/
@media (max-width: 767px) {
body.admin:after{ content:"sm"; background-color: blue; }
html{ font-size: 8px; }
:root{ --containerWidth: 540px; 
       --headerHeight: 45px;
       --searchFormHeight: 3rem; }

    #site-name{ padding-bottom: 0; top: 0 !important; width: auto; min-width: auto; }
        #site-name:after{ content: none; }
        #site-name .h1{ height: auto; padding: 0; }
            #logo-serac{ position: static; width: auto; padding: 10px 0; display: block; }
            #logo-serac img{ max-height: 100%; height: 100%; }
            #logo-tfm{ display: none; }
        
        #header .menu {height: 100%; padding: 0 20px;}
        .hamburger .text {display: none;}
        .hamburger {padding: 0;}
        .menu-pages {text-align: start !important;}
    /* #menu-toggler{ position: absolute; right: 0; width: auto; }
    #menu-toggler .text{ display: none; }
        .hamburger{ padding: 0; width: 65px; height: 55px; background-color: var(--jaune); clip-path: polygon(0 0, 100% 0, 100% 45px, 50% 100%, 0 45px); -webkit-clip-path: polygon(0 0, 100% 0, 100% 45px, 50% 100%, 0 45px); top: 0px; position: absolute; }
        .hamburger-box{ margin: 0; }
        .hamburger-inner, 
        .hamburger-inner:after, 
        .hamburger-inner:before,
        .hamburger.is-active .hamburger-inner, 
        .hamburger.is-active .hamburger-inner:after, 
        .hamburger.is-active .hamburger-inner:before{ background-color: #000; } */

    #search-block{ width: auto; position: absolute; left: 0.8rem; z-index: 2; padding-right: 0; max-width: calc(100% - 280px); }
    #search-block .search-form{ justify-content: flex-end; }

    #menu .order-md-1{ display: flex; flex-direction: column; }

    .vr { text-align:right; }
    
    #menu .container-lg { padding-top: 5rem; padding-right: 5.5rem; }
    .menu-pages,
    .promotions .heading{ text-align: center; }
    .contact{ order: 2; }
    .contact{ margin-top: 1em; }
    .contact a { margin: 0.5em 0; }
    .contact,
    .coords{ flex-direction: column; display: none; }
    .coords{ order: 3; }
    .social{ order: 4; display: none; }
    .social p{ justify-content: center; }
    .promotions{ order: 1; }
    .promotions .heading{ margin: 1em 0; border-top: 1px solid var(--jaune); }
    .promotions .list-items{ display: none; }
    #menu hr{ display: none; }

    #contact #coordonnees .coords{ display: block; }

    #footer{ padding: 2rem 6.5rem;}
    #footer .menu-pages { margin: 1rem; }
    #footer .coords-block{ order: 2; }
    #footer .container > .row{ display: none; }
    #footer hr{ display: none; }
    #footer p.legals{ justify-content: center; flex-wrap: wrap; margin-top: 4rem; }
    #footer .foot-head{ flex-wrap: wrap; flex-direction: column; align-items: center; }
    #footer #newsletter{ order: 2; }
    #footer #plus-que-pro{ order: 1; width: 100%; margin: 2rem 0; }
    #footer #back-top{ order: 0; }
    
    #visuels .slide-text p.description { font-size: 5rem; }

    .swiper-container,
    .swiper-slide-active .selection-item{ max-width: 320px; }
    .swiper-slide-active .selection-item{ transform: scale(0.9, 0.92); }
    #selection .swiper-container{max-width: 320px; }
    #qualites ul{ flex-direction: column; align-items: center; }
    #qualites ul li{ margin-bottom: 2rem; }

    /*
    .swiper-slide-active .selection-item .text{ transform: translateY(150%); }
    .swiper-slide-active .selection-item .text-hover{ opacity: 1; }
    .swiper-slide-active .selection-item .main-image img{ opacity: 0.1; }*/

    #contact #coordonnees .row > div[class^='col-']{ padding-left: 10vw; padding-right: 10vw; }
}

/**
 * XS
 **/
@media (max-width: 575px) {
body.admin:after{ content:"xs"; background-color: yellow; }
:root{ --containerWidth: 100%; --bs-gutter-x: 20px; }

    h1, h2 { font-size: 3rem; }
    .fullW{ transform: translateX(-20px); }
    
    #aside-menu{ bottom: 35%; padding: 0 1.5rem; clip-path: polygon(0% 0%, 92% 0%, 100% 100%, 8% 100%); -webkit-clip-path: polygon(0% 0%, 92% 0%, 100% 100%, 8% 100%); }
    #aside-menu a{ overflow: hidden; white-space: nowrap; width: 5rem; padding: 0 1rem; }
    #aside-menu a:before{ margin-right: 1em; }

    #visuels .h1, 
    #visuels h2{ max-width: none; }

    #accueil #visuels .btns {flex-direction: column; gap: 16px;}
}
/**
 * XXS
 **/
@media (max-width: 410px) {
body.admin:after{ content:"xxs"; background-color: orangered; }
:root{ --containerWidth: 100%; --bs-gutter-x: 20px; }
    #search-block{ max-width: 35px; transition: all 0.3s linear; }
    #search-block.closed input{ padding: 0; width: 0; }
    #search-block.open{ max-width: 100%; }
    #search-block button:before { margin: 0.7rem 0.6rem; }

    
    #visuels .slide-text p.description { font-size: 3rem; }
}


/**
 * MaxH
 **/
@media (max-height: 540px) {
    #aside-menu{ padding: 0 1.5rem; clip-path: polygon(0% 0%, 92% 0%, 100% 100%, 8% 100%); -webkit-clip-path: polygon(0% 0%, 92% 0%, 100% 100%, 8% 100%); }
    #aside-menu a{ overflow: hidden; white-space: nowrap; width: 5rem; padding: 0 1rem; }
    #aside-menu a:before{ margin-right: 1em; }
}