/***** fonts et reset *****/ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Tenor+Sans&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: 600; font-size: 15px;} ul { list-style-type: none;} body { font: 400 14px/30px "Montserrat"; letter-spacing: 0.3px; color: #081630; background: #fff; position: relative;} body.active_overflow { height: 100vh; overflow: hidden;} a { text-decoration: none; color: #081630; position: relative;} img { border: none;} main { position: relative;} #wrapper { min-width: 320px; overflow: hidden; position: relative;} #wrapper * { box-sizing: border-box;} #footer { position: relative;} main .ul_list a, main p a { border-bottom: 1px solid transparent; padding-bottom: 2px; color: #d42f13;} @media (max-width:700px) { body { font-size: 13px;} } /***** scollbar *****/ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #fff;} ::-webkit-scrollbar-thumb { background-color: #081630;} /***** transition *****/ @media (min-width:1201px) { .link, .slick-arrow, :before, :after, a, a span, .logo, .header, .sub { transition: all 400ms ease-in-out;} main .ul_list a:hover, main p a:hover { border-color: #d42f13;} } /***** class *****/ .wrapper { width: 90vw; max-width: 1200px; margin: 0 auto; position: relative;} .wrapper_large { max-width: 1650px;} .clear { clear: both; display: block;} .titre_main { font: 400 32px/40px "Tenor Sans"; position: relative; color: #081630; margin-bottom: 10px;} .sous_titre { font: 500 28px/40px "Tenor Sans"; position: relative; color: #081630; margin-bottom: 15px; letter-spacing: 0;} .chapo { font: 400 15px/30px "Montserrat"; margin-bottom: 15px; letter-spacing: 0.3px;} .link { font: 400 14px/40px "Montserrat"; letter-spacing: 0.3px; display: inline-block; vertical-align: top; position: relative; padding-right: 85px; background: url(../images/arrow_right.svg) right 15px center no-repeat;} .link.light::after { display: none;} .link1 { display: inline-block; vertical-align: top; background: linear-gradient(to top, rgba(0,0,0,0) 0% 50%, #081630 50% 100%); border-radius: 30px; background-size: 100% 200%; background-position: 0 100%; font: 400 18px/56px "Montserrat"; height: 60px; border: 2px solid #081630; color: #081630; padding: 0 28px;} .link::after { content: ""; display: block; position: absolute; right: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; border: 2px solid #d42f13;} .link1.light { border-color: #fff; color: #fff; background-image: linear-gradient(to top, rgba(0,0,0,0) 0% 50%, #fff 50% 100%);} @media (min-width:1201px) { .link:hover { color: #d42f13;} .link:hover::after { transform: scale(1.2);} .link1:hover { background-position: 0 0; color: #fff;} .link1.light:hover { color: #081630;} } @media (max-width:1200px) { .wrapper { min-width: inherit;} } @media (max-width:1000px) { .wrapper { max-width: 750px;} } @media (max-width:700px) { .wrapper { width: 85vw;} .link { font-size: 12px; line-height: 34px;} .link::after { width: 30px; height: 30px;} .sous_titre { font-size: 18px; line-height: 25px; margin-bottom: 10px;} .titre_main { font-size: 24px; line-height:35px; margin-bottom: 5px;} .chapo { font-size: 13px; line-height: 30px;} .link1 { font-size: 15px; line-height: 46px; height: 50px; border-width: 1px;} } /***** header et menu *****/ .header { width: 100%; 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 { font-size: 0; letter-spacing: 0; position: absolute; left: 10px; top: 20px; transform-origin: left; transition: all 300ms ease-in-out;} .header_top { text-align: right; transition: all 300ms ease-in-out;} .header_top div { display: inline-block; vertical-align: top; position: relative; background: #d42f13; border-radius: 0 0 10px 10px; padding: 0 30px;} .header_top div::before { content: ""; display: block; position: absolute; left: 10px; right: 0; margin: auto; height: 10px; width: 2px; background: #fff; top: 50%; margin-top: -5px;} .header_top a { color: #fff; font: 400 15px/50px "Montserrat"; letter-spacing: 0; padding-left: 30px; background-position: left center; background-repeat: no-repeat; position: relative; z-index: 1; display: inline-block; vertical-align: middle;} .header_top .tel { background-image: url(../images/tel_white.svg); margin-right: 60px;} .header_top .syndic { background-image: url(../images/user.svg);} .header_right { position: relative; z-index: 120;} .header_right>span { font: 400 12px/30px "Montserrat"; letter-spacing: 0.4px; display: inline-block; vertical-align: middle;} .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: 40px;} .header_nav .menu li a { font: 400 16px/90px "Montserrat"; letter-spacing: 0; height: 90px; display: block; transition-property: color, height, line-height; color: #081630;} .header_nav .menu>li.active>a { color: #d42f13;} .header_nav .sub { width: 244px; text-align: center; position: absolute; top:100%; left: 50%; margin-left: -122px; display: block; visibility: hidden; opacity: 0; background: #d42f13; padding: 0; border-radius: 5px;} .header_nav .sub li { width: 100%; margin: 0; position: relative; z-index: 1;} .header_nav .sub li a { width: 100%; font: 400 16px/50px "Montserrat"; height: 50px; color: #fff; 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: #081630;} .sticky .header { top: -50px; box-shadow: 0 0 30px 0 rgba(32,37,43,0.18);} .sticky .header .logo { top: 37px; transform:scale(.6);} @media (min-width:1201px) { .sticky .header { background: #fff;} .header_nav .menu .vue_mobile, .menu_mobile { display: none;} .header_nav .menu>li:hover>a { color: #d42f13;} .header_nav .sub { display: block !important;} .header_nav .sub:after { width: 10px; height: 10px; position: absolute; left: 50%; top: -5px; margin: 0 0 0 -5px; transform: rotate(45deg); background: #d42f13; content: "";} .header_nav .sub li a:hover { color: #081630;} .header_top a:hover { color: #081630;} .sticky .header_nav .menu>li>a { line-height: 70px; height: 70px;} } @media (max-width:1200px) { .menu_mobile { width: 60px; height: 60px; display: inline-block; vertical-align: middle; cursor: pointer; position: relative; margin: 30px 0; transition: margin 400ms ease-in-out; z-index: 250; top: 0; right: 0;} .menu_mobile div { width: 30px; height: 2px; background: #081630; position: absolute; right: 50%; top: 50%; margin: -1px -30px 0 0;} .menu_mobile div:before { width: 30px; height: 2px; background: #081630; position: absolute; right: 0; top: 8px; content: "";} .menu_mobile div:after { width: 30px; height: 2px; background: #081630; position: absolute; right: 0; top: -8px; content: "";} .menu_mobile.active div { height: 0;} .menu_mobile.active div:before { top: 0; transform: rotate(-135deg); width: 100%;} .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 .wrapper { max-width: initial;} .header .logo { z-index: 123; top: 10px;} .header_top { z-index: 122; position: absolute; padding: 0; top: 35px; right: calc(30px + 5vw);} .header_top div { border-radius: 30px; padding: 0 30px;} .header_nav { width: 100%; height: 100vh; background: #fff; padding: 0; position: fixed; right: 100%; top :0; overflow-y: scroll; display: grid; z-index: 100; padding-top: 80px; transition: all 0ms ease-in-out 400ms;} .header_nav { width: 100%; height: 100vh; position: fixed; right: -100%; top :0; overflow-y: scroll; display: grid; align-content: flex-start; z-index: 121; background: #eee; transition: all 400ms ease-in-out 600ms;} .header_nav::-webkit-scrollbar { display: none;} .header_nav .menu { width: auto; text-align: left; padding-top: 120px; margin: 5vw 5vw; position: relative; z-index: 100; align-self: center; opacity: 0; transition: all 200ms ease-in-out 0ms;} .header_nav .menu li { width: 100%; display: block; margin: 0;} .header_nav .menu li a { width: 100%; font-size: 16px; line-height: 55px; height: 55px;} .header_nav .menu li i { width: 85px; height: 41px; display: block; margin-top: -48px; position: relative; z-index: 5; background: url("../images/arrow_down.svg") 50% no-repeat #081630; 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_nav.active { right: 0; transition-delay: 200ms;} .header_nav.active .menu { opacity: 1; transform: translateY(0); transition-delay: 600ms;} .sticky .header { top: 0; background-color: #fff;} .sticky .menu_mobile { margin: 10px 0 ;} .sticky .header_top { top: 15px; } .sticky .header .logo { top: -7px; transform:scale(.6);} } @media (max-width:1000px) { /* .menu_mobile { margin: 25px 0;} .header_top {margin: 0 -5vw; padding: 0 5vw; background: #d42f13; text-align: center;} .header_top div { padding: 0;} .header .logo { top: 60px;} .header .logo img { width: 90px;} */ } @media (max-width:700px) { .header_top { padding: 0 7.5vw; margin: 0 -7.5vw;} .header_top .tel { margin-right: 40px;} .header .logo { top: 38px;} .header .logo img { width: 70px;} .header_nav .menu { padding: 7.5vw 0;} .menu_mobile { margin: 12px 0;} .header_top div::before { display: none;} .header_top a { line-height: 45px; font-size: 14px;} .header_top { position: relative; top: 0; left: 0; right: 0;} .header_top div { border-radius: 0; width: 100vw; margin: 0 -7.5vw;} .header_top div:after { content: ""; width: 100vw; height: 45px; background-color: #d42f13; position: absolute; top: 0; right: -7.5vw; left: -7.5vw;} .header_nav .menu li i { width: 60px; height: 38px; margin-top: -44px; } .sticky .header { top: -45px;} .sticky .menu_mobile { margin: 12px 0 ;} .sticky .header_top { top: 0; } .sticky .header .logo { top: 40px; transform:scale(1);} } /***** cta *****/ .cta { display: grid; grid-template-columns: 1fr 1fr ; gap: 20px; margin: 100px 0;} .cta a { display: flex; align-items: center; padding: 15px 110px 15px 35px; min-height: 100px; height: auto; border: 2px solid #d42f13; position: relative; font: 400 20px/30px "Tenor Sans"; text-align: left; gap: 25px;} .cta a::after { content: url(../images/arrow_right.svg); display: block; line-height: 0; position: absolute; top: 50%; right: 30px; transform: translateY(-50%);} .cta a img { height: auto; } @media (min-width:1021px) { .cta a img, .cta a::after { transition: all ease-in-out 400ms;} .cta a:hover { color: #fff; background-color: #d42f13;} .cta a:hover img, .cta a:hover::after { filter: brightness(0) invert(1);} } @media (max-width:1000px) { .cta { grid-template-columns: 1fr; margin: 70px 0;} } @media (max-width:700px) { .cta { margin: 50px 0; gap: 10px;} .cta a { font-size: 16px; letter-spacing: 0; padding: 0 70px 0 10px; height: 80px; line-height: 22px;} .cta a img { left: 10px; top: 50%;} .cta a::after { content: url(../images/arrow_right_mobile.svg); right: 30px;} } /***** table plus *****/ .table_plus { position: relative; border: 2px solid #006EC7; border-bottom: none;} .table_plus .item { border-bottom: 2px solid #006EC7;} .table_plus .hide { padding: 0 30px 25px; display: none;} .table_plus .hide ul { padding-left: 20px;} .titre_plus { position: relative; letter-spacing: 0.3px; cursor: pointer; padding: 17px 80px 18px 30px; background: #fff; color: #061531; font-size: 16px; font-weight: 500; margin-bottom: 0; transition: all 400ms ease-in-out;} .titre_plus:before { width: 20px; height: 2px; background: #d42f13; position: absolute; right: 30px; top: 50%; margin-top: -1px; transition: all 400ms ease-in-out; content: "";} .titre_plus:after { width: 2px; height: 20px; background: #d42f13; position: absolute; right: 39px; top: 50%; margin-top: -10px; transition: all 400ms ease-in-out; content: "";} .titre_plus.active:after { transform: rotate(90deg); } @media (max-width:600px) { .table_plus { margin: 20px 0 50px;} .table_plus .hide { padding: 0 20px 30px;} .titre_plus { font-size: 14px; line-height: 30px; padding: 15px 55px 15px 20px;} .titre_plus:before { width: 24px; position: absolute; right: 20px; top: 50%; margin-top: -1px;} .titre_plus:after { height: 24px; position: absolute; right: 31px; top: 50%; margin-top: -12px;} } /***** footer*****/ .footer { width: 100%; position: relative; padding-top: 60px; background:#eee; color: #081630; font-size: 0;} .footer .logo { width: 120px;} .footer .bloc_footer { display: inline-block; vertical-align: top; line-height: 30px; margin: 50px 95px 0 0;} .footer .link1 { margin-top: 20px; font-size: 15px;} .footer .titre_main { color: #fff;} .footer .bloc_footer.coordonnees { margin-right: 165px; margin: 0 135px 0 0;} .footer .bloc_footer p { font-size: 15px; margin-top: 10px;} .footer .bloc_footer .sous_titre { margin-bottom: 0;} .footer .bloc_footer p span { display: block; margin-top: 75px; font-size: 15px; font-weight: 600;} .footer .bloc_footer p a { color: #081630; display: inline-block;} .footer .bloc_footer .map { background: url(../images/marker.svg) left 8px no-repeat; padding-left: 35px;} .footer .bloc_footer .tel { background: url(../images/tel_white.svg) left center no-repeat; line-height: 30px; padding-left: 35px;} .footer .bloc_footer .phone { background: url(../images/phone.svg) left center no-repeat; line-height: 30px; padding-left: 35px;} .footer .bloc_footer .mail { background: url(../images/mail.svg) left center no-repeat; line-height: 30px; padding-left: 35px;} .footer .bloc_footer .horaire { background: url(../images/horaire.svg) left 8px no-repeat; line-height: 30px; padding-left: 35px;} .footer .bloc_footer .facebook { background: url(../images/facebook_md.svg) left center / 20px no-repeat; line-height: 30px; padding-left: 35px;} .footer .bloc_footer li a { font-size: 15px; color: #fff; margin-top: 5px; display: inline-block;} .footer .rs { position: absolute; right: 0; top: 30px;} .footer .rs a { width: 50px; height: 50px; border: 2px solid #081630; display: inline-block; vertical-align: top; border-radius: 50%; margin-right: 10px;} .footer .rs .facebook { background: url(../images/facebook.svg) 50% no-repeat;} .footer .rs .scroll { background: url(../images/scrolltop.svg) center no-repeat; margin: 0;} .footer_bottom { padding: 20px 0; line-height: 0; margin-top: 70px;} .footer_bottom li { display: inline-block; font-size: 11px; line-height: 20px; margin-right: 25px; letter-spacing: 0.1px; position: relative;} .footer_bottom li a { color: #081630;} .footer_bottom li:after { width: 1px; height: 9px; content: ""; position: absolute; right: -13px; top: 5px; background: #081630;} .footer_bottom li:last-child:after { display: none;} .toponweb { display: block; z-index: 85; position: absolute; 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, #fff 0%, #fff 50%, #081630 50%, #081630 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: #d42f13;} .footer .rs a:hover { border-color: #081630;} .footer .rs .facebook:hover { background: url(../images/facebook_white.svg) 50% no-repeat #081630;} .footer .rs .scroll:hover { background: url(../images/scrolltop_white.svg) center no-repeat #081630; margin: 0;} .toponweb img { transition: all ease-in-out 400ms;} .toponweb:hover span { background-position: 0 0;} .toponweb:hover img { filter: brightness(0) invert(1);} } @media (max-width:1200px) { .rs.fixed { display: none;} .footer .bloc_footer { margin-right: 0;} .footer .bloc_footer.footer_link { display: none;} .footer .bloc_footer.coordonnees { margin-right: 40px;} .toponweb { position: absolute;} } @media (max-width:1000px) { .footer .bloc_footer { display: block; margin: 0;} .footer .bloc_footer p { margin: 0 0 10px;} .footer_bottom { margin-top: 80px;} .footer .wrapper:after { display:none} } @media (max-width:1000px) { .footer .bloc_footer { display: block;} .footer .bloc_footer.coordonnees { margin: 0;} } @media (max-width:700px) { .footer { padding-top: 50px;} .footer .logo { width: 90px;} .footer .titre_main { margin-bottom: 10px;} .footer .link1 { margin-top: 10px;} .footer .logo img { width: 240px;} .footer .bloc_footer { margin: 0; line-height: 28px;} .footer .bloc_footer .sous_titre {margin-bottom: 5px;} .footer .bloc_footer p { margin-bottom: 0; font-size: 13px;} .footer .bloc_footer p span { margin-top: 25px;} .footer .bloc_footer.coordonnees p { margin-bottom: 10px;} .footer .bloc_footer .facebook { width: 40px; height: 40px; font-size: 0; letter-spacing: 0; padding: 0; background-size: contain; margin: 25px 0 15px;} .footer .rs { position: static; margin-top: 30px;} .footer_bottom { margin-top: 45px; padding: 0 0 20px;} .footer_bottom li { display: block; margin-right: 0; line-height: 25px; font-size: 11px;} .footer_bottom li:after { display: none;} .footer .bloc_footer .link { position: relative; text-transform: none; height:50px;border-radius: 5px;line-height: 50px; padding: 0 20px; display: block; max-width: 300px; margin: 0 auto;} .toponweb span { background: #fff;} } .link-moins,.link-plus { cursor:pointer; color: #d42f13; border-bottom: 1px solid transparent;} .textMore { display: none; margin-top: 40px;} .textMore p:not(:first-of-type) { margin-top: 15px;} @media (min-width:1200px) { .link-moins:hover,.link-plus:hover { border-color: #d42f13;} }