/***** fonts et reset *****/ @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,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: 500; font-size: 16px;} ul { list-style-type: none;} body { font: 400 14px/30px "Poppins"; letter-spacing: 0.7px; color: #231f20; background: #fff; position: relative;} body.active_overflow { height: 100vh; overflow: hidden;} a { text-decoration: none; color: #231f20; 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: 0;} @media (max-width:700px) { body { font-size: 13px; line-height: 30px;} } /***** scollbar *****/ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #fff;} ::-webkit-scrollbar-thumb { background-color: #f47d17;} /***** transition *****/ @media (min-width:1201px) { .link, .slick-arrow, :before, :after, a, a span, .logo, .header, .sub { transition: all 300ms ease-in-out;} } /***** class *****/ .wrapper { width: 90vw; max-width: 1200px; margin: 0 auto; position: relative;} .wrapper_large { max-width: 1600px;} .clear { clear: both; display: block;} .anchor { position: absolute; left: 0; top: -140px;} .titre_main { font: 700 40px/50px "Poppins"; color: #231f20; text-transform: uppercase; letter-spacing: 0.5px; position: relative; margin-bottom: 20px; } .titre_main span { color: #f47d17;} .sous_titre { font: 500 18px/30px "Poppins"; letter-spacing: 0.7px; position: relative; color: #231f20; margin-bottom: 15px;} .titre { font: 700 16px/24px "Poppins"; letter-spacing: 1px; position: relative; color: #f47d17; margin-bottom: 10px; text-transform: uppercase;} .chapo { font: 400 14px/28px "Poppins"; margin-bottom: 15px;} .chapo span { display: block; margin-top: 15px;} .link { font: 700 14px/60px "Poppins"; letter-spacing: 1px; text-transform: uppercase; height: 60px; border: none; display: inline-block; vertical-align: middle; color: #fff; padding: 0 30px; background: linear-gradient(to top, #f47d17 0%, #f47d17 50%, #1f1f1f 50%, #1f1f1f 100%); background-size: 100% 200%; background-position: 0 100%; cursor: pointer; text-align: center; margin: 20px 0 0 0;} .link span { padding-left: 45px; position: relative;} .link span img { position: absolute; left: 0; top: 50%; transform: translateY(-50%);} .link.sticked { position: fixed; left:30px; transform:rotate(90deg); transform-origin:left; top:35vh; margin: 0; z-index: 100; background-image: linear-gradient(to top, #f47d17 0%, #f47d17 50%, #000 50%, #000 100%); visibility: hidden; opacity: 0;} .link.sticked.show { opacity: 1; visibility: visible;} .bloc_short { max-width: 900px; margin: 0 auto; position: relative;} .read_more { display: inline-block; color: #f47d17; cursor: pointer; transition: color 300ms ease-in-out;} .hide { display: none;} .texte p a { color: #ef7b17; border-bottom: 1px solid transparent;} .grid_link { display: grid;grid-template-columns: 1fr 1fr;gap: 10px; margin: 100px 0;} .grid_link .link { line-height: 80px; height: 80px; margin: 0;} .ul_list { margin-bottom: 15px;} .ul_list li { padding: 10px 0 10px 45px; position: relative; background: url("../images/checklist.svg") 0 42% no-repeat; background-size: 30px auto; margin-top: 5px;} .ul_list.list_atouts li { padding: 5px 0 5px 25px; margin-top: 5px; background: none;} .ul_list.list_atouts li:before { position: absolute; left: 0; top: 7px; width: 5px; height: 20px; background: #f47d17; content: "";} @media (min-width:1201px) { .texte p a:hover { border-color: #ef7b17;} .link:hover { background-position: 0 0; color: #fff;} .about .texte .read_more:hover { color: #000;} } @media (max-width:1200px) { .wrapper { min-width: inherit;} .titre_main { font-size: 30px; line-height: 40px;} .link.sticked { display: none;} } @media (max-width:1000px) { .wrapper { max-width: 750px;} .titre_main { font-size: 26px; line-height: 36px;} .grid_link { grid-template-columns: 1fr; margin: 80px 0;} } @media (max-width:700px) { .wrapper { width: 86vw;} .anchor { top: -110px;} .titre_main { font-size: 22px; line-height: 30px; margin-bottom: 10px;} .sous_titre { font-size: 16px; line-height: 26px; margin-bottom: 15px;} .chapo { font-size: 13px; line-height: 24px; margin-bottom: 10px;} .chapo span { margin-bottom: 10px;} .link { font-size: 12px; line-height: 50px; height: 50px; padding: 0 25px; display: block; text-align: center;} .grid_link { margin: 50px 0;} .grid_link .link { line-height: 60px; height: 60px;} .grid_link .link img { display: none;} .grid_link .link span { padding: 0;} } /***** header *****/ .header { width: 100%; font-size: 0; line-height: 0; letter-spacing: 0; position: fixed; left: 0; top: 0; text-align: right; z-index: 100; transition: all 400ms ease-in-out;} .header .wrapper { text-align: right;} .logo { display: inline-block; text-align: right;} .logo span { font: 700 16px/24px "Poppins"; text-transform: uppercase; color: #fff; letter-spacing: 1px; margin-top: 5px; display: block;} .logo img { width: 100%; height: auto; display: block; opacity: 1; transition: all 300ms ease-in-out;} .header .logo { position: absolute; left: 0; top: 50%; z-index: 140; margin-top: -30px;} .header .logo span { color: #231f20;} .header .tel { font: 600 13px/75px "Poppins"; text-transform: uppercase; letter-spacing: 0.8px; padding-left: 30px; color: #231f20; display: inline-block; background: url("../images/tel_orange.svg") 0 49% no-repeat; vertical-align: middle;} .top_header { padding-right: 100px;} .top_header li { position: relative; display: inline-block; vertical-align: top; margin-left: 45px;} .top_header li a { font: 600 13px/50px "Poppins"; text-transform: uppercase; letter-spacing: 0.8px; color: #231f20; display: inline-block;} .top_header li.active a { color: #f47d17;} .menu_mobile { width: 80px; height: 80px; background: #fff; cursor: pointer; display: inline-block; vertical-align: middle; margin: 40px 0 40px 30px; position: relative; z-index: 120; transition: all ease-in-out 400ms;} .menu_mobile div { width: 40px; height: 2px; background: #1f1f1f; position: absolute; left: 20px; top: 50%; margin-top: -1px; transition: height 0ms ease 300ms;} .menu_mobile div:before { width: 30px; height: 2px; background: #1f1f1f; position: absolute; right: 0; top: 8px; content: "";} .menu_mobile div:after { width: 40px; height: 2px; background: #1f1f1f; position: absolute; right: 0; top: -8px; content: "";} .menu_mobile.active div { background: #1f1f1f; height: 0; transition-delay: 0ms;} .menu_mobile.active div:before { background: #1f1f1f; width: 30px; top: 0; right: 7px; transform: rotate(45deg);} .menu_mobile.active div:after { background: #1f1f1f; width: 30px; top: 0; right: 7px; transform: rotate(-45deg);} .header_nav .main>li>a { font: 700 25px/60px "Poppins"; text-transform: uppercase; letter-spacing: 0.7px; color: #fff; display: block;} .header_nav .main>li>a.serv { background: url("../images/arrow_next_orange.svg") right center no-repeat;} .header_nav .main>li.active>a { color: #f47d17;} .header_nav .small { margin-top: 50px;} .header_nav .small li a { font: 400 16px/40px "Poppins"; letter-spacing: 0.6px; color: #fff; display: inline-block;} .header_nav .small li.active>a { color: #f47d17;} .header .contact { display: grid; grid-template-columns: 1fr 1fr; height: 100%; width: 100%; align-items: center; background: #fff;} .header .contact .photo { position: relative; height: 100%;} .header .contact .photo img { width: 100%; height: 100%; object-fit: cover; display: block;} .header .contact .photo span { width: 100%; position: absolute; left: 0; bottom: 0; z-index: 20; color: #fff; text-align: center; font-size: 16px; line-height: 28px; padding: 100px 0 30px 0; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);} .header .contact .texte { padding: 60px; position: relative;} .header .contact .sous_titre { font-size: 22px; margin-bottom: 25px; font-weight: 700; text-transform: uppercase;} .header .contact p { font-size: 13px; line-height: 25px; margin-top: 15px; letter-spacing: 0.6px;} .header .contact p a { display: inline-block; border: none; color: #231f20;} .header .contact .address { padding-left: 35px; background: url("../images/localisation.svg") 0 4px no-repeat;} .header .contact .phone { padding-left: 35px; background: url("../images/tel_orange.svg") 1px 5px no-repeat;} .header .contact .email { padding-left: 35px; background: url("../images/mail.svg") 0 7px no-repeat;} .header .contact .rs { margin-top: 30px; font-size: 0; line-height: 0; letter-spacing: 0;} .header .contact .rs a { width: 60px; height: 60px; display: inline-block; vertical-align: top; margin-right: 10px; background: #f47d17;} .header .contact .rs a img { width: 60px; height: 60px; display: block; object-fit: none; transition: filter 300ms ease-in-out;} .header_nav { width: 100%; height: 100vh; position: fixed; left: 0; top: 0; overflow-y: scroll; display: grid; z-index: 100; background: #231f20; padding: 140px 0; text-align: left;} .header_nav::-webkit-scrollbar { display: none;} .header_nav .row { max-width: 1400px; width: 85vw; display: grid; grid-template-columns: 360px auto; grid-gap: 80px; justify-content: space-between; align-items: center; position: relative; margin: 0 auto; align-self: center;} .header_nav .sub { width: calc(100% - 440px); height: 100%; z-index: 30; position: absolute; right: 0; top: 0; padding: 60px 80px; display: grid; grid-template-columns: 1fr 1fr; background: #fff; opacity: 0; visibility: hidden; transition: all 400ms ease-in-out;} .header_nav .sub li.sous_titre { font-size: 15px; font-weight: 400;} .header_nav .sub li a { font: 400 15px/60px "Poppins"; text-transform: uppercase; letter-spacing: 0.6px; color: #111; display: block; padding-left: 20px;} .header_nav .sub li img { height: 30px; width: auto; display: inline-block; } .header_nav .sub li.active a { color: #f47d17;} /* animation menu */ .header_nav { left: -100%; transition: all 400ms ease-in-out 600ms;} .header_nav .main { opacity: 0; margin-top: 40px; transition: all 400ms ease-in-out 200ms;} .header_nav .small { opacity: 0; margin-top: 80px; transition: all 400ms ease-in-out 200ms;} .header_nav .contact { clip-path: inset(0 100% 0 0); transition: all 400ms ease-in-out 200ms;} .header.active .logo { background: url("../images/logo_color.svg") 50%;} .header_nav.active { left: 0; transition-delay: 200ms;} .header_nav.active .main { opacity: 1; margin-top: 0; transition-delay: 700ms;} .header_nav.active .small { opacity: 1; margin-top: 40px; transition-delay: 700ms;} .header_nav.active .contact { clip-path: inset(-1px -1px -1px -1px); transition-delay: 800ms;} @media (min-width:1201px) { .header { background: #fff;} /* menu au scroll */ #homepage.sticky .top_header li a { color: #231f20;} #homepage.sticky .menu_mobile div { background: #231f20; transition: 300ms ease-in-out;} #homepage.sticky .menu_mobile div:before{ background: #231f20;} #homepage.sticky .menu_mobile div:after { background: #231f20;} #homepage.sticky .header .tel { background: url("../images/tel_orange.svg") 0 48% no-repeat;} #homepage .header { background-color: transparent;} #homepage .header .logo span { filter: brightness(1) invert(0); color: #fff;} .header .logo .show_mobile { display: none;} #homepage .header .tel { color: #fff; background-image: url("../images/tel_orange.svg")} /* menu au scroll */ #homepage.sticky .header { background-color: #1f1f1f; box-shadow: none;} .sticky .menu_mobile { margin: 20px 0 20px 30px;} .sticky .header { box-shadow: 0 0 30px 0 rgb(0 0 0 / 10%);} .header .tel:hover { color: #f47d17;} .header_nav .main>li>a:after { width: 200px; height: 100%; position: absolute; left: 100%; top: 0; cursor: default; content: "";} .header_nav .main>li:hover .sub { opacity: 1; visibility: visible; z-index: 200;} .header_nav .sub li.overview { display: none;} .top_header li a:hover, .header_nav .main li:hover>a, .header_nav .small li a:hover, .header_nav .sub li a:hover { color: #f47d17;} .menu_mobile:hover div:before { width: 40px; } .menu_mobile:hover div:after { width: 30px; } .menu_mobile.active:hover div { height: 0;} .menu_mobile.active:hover div:before { width: 30px;} .menu_mobile.active:hover div:after { width: 30px;} #homepage .header .tel:hover { color: #f47d17; background-image: url("../images/tel_orange.svg");} #homepage .top_header li a:hover { color: #f47d17;} } @media (max-width:1600px) { .header_nav .small li a { font-size: 16px; line-height: 40px;} .header_nav .sub { padding: 60px;} .header_nav .sub li.sous_titre { font-size: 18px;} .header_nav .sub li a { font-size: 14px; line-height: 35px;} .header .contact .sous_titre { font-size: 18px; margin-bottom: 20px;} } @media (max-width:1450px) { .header_nav { padding: 120px 0 80px 0;} .header_nav .row { grid-template-columns: 240px 720px; align-self: start;} .header_nav .main:after { width: 720px;} .header_nav .sub { width: 720px; padding: 50px;} .header .contact .texte { padding: 50px;} } @media (max-width:1200px) { /***** header *****/ .header ::-webkit-scrollbar { display: none;} /***** menu *****/ .menu_mobile { margin: 20px 0 20px 30px;} .menu_mobile div { transition: none;} .header { background: #1a1a1a;} .header .tel { background-image: url(../images/tel_orange.svg); color: #fff;} .header .logo span { color: #fff;} .header .logo .show_desk { display: none;} .header_nav .row { width: 90vw; grid-template-columns: 35% 55%; align-self: center;} .header_nav .main>li i { width: 100%; height: 60px; position: relative; float: right; margin-top: -60px; content: "";} .header_nav .main>li i:after { width: 10px; height: 16px; background: url("../images/arrow_menu.svg") 50% no-repeat; position: absolute; right: 0; top: 50%; margin-top: -8px; content: "";} .header_nav .main>li i.active:after { filter: grayscale(100) brightness(100);} .header_nav .main>li>a { background: none;} .header_nav .sub { width: 55%; display: block; padding: 40px 50px;} .header_nav .sub.active { opacity: 1; visibility: visible;} .header_nav .sub ul:nth-child(2) { margin-top: 20px;} .header .contact { grid-template-columns: 1fr;} .header .contact .photo span { font-size: 14px; line-height: 26px; padding: 100px 0 20px 0;} .header .contact .rs { margin: 0; position: absolute; right: 50px; top: 50%; transform: translateY(-50%);} .header .contact .rs a { display: block; margin: 10px 0;} } @media (max-width:1000px) { .sticky .menu_mobile, .menu_mobile { background: none; margin: 10px -20px 10px 30px;} .menu_mobile div, .menu_mobile div:before, .menu_mobile div:after { background: #fff !important;} .header_nav { padding: 150px 0 100px 0;} .header_nav .row { max-width: 750px; grid-template-columns: 1fr; grid-gap: 5vw; align-self: start;} .header_nav .main>li i.active:after { transform: rotate(90deg)} .header_nav .sub { width: 100%; padding: 30px 5vw; opacity: 1; visibility: visible; position: static; transition: none; margin: 15px 0; display: none;} .header .contact .texte { padding: 40px 5vw;} } @media (max-width:700px) { .header .logo { width: 160px; margin-top: -20px;} .logo span { font-size: 9px; margin-top: 0;} .sticky .menu_mobile, .menu_mobile { width: 70px; height: 70px; margin: 0 -10px 0 -10px;} .menu_mobile div:before { width: 20px;} .header .tel { width: 50px; height: 80px; padding: 0; background-position: center; font-size: 0; z-index: 200;} .header .link { width: 46px; height: 46px;} .header_nav { padding: 100px 0 50px 0;} .header_nav .row { width: 85vw; grid-gap: 7.5vw;} .header_nav .main>li>a { font-size: 22px; line-height: 50px;} .header_nav .main>li i { height: 50px; margin-top: -50px;} .header_nav .small li a { font-size: 14px; line-height: 35px;} .header_nav .sub { padding: 1px 0;} .header_nav .sub li.sous_titre { font-size: 15px; line-height: 23px; margin-bottom: 10px;} .header_nav .sub li a { font-size: 13px; line-height: 30px;} .header_nav .sub li { margin: 15px 0;} .header .contact .sous_titre { font-size: 16px; margin-bottom: 15px;} .header .contact .photo span { font-size: 13px; line-height: 24px; padding: 80px 0 20px 0;} .header .contact .texte { padding: 25px 7.5vw;} .header .contact p { font-size: 12px; line-height: 24px;} .header .contact p a { display: inline-block;} .header .contact .address { padding-left: 35px; background: url("../images/localisation.svg") 0 4px no-repeat;} .header .contact .phone { padding-left: 35px; background: url("../images/tel_orange.svg") 1px 5px no-repeat;} .header .contact .email { padding-left: 35px; background: url("../images/mail.svg") 0 7px no-repeat;} .header .contact .rs { margin-top: 25px; position: static; transform: none;} .header .contact .rs a { display: inline-block; margin: 0 10px 0 0;} .sticky .header_nav { border-width: 70px;} } .btn { display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr; justify-content: center;} .full_screen { position: relative; } .full_screen .bg_img { position: absolute; width: 100vw; height: 100%; object-fit: cover;} .full_screen:after { content: ""; width: 100%; height: 100%; display:block; background-color: #000; opacity: 0.5; position: absolute; top: 0; bottom: 0; left: 0; right: 0;} .full_screen .wrapper { padding: 240px 0 320px; z-index: 80; text-align: center;} .full_screen .wrapper .favicon { margin: 40px auto 25px; display: block; width: 80px; } .full_screen .wrapper .sous_titre { font-size: 25px; line-height: 36px; color: #fff; text-align: center; margin: 0 auto; } .full_screen .wrapper .btn { grid-template-columns: 200px 200px; } @media (min-width:1201px) { .header .contact p a:hover { color: #f47d17;} } @media (max-width:1200px) { } @media (max-width:700px) { .full_screen .wrapper .btn { grid-template-columns: 1fr 1fr;} } .faq { position: relative; margin: 100px auto;} .faq .titre_main { font-size: 90px; letter-spacing: 1.4px; line-height: 80px; transform: rotate(-90deg) translateX(-100%); width: max-content; color: #eeeeee; margin-bottom: 0; position: absolute; top: -10px; left: -5px; transform-origin: left top;} .faq .titre_main>span { color: #eeeeee; font-size: 30px;} .faq .show_hide { padding-left: 120px;} @media (max-width:1000px) { .faq { margin: 70px 0;} } @media (max-width:700px) { .faq { margin: 50px 0; min-height: 0;} .faq .titre_main { display: none;} .faq .show_hide { padding: 0;} } /***** show hide *****/ .show_hide { position: relative; margin: 30px 0; min-height: 290px;} .show_hide .item { background: #fff; border-top: 2px solid #f47d17; overflow: hidden;} .show_hide .titre { position: relative; cursor: pointer; padding: 27px 80px 29px 0; font: 500 16px/24px "Poppins"; margin: 0; color: #000; transition: color 400ms ease-in-out; text-transform: initial;} .show_hide .titre:after { width: 30px; height: 30px; background: url(../images/plus.svg) 50% no-repeat; border-radius: 50%; position: absolute; right: 0; top: 50%; margin-top: -15px; content: "";} .show_hide .titre.active { color: #f47d17;} .show_hide .titre.active:after { transform: rotate(45deg);} .show_hide .hide { padding: 10px 0 30px; display: none; color: #000;} .show_hide .hide p { margin-bottom: 10px;} .show_hide .hide p a { color: #f47d17; border-color: transparent;} .show_hide .item:last-of-type { border-bottom: 2px solid #f47d17; } @media (min-width:1201px) { .show_hide .titre:hover { color: #f47d17;} } @media (max-width:1200px){ .show_hide { margin: 25px 0; min-height: 270px;} .show_hide .hide { padding: 30px;} } @media (max-width:1000px){ .show_hide { margin: 20px 0;} } @media (max-width:700px){ .show_hide { margin: 15px 0; min-height: inherit; } .show_hide .titre { padding: 10px 60px 10px 0; line-height: 26px; min-height: 80px; display: grid; align-items: center;} .show_hide .hide { padding: 18px 20px 20px 0;} } /***** moving photos *****/ .moving_photos { margin: 100px 0 80px; width: 100%; overflow: hidden; padding-top: 15px; font-size: 0; line-height: 0; letter-spacing: 0;} .moving_photos .row { width: 9000px; display: inline-block; vertical-align: top;} .moving_photos .row .item { display: inline-block; vertical-align: top; animation: sliding 30s linear infinite;} .moving_photos .row .item img { width: auto; height: 500px; display: inline-block; vertical-align: top; position: relative; transition: all 400ms ease-in-out; padding-left: 20px;} @keyframes sliding { 0% { transform: translateX(0);} 100% { transform: translateX(-100%);} } @media (min-width:1201px) { .moving_photos .row .item img:hover { transform: translateY(-15px);} } @media (max-width:1200px) { .moving_photos { padding-top: 0;} .moving_photos .row .item img { height: 450px;} } @media (max-width:700px) { .moving_photos { margin: 0;} .moving_photos .row .item img { height: 280px; padding-left: 10px;} } @media (max-width:400px) { .moving_photos .row .item img { height: 240px;} } /***** footer *****/ .footer { position: relative; background: #231f20; font-size: 0; padding-top: 100px;} .footer .logo { position: relative; margin-bottom: 30px;} .footer .logo img { margin-bottom: 0 !important;} .footer .sous_titre { font-weight: 700; font-size: 20px; color: #fff; text-transform: uppercase; margin-bottom: 30px;} .footer .bloc_footer { display: inline-block; vertical-align: top; position: relative;} .footer .coordonnees img { display: block; margin-bottom: 40px;} .footer .coordonnees p { font-size: 14px; margin-top: 10px; color: #fff;} .footer .coordonnees p a { padding-left: 30px; color: #fff;} .footer .coordonnees p.localisation { background: url("../images/localisation.svg") 0 4px no-repeat; padding-left: 30px; } .footer .coordonnees p a.tel { background: url("../images/tel_orange.svg") 0 48% no-repeat;} .footer .coordonnees p a.email { background: url("../images/mail.svg") 1px 48% no-repeat;} .footer ul.bloc_footer { margin: 155px 0 0 115px;} .footer ul.bloc_footer li { position: relative; margin-top: 10px; line-height: 0;} .footer ul.bloc_footer li:after { width: 4px; height: 12px; content: ""; position: absolute; left: 0; top: 6px; background: #f47d17;} .footer ul.bloc_footer li a { font-size: 14px; line-height: 25px; padding: 0 0 0 18px; display: inline-block; color: #fff;} .footer .rs { position: absolute; right: 0; top: 0; font-size: 0; line-height: 0; letter-spacing: 0;} .footer .rs a { width: 60px; height: 60px; display: inline-block; vertical-align: top; margin-right: 10px; background: #f47d17;} .footer .rs a img { width: 60px; height: 60px; display: block; object-fit: none; transition: filter 300ms ease-in-out;} .footer .rs .scroll { margin: 0; background-color: #7b7d80;} .footer .rs .scroll img { height: 58px;} .footer_bottom { padding: 20px 0; line-height: 0; margin-top: 95px; position: relative; color: #fff;} .footer_bottom li { display: inline-block; font-size: 11px; line-height: 20px; margin-right: 30px; letter-spacing: 0.8px; position: relative;} .footer_bottom li:after { width: 1px; height: 8px; content: ""; position: absolute; right: -16px; top: 6px; background: #f47d17;} .footer_bottom li:last-child:after { display: none;} .footer_bottom li a { color: #fff;} .toponweb { display: block; z-index: 85; position: absolute; right: 0; bottom: 0; transition: bottom 300ms ease-in-out;} .toponweb span { width: auto; height: 60px; display: block; padding: 20px; background: linear-gradient(to left, #7a7c7f 0% 50%, #000 50% 100%); background-size: 200% 100%; background-position: 100% 0;} .toponweb img { width: 76px; height: auto; display: block; margin: 0 auto; transition: all 300ms ease-in-out;} .site_efc { display: inline-block; position: absolute; margin: 170px 0 0 130px;} .site_efc p { font-size: 14px; color: #fff; margin: -5px auto;} .site_efc .link { background-image: linear-gradient(to top, #f47d17 0%, #f47d17 50%, #000 50%, #000 100%);} @media (min-width:1201px) { .footer .bloc_footer p a:hover, .footer .bloc_footer li a:hover { color: #f47d17;} .footer_bottom li a:hover { color: #f47d17;} .footer .rs a:hover { background: #000;} .toponweb:hover span { background-position: 0 0;} .toponweb:hover img { filter: invert(0);} .site_efc a:hover img:last-child { transform: translateX(15px);} } @media (max-width:1200px) { .footer ul.bloc_footer { display: none;} .footer_bottom { margin-top: 60px;} .site_efc { right: 220px;} } @media (max-width:1000px) { .footer_bottom { margin-top: 100px;} .site_efc { right: 0;} .site_efc img:last-of-type { display: none;} } @media (max-width:700px) { .footer { padding-top: 45px; text-align: center;} .footer .sous_titre { font-size: 16px; margin-bottom: 15px;} .footer .logo { display: none;} .footer .bloc_footer { width: 100%; padding: 0;} .footer .coordonnees img { margin: 0 auto 20px auto; width: 140px;} .footer .coordonnees p { line-height: 23px; font-size: 13px;} .footer .coordonnees p.localisation { padding: 0; background: none; margin-bottom: 25px;} .footer .coordonnees p a { padding: 0; background: none;} .footer .coordonnees p a.tel, .footer .coordonnees p a.email, .footer .coordonnees p.horaire { font-size: 13px; line-height: 50px; height: 50px; max-width: 300px; margin-left: auto; margin-right: auto; background: #f47d17; margin-top: 10px; display: block;} .footer .rs { position: static; margin: 40px auto;} .footer .rs a { width: 46px; height: 46px;} .footer .rs a img { width: 46px; height: 46px;} .footer .rs .scroll img { height: 44px;} .site_efc { display: block; position: static; max-width: none; margin: 25px 0 0;} .site_efc a { padding: 0 25px; line-height: 50px; max-width: 300px; margin: 30px auto 0;} .site_efc p { font-size: 13px; line-height: 23px;} .footer_bottom { margin-top: 30px; padding: 0 0 85px; color: #fff; text-align: center;} .footer_bottom:before { display: none;} .footer_bottom li { display: block; margin: 0; font-size: 11px; line-height: 26px;} .footer_bottom li:after { display: none;} .footer_bottom li a { color: #fff;} .toponweb { position: absolute;} .toponweb span { height: auto; background: #7a7c7f;} } .link-moins,.link-plus { cursor:pointer; color: #f47d17;} .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: #f47d17;} }