/* 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); }
/**
 * @license
 * MyFonts Webfont Build ID 4567640, 2022-03-23T12:37:14-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Gilroy-Medium by Radomir Tinkov
 * URL: https://www.myfonts.com/fonts/radomir-tinkov/gilroy/medium/
 * 
 * Webfont: Gilroy-Bold by Radomir Tinkov
 * URL: https://www.myfonts.com/fonts/radomir-tinkov/gilroy/bold/
 * 
 * 
 * Webfonts copyright: Copyright � 2016 by Radomir Tinkov. All rights reserved.
 * 
 * © 2022 MyFonts Inc
*/


/* @import must be at top of file, otherwise CSS will not work */

  
@font-face {
  font-family: "Gilroy-Bold";
  src: url('../themes/bachesfevre/assets/fonts/gilroy/webFonts/GilroyBold/font.woff2') format('woff2'), url('../themes/bachesfevre/assets/fonts/gilroy/webFonts/GilroyBold/font.woff') format('woff');
}
@font-face {
  font-family: "Gilroy-Medium";
  src: url('../themes/bachesfevre/assets/fonts/gilroy/webFonts/GilroyMedium/font.woff2') format('woff2'), url('../themes/bachesfevre/assets/fonts/gilroy/webFonts/GilroyMedium/font.woff') format('woff');
}


/**
 * General Elements
 **/

: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; }

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

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

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

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

/**
 * Layout
 **/

 /* Popup */
/* .popup-fancybox { max-width:100% !important; }
.popup-fancybox .swiper {} */

.fancybox__content {padding: 0; padding-right: 15px;}
.popup-fancybox.fancybox__content .image {height: 100%;}
.popup-fancybox.fancybox__content .image>* {height: 100%;}
.popup-fancybox.fancybox__content .image img {height: 100%; object-fit: cover;}
.text .title {font-size: 3.25rem; font-family: "Gilroy-Bold"; color: var(--couleurbleu);}
.text .content {font-size: 1.313rem;}
.text {padding: 5vh 15px;}

 /* Global */
 body {
    --containerWidth: 100%;
    --couleurbleu: #00194A;
    --couleurorange: #E86231;
    --couleurbeige: #eee;
    --couleurgris: #909194; 
     font-family: "Gilroy-Medium";
}

h1 {font-size: 6rem; color: white; z-index: 2; position: relative; letter-spacing: -3px; }
h1,h2,h3,h4 { font-family: "Gilroy-Bold"; font-weight: bold; }

h1 em, h2 em, h3 em, h4 em, h5 em, h6 em { color:#E86231; font-style:normal; }

p{line-height: 1.2em;}
a {text-decoration: none;}
a:hover {color: initial;}

section{padding: 10vh 0; background-color: var(--couleurbeige);}

.btn {background-color: transparent; border: 1px solid; border-radius: 40px; padding: 16px 38px; text-transform:lowercase; display: inline-block; line-height:1em; margin-top:30px;}
.btn.orange {border-color: var(--couleurorange); color: var(--couleurorange);transition: all .6s ease 0s ;}
.btn.orange:hover { color: white !important; background-color: var(--couleurorange);}

#page { position:relative; width:100%; overflow:hidden; }

.entete {margin-bottom: 3vh;}
.container .entete >* {font-size: 1.313rem; padding: 0;font-weight: bold;  font-family: "Gilroy-Bold"; color: var(--couleurbleu);}

.txtnorm {color: var(--couleurbleu); font-size: 1.625rem;}
.txtimg {color: var(--couleurbleu);font-weight: normal;  font-family: "Gilroy-Medium";;}
.txtimg h2 {font-size: 3.25rem; margin-bottom: 3vh; }
.txtimg p {font-size: 1.625rem; }

.bigentete {font-weight: bold; font-family: "Gilroy-Bold"; background-color: var(--couleurbeige);}
.bigentete p{font-size: 2.8rem; color: var(--couleurbleu); line-height: 1.2em;}
.bigentete strong{color: var(--couleurgris);}
.bigentete .center {justify-content: center; align-items: center; display: flex;}
.bigentete em { color:var(--couleurorange); font-style:normal; }

#secteur-dactivite .bigentete h2{font-size: 3.25rem; color: var(--couleurbleu); line-height: 4rem; margin-bottom: 8vh;}
#secteur-dactivite .more { color:var(--couleurorange); }

#recyclage {position: relative; height: 1800px; color: white;  }
#recyclage .container{ position: relative; }
#recyclage .container:after{ position: absolute; content: ''; top: 0; left: -2.5%; width: 250%; height: calc( var(--containerWidth) * 1.28 ); background: url(../themes/bachesfevre/assets/img/recyclage.svg) no-repeat 0 0; background-size: contain; }
#recyclage .background{ position: absolute; top: 0; right: 0; z-index: 1; pointer-events: none;}
#recyclage p{ z-index: 2; position: relative; font-size: 1.425rem;}
#recyclage h2 {font-size: 10rem; position: relative; z-index: 2; margin-bottom: 5vh; padding-top:10vh; white-space: nowrap; display:flex; flex-direction:row; align-items:center; justify-content: space-between; }
#recyclage h2 strong{color: var(--couleurbleu);}

.innovation {text-align: center; padding-top: 8vh;}

#produit .background {height: 100%; width: 100%; position: absolute; top: 0; left: 0; object-fit: cover;}
#produit .prod {position: relative; height: 350px; margin-bottom: 30px;}
#produit .prod::after {position: absolute; content: ""; height: 100%; width: 100%; top: 0; left: 0; background-color: #000; opacity: 0.4;}
#produit .prod h3 {font-size: 3.25rem; color: white; z-index: 4; position: relative; transform: translate(30px, 30px); width: 20%;}
#produit .center {text-align: center;}
#produit h2 {color: var(--couleurbleu); margin-bottom: 5vh; font-size:6rem; }

#list ol li {counter-increment: my-awesome-counter; display: flex; font-size: 1.625rem; color: var(--couleurbleu);font-family: "Gilroy-Bold"; position: relative; justify-content: center; }
#list ol li p {z-index: 1; position: relative; display: flex; align-items: center; }
#list ol .number { content: "0" counter(my-awesome-counter); font-size: 8.25rem; color: var(--couleurgris); padding: 12vh 0; margin-right:20px;}
#list .txt {width: 30%;}
#list ol li img{ position: absolute;top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0;} 

#list li:hover {color: white;}
#list li:hover img {opacity: 1;}
#list li:hover::after {content: ""; width: 100%; height: 100%; top: 0; left: 0; background-color: black; opacity: 0.4; position: absolute;}
#list li:hover .number {color: var(--couleurorange);}
#list ol li:nth-child(odd) p{transform: translateX(-15vw);}
#list ol li:nth-child(even) p{transform: translateX(15vw);}


#categories .categorie p{font-size: 1.313rem; text-align: start;}
#categories .swiper-slide { opacity:0.5 !important; transition:opacity 0.5s ease 0s !important; }
#categories .swiper-slide-active { opacity:1 !important; }
#categories .swiper-slide img { margin:30px 0; }
#categories .btn{  max-width: 40%; margin-top:0; }
#categories section {padding: 0;}
.categorie { display: flex; flex-direction: column; flex-grow: 1; align-items: stretch; height: 100%; justify-content: space-between; }

#categories section {height: 100vh; display: flex; align-items: center; position: relative; background-color: #fff;}
#categories  section::after {position: absolute; left: 0; bottom: 0px; content: ""; background-image: url(../themes/bachesfevre/assets/img/masquecontact.svg); background-size: cover; background-position: center; height: 60vh; width: 100%; z-index: 0;} 

.swiper {height: 80%;}
.swiper-slide {color: var(--couleurgris);}
.swiper-slide h2 {font-size: 3.25rem;  font-family: "Gilroy-Bold"; text-align: center;}
.swiper-slide.swiper-slide-active {color: var(--couleurbleu);}

/*li.swiper-slide { transition: all 1.45s;}*/

.serge {width: 50%; transform: translateY(-10px);}

/* Header */
#header {height: 90px; display: flex; align-items: center; border-top: 1px solid var(--couleurorange); color: var(--couleurbleu); font-size: 1.063rem; opacity: 0.98; position: fixed; top: 0; width: 100%; z-index: 1000; background-color: #fff;}
#header:hover {opacity: 1;}
#header .navbar {display: flex; justify-content: space-between; width: 100%;}
#header ul {display: flex;}
#header li {margin: 0 20px; position: relative; transition: all 0.45s; }
#header li::before {position: absolute; content: ""; bottom: -5px; left: 0; height: 1px; width: 0;  background-color: var(--couleurorange); transition-property: left right; transition-duration: 0.3s;  transition-timing-function: ease-out;}
#header li:hover::before {content: ""; position: absolute; width: 100%; }
#header .active{position: relative;}
#header .active::after {content: ""; position: absolute; bottom: -5px; left: 0; height: 1px; width: 100%; background-color: var(--couleurorange);}
#header .btn { margin-top:0; padding:10px 25px; }
#header .external { position:relative; bottom:5px; width:10px; }
#header li.contact {display: none;}

#heading {padding: 0; position: relative;}
#heading .uppertitle { position:relative; z-index:2; color:#fff; margin-bottom:1em; font-weight:bold; font-size:1.25rem; }
#heading img {object-fit: cover; height: 100%;}
#heading .swiper-container.swiper-initialized.swiper-horizontal.swiper-pointer-events {height: 100%;}
#heading .swiper {height: 100%; position: absolute; top: 0; left: 0; width: 100%;}
#heading {position: relative;height: 100vh; width: 101vw;  display: flex; align-items: center; overflow: hidden;}
#heading::after {position: absolute; left: 0; bottom: -10px; content: "";background-position: top; background-image: url(../themes/bachesfevre/assets/img/Arrondie-desktop.svg); background-size: cover; height: 180px; width: 100%; z-index: 3;}
#heading::before {content: ""; pointer-events: none; height: 100%; width: 100%; top: 0; left: 0; background-color: black; opacity: .3; position: absolute; z-index: 2;}
#heading  .background {height: 100%; width: 100%; position: absolute; z-index: 1; top: 0; left: -30px;}

#accueil .bigentete img {z-index: 4;}

.scroll { position: absolute; bottom: 25px; left: 0; right: 0; margin-right: auto; z-index: 10; margin-left: auto;}
.scroll figure {height: 75px;}
.hamburger { display:none; }

.lowheader {background-color: white; padding:calc(10vh + 90px) 0 10vh 0}
.lowheader h1{color: var(--couleurbleu); text-align: center;}



/* Footer */
#footer {padding: 8vh 0; background-color: var(--couleurbleu); color: white; font-size: 1.063rem;}
#footer ul {display: inline-block;}
#footer a:hover {color: var(--couleurorange); }
#footer .org {color: var(--couleurorange);}
#footer .download {display: flex; flex-direction: column; padding-top: 3vh;}
#footer .download a {text-decoration: underline;}
#footer .adresse {padding-top: 3vh; font-weight: 400; opacity: .5;}
#footer .bottom { font-weight:300; font-size:0.8rem;  }
#footer .mentions {opacity: .5; display: flex; }
#footer .mentions ul {display: flex;}
#footer .mentions li {margin-right: 2vw; white-space: nowrap;}
#footer em {opacity: 0.5; font-style: normal;}

/* Contact */
.coordonee {background-image: url(../themes/bachesfevre/assets/img/masquecontact.svg); background-size: cover; background-repeat: no-repeat; padding: 5vh; margin-top:10vh; }
#contact .form { margin-top:-15vh; }
#contact .form h2 {font-size: 4.5rem;line-height: 1.1em; font-family: "Gilroy-Bold"; color: var(--couleurbleu);}
#contact .form-control {background-color: transparent; border: none;border-bottom: 1px solid var(--couleurbleu); border-radius: initial; color: var(--couleurbleu); font-family: "Gilroy-Bold";}
#contact ::placeholder {color: var(--couleurbleu);}
#contact .form-control:focus {box-shadow: initial;}
#contact .alert-success {color: var(--couleurbleu); display: flex; justify-content:center; width: 100%; margin-top: 3vh;}
#contact .alert-success button{display: none;}

#blockcoordonee {background-color: var(--couleurbleu); background-image: url(../themes/bachesfevre/assets/img/backgroudcontact.svg) ; background-size: cover; background-position: center; color: white; display: flex; justify-content: space-between; text-align: center; padding: 7vh; transform: translateY(-15vh);}
#blockcoordonee h2{color: white; font-family: "Gilroy-Medium"; font-size: 1.063rem;}
#blockcoordonee p{ font-family: "Gilroy-Bold"; font-size: 1.625rem; line-height: 1.625rem;}
#blockcoordonee .clmn {display: flex; flex-direction: column;}

.responsiv-uploader-fileupload.style-file-multi .upload-button { border:1px dashed var(--couleurbleu); padding:30px; border-radius:20px; text-align:center; display:block; margin:30px 0; width:100%; }

/* Chiffre */
#chiffre {background-color: var(--couleurbleu); color: white;font-weight: bold;  font-family: "Gilroy-Bold";;}
#chiffre .row {justify-content: space-between;}
#chiffre .column {display: flex; flex-direction: column; width: auto; text-align: center; line-height: 6rem;}
#chiffre h2 {font-size: 5.813rem; position: relative;}
#chiffre h2::after {content: ""; width: 100%; height: 2px; position: absolute; background-color: var(--couleurorange); display: block; bottom: -1.5rem; left: 0;}
#chiffre p {font-size: 1.625rem; line-height: 8rem;}

/* Atelier */
#atelier {position: relative; padding: 15vh 0; background-image: url(../themes/bachesfevre/assets/img/parralax.jpg);  background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;}
/* #atelier .background {position: absolute; top: 0; left: 0;  height: 100%; width: 100%; } */
#atelier::before {content: ""; height: 100%; width: 100%; top: 0; left: 0; background-color: black; opacity: .4; position: absolute; z-index: 2;}
#atelier .txt {z-index: 5; color: white; font-family: "Gilroy-Bold";}
#atelier .txt h2{font-size: 1.313rem; }
#atelier .txt p{font-size: 3.25rem; line-height: 3.25rem;}
#atelier .txt strong {color: var(--couleurorange);}


/* card */
.cards {color: var(--couleurbleu); font-family: "Gilroy-Bold"; /*min-height: 100vh;*/ display: flex; align-items: center; }
.cards em { color:var(--couleurorange); font-style:normal; }
.cards .title h2 { font-size: 1.313rem; margin-bottom: 3vh;}
.cards .title p {font-size: 3.25rem; color: var(--couleurgris); line-height: 3.25rem;}
.cards h3 {font-size: 2.5rem; margin-bottom:0.5em; }
.cards p {font-size: 1.4rem;}
.cards .title {display: flex; align-items: center; flex-direction: column;}
.allcards {display: flex;}
.card { display: flex; border-radius: 50px; box-shadow: -3px 7px 10px var(--couleurgris); transition: 0.4s ease-out; position: relative; left: 0px; padding: 30px 35px;  flex: 1 1 0px;}
.card:not(:first-child) { margin-left: -150px;}
.card:hover { transform: translateY(-20px); transition: 0.4s ease-out;}
.card:hover ~ .card {position: relative; left: 150px; transition: 0.4s ease-out;}
.card .flechcards {position: absolute; bottom: 15px; right: 20px; width: 30px; height: 60px; transition: all 1s ease 0s ;}
.card:hover .flechcards {transform: scale(1.3);}

/* Réalisation */  
.headerrea {justify-content: center; display: flex; align-items: center; height: 60vh; background-color: white;}
.headerrea h1{ color: var(--couleurbleu); text-align: center; }
.filter {background-image: url(../themes/bachesfevre/assets/img/masquecontact.svg); background-size: cover; background-repeat: no-repeat; padding: 8vh; background-position: center top;}
#realisations .item:nth-child(even) { margin-top:10vh; } 
#realisations #page { margin-top:90px; }
#realisations .unerea h2 {font-size: 2.25rem; font-family: "Gilroy-Bold"; color: var(--couleurbleu);}
#realisations .unerea .secteur {font-size: 1.063rem; font-family: "Gilroy-Bold"; color: var(--couleurorange); }
#realisations .unerea .image {transition: all .4s ease;}
#realisations .unerea .image:hover {transform: scale(1.1);}
#realisations #rea section {padding: 0; padding-bottom: 12vh;}
.filtre {text-align: center; z-index: 15; position: relative; display:flex; flex-direction:row; align-items:center; justify-content:center; flex-wrap:wrap; }
.filtre .btn.orange {margin: 10px; white-space: nowrap; }
.filtre .btn.orange.active { color:#fff; background:var(--couleurorange); }
#realisations .name {display: flex; justify-content: space-between; align-items: flex-end; }
#realisations .left {transform: translateY(-10vh); position: relative; z-index: 20;}
#chargerplus {text-align: center; margin-top:5vh; }
#chargerplus .btn {max-width: 250px;}

/* Secteur */

.unsecteur {padding: 20px 50px; margin-bottom: 30px; display: flex; justify-content: space-between; flex-direction: column; height: calc( 100% - 30px);}
.unsecteur p{font-size: 1.2rem;}
.unsecteur h2{font-size: 3rem;  font-family: "Gilroy-Bold";}
.unsecteur .text {width: 70%;}
.unsecteur .picto {width: 30%; text-align: right;}
.unsecteur .produit {font-size: 1.063rem;}
.unsecteur .btn {padding: 10px 15px; margin: 5px; font-size:0.8rem; font-weight:300;}
.unsecteur .btnproduit { font-size:0.8rem; font-weight:300; }
.sect .unsecteur{ background-color: #fff; color: var(--couleurbleu); }
.btnproduit{ background-color: transparent; border: 1px solid var(--couleurbleu); border-radius: 40px; padding: 10px 15px; display: inline-block; margin: 5px; text-align:center; }
.sect:nth-child(4n) .unsecteur { background-color: var(--couleurbleu); color: #fff;}
.sect:nth-child(4n+1) .unsecteur { background-color: var(--couleurbleu); color: #fff;}
.sect:nth-child(4n) .unsecteur .btnproduit { background-color: transparent; border: 1px solid #fff; border-radius: 40px; padding: 10px 15px; display: inline-block; margin: 5px;}
.sect:nth-child(4n+1) .unsecteur .btnproduit { background-color: transparent; border: 1px solid #fff; border-radius: 40px; padding: 10px 15px; display: inline-block; margin: 5px;}

/* page produit */

#pageproduit h2{color: var(--couleurbleu); text-align: center; margin-bottom: 7vh; font-size:5rem; font-family: "Gilroy-Bold";}
#pageproduit .btnproduit {margin: 10px;}
#pageproduit .produits {display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: wrap; }
#tendance p{ color: var(--couleurbleu);font-size: 1.625rem; padding: 50px 100px; background-color: white; box-shadow: -1px 0px 10px var(--couleurgris); border-radius: 50px;font-family: "Gilroy-Bold";}
#pageproduit #couleur h3{ font-size: 1.313rem; color: var(--couleurbleu); text-align: center;}
#pageproduit #couleur .couleur {width: calc( var(--containerWidth) / 5); display: flex; flex-direction: column; align-items: center; margin-bottom: 9vh;}
#pageproduit #couleur img {fill: rgb(75, 48, 48);}

#contenu .uncontenu {margin: 5vh 0; display: flex;}
#contenu .txtnorm.center {text-align: center;}
#contenu .txtnorm {display: flex; align-items: center;}

#pageproduit .filter {margin-top: -10vh; position: relative; z-index: 10;}
#headerproduit {height: 75vh; position: relative; display: flex; flex-direction: column; justify-content: center;}
#headerproduit{padding: 0;}
#headerproduit h1 {color: #fff;}
#headerproduit .background {height: 100%; background-size: cover; position: absolute; top: 0; left: 0; width: 100%;}

.legal { padding-top:50px; padding-bottom:50px; margin-top:150px; background:#fff; }
.legal h1 { color:#000; font-size:4rem; }
.legal h2 { color:#000; font-size:3rem; }

.video.fullscreen{ min-height: 100%; max-height: none; min-width: 100vw; margin: 0; position: absolute !important; top: 0;}
.video.fullscreen:after{ z-index: -1; pointer-events: inherit; height: 100vh; padding-top: 0; }
.video.fullscreen iframe{ width: 100%; height: calc(100vw * 0.5625); min-width: calc((100vh + 120px) * 1.78); min-height: calc(100vh + 120px); }

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; } }

/**
 * XXL
 **/
@media (min-width: 1400px) {
    .container-fluid {padding: 0 250px ;}
}

/**
 * XL
 **/
@media (max-width: 1399px) {
    h1 {font-size: 6.25rem;}

    .bigentete p { font-size: 2.25rem; line-height: 2.2rem;}

    .unsecteur h2 { font-size:2.5rem; }

    .cards h3 { font-size:2.4rem; }
    .cards p { font-size:1.2rem; }*
    .card { padding:50px 30px; }

    #recyclage { height:1500px; }
    
    #recyclage p { font-size:1.2rem; }

    .text .title { font-size:2.5rem; }
    .text .content { font-size:1.2rem; }

    #contact .form h2 {font-size: 3.5rem;}
    #recyclage h2 { font-size:8rem; }
 
}

/**
 * LG
 **/
@media (max-width: 1199px) {
    h1 {font-size: 4.5rem;}

    .btn { padding:10px 20px; }

    .txtnorm { font-size:1.4rem; }

    #header li { margin:0 15px; }
    
    #produit .prod h3 {font-size: 1.8rem;}
    #produit .prod {height: 250px;}

    .unsecteur .description { font-size:1rem; }
    .unsecteur .btnproduit { font-size:1rem; padding:5px 10px !important; }
    
    .txtimg h2 { font-size:2.5rem; }

    .swiper-slide h2 { font-size:2.5rem; }

    #categories .categorie p { padding:15px; }
    #pageproduit h2 { font-size:4rem; }

    #recyclage { height:1280px; }
    #recyclage h2 { font-size:7rem; }
    
}

/**
 * MD
 **/
@media (max-width: 991px) {
    .hamburger { display:block; position:relative; z-index: 6; }

     section { padding:5vh 0; }
    .txtnorm { font-size:1.2rem; }
    .bigentete p,
    .txtimg p { font-size:1.6rem; }

    #chiffre h2 { font-size:4rem; }


    #header ul { position:fixed; left:0; top:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fff; opacity:1; z-index:5; opacity:0; pointer-events:none; transition:all 0.5s ease 0s; }
    #header li { margin-bottom:1em; }
    #header ul a { color:var(--couleurbleu); font-size:2rem; font-weight:600; }
    #header .btn { display:none; }
    #header li.contact {display: initial;}

    body.open #header ul { opacity:1; pointer-events:auto; }
    #recyclage { height:980px; }
    #recyclage p{font-size: 1.2rem;  }
    
    
    #accueil .bigentete img { max-width: 50%; margin-top:-40%; margin-bottom:40px; margin-left:auto; margin-right:auto; z-index:4; position:relative; }
    #entreprise .bache img { max-width: 50%; margin-top:-40%; margin-bottom:40px; margin-left:auto; margin-right:auto; z-index:4; position:relative; }
    #heading::after { background-image: url(../themes/bachesfevre/assets/img/Arrondie-mobile.svg);}

    #chiffre .row {flex-direction: column; justify-content: center;}


    #list .txt { width:40%; }

    .unsecteur .text { width:100%; order:2; }
    .unsecteur .picto { width:100%; text-align:left; order:1; }
    .unsecteur .picto img { width:60px; height:60px; object-fit: contain; }

    #categories .categorie p { font-size:1.2rem; }

    #contenu .image { order:1; }
    #contenu .txtnorm { order:2; }

    #recyclage h2 { font-size:5.5rem; padding-top:0;  } 

    .scroll {display: none;}

    #footer .picto { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; }
    #footer .picto img { max-width:300px; margin-right:30px;}
    
    
}

/**
 * SM
 **/
@media (max-width: 767px) {
    #recyclage .container:before { content: ''; position: absolute; top: -10vh; left: 50%; width: 100vw; height: 50vw; background-color: #00194a; transform: translateX(-50%);}    
    #recyclage .container:after{  top: -150px; left: -61.5%; background-size: contain; transform: rotate(-40deg);}
    #recyclage h2 strong {color: white;}
    #recyclage {overflow: hidden; height:900px; }

    section {padding: 5vh 0;}
    h1 {font-size: 3.25rem;}
    .bigentete p { font-size: 2rem; line-height: 2rem;}

    .cards h3 { font-size:1.8rem; }
    .card { padding:15px; border-radius:20px; } 
    .card img { display:none; }

    #realisations .item:nth-child(even) { margin-top:0; }

    #chiffre p {font-size: 1.3rem;}
    #chiffre h2 {font-size: 3.5rem;}
    
    #entreprise .bache img { max-width: 50%; margin-top:-30%; margin-bottom:30px;  margin-left:auto; margin-right:auto; position:relative; }

    #footer .picto {display: none; position: relative;}
    #footer .flechetop {position: absolute; right: 10px;}
    #footer .mentions ul {flex-direction: column;}
    #footer .download {padding: 3vh 0;}

    #categories .btn { max-width:100%; }
    #categories .categorie p { font-size:1rem; padding:0; }

    .filter { padding:8vh 0; }
    #tendance p { padding:50px 30px; }
    #pageproduit h2 { font-size:3.5rem; }

    #recyclage h2 { font-size:4rem; justify-content: flex-start;}
    #recyclage h2 .percent { margin-right:0.5em; }

     #accueil .bigentete img { margin-top:-70%; margin-bottom:70px; }
    #entreprise .bache img { margin-top:-70%; margin-bottom:70px; }
}

/**
 * XS
 **/
@media (max-width: 575px) {
    #recyclage { height:auto; background:#00194A; }
    #recyclage h2 {font-size: 3rem; }
    #recyclage .container:before {height: 89vw;}
    #recyclage .container:after{  top: 160px;  transform: rotate(-45deg); content:none;}

    #produit h2 {font-size: 4rem;}

    #chiffre h2 { font-size:2.5rem; }


    #list .txt { width:70%; }
    #list ol li:nth-child(odd) p { transform:none; }
    #list ol li:nth-child(even) p { transform:none; }

    #heading::after {height: 120px;}

    #accueil .bigentete img { margin-top:-60%; margin-bottom:60px; }
    #entreprise .bache img { margin-top:-60%; margin-bottom:60px; }

    #chiffre h2::after {bottom: 0;}
    #chiffre p {line-height: initial;}
    #chiffre .column {margin: 4vh 0;}

    #atelier .txt p,
    .cards .title p {line-height: 2.25rem; font-size: 2.25rem;}

    .cards h3 {font-size: 1.7rem;}
    #contact .form h2 {font-size: 2.5rem; margin-bottom: 2vh;}

    #blockcoordonee {padding: 3vh;}
    #blockcoordonee p {font-size: 1.125rem;}

    

}




@media (max-width: 455px) {
    #recyclage h2 {font-size: 2.2rem;}
    #recyclage p{font-size: 1rem;}
    #recyclage .container:after{  top: 42px;  transform: rotate(-65deg);}

    #chiffre p {font-size: 1.1rem;}
    #chiffre h2 {font-size: 4rem;}

}



@media (max-width: 355px) {
    #recyclage .container:before {height: 110vw;}

}

@media (max-height: 355px) {


}