:root{--blue:#022940;--purple:#5556a5;--pink:#c13794;--darkgray:#c6c6c5;--gray:#eaeaea;--titlefont:"heavitasregular";--mainfont:"Poppins";}
* {box-sizing:border-box;}
body {position:relative;margin:0;padding:0;cursor:default;color:var(--blue);font:400 20px var(--mainfont);line-height: 28px;background:white url('/img/site/bodyBG.png') repeat-x top left;transition:opacity 0.3s;}
body.loaded {opacity: 1 !important;}
.noscroll {overflow-y:hidden !important;}
h3 {color:var(--purple);font-weight:normal;text-transform:uppercase;}
.grandtitre img {display:none;}
#header, #main, #footer {width:100%;margin:0 auto;max-width:1920px;position:relative;}
.wrapper {width:100%;margin:0 auto;max-width:1440px;position:relative;padding:0 20px;}
.highlight, .highlight2 {color:var(--purple);font:400 24px var(--mainfont);font-style:italic;}
.highlight2 {color:var(--pink);}
section:not(.nomarge), .thementions {margin-bottom:90px;}
.pink {color:var(--pink);}
.purple {color:var(--purple);}
.btn, .consent input[type="button"], input[type="submit"], a.retour {display:inline-block;text-decoration:none;padding:14px 35px;cursor:pointer;background:white;border:solid 2px white;border-radius:20px;font:700 18px var(--mainfont);text-transform:uppercase;color:var(--blue);line-height:18px;transition:background-color 0.1s;}
.btn.btn-primary, .consent input[type="button"], input[type="submit"], a.retour {background:var(--purple);color:white;border-color:var(--purple);}
.btn.btn-secondary, #header .menu ul li.selected>a {background:var(--blue);color:white;border-color:var(--blue);}
.btn.btn-outline {border-color:var(--purple);color:var(--purple);}
.btn.btn-xl {font-size:24px;line-height:30px;}
.btn:hover, .consent input[type="button"]:hover, input[type="submit"]:hover, a.retour:hover {background:var(--pink);color:white;border-color:var(--pink);}
.title {padding-left:30px;position:relative;}
.title .subtitle, .title2 .subtitle, .grandtitre h1 {color:var(--pink);text-transform:uppercase;font:400 19px var(--mainfont);margin:0 !important;}
.title h2, .title2 h2, .titlenews h1 {color:var(--blue);font:400 29px var(--titlefont);text-transform:uppercase;line-height:40px;margin:5px 0 20px 0;word-break: keep-all;}
.title2 {text-align:center;position:relative;}
.title:before {content:url('/img/site/code-pink.svg');position:absolute;top:5px;left:0;width:12px;height:55px;}
.title2:before {content:url('/img/site/code-white.svg');display:inline-block;margin-bottom:15px;}
.cols {display:flex;flex-wrap:wrap;}
.colscenter {align-items:center;}
.twocols .col {width:50%;}
.threecols .col {width:33.333%;}
.coltext {display:flex;flex-direction:column;}
.coltext p {margin:10px 0;}
.coltext p a:not(.btn) {color:var(--pink);}
.coltext p a:not(.btn):hover {color:var(--purple);text-decoration:none;}
.colimg {position:relative;}
.colimg .picture {position:relative;display:inline-block;z-index:4;}
.colimg .picture picture {display:flex;}
.colimg .bluehexa {width:380px;height:380px;background:var(--blue);}
.colimg .picture i {position: absolute;z-index: 5;color: var(--pink);font-size: 60px;}
.colcenter {text-align: center;}
.colright {text-align:right;}
.colpadding {padding:20px;}
section ul, #dymentions ul {list-style:none;display:flex;flex-direction: column;gap:10px;}
section ul li:before, #dymentions ul li:before {content:url('/img/site/hexa.svg');width:20px;height:20px;display:inline-block;position: relative;top: 3px;margin-right:10px;}
.cta, .btns {display:flex;flex-wrap:wrap;gap:25px;margin:30px 0;}
.ctacenter {justify-content: center;}
.bggray {background:var(--gray);}
.bgpink {background: #f7e6f2;}
.bgpink p.subtitle {color:var(--purple);}
.grayout, .thementions {background:url('/img/site/grayBG.png') repeat-x left bottom !important;}
.news.grayout {background-position:0px 200px !important;}
a.asterix {color:var(--pink);text-decoration:none;font-weight:bold;}
.mt60 {margin-top:60px;}
.mb60 {margin-bottom:60px;}
.mt40 {margin-top:40px;}
.mt0 {margin-top:0;}
.mb40 {margin-bottom:40px !important;}
.mb0 {margin-bottom:0;}
.mt20 {margin-top:20px;}
.mb20 {margin-bottom:20px;}
.pt0 {padding-top:0 !important;}
.pb0 {padding-bottom:0 !important;}
.pt40 {padding-top:40px;}
.pt60 {padding-top:60px;}
.pb40 {padding-bottom:40px;}
.pb60 {padding-bottom:60px;}
.alignright {text-align:right;}
.alignleft {text-align:left;}
.aligncenter {text-align:center;}
.nomargin {margin:0;}
ul.addpadding {padding-top:40px;padding-bottom:40px;}
.txtcenter {text-align: center;}
.link {color:var(--blue);}
.link:hover {text-decoration:none;}
.illu {position:relative}
#hero {padding-top: 40px;}
#hero p {display: inline-block;width: 100%;margin:10px 0;}
.flash_box, .flash_error, .error {color:var(--pink);font-weight:bold;}
#header .wrapper {padding:30px 20px;display:flex;gap:30px;align-items:center;justify-content:space-between;}
#header .wrapper:after {content:url('/img/site/halo.jpg');position:absolute;top:0;left:-250px;z-index:1;}
#header .logo, section, #footer {position:relative;z-index:2;}
#header .logo {display:flex;}
#priserdv iframe {width:100%;height:900px;border:none;}
.colscoord .col {text-align:center;}
.colscoord .col h3 {margin-bottom:0;}
.colscoord .col h4 {margin:0;}
.colscoord .col p a:not(.btn), .coordonnees p a:not(.btn) {color: var(--purple);font: 700 22px var(--mainfont); text-decoration: none;}
.colscoord .col p a:not(.btn):hover, .coordonnees p a:not(.btn):hover {color:var(--pink);}
p.linkicon i {background: var(--pink);color: white;width: 45px;height: 45px;text-align: center;line-height: 45px;}
#problematique .cols .colimg {padding-right:20px;}
#problematique .cols .colimg .bluehexa {position:absolute;z-index:3;top:5px;right:100px;}
#problematique .cols .colimg .illu>img {position:absolute;z-index:1;bottom:5px;right:60px;}
#presentation .colimg .picture i {top: 250px;left: 120px;transition:top 0.3s;}
#problematique .cols .colimg .picture i {top: 220px;left: 360px;transition:transform 0.3s;}
#problematique .cols .colimg .picture:hover i {transform:scale(1.2);}
#problematique.recycle .cols .colimg .picture i {top: 220px;left: 360px;transition:transform 0.3s;}
#problematique.recycle .cols .colimg .picture:hover i {transform:rotate(30deg);}
#tracas .cols, #solution .cols {padding-bottom:90px;}
#tracas .cols .colimg .bluehexa, #surmesure .colimg .bluehexa {position:absolute;z-index:3;top:150px;left:115px;}
#tracas .cols .colimg .illu>img, #surmesure .colimg .illu>img {position:absolute;z-index:1;top:5px;left:60px;}
#tracas .cols .colimg .picture i {top: 70px;left: 225px;transform: rotate(35deg);transition:transform 0.3s;}
#tracas .cols .colimg .picture:hover i {transform: rotate(65deg);}
#tracas .threecols {gap:40px;}
#tracas .threecols .col {display:flex;flex-direction:column;align-items:center;width:calc(33.333% - 27px);background:white;border-radius:20px;font-style:italic;font-size:18px;line-height:normal;padding:80px 30px 25px 30px;text-align:center;position:relative;}
#surmesure .colimg .picture i {top: 240px;left: 105px;transform: rotate(-20deg);transition:top 0.3s, left 0.3s;}
#surmesure .colimg .picture:hover i {top:220px;left:125px;}
#surmesure.moutons .colimg .picture i {top:110px;left: 280px;transform: rotate(-20deg);transition:top 0.3s, left 0.3s;}
#surmesure.moutons .colimg .picture:hover i {top:100px;left:275px;}
h2.garant {color:var(--pink);text-align:center;font:normal 30px var(--titlefont);margin:90px 0 0 0;}
#garanties {display:flex;gap:30px;padding:40px;align-items:center;border-radius:20px;border:solid 6px var(--pink);margin:10px auto 90px auto;width:90%;}
#garanties li {margin:5px 0;}
#garanties h3 {color:var(--pink);}
#refs {display:flex;gap:40px;flex-wrap:wrap;}
.ref {background:white;border-radius:20px;padding:20px;font-size:16px;font-style:italic;width:calc(50% - 20px);display:flex;flex-direction:column;gap:0px;}
.reftitle {width:100%;}
.reftitle h3, .reftitle p {margin:0;}
.reftitle h3 {color:var(--blue);margin-bottom:8px;}
.ref p {text-align:left;}
.ref a {display:inline-block;margin-bottom:8px;}
.ref img {width:auto;display:inline-block;}
.ref .reflinks {display:flex;gap:20px;align-items:center;margin:auto 0 0 0;}
.ref .reflinks img {height:60px;width:auto;}
.ref .reflinks a {color:var(--pink);}
.ref .reflinks a:hover {color:var(--blue);text-decoration:none;}
p.perso {display:flex;align-items:center;gap:10px;margin-top:8px !important;font:normal 17px var(--titlefont);text-transform:uppercase;flex-wrap:wrap;}
p.perso i {color:var(--pink);}
p.perso a {color:var(--pink);font:400 16px var(--mainfont);text-transform:initial;text-decoration:none;word-break: break-word;}
.quote {position:relative;width:85%;color:var(--pink);font:400 30px var(--mainfont);margin:50px auto;border:solid 6px var(--blue);border-radius:20px;padding:40px 80px;text-align:center;line-height: 40px;}
.quote.clientquote {font-size:27px;}
.quote p {margin:0;}
.quote:before, .quote:after {font-size:67px;width:100px;height:100px;color:var(--pink);font-family:'Font Awesome 5 Free';font-weight: 900;position:absolute;background:white;line-height:100px;}
.quote:after {content:"\f10e";bottom:-50px;right:-50px;}
.quote:before {content:"\f10d";top:-50px;left:-50px;}
#fotos {background:var(--blue);padding:60px 0;color:white;}
#fotos #dyphotosgallery {display:flex;gap:30px;flex-wrap:wrap;justify-content:center;}
#fotos #dyphotosgallery a {width: calc(25% - 23px);height:auto;text-decoration:none;}
#fotos #dyphotosgallery a img {width:100%;height:auto;border-radius:20px;border:solid 1px var(--gray);}
#fotos .title2 {margin-bottom:60px;}
#fotos .title2 .subtitle, #fotos .title2 h2 {color:white;}
#mentions {font-size:16px;text-align:center;line-height:30px;padding:40px 20px;}
#mentions a {color:var(--blue);}
#mentions a:hover {text-decoration:none;}
#asterix strong {color:var(--pink);}
a#up {position:fixed;z-index:1998;background:var(--pink);color:white;width:45px;height:45px;text-align:center;line-height:45px;bottom:50px;right:-50px;transition:right 0.3s;}
a#up:hover {background:var(--blue);}
a#up.ok {right:50px;}
.bandoimg picture {position: relative;display: flex;}
.bandoimg picture img {width: 100%;height: auto;border-radius: 20px;}

.masked, #paging .pages a {
    mask: url('/img/site/hexa.svg');
    mask-image: url("/img/site/hexa.svg");
    -webkit-mask-image: url('/img/site/hexa.svg');
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-type: alpha;
    -webkit-mask-type: alpha;
}

@media screen and (max-width:1439px) {
    .wrapper {max-width: 1280px;}
    #garanties {width:96%;}
    .illu picture img {width:480px;height:auto;}
    #problematique .cols .colimg .bluehexa {top:0;right:60px;}
    #problematique .cols .colimg .illu>img {right:20px;}
    #problematique .cols .colimg .picture i {top: 200px;left: 330px;}
    #tracas .cols .colimg .bluehexa, #surmesure .colimg .bluehexa {top: 110px;left: 100px;}
    #tracas .cols .colimg .picture i {top: 60px;left: 208px;}
}

@media screen and (max-width:1279px) {
    .wrapper {max-width: 1024px;}
    .illu picture img {width: 400px;height: auto;position:relative;}
    .colimg .bluehexa, .colimg .illu > img {width: 300px;height: 300px;}
    #problematique .cols .colimg {padding-right:30px;}
    #problematique .cols .colimg .bluehexa {top: 0;right: 20px;}
    #problematique .cols .colimg .illu > img {right: -10px;bottom: 20px;}
    #problematique .colscenter {align-items:initial;}
    #problematique .colscenter .colimg .illu {position:sticky;top:40px;}
    #surmesure .colscenter {align-items:initial;}
    #surmesure .colimg .illu {position:sticky;top:40px;}
    #tracas .cols .colimg .bluehexa, #surmesure .colimg .bluehexa {top: 100px;left: 65px;}
    #tracas .cols .colimg .illu > img, #surmesure .colimg .illu>img {top: 5px;left: 30px;}
    #tracas .cols .colimg .picture i {top: 46px;left: 168px;}
    #problematique .cols .colimg .picture i {top: 170px;left: 270px;}
    #surmesure .colimg .picture i {top: 180px;left: 75px;}
    #surmesure .colimg .picture:hover i {top: 165px;left:95px;}
    .bando {font-size:50px;}
    .btn {font-size:17px;}
    #fotos #dyphotosgallery a {width: calc(33.33% - 20px);}
    #surmesure.moutons .colimg .picture i {top:60px;left: 200px;}
    #surmesure.moutons .colimg .picture:hover i {top:50px;left:195px;}
    #problematique.recycle .cols .colimg .picture i {top: 180px;left: 270px;}
}

@media screen and (max-width:1023px) {
    .wrapper {max-width: 768px;}
    #header .logo img {width:300px;height:auto;} 
    .title h2, .title2 h2, h2.garant, .titlenews h1  {font-size:25px;}
    .cols {flex-direction:column;gap:40px;}
    .cols>div {width:100% !important;padding:0 !important;}
    .cols>div.colimg {justify-content:center;display:flex;}
    .cols>div.colimg .illu {position:relative !important;top:inherit !important;display:inline-block;}
    #problematique .cols .colimg .bluehexa {right:-30px;}
    #problematique .cols .colimg .illu > img {right:-70px;}
    #tracas .cols, #surmesure .cols {flex-direction: column-reverse;}
    #surmesure .cols {gap:80px;}
    #tracas .cols .colimg .bluehexa, #surmesure .colimg .bluehexa {left:-45px;}
    #tracas .cols .colimg .illu > img, #surmesure .colimg .illu>img {left:-40px;}
    .row, #garanties {flex-direction:column;}
    .row p {text-align: center;}
    .row p span {display:block;}
    #garanties ul {padding: 0;text-align: center;}
    .bando {font-size: 37px;}
    .quote {font-size:28px;}
    .quote p br {display:none;}
    #fotos #dyphotosgallery a {width: calc(50% - 15px);}
    #engagements .points, #passe .points {flex-direction:column;}
    .ref {width:100%;}
}

@media screen and (max-width:999px) {
    #priserdv iframe {height:1180px;}
}

@media screen and (max-width:767px) {
    .wrapper {width:600px;}
    #header .logo img {width:230px;}
    .title h2, .title2 h2, h2.garant  {font-size: 22px;line-height: 32px;}
    #hero {padding-top: 20px;}
    .ref .reflinks {flex-direction:column;gap:10px;}
    .cta {flex-direction: column;text-align: center;}
}

@media screen and (max-width:599px) {
    .wrapper {width:480px;}
     #header .wrapper::after {display: none;}
    .colimg .illu, .colimg .illu picture {right:inherit !important;left:inherit !important;}
    .colimg .illu .bluehexa, .colimg .illu>img, .colimg .illu .picture i {display:none;}
    .colimg .illu picture img {width:480px;}
    .quote, .quote.clientquote {font-size:25px;padding: 40px 60px;}
    #refs .perso {flex-direction:column;}
    #fotos #dyphotosgallery a {width:100%;}
    #surmesure .cols {gap: 40px;}
}

@media screen and (max-width:479px) {
    body {font-size:17px;}
    .wrapper {width:360px;}
    #header .wrapper {padding:20px;flex-direction: column;align-items: center;}
    #header .logo img {width:300px;}    
    .title {padding-left:0;}
    .title::before {display:none;}
    .title h2, .title2 h2, h2.garant {font-size: 20px;line-height: 30px;}
    .highlight {font-size:20px;}
    .colimg .illu picture img {width:100%;}
    #tracas .cols .highlight {padding-left:0;}
    .bando {font-size: 30px;}
    #garanties img {width: 200px;height: auto;}
    section ul {padding-left:0;}
    .bando .wrapper {padding:40px 0;}
    .cta a {text-align: center;}
    .row p {font-size:18px;}
    a#up {bottom: 20px;}
    a#up.ok {right:20px;}
    .quote, .quote.clientquote {font-size: 22px;padding:40px;}
     h2.garant {font-size:22px;}
    #garanties ul {text-align:left;}
    #garanties {width: 100%;padding: 20px 0px;border: none;margin:10px auto 40px auto;}
    #refs p.reflinks {word-break: break-word;}
    #refs p.perso {margin-bottom:0;}
    .blocphotos #dyphotosgallery a {width:100%;}
    p.linkicon i {display:none;}
}

@media screen and (max-width:359px) {
    .wrapper {width:300px;padding: 0 10px;}
    #header .logo img {width:260px;}
    #garanties {padding:0;border:none;}
}

@media screen and (max-width:315px) {
    #priserdv iframe {height:1200px;}
}