/***** fonts et reset *****/ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'); body, ul, li, ol, form, h1, h2, h3, h4, h5, h6, div, span, p { padding:0; margin:0; border:0; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none;} article, aside, dialog ,figcaption, figure, footer, header, hgroup, main, nav, section { display: block;} input, textarea { -webkit-appearance: none; -ms-appearance: none; appearance: none; -moz-appearance: none; -o-appearance: none; border-radius: 0;} * { outline: none;} strong, b { font-weight: 700;} ul { list-style-type: none;} body { font: 400 15px/30px "Raleway"; letter-spacing: 0.5px; color: #000000; background: #fff; position: relative;} body.active_overflow { height: 100vh; overflow: hidden;} a { text-decoration: none; color: #25353f; position: relative;} img { border: none;} main { position: relative; z-index: 10;} #wrapper { min-width: 320px; overflow: hidden; position: relative;} #wrapper * { box-sizing: border-box;} #footer { position: relative; z-index: 15;} main p>a { color: #1985a1; border-bottom: 1px solid transparent; padding-bottom: 2px;} @media (max-width:760px) { main:before { display: none;} } @media (max-width:600px) { body { font-size: 13px; line-height: 30px;} } /***** scollbar *****/ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #fff;} ::-webkit-scrollbar-thumb { background-color: #1985a1;} /***** transition *****/ @media (min-width:1201px) { .link, .slick-arrow, :before, :after, a, a span, .logo, .header, .sub { transition: all 400ms ease-in-out;} main p>a:hover { border-color: #1985a1;} } /***** class *****/ .wrapper { width: 90vw; max-width: 1200px; margin: 0 auto; position: relative;} .wrapper_large { max-width: 1400px;} .titre_main { font: 700 48px/54px "Noto sans"; position: relative; color: #fff; margin-bottom: 10px; letter-spacing: 0.3px;} .sous_titre { font: 600 28px/45px "Noto sans"; position: relative; color: #1985a1; margin-bottom: 15px; letter-spacing: 0.2px;} .chapo { font: 400 14px/30px "Raleway"; margin-bottom: 15px;} .link { font: 600 12px/60px "Noto sans"; text-transform: uppercase; letter-spacing: 1px; height: 60px; display: inline-block; vertical-align: top; color: #ffffff; padding: 0 30px; background: linear-gradient(to top, #1985a1 0% 50%, #2e2e2e 50% 100%); background-size: 100% 200%; background-position: 0 100%; } .link2 { background-image: linear-gradient(to top, #ffffff 0% 50%, #2e2e2e 50% 100%); color: #1985a1;} @media (min-width:1201px) { .link:hover { background-position: 0 0; color: #fff;} .link.devis:hover { color: #fff;} } @media (max-width:1200px) { .wrapper { min-width: inherit;} } @media (max-width:1000px) { .wrapper { max-width: 750px;} .sous_titre { font-size: 22px; line-height: 30px; margin-bottom: 10px;} .titre_main { font-size: 30px; line-height:32px;} .stitre { font-size: 16px; line-height: 26px;} } @media (max-width:600px) { .wrapper { width: 85vw;} } /***** header et menu *****/ .ul_list { margin-bottom: 15px; padding: 5px 0 0 0;} .ul_list li { padding: 5px 0 4px 25px; position: relative; color: #231f20; } .ul_list li:before { content: ""; width: 8px; height: 8px; background-color: #1985a1; position: absolute; left: 0; top: 15px;} /***** header et menu *****/ .header { width: 100%; background: #fff; font-size: 0; line-height: 0; text-align: right; position: fixed; left: 0; top: 0; z-index: 180; transition: all 400ms ease-in-out;} .header .logo { position: absolute; left: 0; transition: all ease-in-out 400ms; top: 0;} .header .logo img { display: block; margin: 0 auto;} .header .logo_texte { display: block; font: 700 28px/38px "Noto sans"; color: #2e2e2e; margin-top: 10px; transition: all ease-in-out 400ms;} .header .btn_tel { display: inline-block; height: 60px; vertical-align: middle; font: 500 12px/60px "Noto sans"; color: #fff; padding: 0 30px;} .header .btn_tel span { display: inline-block; padding-left: 35px; background:url(../images/tel.svg) no-repeat center left; color: #fff;} .header_top .btn_calendar { display: inline-block; vertical-align: middle; height: 60px; width: 60px; background: url(../images/calendar.svg) no-repeat center #1985a1; margin-right: 10px;} .header_nav { display: inline-block; vertical-align: middle; padding-right: 0; z-index: 50;} .header_nav .menu { position: relative;} .header_nav .menu li { display: inline-block; vertical-align: top; position: relative; margin-left: 55px;} .header_nav .menu li a { font: 600 16px/80px "Noto sans"; color: #232323; letter-spacing: 0.6px; display: block; transition-property: color, height, line-height;height: 80px;} .header_nav .menu>li.active>a { color: #1985a1;} .header_nav .sub { width: 280px; text-align: center; position: absolute; top:100%; left: 50%; margin-left: -140px; display: block; visibility: hidden; opacity: 0; background: #fff; padding: 0;} .header_nav .sub li { width: 100%; margin: 0; position: relative; z-index: 1;} .header_nav .sub li a { width: 100%; font: 600 14px/50px "Noto sans"; letter-spacing: 1px; height: 50px; color: #202020; padding: 0;} .header_nav .menu li:hover .sub { opacity: 1; visibility: visible; z-index: 999; top: 100%;} .header_nav .menu .sub li.active a { color: #1985a1;} .sticky .header { background: #fff;} @media (min-width:1201px) { .header_nav .menu .vue_mobile, .menu_mobile { display: none;} .header_nav .menu>li:hover>a { color: #1985a1;} .header_top .top_menu li:hover a { color: #1985a1;} .header_nav .sub { display: block !important;} .header_nav .menu>li:hover>a { color: #1985a1;} .header_nav .sub li a:hover { color: #1985a1;} .header_top a:hover { color: #1985a1;} .header_top .btn_calendar:hover { background-color: #202020; } .sticky .header { top: -65px; box-shadow: 0 0 10px 0 rgb(0 0 0 / 15%);} .sticky .header .logo { transform: scale(0.55); transform-origin: center left; top: 36px;} } @media (max-width:1300px) { .header_nav .menu li { margin-left: 30px;} } @media (max-width:1200px) { .header_top { display: inline-block; vertical-align: middle; z-index: 120; position: relative;} .menu_mobile { width: 60px; height: 60px; display: inline-block; vertical-align: middle; cursor: pointer; position: relative; margin: 10px -10px 10px 20px; transition: margin 400ms ease-in-out; z-index: 100;} .menu_mobile div { width: 30px; height: 2px; background: #1985a1; position: absolute; right: 50%; top: 50%; margin: -1px -20px 0 0;} .menu_mobile div:before { width: 100%; height: 2px; background: #1985a1; position: absolute; right: 0; top: 8px; content: "";} .menu_mobile div:after { width: 100%; height: 2px; background: #1985a1; position: absolute; right: 0; top: -8px; content: "";} .menu_mobile.active div { height: 0;} .menu_mobile.active div:before { top: 0; transform: rotate(-135deg);} .menu_mobile.active div:after { top: 0; transform: rotate(-45deg);} .header { transition: box-shadow 400ms ease-in-out, height 400ms ease-in-out 400ms, top 400ms ease-in-out 0, background 400ms ease-in-out 0; padding: 0;} .header .logo { z-index: 120; transition: all 400ms ease-in-out; transform: scale(0.6) ; top: 0; transform-origin: left top; } .header_nav { width: 100%; height: 100vh; position: fixed; right: -100%; top :0; overflow-y: scroll; display: grid; align-content: flex-start; z-index: 100; transition: all 400ms ease-in-out 600ms; background-color: #fff; padding-top: 120px; } .header_nav::-webkit-scrollbar { display: none;} .header_nav .menu { width: auto; text-align: left; position: relative; z-index: 100; align-self: center; opacity: 0; transition: all 200ms ease-in-out 0ms;margin: 0 5vw 5vw;} .header_nav .menu li { width: 100%; display: block; margin: 0;} .header_nav .menu li a { line-height: 40px; height: 40px; font-size: 15px;} .header_nav .menu li i { width: 85px; height: 41px; display: block; margin-top: -48px; position: relative; z-index: 5; background: url("../images/scroll_down.svg") 50% no-repeat #fff; float: right; border-radius: 8px;} .header_nav .menu li i.active { transform: rotate(180deg);} .header_nav .menu li i.active { transform: rotate(180deg);} .header_nav .menu .sub { width: auto; visibility: visible; position: relative; left: auto; top: auto; margin: 15px 0; opacity: 1; display: none; text-align: left; padding: 20px 5vw; border-radius: 5px;} .header_nav .menu .sub li a { line-height: 43px; height: 45px;} .header_top .tel { display: block; margin-top: 30px; margin-left: 0; opacity: 0; transition: all 200ms ease-in-out 0ms;} .header_nav.active { right: 0; transition-delay: 200ms;} .header_nav.active .menu, .header_nav.active .top_menu, .header_nav.active .header_top .tel { opacity: 1; transform: translateY(0); transition-delay: 600ms;} .sticky .header { box-shadow: 0 0 10px 0 rgb(0 0 0 / 15%);} } @media (max-width:1000px) { .menu_mobile { margin-left:10px;} } @media (max-width:600px) { .header .btn_tel { height: 50px; width: 50px; padding: 0; background: url(../images/tel.svg) no-repeat center #1985a1; } .header .btn_tel span { display: none; } .header_top .btn_calendar { height: 50px; width: 50px; margin-right: 5px;} .header .logo { transform: scale(0.5);} } @media (max-width:400px) { .header .logo { top: 15px; transform: scale(0.4);} } /***** faq *****/ .table_plus { position: relative; margin: 60px 0 110px; text-align: right;} .table_plus>a { color: #1985a1;} .table_plus .item { text-align: left;} .table_plus .sous_titre { margin-bottom: 25px;} .table_plus .item:not(:last-of-type){ border-bottom: none;} .table_plus .hide { padding: 40px; display: none;} .table_plus .hide ul { padding-left: 20px;} .titre_plus { position: relative; cursor: pointer; padding:20px 80px 20px 40px; background: #e8f3f5; color: #202020; font-size: 15px; font-weight: 400; margin-bottom: 10px; transition: all 400ms ease-in-out; letter-spacing: 0.5px;} .titre_plus:before { width: 30px; height: 30px; background: url("../images/arrow_bottom.svg") 50% no-repeat; position: absolute; right: 30px; top: 50%; margin-top: -15px; transition: all 400ms ease-in-out; content: "";} .titre_plus.active { background-color: #1985a1; color: #fff;} .titre_plus.active:before { transform: rotate(180deg); filter: brightness(0) invert(1); } @media (min-width:1201px) { .table_plus>a:hover { color: #1985a1;} } @media (max-width:1000px) { .table_plus .hide { padding: 40px 0;} .table_plus { margin: 50px 0;} } @media (max-width:600px) { .table_plus { margin: 20px 0 50px; } .table_plus .sized { margin-bottom: 20px;} .table_plus .hide { padding: 20px 0;} .titre_plus { padding: 16px 55px 16px 30px; font-size: 14px; } .titre_plus:before { width: 24px; height: 24px; right: 15px; margin-top: -12px;} } /***** footer*****/ .footer { width: 100%; position: relative; padding-top: 90px; background:#2e2e2e; color: #fff; font-size: 0;} .footer .bloc_footer { display: inline-block; vertical-align: top; line-height: 30px;} .footer .bloc_footer.coordonnees { margin-right: 120px; margin-top: 0;} .footer .bloc_footer p { font-size: 16px; margin-bottom: 10px;} .footer .bloc_footer p a { color: #fff; text-transform: none; display: inline-block;} .footer .link_phone { margin-top: 20px; background-image: linear-gradient(to top, #1985a1 0% 50%, #fff 50% 100%);; } .footer .link_phone span { padding-left: 30px; background: url(../images/tel.svg) no-repeat center left; transition: all ease-in-out 400ms; color: #fff;} .footer .sous_titre { color: #fff; margin-bottom: 30px;} .footer .bloc_footer { margin-top: 70px; display: inline-block;vertical-align: top;} .footer .bloc_footer li { padding-left: 25px; background: url(../images/list.svg) no-repeat top 11px left; margin-bottom: 5px;} .footer .bloc_footer li a { color: #fff; font-size: 15px; line-height: 34px; display: block; letter-spacing: 0.6px; } .footer .rs { position: absolute; right: 0; top: 0;} .footer .rs a { width: 60px; height: 60px; display: inline-block; vertical-align: top; margin-right: 10px; } .footer .rs .facebook { background: url(../images/facebook.svg) 50% no-repeat #1985a1;} .footer .rs .linkedin { background: url(../images/linkedin.svg) 50% no-repeat #1985a1;} .footer .rs .scroll { background: url(../images/scrolltop.svg) center no-repeat #1985a1; margin: 0;} .footer_bottom { padding: 20px 0; line-height: 0; margin-top: 55px;} .footer_bottom li { display: inline-block; font-size: 11px; line-height: 20px; margin-right: 30px; position: relative;} .footer_bottom li a { color: #fff;} .footer_bottom li:after { width: 1px; height: 9px; content: ""; position: absolute; right: -15px; top: 5px; background: #fff;} .footer_bottom li:last-child:after { display: none;} .toponweb { display: block; z-index: 85; position: fixed; right: 0; bottom: -65px; transition: bottom 400ms ease-in-out;} .toponweb span { width: auto;height:60px; display: block;padding: 20px; background: linear-gradient(to left, #ffffff 0%, #ffffff 50%, #1985a1 50%, #1985a1 100%); background-size: 200% 100%; background-position: 100% 0;} .toponweb img { width: 74px; height: auto; display: block; margin: 0 auto; } .toponweb.show { bottom: 0;} @media (min-width:1201px) { .footer .bloc_footer p a:hover, .footer .bloc_footer li a:hover, .footer_bottom li a:hover { color: #1985a1;} .footer .rs a:hover { background-color:#fff;} .footer .rs .facebook:hover { background-image: url(../images/facebook_blue.svg);} .footer .rs .linkedin:hover { background-image: url(../images/linkedin_blue.svg);} .footer .rs .scroll:hover { background-image: url(../images/scrolltop_blue.svg);} .toponweb:hover span { background-position: 0 0;} .toponweb:hover img { filter:brightness(0) invert(1);} .footer .link_phone:hover span { color: #1985a1; background-image: url(../images/tel_blue.svg);} } @media (max-width:1200px) { .footer .bloc_footer { margin-right: 80px;} .footer .bloc_footer:not(.coordonnees) { display: none;} .footer .bloc_footer.coordonnees { margin-right: 0;} .toponweb { position: absolute;} } @media (max-width:1000px) { .footer { padding-top: 80px;} .footer .bloc_footer { display: block; margin: 0;} .footer .bloc_footer p { margin: 0 0 10px; font-size: 13px; line-height: 23px;} .footer .sous_titre { margin-bottom: 15px;} .footer_bottom { margin-top: 80px;} .footer .wrapper:after { display:none} } @media (max-width:600px) { .footer { padding-top: 50px; } .footer .bloc_footer { margin: 0;} .footer .rs { position: static; margin-top: 30px;} .footer_bottom { text-align: left; margin-top: 35px; padding: 0 0 30px;} .footer_bottom li { display: block; margin-right: 0; line-height: 25px; font-size: 10px;} .footer_bottom li:after { display: none;} } @media (max-width:350px) { .footer .logo { width: 150px;} } .link-moins,.link-plus { cursor:pointer; color: #1985a1;} .textMore { display: none; margin-top: 20px;} .textMore p:not(:first-of-type) { margin-top: 15px;} @media (min-width:1201px) { .link-moins:hover,.link-plus:hover { color: #1985a1;} } @media (max-width:600px) { .textMore { margin-top: 20px;} }