/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on September 16, 2021 */ @font-face { font-family: 'catamaran'; src: url('../themes/harmonie/assets/fonts/catamaran/catamaran-black-webfont.eot'); src: url('../themes/harmonie/assets/fonts/catamaran/catamaran-black-webfont.eot?#iefix') format('embedded-opentype'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-black-webfont.woff2') format('woff2'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-black-webfont.woff') format('woff'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-black-webfont.ttf') format('truetype'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-black-webfont.svg#catamaranblack') format('svg'); font-weight: 900; font-style: normal; } @font-face { font-family: 'catamaran'; src: url('../themes/harmonie/assets/fonts/catamaran/catamaran-bold-webfont.eot'); src: url('../themes/harmonie/assets/fonts/catamaran/catamaran-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-bold-webfont.woff2') format('woff2'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-bold-webfont.woff') format('woff'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-bold-webfont.ttf') format('truetype'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-bold-webfont.svg#catamaranbold') format('svg'); font-weight: 700; font-style: normal; } @font-face { font-family: 'catamaran'; src: url('../themes/harmonie/assets/fonts/catamaran/catamaran-extrabold-webfont.eot'); src: url('../themes/harmonie/assets/fonts/catamaran/catamaran-extrabold-webfont.eot?#iefix') format('embedded-opentype'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-extrabold-webfont.woff2') format('woff2'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-extrabold-webfont.woff') format('woff'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-extrabold-webfont.ttf') format('truetype'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-extrabold-webfont.svg#catamaranextrabold') format('svg'); font-weight: 800; font-style: normal; } @font-face { font-family: 'catamaran'; src: url('../themes/harmonie/assets/fonts/catamaran/catamaran-extralight-webfont.eot'); src: url('../themes/harmonie/assets/fonts/catamaran/catamaran-extralight-webfont.eot?#iefix') format('embedded-opentype'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-extralight-webfont.woff2') format('woff2'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-extralight-webfont.woff') format('woff'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-extralight-webfont.ttf') format('truetype'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-extralight-webfont.svg#catamaranextralight') format('svg'); font-weight: 200; font-style: normal; } @font-face { font-family: 'catamaran'; src: url('../themes/harmonie/assets/fonts/catamaran/catamaran-light-webfont.eot'); src: url('../themes/harmonie/assets/fonts/catamaran/catamaran-light-webfont.eot?#iefix') format('embedded-opentype'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-light-webfont.woff2') format('woff2'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-light-webfont.woff') format('woff'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-light-webfont.ttf') format('truetype'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-light-webfont.svg#catamaranlight') format('svg'); font-weight: 300; font-style: normal; } @font-face { font-family: 'catamaran'; src: url('../themes/harmonie/assets/fonts/catamaran/catamaran-medium-webfont.eot'); src: url('../themes/harmonie/assets/fonts/catamaran/catamaran-medium-webfont.eot?#iefix') format('embedded-opentype'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-medium-webfont.woff2') format('woff2'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-medium-webfont.woff') format('woff'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-medium-webfont.ttf') format('truetype'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-medium-webfont.svg#catamaranmedium') format('svg'); font-weight: 500; font-style: normal; } @font-face { font-family: 'catamaran'; src: url('../themes/harmonie/assets/fonts/catamaran/catamaran-regular-webfont.eot'); src: url('../themes/harmonie/assets/fonts/catamaran/catamaran-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-regular-webfont.woff2') format('woff2'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-regular-webfont.woff') format('woff'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-regular-webfont.ttf') format('truetype'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-regular-webfont.svg#catamaranregular') format('svg'); font-weight: 400; font-style: normal; } @font-face { font-family: 'catamaran'; src: url('../themes/harmonie/assets/fonts/catamaran/catamaran-semibold-webfont.eot'); src: url('../themes/harmonie/assets/fonts/catamaran/catamaran-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-semibold-webfont.woff2') format('woff2'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-semibold-webfont.woff') format('woff'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-semibold-webfont.ttf') format('truetype'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-semibold-webfont.svg#catamaransemibold') format('svg'); font-weight: 600; font-style: normal; } @font-face { font-family: 'catamaran'; src: url('../themes/harmonie/assets/fonts/catamaran/catamaran-thin-webfont.eot'); src: url('../themes/harmonie/assets/fonts/catamaran/catamaran-thin-webfont.eot?#iefix') format('embedded-opentype'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-thin-webfont.woff2') format('woff2'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-thin-webfont.woff') format('woff'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-thin-webfont.ttf') format('truetype'), url('../themes/harmonie/assets/fonts/catamaran/catamaran-thin-webfont.svg#catamaranthin') format('svg'); font-weight: 100; font-style: normal; } /* 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; } html{ font-size: 10px; --couleurbleu: #122E48; --couleuror: #AC9676; --couleurnoir :#1A1A1A; --fwThin: 100; --fwExtralight: 200; --fwLight: 300; --fwRegular: 400; --fwMedium: 500; --fwSemiBold: 600; --fwBold: 700; --fwExtrabold: 800; --fwBlack: 900; } body{ font-family: catamaran, sans-serif; font-size: 1.8rem; font-weight: var(--fwLight); color: var(--couleurnoir); } h1{ font-size: 4rem; font-weight: var(--fwBold); letter-spacing: 0.2em; color: #fff; text-transform: uppercase; margin: 0; } h2{ font-size: 4rem; font-weight: var(--fwSemiBold); letter-spacing: 0.1em; color: var( --couleurbleu); margin: 1em 0 0.5em; } h3{ color: var( --couleuror); font-weight: var(--fwBold); margin: 1em 0 0.5em; font-size: 2.3rem; letter-spacing: 0.02em; } h3.bicolore{ margin-top: 2em; color: var(--couleurbleu); font-weight: var(--fwSemiBold); font-size: 2rem; margin-bottom: 1.2em; letter-spacing: 0.07em; line-height: 1.3em; } h3.bicolore strong{ color: var( --couleuror); font-weight: var(--fwBold); font-size: 2.5rem; line-height: 2em; } h4{ color: var(--couleurbleu); font-weight: var(--fwSemiBold); font-size: 2.9rem; margin-bottom: 0.5em; letter-spacing: 0.07em; line-height: 1.2em; } strong{ font-weight: var(--fwBold); } /* Images */ img, svg{ max-width:100%; height:auto; } [data-sizes]{ display:inline-block; width:100%; } [data-bg]{ background-size:cover; background-repeat:no-repeat; background-position:center center; } /* Paragraphs */ p{ line-height: 1.7em; margin-bottom: 1em; } li{ line-height: 1.2em; margin-bottom: 0.5em; } /* Link */ a{ color:var(--couleuror); text-decoration:none; } a:hover{ text-decoration: underline; color:var(--couleuror); } /* Lists */ ul, ol{ margin-bottom:0; padding:0; list-style:none; } /* Forms */ .invalid-feedback.visible{ display:block !important; } /* Classes */ .casper{ display: none; } .picto{ display: flex; align-items: center; } .picto:before{ content: ''; width: 2rem; min-width: 2.5rem; height: 2.5rem; margin-right: 0.5em; mask-size: contain; mask-repeat: no-repeat; mask-position: 50% 50%; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; } .picto.notext{ overflow: hidden; white-space: nowrap; width: 2.5rem; } .picto.notext:before{ margin-right: 0; } .picto.facebook:before{ width: 2.5rem; height: 2.5rem; background-color: var(--couleuror); opacity: 0.5; mask-image: url(../themes/harmonie/assets/images/facebook.svg); -webkit-mask-image: url(../themes/harmonie/assets/images/facebook.svg); } .picto.instagram:before{ width: 2.5rem; height: 2.5rem; background-color: var(--couleuror); opacity: 0.5; mask-image: url(../themes/harmonie/assets/images/insta.svg); -webkit-mask-image: url(../themes/harmonie/assets/images/insta.svg); } .picto.facebook:hover:before, .picto.instagram:hover:before{ opacity: 1; } .encadre-bleu{ padding: 2.5vmin 8vmin; margin: 0; min-height: 15vmin; background-color: var(--couleurbleu); color: white; display: flex; flex-direction: column; justify-content: center; } .encadre-bleu h2, .encadre-bleu h3, .encadre-bleu h4{ color: inherit; } .cover{ position: relative; overflow: hidden; height: 100%; width: 100%; } .cover > img{ position: absolute; min-width: 100%; min-height: 100%; width: inherit; object-fit: cover; left: 50%; top: 50%; transform: translate(-50%, -50%); } .overflow{ width: calc(100% + var(--asideWidth)); } .overflow.left{ float: right; } .button{ padding: 1.7rem; position: relative; text-transform: uppercase; font-weight: var(--fwBold); border: 1px solid var(--couleurbleu); display: inline-block; min-width: calc(var(--containerWidth) * 0.2); white-space: nowrap; text-align: center; font-size: 1.7rem; color: var(--couleurbleu); transition: all 0.3s ease-out; } /* .button:before{ content: ''; position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; } */ .button:hover{ color: #fff !important; text-decoration: none; } .button.or{ color: var(--couleuror); border-color: var(--couleuror); } .button.center{ position: relative; left: 50%; transform: translateX(-50%); } .button:hover{ background-color: var(--couleurbleu); } .button.or:hover{ background-color: var(--couleuror); } .fleche{ position: relative; } .fleche:before{ content: url(../themes/harmonie/assets/images/arrowbottom.svg); position: relative; left: 50%; display: block; width: 7px; height: 40px; margin-bottom: 2rem; top: -2rem; transform: translateX(-50%); } .lien a{ display: flex; align-items: center; justify-content: flex-end; font-weight: var(--fwSemiBold); } .lien a:before{ content: ''; background: url(../themes/harmonie/assets/images/arrowbottom.svg) no-repeat 50% 50%; display: inline-block; transform: rotate(-90deg); height: 37px; width: 37px; margin-right: 0.5em; margin-top: 2px; } .lien a:hover{ text-decoration: none; transform: translateX(0.5em); transition: all 0.2s ease-out; } .lien a:hover:before{ transform: rotate(-90deg) translateY(-.2em); transition: all 0.2s ease-out; } .corners{ position: relative; padding: 4% 7% 10%; } .corners h2{ margin: 0; } .corners:before, .corners:after{ content: ''; position: absolute; height: 0; width: 10%; padding-top: 14%; background: url(../themes/harmonie/assets/images/corner.svg) no-repeat 50% 50%; background-size: contain; bottom: 0; left: 0; } .corners:after{ bottom: inherit; left: inherit; top: 0; right: 0; transform: rotate(180deg); } .reverse{display: flex; flex-direction: row-reverse; } .offset-demi-col{ transform: translateX(-8.3%); } /** * Layout **/ /* Global */ #page{ position:relative; width:100%; overflow:hidden; } /* Header */ #header{position: fixed; top: 0; width: 100%; background-color: white; z-index: 10; } .site-head{ display: flex; align-items: center; height: 15vmin; justify-content: space-between; flex-wrap: nowrap; } .logoheader{ display: block; } .logoheader img{ height: 13vmin; } .nav{ height: 100%; display: flex; align-items: center; justify-content: flex-end; width: 100%; } .socials{ display: flex; align-items: center; position: relative; height: 100%; padding-right: 1vw; } .socials:after{ content:""; background-color: var(--couleuror); opacity: 0.5; width: 1px; height: 50%; position: absolute; right: 0; top: 25%; } .socials .picto{ margin-right: 3vmin; } .socials .picto:before{ max-height: 5vh; min-height: 20px; } .hamburger-wrapper{ margin-left: 2vmin; } .hamburger{ transition: all 0.2s ease-out; } .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before{ background-color: var(--couleurbleu); height: 2px; } .hamburger-inner:after, .hamburger-inner:before{ width: 50%; left: 25% } .hamburger.is-active{ position: fixed; right: 0; top: 0; background-color: var(--couleuror); z-index: 2; } .hamburger.is-active .hamburger-box{ transform: scale(.7) translateY(3px); } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before{ background-color: #fff; } .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before{ width: 100%; left: 0% } .hamburger.is-active:hover, .hamburger:hover{ opacity: 1; } .menu{ position: fixed; z-index: 1; width: 100vw; height: 100vh; top: 0; left: 100%; transition: all 0.7s ease-out; background-color: var(--couleurbleu); opacity: 0.8; color: white; font-size: 2.5rem; text-transform: uppercase; font-weight: var(--fwBold); letter-spacing: 0.05em; } .menu:after{ content: ''; position: absolute; left: 0; width: 1px; height: 55vh; top: 45vh; background-color: #fff; opacity: 0.1; z-index: -1; } .menu ul{ display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; align-content: stretch; height: 100%; } .menu li{ position: relative; } .menu li:after{ content: ''; display: block; width: 2.5rem; height: 4px; background-color: var(--couleuror); position: absolute; bottom: -6.5vh; left: 50%; transform: translateX(-50%); } .menu li:first-child:after, .menu li:last-child:after{ content: none; } .menu li a{ color: inherit; } .menu li a:hover{ color: var(--couleuror); text-decoration: none; } .menu li.home a{ display: block; text-indent: 120%; white-space: nowrap; overflow: hidden; background: url(../themes/harmonie/assets/images/logo-menu.svg) no-repeat 50% 50%; background-size: contain; width: 50vmin; height: 30vmin; } body.open .menu{ left: 0; opacity: 1; } body.open #header{ z-index: 12; } /* Footer */ #footer{ padding: 10vmin 0 15vmin 0; } #footer h2{ font-size: 2rem; } #footer .logo{ position: relative; padding-bottom: 5vmin; margin-bottom: 3vmin; } #footer .logo::after{ position: absolute; content: ""; height: 1px; width: 150%; background-color: var(--couleuror); left: -25%; bottom: 0; } #footer .coords{ text-align: center; justify-content: space-evenly; max-width: 710px; margin: auto; } .mentions{ padding: 2vmin 0; background-color:#FAF9F7; font-size: 15px; text-transform: lowercase; } .mentions ul{ display: flex; justify-content: center; color: var(--couleuror); flex-wrap: wrap; } .mentions ul li{ margin: .2em 1em; } .mentions a:hover{ color: var(--couleurbleu); } /** * Pages **/ #main{ margin-top: 15vmin; } #head{ position: relative; } #head .swiper-pagination{ left: inherit; right: 10px; bottom: -0.55rem; text-align: right; line-height: 1em; } #head .swiper-pagination-bullet{ border-radius: 0; width: 1.3rem; height: 1.3rem; margin: 0 0.5rem; background-color: #ac9676; opacity: 0.5; } #head .swiper-pagination-bullet-active{ opacity: 1; } #entete{ margin-bottom: 7.5vmin; position: relative; z-index: 2; } #entete .encadre-bleu{ padding: 2.5vmin 5vmin; margin-top: -7.5vmin; } #entete .container:after{ content: url(../themes/harmonie/assets/images/harmonie-stroke.svg); position: relative; display: block; top: 4vmin; margin: 4vmin 0; z-index: -1; pointer-events: none; } #entete .corners h2{ color: var(--couleuror); text-transform: uppercase; font-weight: var(--fwExtrabold); margin: 0; line-height: 1.4em; } /* Accueil */ #accueil #page{ padding-right: 8vmin; } #accueil #header{ padding-right: 8vmin; } #accueil h1{ margin: 0 0 0.5em; text-transform: none; letter-spacing: .1em; line-height: 1.1em; } #accueil #entete .corners{ margin-top: 10vmin; transform: translateY(6vmin); } #accueil #entete .container:after{ margin-top: 0; } #accueil #entete .encadre-bleu{ margin-top: -11vmin; } #sommaire{ position: fixed; z-index: 11; top: 0; right: 0; width: 8vmin; background-color: var(--couleurbleu); font-size: 14px; color: #fff; text-transform: uppercase; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } #sommaire ul{ width: 100%; max-width: 45px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; max-height: 800px; margin: 4vmin 0; position: relative; } #sommaire ul:before{ content: ''; position: absolute; z-index: -1; width: 1px; height: 100%; background-color: #fff; opacity: 0.1; left: 50%; } #sommaire li{ margin: 0; } #sommaire a{ text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-transform: uppercase; color: #fff; position: relative; background-color: var(--couleurbleu); padding: 5px; } #sommaire .etiquette{ background-color: var(--couleuror); color: var(--couleurbleu); letter-spacing: 0.1em; padding: 1rem 3rem 1rem 2rem; white-space: nowrap; font-weight: var(--fwBold); box-shadow: 0px 0px 30px 10px rgb(18 46 72 / 50%); clip-path: polygon(0 0, 95% 0, 95% 33%, 100% 50%, 95% 66%, 95% 100%, 0 100%); position: absolute; right: 130%; top: 60%; transform: translateY(-50%); opacity: 0; transition: all 0.2s ease-in-out; pointer-events: none; } #sommaire a:hover .etiquette{ opacity: 1; } #sommaire .index{ margin-bottom: 0.5em; } #sommaire a:after{ content: ''; display: block; width: 100%; max-width: 60px; } #link-etape1 a:after{ content: url(../themes/harmonie/assets/images/etape1.svg); } #link-etape2 a:after{ content: url(../themes/harmonie/assets/images/etape2.svg); } #link-etape3 a:after{ content: url(../themes/harmonie/assets/images/etape3.svg); } #link-etape4 a:after{ content: url(../themes/harmonie/assets/images/etape4.svg); } #link-etape5 a:after{ content: url(../themes/harmonie/assets/images/etape5.svg); } #link-etape6 a:after{ content: url(../themes/harmonie/assets/images/etape6.svg); } #link-etape7 a:after{ content: url(../themes/harmonie/assets/images/etape7.svg); } #sommaire #link-contact{ justify-content: space-evenly; box-shadow: 0px 0px 30px 10px rgb(18 46 72 / 50%); background-color: var(--couleuror); width: 9vmin; height: 9vmin; min-width: 80px; min-height: 80px; padding: 1vmin; font-weight: var(--fwSemiBold); line-height: 1.2em; transform: translateX(-60%); left: 60%; } #sommaire #link-contact:before{ content: url(../themes/harmonie/assets/images/devis.svg); width: 70%; max-width: 60px; } #prestations .intro{ align-items: baseline; } #prestations .intro h3.bicolore{ margin-top: 0; text-align: right; } .prestation{ margin-bottom: 10vmin; min-height: 30vmax; } /* .prestation .overflow{ max-width: 800px; } */ .prestation .index{ width: auto; font-size: 10rem; letter-spacing: 0.05em; color: var(--couleuror); height: 100%; position: relative; line-height: .5em; } .prestation .index:after{ content: ''; position: absolute; background-color: var(--couleuror); width: 0.5em; height: 4px; top: 1em; left: 0.05em; } .prestation .text{ display: flex; align-items: center; position: relative; } .prestation .text:before{ content: ''; position: absolute; background-color: var(--couleuror); width: 113%; height: 1px; top: 3em; left: -23%; opacity: 0.3; } .prestation .text:after{ content: ''; position: absolute; width: calc(var(--containerWidth) * .15); height: calc(var(--containerWidth) * .15); top: 60%; right: 90%; opacity: 0.15; transform: translateY(-50%); background: no-repeat 50% 50%; background-size: contain; } .prestation .textin{ width: 100%; margin: 4.5em 0 2.5em; padding-right: 6vmin; } .prestation.reverse .text{ flex-direction: row-reverse; } .prestation.reverse .text:before{ left: inherit; right: -23%; } .prestation.reverse .text:after{ right: inherit; left: 90%; } .prestation.reverse .textin{ padding-right: 0; padding-left: 6vmin } .prestation.full{ width: 100vw; left: 50%; position: relative; transform: translateX(-50%); margin-bottom: 18vmin; } .prestation.full .container{ transform: translateY(8vmin); } .prestation.full .encadre-bleu{ min-height: 0; padding: 4.5vmin 5vmin; } .prestation.full .index{ line-height: 1em; height: 1.5em; transform: translateX(50%); } .prestation.full .index:after{ top:inherit; left: 0; bottom: -2px; width: 50%; } .prestation.full .text{ flex-direction: column; align-items: flex-end; } .prestation.full .text:before{ width: calc(100% + var(--asideWidth)); height: 100%; z-index: -1; background-color: var(--couleurbleu); opacity: 0.6; left: 0; top: 0; } .prestation.full .text:after{ mix-blend-mode: luminosity; } .prestation.full.left .index{ transform: none; } .prestation.full.left .text{ align-items: flex-start; } .prestation.full.left .text:before{ left: inherit; right: 0; } .prestation.full.reverse .text{ padding-right: 3.2em; } #etape1.prestation .text:after{ background-image: url(../themes/harmonie/assets/images/etape1.svg); } #etape2.prestation .text:after{ background-image: url(../themes/harmonie/assets/images/etape2.svg); } #etape3.prestation .text:after{ background-image: url(../themes/harmonie/assets/images/etape3.svg); } #etape4.prestation .text:after{ background-image: url(../themes/harmonie/assets/images/etape4.svg); } #etape5.prestation .text:after{ background-image: url(../themes/harmonie/assets/images/etape5.svg); } #etape6.prestation .text:after{ background-image: url(../themes/harmonie/assets/images/etape6.svg); } #etape7.prestation .text:after{ background-image: url(../themes/harmonie/assets/images/etape7.svg); } #etape7.prestation{ margin-bottom: 14vmin; } #etape7.prestation .index{ margin-top: 10vmin; } #fb{ margin-top: 10vmin; padding: 10vmin 0; background-color: var(--couleuror); color: #fff; text-align: center; position: relative; z-index: 0; } #fb *{ border-radius: 0; } #fb h2 { color: inherit; text-transform: uppercase; font-weight: var(--fwExtrabold); margin: 0; line-height: 1.4em; } #fb a{ color: inherit; } #reviews { background-color: #FAF9F7; padding: 10vmin 0; } #reviews div{ border-radius: 0 !important; } #reviews .iFEZzR{ font-size: 4rem; letter-spacing: 0.1em; color: var(--couleuror); text-transform: uppercase; font-weight: var(--fwExtrabold); line-height: 1.4em; max-width: 800px; margin: 0 auto; } #reviews .bcOIJd{ background-color: #fff; } /* .eapps-facebook-feed-button { align-items: center; justify-content: center; border: 1px solid #ac9676; box-shadow: none; margin-left: auto; margin-right: auto; border-radius: 0; color: #ac9676; font-family: inherit; font-weight: 700; padding: 0.5rem 1.7rem; position: relative; text-transform: uppercase; display: flex; max-width: 110px; white-space: nowrap; text-align: center; font-size: 1.7rem; transition: all 0.3s ease-out; } .eapps-facebook-feed-button-label { color: inherit; font-size: 1.7rem; font-weight: 700; } .eapps-facebook-feed-button-icon { min-width: 12px; } .eapps-facebook-feed-button-icon svg{ fill: #ac9676; } .eapps-facebook-feed-button:hover { background: #ac9676; color: #fff; box-shadow: none; } */ /* Entreprise */ #missions{ text-align: center; color: white; background: url("../themes/harmonie/assets/images/fondmissions.jpg") no-repeat 50% 50%; background-size: cover; padding: 10vmin 0; } #missions h2{ color: inherit; margin: 0 0 1.5em; } .missions-list{ display: flex; align-items: flex-start; } .missions-list.haut{ justify-content: space-between; position: relative; } .missions-list.haut::before{ content: ""; background-color: #707070; width: 135%; position: absolute; height: 1px; top: 25%; left: -34%; } .missions-list.bas{ justify-content: space-evenly;position: relative; transform: translateY(10px); } .missions-list.bas::before{ content: ""; background-color: #707070; width: 135%; position: absolute; height: 1px; top: 25%; right: -34%; } .etape{ display: flex; flex-direction: column; align-items: center; flex: 1 0 0%; } .etape .img{ background-color: #122E48; border: 1px solid #41586D; padding: 20px; width: 100px; height: 100px; z-index: 2; display: flex; align-items: center; } .etape h3{ font-size: 1.8rem; } .etape p{ line-height: 1.2em; font-weight: var(--fwSemiBold); font-size: 1.7rem; } #equipe{ padding: 10vmin; position: relative; } #equipe:before, #equipe:after{ content: ''; position: absolute; height: 55vmin; width: 16vmin; background: url(../themes/harmonie/assets/images/coins.svg) no-repeat 50% 50%; background-size: contain; bottom: 15vmin; left: 0; } #equipe:after{ bottom: inherit; left: inherit; top: 15vmin; right: 0; transform: rotate(180deg); } #equipe h2{ margin-bottom: 1.5em; } .personne{ position: relative; } .personne .txt{ height: 100%; display: flex; justify-content: center; flex-direction: column; max-width: calc(375px - 10%); } .personne img{ max-width: 375px; } .personne.odd{flex-direction: row-reverse; } .personne.odd .photo{ text-align: right; } .personne.even .profil{ display: flex; justify-content: flex-end; } .personne.even .photo{ display: flex; align-items: flex-end; } .personne.odd .txt{ transform: translateX(16.6%); } .personne.even .txt{ transform: translateX(-16.6%); } .personne::after{content: ""; display: block; background-color: var(--couleuror); width: calc(var(--containerWidth) * 0.82); height: 1px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .personne:last-child::after{ content: none; } #competences > .container-lg > .row{ min-height: 80vmin; } #competences .encadre-bleu{ height: 100%; } #competences h2{ font-size: 3.2rem; } #reseau{ padding: 10vmin 0; } #reseau > .container-lg > .row{ min-height: 60vmin; } #reseau .button{ transform: translateY(8vmin); } /* Réalisations */ #realisations #entete .container:after{ content: none; } #realisations .intro{ text-align: center; margin-bottom: 8vmin; } .oc-loading .stripe-loading-indicator{ opacity: 1; } .stripe-loading-indicator{ position: fixed; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; opacity: 0; transition: opacity 0.2s ease-out; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } #projet article{ position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 11; overflow-y: scroll; padding: 8vmin 0; } #projet article:after{ content: ''; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: var(--couleurbleu); opacity: 0.8; } #projet article:before{ content: ''; position: fixed; width: 100%; height: 100%; top: 0; left: 0; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } #projet article > div{ align-items: center; } #projet article .box{ background-color: #fff; position: relative; z-index: 1; padding: 3.5vw; } #projet article .close{ background-color: var(--couleuror); position: absolute; top: 0; right: 0; z-index: 11; color: #fff; width: 5rem; height: 5rem; text-indent: 5rem; overflow: hidden; white-space: nowrap; padding: 0; border: 0; opacity: 0.8; } #projet article .close:hover{ opacity: 1; } #projet article .close:before{ content: ''; position: absolute; left: 0; top: 0; width: 5rem; height: 5rem; display: flex; align-items: center; justify-content: center; background: url(../themes/harmonie/assets/images/close.svg) no-repeat 50% 50%; background-size: 40%; } #projet article h2{ text-transform: uppercase; font-size: 2.2rem; letter-spacing: 0.02em; margin: 0em 0 2em; position: relative; } #projet article h2:after{ content:''; position: absolute; background-color: var(--couleuror); width: 2rem; height: 3px; bottom: -1em; left: 0.05em; } #projet article h3{ color: inherit; font-size: inherit; margin-top: 2em; } .vignette{ display: block; position: relative; cursor: pointer; margin: 0 auto var(--bs-gutter-x); max-width: 440px; transition: all 0.2s ease-out; } .vignette .titre{ opacity: 0; transition: opacity 0.4s ease-out; position: absolute; width: 70%; height: 60%; top: 20%; left: 15%; padding: 10px; background-color: rgb(18 46 72 / 80%); color: #fff; font-weight: var(--fwSemiBold); text-transform: uppercase; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .vignette hr{ display: block; background-color: var(--couleuror); width: 2rem; height: 3px; margin: 0.8em 0; opacity: 1; } .vignette:hover{ box-shadow: 0 0 1.5rem 0 rgb(0 0 0 / 50%); } .vignette:hover .titre{ opacity: 1; } .vignette .lieu{ font-size: 0.85em; font-weight: var(--fwLight); } .nav-tabs{ justify-content: flex-start; border-bottom: 5px solid var(--couleurbleu); } .nav-tabs .nav-link{ margin-bottom: 0; background-color: var(--couleuror); color: #fff; text-transform: uppercase; font-weight: var(--fwSemiBold); border-radius: 0; border: 0; border-right: 1px solid #fff; font-size: 1.4rem; letter-spacing: 0.05em; padding: 2vmin 2vmin; } .nav-tabs .nav-link.active{ background-color: var(--couleurbleu); color: #fff; } .swiper-gallery{ position: relative; } .swiper-main{ margin-bottom: 10px; } .swiper-thumbs-wrapper{ position: relative; } .swiper-thumbs .swiper-slide{ background-color: #000; } .swiper-thumbs .swiper-slide>div{ opacity: 0.45; } .swiper-thumbs .swiper-slide-thumb-active>div{ opacity: 1; } .swiper-button-prev{ transform: rotate(90deg) translateX(20%); left: -3rem; width: 3rem; height: 3rem; } .swiper-button-next{ transform: rotate(-90deg) translateX(-20%); right: -3rem; width: 3rem; height: 3rem; } .swiper-button-prev:after, .swiper-button-next:after{ content: ''; display: block; width: 100%; height: 70%; background: url(../themes/harmonie/assets/images/arrowbottom.svg) no-repeat 50% 100%; background-size: 30%; } .swiper-pagination-fraction { background-color: var(--couleuror); right: 0; bottom: 0; left: inherit; width: 6rem; height: 4rem; display: flex; align-items: center; justify-content: flex-end; padding: 1rem 0.3rem 0rem 1rem; color: #fff; font-weight: var(--fwSemiBold); font-size: 1.4rem; letter-spacing: 0.2em; clip-path: polygon(100% 0, 100% 100%, 0 100%); -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%); } .beer-slider{ display: block; } .beer-handle{ background: rgb(255 255 255 / 75%); color: var(--couleuror); } .beer-reveal{ border-right: 1px solid var(--couleuror); } .beer-reveal[data-beer-label]:after, .beer-slider[data-beer-label]:after{ display: none; } [type=range]::-webkit-slider-thumb{ -webkit-appearance: none !important; height: 48px; width: 80px; border-radius: 2px; display: block; } #nav-avant-apres .swiper-thumbs .swiper-slide>div{ position: relative; } #nav-avant-apres .swiper-thumbs .swiper-slide>div:before{ content:''; position: absolute; left: 50%; top: -10%; width: 2px; height: 120%; background-color: var(--couleuror); transform: rotate(16deg); z-index: 1; } #nav-avant-apres .swiper-thumbs .swiper-slide img.ap{ position: absolute; top: 0; right: 0; clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%); -webkit-clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%); } #ventes{ background-color: var(--couleurbleu); margin-top: 10vmin; padding: 5vmin 0; } #ventes .vente{ margin-bottom: 10vmin; } #ventes h2{ color: #fff; } #ventes .intro{ color: #fff; } #ventes .swiper-vente-gallery{ margin-right: 10%; } #ventes .description{ position: relative; padding-bottom: 1vmin; padding-right: 3vmin; } #ventes .description:before{ content: ''; width: 169%; height: 100%; position: absolute; top: 0; right: 0; background-color: #fff; } #ventes h3{ display: flex; align-items: center; justify-content: flex-start; color: #fff; letter-spacing: 0.05em; margin: 1em 0px 2em; } #ventes h3:before{ content: ''; display: block; background-color: var(--couleuror); width: 2rem; height: 2px; margin-top: 0.3em; margin-left: -3rem; margin-right: 1rem; } #ventes dl{ position: relative; padding-top: 2vmin; margin-bottom: 0; } #ventes dl dt{ color: var(--couleurbleu); } #ventes dl dd{ margin-bottom: 0; } #ventes dl > div{ border-top: 1px solid #e6e6e6; padding-top: 1.5vmin; padding-bottom: 1.5vmin; } #ventes dl > div:last-child{ padding-bottom: 0; } #ventes dl > div.ico{ border-top-width: 0; padding-left: 5vmin; position: relative; } #ventes dl > div.ico:before{ content: ''; min-width: 2.7vmin; position: absolute; top: 50%; left: 1vmin; transform: translateY(-50%); } #ventes dl > div.localisation:before{ content: url(../themes/harmonie/assets/images/pin.svg); } #ventes dl > div.localisation:after{ content: ''; position: absolute; width: 0; height: 70%; top: 15%; right: calc(var(--bs-gutter-x)/ 2); border-left: 1px solid #e6e6e6; } #ventes dl > div.surface:before{ content: url(../themes/harmonie/assets/images/surface.svg); } #ventes p.lien{ position: relative; margin-bottom: 0; margin-top: 0; } #ventes .swiper-vente-gallery{ margin-top: -5em; } #ventes .swiper-main{ box-shadow: 0 0 3rem 0 rgb(0 0 0 / 50%); background-color: #fff; } /* Contact */ #contact h2{ margin-top: 0; } .intro{ margin-bottom: 6vmin; } .adresse{ display: flex; align-items: center; margin-bottom: 3vmin;} .adresse img{ max-width: 38%; margin-right: 10%; } .adresse p{ margin-bottom: 0.5em; line-height: 1.4em; } #form{ margin-top: -15vmin; position: relative; z-index: 2;} #form hr{ width: 100vw; border-bottom: 1px solid var(--couleuror); opacity: 0.4; margin-bottom: 1.2em; } .form-item{ margin-bottom: 2rem; } .form-item label{ padding: 1rem 1.5rem; } .form-item.select label{ font-size: 1.2rem; font-weight: var(--fwSemiBold); } .form-control{ font-size: inherit; color: var(--couleurnoir); border-color: var(--couleuror); border-radius: 0; } .form-control:focus{ color: inherit; background-color: #fff; border-color: var(--couleuror); box-shadow: 0 0 0 0.25rem rgb(172 150 118 / 25%); } .form-item>.form-control, .form-item>.form-select{ height: calc(5.5rem + 2px); padding: 1rem 1.45rem; } .form-item>.form-select{ padding-left: 1.5rem; background-image: url(../themes/harmonie/assets/images/form-arrow.svg); background-position: 96.5% 50%; font-weight: var(--fwLight); } .form-item.select{ position: relative; } .form-item.select:after{ content:''; position: absolute; height: calc(5.5rem + 2px); width: 0; bottom: 0; left: 90%; border-right: 1px solid var(--couleuror); pointer-events: none; } .form-item.select .form-label{ padding-left: 0; font-weight: bold; font-size: 1.5rem; } #form .btn{ padding: 2em; background-color: var(--couleurbleu); color: #fff; text-transform: uppercase; letter-spacing: 0.15em; font-weight: var(--fwMedium); border: 0; border-radius: 0; transition: all 0.2s ease-out; } #form .btn:hover{ background-color: var(--couleurbleu); cursor: pointer; transform: scale(105%); } #form .btn{ display: flex; align-items: center; justify-content: center; width: 100%; height: 95%; } #contact .alert{ position: fixed; z-index: 2; top: 50vh; left: 50vw; transform: translate(-50%, -50%); min-width: 40%; } #contact .alert .close{ border: 0; background-color: transparent; font-size: 2em; float: right; line-height: 0.5em; color: var(--couleurbleu); } #map{ background-color: #333; margin-top: 10vmin; position: relative; height: 60vmin; overflow: hidden; } #map iframe{ position: absolute; width: 100%; height: calc(100% + 50px); bottom: 0; mix-blend-mode: luminosity; } /* CONTAINER */ body{ --containerWidth: 100%; --asideWidth: calc( ((100vw - var(--containerWidth)) / 2) + (1.5rem / 2) ); } @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) { } /** * XL **/ @media (max-width: 1399px) { } /** * LG **/ @media (max-width: 1199px) { .offset-demi-col.kill-offset-lg{ transform: none; } #reseau .cover{ width: calc( 100% + var(--asideWidth));} #reseau .offset-demi-col{ transform: none; padding-right: 5rem; } #form{ width: 90%; margin-left: auto; margin-right: auto; } } /** * MD **/ @media (max-width: 991px) { .casper-md{ display: none; } .offset-demi-col.kill-offset-md{ transform: none; } #entete h2:first-child{ margin-top: 1em; } #accueil #entete .corners{ margin-top: 0; } .personne::after{ width: 90vw; } #competences > .container-lg > .row{ min-height: 0; } #reseau .offset-demi-col{ padding-right: 0; } #prestations > div{ padding: 2rem; } #prestations .intro { margin-bottom: 6vmin; } #projet article { padding: 6vmin; } #projet article .box { padding: 3rem; } .vignette span{ opacity: 1; } #ventes { padding: 5vmin 3vmin; } } /** * SM **/ @media (max-width: 767px) { .casper-sm{ display: none; } .offset-demi-col.kill-offset-sm{ transform: none; } .menu{ font-size: 2rem; } #equipe:before, #equipe:after{ content: none; } #competences .container-lg{ padding: 0; } .prestation .text:after{ width: calc(var(--containerWidth) * .3); height: calc(var(--containerWidth) * .3); right: 80%; } .prestation.reverse .text:after { left: 80%; } #accueil #eapps-facebook-feed-1 .eapps-facebook-feed-load-more{ max-width: 100%; transform: none; } .logoheader{ margin-left: 3vmin; } #ventes .description:before { width: 100%; } #ventes h3:before { margin-left: 0; } #ventes .description{ padding-left: 3vmin; } #ventes .swiper-vente-gallery { margin-top: 0; margin-right: 10%; } #ventes .description { margin-left: 10%; margin-top: -17rem; padding-top: 18rem; } .adresse img{ max-width: 200px; } } /** * XS **/ @media (max-width: 575px) { .container{ width: 90%;} .casper-xs{ display: none; } .site-head{ height: 60px; } .site-head .socials{ display: none; } #main{ margin-top: 60px; } h1 { font-size: 3rem; } h2{ font-size: 3.3rem; } #head .swiper-pagination { width: 13px; bottom: -0.65rem; } #sommaire{ display: none; } #accueil #page{ padding-right: 0; } #accueil #header{ padding-right: 0; } #etapes .intro { text-align: right; } .prestation .text{ flex-direction: column;} .prestation.reverse .text{ flex-direction: column; align-items: flex-end; } .prestation .textin, .prestation.reverse .textin{ padding: 0;} .prestation .text:after{ right: -20%; width: 40vmin; height: 40vmin; display: block; top: 35vmin; transform: none; } .prestation .text h4{ max-width: 80%; } .prestation.full.reverse .text{ padding-right: 0em; } .prestation.full .index{ transform: none; } .prestation.full .index:after { left: inherit; right: 0; } .prestation.full .text h4 { max-width: 100%; } .prestation.full .text:after{ top: 85%; } #missions{ height: 1050px; overflow: hidden; } #missions h2{ margin: 0 auto 1.5em; text-align: left; width: 270px; padding-right: 60px; transform: translateX(56px); font-size: 2.2rem; text-indent: -73px; } .missions-list{ flex-direction: column; margin: auto; width: 270px; } .missions-list.haut::before, .missions-list.bas::before{ left: 50px; width: 1px; height: calc(100% + 90px); top: -100px; } .missions-list.bas{ transform: none; } .etape{ flex-direction: row; margin: 2rem auto 0; width: 100%; position: relative; z-index: 1; } .etape > div{ flex-direction: column; align-items: center; } .etape img{ margin-right: 2rem; } .etape h3{ margin-top: 0; } .etape p{ margin-right: 2rem; margin-bottom: 0; } #equipe h2 { margin-bottom: .5em; } .personne{ margin-bottom: 1em; } .personne.odd .txt, .personne.even .txt {transform: none; width: 100%; max-width: 375px; margin: auto; } .personne.odd .photo, .personne.even .photo{ justify-content: center; text-align: center; } .personne:after { width: 15%; left: 75%; transform: rotate(-45deg); } .personne:last-child:after{ content: ''; } #projet article { padding: var(--bs-gutter-x,.75rem) 0; } #projet article .box { padding: 1rem; } #projet article h2 { margin-right: 4rem; } #projet article .close { position: fixed; margin: var(--bs-gutter-x,.75rem); } .nav-tabs .nav-link { font-size: 1.2rem; padding: 1vmin 1vmin; } .swiper-button-next { right: 0rem; } .swiper-button-prev { left: 0rem; } .swiper-main .swiper-slide { max-height: calc( 100vh - 4rem); } .swiper-thumbs{ height: 2rem; } .swiper-thumbs .swiper-wrapper{ display: none; } #ventes .swiper-vente-gallery { max-width: 90%; margin: auto; } #ventes .description { margin-left: 0; margin-top: -13rem; padding-top: 13rem; } #ventes dl{ display: block; } #ventes dl > div { width: auto; margin-left: calc(var(--bs-gutter-x)/ 2); margin-right: calc(var(--bs-gutter-x)/ 2); padding-left: 0; padding-right: 0; } #ventes dl > div.ico:before { min-width: 2rem; } #ventes dl > div.ico:before { left: inherit; right: 1rem; } #ventes dl > div.ico { padding-left: calc(var(--bs-gutter-x)/ 2); padding-right: 5rem; } #ventes dl > div.localisation { border-right: 0; } #ventes dl > div.surface { border-top-width: 1px; } #ventes p.lien { margin-top: 0; } #contact h2{ margin-top: 1em; } } /** * XXS **/ @media (max-width: 480px) { .intro{ margin-bottom: 15vmin; } .adresse{ flex-direction: column; } .adresse img{ margin-right: 0; } .adresse>div{ width: 100%; max-width: 200px; margin: 0.5em 0 1em; } .g-recaptcha{ display: flex; justify-content: center; } .g-recaptcha div{ max-width: 100%; } .g-recaptcha iframe{ transform: scale(0.9) translateX(-5%); } } @media (max-height: 620px) { #sommaire{ display: none; } #accueil #page{ padding-right: 0; } #accueil #header{ padding-right: 0; } }