@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap'); :root { --black: #000; --white: #fff; --primary: #b3aa91; --second: #565866; --gris: #e5e9ed; } body { padding: 0px; margin: 0px; font-family: "Lexend", sans-serif; font-optical-sizing: auto; font-weight: normal; font-style: normal; font-weight: normal; overflow-x: hidden; } ul { padding: 0px; margin: 0px; } a { text-decoration: none !important } .header { width: 100%; position: relative; margin: 0 auto; padding: 0px 20px; max-width: 1440px; } .block-bottom-img { padding: 10px 40px 0px } .header .d-flex { justify-content: space-between; width: 100%; margin: 0 auto; max-width: 1500px; } .top { display: flex; align-items: center; justify-content: flex-end; padding: 13px 0px; position: relative; width: 100%; right: 0; z-index: 2; max-width: 1440px; margin: 0 auto; } .insta img{ max-width: 200px; } .insta img:hover{ content:url('../images/insta-hover.png'); } .block-phone>div { margin: 0; font-size: 17px; } .block-phone>div span {} .block-phone>div a { color: #000; font-weight: 800; font-size: 23px; letter-spacing: 0; } .block-phone>div a:nth-child(2) { position: relative; padding: 0; margin: 0px 14px; } .banner { position: relative; z-index: 0; } .banner { width: 70%; max-width: 940px; width: 100%; } .title-banner { position: absolute; right: 25px; bottom: -51px; color: #fff; text-align: right; z-index: 9; } .title-banner h3 { font-size: 24px; font-weight: 700; } .title-banner h3 span { display: flex; font-size: 24px; overflow: hidden; flex-direction: column; justify-content: flex-end; align-items: flex-end; } .title-banner h3 span:before { content: ""; width: 25px; display: block; background: #fff; height: 25px; margin: 5px 0px 10px; } .title-banner h3 b { font-size: 91px; text-shadow: 1px 6px 21px #56586666; line-height: 81px; } .block-banner { overflow: hidden; border-radius: 25px; } .block-banner>div { animation: zoom 8s ease infinite alternate; background: url(../images/banner.jpg) no-repeat; background-position: bottom; background-size: cover; transform: scale(1.1); width: 100%; } @keyframes zoom { 0% { transform: scale(1.1); } 100% { transform: scale(1.0); } } .banner img { width: 100%; display: block; opacity: 0; } .logo { z-index: 2; display: flex; justify-content: flex-end; align-items: center; } .logo>div { position: relative; padding: 0; } .logo img { position: relative; z-index: 1; max-width: 100%; display: block; background: #fff; padding: 10px; left: 40px; border-radius: 30px; padding-right: 45px; } /* end header */ /* menu */ .navbar-nav .nav-item { display: block; transition: 0.5s ease all; } .dropdown-item { padding: 10px 40px 5px; color: var(--primary); white-space: nowrap; transition: 0.3s ease all; font-size: 17px; text-align: left; font-weight: normal; text-transform: uppercase; font-weight: 600; } .dropdown-item:active { background: var(--primary) } .dropdown-item:hover { background: var(--primary); color: #fff } .navbar-nav .nav-item.dropdown:hover>.dropdown-menu { display: block; } .dropdown-menu { left: 100%; top: 0; background: var(--second); border: 0; border-radius: 0; margin: 0; padding: 10px; } .page .navbar-nav .nav-item:last-child { margin: 0 } .navbar .navbar-nav .nav-item .nav-link { padding: 10px 40px 5px; color: var(--primary); white-space: nowrap; transition: 0.3s ease all; font-size: 17px; text-align: left; font-weight: normal; text-transform: uppercase; font-weight: 600; } .navbar .navbar-nav .nav-item .nav-link:hover { background: var(--primary); color: #fff; } .navbar-nav .nav-item:hover>.nav-link { background: var(--primary); color: #fff; } .bloc-menu.fixed { left: 30px; padding: 0; position: fixed; z-index: 12; width: auto; background: var(--second); padding: 20px 0px; top: 30px; } @keyframes hithere { 30% { transform: scale(1.1); } 40%, 60% { transform: rotate(-20deg) scale(1.1); } 50% { transform: rotate(20deg) scale(1.1); } 70% { transform: rotate(0deg) scale(1.1); } 100% { transform: scale(1); } } .bloc-menu.fixed .btn-menu {} .bloc-menu.fixed .btn-menu img { filter: brightness(0) saturate(100%) invert(100%) sepia(96%) saturate(0%) hue-rotate(87deg) brightness(103%) contrast(106%); max-width: 35px; } .bloc-menu { position: absolute; z-index: 11; left: 0; top: 0; cursor: pointer; transition: 0.3s ease all; } .bloc-menu.open { position: fixed; z-index: 12; width: 20%; background: none; } .btn-menu img { transition: 0.3s ease all; } .open img { filter: brightness(0) saturate(100%) invert(100%) sepia(96%) saturate(0%) hue-rotate(87deg) brightness(103%) contrast(106%); } .btn-menu { display: table; margin: 0 auto; position: relative; transition: 0.3s ease all; max-width: 1440px; margin: 0 auto; width: 100%; padding: 0px 15px; } .btn-menu:hover img { transform: rotate(180deg); } .menubox { position: fixed; margin: 0; top: 0; left: 0; z-index: 10; transition: 0.3s ease all; background: var(--second); padding: 150px 0px; transform: translatex(-120%); width: 100%; max-width: 500px; } .menubox.activemenu { transform: none; } .menubox.fixed { top: 0; bottom: initial; } .inner-menubox { transition: 0.3s ease all; position: relative; } .navbar { padding: 0; position: relative; z-index: 1; } .navbar-nav { margin: 0px !important; padding: 12px 15px; z-index: 9; width: 100%; flex-wrap: wrap; } .navbar-nav:first-child { flex-direction: column; } .navbar-nav:last-child { padding: 0; } /****** end menu ***/ .flex-block-3 { max-width: 1200px; margin: 50px auto; } .block_img { position: relative; padding-left: 40px; } .block_img img { position: relative; z-index: 1; max-width: 100%; } .flex-block-3 h2 { color: var(--second); font-size: 22px; font-weight: 800; margin-bottom: 25px; } .flex-block-3 p { font-size: 17px; font-weight: 300; text-align: justify; line-height: 22px; } .page .block_flex_images { margin-top: 0; } .block_flex_images { max-width: 1320px; margin: 130px auto 50px; text-align: center; position: relative; z-index: 1; overflow: hidden; } .block_flex_images:after { content: ""; background: url(../images/forme3.png) no-repeat; width: 135px; position: absolute; height: 100%; right: -135px; top: 0; background-position: 112% 90%; } .block_flex_images_container { margin: 0; position: relative; } .page .block_flex_images_container { margin-top: 50px } .block_flex_images_container>div { padding: 0px 7px; position: relative; width: 100%; margin-bottom: 20px; overflow: hidden; } .block_flex_images_container>div:last-child { max-width: 220px; } .block_flex_images_container>div a { display: flex; width: 100%; height: 100%; background: #28ad51; align-items: center; justify-content: center; color: #fff; font-size: 31px; font-weight: 600; transition: 0.3s ease all; padding: 0px 30px; text-align: left; flex-direction: column; justify-content: center; align-items: center; } .block_flex_images_container>div a span { font-size: 20px; text-align: center; font-weight: 300; margin-bottom: 20px; } .block_flex_images_container>div a:hover { background: var(--second) } .block_flex_images_container>div a:hover img { transform: scale(0.8) rotate(2deg); } .block_flex_images_container div img { max-width: 100%; transition: 0.3s ease all; width: 100%; } .flex-block-2 { max-width: 1180px; padding: 0; margin: 0 auto 180px; background: #303030; border-radius: 18px; } .flex-block-2>div { align-items: center; } .flex-block-2 img { max-width: 100%; position: relative; left: 50px; top: -25px; } .list-items { align-items: center; } .list-items+p { font-size: 15px; text-align: center !important; max-width: 580px; margin-top: 6px; } .list-items span { color: #fff; font-size: 15px; margin: 0px 10px; } .list-items a { background: var(--primary); color: #fff; padding: 3px 10px; border-radius: 12px; transition: 0.3s ease all; font-size: 18px; font-weight: 300; } .list-items a:hover { background: var(--second) } .flex-block-2 h2 { font-weight: 700; margin: 0; font-size: 20px; margin-bottom: 20px; padding: 0; text-align: left; color: #fff; } .link-devis { font-size: 18px; font-weight: 800; color: #fff; transition: 0.3s ease all; position: absolute; margin: 0; bottom: 0; right: 0; background: url(../images/btn_3.jpg); width: 100%; height: 90px; max-width: 244px; display: flex; align-items: center; padding-left: 40px; text-transform: uppercase; background-size: 100% 100%; } .link-devis:hover { color: #fff; background: #3ecb6a; } .link-devis:hover:before { width: 100px; } .flex-block-2 p { font-size: 16px; font-weight: 300; color: #fff; text-align: justify; } .flex-block-2 .col-12 { padding: 0px; z-index: 2; } .flex-block-2 .col-12:last-child { position: relative; padding: 0; background-position: 0% 0%; z-index: 1; } .flex-block-2 .col-12:last-child>div { transition: 0.3s ease all; padding-left: 0; margin: 0 auto; position: relative; height: 100%; max-width: 730px; margin: 0 auto; } .flex-block-2 .col-12:last-child>div:hover:before { width: 100%; height: 50%; } .link-rubrique { position: absolute; width: calc(100% - 30px); height: 100%; left: 15px; top: 0; cursor: pointer; z-index: 2; } /****** back bloc***/ /****** bloc-rubrique ***/ .bloc-rubrique { position: relative; padding: 0; margin: 0 auto; } .bloc-rubrique+p { max-width: 970px; margin: 0 auto; color: #fff; font-weight: 300; font-size: 17px; text-align: center; padding: 0px 15px; } .containerrubrique { position: relative; max-width: 1200px; margin: 0px auto 0px; padding-bottom: 150px; background: var(--second); } .containerrubrique+.btn-contact { background: var(--primary); border-radius: 0; border: none; color: #fff; margin: 0 auto; position: relative; z-index: 3; top: -25px; width: 100%; max-width: 370px; text-align: center; font-size: 20px; } .containerrubrique+.btn-contact:before { content: ""; position: absolute; width: 0px; height: 0px; border-style: solid; border-width: 24px 0 0 24px; border-color: transparent transparent transparent #363636; transform: rotate(0deg); left: 0; bottom: 0; } .containerrubrique+.btn-contact:after { content: ""; width: 0px; height: 0px; border-style: solid; border-width: 0 0 24px 24px; border-color: transparent transparent #363636 transparent; transform: rotate(0deg); position: absolute; right: 0; bottom: 0; } .containerrubrique .back-parallax { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .containerrubrique h2 { color: #fff; font-size: 41px; display: table; margin: 0 auto 80px; font-weight: 800; position: relative; z-index: 1; top: -29px; text-shadow: 5px -1px 26px #565866f5; } .containerrubrique h2+p { color: #fff; position: relative; z-index: 1; text-align: center; font-weight: 300; max-width: 715px; margin: 0 auto 70px; font-size: 19px; } .containerrubrique h2 b { font-size: 32px; font-weight: 700; } .bottom-contact { position: relative; width: 100%; padding: 0px 15px 151px; margin-top: 50px; } .bottom-contact h2 { text-align: center; font-weight: 300; font-size: 24px; margin-bottom: 20px; } .bottom-contact>div { position: relative; z-index: 2; max-width: 400px; margin: 0 auto; justify-content: center; } .bottom-contact>div>div:last-child { width: 100%; } .bottom-contact span { font-size: 25px; font-weight: 600; } .bottom-contact_tel { font-size: 32px; display: block; font-weight: 600; } .bottom-contact_tel:last-child { background: #eeeff4; color: #000; font-size: 20px; padding: 8px 30px; border-radius: 20px; font-weight: 800; } .bottom-contact a { background: #eeeff4; color: #000; font-size: 20px; padding: 10px 30px; border-radius: 0px 20px 20px 0px; font-weight: 800; min-width: 240px; display: block; text-align: center; transition: 0.3s ease all; } .bottom-contact a img { filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(31%) hue-rotate(156deg) brightness(91%) contrast(107%); max-width: 97px; } .bottom-contact a:hover { background: var(--primary); } .bottom-contact a:hover img { filter: none; } .bloc-rubrique_inner { width: 100%; padding: 0; max-width: 970px; margin: 0 auto; } .link-avis { display: table; margin: 0 auto 0px; color: #fff; font-size: 22px; font-weight: 400; transition: 0.3s ease all; padding: 15px; } .link-avis:hover { background: var(--primary); color: #fff; padding: 15px 50px; } .bottom_title { padding: 0; color: #000; display: block; margin: 0 auto 50px; position: relative; text-align: center; font-size: 45px; font-weight: 600; max-width: 750px; } .bottom_title:after { content: ""; width: 100%; position: absolute; background: #fff; height: 2.5px; top: 14px; left: 0; } .bottom_title span { display: table; margin: 0 auto; font-size: 25px; font-weight: 300; background: #20b36c; padding: 0px 55px; position: relative; z-index: 1; color: #fff; } .bloc-rubrique .flex-block--inner .col-12 { padding: 0px 10px; margin: 0 auto; width: calc(100% / 3); max-width: calc(100% / 3); flex: calc(100% / 3); } .bloc-rubrique .flex-block--content h2 { font-size: 22px; color: #fff; display: block; transition: 0.3s ease all; position: relative; top: 0px; text-align: center; font-weight: normal; z-index: 1; padding: 0px 30px; margin: 0 auto; letter-spacing: 0px; margin-top: 15px; font-weight: 800; } .bloc-rubrique .flex-block--content h3 { background: var(--primary); color: #fff; border-radius: 13px; font-size: 20px; display: block; padding: 30px 40px; letter-spacing: 1px; text-align: center; transition: 0.3s ease all; } .bloc-rubrique .flex-block--content:hover h2 { color: var(--primary); letter-spacing: 1px; } .bloc-rubrique .flex-block--content h2 span { font-weight: 400; font-size: 21px; } .bloc-rubrique .flex-block--content:hover h3 { background: var(--second); } .bloc-rubrique .flex-block--content p { font-size: 17px; color: #000; text-align: left; font-weight: 400; min-height: 170px; line-height: 26px; } .bloc-rubrique .flex-block--content a {} .bloc-rubrique .flex-block--content a:hover {} .bloc-rubrique .flex-block--content h2 b { font-size: 28px; display: block; font-weight: 700; } .bloc-rubrique .flex-block--content { position: relative; margin: 0 auto 70px; padding: 0px 15px; } .bloc-rubrique .flex-block--content:hover img { transform: scale(0.8) rotate(-5deg); } .bloc-rubrique .flex-block--content img { max-width: 100%; transition: 0.3s ease all; border-radius: 25px; } .bloc-rubrique .flex-block--content>div>div { overflow: hidden; display: table; margin: 0 auto; } .link_insta { display: table; margin: 0 auto 100px; } .link_insta a { transition: 0.3s ease all; } .link_insta a:hover {} /****** page interne ***/ .text { color: #000; max-width: 1200px; margin: 50px auto 50px; padding: 0px 15px; position: relative; z-index: 2; } .textdiv { margin: 30px auto 30px; padding: 10px 15px; line-height: 31px; font-size: 17px; text-align: justify; position: relative; z-index: 1; font-weight: 300; } /****** text images ***/ .flex-block { position: relative; transition: 0.5s ease all; } .flex-block-img { max-width: 1160px; margin: 0 auto 50px; } .flex-block-img .col-12 { padding: 0px 10px; } .flex-block-img img { max-width: 100% } .flex-block-1 { max-width: 1170px; margin: 100px auto 30px; } .flex-block-1>h2 { color: #fff; display: table; margin: 0 auto 80px; letter-spacing: 2px; font-size: 26px; padding: 15px; position: relative; font-weight: 700; min-height: 70px; } .flex-block-1>h2 span { position: relative; z-index: 1; } .flex-block-1>h2 span s { color: var(--primary); text-decoration: blink; } .flex-block-1>h2:after { content: ""; width: 55px; position: absolute; height: 100%; background: #303030; left: -12px; top: 0; } .page .flex-block-1 h1 { display: none } .flex-block-1 h1 { position: relative; font-size: 28px; font-weight: 800; display: block; margin: 0px 0px 30px; width: 100%; max-width: max-content; z-index: 1; color: var(--second); } .block-btn-images { margin-bottom: 100px; } .block-btn-images img { display: table; margin: 0 auto; position: relative; top: 5px; } .block-btn-images a { display: block; width: 100%; background: url(../images/btn_2.jpg) no-repeat; max-width: 658px; height: 134px; display: flex; align-items: center; justify-content: center; margin: 0 auto; flex-direction: column; transition: 0.3s ease all; border-radius: 25px; } .block-btn-images a:hover { background: #3ecb6a; color: #fff; } .block-btn-images a:hover span { color: #fff } .block-btn-images a:hover b { color: #fff } .block-btn-images a span { display: block; color: #36757e; font-size: 24px; font-weight: 600; transition: 0.3s ease all; } .block-btn-images a b { color: #28ad51; font-size: 34px; font-weight: 700; line-height: 32px; transition: 0.3s ease all; } .btn-devis { color: var(--second); display: table; padding: 30px 15px; text-align: center; font-weight: 600; transition: 0.3s ease all; position: relative; width: 100%; max-width: 350px; margin: 0 auto; box-shadow: 1px 1px 20px 5px #5658666b; border-radius: 15px; font-size: 24px; position: relative; z-index: 2; top: -45px; background: #fff; } .btn-devis:hover { color: #fff; max-width: 400px; background: var(--primary); } .btn-devis:hover:after { transform: rotate(22deg); } .flex-block-1 h1 span:nth-child(1) { font-size: 27px; color: var(--second); display: block; font-weight: 800; } .block-text-content { max-width: 960px; margin: 0 auto 70px; padding: 0px 20px; } .block-text-content h2 { color: var(--second); font-size: 24px; font-weight: 800; margin-bottom: 15px; } .block-text-content p { font-size: 16px; text-align: justify; } .block-title { background: var(--second); color: #fff; padding: 55px; font-size: 20px; position: relative; margin-top: 110px; } .block-title:after { content: ""; background: url(../images/right.png) no-repeat; width: 118px; height: 102px; position: absolute; right: 0; bottom: -51px; } .block-title:before { content: ""; background: url(../images/left.png) no-repeat; width: 118px; height: 102px; position: absolute; left: 0; top: -51px; } .block-title h3 { margin: 0; font-size: 21px; text-align: center; font-weight: 600; } .flex-block-1 p { font-size: 16px; margin: 0; font-weight: 300; padding: 0; margin: 0 auto 50px; text-align: justify; line-height: 20px; } .flex-block-1 .flex-block_text { margin: 0 auto; padding: 0; } .back2 { position: relative; z-index: 2; } .flex-block>div { display: flex; margin: 0 auto; flex-wrap: wrap; padding: 0; position: relative; z-index: 2; } /****** Contact ***/ .btn-contact { color: var(--white); transition: 0.3s ease all; margin: 0; cursor: pointer; font-weight: 700; text-align: left; position: relative; z-index: 1; padding: 80px 43px; left: 0; top: 0; margin: 40px 0px 0px; display: table; width: 100%; max-width: 190px; background: var(--primary); color: #fff; float: right; margin-right: 20px; } .btn-contact:after { content: ""; background: url(../images/forme_btn.png) no-repeat; width: 13px; height: 126px; position: absolute; bottom: -53px; left: 44px; } .btn-contact span { display: table; font-size: 22px; } .btn-contact:hover span:before { width: 200%; } .col-contact .btn-contact { height: auto; display: table; width: auto; margin: 0; clear: both; color: #000; padding: 0; background: none; box-shadow: none; border: none; border-radius: 0; font-weight: 400; position: relative; letter-spacing: 1px; border-bottom: 1px solid #000; } .col-contact .btn-contact:after { display: none; } .col-contact a { color: var(--white) } .btn-contact:hover { background: var(--second); text-decoration: none; color: #fff; } .footer-ico { display: block; max-width: 120px; filter: brightness(0) saturate(100%) invert(75%) sepia(16%) saturate(360%) hue-rotate(6deg) brightness(88%) contrast(89%); } .image-footer { display: table; margin: 0 auto -140px; position: relative; z-index: 4; } .image-footer img { max-width: 100% } .reseaux-sociaux { display: table; margin: 0 auto 150px; color: var(--primary); font-weight: 500; font-size: 17px; width: 100%; max-width: 340px; } .page .reseaux-sociaux { margin-top: 100px; } .reseaux-sociaux span { position: relative; top: 5px; font-weight: 700; padding-left: 30px; display: block; } .link-reseaux { background: var(--primary); width: 100%; padding: 40px 15px; display: flex; align-items: center; justify-content: center; border-radius: 25px; position: relative; } .link-reseaux:after { content: ""; width: 100%; position: absolute; height: 100%; background: url(../images/border_btn.png) no-repeat; right: -40px; bottom: -55px; background-position: 100%; } .link-reseaux a { padding: 0px 15px; transition: 0.3s ease all; position: relative; display: inline-block; z-index: 2; } .link-reseaux a:hover { transform: scale(0.8) } footer { position: relative; max-width: 1440px; margin: 0 auto; } .back-parallax { bottom: 0; left: 0; position: relative; } .back-parallax img { max-width: 100% } .fluid-contact { position: relative; margin: 0 auto; padding: 15px 0px 10px; z-index: 2; border-bottom: 10px solid var(--primary); } .logo-bottom { margin: 0 auto; text-align: center; padding: 30px; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; } .logo-bottom img { filter: brightness(0) saturate(100%) invert(100%) sepia(3%) saturate(16%) hue-rotate(9deg) brightness(105%) contrast(100%); max-width: 100%; } .contact { color: var(--white); font-size: 17px; background-repeat: no-repeat; width: 100%; position: relative; z-index: 1; } .col-contact { text-align: center; color: var(--white); padding: 0; justify-content: space-between; align-items: center; } .col-contact>div { padding-bottom: 0; position: relative; } .col-contact p { color: #000; font-size: 17px; margin: 0 auto; font-weight: 400; display: table; padding: 9px 11px; text-align: left; margin-bottom: 10px; } .col-contact p {} .adresse-block { padding: 0px 15px; } .col-contact>div:last-child { position: relative; display: flex; align-items: flex-end; flex-direction: column; } /****** end Contact ***/ /****** footer ***/ .boxfooter { overflow: hidden; padding: 20px 0px; z-index: 1; position: relative; margin: 0 auto; max-width: 1440px; } .footerlink { color: #d0d0d0; font-size: 10px; font-family: verdana; text-align: right; } .footerlink ul { list-style: none; margin: 0px; padding: 0px; display: inline-block; } .footerlink ul li { display: inline-block; } .footerlink ul li a { text-decoration: none !important; transition: 0.3s ease all; color: var(--primary); padding: 0px 10px; font-size: 12px; } .footerlink ul li a:hover { color: var(--second); } .inlineblock { display: inline-block; } .footerlink ul { padding: 0px; margin: 0px; list-style: none; background: none; } .boxfooter>div { width: 100%; margin: 0; align-items: center; } /****** footer ***/ /****** end page interne ***/ @media (max-width: 1280px) { .navbar .navbar-nav .nav-item .nav-link { text-align: center; } .flex-block-2 img { left: 10px; } .navbar-nav:after { height: 100%; } .flex-block-2 { margin-bottom: 50px; } .flex-block-2 .col-12:last-child { left: 0; } .link-devis { position: relative; float: right; } .flex-block-3 h2 br { display: none } } @media (min-width:991px) { .navbar-expand-lg .navbar-collapse { display: block !important; } .page .header .block-banner { height: 400px; min-height: 400px; } } @media (max-width: 1200px) { .flex-block-1>div { padding: 0px 40px; } .btn-contact { margin: 10px auto 25px; float: none; } .flex-block-1 { padding: 0px 0px; margin-bottom: 60px; } } @media (max-width: 991px) { .flex-block>div .col-12 { flex: 0 0 100%; max-width: 100%; top: 0 !important; } .flex-block-3 h2 { text-align: center; } .block_img { display: table; margin: 0 auto; } .flex-block>div .col-12 img { max-width: 100%; margin: 0 auto 15px; display: table; } .bloc-services .flex-block--inner .col-12 { width: 100%; max-width: 100%; flex: 100%; } .container_services h2 { font-size: 25px; } .back-parallax { display: none; } footer .back-parallax { display: block; overflow: hidden; } footer .back-parallax>img { max-width: max-content; height: 300px; } footer .back-parallax .logo-bottom img {} .containerrubrique { border: none; } .containerrubrique+.btn-contact { top: -100px; } .flex-block-3 { margin-top: 0; padding: 0px 15px; } .containerrubrique+.btn-contact:after { display: none } .containerrubrique+.btn-contact:before { display: none } .containerrubrique:after { display: none } .containerrubrique:before { display: none } .container_services { background: url(../images/back_3.jpg) no-repeat; background-position: center; background-size: cover; margin-top: 25px; text-align: center; padding: 60px 20px; } .container_services+.block-bottom-img { margin: 0 auto; } .block_flex_images { margin: 40px auto; } .bloc-services_inner { margin-bottom: 0; } .flex-block-2 { margin-bottom: 0; } .flex-block-2 .col-12:last-child { max-width: 648px; margin: 20px auto; } .containerrubrique h2 {} .bloc-services { margin-top: 40px; } .bloc-services .flex-block--content>div>div { display: table; margin: 0 auto; } .flex-block-2 .col-12:last-child>div { padding-left: 0 } .flex-block-1 { margin: 0px 0px 50px; height: auto; min-height: initial; padding: 20px 15px; overflow: hidden; } .flex-block-1>h2 { margin-bottom: 0; text-align: center; font-size: 20px; min-height: auto; margin-top: 30px; margin-bottom: 20px; } .block-title { margin-top: 40px; } .flex-block-1>h2:after { display: none } .flex-block-1 p { width: 100%; margin: 0; max-width: 100%; text-align: center; border: none; padding: 0; } .block-btn-images { margin: 50px auto; padding: 0px 25px; } .block-btn-images a { border: 6px solid #3ecb6a; background: none; } .block-btn-images a span { font-size: 18px; } .block-btn-images a b { font-size: 25px; text-align: center; } .block-btn-images img { max-width: 100% } .btn-devis {} .navbar .navbar-nav .nav-item .nav-link:before { display: none } .navbar { padding: 0px } .navbar-nav:after { display: none } .navbar-nav .nav-item .nav-link { text-align: left } .inner-menubox { padding: 0; background: none; left: 0; width: 100%; border: none; } .collapse:not(.show) { display: block; } .fluid-contact { padding: 0px 20px; margin-top: 0; } .navbar-nav { align-items: center; flex-direction: column; } .navbar-nav:first-child { padding-bottom: 0; } .menubox.fixed .navbar-nav { flex-direction: column; } .navbar-nav:last-child { background: none; max-width: 100%; margin: 0 !important; padding-top: 0; } .navbar .navbar-nav .nav-item .nav-link { padding: 5px 10px; color: #fff; font-size: 15px; } .adresse-block { display: block !important; max-width: 100%; padding: 40px 0px; } .adresse-block>div:first-child { width: 100%; padding: 0; } .col-contact>div:after { position: relative; display: block; bottom: 0; margin: 20px auto; left: 0; } .block-phone>div { top: 0; margin-top: 0; } .block-phone>div a { color: #fff; } .contact .block-phone>div a { display: block !important; color: #000; } .block-phone>div a:first-child { display: block; } .col-contact>div:last-child:after { display: none } .col-contact { margin: 0; width: 100%; flex-direction: column; } .text:after { display: none } .menubox:before, .menubox:after { display: none } .activemenu.menubox { transform: none; } .menubox { width: 100%; top: 0; border: none; background: var(--primary); padding: 100px 20px; position: fixed; top: 0; left: 0; width: 100%; z-index: 10; max-width: 100%; transform: translateX(-100%); transition: 0.3s ease all; } .text { margin: 0 auto; box-shadow: none; } .top { top: 50px; align-items: flex-start; left: 0; width: 100%; margin-bottom: 20px; } .col-contact p { text-align: center; justify-content: center; margin-top: 15px; display: block; } .col-contact .btn-contact { margin-bottom: 0 !important; } .col-contact>div { padding-bottom: 0; } .fluid-contact:after { display: none; } .contact { padding: 00px 00px 0px; text-align: center; height: auto; max-width: 100%; } .contact:after { position: relative; right: 0; top: 0; } .logo img { left: 0; } .logo { padding: 0px 20px; width: 100%; display: block; left: 0; max-width: 100%; background: none; position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; height: 400px; } .logo>div { box-shadow: none; padding: 0; left: 0; } .logo a { padding: 0px; margin-bottom: 0; } .top { border: 0; } .header { position: relative; top: 0; margin-top: 64px; max-height: initial; border: none; margin-bottom: 0; padding: 0; padding: 0; } .page .header { margin-bottom: 0; } .header .d-flex { top: 0px; position: relative; display: block !important; } .bloc-menu a { display: table; padding: 0; top: 11px; left: 0px; position: relative; margin: 0; width: auto; padding: 0; z-index: 9; } .btn-menu:after { display: none } .flex-block-1 h1 { left: 0; margin-top: 40px; margin-bottom: 20px; background: none; text-align: center; padding: 0; display: table; margin: 0 auto 20px; } #bloc-1:after { display: none } .bloc-menu.fixed { background: var(--primary); left: 0; top: 0; box-shadow: none; border-radius: 0; animation: none; padding: 4px; } .bloc-menu:after { content: ""; position: fixed; width: 100%; height: 63px; background: var(--primary); top: 0; left: 0; } .bloc-menu { left: 15px; position: fixed; top: 0px; height: auto; z-index: 13; display: block; } .bloc-menu.fixed .btn-menu { margin: 0; padding: 0; left: 15px; } .bloc-menu img { position: relative; left: 0; top: 0; width: 40px; filter: none !important; } .btn_scroll { display: none } .banner { width: 100%; max-width: 100%; } .block-banner>div { height: 400px; } .title-banner h3 span:before { background: var(--second) } .title-banner h3 span { justify-content: center; align-items: center; } .title-banner { position: relative; right: 0; bottom: 0; color: var(--second); display: table; margin: 15px auto 0px; text-align: center; } .banner:before { display: none } .header:before { display: none } .header:after { display: none } .top { position: fixed; top: 0; z-index: 14; margin: 0; right: 10px; left: initial; width: auto !important; max-width: max-content; } .top .insta{display:none;} .top>div:first-child { background: none; margin: 0; } .top>div span { color: #fff; display: none !important; } } @media (max-width: 767px) { .flex-block-1 h1 { left: 0; text-align: center; margin-bottom: 25px; display: block; text-align: center; max-width: 100%; font-size: 19px; } .btn-devis { top: -30px; margin: 0 auto 0px; max-width: calc(100vw - 35px); } .logo-bottom { padding: 0px; } .btn-contact { margin: 20px auto !important; padding: 7px 13px !important; } .btn-contact:after { display: none } .btn-contact span { font-size: 18px !important; margin: 0 auto; text-align: center; } .flex-block-1>div { padding: 25px 0px 0; display: block; } .block_img { margin-top: 15px; padding-left: 0; } .containerrubrique h2 { margin-bottom: 0px; } .header .banner { height: auto; width: 100%; max-width: 100%; overflow: hidden; display: block; } .block-banner>div { height: 280px; } .header .banner:after { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .link-rubrique { right: -59px; top: 47px; } .flex-block .col-12 { left: 0; top: 0; border: none; display: block; } .back2 { border: none; padding: 0px; } .flex-block-3 h2 { text-align: center } .flex-block-3 p { text-align: center } .containerrubrique { padding-bottom: 50px; } .bloc-rubrique+p {} .containerrubrique+.btn-contact { top: 0; max-width: calc(100vw - 40px); } .footerlink { text-align: center; } .bloc-rubrique .flex-block--inner .col-12 { width: 100%; flex: 100%; max-width: 100%; } .bloc-rubrique .flex-block--content { margin-bottom: 40px; } .flex-block-2 .col-12:last-child { padding: 0; justify-content: center; } .list-items { flex-direction: column; margin-bottom: 25px; } .list-items span { margin: 7px; } .flex-block { margin: 0px auto; padding: 15px 0px; left: 0px !important; border-radius: 0; } .block-text-content h2 { text-align: center } .reseaux-sociaux { max-width: 280px; margin: 40px auto 0px; } .link-reseaux:after { display: none } .flex-block-2 { padding: 0; background-size: contain; } .flex-block-2>div { padding: 0; text-align: center; } .flex-block-2 h2 { display: table; padding-right: 0; position: relative; margin-bottom: 20px; width: 100%; max-width: 100%; font-size: 18px; padding: 0px 15px 20px; text-align: center; } .bloc-services .flex-block--content .d-flex { flex-wrap: wrap; } .bloc-services .flex-block--content>div>div:last-child { left: 0; border-radius: 0px 0px 25px 25px; margin-top: -39px; padding: 50px 20px 15px; } .bloc-services .flex-block--content>div>div:first-child { width: 100%; } .link-devis { float: none; margin: 0 auto; } .flex-block-2 p { padding: 0px 15px; } .bloc-services .flex-block--content h2 { margin-top: 15px; min-height: auto; } .bloc-services_inner { margin-bottom: 0; } .container_services { margin-top: 0; padding: 25px 15px; } .flex-block-1 { box-shadow: none; padding: 0px 10px; margin-bottom: 10px; } .flex-block-1:before {} .block_flex_images_container>div a { padding: 80px 15px; } .block_flex_images_container>div { margin-bottom: 10px; width: 100%; max-width: 320px; margin: 0 auto 15px; } .block_flex_images_container { flex-direction: column; max-width: 382px; margin: 0 auto; } .block_flex_images { margin: 40px 0px 15px; } .flex-block-1 .back2 { padding: 0; } .col-contact { width: 100%; margin-bottom: 0; font-size: 15px; flex-direction: column; padding: 15px; } .col-contact p { text-align: center; border: none; } .menubox:after { display: none; } .fluid-contact { min-height: auto; margin: 0px; padding: 0px 15px; margin-bottom: 20px; margin-top: 0; padding-bottom: 15px; } .logo img { margin: 0 auto; max-width: 100%; padding: 0; padding-right: 40px; } .logo { align-items: flex-start; justify-content: center; position: relative; height: auto; width: 100%; display: block; padding: 22px 15px !important; } .contact { text-align: center; margin-bottom: 0; padding-bottom: 0; padding-top: 0; } .adresse-block { padding-top: 0; padding-bottom: 0; } .boxfooter img { margin: 0 auto 15px; display: block; max-width: 120px; } } .ukiyo { object-fit: contain !important; } .mask-menu { content: ""; width: 100%; position: fixed; height: 100%; top: 0; left: 0; } #content{ margin: 20px 0 50px; } #content .container{ width: 100%; max-width: 1440px; margin: auto; } #content .corp{ padding: 0 15px; } #content h1{ color: var(--second); font-size: 26px; text-align: center; margin: 70px 0; font-weight: 800; line-height: 30px; } #content .chapo{ background: var(--primary); color: #fff; text-align: center; font-size: 15px; padding: 30px 15px; margin: 50px auto; line-height: 25px; font-weight: 600; } #content h2{ color: var(--second); font-size: 20px; margin: 40px 0 20px; font-weight: 800; } #content h3{ display: flex; align-items: center; color: inherit; font-size: 17px; margin:10px 0 5px; font-weight: 600; } #content h3:before { color: var(--primary); margin-right: 10px; font-size: 12px; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0c8"; } #content p{ font-size: 16px; text-align: justify; } #content strong{ color: inherit; font-weight: 600; } #content ul{ padding-left: 20px; margin: 15px auto; list-style: none; } #content ul li{ font-size: 16px; margin:5px 0; } #content ul li:before { color: var(--primary); margin-right: 10px; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f054"; } #content p a, #content li a{ color: inherit; font-weight: 600; text-decoration: underline dotted 1px !important; } #content p a:hover, #content li a:hover{ text-decoration: none !important; } #content hr{ margin: 50px auto; } #content .slogan{ font-size: 20px; font-weight: 600; margin: 40px auto; text-align: center; max-width: 800px; } #content .center{text-align: center !important;} #content .imgD, #content .imgG, #content .diapoD, #content .diapoG{ display: flex; margin: 40px auto; justify-content: space-between; } #content .imgG, #content .diapoG{ flex-direction: row-reverse; } #content .imgD>div, #content .imgG>div, #content .diapoD>div, #content .diapoG>div{ width: 100% } #content .imgD>div:last-child, #content .diapoD>div:last-child{ max-width: 600px; margin-left: 30px; } #content .imgG>div:last-child, #content .diapoG>div:last-child{ max-width: 600px; margin-right: 30px; } #content .imgD>div:last-child img, #content .imgG>div:last-child img, #content .diapoD>div:last-child img, #content .diapoG>div:last-child img{ width: 100%; height: 100%; object-fit: cover; } #content .bloc-txt{ box-shadow: 0 0 10px #0002; padding: 20px; margin: 40px auto; } #content .bloc-txt>*:first-child, #content .imgD>div:first-child>*:first-child, #content .imgG>div:first-child>*:first-child, #content .diapoD>div:first-child>*:first-child, #content .diapoG>div:first-child>*:first-child{ margin-top: 0; } #content .bloc-txt>*:last-child, #content .imgD>div:first-child>*:last-child, #content .imgG>div:first-child>*:last-child, #content .diapoD>div:first-child>*:last-child, #content .diapoG>div:first-child>*:last-child{ margin-bottom: 0; } #content .diapoD .slick-list, #content .diapoG .slick-list, #content .diapoD .slick-track, #content .diapoG .slick-track{ height: 100%; } #content .breadcrumb{ background: initial; justify-content: center; font-size: 14px; margin-bottom: 30px; } #content .breadcrumb a{ color:var(--primary); font-weight: 600; text-decoration: none !important; transition: all 0.3s; } #content #foot-page{ background: var(--second); border-radius: 5px; color: #fff; padding: 30px 15px; margin: 50px auto; } #content #foot-page a{ color: inherit; } #content #foot-page p{ margin: 0; text-align: center; } .box-tel{ color: inherit !important; text-decoration: none !important; } .box-tel:hover{ color: inherit !important; text-decoration: none !important; } #content .bouton{ background: var(--primary); border: solid 3px var(--primary); border-radius: 5px; color: #fff; display: table; text-align: center; font-weight: 600; padding: 10px 30px; margin: 15px auto; transition: .5s; } #content .bouton:hover{ background: #fff; color: var(--primary); text-decoration: none; } @media(max-width: 991px){ #content .imgD, #content .imgG, #content .diapoD, #content .diapoG{ flex-direction: column-reverse; align-items: center; } #content .imgG>div:last-child, #content .imgD>div:last-child, #content .diapoG>div:last-child, #content .diapoD>div:last-child{ margin: 30px auto; width: 100% !important; max-width: 100%; height: auto !important; } }