@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100; src: url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-100.eot'); src: local('Montserrat Thin'), local('Montserrat-Thin'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-100.eot?#iefix') format('embedded-opentype'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-100.woff2') format('woff2'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-100.woff') format('woff'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-100.ttf') format('truetype'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-100.svg#Montserrat') format('svg'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 200; src: url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-200.eot'); src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-200.eot?#iefix') format('embedded-opentype'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-200.woff2') format('woff2'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-200.woff') format('woff'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-200.ttf') format('truetype'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-200.svg#Montserrat') format('svg'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; src: url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-300.eot'); src: local('Montserrat Light'), local('Montserrat-Light'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-300.eot?#iefix') format('embedded-opentype'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-300.woff2') format('woff2'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-300.woff') format('woff'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-300.ttf') format('truetype'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-300.svg#Montserrat') format('svg'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-regular.eot'); src: local('Montserrat Regular'), local('Montserrat-Regular'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-regular.eot?#iefix') format('embedded-opentype'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-regular.woff2') format('woff2'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-regular.woff') format('woff'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-regular.ttf') format('truetype'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-regular.svg#Montserrat') format('svg'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; src: url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-500.eot'); src: local('Montserrat Medium'), local('Montserrat-Medium'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-500.eot?#iefix') format('embedded-opentype'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-500.woff2') format('woff2'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-500.woff') format('woff'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-500.ttf') format('truetype'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-500.svg#Montserrat') format('svg'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; src: url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-600.eot'); src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-600.eot?#iefix') format('embedded-opentype'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-600.woff2') format('woff2'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-600.woff') format('woff'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-600.ttf') format('truetype'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-600.svg#Montserrat') format('svg'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; src: url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-700.eot'); src: local('Montserrat Bold'), local('Montserrat-Bold'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-700.eot?#iefix') format('embedded-opentype'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-700.woff2') format('woff2'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-700.woff') format('woff'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-700.ttf') format('truetype'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-700.svg#Montserrat') format('svg'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; src: url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-800.eot'); src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-800.eot?#iefix') format('embedded-opentype'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-800.woff2') format('woff2'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-800.woff') format('woff'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-800.ttf') format('truetype'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-800.svg#Montserrat') format('svg'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; src: url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-900.eot'); src: local('Montserrat Black'), local('Montserrat-Black'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-900.eot?#iefix') format('embedded-opentype'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-900.woff2') format('woff2'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-900.woff') format('woff'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-900.ttf') format('truetype'), url('../themes/waltefaugle/assets/fonts/montserrat/montserrat-latin-900.svg#Montserrat') format('svg'); } /* 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 **/ html{ font-size: 10px; } body{ font-size: 1.8rem; font-family: 'Montserrat', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: var(--font-regular); --containerWidth: 100%; --asideWidth: calc( ((100vw - var(--containerWidth)) / 2) + (1.5rem / 2) ); --defaultColor: #123C65; --globalColor: var(--defaultColor); --industriel: #1C87C9; --agricole: #377f12; --tertiaire: #ff0000; --batiment: #ff9e00; --industriel-pastel: #436BB1; --agricole-pastel: #53A74D; --tertiaire-pastel: #D34248; --batiment-pastel: #D18305; --recrutement: #3A536C; --swiper-theme-color: #000; --headerHeight: 7rem; --font-light: 200; --font-regular: 400; --font-bold: 600; --font-heavy: 700; --font-black: 900; } body#batiment-industriel{ --globalColor: var(--industriel); } body#batiment-agricole{ --globalColor: var(--agricole); } body#batiment-tertiaire{ --globalColor: var(--tertiaire); } body#waltefaugle-batiment{ --globalColor: var(--batiment); } body#entreprise{ --globalColor: var(--defaultColor); } body#actualites-liste{ --globalColor: var(--recrutement); } body#actualites-article{ --globalColor: var(--recrutement); } :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; } video{ max-width: 100%; margin-bottom: 1.5em; width: auto !important; } #grid{ position: fixed; z-index: 11; width: 100vw; height: 100vh; left: 0; right: 0; margin: auto; pointer-events: none; } #grid > div{ height: 100%; } #grid .row{ height: 100%; } #grid .col-1{ height: 100%; } #grid .col-1 span{ display: block; height: 100%; background-color: #009a9a; opacity: 0.1; } /* Titles */ .h1, h2, h3, h4, h5{ font-weight: normal; margin: 1.5em 0 0.5em; } .h1{ font-size: 5rem;} .h1 small{ font-size: 2.6rem; } h1{ font-size: 2.8rem; margin: 2em 0 1em; padding-bottom: 1em; color: var(--globalColor); position: relative; } .hr{ position: relative; padding-bottom: 0.5em; } /* h1:after, */ .hr:after{ content: ''; width: 4em; height: 0; border-bottom: 1px solid var(--globalColor); position: absolute; bottom: 0; left: 0; } h2{ font-size: 2.8rem; } h3{ font-size: 2.4rem; font-weight: var(--font-light); } h4{ font-size: 2rem; font-weight: var(--font-light); margin: 2em 0 1em; } /* Paragraphs */ p { margin-bottom:1em; } hr{ width: 8rem; height: 1px; border: 0; background-color: var(--globalColor); margin: 1.8em 0 2em; opacity: 1; } hr + hr{ float: right; margin-top: -1.8em; } b, strong { font-weight: var(--font-bold); } .exergue{ font-size: 2.2rem; } /* Link */ a { color:inherit; text-decoration:none; } a:hover { color:inherit; } p a{ color: var(--defaultColor); } p a:hover{ text-decoration: underline; } blockquote{ margin: 0 0 1rem; padding: 0.5em 0.5em 0em 0.8em; border-left: 3px solid var(--globalColor); overflow: hidden; } blockquote p{ margin-bottom: 0.5em; } .fr-file, .ico{ display: flex; align-items: center; margin-right: 1em; } .ico .label{ display: none; } .ico:before{ content: ''; width: 2rem; min-width: 2rem; height: 2rem; margin-right: 0.5em; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; } .ico.notext{ overflow: hidden; white-space: nowrap; width: 2rem; } .ico.notext:before{ margin-right: 0; } .ico.facebook:before{ background-image: url(../themes/waltefaugle/assets/img/ico-fb.svg); } .ico.instagram:before{ background-image: url(../themes/waltefaugle/assets/img/ico-instagram.svg); } .ico.youtube:before{ background-image: url(../themes/waltefaugle/assets/img/ico-youtube.svg); } .ico.linkedin:before{ background-image: url(../themes/waltefaugle/assets/img/ico-linkedin.svg); } .ico.phone:before{ background-image: url(../themes/waltefaugle/assets/img/ico-phone.svg); } .ico.mail:before{ background-image: url(../themes/waltefaugle/assets/img/ico-mail.svg); } .ico.recrutement:before{ background-image: url(../themes/waltefaugle/assets/img/ico-recrutement.svg); } .ico.top:before{ background-image: url(../themes/waltefaugle/assets/img/ico-fleche.svg); transform: rotate(-90deg); } .ico.mail:before{ background-image: url(../themes/waltefaugle/assets/img/ico-mail.svg); } .ico.recrutement:before{ background-image: url(../themes/waltefaugle/assets/img/ico-team.svg); } .fr-file:before { content: ''; background-image: url(../themes/waltefaugle/assets/img/ico-paperclip.svg);width: 1.5rem; min-width: 1.5rem; height: 1.5rem; margin-right: 0.2em; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; } .fr-video{ display: block; width: 100%; height: 0; padding-top: 56%; position: relative; margin-bottom: 3rem; } .fr-video iframe{ position: absolute; width: 100% !important; height: 100% !important; top: 0; } .casper{ display: none; } /* Lists */ ::marker{ color: var(--globalColor); font-weight: var(--font-bold); } ul, ol{ margin-bottom: 2rem; } ul ol, ol ul, ul ul, ol ol{ padding-left: 3rem; } ul li, ol li{ margin-bottom: 0.5rem; margin-top: 0.5rem; line-height: 1.3em; } nav ul, nav ol{ margin-bottom:0; padding:0; list-style:none; } nav ul li, nav ol li{ margin-bottom: 0.5rem; line-height: 1.5em; } ul.timeline{ overflow: hidden; position: relative; } /*ul.timeline:before{ content: ''; position: absolute; top: 1.5em; left: calc(50% + 0.8rem); height: calc(100% - 2.5em); width: 0; border-left: 1px solid #ccc; }*/ ul.timeline li{ width: 45%; height: 8rem; clear: both; text-align: right; display: block; padding: 2rem 3rem 2rem 0; margin: 0; position: relative; } ul.timeline li:before{ content:''; width: 1.5rem; height: 1.5rem; position: absolute; right: -0.75rem; top: 2rem; background-color: #999; z-index: 1; mask-image: url(../themes/waltefaugle/assets/img/hexagone.svg); mask-repeat: no-repeat; mask-position: 0 0; mask-size: contain; -webkit-mask-image: url(../themes/waltefaugle/assets/img/hexagone.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-position: 0 0; -webkit-mask-size: contain; } ul.timeline li:after{ content: ''; position: absolute; top: 1.5em; right: -3rem; width: 0; height: 8rem; border-left: 1px solid #ccc; transform: rotate(-38deg); } ul.timeline li:nth-child(even){ float: right; text-align: left; padding: 2rem 0 2rem 3rem; } ul.timeline li:nth-child(even):before{ right: inherit; left: -0.75rem; } ul.timeline li:nth-child(even):after{ right: inherit; left: -3rem; transform: rotate(38deg); } ul.timeline li:last-child:after{ content: none; } ul.timeline li strong{ display: block; font-size: 4.5rem; font-weight: var(--font-light); color: var(--defaultColor); margin-bottom: 1.5rem; } /* Forms */ :focus, button:focus { outline:none; } input, select, textarea, input{ background-color: transparent; border-radius: 0; border: solid var(--defaultColor); border-width: 0 0 1px 1px; } label { display: inline-block; } select { word-wrap: normal; } button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } .form-control { display: block; width: 100%; padding: .375rem .75rem; font-weight: 400; line-height: 1.5; color: var(--defaultColor); background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: .25rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; } .form-select { display: block; width: 100%; padding: .375rem 2.25rem .375rem .75rem; font-weight: 400; line-height: 1.5; color: var(--defaultColor); background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; border: 1px solid #ced4da; border-radius: .25rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form-control.is-invalid, .form-select.is-invalid{ border-color: #c00; } .form-control.is-invalid:focus, .form-select.is-invalid:focus{ box-shadow: 0 0 0 0.25rem rgb(204 0 0 / 25%); border-color: #c00; } .required + label:after{ content: '*'; color: #c00; } .invalid-feedback { display: none; width: 100%; margin-top: .25rem; font-size: .875em; color: #dc3545; } .invalid-feedback.visible { display:block !important; } .required_without + label:after{ content: '*'; color: #e88b00; } .form-select.required_without.is-invalid, .form-control.required_without.is-invalid { box-shadow: 0 0 0 0.25rem rgb(232 139 0 / 25%); border-color: #e88b00; } .required_without + label + .invalid-feedback { color: #e88b00; } .form-control:focus, .form-select:focus { color: inherit; background-color: #fff; border-color: var(--defaultColor); outline: 0; box-shadow: 0 0 0 0.25rem rgb(18 60 101 / 25%); } .form-floating { position: relative; margin: 0.625rem 0; } .form-floating > .form-control, .form-floating > .form-select { height: calc(2em + 2rem); padding: 1rem .75rem; } .form-floating > label { position: absolute; top: 0; left: 0; height: 100%; padding: 1.625rem .75rem; pointer-events: none; border: 1px solid transparent; transform-origin: 0 0; transition: opacity .1s ease-in-out,transform .1s ease-in-out; } .form-floating > .form-control::placeholder { color: transparent; } .form-floating > .form-select, .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) { padding-top: 2rem; padding-bottom: .0; } .form-floating > .form-control:-webkit-autofill { padding-top: 1.625rem; padding-bottom: .625rem; } .form-floating > .form-control:focus ~ label , .form-floating > .form-control:not(:placeholder-shown) ~ label , .form-floating > .form-select ~ label, .form-floating > .form-control:-webkit-autofill ~ label { opacity: .65; transform: scale(.85) translateY(-1.2rem) translateX(.15rem); } .btn{ font-size: 16px; line-height: 1.8em; display: inline-block; width: auto; border-radius: 3px; margin: 1em 0.7em; border: 2px solid var(--defaultColor); border-width: 3px 0; font-weight: var(--font-bold); color: var(--defaultColor); padding-left: 1em; padding-right: 1em; height: 2em; transition: all 0.2s ease-out; white-space: nowrap; position: relative; opacity: 0.8; } .btn:before{ content: ''; position: absolute; top: 0; left: 0; width: 1.2em; height: 1.2em; border-left: 3px solid var(--defaultColor); border-bottom: 3px solid var(--defaultColor); transform: rotate(45deg) skew(8deg, 8deg) translate(-5px, 10px); } .btn:after { content: ''; position: absolute; top: 0; right: 0; width: 1.2em; height: 1.2em; border-right: 3px solid var(--defaultColor); border-top: 3px solid var(--defaultColor); transform: rotate(45deg) skew(8deg, 8deg) translate(9px, -5px); } .btn:hover{ color: var(--defaultColor); opacity: 1; transform: scale(1.05); } .btn.blanc{ border-color: #fff; color: #fff; } .btn.blanc:before{ border-left-color: #fff; border-bottom-color: #fff; } .btn.blanc:after { border-right-color: #fff; border-top-color: #fff; } .btn.blanc:hover{ color: #fff; } .alert { padding: 1rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; position: fixed; top: var(--headerHeight); bottom: 0; left: 0; right: 0; margin: auto; z-index: 2; max-width: 750px; max-height: 100%; height: max-content; } .alert-heading { color: inherit; } .alert-link { font-weight: 700; } .alert-dismissible { padding-right: 3rem; } .alert-dismissible .btn-close { position: absolute; top: 0; right: 0; z-index: 2; padding: 1.25rem 1rem; } .alert-primary { color: #084298; background-color: #cfe2ff; border-color: #b6d4fe; } .alert-primary .alert-link { color: #06357a; } .alert-secondary { color: #41464b; background-color: #e2e3e5; border-color: #d3d6d8; } .alert-secondary .alert-link { color: #34383c; } .alert-success { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; } .alert-success .alert-link { color: #0c4128; } .alert-info { color: #055160; background-color: #cff4fc; border-color: #b6effb; } .alert-info .alert-link { color: #04414d; } .alert-warning { color: #664d03; background-color: #fff3cd; border-color: #ffecb5; } .alert-warning .alert-link { color: #523e02; } .alert-danger { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; } .alert-danger .alert-link { color: #6a1a21; } .alert-light { color: #636464; background-color: #fefefe; border-color: #fdfdfe; } .alert-light .alert-link { color: #4f5050; } .alert-dark { color: #141619; background-color: #d3d3d4; border-color: #bcbebf; } .alert-dark .alert-link { color: #101214; } .alert-dismissible > .close{ border: 0; font-size: 4rem; line-height: 0.6em; background: transparent none; opacity: 0.8; position: absolute; right: 0.5rem;} .alert-dismissible > .close:hover{ opacity: 1; } a.plus{ font-weight: var(--font-bold);} .center{ text-align: center; } /* * Header */ section{ overflow: hidden; } #header{ height: var(--headerHeight); background-color: #000; color: #fff; z-index: 3; position: fixed; top: 0; width: 100%; } #header > div{ max-height: var(--headerHeight); display: flex; align-items: center; justify-content: space-between; height: 100%; } #header a{ opacity: 1; transition: all 0.2s ease-out; } #header a:hover{ opacity: 0.8; } .logo{ display: flex; align-items: center; justify-content: flex-start; max-height: var(--headerHeight); padding: 1rem; position: relative; z-index: 2; max-width: 320px; } .logo .logotype{ min-height: 3rem; height: 3rem; margin-right: 0.5em; } .logo .site-name{ margin: 0; padding: 0; font-size: 3rem; display: flex; align-items: center; } .logo .site-name:after{ content: none; } .logo .site-name .logotexte{ max-height: 2rem; width: 100%; } .logo .slogan{ display: none; } .menus{ width: 100%; display: flex; justify-content: space-between; max-width: 640px; } .menus:after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: var(--headerHeight); z-index: 1; background: #000; } .menus > *{ position: relative; z-index: 2; } .menus > .phone{ order: 1; font-weight: var(--font-black); font-size: 1.4rem; } button.hamburger{ order: 4; } .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before{ background-color: #fff !important; } .hamburger.is-active + #menu-principal{ transform: translateY(0); } #menu-principal{ z-index: 0; font-size: 1.5rem; position: fixed; top: var(--headerHeight); transform: translateY(-100%); left: 0; width: 100%; min-height: calc( 100vh - var(--headerHeight)); background-color: #000; display: flex; align-items: center; transition: all 0.7s ease-out; } #menu-principal > div > ul{ display: flex; align-items: flex-start; justify-content: space-between; width: 100%; } #menu-principal > div > ul > li{ padding: 0.75rem; width: 25%; } #menu-principal > div > ul > li > a{ text-transform: uppercase; font-size: 1.4rem; line-height: 2em; } #menu-principal > div > ul > li > a:before { content: ''; display: block; width: 100%; height: 3.5rem; background-repeat: no-repeat; background-position: 0 0; background-size: contain; margin-bottom: 1.5em;} #menu-principal > div > ul > li > a span{ font-size: 3.2rem; display: flex; align-items: flex-end; justify-content: flex-start; transition: all 0.2s ease-out; } #menu-principal > div > ul > li.batiment-industriel > a span{ color: var(--industriel); stroke: var(--industriel); } #menu-principal > div > ul > li.batiment-agricole > a span{ color: var(--agricole); stroke: var(--agricole); } #menu-principal > div > ul > li.batiment-tertiaire > a span{ color: var(--tertiaire); stroke: var(--tertiaire); } #menu-principal > div > ul > li.waltefaugle-batiment > a span{ color: var(--batiment); stroke: var(--batiment); } #menu-principal > div > ul > li > a svg{ stroke-width: 2px; display: inline-block; min-width: 1.5rem; width: 1.5rem; stroke: inherit; height: 1.5rem; transform: rotate(-45deg); margin-left: 1rem; margin-bottom: 0.3rem; transition: all 0.2s ease-out; } #menu-principal > div > ul > li > a:hover span{ transform: translateX(0.5rem); } #menu-principal > div > ul > li > a:hover svg{ transform: rotate(0); } #menu-principal > div > ul > li.batiment-industriel > a:before { background-image: url('../themes/waltefaugle/assets/img/waltefaugle-batiment-industriel.svg'); } #menu-principal > div > ul > li.batiment-agricole > a:before { background-image: url('../themes/waltefaugle/assets/img/waltefaugle-batiment-agricole.svg'); } #menu-principal > div > ul > li.batiment-tertiaire > a:before { background-image: url('../themes/waltefaugle/assets/img/waltefaugle-batiment-tertiaire.svg'); } #menu-principal > div > ul > li.waltefaugle-batiment > a:before { background-image: url('../themes/waltefaugle/assets/img/waltefaugle-batiment.svg'); } #menu-principal > div > ul > li.entreprise{ display: none; } #menu-principal ul ul{ margin-top: 3em; font-weight: var(--font-light); } a.menu-link{ padding-top: .75em; padding-bottom: .75em; display: inline-block; transition: all 0.2s ease-out; white-space: nowrap; } a.menu-link:after{ content: ''; display: inline-block; width: 1.3rem; height: 1.3rem; transform: rotate(-45deg); margin-bottom: -1px; margin-left: 1em; transition: all 0.2s ease-out; background-color: #fff; mask-image: url(../themes/waltefaugle/assets/img/ico-fleche.svg); mask-repeat: no-repeat; mask-position: 0 0; mask-size: contain; -webkit-mask-image: url(../themes/waltefaugle/assets/img/ico-fleche.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-position: 0 0; -webkit-mask-size: contain; } a.menu-link:hover{ transform: translateX(0.5rem); } a.menu-link:hover:after{ transform: rotate(0); } #menu-secondaire{ order: 2; display: flex; text-transform: uppercase; font-size: 1.4rem; font-weight: var(--font-heavy); transition: all 0.3s ease-out; } #menu-secondaire > ul{ display: flex; align-items: center; justify-content: center; } #menu-secondaire > ul > li{ height: 100%; } #menu-secondaire > ul > li > a{ height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 .5em; white-space: nowrap; } #menu-secondaire > ul ul{ display: none; } #menu-secondaire > ul > li.recrutement{ animation: 10s ease-in 9s infinite normal forwards running recrutement; } @keyframes recrutement { 0% { transform: translateY(0); } 3% { transform: translateY(-3px); } 8% { transform: translateY(5px); } 16% { transform: translateY(0); } 100% { transform: translateY(0); } } #menu-tertiaire{ position: fixed; z-index: -1; right: 0; top: 50%; margin-top: -10rem; } #menu-tertiaire ul{ display: flex; flex-direction: column; justify-content: flex-end; } #menu-tertiaire li{ margin: 0; } #menu-tertiaire li a{ float: right; width: 5rem; height: 5rem; overflow: hidden; line-height: 5rem; transition: all 0.5s ease-in; display: flex; color: #fff; } #menu-tertiaire li a:hover{ margin-right: 0rem !important; } #menu-tertiaire li a:before{ width: 5rem; height: 5rem; background-repeat: no-repeat; background-position: 1.25rem 50%; background-size: 2.5rem; } #menu-tertiaire li a.top{ width: 25rem; margin-right: -20rem; background-color: #849B5A; animation: 10s ease-in 5s infinite normal forwards running tertiaire; } #menu-tertiaire li a.mail{ width: 15rem; margin-right: -10rem; background-color: #053360; animation: 10s ease-in 5.1s infinite normal forwards running tertiaire; } #menu-tertiaire li a.recrutement{ width: 20rem; margin-right: -15rem; background-color: var(--recrutement); animation: 10s ease-in 5.2s infinite normal forwards running tertiaire; } #menu-tertiaire li a.recrutement:before{ background-size: 3rem; background-position: 1rem; } @keyframes tertiaire { 0% { transform: translateX(0); } 3% { transform: translateX(-2rem); } 6% { transform: translateX(0); } 100% { transform: translateX(0); } } /* * Footer */ #footer{ background-color: #000; color: #fff; font-size: 14px; z-index: 0; position: relative; } #footer p{ margin-bottom: 0.3em; } #footer a{ opacity: 1; transition: all 0.2s ease-out; color: inherit; } #footer a:hover{ opacity: 0.8; } #footer .main{ display: flex; align-items: center; justify-content: space-evenly; padding: 4rem 0 2rem; } #footer .logo{ max-height: none; padding: 0; } #footer .logo .logotype{ max-height: none; max-width: 20%; min-height: 7rem; } #footer .logo .site-name{ display: flex; flex-direction: column; justify-content: space-evenly; height: 100%; } #footer .logo .slogan{ display: block; font-size: 35%; margin-top: 0.5em; } #footer .logo .wb{ text-transform: uppercase; font-size: 30px; line-height: .9em; } #footer .logo .wb .min{ font-size: 0.43em; line-height: 1.2em; display: block; } #footer .contact{ font-weight: var(--font-heavy); } #footer .legal{ font-size: 12px; min-height: 5rem;} #footer .legal ul{ height: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } #footer .legal ul li{ height: 100%; } #footer .legal ul li a{ height: 100%; padding: 0 1rem; display: flex; align-items: center; line-height: 2em; } #footer-recrutement{ position: relative; color: #fff; } #footer-recrutement:before{ content:''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: var(--recrutement); opacity: 0.65; z-index: 0; } #footer-recrutement:after{ content:''; position: absolute; top: 0; right: 40%; height: 100%; width: 100%; background-color: var(--recrutement); opacity: 0.8; z-index: 0; -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%); } #footer-recrutement > div{ position: relative; z-index: 1; } #footer-recrutement .row{ flex-direction: row-reverse; justify-content: center; } #footer-recrutement .row > div{ align-items: center; display: flex; } #footer-recrutement .heading{ display: flex; flex-direction: column; align-items: flex-end; justify-content: center; max-width: 600px; float: right; padding: 5rem 0; } #footer-recrutement h2{ font-size: calc( var(--containerWidth) * 0.045); font-weight: var(--font-black); text-align: right; margin: 0 0 0.2em; } #footer-recrutement .recrutement-logo{ display: flex; width: 90%; max-width: 430px; align-items: flex-end; justify-content: space-between; } #footer-recrutement .recrutement-logo .logotype{ width: 13%; } #footer-recrutement .recrutement-logo .logotexte{ width: 85%; } #footer-recrutement .btn{ margin: 2.5em 0.5em 1em auto; } #footer-recrutement .corps{ padding: 5rem 0; } #footer-recrutement h3{ text-transform: uppercase; font-weight: var(--font-black); margin: 0; } #footer-recrutement h3.hr:after{ border-color: #fff; } #footer-recrutement h4{ font-weight: var(--font-black); font-size: 2.6rem; margin: 1.2em 0 0; } #footer-recrutement .desc{ font-size: 0.85em; } #actus{ background-color: #C5C5C5; } /* * Main */ #main{ margin-top: var(--headerHeight); } #page { position:relative; width:100%; } /* CONTENT PAGE */ .content-page{ display: flex; flex-direction: column; } #rubrique{ order: 2; z-index: 2; background-color: var(--globalColor); color: #fff; display: flex; align-items: center; transition: all 0.3s ease-out; } #rubrique > div{ position: relative; margin-top: 2.5vmin; margin-bottom: 2.5vmin; transition: all 0.3s ease-out; } /* #rubrique:hover{ opacity: 0.8; } */ .no-h1 #rubrique:hover{ opacity: 1; cursor: pointer; } #rubrique .h1{ display: flex; align-items: center; text-transform: uppercase; font-size: clamp(2.7rem, calc(0.174rem + 7.0289vw), 6.5rem); line-height: 0.8em; margin: 0 auto; padding: 0; position: relative; color: inherit; transition: all 0.5s ease-out; } #rubrique .h1:before{ content: ''; width: 25%; min-width: 2em; height: 1.3em; background: url('../themes/waltefaugle/assets/img/waltefaugle-logotype.svg') no-repeat 50% 100%; background-size: auto 90%; } #rubrique .h1 span.min{ font-size: 0.43em; line-height: 1.2em; display: flex; align-items: flex-end; justify-content: flex-start; } .wb-linkedin{ position: absolute; right: 0; top: 50%; transform: translate(-.75rem, -50%); width: 4rem; min-width: 4rem; height: 4rem; margin: 0 15px; overflow: hidden; text-indent: 200px; white-space: nowrap; background: url(../themes/waltefaugle/assets/img/ico-linkedin.svg) no-repeat 50% 50%; background-size: contain; } #waltefaugle-batiment .menus{ justify-content: flex-end; } #waltefaugle-batiment #header .phone{ display: none; } #waltefaugle-batiment #header #menu-secondaire{ display: none; } #waltefaugle-batiment #rubrique > div{ position: relative; display: flex; align-items: center; justify-content: space-between; } #waltefaugle-batiment #rubrique .h1{ margin: 0; } #waltefaugle-batiment #rubrique .h1:before{ /*width: calc(var(--containerWidth) * .25);*/ width: auto; margin-right: 1rem; } #waltefaugle-batiment #menu-secondaire + .hamburger{ display: none; } #waltefaugle-batiment .not-top #rubrique{ position: fixed; z-index: 2; width: 100%; left: 0; } #waltefaugle-batiment .not-top #rubrique > div{ margin-top: 12px; margin-bottom: 12px;} #waltefaugle-batiment .not-top #rubrique .h1{ font-size: 30px; } #waltefaugle-batiment .wb-linkedin{ position: static; transform: scale(1.2); } #waltefaugle-batiment #footer-recrutement:before{ background-color: var(--batiment); opacity: 0.7; } #waltefaugle-batiment #footer-recrutement:after{ background-color: #000; opacity: 0.4; } #banner{ order: 1; height: calc(100vmin - 9.3vw - 18rem); overflow: hidden; z-index: 2; background-color: #FFF;} #banner > div{ height: 100%; } #banner .swiper-container{ height: 100%; overflow: visible; } #banner .swiper-slide{ position: relative; display: flex; align-items: center; justify-content: center; width: auto; overflow: hidden; opacity: 0.15; transition: opacity 0.5s ease-out; } #banner .swiper-slide-active, #banner > div > .swiper-slide{ opacity: 1; box-shadow: 0 0 5px #000; } #banner .swiper-slide img{ min-width: 100%; max-width: none; min-height: 100%; max-height: none; width: auto; object-fit: cover; } #banner .swiper-buttons{ position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; margin: auto; } .swiper-button{ width: 6rem; height: 6rem; background-color: #fff; padding: 1.5rem; border-radius: 4rem; margin: 0; z-index: 1; } .swiper-button.prev{ left: 0; transform: translateX(-50%); } .swiper-button.next{ right: 0; transform: translateX(50%); } .swiper-button:after{ font-size: inherit; font-weight: bold; color: var(--globalColor); } #contenu{ order: 3; position: relative; z-index: 1; } #contenu .row.reverse{ flex-direction: row-reverse; } #contenu .main{ position: relative; } #contenu .main:before{ content: ''; position: absolute; width: calc( var(--containerWidth) * 0.75 + var(--asideWidth)); height: 100%; left: 0; top: 0; background: url(../themes/waltefaugle/assets/img/bg-cubes.png) no-repeat 100% 0; background-size: 100vh; background-attachment: fixed; z-index: -1; opacity: 0.2;} .description-refs{ display: flex; align-items: flex-start; justify-content: space-between; } .description{ width: 66%; padding-right: 1%; } .no-h1 #contenu .main{ padding-top: 5rem; } #contenu .description p{ text-align: justify; } #contenu .description a{ color: var(--globalColor); } .no-h1 #realisations{ margin-top: 6rem; } #realisations{ width: 33%; } #realisations h2{ font-size: 2.5rem; color: var(--globalColor); margin: -1em 0 1em; } #realisations .swiper{ position: relative; display: flex; flex-direction: column; } #realisations .swiper-container{ height: 100%; max-height: calc( 230px * 3); margin: 6rem 0; } #realisations .swiper-button.prev { left: 50%; top: 0; transform: translateX(-50%) rotate(90deg); } #realisations .swiper-button.next { left: 50%; top: inherit; bottom: 0; transform: translateX(-50%) rotate(90deg); } .realisation{ position: relative; max-width: 310px; margin: auto; height: calc( var(--containerWidth) * 0.18); } .realisation .info{ position: absolute; width: 100%; height: calc( 100% - var(--containerWidth) * 0.01); top: 0; left: 0; display: flex; flex-direction: column;align-items: center; justify-content: center; text-align: center; color: #fff; pointer-events: none; transition: all 0.5s ease-out; padding: 0 10px; opacity: 1; } .realisation .info:before{ content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; opacity: 0.1; } .realisation:hover .info{ backdrop-filter: blur(7px); } .realisation .info h3{ font-size: 1.8rem; font-weight: var(--font-bold); margin: 0; position: relative; z-index: 1; } .realisation .info p{ margin: 0; position: relative; z-index: 1; } .realisation a{ display: block; } #complement{ padding-bottom: 5rem; position: relative; } #complement:before, #complement:after{ content: ''; position: absolute; width: calc( var(--containerWidth) / 2); height: 100%; right: 100%; top: 0; background-color: #fff; } #complement:after{ background: url(../themes/waltefaugle/assets/img/bg-cubes.png) no-repeat 0% 60%; background-size: 100%; transform: rotate(180deg); opacity: 0.2; } #references h2{ margin: 1em 0 0.5em; padding-bottom: 1em; position: relative; } #references h2:after{ content: ''; width: 4em; height: 0; border-bottom: 1px solid #000; position: absolute; bottom: 0; left: 0; } #references h2:after{ content: ''; width: 4em; height: 0; border-bottom: 1px solid #000; position: absolute; bottom: 0; left: 0; } .references-wrap{ display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; width: 78.5%; } .reference{ display: block; padding: 0.5rem; flex: 1 0 0%; max-width: 170px; max-height: 100px; } .reference img{ height: 100%; width: auto; } #subnav{ position: relative; height: 100%; z-index: 1; } #subnav:before{ content: ''; position: absolute; width: calc( var(--containerWidth) / 2); height: 100%; right: calc(var(--bs-gutter-x)/ 2); top: 0; background-color: var(--globalColor); opacity: 0.15; z-index: -1; } .no-h1 #subnav h2{ margin: 1.95em 0 1em; } #subnav h2{ font-size: 2.5rem; color: var(--globalColor); margin: 5.95em 0 1em; } #subnav > nav{ position: relative; z-index: 1; } #subnav li{ position: relative; } #subnav a.menu-link{ display: block; color: var(--globalColor); font-weight: var(--font-bold); padding: 0.5em 0; font-size: 15px; white-space: normal; line-height: 1.5em; } #subnav a.menu-link:after{ background-color: var(--globalColor); } #subnav a.menu-link.actif{ color: #fff; } #subnav a.menu-link.actif:before{ content: ''; position: absolute; width: calc( var(--containerWidth) / 2); height: 100%; right: -0.5rem; top: 0; background-color: var(--globalColor); z-index: -1; } #subnav a.menu-link.actif:after{ background-color: #fff; transform: rotate(0); } /* ACCUEIL */ h2.section-title{ font-size: 5rem; font-weight: var(--font-light); text-align: center; } h2.section-title span{ display: block; } h2.section-title small{ font-size: 1.8rem; display: block; } #home-sliders{ position: relative; border-bottom: 5px solid #696969; background-color: #000; } #home-sliders .swiper-button{ background-color: rgba(0,0,0,0.3); transform: translateY(-50%); } #home-sliders .swiper-button:after{ color: #fff; } #home-sliders .swiper-pagination{ bottom: 2rem; left: 50%; transform: translateX(-50%); } #home-sliders .swiper-pagination-bullet{ opacity: 1; margin: 3px; } #home-sliders .swiper-pagination-bullet-active{ width: 11px; height: 11px; } #home-sliders .swiper-pagination-bullet:nth-child(1){ background-color: var(--industriel); } #home-sliders .swiper-pagination-bullet:nth-child(2){ background-color: var(--agricole); } #home-sliders .swiper-pagination-bullet:nth-child(3){ background-color: #fff; } #home-sliders .swiper-pagination-bullet:nth-child(4){ background-color: var(--tertiaire); } #home-sliders .swiper-pagination-bullet:nth-child(5){ background-color: var(--batiment); } #home-slider-img{ position: relative; z-index: 1; height: calc(100vmin - var(--headerHeight)); min-height: 100%; border-bottom: 3px solid #fff; } #home-slider-img:after{ content: ''; position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); opacity: 0.5; } #home-slider-img .swiper-wrapper{ height: 100%; } #home-slider-img .swiper-slide{ position: relative; height: 100%; } #home-slider-img img{ object-fit: cover; position: absolute; min-width: 100%; min-height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); } #home-slider-logos{ position: absolute; z-index: 2; width: 100%; height: 100%; left: 0; top: 0; } #home-slider-logos > div{ position: relative; height: 75%; } #home-slider-logos > div > .swiper-container{ height: 100%; display: flex; align-items: center; } #home-slider-logos .swiper-wrapper{ height: auto; } .hexagone{ margin: 0; width: 20%; display: flex; align-items: center; justify-content: center; flex-direction: column; opacity: 0.6; position: relative; padding-top: 22%;} .hexagone a{ font-size: calc( var(--containerWidth) * 0.01); line-height: 1.8em; font-weight: var(--font-regular); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 5vw 0; background: url(../themes/waltefaugle/assets/img/hexagone.svg) no-repeat 50% 50%; background-size: auto 100%; position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-transform: uppercase; } .hexagone a:before{ content: ''; display: block; width: 50%; height: 0; background-repeat: no-repeat; background-position: center; background-size: contain; margin-bottom: 1.5em; padding-top: 40%; margin: 0 0 0.5rem; } .hexagone a strong{ font-size: 2.2em; font-weight: var(--font-regular); } .hexagone.industriel { z-index: 3 !important; } .hexagone.agricole { z-index: 4 !important; } .hexagone.entreprise { z-index: 5 !important; } .hexagone.tertiaire { z-index: 4 !important; } .hexagone.batiment { z-index: 3 !important; } .hexagone.industriel a:before{ background-image: url('../themes/waltefaugle/assets/img/waltefaugle-batiment-industriel.svg'); } .hexagone.agricole a:before{ background-image: url('../themes/waltefaugle/assets/img/waltefaugle-batiment-agricole.svg'); } .hexagone.tertiaire a:before{ background-image: url('../themes/waltefaugle/assets/img/waltefaugle-batiment-tertiaire.svg'); } .hexagone.batiment a:before{ background-image: url('../themes/waltefaugle/assets/img/waltefaugle-batiment.svg'); } .hexagone.entreprise a:before{ background-image: url('../themes/waltefaugle/assets/img/waltefaugle.svg'); } .hexagone.entreprise a strong{ display: block; text-indent: 120%; width: 70%; min-height: 2.2rem; overflow: hidden; white-space: nowrap; background: url('../themes/waltefaugle/assets/img/waltefaugle-logotexte-n.svg') no-repeat 50% 50%; } .hexagone.active0{ opacity: 0; } .hexagone.swiper-slide{ transform: translateX(42%) scale(.7); } .hexagone.swiper-slide-prev{ transform: translateX(15%) scale(.9); } .hexagone.swiper-slide-active{ transform: translate(0) scale(1); opacity: 1; } .hexagone.swiper-slide-next{ transform: translateX(-15%) scale(.9); } .hexagone.swiper-slide-next + .swiper-slide{ transform: translateX(-42%) scale(.75); } .hexagone.swiper-slide-prev, .hexagone.swiper-slide-next{ opacity: 0.75; } .hexagone.swiper-slide-active{ opacity: 0.89; } #home-slider-logos > .fr-socials{ padding: 0 6rem 2rem 5rem; display: flex; align-items: center; justify-content: space-between; position: absolute; z-index: 2; width: 100%; height: 25%; left: 0; bottom: 0; } .fr-fab{ display: flex; align-items: center; justify-content: flex-start; height: 100%; max-height: 140px; } .french-fab{ display: block; height: 100%; } .fab-pose-fr{ height: 100%; } .french-fab{ margin-right: 1rem; padding: 5% 0; } .french-fab img, .fab-pose-fr svg{ object-fit: contain; width: auto; max-width: 100%; height: 100%; max-height: 140px; } .socials{ display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; transform: rotate(-90deg); transform-origin: 60% 20%; } .follow{ font-weight: var(--font-bold); letter-spacing: .05em; margin-bottom: 0.8em; } .social-links{ display: flex; align-items: center; justify-content: space-between; width: 120%; } .social-links a{ display: block; width: 2rem; height: 2rem; min-width: 2rem; min-height: 2rem; background-repeat: no-repeat; background-size: contain; text-indent: 120%; overflow: hidden; opacity: 0.8; transform: rotate(90deg); transform-origin: 50% 50%; } .social-links a:hover{ opacity: 1; } .social-links a.facebook{ background-image: url(../themes/waltefaugle/assets/img/ico-fb.svg); } .social-links a.instagram{ background-image: url(../themes/waltefaugle/assets/img/ico-instagram.svg); } .social-links a.linkedin{ background-image: url(../themes/waltefaugle/assets/img/ico-linkedin.svg); } .social-links a.youtube{ background-image: url(../themes/waltefaugle/assets/img/ico-youtube.svg); } #fabfr{ background-color: #656565; position: relative; color: #fff; padding: 10rem 0; text-align: center; } #fabfr:after{ content: ''; position: absolute; z-index: 0; width: 100%; height: 100%; top: 0; left: 0; background: #fff url(../themes/waltefaugle/assets/img/bg-cubes.png) no-repeat 100% 60%; background-size: 60% auto; opacity: 0.2; transform: rotate(180deg); } #fabfr > div{ position: relative; z-index: 1; } #fabfr .row > div{ align-items: center; } #fabfr .titre{ height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } #fabfr .titre img{ max-width: 14rem; } #fabfr .titre h2{ font-weight: var(--font-black); padding-bottom: 1em; } #fabfr .titre .hr:after{ right: 0; margin-left: auto; margin-right: auto; border-color: #fff; } .chiffres{ display: flex; align-items: center; justify-content: stretch; width: 100%; } .chiffre{ flex-grow: 1; background-color: #3D3D3D; position: relative; color: #fff; } .chiffre:before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-color: #000; opacity: 0.75; transition: all 0.3s ease-out; } .chiffre img{ display: block; width: 100%; position: relative; z-index: 1; opacity: 0.2; transition: opacity 0.3s ease-out; } .chiffre .desc{ position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; } .chiffre .number{ font-size: 4rem; font-weight: var(--font-black); display: block; width: 100%; text-align: center; line-height: 1em; margin-bottom: 0.5em; } .chiffre .number:after{ border-color: #fff; right: 0; margin: 0 auto; width: 33%; } .chiffre .label{ font-size: 1.6rem; } .chiffre:hover:before{ background-color: #777; } .chiffre:hover img{ opacity: 0.5; } #secteurs{ overflow: hidden; padding-bottom: 10rem; position: relative; } #secteurs > div{ position: relative; z-index: 1; } #secteurs:after { content: ''; position: absolute; z-index: 0; width: 100%; height: 100%; top: 0; left: 0; background: url(../themes/waltefaugle/assets/img/bg-cubes.png) no-repeat 100% 60%; background-size: auto 120%; opacity: 0.2; } .secteur{ color: #fff; text-align: center; display: flex; flex-direction: column; justify-content: space-between; padding: 0 1rem; height: calc(100% - 15px); margin-bottom: 15px; } .secteur.industriel { background-color: var(--industriel-pastel); } .secteur.agricole { background-color: var(--agricole-pastel); } .secteur.tertiaire { background-color: var(--tertiaire-pastel); } .secteur.batiment { background-color: var(--batiment-pastel); } .secteur h3{ text-transform: uppercase; text-align: center; font-size: 1.7rem; font-weight: var(--font-regular); margin: 3em 0;} .secteur h3 a{ display: block; } .secteur h3 a:before{ content: ''; display: block; height: 4rem; background: url('../themes/waltefaugle/assets/img/waltefaugle-logotype.svg') no-repeat 50% 0; background-size: auto 100%; margin-bottom: 2rem; } .secteur h3 a strong{ font-size: 2.2rem; display: block; font-weight: var(--font-regular); } .secteur a.menu-link{ margin: 2rem; font-size: 14px; } #avantages{ background-color: #3f3f3f; opacity: 0.75; color: #fff; overflow: hidden; padding-bottom: 6rem; } #avantages .container-lg{ padding: 0 5rem; } #avantages h2.section-title{ margin-bottom: 1.2em; } .avantage{ padding: 1rem; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: flex-start; } .avantage img{ max-height: 10rem; } .avantage .desc{ margin: 5rem 0; } #actus{ padding: 5rem 0; } #actus .row{ justify-content: center; } #actus .flex-rsb{ display: flex; align-items: center; justify-content: space-between; } #actus h2{ color: #fff; font-weight: var(--font-black); width: 100%; margin: 0; font-size: 4rem; } #actus .btn{ margin-right: 0.75rem; } #actus .col-lg-4, #actualites #contenu .col-lg-4{ margin-bottom: 2rem; } #actualites #contenu{ margin: 6rem 0; } .actu.teaser{ display: flex; flex-direction: column; justify-content: space-between; background-color: #fff; box-shadow: 0px 1px 5px rgb(0 0 0 / 20%); height: 100%; max-width: 540px; margin: 1em auto; padding: 0 2rem; } .actu.teaser.batiment-industriel{ color: var(--industriel); } .actu.teaser.batiment-agricole{ color: var(--agricole); } .actu.teaser.batiment-tertiaire{ color: var(--tertiaire); } .actu.teaser.waltefaugle-batiment{ color: var(--batiment); } .actu.teaser.entreprise{ color: var(--defaultColor); } .actu.teaser .group{ display: flex; flex-direction: column; font-size: 16px; } .actu.teaser .group h3{ font-size: 2rem; order: 3; opacity: 0.6; height: 6.5rem; margin-top: 0; font-weight: var(--font-black); text-transform: uppercase; } .actu.teaser .group h3 a{ display: block; transition: all 0.3s ease-out; } .actu.teaser .group h3 a:hover{ transform: translateX(1rem); } .actu.teaser .group .info{ order: 2; font-size: 14px; } .actu.teaser .group .info .date{ color: #000; } .actu.teaser .group img{ order: 1; display: block; margin: 0 -2rem 1rem; width: calc(100% + 4rem); max-width: calc(100% + 4rem); } .actu.teaser .group .desc{ order: 4; color: #000; margin-bottom: 2rem; } .actu.teaser a.menu-link{ font-size: 14px; font-weight: var(--font-bold); text-align: right; opacity: 0.6; } .actu.teaser.batiment-industriel a.menu-link:after{ background-color: var(--industriel); } .actu.teaser.batiment-agricole a.menu-link:after{ background-color: var(--agricole); } .actu.teaser.batiment-tertiaire a.menu-link:after{ background-color: var(--tertiaire); } .actu.teaser.waltefaugle-batiment a.menu-link:after{ background-color: var(--batiment); } .actu.teaser.entreprise a.menu-link:after{ background-color: var(--defaultColor); } #contact .info p{ font-size: 0.85em; margin-bottom: 0.5em; } /* Entreprise */ .index-egalite-pro{ font-size: 0.8em; } /* Implantations */ #implantations{ top: 5rem; width: var(--containerWidth); margin-left: calc( var(--containerWidth) * -0.25 - 15px); position: relative; z-index: 1; padding-left: 2rem; } #implantations ul{ display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; margin-top: 3em; margin-bottom: 1em; padding-left: 0; } #implantations ul li{ display: block; margin-bottom: 3rem; } #implantations ul li strong{ display: block; margin-bottom: 0.5em; } #implantations ul li a{ display: block; margin-top: 0.5em; } #implantations .gmap{ position: relative; height: 50vmax; min-height: clac(100vw * .35); max-height: calc(100vh - var(--headerHeight)); } #implantations .gmap a{ position: absolute; width: 100vw; height: 100%; right: calc( 0px - var(--asideWidth) ); } #implantations .gmap a img{ position: absolute; width: auto; min-width: 100%; max-width: none; height: 100%; object-fit: cover; top: 0; left: 50%; transform: translateX(-50%);} /* Recrutement */ .poste.teaser{ margin: 2rem 0 6rem; padding-right: 3rem; } .poste.teaser h2{ position: relative; border-bottom: 2px solid #ccc; font-weight: var(--font-heavy); } .poste.teaser h2:after { content: ''; display: block; width: 3rem; height: 0; border-bottom: 2px solid #ccc; position: absolute; transform: rotate(45deg); transform-origin: 0 100%; bottom: 0; right: -3rem; bottom: -0.2rem; right: -2.9rem; } .poste.teaser h2 a{ display: block; transition: all 0.3s ease-out; padding-bottom: 0.3em; } .poste.teaser h2 a:hover{ transform: translateX( 0.5em ); } .poste.teaser .carac strong{ font-size: 0.9em; font-weight: var(--font-bold); } .poste.teaser .carac .promote{ font-weight: var(--font-black); } .poste.teaser a.menu-link{ padding-top: 0; font-weight: var(--font-bold); font-size: 0.9em; } .poste.teaser a.menu-link:after{ background-color: var(--defaultColor); } .poste.full .carac strong{ font-size: 0.9em; font-weight: var(--font-bold); } .poste.full .carac .promote{ font-weight: var(--font-black); } .poste.full .desc h2{ font-size: 1.8rem; font-weight: var(--font-black); } .poste.full .share{ font-size: 0.9em; font-weight: var(--font-bold); display: flex; align-items: center; justify-content: flex-end; margin: 3rem 0em 1rem; } #autres-postes{ width: 33%; position: relative; } div#autres-postes:before { content: ''; position: absolute; height: 100%; left: 0; top: 0.3em; background-color: var(--globalColor); opacity: 0.15; z-index: -1; width: calc( var(--containerWidth) / 2); } #autres-postes h2{ font-size: 2.5rem; color: var(--globalColor); margin: -1em 0 1em; } #autres-postes li{ display: block; } #autres-postes li a{ padding: 0; } #autres-postes li a:after{ background-color: var(--defaultColor); margin-left: 0.5em; } #autres-postes .cta-postes-groupe{ padding-left: 2rem; } .cta-postes-groupe a.menu-link{ display: block; color: var(--globalColor); font-weight: var(--font-bold); padding: 0.5em 0; font-size: 15px; white-space: normal; line-height: 1.5em; } .cta-postes-groupe a.menu-link:after{ background-color: var(--globalColor); } /* actualites */ #actualites h1{ text-align: center; padding-bottom: 0; } #actualites h1:after{ content: none; } #actualites .pagination{ display: flex; align-items: center; justify-content: center; margin-top: 4rem; color: #666; } #actualites .pagination p{ margin-bottom: 0; padding-left: 0; } #actualites .pagination ul{ margin-bottom: 0; display: flex; align-items: center; justify-content: center; } #actualites .pagination ul li{ display: inline; } #actualites .pagination ul li.active{ color: var(--globalColor); font-weight: var(--font-bold); } #actualites .pagination a{ margin-bottom: 0; display: flex; align-items: center; justify-content: center; } #actualites .pagination a:before, #actualites .pagination a:after{ content: '<'; font-size: 3.4rem; transform: scaleX(0.4); } #actualites .pagination a:after{ content: '>'; } #actualites-article .date{ font-size: 0.8em; font-weight: var(--font-black); transform: translateY(-2rem); color: var(--globalColor); } #actualites-article .download{ padding-left: 0; } #actualites-article .download li{ display: block; } #actualites-article .download a.file{ display: flex; align-items: baseline; justify-content: flex-start; color: var(--globalColor); transition: all 0.3s ease-out; } #actualites-article .download a.file:hover{ transform: translateY(2px); } #actualites-article .download a.file svg{ display: block; width: 1em; height: 1em; margin-right: 0.5em; stroke: var(--globalColor); } #actualites-article .download a.file svg .fleche{ transition: all 0.3s ease-out; transform: translateY(-1px); } #actualites-article .download a.file:hover svg .fleche{ transform: translateY(1px); } #actualites-article ul.prev-next{ display: flex; align-items: flex-start; justify-content: space-between; padding: 0; color: #666; width: 100%; } #actualites-article ul.prev-next li{ display: block; width: 50%; } #actualites-article ul.prev-next a{ display: flex; transition: all 0.3s ease-out; } #actualites-article ul.prev-next .prev a{ justify-content: flex-end; text-align: right; } #actualites-article ul.prev-next .prev a:after, #actualites-article ul.prev-next .next a:before{ content: '<'; font-size: 3.4rem; transform: scaleX(0.4); } #actualites-article ul.prev-next .prev a:after{ content: '>'; } #actualites-article ul.prev-next .next a:hover{ transform: translateX(-0.5em); color: var(--globalColor) } #actualites-article ul.prev-next .prev a:hover{ transform: translateX(0.5em); color: var(--globalColor) } /* Popup */ #popups:before { content:''; position:fixed; left:0; top:0;; width:100%; height:100%; z-index: 9998; background:rgba(0,0,0,0.8); } #popups .popup { position:fixed; left:50%; top:50%; width:70vw; background:#fff; z-index:9999; transform:translate(-50%, -50%); padding:30px; max-height: 95vh; } #popups .popup .close { position:absolute; right:15px; top:10px; z-index:10; font-weight: var(--font-heavy); transform: scaleX(1.2); } #popups .popup .swiper-container { max-height: calc(95vh - 50px); overflow-y: visible; } #popups .popup .swiper-wrapper { box-sizing:border-box; } #popups .popup .swiper-slide { width:100%; } #popups .popup .row { align-items:center; } #popups .popup h3 { font-weight: var(--font-heavy); margin-top: 0; } body.admin:after{ content:"xl"; position: fixed; bottom: 0; right: 0; padding: 5px 10px; line-height: 30px; background-color:#EEE; z-index: 1000; } /* CONTAINER */ @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) { body.admin:after{ content:"xxl"; background-color: black; } } /** * XL **/ @media (max-width: 1399px) { body.admin:after{ content:"xl"; background-color: red; } } /** * LG **/ @media (max-width: 1199px) { body.admin:after{ content:"lg"; background-color: orange; } .menus{ max-width: 600px; } #waltefaugle-batiment .top #rubrique > div{ padding-right: 6rem; } #waltefaugle-batiment #rubrique .h1 { font-size: clamp(2.7rem, calc(1.8358rem + 2.4046vw), 4rem); } } /** * MD **/ @media (max-width: 991px) { body.admin:after{ content:"md"; background-color: green; } html{ font-size: 9px; } #grid div[class^=containe], #main div[class^=containe], #footer div[class^=containe]{padding-left: 5rem; padding-right: 6rem; } .menus{ max-width: 520px; } #menu-principal .container-xl > ul > li > a{ font-size: 1.4rem; } #menu-principal .container-xl > ul > li > a:before{ height: 3rem; } #menu-principal .container-xl > ul > li > a span{ font-size: 2.8rem; } #menu-principal ul ul li a { white-space: inherit; } #menu-principal ul ul li a:after{ content: none; } #waltefaugle-batiment #rubrique .h1{ margin: 0; } #waltefaugle-batiment #rubrique .h1:before{ width: 2.2em; background-position: 0% 100%; } #waltefaugle-batiment #contenu{ position: relative; overflow: visible; } #waltefaugle-batiment #subnav{ position: absolute; top: 0; width: 100%; left: 0; z-index: 1; height: auto; background-color: #FFF; padding-top: 4rem; padding-left: 5rem; padding-right: 6rem; transition: all .4s ease-out; transform: translateY(-100%); } #waltefaugle-batiment #subnav.is-opened{ transform: translateY(0); } #waltefaugle-batiment #subnav:before { width: 100vw; } #waltefaugle-batiment #subnav h2{ display: none; } #waltefaugle-batiment .not-top #subnav{ position: fixed; top: 115px; } #waltefaugle-batiment #menu-secondaire + .hamburger{ display: block; padding: 0; } #waltefaugle-batiment #menu-secondaire .phone{ margin-right: 0; } #waltefaugle-batiment #menu-secondaire .actualites, #waltefaugle-batiment #menu-secondaire .recrutement, #waltefaugle-batiment #menu-secondaire .contact{ display: none; } #contenu .description-refs{ flex-direction: column; } #contenu .description{ width: 100%; padding-right: 0; } #realisations { width: 100%; margin: auto; } #realisations h2 { margin: 1em 0 0; } .realisation{ height: calc( var(--containerWidth) * 0.32); } .references-wrap{ width: 100%; } .reference { width: 33%; } #subnav:before{ width: 100vw; right: 50%; transform: translate(50%); } #subnav{ padding-bottom: 4rem; } #subnav h2{ margin: 1em 0; } #subnav h2 br{ display: none; } #subnav ul{ columns: 2; column-gap: 5rem; } #subnav a.menu-link.actif:before { left: -1rem; } #home-slider-logos .swiper-button-next{ top: 6rem; } #home-slider-logos .swiper-button-prev{ top: inherit; bottom: 0; } #implantations{ width: auto; margin-left: 0; padding-left: 0; } #implantations .gmap a { width: 100vw; overflow: hidden; right: inherit; left: calc(-5rem - var(--bs-gutter-x)/2); } #implantations ul li{ width: 50%; } } /** * SM **/ @media (max-width: 767px) { body.admin:after{ content:"sm"; background-color: blue; } .menus{ justify-content: flex-end; } #header .phone, #header .contact{ display: none; } #menu-principal{ align-items: flex-start; overflow-y: scroll; max-height: calc(100vh - var(--headerHeight)); } #menu-principal > div > ul{ flex-direction: column; align-items: center; } #menu-principal > div > ul > li { width: 100%; } #menu-principal > div > ul > li > a:before{ content: none; } #menu-principal ul ul{ columns: 2; padding-left: 4rem; margin-left: 0; margin-top: 1rem; margin-bottom: 2rem; border-top: 1px solid #222; } #menu-principal ul ul li a:after{ content: ''; } #menu-principal > div{ display: block; padding: 0 5rem; } #menu-principal > div > ul > li.entreprise{ display: block; } #footer .main{ flex-direction: column; } #footer .adresse{ text-align: center; margin: 2em; } #footer .contact a{ justify-content: center; } #footer-recrutement .heading{ align-items: center; padding-bottom: 0; max-width: none; width: 100%; } #footer-recrutement .btn{ margin: 2.5em auto 1em; } #footer-recrutement:after { right: 20%; -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%); } #banner .swiper-button.prev{ transform: translateX(100%); } #banner .swiper-button.next{ transform: translateX(-100%); } #waltefaugle-batiment #menu-secondaire .tel{ display: none; } .reference { width: 50%; text-align: center; } h2.section-title{ font-size: 3.8rem; font-weight: var(--font-regular); } h2.section-title small{ font-size: 2.2rem; } #home-slider-logos .swiper-wrapper{ height: auto; align-items: center; justify-content: center; flex-wrap: wrap; } #home-slider-logos .swiper-slide{ width: 33%; padding-top: 35%; height: 0; } .hexagone.industriel{ order: 1; opacity: 0.85; transform: translateY(8%); } .hexagone.agricole { order: 3; opacity: 0.85; transform: translateY(8%); } .hexagone.tertiaire { order: 4; opacity: 0.85; transform: translateY(-8%); } .hexagone.batiment { order: 5; opacity: 0.85; transform: translateY(-8%); } .hexagone.entreprise{ order: 2; opacity: 1; transform: translateY(8%); } #fabfr:after{ background-size: auto 100%; } #actus .flex-rsb{ flex-direction: column; } .actu.teaser .group h3{ height: auto; } #stats{ margin-left: 5rem; margin-right: 5rem; } .chiffre{ border: 1px solid #fff; } #implantations ul{ flex-direction: column; } #implantations ul li{ width: 100%; } ul.timeline:before{ left: 0.8rem; } ul.timeline li{ width: auto; text-align: inherit; padding: 3rem 2rem; } ul.timeline li:nth-child(even){ text-align: left; padding: 3rem 2rem; float: none; } ul.timeline li:before, ul.timeline li:nth-child(even):before{ left: -1.85rem; right: inherit; top: 3.5rem; } ul.timeline li strong{ display: inline; } #subnav a.menu-link.actif:before{right: inherit; width: 100%;} } /** * XS **/ @media (max-width: 575px) { body.admin:after{ content:"xs"; background-color: yellow; } html{ font-size: 8px; } .row>* { padding-right: var(--bs-gutter-x); padding-left: var(--bs-gutter-x); } #header .logo{ max-width: 250px; } .menus{ max-width: 165px; } #header .site-name{ display: none; } #menu-secondaire .recrutement{ display: none; } #waltefaugle-batiment .top #rubrique > div { padding-left: var(--bs-gutter-x,.75rem); } #menu-principal ul ul{ columns:1; } #banner .swiper-button.prev{ transform: translateX(30%); } #banner .swiper-button.next{ transform: translateX(-30%); } .reference{ padding: 0.5em 2rem; } #subnav:before { width: 200vw; } #subnav ul{ columns: 1; } #subnav ul li { width: 100%; } #footer-recrutement h2{ font-size: 3rem; } #home-slider-img{ width: 100%; height: 100%; position: absolute; } #home-slider-logos{ position: relative; } #home-slider-logos .swiper-slide{ width: 50%; padding-top: 53%; } #home-slider-logos .swiper-slide.entreprise{ order: 3; width: 60%; transform: translateY(-8%); } #home-slider-logos .swiper-slide.industriel{ order: 1; } #home-slider-logos .swiper-slide.agricole { order: 2; } #home-slider-logos .swiper-slide.tertiaire { order: 4; transform: translateY(-24%); } #home-slider-logos .swiper-slide.batiment { order: 5; transform: translateY(-24%); } .hexagone.entreprise a strong{ width: 60%; } .hexagone a{ font-size: 1.2rem; font-weight: var(--font-bold); } #home-slider-logos > .fr-socials{ position: relative; } #home-slider-logos .follow{ font-size: 1.1rem; } #home-slider-logos .socials{ transform-origin: 50% 50%; } .chiffre{ max-width: 300px; margin: 1em auto; } } /** * XXS **/ @media (max-width: 420px) { .hexagone a{ font-size: 0.8rem; } #waltefaugle-batiment .not-top #rubrique > div{ padding: 0 15px; } #waltefaugle-batiment #menu-secondaire + .hamburger { right: 15px; } }