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

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

body { font-family:'Raleway', sans-serif; font-size:1.125rem; font-weight:300; 
    --fancybox-accent-color: #ffe000;
    --swiper-pagination-bullet-inactive-color: #ffe000;
    --swiper-pagination-color: #ffe000;
    --swiper-theme-color: #ffe000;
}

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

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

/* Forms */
.invalid-feedback.visible { display:block !important; }
.form-select:focus,
.form-control:focus { border-color: #ffc107; box-shadow: 0 0 0 0.25rem #fff5aa; }
.form-check-input:checked { background-color: #ffe000; border-color: #ffc107; }

/* Titles */
h2 { font-family:'LEMONMILKPro', sans-serif; font-weight:bold; margin-bottom:1em; text-transform:uppercase; }
h3 { font-family:'Raleway', sans-serif; font-weight:900; font-size:1.75rem; margin-bottom:1em; }

/* Buttons */
button { padding:0; border:none; background:none; }

/* Alerts */
.alert{ margin-top: 1.5em; }
.alert .close{ float: right; font-size: 30px; margin-top: -10px; }

/**
 * Layout
 **/

/* Global */
#page { position:relative; width:100%; overflow:hidden; min-height:100vh; }

/* Header */
#header { font-family:'LEMONMILKPro', sans-serif; text-transform:uppercase; font-size:0.938rem;  }
#header .top { box-shadow:0px 5px 8px rgba(0, 0, 0, 0.16); background:#fff; position:fixed; top:0; width:100%; z-index: 5; transition:all 0.5s ease 0s; }
#header .top .row { height:40px; }
#header .top .logo{ transition:all 0.5s ease 0s; transform:translateY(-60px); height: 55px; }
#header .top .logo a { display:block; position:relative; top:7px; }
#header .top .primary{ transition:all 0.5s ease 0s; transform:translateY(-40px); height: 90%; }
#header .top .primary .dropdown-toggle { padding:0; background:none; border:none; text-transform:uppercase; }
#header .top .secondary a { display:flex; align-items:center; justify-content:center; height:40px; padding:0 30px; }
#header .top .secondary .shadow { position:absolute; right:0; top:0; filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.16)); box-shadow:none !important; height:100%;  }
#header .top .secondary .shape {  background: linear-gradient(#ffbf00 0%, #ffe000 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 50px 100%); padding-left:100px; height:100%; display:flex; align-items:center; justify-content:center; padding-right:10px; }
#header .top .secondary .black a { background:#000; color:#ffe000; }
#header .top .secondary .black img { margin-left:15px; }
#header .top .dropdown-menu { background:#000; border-radius:0; border:none; color:#fff; inset:20px auto auto 0px !important; }
#header .top .dropdown-menu a { display:block; padding:15px 30px; text-align:center; }
#header .top .dropdown-menu a:hover { color:#ffe000; }
#header .top .dropdown-menu li { position:relative; }
#header .top .dropdown-menu li:after { content:''; position:absolute; left:30px; right:30px; bottom:0; height:1px; background:#fff; }
#header .top .dropdown-menu li:last-child:after { content:none; }

#header.not-top .top .logo,
#header.not-top .top .primary{ transform:translateY(0); }

#header .bottom { border-bottom:2px solid #000; position:absolute; left:0; top:0; width:100%; z-index: 4; padding:15px 0 0 0; }
#header .bottom .row { height:156px; }
#header .bottom .logo { position:relative; height:100%; }
#header .bottom .logo a { position:relative; left:-70px;}
#header .bottom .primary a { padding:10px; display:block; transition:all 0.5s ease 0s; position:relative; color:#FFBF00; }
#header .bottom .primary a:after { content:''; position:absolute; left:0; bottom:0; width:100%; height:0; background:#000; z-index: -1; transition:all 0.5s ease 0s;  }
#header .bottom .primary a:hover,
#header .bottom .primary li.active a { color:#ffe000; }
#header .bottom .primary a:hover:after,
#header .bottom .primary li.active a:after { height:100%; }


#footer .fournisseurs { position: relative; font-family:'LEMONMILKPro'; display: flex; align-items: baseline; justify-content: space-between; padding: 5vmin 0; }
#footer .fournisseurs:before { content: ''; position: absolute; top: 0; right: 0; width: 90vw; height: 50px; background-color: #FC0; clip-path: polygon(0px 50px, 50px 0, 100% 0, 100% 2px, 51px 2px, 2px 50px); }
#footer .fournisseurs p{ text-transform: uppercase; white-space: nowrap; padding: 0 4vmin; }
#footer .fournisseurs ul{ display: flex; align-items: center; justify-content: space-evenly; flex-wrap: wrap; width: 100%; }
#footer .fournisseurs img{ max-height: 80px; width: auto; margin: 0 5px; }
#footer .top { background:#EFEFEF; padding:15px 0; font-family:'LEMONMILKPro'; }
#footer .top .navigation { text-transform:uppercase; font-size:0.938rem; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;}
#footer .top .navigation li { margin-bottom:10px; }
#footer .middle { background: linear-gradient(#FFE73F 0%, #ffe000 48.72%, #ffbf00 100%); padding:50px 0; font-family:'LEMONMILKPro'; font-weight:bold; }
#footer .middle .address { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; }
#footer .middle .address img { margin-right:30px; }
#footer .middle .phone { display:flex; flex-direction: column; align-items: flex-start; justify-content: center; }
#footer .middle .phone > div{ display:flex; flex-direction: row; align-items: center; justify-content: center; margin: 0.3em 0; }
#footer .middle .phone img { margin-right:20px; }
#footer .bottom { padding:30px 0; background:#000000; color:#fff; font-size:0.938rem; }
#footer .bottom .navigation { text-transform:uppercase; }
#footer .bottom .navigation li:after { content:'-'; margin:0 5px; }
#footer .bottom .navigation li:last-child:after { content:none; }
#footer .bottom .publipresse a { color:#FFE000; }

#main > .legal{ margin-top: 260px; margin-bottom: 5vmin; }
#main > .legal h1{ font-size: 3.375rem; color: #212529; font-family: 'LEMONMILKPro', sans-serif; font-weight: bold; margin-bottom: 1em; text-transform: uppercase; }

/**
 * Pages
 **/

.grey { background:#EFEFEF; }
.padding { padding-top:10vh; padding-bottom:10vh; }
.bigpadding { padding-top:15vh; padding-bottom:15vh; }

.title-wrapper { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; margin-bottom:50px; }
.title-wrapper h2 { margin-bottom:0; white-space:nowrap; }
.title-wrapper svg { margin-left:50px; }
/* .title-wrapper .angle-l { max-width:50vw; } */
/* .title-wrapper .angle-l { position:absolute; right:0; max-width:60vw; } */

.btn { position:relative; font-family:'Raleway'; font-weight:900; font-style:italic; border-radius:0; box-shadow:none; border:none; padding:10px 50px; z-index:1; }
.btn:before { content:''; position:absolute; z-index:-1; left:0; top:0; width:100%; height:100%; background: linear-gradient(#ffbf00 0%, #ffe000 100%); clip-path: polygon(30px 0%, 100% 0%, calc(100% - 30px) 100%, 0% 100%); }
.btn:after { content:''; position:absolute; z-index:-2; left:0; top:0; width:calc(100% + 4px); height:calc(100% + 4px); background:url(../themes/bbs/assets/img/btn-bg.svg) no-repeat right bottom; opacity:0; transition:all 0.5s ease 0s; }
.btn:hover:after { opacity:1; }
.btn-check:focus+.btn, 
.btn:focus{ box-shadow: none; }

/* General */
#banner { position:relative; }
#banner:after { content:''; position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:1; background:#000; opacity:0.2;}
#banner .bg { max-height:100vh; min-height:50vh;  object-fit: cover; }
#banner h1 { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; }
#banner h1 .first { font-size:3.375rem; color:#fff; }
#banner h1 .second { font-size:1.75rem; color:#FFBF00; }
#banner .caption { position:absolute; z-index:3; bottom:175px; width:100%; font-family:'LEMONMILKPro'; text-transform:uppercase; font-weight:bold; }
#banner .stripes { position:absolute; z-index:2; right:-50px; bottom:20px; }

#intro .floating { position:absolute; right:30px; top:0; z-index: 2; transform:translateY(-50%); pointer-events: none; }
#intro .corner-bl { position:absolute; left:100px; bottom:50px; z-index:2; max-width:50%; pointer-events: none; }
#intro .corner-br { position:absolute; right:100px; bottom:50px; z-index:2; max-width:50%; pointer-events: none; }

#etapes .image img { max-height:200px; object-fit:cover; }

#realisations { background: linear-gradient(#FFF8C5 0%, #ffe000 48.72%, #ffbf00 100%); }
#realisations .slider { margin-top:30px; }
#realisations .more { font-weight:900; }
#realisations .navigation { display:flex; flex-direction:row; align-items:center; justify-content:center; background:#000; color:#fff; height:65px; width: 100vw; left: 50%; position: relative; transform: translateX(-50vw); }
#realisations .navigation button { border:none; padding:0; background:none; }
#realisations .pagination { width:auto; margin:0 30px; font-family:'LEMONMILKPro'; color:#ffe000; }

#chantiers .bottom { padding:50px 0 0 0; }
#chantiers .bottom .navigation button { margin:0 30px; }
#chantiers .bottom .column { display:flex; align-items:center; justify-content:center; }

/* Accueil */
#accueil #banner:after { opacity:0.5; }
/* #accueil #banner h1 .first { color:#0C090A; } */
#accueil #etapes { background:url(../themes/bbs/assets/img/etapes-bg.jpg) no-repeat center bottom; }


/* Etapes */
#etapes .swiper-slide { position:relative; }
#etapes .image { position:relative; display:flex; flex-direction:row; align-items:stretch; justify-content:flex-start; margin-right:100px; }
#etapes .number { min-width:100px; background: linear-gradient(#ffe000 0%, #eeb200 100%);  }
#etapes .number span { position:absolute; right:0; bottom:0; writing-mode:vertical-lr; transform:rotate(180deg); font-family:'LEMONMILKPro'; font-weight:bold; font-size:5rem; line-height:0.8em; color:#fff; }
#etapes .text { padding:50px 0 50px 100px; position:relative; }
#etapes .text h3 { font-size:1.5rem; }
#etapes .text:before { content:''; position:absolute; left:50px; top:-50px; width:2px; height:400px; background:#EEB200 }

/* Solutions */
#solutions .legend {z-index:1; background:linear-gradient(#ffe000 0%, #eeb200 100%); color:#fff; text-align:right; font-size:3rem; text-transform:uppercase; padding:0 30px; font-weight:bold; }

/* Finitions */
#finitions .record { margin-bottom:10vh; }
#finitions .record:last-child { margin-bottom:0; }
#finitions .record .title-wrapper h2 { color:#F7CB00; font-weight:900; text-transform:none; white-space:normal; }
#finitions .record:nth-child(odd) .title-wrapper svg {  margin-right:50px; }
#finitions .record:nth-child(odd) .title-wrapper h2 { text-align:right; }
#finitions .record:nth-child(odd) .image { order:2; }
#finitions .record:nth-child(odd) .text { text-align:right; order:1; }
#finitions .record:nth-child(even) .image { order:1; }
#finitions .record:nth-child(even) .text { order:2; }

/* Entreprise */
#entreprise #intro .navigation { margin-top: 1.5em; }
#entreprise #intro .navigation img { margin-left: 5vmin; }
#entreprise #intro figure { margin-bottom: 0; }
#entreprise #intro figcaption { font-size: 0.8em; margin: 0.4em 0.2em; }
#entreprise #etapes .row { margin-top:100px; }
#entreprise #etapes .item { text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:space-between; }
#entreprise #etapes .label { font-family:'LEMONMILKPro'; font-size:1.3rem; margin-bottom:30px; }
#entreprise #etapes .number { font-size:5rem; color:#FFBF00; margin-top:50px; font-family:'LEMONMILKPro'; background:none; }

/* Nos réalisations */
#nos-realisations #filters ul { display:flex; flex-direction:row; align-items:center; justify-content:center; flex-wrap:wrap; }
#nos-realisations #filters li { margin:5px 15px; }
#nos-realisations #filters a { border:2px solid #F6C042; border-radius:20px; padding:15px; text-align:center; display:block; transition:all 0.5s ease 0s; font-weight:400; }
#nos-realisations #filters a:hover { background:#F6C042;}

#nos-realisations .realisations h2 { margin-left:100px; margin-right:100px; }

#nos-realisations .realisations:nth-child(even) h2 { text-align:right; }
#nos-realisations .realisations:nth-child(even) .realisation h3 { right: inherit; left: 0; padding: 0.5em 2em 0.5em 0.5em; }
#nos-realisations .realisations:nth-child(even) .realisation h3:before { clip-path: polygon(0 0, 100% 0, calc(100% - 2em) 100%, 0 100%); }
#nos-realisations .realisations:nth-child(even) .bottom .column:first-child { order:2; }
#nos-realisations .realisations:nth-child(even) .bottom .column:last-child { order:1; }

#nos-realisations .realisations .bottom { padding:50px 0 0 0; }
#nos-realisations .realisations .bottom .navigation button { margin:0 30px; }
#nos-realisations .realisations .bottom .column { display:flex; align-items:center; justify-content:center; }

.realisation{ position: relative; }
.realisation:after{ content: ''; position: absolute; bottom: 3vmin; right: 5vmin; width: 10vmin; height: 10vmin; pointer-events: none; }
.realisation.more:after{ background: url(../themes/bbs/assets/img/more-images.svg) no-repeat 50% 50%; background-size: contain; }
.realisation.zoom:after{ background: url(../themes/bbs/assets/img/zoom-image.svg) no-repeat 50% 50%; background-size: contain; }
.realisation h3{ position: absolute; top: -1px; right: -1px; padding: 0.5em 0.5em 0.5em 2em; color: #fff; font-size: 1.5rem; font-weight: 800; }
.realisation h3:before{ content: ''; position: absolute; z-index: 0; background-color: #000; width: 100%; height: 100%; top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 2em 100%); }
.realisation h3 span{ z-index: 1; position: relative; }


/* Contact */
#contact #form .form-control { border-radius:0; }














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

}

/**
 * XL
 **/
@media (max-width: 1399px) {
    html { font-size:14px; }
    .btn:before { clip-path:polygon(28px 0%, 100% 0%, calc(100% - 28px) 100%, 0% 100%) }

    #header .top .secondary a { padding:0 15px; }
    #header .top .secondary .shape { padding-left:50px; }

    #etapes .image { margin-right:50px; }

}

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

    #banner .caption { bottom:100px; }

    #intro .corner-bl { left:50px; }
    #intro .corner-br { right:50px; }

    #etapes .image { margin-right:0; }

    #etapes .text { padding:30px 0 30px 50px }
    #etapes .text:before { left:20px; }

    #entreprise #etapes .picto svg { max-height:100px; }
    #entreprise #etapes .number { font-size:4rem; margin-top:15px; }
    
}

/**
 * MD
 **/
@media (max-width: 991px) {
    html { font-size:12px; }

    .btn:before { clip-path:polygon(26px 0%, 100% 0%, calc(100% - 26px) 100%, 0% 100%) }

    .hamburger { padding:0; position:relative; z-index: 11; }

    #header .top { z-index: 11; transform:translateY(0) !important; }
    #header.top .top { overflow:visible; }
    #header .top .secondary a { padding:0 10px; }
    #header .top .secondary .shape { padding-left:60px; padding-right:20px; }
    #header .logo{ transform: none !important; }

    #overlay { position:fixed; left:0; top:0; width:100%; height:100vh; z-index: 10; pointer-events:none; opacity:0; transition:all 0.5s ease 0s; background:#ffe000; display:flex; align-items:center; justify-content:center; }
    #overlay li { margin-bottom:5px; }
    #overlay a { font-size:1.4rem; }

    body.open #overlay { opacity:1; pointer-events:auto; }

    #intro .corner-bl { left:20px; bottom:20px; }
    #intro .corner-br { right:20px; bottom:20px; }

    #footer .fournisseurs{ flex-direction: column; padding-top: 60px; }
    
    #main > .legal{ margin-top: 100px; }
}

/**
 * SM
 **/
@media (max-width: 767px) {
    #banner .caption { bottom:60px; }

    #intro .floating { position:static; transform:translateY(0); }

    #intro .corner-bl,
    #intro .corner-br { display:none; }

    .popup-fancybox{ max-width: 400px !important; width: 90%; }
    
}

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

    .padding { padding-top:5vh; padding-bottom:5vh; }

    #intro .image { margin-bottom:15px; margin-top:15px; }

    #banner h1 .first { font-size:2.75rem; }
    #banner h1 .second { font-size:1.25rem; }
    #etapes .number { min-width:50px; }

    #footer .middle .row { flex-direction:column; align-items:center; justify-content:center; }
    #footer .middle .address { margin-bottom:30px; }

    #footer .bottom .navigation { margin-bottom:30px; }

    #etapes .title-wrapper { margin-bottom:15px; justify-content:center; }
    #etapes .title-wrapper br { display:none; }
    #etapes .title-wrapper .angle-l { display:none; }

    #entreprise #etapes .item { margin-bottom:15px; }

    #chantiers .bottom .column:first-child { margin-bottom:30px; }

    #nos-realisations .realisations .bottom .column { margin-bottom:15px; }

    #nos-realisations .realisations .slider h2 { margin:0 0 10px 0; text-align:center !important; }
    
    
}