/***** fonts et reset *****/ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Syne:wght@400..800&display=swap'); :root { --main-color: #0F307A; --main-color-dark: #0F224E; --second-color: #E58830; --white: #FDFBF9; --beige: #F9F3EB; --grey: #454545; --black: #000; --body_font: 400 16px / 26px "Syne", sans-serif; --body_font-mobile: 400 14px / 28px "Syne", sans-serif; --titre-main: 600 75px/85px "Fraunces", serif; --titre-main-mobile: 600 75px/85px "Fraunces", serif; --sous-titre: 600 32px/40px "Fraunces", serif; --sous-titre-mobile: 600 28px/34px "Fraunces", serif; } 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; box-sizing: border-box;} strong, b { font-weight: 600;} ul { list-style-type: none;} body { font: var(--body_font); letter-spacing: 0.5px; color: var(--black); background: var(--white); position: relative; overflow-x: hidden;} body.active_overflow { height: 100vh; overflow: hidden;} a { text-decoration: none; color: var(--second-color); position: relative;} img { border: none; } main { position: relative;} #wrapper { min-width: 320px; width: 100%; overflow-x: hidden;} #wrapper * { box-sizing: border-box;} #footer { position: relative;} @media (max-width:600px) { body { font-size: 14px; line-height: 28px;} } /***** scollbar *****/ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #fff;} ::-webkit-scrollbar-thumb { background-color: var(--second-color);} /***** transition *****/ @media (min-width:1201px) { .link, :before, :after, a, a span, .logo, .header, .sub { transition: all 400ms ease-in-out;} } /***** class *****/ .wrapper { width: 90vw; max-width: 1200px; margin: 0 auto; position: relative; clear: both;} .wrapper_large { max-width: 1600px;} .clear { clear: both; display: block;} .anchor { position: absolute; top: -100px; left: -100px;} .titre_main { font: var(--titre-main); position: relative; color: var(--main-color); margin-bottom: 15px; letter-spacing: 0.5px;} .titre_main + .sous_titre { margin-top: -15px;} .sous_titre { font: var(--sous-titre); position: relative; color: var(--main-color); margin-bottom: 15px; letter-spacing: 0.2px;} .sous_titre span { color: var(--second-color);} .titre { font: 600 20px/24px "Syne"; color: var(--second-color); margin-bottom: 10px;} .chapo { font: 400 16px/32px "Syne"; margin-bottom: 0;} .link { font: 500 16px/50px "Syne"; font-weight: 500; height: 50px; display: inline-block; vertical-align: top; color: var(--white); padding: 0 30px; background: var(--second-color); text-align: center; border-radius: 50px; border: 1px solid var(--second-color);} .link_second { color: var(--main-color); border: 1px solid var(--main-color); background-color: transparent;} @media (min-width:1201px) { .link:hover { background-color: transparent; color: var(--second-color);} .link_second:hover { color: var(--white); background-color: var(--second-color); border-color: var(--second-color);} } @media (max-width:1450px) { .titre_main { font-size: 55px; line-height: 65px;} } @media (max-width:1200px) { .wrapper { min-width: inherit;} .titre_main { font-size: 45px; line-height: 55px;} } @media (max-width:1000px) { .wrapper { max-width: 750px;} .titre_main { font-size: 36px; line-height: 36px; margin-bottom: 15px;} } @media (max-width:600px) { #wrapper::before { display: none;} .wrapper { width: 85vw;} .titre { font-size: 16px; line-height: 26px;} .sous_titre { font-size: 22px; line-height: 32px; margin-bottom: 10px;} .chapo { font-size: 14px; line-height: 28px;} .link { font-size: 14px; background-color: var(--second-color); color: var(--white); border-color: var(--second-color); } } .ul_list { margin: 15px 0; padding: 5px 0 0 0;} .ul_list li { padding: 5px 0 5px 40px; position: relative; background: url(../images/check.svg) left top 3px no-repeat; background-size: 25px; margin-bottom: 5px;} /***** header et menu *****/ .header { width: 100%; font-size: 0; line-height: 0; text-align: right; position: fixed; left: 0; top: 0; transition: all 400ms ease-in-out; background: var(--white); border-radius: 0 0 50px 50px; z-index: 200;} .header .link { position: absolute; right: 0; top: 25px; z-index: 99; line-height: 40px; height: 40px;} .header .tel { display: block; position: absolute; right: 0; top: 0; z-index: 41; font: italic 700 14px/60px "Barlow"; text-transform: uppercase; color: #fff; padding-left: 30px; background: url(../images/tel.svg) left center no-repeat;} .header .logo { position: absolute; left: 0; top:30px; line-height: 0; z-index: 90; transform-origin: left;} .header .logo img { display: inline-block; vertical-align: top;} .header_nav { width:100%; display:block; position:relative; z-index:40;} .header_nav .menu_top { position: relative; transition:margin 400ms ease-in-out; padding-right: 190px; padding-top: 25px;} .header_nav .menu_top>* { display: inline-block; vertical-align: top;} .header_nav .menu_top li { display: inline-block; position: relative; top:0; padding-left: 40px;} .header_nav .menu_top li a { color: var(--black); font: var(--body_font); font-size: 14px; line-height: 40px; letter-spacing: 0.4px;} .header_nav .menu_top li:after { content: ""; position: absolute; top: 14px; left: 19px; width: 1px; height: 12px; background: #00000048;} .header_nav .menu_top li:first-child::after { display:none;} .header_nav .menu_top li.active a { color:var(--second-color);} .header_nav .menu { display:inline-block; padding-bottom: 10px; transition: all ease-in-out 400ms;} .header_nav .menu>li { display:inline-block; vertical-align:middle; margin-left: 30px; position: relative;} .header_nav .menu>li.static { position: static; } .header_nav .menu li:first-child { margin: 0;} .header_nav .menu li a { font: 500 18px/50px "syne"; font-size: 18px; color: var(--black); letter-spacing: 0.4px; height: 50px; display: block; transition-property: all;} .header_nav .menu>li.active>a { color:var(--second-color);} .header_nav .menu .sub li.active a { color: var(--second-color) !important;} .header_nav .sub { width: 300px; margin-left: -150px; text-align: left; position: absolute; top: 100%; left: 50%; display: block; padding: 20px 40px; background: transparent; border-radius: 0;} .header_nav .sub li { width: 100%; margin: 0;} .header_nav .sub li a { width: 100%; font: 400 18px/42px "Poppins"; height: 44px; color: var(--second-color); display: block; background: url("../images/arrow_green.svg") 100% 50% no-repeat; } .header_nav .menu .sub li.active a { color: var(--main-color);} .header_right .tel { position: relative; z-index: 100;} /* sous-menu full width */ .header_nav .sub.large { width: 80vw; /*margin: 0 50%;*/ transform: translateX(-50%); left: 0; top: 100%; padding: 0; overflow: hidden;} .header_nav .sub.large .wrap { display: grid; grid-template-columns: 1fr 1fr; padding: 0; max-width: 1200px; margin: 0 auto;} .header_nav .sub.large li { text-align: left;} .header_nav .sub.large li a { color: #fff;} .header_nav .sub.large .right { padding: 40px 40px 40px 60px; } .header_nav .sub.large .left { padding: 40px 60px 40px 40px; background-color: var(--main-color); } .header_nav .sub.large .right .sous_titre, .header_nav .sub.large .left .sous_titre { font-size: 25px; font-family: "EB Garamond"; background-image: none; } .header_nav .sub.large .right { background-color: var(--main-color); position: relative;} .header_nav .sub.large .colonnes li a { font: 300 14px/42px "Poppins"; height: 44px; display: block; width: 100%; position: relative; transition: all .2s ease-in-out; padding: 0;} .header_nav .sub.large .colonnes { display: block; } .sticky .header { box-shadow: 0 0 30px 0 rgba(32, 37, 43, 0.08);} @media (min-width:1201px) { .header_nav .menu .vue_mobile, .menu_mobile { display: none;} .header_nav .menu>li:hover>a, .header .tel:hover, .link_top .tel:hover, .header_nav li a:hover { color: var(--second-color);} .header_nav .sub.large:after { display: none} .header_nav .menu>li:hover>a { color: var(--second-color);} .header_nav .menu_top li a:hover { color: var(--second-color) !important;} .sticky .header { top: -70px;} .sticky .header_nav .menu { padding: 0;} .sticky .header_nav .menu li a { line-height: 100px; height: 100px;} .sticky .header_nav .sub li a { font: 500 18px/40px "syne"; height: 40px;} .sticky .header .logo { top: 80px;} .header .logo img { transition: all ease-in-out 400ms;} .header_nav .menu li:hover .sub { opacity: 1; visibility: visible; z-index: 999;} .header_nav .sub { visibility: hidden; opacity: 0;} } @media (max-width:1300px) and (min-width:1000px){ .header .logo { transform: scale(0.8); transform-origin: left center;} } @media (max-width:1200px) { .sticky .header { top: 0;} .header { z-index: 201; padding: 0; } .header .logo { top: 50%; transform: translateY(-50%);} .header .link { display: none;} .header .tel { top: 15px; right: 60px;} .menu_mobile { width:60px; height:60px; display:inline-block; vertical-align:middle; cursor:pointer; position:relative; z-index:60; margin: 15px -15px; transition:height 400ms ease-in-out;} .menu_mobile div { width:30px; height:2px; background:var(--second-color); position:absolute; right:50%; top:50%; margin:-1px -15px 0 0;} .menu_mobile div:before { width:100%; height:2px; background:var(--second-color); position:absolute; right:0; top:9px; content:"";} .menu_mobile div:after { width:100%; height:2px; background:var(--second-color); position:absolute; right:0; top:-9px; content:"";} .menu_mobile.active div { height:0;} .menu_mobile.active div:before { top:0; transform:rotate(45deg);} .menu_mobile.active div:after { top:0; transform:rotate(-45deg);} .header_nav { width:100%; height:100vh; background: var(--white); position:fixed; right:0; top:-120%; overflow-y:scroll; display: flex; flex-direction: column; padding: 180px 0 0; z-index:50; transition:top 400ms ease-in-out 400ms;} .header_nav::-webkit-scrollbar { display:none;} .header_nav .menu_top { text-align: left; display: table; padding: 40px 0 0 0; order: 1; transition:opacity 400ms ease-in-out 0ms; opacity:0; position: relative; background: none; padding-bottom: 0; max-width:750px;margin:0 auto;width:90vw;} .header_nav .menu_top:before { content: ""; width: 50px; height: 2px; top: 20px; left: 0; position: absolute; background-color: var(--black); } .header_nav .menu_top::after { display: none; } .header_nav .menu_top li { display: block; margin: 0; padding: 0;} .header_nav .menu_top li a { line-height: 40px;} .header_nav .menu_top li:after { display:none;} .header_nav .menu { max-width: 750px; margin: 0 auto; width: 90vw; text-align:left; padding:0; transition:opacity 400ms ease-in-out 0ms; opacity:0;} .header_nav .menu li { width:100%; display:block; margin:0; background: none; padding: 0;} .header_nav .menu>li>a { line-height:50px; font-size: 18px; letter-spacing:0.4px; height:auto; background-position:100% 50%;} .header_nav .menu li i.active:after { opacity:1;} .header_nav .menu li i { width: 50px; background-color: transparent; height: 41px; display: block; margin-top: -48px; position: relative; z-index: 5; float: right;} .header_nav .menu li i::after { content: ""; display: block; position: absolute; transform-origin: center; transition: all ease 400ms; width: 100%; height: 100%; background: url(../images/arrow_down.svg) no-repeat center} .header_nav .menu li a { background: none;} .header_nav .menu li i.active::after{ transform: rotate(180deg);} /* sous-menu simple */ .header_nav .menu .sub { width: 100%; position: relative; left: auto; top: auto; padding: 15px 0; margin: 0; opacity: 1; display: none; visibility: visible; z-index: 150;} .header_nav .menu .sub li { width: 100%;} .header_nav .menu .sub li a { width: 100%; font-size: 16px; line-height: 50px; height: 50px; font-weight: 500; text-align: left;} .header_nav .sub.large { width: 100%; position: relative; left: auto; top: auto; padding: 0; margin: 20px 0; transform: none; background: var(--main-color); opacity: 1; display: none; z-index: 150; border-radius: 0;} .header_nav .sub.large .wrap { grid-template-columns: 1fr;} .header_nav .sub.large .right:after { display: none;} .header_nav .sub.large .right, .header_nav .sub.large .left { padding: 35px 40px;} .header_nav .sub.large .right .sous_titre, .header_nav .sub.large .left .sous_titre { font-size: 22px; } .header_nav .sub.large .colonnes { grid-gap: 70px;} .header_nav.active { top:0; transition-delay: 0;} .header_nav.active .link { opacity:1; transition-delay:1200ms;} .header_nav.active .menu_top { opacity:1; transition-delay:1000ms; background: none;} .header_nav.active .menu { opacity:1; transition-delay:800ms;} } @media (max-width:1000px) { .header { border-radius: 0 0 15px 15px;} } @media (max-width:600px) { .menu_mobile { margin: 5px -15px;} .menu_mobile div { width:20px; height:2px;} .menu_mobile div:before { top:6px;} .menu_mobile div:after { top:-6px; } .header { padding: 0; border-radius: 0 0 15px 15px;} .header .wrapper { width: 85vw;} .header .logo img { width: 160px;} .header_nav { padding: 150px 7.5vw 0; align-content: baseline;} .header_nav .menu_top, .header_nav .menu { width: 100%;} .header_nav .menu_top li a { font-size: 14px;} .header_nav .menu .sub li a { font-size: 14px; line-height: 32px; height: 34px;} .header_nav .sub.large .right, .header_nav .sub.large .left { padding: 25px 7.5vw; /*max-height: 280px; overflow-y: scroll;*/} .header_nav .sub.large .right .sous_titre, .header_nav .sub.large .left .sous_titre { font-size: 18px; } .header_nav .sub.large .colonnes { grid-template-columns: 1fr; grid-gap: 0;} } /***** footer*****/ .footer { width: 100%; position: relative; color: var(--black); font-size: 0; padding-bottom:50px;} .footer .wrapper { background-color: var(--beige); border-radius: 50px; padding: 50px 90px 30px 50px;} .footer .bloc_footer.coordonnees { margin-right: 100px;} .footer .bloc_footer { display: inline-block; vertical-align: top; line-height: 30px; font-size: 15px;} .footer .logo { margin-bottom: 20px;} .footer .titre { color: var(--main-color); font-size: 22px; margin-bottom: 5px; font-weight: 700;} .footer .bloc_footer p { font-size: 15px;} .footer .autres { margin-top: 40px; font-size: 15px;} .footer .autres span { display: inline-block; vertical-align: middle; margin-right: 17px;} .footer .autres img { display: inline-block; vertical-align: middle; margin-right: 17px;} .footer .bloc_footer p a { color: var(--black); text-transform: none; display: inline-block; border: none;} .footer .bloc_footer li a { color: var(--black); padding-left: 20px; background: url(../images/list.svg) left center no-repeat;} .footer .bloc_footer li { margin-bottom: 10px;} .footer .rs { position: relative; margin-top: 30px;} .footer .rs a { display: inline-block; vertical-align: top; margin-right: 20px; width: 50px; height: 50px; border-radius: 50%;} .footer .rs .facebook { background: url(../images/facebook.svg) 50% no-repeat var(--white);} .footer .rs .message { background: url(../images/mail.svg) 50% no-repeat var(--white);} .footer .rs .scroll { background: url(../images/scrolltop.svg) center no-repeat var(--white); margin: 0;} .footer_bottom { padding: 20px 0; line-height: 0; margin-top: 40px; position: relative; border-top: 1px solid rgba(48, 48, 48, 0.12);} .bloc_footer .horaire { margin-bottom: 30px;} .footer_bottom li { display: inline-block; font-size: 12px; line-height: 20px; margin-right: 35px; letter-spacing: 0.8px; position: relative; color: #454545;} .footer_bottom li a { color: #454545;} .footer_bottom li:last-child:after { display: none;} .toponweb { display: block; z-index: 85; position: absolute; right: 0; bottom:0; transition: bottom 400ms ease-in-out;} .toponweb span { width: auto;height:60px; display: block;padding: 20px 0; } .toponweb img { width: 74px; height: auto; display: block; margin: 0 auto;} .toponweb.show { bottom: 0;} .footer_grid { display: grid; grid-template-columns: auto auto; justify-content: space-between;} @media (min-width:1201px) { .footer .bloc_footer p a:not(.link):hover, .footer_bottom li a:hover, .footer .bloc_footer li a:hover { color: var(--second-color);} .rs a:hover { background-color:var(--main-color) !important;} .toponweb:hover span { background-position: 0 0;} } @media (max-width:1200px) { .toponweb { position: absolute;} .footer .bloc_footer { margin-right: 40px;} } @media (max-width:1000px) { .footer { padding: 50px 0 0; background-color: var(--beige); border-radius: 20px 20px 0 0;} .footer .footer_grid { grid-template-columns: 1fr;} .footer .bloc_footer.coordonnees { display: grid; margin-bottom: 30px;} .footer .rs { grid-area: 2; margin: 0 0 30px;} .footer .bloc_footer p { margin: 0;} .footer_bottom { margin-top: 50px; padding: 10px 0;} .footer_bottom ul { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0 25px; } .footer_bottom ul li:first-child { grid-area: 1 / 1 / 2 / 3;} .footer .wrapper { padding: 0;} } @media (max-width:600px) { .footer { padding-top: 30px;} .footer .titre { font-size: 20px;} .footer .bloc_footer.coordonnees { margin-right: 0; margin-bottom: 25px;} .footer .bloc_footer .mail, .footer .bloc_footer .phone { padding-left: 30px;} .footer .autres { margin: 0 0 45px;} .footer .autres span { display: block; margin-bottom: 10px;} .rs a { width: 50px; height: 50px;} .footer .rs { position: static; margin-top: 0;} .footer .bloc_footer p { font-size: 14px; line-height: 26px;} .footer_bottom { text-align: left; margin-top: 20px; padding: 10px 0;} .footer_bottom li { display: block; margin-right: 0; line-height: 25px; font-size: 11px;} .footer_bottom li:after { display: none;} .footer .logo, .footer .rs { text-align: center;} .footer_bottom li { font-size: 11px; line-height: 21px;} } .link-moins,.link-plus { cursor:pointer; color: var(--second-color);} .textMore { display: none; margin-top: 40px;} .textMore p:not(:first-of-type) { margin-top: 15px;} @media (min-width:1201px) { .link-moins:hover,.link-plus:hover { color: var(--second-color);} } @media (max-width:700px) { .textMore { margin-top: 20px;} } .cta { position: relative; display: block; text-align: center; margin:100px 0; padding: 45px 50px; border-radius: 40px; background-color: var(--beige); font: 400 24px/40px "Syne";} .titre_cta { font: 700 32px/40px "Fraunces"; color: var(--main-color);} .cta a { font-family: "Fraunces"; font-weight: 600;} .cta::after { content: url(../images/after_cta.svg); position: absolute; left: 50%; bottom: -15px; line-height: 0; transform: translateX(-50%);} .bandeau { position: relative; padding: 60px 0 50px; text-align: center;} .bandeau .link { margin-top: 15px;} @media (min-width:1201px) { .cta a:hover { color: var(--main-color);} } @media (max-width:1000px) { .cta { margin: 70px 0; border-radius: 20px;} .bandeau { padding: 70px 0 50px;} } @media (max-width:600px) { .cta { font-size: 16px; line-height: 24px; padding: 45px 20px; margin: 40px 0;} .cta:last-child { margin-bottom: 60px;} .titre_cta { font-size: 20px; line-height: 34px; margin-bottom: 5px;} .cta::after { transform: scale(0.71) translateX(-50%); transform-origin: left center;} .bandeau { padding: 30px 0 50px;} .bandeau .link { margin-top: 5px;} } .poste { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 50px; align-items: center;} .poste .item { position: relative; background-color: var(--white); padding: 25px 20px; border-radius: 40px 0 40px 40px; color: var(--black); text-align: center; line-height: 23px; transition: all ease-in-out 400ms;} .poste .item .content { display: grid; align-content: center; min-height: 75px;} .poste .item:before { content: url(../images/button_arrow_small.svg); position: absolute; right: -10px; top: -10px; line-height: 0;} .poste .item::after { content: url(../images/after_poste.svg); position: absolute; bottom: -7px; line-height: 0; left: 50%; transform: translateX(-50%); opacity: 0;} .poste .s_titre { color: var(--main-color); font: 700 18px/ 25px "Syne"; transition: all ease-in-out 400ms;} @media (min-width:1200px) { .poste .item:hover:before { transform: scale(1.2);} .poste .item:hover:after { opacity: 1;} .poste .item:hover .s_titre { color: var(--second-color);} .poste .item:hover { padding: 35px 20px;} } @media (max-width:1200px) { .poste { gap: 20px;} } @media (max-width:1000px) { .poste .item { border-radius: 20px 0 20px 20px;} .poste { align-items: normal;} .poste .item { display: grid; align-items: center; padding: 12px 20px;} .poste .s_titre { font-size: 16px; line-height: 22px; margin-bottom: 5px;} } @media (max-width:768px) { .poste { grid-template-columns: 1fr 1fr; gap: 30px;} .poste .item:nth-child(1) { grid-area: 1 / 1 / 3 / 3;} } @media (max-width:600px) { .poste { grid-template-columns: 1fr;} .poste .item:nth-child(1) { grid-area: auto;} } .bg_blue { position: relative; padding: 100px 0; background-color: var(--main-color-dark);} .after_bottom { background: var(--white); height: 30px; width: 100%; position: relative; top: -30px; left: 0; border-radius: 50px 50px 0 0; z-index: 20; margin-bottom: -60px;} .after_top { content: ""; background: var(--white); height: 30px; width: 100%; position: relative; bottom: -30px; left: 0; border-radius:0 0 50px 50px; z-index: 20; margin-top: -60px;} @media (max-width:1000px) { .after_bottom { border-radius: 20px 20px 0 0;} .after_top { border-radius: 0 0 20px 20px;} .bg_blue { padding: 70px 0 80px;} } .table_plus { position: relative; margin: 50px 0 100px;} .table_plus .sous_titre { margin-bottom: 25px;} .table_plus .item:not(:last-of-type){ border-bottom: none;} .table_plus .hide { padding: 15px 50px 25px 40px; display: none;} .table_plus .hide p { margin-bottom: 15px;} .table_plus .hide :last-child { margin-bottom: 0;} .table_plus .hide ul { padding-left: 20px;} .titre_plus { position: relative; letter-spacing: 0.4px; cursor: pointer; padding: 20px 80px 20px 30px; background:var(--main-color); color: var(--white); font-size: 18px; line-height: 35px; font-weight: 500; margin-bottom: 10px; transition: all 400ms ease-in-out; border-radius: 10px;} .titre_plus:before { width: 25px; height: 25px; background: url("../images/plus.svg") 50% no-repeat; position: absolute; right: 30px; top: 50%; margin-top: -12px; transition: all 400ms ease-in-out; content: "";} .titre_plus.active:before { transform: rotate(135deg); } @media (max-width:1000px) { .table_plus .hide { padding: 40px 0;} .table_plus { margin: 40px 0;} } @media (max-width:700px) { .table_plus { margin: 30px 0;} .table_plus .sized { margin-bottom: 20px;} .table_plus .hide { padding: 15px 20px 25px; line-height: 25px;} .titre_plus { font-size: 16px; line-height: 30px; padding: 20px 75px 20px 20px; } }