/* Frontend editor */
.ct-widget.ct-ignition { position:fixed; left:auto; top:auto; right:20px; bottom:70px; 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); }
/**
 * General Elements
 **/

body{ 
    --containerWidth: 100%;
    --asideWidth: calc((100vw - var(--containerWidth)) / 2);

    --couleurbleu :#3646F5;
    font-family: 'Roboto'; 
    font-size: 1.125rem;
    background-color: #fafafb;
}
: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; text-decoration: none; }
a:hover{  text-decoration:none; }

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

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

/**
 * Layout
 **/

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

.btn{ background-color: var(--couleurbleu); border-radius: 0; color: #fff; transition: all 0.4s ease 0s;padding: 0.375rem 1.2rem; }
.btn:hover{ color: #fff !important;transform: scale(0.9); }

/*iframe{ height: calc(var(--containerWidth) * 0.552); margin-top: 10vmin; max-width: 100%; max-height: calc( 90vh - 80px ); }*/

.hamburger--collapse .hamburger-inner,
.hamburger--collapse .hamburger-inner::before,
.hamburger--collapse .hamburger-inner::after{ background-image:url(../themes/pbtp/assets/img/humburger.svg) ; background-color: transparent; background-size: cover;}
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before{ background-color: transparent;}

.activepage{ color: var(--couleurbleu); }
.activepage svg{fill: var(--couleurbleu);}

#page{ position: relative; z-index: 1; width:100%; overflow:hidden; }
#noise{ pointer-events: none; position: fixed; z-index: 0; top: -50%; height: 200%; width: 200%; left: -50%; background: url(../themes/pbtp/assets/img/noise.png) repeat 50% 50%; 
    transform-style: preserve-3d; transform: translate3d(100px, 0px, 0px);}
#main{ padding-top: 80px; position: relative; z-index: 1; }

h1,h2,h3,h4{ font-family: 'Oswald';}

h2{ margin-bottom: 1em; }

.responsiv-uploader-fileupload.style-file-multi.is-multi .btn{   background: none; color: #000; border: 1px dashed; width: 100%; border-radius: 5px; padding: 15px;  transition: all 0.4s ease 0s ;}
.responsiv-uploader-fileupload.style-file-multi.is-multi .btn:hover{  transform: initial; color: black !important; border: 1px solid black}
.upload-files-container{ margin-bottom: 2vmin;}



/* actualité */
#actualite{ padding: 7vmin 0; position: relative; margin: 7vmin 0;}
/* #actualite::before{ content:  url(../img/fondactu.svg); position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;} */
#actualite h2{  margin-bottom: 3vmin; font-size: 2.375rem; font-weight: 500;}
#actualite #eapps-facebook-feed-1 .eapps-facebook-feed-container{ width: 100%; max-width: initial ;}

/* Contact */
.contact{ padding-top: 10vmin;}
.contact h2{ font-size: 3.125rem; margin-bottom: 4vmin;}
.formulaire{ background-color: #E8E8E8; padding: 50px; margin-bottom: 10vmin; font-size: 1.063rem; text-transform: uppercase; font-family: 'Oswald'; height: 100%;}
.contact .form-control{ }
button.btn.btn-primary.btn-lg{ width: 100%;}

.contact .captcha { display:flex; align-items:center; justify-content:center; flex-direction:column; text-align: center; }


/* Header */
#header{ height: 80px; font-size: 1.063rem;position: fixed; top: 0; width: 100%; background-color: #fff; z-index: 2000;}
#header > .container{ position: relative; z-index: 3; display: flex; justify-content: center; align-items: center; }
#header > .container:before{ content: ''; position: absolute; width: 100vw; height: 100%; top: 0; left: 50%; background-color: #fff; transform: translateX(-50%); }
#header a{ cursor: pointer;}
#header a:hover{ color: var(--couleurbleu);}
#header ul{ display: flex; justify-content: space-between; align-items: center;}
#header .option{ display: flex; justify-content: space-evenly; width: 100%; background-color: #fff; align-items: center; padding: 7vmin; position: relative; z-index: 1; transform: translateY(-130%); transition: transform .4s ease-out; }
#header .option.active{ transform: translateY(0); }
#header .column{ display: flex; flex-direction: column; align-items: center;}
#header .column svg{ min-height: 220px; transition: all 0.4s ease 0s; color: #e8e8e8; padding: 20%; }
#header .optiontxt{ font-weight: bold; position: relative; font-family: 'Oswald'; font-size: 1.125rem; text-align: center;}
#header .optiontxt::before{  position: absolute; content: url(../themes/pbtp/assets/img/triangleli.svg); left: -10px; bottom: 0; transition: all 0.4s ease 0s ;}
#header .column:hover .optiontxt::before{ left: 0;}
#header .column:hover svg{ fill: var(--couleurbleu);}
li.swiper-slide{ background-position: 50% 100%; background-size: cover; }


#header .nav-resp-headbar{ display: none; justify-content: space-between; align-items: center; color: black;}
#header .wrapper{ width: 100%; max-width: 380px; height: 100%; padding: 200px 50px; display: flex; flex-direction: column; justify-content: space-between;}
#header .nav-resp-menu{ display: flex; height: 100vh; width: 100vw; background-color: #fff; position: fixed; top: 0; left: 0; transform: translateY(-100%); transition: transform 1s ease 0s ;  }
#header .nav-resp-menu .fleche{ position: relative; font-weight: 200; text-transform: uppercase; transform: translateX(25px); font-family: 'Oswald';}
#header .nav-resp-menu .fleche::before{  position: absolute; content: url(../themes/pbtp/assets/img/triangle.svg); left: -25px; bottom: 0;}
#header .nav-resp-menu ul{ display: flex; flex-direction: column; align-items: flex-start;}
#header .nav-resp-menu li{  font-weight: 600; font-size: 1.125rem; font-family: 'Roboto'; padding: 1px 0;}

#header .dropdown{ position: relative;}
#header .dropdown > a::after{ content: url(../themes/pbtp/assets/img/dropdown.svg); margin-left: 0.5em; }
#header .dropdown.active > a::after{ position: absolute; right: -20px; top: 0;  content: url(../themes/pbtp/assets/img/dropdown.svg); transform: rotate(180deg);}

/* Footer */
#footer{ padding: 7vmin 0; position: relative; background-color: #fff; }
#footer::before{ display: block; content: "";top: 0; height: 2px; width: 100%; background-color: var(--couleurbleu); position: absolute;}
#footer .contact{width: 60%; padding: 0;}
#footer .adresse{ width: 40%;}
#footer .logo{ width: 61%; margin-bottom: 40px;}
#footer strong{ font-family: 'Oswald'; font-size: 1.063rem; font-weight: 300; text-transform:uppercase; margin-bottom: 15px; display: block;}
#footer .mention{ text-align: center; font-weight: 200; font-size: 0.95rem; padding-top: 70px;}
#footer .mention ul{ display: flex; width: 100%; justify-content: center; }
#footer .mention li:not(:first-child):before { content: '-'; margin: 0 0.3em; }
.telecharger{ transform: translateX(20px); padding-top: 50px; font-weight: 500;}
.download{ color: var(--couleurbleu); position: relative; transform: translateX(20px);}
.download::before{ position: absolute; left: -20px; bottom: 0; content: url(../themes/pbtp/assets/img/triangle.svg); transition: all 0.4s ease 0s ; }
.download:hover::before{ bottom: -5px;  }


/* Head */
.section-bg-img{ background-color: #fff; }
.section-bg-img .background{ position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: 0; overflow: hidden; }
.section-bg-img .background img{ position: absolute; min-height: 100%; min-width: 100%; max-width: none; width: auto; object-fit: cover; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; }
.section-bg-img > div{ position: relative; z-index: 1; }

.banniere{ text-align: center; color: #fff; top: 0; left: 0; z-index: -1; width: 100%; height: calc(100vh - 80px - 180px); min-height: 50vmin; position: relative; }
.banniere::before{ z-index: 1; background: linear-gradient(360deg, rgba(54,70,245,0.6979166666666667) 34%, rgba(72,73,73,0) 100%); content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%;}

.banniere .container{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding-top: 10vw; padding-bottom: 10vw; }
.banniere .title h1{ text-transform: uppercase;font-family: 'Oswald'; font-weight: 200; position: relative; transform: translateX(-10px); display: inline-block; font-size: inherit; }
.banniere .title h1::before{ content: url(../themes/pbtp/assets/img/triangle.svg); }
.banniere .title h2{ font-size: 3.125rem; margin-bottom: 1em; }
.banniere .picto{ position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 47%); z-index: 2; pointer-events: none; width: 100vw; max-height: 45vh; height: 475px; }
.banniere .picto img{ width: auto; max-height: 100%; }


/* Entete */

.intro{ padding: 240px 0 15vmin; text-align: center; position: relative; overflow: hidden; }
.intro h2{ margin-bottom: 1em; }
.intro .index{ z-index: 20;}
.intro .video {height: 520px;}


#demolition .intro p{ text-align: left;}

/* carrousel */
.carrousel{ position: relative; min-height: 90vmin; display: flex; align-items: center; overflow: hidden; background-color: #ddd; }
/* .carrousel .swiper-slide{ height: auto;} */
.carrousel > .background{ z-index: 0; }
.carrousel h2{ font-size: 2.375rem; margin-bottom: 30px;}
.carrousel .cards{ background-color: #fff; padding:50px; z-index: 2; height: 100%; flex-grow: 1; display: flex; flex-direction: column;}
.carrousel .txtcards{ margin-bottom: 30px;}
.carrousel .btn{ width: 100%; max-width: 300px; }
.carrousel .cards li,
.carrousel .accordion-body li{position: relative; transform: translateX(40px);display: flex; justify-content: space-between;}
.carrousel .cards li::before,
.carrousel .accordion-body li::before{ position: absolute; left: -40px; top: 0; content: url(../themes/pbtp/assets/img/triangleli.svg);}
.carrousel .cards em{ padding-right: 50%; text-align: left;}
.carrousel .swiper-wrapper{ align-items: stretch !important;}
.carrousel .accordion-collapse{ max-height: 40vmin;; overflow: scroll;}
.carrousel .accordion{ display: none; background-color: #fff; width: 100%; flex-direction: column; }
.carrousel .accordion-item{ width: 100%;box-shadow: rgb(0 0 0 / 5%) 0px 2px 1px, rgb(0 0 0 / 1%) 0px 7px 0px, rgb(0 0 0 / 5%) 0px 8px 4px, rgb(0 0 0 / 3%) 0px 16px 8px, rgb(0 0 0 / 5%) 0px 2px 0px;}
.accordion-item:last-of-type .accordion-button.collapsed{ border: none;}
.accordion-button:not(.collapsed){ color: initial; background-color: initial;}
.accordion-button:focus{ border-color: initial; box-shadow: initial; border: none;}

.carrousel.scroll{ position: relative;}
/* .carrousel.scroll .parentscards{ position: absolute; right: 0; top: 50%; transform: translate(0%, -50%); width: 45vw; padding-right: 10vw;} */
.carrousel.scroll .parentscards{ position: relative; width: 35vw; float: right; }

/* mots-defilants */
.mots-defilants{ padding: 7vmin 0; background-color: var(--couleurbleu); color: #fff;}
.mots-defilants h2{ text-align: center; font-size: 2.375rem; margin-bottom: 50px;}
.mots-defilants p, 
.mots-defilants li{font-size: 3.75rem; font-weight: bold; font-family: 'Oswald'; color: rgba(54, 70, 245); text-transform: uppercase; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; white-space: nowrap;}
.mots-defilants ul{  transition-timing-function: linear; }
.mots-defilants li{ width: auto;}

#accueil .mots-defilants + section{ background:url(../themes/pbtp/assets/img/fondactu.svg) repeat-x 50% 0; background-size: auto 100%; }

/* Accueil */
#accueil #main{ display: flex; flex-direction: column; }
#accueil #main > * { order: 1; }
#accueil #main > .banniere{ order: 0; }

/* #accueil .imageheader::before{ background: linear-gradient(360deg, rgba(23,58,199,0.297917) 3%, rgba(37,71,73,0) 100%); content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%;} */
#accueil .banniere{ color: inherit; text-align: inherit; height: calc(100vmin - 80px); }
#accueil .banniere::before{ content: none; }
#accueil .banniere .container{ min-height: 30%; align-items: flex-start; }
#accueil .banniere .title{ position: relative; }
#accueil .banniere .title:before{ content: ''; height: 2px; background-color: #CDCED6;          z-index: 0; position: absolute; left: 0; bottom: 1em; width: 80px; }
#accueil .banniere .title:after{  content: ''; height: 2px; background-color: var(--couleurbleu); z-index: 1; position: absolute; left: 0; bottom: 1em; }
#accueil .banniere .visuel1 .title::after{  width: 20px; }
#accueil .banniere .visuel2 .title::after{  width: 40px; }
#accueil .banniere .visuel3 .title::after{  width: 60px; }
#accueil .banniere .visuel4 .title::after{  width: 80px; }
#accueil .banniere .txt{ min-height: 30vmin; margin-bottom: 3em; }
#accueil .banniere .btn{ margin-top: 1.5em; }

#accueil .banniere .swiper-container{ height: 100%; }
#accueil .banniere .swiper-wrapper{ height: 100%; }
#accueil .banniere .swiper-slide{ height: auto; display: flex; flex-direction: column; justify-content: center; position: relative; }
#accueil .banniere .swiper-slide::before { pointer-events: none; background: linear-gradient(360deg, rgba(23,58,199,0.297917) 3%, rgba(37,71,73,0) 100%); content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
#accueil .banniere .swiper-button-next,
#accueil .banniere .swiper-button-prev{ bottom: 20px; top: inherit; color: #fff;}
#accueil .banniere .swiper-button-prev{ right: 50px; left: inherit;}
#accueil .banniere .swiper-button-next:after,
#accueil .banniere .swiper-button-prev:after{ font-size: 25px;}

#accueil .banniere .timer{ display: block; width: 100vw; height: 15px; background-color: transparent; position: absolute; bottom: 0; left: 0;}
#accueil .banniere .timer .load{ position:absolute; left:0; top:0; width:0; height:100%; z-index:2; background:var(--couleurbleu); }

#accueil .intro{ padding: 15vmin 0;}
#accueil .intro h1{ margin-bottom: 50px;font-size: 2.375rem;}

/* pages */
#realisations .swiper{ width: calc(100% + var(--asideWidth) + var(--bs-gutter-x,.75rem)); }
.realisations{ padding: 15vmin 0;}
.realisations h2{ margin-bottom: 3vmin;}

.rea{ padding-top: 5vmin;}
.rea h3{ margin: 0.5em 0; }
.rea h3 span{ white-space: nowrap; }
.rea .date{ padding-top: 15px; font-family: 'Oswald';}
.rea img{ height: 300px; object-fit: cover;}

#direction{ padding: 7vmin 0;}
#direction img{ margin-top: 2vmin;}

#etapes{ padding: 15vmin 0; position: relative;}
#etapes li{  display: flex; justify-content: space-between; padding: 2vmin 0; border-top: 2px solid var(--couleurbleu);}
#etapes ol{  list-style: none; counter-reset: my-awesome-counter; display: flex; flex-wrap: wrap; padding-left: 0; }
#etapes ol li{ counter-increment: my-awesome-counter; display: flex;}
#etapes ol li::before{   content: "0" counter(my-awesome-counter); font-weight: bold; font-size: 7.5rem; color: #E8E8E8; align-items: center; display: flex;}
#etapes .column{ width: 70%;}
#etapes h2{ margin-bottom: 3vmin;}
#etapes h3{  font-weight: 300; text-transform: uppercase; font-size: 1.063rem;}
#etapes .grue{ position: absolute; left: -200px; top: 100px;}


#materiel{ padding: 7vmin 0; background-color: var(--couleurbleu); color: #fff; position: relative;}
/* #materiel::before{ content: ; top: 0; left: 0; position: absolute; width: 100%; height: 100%;} */
#materiel h2{ text-transform: uppercase; font-size: 1.063rem; text-align: center; margin-bottom: 3vmin; font-weight: 300;}
#materiel li{position: relative; transform: translateX(40px);}
#materiel li::before{ position: absolute; left: -40px; bottom: 0; content: url(../themes/pbtp/assets/img/triangleliblanc.svg);}


#recyclage .mots-defilants h2{ margin-bottom: 0; }
#recyclage .mots-defilants strong{ font-size: 3.75rem; font-weight: bold; font-family: 'Oswald'; color: rgba(54, 70, 245); text-transform: uppercase; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; }


#recrutement{ text-align: center; margin: 10vmin 0; position: relative;}
#recrutement .recrut-col{ position: relative;  }
#recrutement .tractopelle{ position: absolute; right: 100%; top: 0; width: calc((100vw - 100%) /2); height: 100%; min-width: 30vw; }
#recrutement .tractopelle img{ position: absolute; bottom: 0; width: auto; max-height: 100%; height: 100%; left: 0; }
#recrutement .pellerecrut{position: absolute; left: 100%; top: 0; width: calc((100vw - 100%) /2); height: 100%; min-width: 30vw; }
#recrutement .pellerecrut img{ position: absolute; bottom: 0; width: auto; max-height: 100%; height: 100%; right: 0; }
#recrutement h2{ z-index: 1; font-size: 3.75rem; color:#fff; text-transform: uppercase; text-shadow: -1px 0 #3646F5, 0 1px #3646F5, 1px 0 #3646F5, 0 -1px #3646F5;  margin-bottom: 7vmin;}
#recrutement h3{ font-size: 2.375rem; margin-bottom: 2vmin;}
#recrutement .bitogno{ position: relative; transform: translateX(25px); color: var(--couleurbleu); margin-bottom: 3vmin; transition: all 0.2s ease 0s ;}
#recrutement .bitogno::before{ position: absolute; left: -25px; bottom: 0; content: url(../themes/pbtp/assets/img/bitogno.svg); transition: all 0.4s ease 0s ;}
#recrutement .bitogno:hover::before{ left: -20px;}
#recrutement .bitogno:hover{ font-weight: 500;}

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

/**
 * XXL
 **/
@media (min-width: 1400px) {

}

@media (max-width: 1599px) {
    #etape .grue {width: 60%;}

     .carrousel .background {height: 100vh; object-fit: cover;}

    .carrousel.scroll .parentscards {transform: translate(15%, -50%);}

    
}


/**
 * XL
 **/
@media (max-width: 1399px) {

    .carrousel h2 {font-size: 1rem; font-weight: 600;}
    .carrousel .accordion-body {font-size: 0.938rem;}

    .carrousel .accordion {display: flex;}
    .carrousel .cards {display: none;}
    .carrousel.scroll .parentscards {width: 100%; top: inherit; right: inherit; transform: translateY(-13vh); position: static; padding-right: 0;}
    .carrousel.scroll .container {align-self: flex-end;}

    .carrousel h2 {margin-bottom: 0;}
    .carrousel .btn {margin-top: 20px;}

    .contact .form-control {margin-bottom: 3vmin;}
    
}

/**
 * LG
 **/
@media (max-width: 1199px) {

   
    
}

/**
 * MD
 **/
@media (max-width: 991px) {
    
    .banniere{ height: calc(100vh - 80px - 20vw); }
    .title h2 {font-size: 2.8rem;}

    .mots-defilants p {font-size: 2.8rem;}
    .intro{ padding-top: 25vw; }
    .intro h2,
    .contact h2 {font-size: 2.2rem;}

    #etape .grue {display: none;}
    #etape ol {padding-left: 0;}
    #etape ol li {flex-direction: column; align-items: center; text-align: center;}
    #etape li { padding: 5vmin 0;}

    #header .nav-resp-headbar{display: flex; z-index: 2000;}
    #header .navbar {display: none;}
    body.open #header .nav-resp-menu {opacity: 1; transform: translateY(0); }

    #materiel .justify-content-center {justify-content: flex-start !important; flex-direction: column;}
    #materiel h2 {padding-top: 30px;}

    

    

    
}

/**
 * SM
 **/
@media (max-width: 767px) {
    .title h2 {font-size: 2.5rem;}
    .intro br {display: none;}

    #recrutement .tractopelle{ display: none; }
    #recrutement .pellerecrut{ display: none; }

    #demolition .intro p {text-align: center; padding: 2vmin 0;}

    .mots-defilants p,
    #recyclage .bandeaux {font-size: 2.1rem;}
    
    .mots-defilants h2,
    .intro h2,
    .contact h2 {font-size: 1.9rem;}

    .contact .blocktxt {text-align: center;}
    
    #direction  {text-align: center;}

    #footer {text-align: center;}
    #footer .mention li:not(:first-child):before{ content: none; }
    #footer .logo {width: 100%;}
    #footer .coordo {flex-direction: column; align-items: center;}
    #footer .coordo h2 {padding-top: 20px;}
    #footer .contact, 
    #footer .adresse {width: 90%;}
    #footer .mention ul { flex-direction: column; padding-top: 40px;}
    .telecharger {padding-bottom: 20px;}

    .pelle {display: none;}
    .formulaire {margin-top: 30px;}

    .carrousel {min-height: 65vh;}
    
    #realisations .swiper{ width: 100%; }
    .realisations { text-align: center; padding-right: 7vw; padding-left: 7vw;}
}

/**
 * XS
 **/
@media (max-width: 575px) {

    .title h2 {font-size: 1.7rem; }

    #header .wrapper {padding: 150px 30px;}
    #header .nav-resp-headbar {padding: 0 20px;}

    #accueil .banniere{ height: auto; }
    #accueil .banniere .container { height: 100%; margin-left: 5%; margin-right: 5%; width: auto; }
    #accueil .banniere .swiper-slide{ height: auto;}
    #accueil .banniere .title h2 {font-size: 1.7rem; margin-top: 2em; }
    iframe{ height: calc(100vw * 0.552); }
    .intro .video {height: initial;}

    .carrousel .accordion-body {font-size: 0.75rem;}

    #footer .mention ul { flex-direction: column; padding-top: 20px;}

    .formulaire {padding: 30px; margin-bottom: 0;}

    p ,li {font-size: 0.9rem;}
    

}

/* @media (max-height: 850px) {
    .head .title {top: 150px;}
} */
@media (max-height: 800px) {
    .carrousel .cards { padding: 30px;}
}

@media (max-height: 620px) {
    #header .wrapper {padding: 100px 30px;}
}

/* @media (max-height: 600px) {
    .head .title {top: 100px;}
} */