/***** fonts *****/ @import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,400;0,500;0,600;0,700&display=swap'); @font-face { font-family: 'Typold Extended Bold'; font-style: normal; font-weight: normal; src: local('Typold Extended Bold'), url('../webfont/typoldextendedbold.woff') format('woff'); } @font-face { font-family: 'EMMELINE Regular'; font-style: normal; font-weight: normal; src: local('EMMELINE Regular'), url('../webfont/emmeline-regular.woff') format('woff'); } .titre-60 { font: 400 clamp(3.5rem, 2.6102rem + 3.8898vw, 6.5rem)/1.2 var(--fontTitre); display: block; margin-bottom: 25px;} .titre-50 { font: 400 clamp(2.5rem, 1.7585rem + 3.2415vw, 5rem)/1.2 var(--fontTitre); display: block; margin-bottom: 25px;} .titre-45 { font: 400 clamp(2.5rem, 1.9068rem + 2.5932vw, 4.5rem)/1.2 var(--fontTitre); display: block; margin-bottom: 25px;} .titre-40 { font: 400 clamp(2.2rem, 1.6661rem + 2.3339vw, 4rem)/1.2 var(--fontTitre); display: block; margin-bottom: 25px;} .titre-35 { font: 400 clamp(2rem, 1.5551rem + 1.9449vw, 3.5rem)/1.2 var(--fontTitre); display: block; margin-bottom: 25px;} .titre-30 { font: 400 clamp(1.8rem, 1.4441rem + 1.5559vw, 3rem)/1.2 var(--fontTitre); display: block; margin-bottom: 25px;} .titre-25 { font: 400 clamp(1.6rem, 1.3331rem + 1.1669vw, 2.5rem)/1.2 var(--fontTitre); display: block; margin-bottom: 25px;} .titre-20 { font: 400 clamp(1.6rem, 1.422rem + 0.778vw, 2.2rem)/1.2 var(--fontTitre); display: block; margin-bottom: 25px;} .titre-18 { font: 400 clamp(1.6rem, 1.4814rem + 0.5186vw, 2rem)/1.2 var(--fontTitre); } .titre-14 { font: 400 clamp(1.3rem, 1.211rem + 0.389vw, 1.6rem)/1.2 var(--fontTitre); } .body-40 { font: 400 clamp(2.2rem, 1.6661rem + 2.3339vw, 4rem)/1.2 var(--fontBody);} .body-30 { font: 400 clamp(1.8rem, 1.4441rem + 1.5559vw, 3rem)/1.2 var(--fontBody);} .body-25 { font: 400 clamp(1.6rem, 1.3331rem + 1.1669vw, 2.5rem)/1.2 var(--fontBody);} .body-20 { font: 400 clamp(1.6rem, 1.422rem + 0.778vw, 2.2rem)/1.2 var(--fontBody);} .body-18 { font: 400 clamp(1.6rem, 1.4814rem + 0.5186vw, 2rem)/1.2 var(--fontBody); } .body-16 { font: 400 clamp(1.4rem, 1.2814rem + 0.5186vw, 1.8rem)/1.2 var(--fontBody); } .body-14 { font: 400 clamp(1.3rem, 1.211rem + 0.389vw, 1.6rem)/1.2 var(--fontBody); } .script-60 { font: 400 clamp(3.5rem, 2.6102rem + 3.8898vw, 6.5rem)/1.2 var(--fontScript); } .script-80 { font: 400 clamp(3.5rem, 2.1653rem + 5.8347vw, 8rem)/1.2 var(--fontScript); } .bold { font-weight: 600} .color-0 { color: #252526;} .color-1 { color: #c7b890;} @media (max-width:1200px) { .titre-60, .titre-50, .titre-45, .titre-40, .titre-35, .titre-30, .titre-25, .titre-20 { margin-bottom: 20px;} } @media (max-width:1000px) { .titre-60, .titre-50, .titre-45, .titre-40, .titre-35, .titre-30, .titre-25, .titre-20 { margin-bottom: 15px;} } @media (max-width:600px) { .titre-60, .titre-50, .titre-45, .titre-40, .titre-35, .titre-30, .titre-25, .titre-20 { margin-bottom: 10px;} } /***** reset *****/ 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;} ul { list-style-type: none;} body { font: 400 clamp(1.4rem, 1.3703rem + 0.1297vw, 1.8rem)/2 var(--fontBody); letter-spacing: .3px; color: var(--colorBody); background: #ffffff; position: relative;} body.active_overflow { height: 100vh; overflow: hidden;} a { text-decoration: none; color: var(--colorBodyLink); position: relative;} img { border: none;} main { position: relative;} #wrapper { min-width: 320px; overflow: hidden; position: relative;} #wrapper * { box-sizing: border-box;} #footer { position: relative; z-index: 15;} *, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0;} /***** scollbar *****/ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #252526;} ::-webkit-scrollbar-thumb { background-color: #c7b890;} /***** transition *****/ @media (min-width:1201px) { .link, .slick-arrow, :before, :after, a, a span, .sub { transition: all 400ms ease-in-out;} } /***** class structure *****/ header { width: 90vw; max-width: 1600px; margin: 0 auto; position: relative;} banner { width: 90vw; max-width: 1600px; margin: 0 auto; position: relative; height: 920px; display: block;} #page banner { } main { position: relative;} footer { width: 100vw; margin: 0 auto; position: relative; } .wrapper { width: 90vw; max-width: 1200px; margin: 0 auto; position: relative;} .wrapper.full { width: 90vw; max-width: 1400px; margin: 0 auto; position: relative;} .uppercase { text-transform: uppercase;} .brush { position: relative; z-index: 1; display: inline-block;} .brush:before { content: ''; left: 50%; transform: translate(-50%, -50%); top: calc(50% + 5px); position: absolute; background: url("../images/brush.svg") 0 0 repeat; width: 266px; height: 57px; z-index: -1;} .link { font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; background: #c7b890; padding: 20px 30px; color: #252526; position: relative; display: inline-block;} .link-rappel { cursor: pointer;} .link.arrow:after { content: ''; position: absolute; right: -80px; top: -40px; background: url("../images/arrow.svg") 0 0 repeat; width:55px; height:69px; display: block;} /***** hide about *****/ .hide { display: none;} .read_more, .read_less { cursor: pointer;} .hide_readMore .anchor { top: -120px; position: relative;} .hide_readMore { max-width: 1000px; margin: var(--marginBloc); position: relative; background: #252526; color: #ffffff; padding: 50px;} .hide_readMore p { margin-bottom: 40px;} .hide_readMore :last-child { margin-bottom: 0;} /***** class liens *****/ .texte p a, .bloc_texte p a, .ul_list a { color: #111111; border-bottom: 1px solid #c7b890; } @media (min-width:1201px) { .texte p a:hover, .bloc_texte p a:hover, .ul_list a:hover { color: #c7b890; border-bottom: 1px solid #111111; } .link:hover { color: #ffffff;} .link.arrow:hover:after { right:-60px;} } @media (max-width:1200px) { .hide_readMore { padding: 40px;} .hide_readMore p { margin-bottom: 30px;} } @media (max-width:600px) { .link { font-size: 13px; letter-spacing: 2px; padding: 12px 30px;} .hide_readMore { padding: 25px;} .hide_readMore p { margin-bottom: 20px;} } /***** header - menu *****/ #header { position: fixed; height: 150px; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: 200px auto; grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; z-index: 800; transition: all 400ms ease-in-out;} #header .logo { grid-area: 1 / 1 / 3 / 2; position: relative;} #header .logo a { position: absolute; font-size: 0; line-height: 0; top: 50%; transform: translateY(-50%); opacity: 1; transition: all 300ms ease-in-out;} #header .logo a img { max-width: 100%; height: auto;transition: all 400ms ease-in-out;} #header .logo a img.logo-mobile { display: none;} #header .menu-top { grid-area: 1 / 2 / 3 / 3; text-align: right; padding-top: 10px; transition: all 300ms ease-in-out;} #header .menu-top a { color: #ffffff; font-size: 15px; line-height: 0; letter-spacing: 1px; position: relative; /*margin-right: 28px;*/} /*#header .menu-top a:after { content: ""; width: 1px; height: 10px; background: #ffffff; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); }*/ /*#header .menu-top a:nth-last-child(-n + 2):after { display: none;}*/ #header .menu-top a.header-tel { position: relative; color: #ffffff; padding: 0 0 0 30px; display: inline-block; margin-right: 0;} #header .menu-top a.header-tel:before { content: ''; background: url("../images/tel.svg") left 50% ; width: 16px; height: 16px; position: absolute; left: 0; transform: translateY(-50%);} #header .menu-top a.active { color: #c7b890;} #header .menu_top { position: absolute; right: 140px; top: 25px; z-index: 20;} #header .menu_top>li { position: relative; display: inline-block; vertical-align: top; margin-right: 40px;} #header .menu_top>li:after { width: 1px; height: 14px; content: ""; position: absolute; right: -19px; top: -6px; background: #bbb;} #header .menu_top>li:last-child { margin: 0;} #header .menu_top>li:last-child:after { display: none;} #header .menu_top>li a { font-size: 15px; letter-spacing: 0.4px; display: block; color: #ffffff;} #header .menu_top>li.active>a { color: #c7b890;} #header .menu_top .sub { width: 300px; text-align: left; position: absolute; top: 30px; left: 50%; margin-left: -150px; display: block; background: #292929; opacity: 0; visibility: hidden;} #header .menu_top .sub li a { color: #fff; line-height: 45px; font-weight: 400; letter-spacing: 0.8px; height: auto; border-bottom: 1px solid #444; padding: 0 25px;} #header .menu_top .sub li:last-child a { border-bottom: 0;} #header .menu_top .sub li.active a { color: #c7b890;} #header .menu { grid-area: 2 / 2 / 3 / 3; position: relative; text-align: right; transition: all 300ms ease-in-out; padding-bottom: 30px;} #header .menu li { display: inline-block; position: relative; margin-right: 35px;} #header .menu li:last-child { margin: 0 0 0 -25px;} #header .menu li a { color: #ffffff; font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;} #header .menu li.active>a { color: #c7b890;} #header .menu li a.link-estimation { background: #c7b890; padding: 0 50px; height: 60px; line-height: 60px; color: #252526; display: inline-block;} #header .menu li .link-rappel { background: #ffffff; padding: 0 30px 0 60px; color: #252526; display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; height: 60px; line-height: 60px; position: relative;} #header .menu li .link-rappel:before { content: ''; background: url("../images/rappel.svg") left 50% no-repeat; width: 20px; height: 24px; position: absolute; left: 25px; top: 15px;} .phone_mobile, .estimation_mobile, .menuTopMobile { display: none;} @media (min-width:1201px) { #header .menu-top a:hover { color: var(--colorBodyLinkHover);} #header .menu li:hover>a { color: var(--colorBodyLinkHover);} #header .menu li a.link-estimation:hover { color: #ffffff;} #header .menu li .link-rappel:hover:before { left: 20px;} #header .menu_top>li:hover .sub { opacity: 1; visibility: visible; z-index: 999;} #header .menu_top>li .sub a:hover { color: #c7b890;} .sticky:not(.scrolling_top) #header { margin-top: -50px;} .sticky #header:before { content: ''; width: 200vw; left: -50vw; top: 0; height: 150px; background: #252526; position: absolute; z-index: -1;} .sticky:not(.scrolling_top) #header .menu-top { opacity: 0; transition: all 300ms ease-in-out; padding-top: 0;} .sticky:not(.scrolling_top) #header .menu { padding: 10px 0 20px 0; transition: all 300ms ease-in-out;} .sticky:not(.scrolling_top) #header .menu ul { transition: all 300ms ease-in-out;} .sticky:not(.scrolling_top) #header .logo img { margin-top: 50px; transition: all 300ms ease-in-out;} } @media (max-width:1440px) { #header .menu li { margin-right: 28px;} } @media (max-width:1200px) { #header { display: block; left: auto; width: 100vw; height: auto; padding: 0 5vw; transform: none; background: #252526;} #header .menu-top { opacity: 0; padding-top: 0; display: none;} #header .menu { padding: 0; transition: all 300ms ease-in-out;} #header .logo { z-index: 200;} #header .logo a { top: 22px; transform: none; width: 160px;} .menu_mobile { width: 60px; height: 100px; display: inline-block; vertical-align: middle; cursor: pointer; position: relative; margin: 0 -15px 0 0; z-index: 150;} .menu_mobile div { width: 30px; height: 2px; background: #ffffff; position: absolute; right: 50%; top: 50%; margin: -1px -15px 0 0;} .menu_mobile div:before { width: 30px; height: 2px; background: #ffffff; position: absolute; right: 0; top: 9px; content: "";} .menu_mobile div:after { width: 100%; height: 2px; background: #ffffff; position: absolute; right: 0; top: -9px; content: "";} .menu_mobile.active div { height: 0;} .menu_mobile.active div:before { top: 0; transform: rotate(45deg); width: 30px;} .menu_mobile.active div:after { top: 0; transform: rotate(-45deg);} #header .header_nav { width: 100vw; position: fixed; right: -100vw; top: 0; bottom: 0; overflow-y: scroll; display: block; transition: all 400ms ease-in-out 400ms; background: #252526; padding: 140px 10vw 5vw 10vw; margin: 0;} #header .header_nav::-webkit-scrollbar { display: none;} #header .header_nav ul { width: 100%; max-width: 800px; margin: 0 auto; text-align: left; position: relative; z-index: 100; opacity: 0; transform: translateY(40px); transition: all 400ms ease-in-out 0ms;} #header .header_nav ul li { width: 100%; display: block; margin: 0;} #header .header_nav ul li a { font-size: 24px; line-height: 60px; height: 60px; display: inline-block;} #header .header_nav ul li i { width:85px;height:41px;display:block;margin-top:-48px;position:absolute;z-index:5;background:url(../images/arrow_down.svg) 50% no-repeat #fff;float:right;border-radius:5px; right: 0;} #header .header_nav ul li i.active { transform: rotate(180deg);} #header .header_nav ul:not(.menuTopMobile) li:nth-last-child(-n + 2) { display: none!important;} .phone_mobile { width: 60px; height: 60px; background: url("../images/tel.svg") 50% 50% no-repeat; display: inline-block; vertical-align: middle; margin: 0 -10px 0 10px; position: relative; z-index: 150;} .estimation_mobile { display: block; display: inline-block; vertical-align: middle; font-size: 0; letter-spacing: 0; position: relative; z-index: 150;} .estimation_mobile a { color: #ffffff; font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;} .estimation_mobile a.link-estimation { background: #c7b890; padding: 0 30px; color: #252526; height: 56px; line-height: 56px; display: inline-block; vertical-align: top; margin-right: 10px;} .estimation_mobile .link-rappel { background: #ffffff; padding: 0 30px 0 60px; color: #252526; display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; height: 56px; line-height: 56px; position: relative; vertical-align: top;} .estimation_mobile .link-rappel:before { content: ''; background: url("../images/rappel.svg") left 50% no-repeat; width: 20px; height: 24px; position: absolute; left: 25px; top: 15px;} #header .menu .header_nav ul.menuTopMobile { display: block; background: #ffffff; padding: 20px 40px; margin: 40px 0 0 0; width: auto;} #header .menu .header_nav ul.menuTopMobile li { margin-right: 0;} #header .menu .header_nav ul.menuTopMobile li:last-child { margin: 0;} #header .menu .header_nav ul.menuTopMobile li a { color: #252526; text-transform: inherit; font-weight: 500; font-size: 16px; height: 40px; line-height: 40px;} #header .menu .header_nav ul.menuTopMobile li.active a { color: var(--colorBodyLinkHover);} #header .header_nav.active { right: 0; transition-delay: 0ms;} #header .header_nav.active ul { opacity: 1; transform: translateY(0); transition-delay: 400ms;} #header .menu .header_nav ul.menuTopMobile li a.link-service { padding-left: 20px; font-size: 14px;} } @media (max-width:800px) { #header { padding-left: 0;} #header .logo a { top: 75px; left: 50%; transform: translateX(-50%); width: 110px;} #header .logo a img.logo-desktop { display: none;} #header .logo a img.logo-mobile { display: block; width: 100%;} .menu_mobile { height: 50px;} .phone_mobile { width: 40px; height: 50px; margin: 0 -5px 0 0;} .estimation_mobile { float: left;} .estimation_mobile a.link-estimation { font-size: 13px; letter-spacing: 1px; line-height: 50px; height: 50px; margin: 0; padding: 0 5vw;} .estimation_mobile .link-rappel { background: #ffffff; padding: 0 20px 0 52px; font-size: 13px; letter-spacing: 1px; height: 50px; line-height: 50px;} .estimation_mobile .link-rappel span { display: none;} .estimation_mobile .link-rappel:before { height: 100%; top: 0; left: 22px;} #header .header_nav { padding: 200px 10vw 5vw 10vw;} #header .header_nav ul li a { font-size: 20px; line-height: 50px; height: 50px;} #header .menu .header_nav ul.menuTopMobile { padding: 15px 25px; margin: 25px 0 0 0;} #header .menu .header_nav ul.menuTopMobile li a { font-size: 14px; height: 34px; line-height: 34px; letter-spacing: 2px;} .sticky #header .logo a { opacity: 0; transition: all 200ms ease-in-out; visibility: hidden;} } @media (max-width:420px) { .estimation_mobile a.link-estimation span { display: none;} } /***** formulaire de rappel *****/ .form_call_back { width: 600px; position: fixed; right: -600px; top: 0; bottom: 0; z-index: 950; transition: right 600ms ease-in-out;} .form_call_back.show { right: 0;} .form_call_back .row { height: 100%; background: #fff; padding: 80px; position: relative; z-index: 950; border-left: 10px solid #c7b890;} .form_call_back input[type="text"], .form_call_back input[type="email"] { border: 1px solid #dfdfdf; margin: 15px 0 0 0; height: 60px; font: 400 clamp(1.3rem, 1.2407rem + 0.2593vw, 2rem) / 2 var(--fontBody); letter-spacing: 0.4px; display: block; width: 100%; padding: 0 25px;} .form_call_back .link { width: 100%; border: none; margin-top: 30px; cursor: pointer;} .form_call_back .close { position: absolute; top: 0; left: -70px; width: 60px; height: 60px; background: #c7b890; cursor: pointer; z-index: 50; display: none;} .form_call_back .close:after { width: 100%; height: 100%; display: block; background: url(../images/plus.svg) 50% no-repeat; transform: rotate(-45deg); content: "";} .form_call_back .close_bg { width: 100%; height: 100%; background: #000; position:fixed; left: 0; top: 0; z-index: 900; opacity: 0.8; display: none;} .call_back_ok { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 950;} .call_back_ok .row { width: 85vw; max-width: 400px; margin: 0 auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 20; background: #fff; text-align: center; padding: 40px;} .call_back_ok .row p { margin-bottom: 20px; line-height: 26px;} .call_back_ok .row .link { cursor: pointer;} .call_back_ok .close_bg { width: 100%; height: 100%; background: #000; position: absolute; left: 0; top: 0; z-index: 10; opacity: 0.5;} @media (max-width:1200px) { .form_call_back { width: 500px; right: -500px;} .form_call_back .row { padding: 5vw;} } @media (max-width:600px) { .form_call_back { width: 100%; right: -100%;} .form_call_back .row { padding: 8.5vw 7.5vw; border: none;} .form_call_back input[type="text"], .form_call_back input[type="email"] { margin: 10px 0 0 0; height: 50px; padding: 0 20px;} .form_call_back .link { margin-top: 25px;} .form_call_back .close { left: auto; right: 0; width: 50px; height: 50px;} .form_call_back .close:after { background-size: 24px auto;} .call_back_ok .row { padding: 30px;} } /***** Show FAQ *****/ .show_hide .item { border-top: 1px solid #cccccc;} .show_hide .item .titre { cursor: pointer; text-transform: uppercase; font-weight: 600; line-height: 30px; transition: all 400ms ease-in-out; display: block; position: relative; padding:20px 30px 20px 0;} .show_hide .item .titre:after { width: 30px; height: 30px; background: url(../images/arrow_down.svg) 50% no-repeat; border-radius: 50%; position: absolute; right: 5px; top: 50%; content: ""; transform: translateY(-50%);} .show_hide .item .titre.active:after { transform: translateY(-50%) rotate(180deg);} .show_hide .item p { padding-right: 20px;} .show_hide .item p:last-of-type { padding-bottom: 20px;} #index .bloc_grid .item .show_hide { margin-top: 30px;} @media (max-width:600px) { .show_hide .item .titre { padding: 10px 30px 10px 0;} .show_hide .item p:last-of-type { padding-bottom: 10px;} #index .bloc_grid .item .show_hide { margin-top: 20px;} } /***** cta *****/ .cta { color: #2b2b2b; width: 90vw; max-width: 1200px; margin: 0 auto; position: relative; padding: 30px 0; text-align: center; background: #c7b890;} .cta a { color: #2b2b2b;} /***** footer *****/ footer { position: relative; z-index: 1; padding-top: 80px; color: #ffffff; margin-top: 80px; width: 100vw; background: #252526; text-align: center;} footer a.scroll { position: absolute; right: 30px; bottom: 90px; width: 50px; height: 50px; background: url("../images/arrow_top.svg") 50% no-repeat #111111; display: block;} footer a.tel { color: #fff;} footer .sigle { max-width: 2000px;} footer .sigle img { position: absolute; left: 0; bottom: 35px;} .grid-footer { position: relative; width: 100%; display: grid; grid-template-columns:repeat(3,1fr); grid-gap: 0 20px; align-items: start; color: #ffffff; margin-top:60px; margin-bottom: 60px;} .grid-footer .item .titre-20 { color: #c7b890; text-transform: uppercase;} .grid-footer .item .rs { display: flex; align-items: center; justify-content: center; column-gap: 10px;} .grid-footer .item .rs a.facebook { display:inline-block; position: relative; background: url("../images/facebook.svg") 50% 50% no-repeat; width:9px; height: 16px; margin-right: 10px;} .grid-footer .item .rs a.instagram { display:inline-block; position: relative; background: url("../images/instagram.svg") 50% 50% no-repeat; width:20px; height: 20px;} .footer_bottom { background: #c7b890; position: relative; margin-top: 100px; height: 60px; color: #2b2b2b; text-align: left;} .footer_bottom:before { content: ''; width: 200vw; left: -50vw; display: block; position: absolute; background: #c7b890; height: 60px;} .footer_bottom li { display: inline-block; font-size: 11px; line-height: 60px; font-weight: 500; margin-right: 25px; letter-spacing: 0.8px; position: relative;} .footer_bottom li a { color: #2b2b2b;} .footer_bottom li:after { width: 1px; height: 8px; content: ""; position: absolute; right: -13px; top: 26px; background: #2b2b2b;} .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; background: #c7b890;} .toponweb img { width: 74px; height: auto; display: block; margin: 0 auto; transition: all 400ms ease-in-out;} .toponweb.show { bottom: 0;} /***** IPI *****/ .ipi_biv { background: #292929; font-size: 12px; padding: 30px 40px; max-width: 650px; width: 100%; margin: 50px auto; display: grid; grid-template-columns: 50px 1fr; grid-gap: 40px; align-items: center;} @media (max-width:1200px) { } @media (max-width:1000px) { footer .sigle img { height: 75px; width: auto; bottom: 45px;} #fiche footer { margin-top: 0;} } @media (max-width:700px) { footer .sigle img { display: none;} .grid-footer { grid-template-columns: 1fr; grid-gap: 20px 0; margin-bottom: 20px;} .ipi_biv { grid-template-columns: 1fr; padding: 20px; text-align: left; grid-gap: 10px; max-width: 80vw; margin: 0 auto 20px;} .footer_bottom { text-align: center; background: none; height: inherit; margin: 0;} .footer_bottom:before { content: none;} .footer_bottom ul { padding: 30px 0; line-height: 0; color: #373737;} .footer_bottom li { display: block; margin: 0; font-size: 10px; line-height: 28px; color: #fff;} .footer_bottom li:after { display: none;} .footer_bottom li a { color: #fff;} .toponweb { position: static; width: auto; margin: 20px -7vw 0;} .toponweb span { height: auto; padding: 15px;} .toponweb img { width: 68px;} }