@font-face { font-family: 'paco'; src: url('../fonts/paco.eot'); src: url('../fonts/paco.eot?#iefix') format('embedded-opentype'), url('../fonts/paco.woff2') format('woff2'), url('../fonts/paco.woff') format('woff'), url('../fonts/paco.ttf') format('truetype'), url('../fonts/paco.svg#paco') format('svg'); font-weight: normal; font-style: normal; font-display: swap } @font-face { font-family: 'din-cd'; src: url('../fonts/dincond-bold.eot'); src: url('../fonts/dincond-bold.eot?#iefix') format('embedded-opentype'), url('../fonts/dincond-bold.woff2') format('woff2'), url('../fonts/dincond-bold.woff') format('woff'), url('../fonts/dincond-bold.ttf') format('truetype'), url('../fonts/dincond-bold.svg#dincond-bold') format('svg'); font-weight: bold; font-style: normal; font-display: swap } body, ul, li, ol, form, h1, h2, h3, h4, h5, h6, div, span, p { padding: 0; margin: 0; border: 0; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none } article, aside, dialog, figcaption, figure, sec_atout, header, hgroup, main, nav, section { display: block } input, textarea { -webkit-appearance: none; -ms-appearance: none; appearance: none; -moz-appearance: none; -o-appearance: none; border-radius: 0 } * { outline: none!important } strong, b { font-weight: normal } ul { list-style-type: none } body { font: normal 14px/22px paco; color: #000; background: #fff; outline: none!important } body * { box-sizing: border-box; outline: 0 } p { margin-bottom: 40px } a { text-decoration: none; color: #4c565a; outline: 0 } img { border: 0 } .clr { zoom: 1; clear: both; float: none; display: block } .clr:after { content: ''; display: table; width: 100%; clear: both } .container { max-width: 1680px; padding: 0 60px; width: 100%; margin: auto } .s-titre { font: normal 3.5em din-cd; margin-bottom: 30px; text-transform: uppercase } .center { text-align: center } .pt_150 { padding-top: 100px } .pt_130 { padding-top: 131px } .pb_150 { padding-bottom: 100px } .pb_110 { padding-bottom: 110px } .pt_100 { padding-top: 100px } .pb_100 { padding-bottom: 100px } .d_flex { display: flex; flex-wrap: wrap } .align_center { align-items: center } .justify_center { justify-content: center } .flex_start { align-items: flex-start } .col_50 { width: 50% } .col_30 { width: 33.33% } .banner { position: relative } .banner video, .banner img { height: 100vh; width: 100%; display: block; object-fit: cover } .banner .play-button { opacity: 0 } .textBanner { position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 0 24px; flex-direction: column } .textBanner .text { font: normal 120px/120px din-cd; text-transform: uppercase } .link_logo { max-width: 900px; width: 100% } .titre { font: normal 80px/96px din-cd; text-transform: uppercase; margin-bottom: 20px } .sec_we_commit p { font: normal 28px/45px paco } .sec_we_commit .content { max-width: 1096px; width: 100%; margin: auto } .sec_atout { background: #fdd; margin: 0 } .sec_text_img img { width: 100%; display: block } .sec_text_img .container { max-width: 100%; padding: 0 } .sec_text_img .text { text-align: center; font: normal 1.5em/1.5em paco } .col.text .content { max-width: 800px; margin: auto; padding: 0 40px } .sec_srvc .video { position: relative; height: 418px; overflow: hidden; } .banner .video { height: 100vh; position: relative; overflow: hidden; } .banner .video iframe { width: 100%; height: 100% } .banner .video .iframe-container { width: 200%; height: 200%; position: absolute; top: -50%; left: -50%; } .banner .video iframe { width: 100%; height: 100%; } .background-video { height: 100vh; position: relative; overflow: hidden; } #video-overlay { background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; background-position: center } @media (min-aspect-ratio: 16/9) { .sec_srvc .video .iframe-container { height: 120%; top: -100%; } } @media (max-aspect-ratio: 16/9) { .sec_srvc .video .iframe-container { width: 120%; left: -100%; } } .sec_srvc .video iframe { height: 150%; width: 150%; position: absolute; left: -25%; top: -25%; } .html5-video-player:not(.ytp-transparent) { background-color: #fff !important; } .sec_srvc video { height: 418px; object-fit: cover; width: 100%; display: block } .sec_srvc .content { background: #fff; height: 100% } .col { padding: 0 15px } .sec_text_img .col { padding: 0 } .sec_text_img .row { margin: 0 } .row { margin: 0 -15px } .sec_srvc .text_srvc { padding: 50px 50px } .sec_srvc { background: #fdd; margin-top: 0 } .play-button { background-color: transparent; border: 2px solid #fff; border-radius: 100%; cursor: pointer; height: 64px; opacity: .8; transition: opacity .2s ease-out; width: 64px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 9; display: none } .play-button span { border-bottom: 9px solid transparent; border-left: 18px solid #e33e63; border-top: 9px solid transparent; display: inline-block; height: 0; margin: 0; vertical-align: middle; width: 0 } .sec_atout .col { padding: 0 15px; position: relative } .picto img { display: block } .picto { height: 127px; margin-bottom: 50px; position: relative } .sec_atout .col .content { max-width: 358px; margin: auto } .sec_atout .s-titre { margin-bottom: 20px; min-height: 50px; font: normal 40px/45px din-cd } .row_sec_atout { position: relative } .play-button.hide { opacity: 0; top: 0; width: 100%; left: 0; transform: translate(0, 0); height: 100%; transition: all ease-in-out 0s } .sec_srvc .col:first-child .text_srvc { padding: 50px 70px } .sec_srvc .video .iframe-container:after { content: ""; width: 100%; height: 100%; position: absolute; z-index: 100; left: 0; right: 0; display: block; } @media(min-width:1400px) and (max-width:1540px) { .sec_srvc .video iframe { height: 200%; width: 200%; position: absolute; left: -45%; top: -45%; } } @media(min-width:1134.98px) and (max-width:1440px) { h1.titre { font-size: 70px } .sec_text_img h2.s-titre { font-size: 60px } .sec_text_img p { font-size: 20px } .sec_we_commit p { font-size: 25px } .sec_srvc h2.s-titre { font-size: 40px } .sec_srvc p { font-size: 14px } .sec_srvc .video iframe { height: 200%; width: 200%; position: absolute; left: -50%; top: -50%; } } @media(max-width:1365px) { .sec_srvc .video { height: 350px } .sec_srvc .video iframe { height: 200%; width: 200%; position: absolute; left: -50%; top: -50%; } } @media(max-width:1135px) { .s-titre { font-size: 2em; margin-bottom: 10px } .sec_text_img .text { font-size: 1.05em; margin-bottom: 0!important } .titre { font: normal 4em din-cd; margin-bottom: 10px } .sec_we_commit p { font: normal 1.750em paco } p { margin-bottom: 10px } .sec_srvc .video { height: 300px } .sec_srvc .video iframe { height: 218%; width: 218%; position: absolute; left: -60%; top: -60%; } } @media(max-width:991px) { .textBanner .text { font: normal 80px/100px din-cd } .pt_150 { padding-top: 72px } .pt_130 { padding-top: 72px } .pb_150 { padding-bottom: 72px } .sec_text_img.pb_150 { padding-bottom: 40px } .pt_100 { padding-top: 60px } .pb_100 { padding-bottom: 40px } .pb_110 { padding-bottom: 40px } .col_30 { width: 50% } .sec_srvc .col, .sec_atout .col { padding-bottom: 40px } .sec_srvc .col:last-child, .sec_atout .col:last-child { padding-bottom: 0 } .row_sec_atout::after { display: none } .banner .play-button, .play-button { display: none } .sec_srvc .video .iframe-container:after { display: none; } } @media(max-width:768px) { .col_50, .col_30 { width: 100% } .col.text .content { max-width: 100% } .container { padding: 0 24px } .col { padding: 0 10px } .row { margin: 0 -10px } .col.text .content { padding-top: 40px } .reverse_on_mobile { flex-direction: column-reverse } .s-titre { font: normal 24px/28px din-cd; margin-bottom: 10px } .sec_we_commit p { font: normal 20px/25px paco } .textBanner, .titre { font: normal 28px/34px din-cd; margin-bottom: 30px } .textBanner .text { font: normal 50px/65px din-cd } .sec_atout .s-titre { min-height: inherit; margin-bottom: 10px; font: normal 24px/28px din-cd } .sec_text_img .text { font: normal 16px/26px paco } .picto { height: auto; margin-bottom: 30px } .picto::after { display: none } .sec_atout .col::after { display: none } .sec_atout.pb_100 { padding-bottom: 40px } .sec_srvc .text_srvc { padding: 40px 24px 40px } .sec_srvc video { height: 325px } .banner .play-button { opacity: 0 } .banner .play-button.hide { opacity: 0 } .sec_srvc .col:first-child .text_srvc { padding: 40px 24px 40px } .pt_130 { padding-top: 40px; } .col.text .content { padding-bottom: 40px } .sec_atout.pb_100 { padding-top: 40px } .sec_srvc { margin-top: 0; } .sec_atout { margin: 0; } } @media(max-width:600px) { .banner video, .banner img { height: 375px } .sec_we_commit.pt_130.pb_100.wow.fadeIn { padding-bottom: 36px } .sec_text_img.pb_150.sec3 { padding-bottom: 36px } .sec_text_img.pb_150.sec4 { padding-bottom: 36px } .sec_srvc.pt_150.pb_150 { padding-top: 62px; padding-bottom: 62px } .sec_atout.pt_100.pb_100 { padding-top: 74px; padding-bottom: 36px } .sec_atout { margin: 0 0 } .sec_srvc { margin-top: 0 } .col.text .content { padding-left: 20px; padding-right: 20px } .banner .video { height: 420px; position: relative; overflow: hidden; } .sec_atout.pt_100.pb_100 { padding-top: 50px; padding-bottom: 50px; } }