/***** fonts *****/ /* latin-ext */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(https://fonts.gstatic.com/s/manrope/v19/xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(https://fonts.gstatic.com/s/manrope/v19/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'ClashGrotesk-Variable'; src: url('../fonts/ClashGrotesk-Variable.woff2') format('woff2'), url('../fonts/ClashGrotesk-Variable.woff') format('woff'), url('../fonts/ClashGrotesk-Variable.ttf') format('truetype'); font-weight: 200 700; font-display: swap; font-style: normal; } @font-face { font-family: 'RecklessNeue-Light'; src: url('../fonts/RecklessNeue-Light.woff2') format('woff2'), url('../fonts/RecklessNeue-Light.woff') format('woff'), url('../fonts/RecklessNeue-Light.ttf') format('truetype'); font-weight: 200 700; font-display: swap; font-style: normal; } /***** variables *****/ :root { --orange: #ff6300; --purple: #c28af0; --purpleDark: #8f30f0; --blue: #0085f0; --green: #c2ed4f; --cyan: #00e5b2; --yellow: #eafb21; --red: #940000; --bgColorLight: #f4f4f4; --txtColor: #000; --marginTB: clamp(70px, 8vw, calc(120px + 2vw)) auto; --marginT: clamp(70px, 8vw, calc(120px + 2vw)); --marginB: clamp(70px, 8vw, calc(120px + 2vw)); --paddingTB: clamp(60px, 5vw, calc(120px + 2vw)) 0; --maxWidthWrapper: 1400px; --maxWidthWrapperSmall: 1000px; --maxWidthWrapperMedium: 1600px; --maxWidthWrapperLarge: 2000px; --imgRadius: 0; --linkRadius: 0; } @media (max-width:1400px) { :root { } } @media (max-width:1000px) { :root { --marginTB: clamp(45px, 12vw, 70px) auto; --marginT: clamp(45px, 12vw, 70px); --marginB: clamp(45px, 12vw, 70px); } } @media (max-width:700px) { :root { } } /***** reset *****/ /*html { scroll-behavior: smooth;}*/ 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;} ul { list-style-type: none;} body { font: 400 clamp(14px, 1.2vw, 16px)/180% "Manrope"; letter-spacing: 0.4px; color: var(--txtColor); background: #fff; position: relative;} body.active_overflow, body.active_overflow_from_book { height: 100vh; overflow: hidden;} a { text-decoration: none; position: relative; color: var(--txtColor);} img { border: none;} p { margin-bottom: clamp(10px, 2vw, 15px);} main { position: relative; z-index: 10;} #wrapper { min-width: 320px; position: relative;} #wrapper * { box-sizing: border-box;} #footer { position: relative; z-index: 15;} @media (max-width:1000px) { body { font-size: clamp(13px, 2vw, 16px);} } @media (max-width:700px) { body { line-height: 170%; letter-spacing: 0.2px;} } /***** scollbar *****/ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #fff;} ::-webkit-scrollbar-thumb { background-color: #000;} /***** 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: var(--maxWidthWrapper); margin: 0 auto; position: relative;} .wrapper_small { width: 90vw; max-width: var(--maxWidthWrapperSmall); margin: 0 auto; position: relative;} .wrapper_medium { width: 90vw; max-width: var(--maxWidthWrapperMedium); margin: 0 auto; position: relative;} .wrapper_large { width: 90vw; max-width: var(--maxWidthWrapperLarge); margin: 0 auto; position: relative;} .wrapper_full { /*width: 90vw;*/ margin: 0 5vw; position: relative;} /* .wrapper_full { width: clamp(200px, 90vw, 2000px); width: 90vw; max-width: 2000px; margin: 0 auto; position: relative;} .wrapper_max { max-width: calc(2080px + 10vw); margin: 0 auto; position: relative;} */ .margin_top_bottom { margin: var(--marginTB);} .margin_top { margin-top: var(--marginT);} .margin_bottom { margin-bottom: var(--marginB);} .color_orange { color: var(--orange);} .color_purple { color: var(--purple);} .color_purpleDark { color: var(--purpleDark);} .color_blue { color: var(--blue);} .color_green { color: var(--green);} .color_cyan { color: var(--cyan);} .color_yellow { color: var(--yellow);} .bg_orange { background: var(--orange);} .bg_purple { background: var(--purple);} .bg_purpleDark { background: var(--purpleDark);} .bg_blue { background: var(--blue);} .bg_green { background: var(--green);} .bg_cyan { background: var(--cyan);} .bg_yellow { background: var(--yellow);} .bg_red { background: var(--red);} .bg_light { background: var(--bgColorLight);} .clear { clear: both; display: block;} .anchor { position: absolute; left: 0; top: -120px;} .titre_main { font: 500 clamp(28px, 3vw, 50px)/110% "ClashGrotesk-Variable"; letter-spacing: 0; position: relative; margin-bottom: clamp(10px, 1.8vw, 20px);} .titre_main.bigger { font-size: clamp(38px, 4.4vw, 75px); line-height: 100%;} .titre_main.smaller { font-size: clamp(22px, 2.8vw, 35px);} .titre_main span { display: inline-block;} .titre_main .sous_titre { display: block; margin: 0;} .txt_serif { font: 300 clamp(20px, 1.7vw, 34px)/135% "RecklessNeue-Light"; position: relative; letter-spacing: 0; margin-bottom: clamp(10px, 2vw, 15px);} .titre { font: 500 clamp(20px, 2.6vw, 40px)/110% "ClashGrotesk-Variable"; letter-spacing: 0; position: relative; margin-bottom: clamp(10px, 2vw, 15px);} .sous_titre { font: 500 clamp(16px, 1.8vw, 25px)/140% "ClashGrotesk-Variable"; letter-spacing: 0; position: relative; margin-bottom: clamp(10px, 2vw, 15px);} .sous_titre.bigger { font-size: clamp(18px, 2.1vw, 28px); line-height: 120%;} .sous_titre.smaller { font-size: clamp(16px, 1.6vw, 22px); line-height: 130%;} .chapo { font: 500 clamp(16px, 1.4vw, 20px)/150% "Manrope"; margin-bottom: clamp(10px, 2vw, 15px);} .chapo span { display: block; margin-bottom: clamp(10px, 2vw, 15px);} .link { font: 600 clamp(14px, 2.5vw, 16px)/62px "Manrope"; letter-spacing: 0.8px; height: 64px; display: inline-block; color: #fff; padding: 0 40px; border-radius: var(--linkRadius); background: linear-gradient(to top, #000 0% 50%, #252525 50% 100%); background-size: 100% 200%; background-position: 0 100%;} .link span { position: relative; z-index: 5;} .link_purple { background-image: linear-gradient(to top, var(--purpleDark) 0% 50%, #7226c0 50% 100%);} .link_orange { background-image: linear-gradient(to top, var(--orange) 0% 50%, #f04b00 50% 100%);} .link_text_arrow { font: 600 16px/30px "Manrope"; display: inline-block; padding-right: 32px; position: relative;} .link_text_arrow:before { width: 20px; height: 100%; position: absolute; right: 0; top: 0; background: url("../images/arrow_link_small.svg") 0 52% / contain no-repeat; content: "";} .link_arrow { height: 60px; display: grid; grid-template-columns: 1fr auto 80px; grid-gap: 20px; align-items: center; position: relative; overflow: hidden; cursor: pointer; letter-spacing: 0.4px;} .link_arrow:before { position: absolute; right: 0; top: 0; width: 80px; height: 100%; background: #000; content: "";} .link_arrow:after { position: absolute; right: 0; top: 0; width: 80px; height: 100%; background: url("../images/arrow_link.svg") 50% no-repeat; filter: invert(1); content: "";} .link_arrow span { font: 600 16px/100% "Manrope"; padding-bottom: 2px; transform: translateX(-15%); opacity: 0; transition: all 300ms ease-in-out;} .link_arrow i { width: 0; height: 3px; background: #000; display: block; transition: all 300ms ease-in-out;} .read_more { display: inline-block; color: var(--green); cursor: pointer; transition: color 300ms ease-in-out;} .hide { display: none;} .ul_check { margin: clamp(15px, 2vw, 25px) 0;} .ul_check li { position: relative; padding-left: 32px; font-size: clamp(15px, 1.4vw, 18px); line-height: 140%; font-weight: 500; margin-bottom: 10px;} .ul_check li:before { width: 20px; height: 20px; position: absolute; left: 0; top: 4px; background: url("../images/check.svg") 0 0 / contain no-repeat; filter: invert(0); content: "";} .ul_check li:last-child { margin-bottom: 0;} .ul_check_green li:before { background-image: url("../images/check_green.svg");} .ul_list { margin: clamp(10px, 2vw, 15px);} .ul_list li { position: relative; padding-left: 20px; margin-bottom: 12px; line-height: 170%;} .ul_list li:before { width: 6px; height: 6px; position: absolute; left: 0; top: 10px; background: #000; content: "";} .ul_list li:last-child { margin-bottom: 0;} .ul_list.dots_orange li:before { background: var(--orange);} .ul_list.dots_blue li:before { background: var(--blue);} .ul_list.dots_purple li:before { background: var(--purple);} .ul_list.dots_green li:before { background: #b0d344;} .ul_list.dots_cyan li:before { background: var(--cyan);} .ul_list.dots_red li:before { background: var(--red);} @media (min-width:1201px) { .link:hover { background-position: 0 0;} .link_text_arrow:hover:before { right: -8px;} .link_arrow:hover span { opacity: 1; transform: translateX(0); transition-delay: 50ms;} .link_arrow:hover i { width: 100%;} } @media (max-width:1000px) { .titre_main { font-size: clamp(26px, 4.4vw, 40px);} .titre_main.bigger { font-size: clamp(34px, 6vw, 70px);} .titre_main.smaller { font-size: clamp(20px, 3.5vw, 30px);} .titre_main .sous_titre { padding-bottom: 5px;} .txt_serif { font-size: clamp(20px, 3.8vw, 30px);} .titre { font-size: clamp(26px, 4vw, 30px);} .sous_titre { font-size: clamp(18px, 2.6vw, 25px);} .sous_titre.bigger { font-size: clamp(18px, 3vw, 28px);} .sous_titre.smaller { font-size: clamp(18px, 2.4vw, 22px);} .chapo { font-size: clamp(14px, 2.2vw, 20px);} } @media (max-width:700px) { .link { height: 50px; line-height: 48px; padding: 0 25px;} .link_text_arrow { font-size: 15px;} .link_arrow { font-size: 15px;} .link_arrow:before, .link_arrow:after { width: 60px;} .ul_check li { padding-left: 26px;} .ul_check li:before { width: 18px; height: 18px; top: 2px;} .ul_list li { padding-left: 18px; margin-bottom: 10px;} .ul_list li:before { top: 8px;} } /***** header et menu *****/ .header { width: 100%; position: fixed; left: 0; top: 0; z-index: 100; padding: 25px 0; background: #fff;} .header .container { display: grid; grid-template-columns: auto 1fr auto; align-items: center; width: 100%; padding: 0 5vw; transition: all 300ms ease-in-out;} .header .logo { width: 140px;} .header .logo img { width: 100%; height: auto; display: block;} .header .header_nav { position: relative; z-index: 15; margin-left: 3vw;} .header .menu>li { position: relative; display: inline-block; vertical-align: top; margin-right: 25px;} .header .menu>li:last-child { margin-right: 0;} .header .menu>li>a, .header .menu>li>span { font-size: 16px; line-height: 60px; font-weight: 600; letter-spacing: 0.2px; display: block; position: relative; transition: all 300ms ease-in-out;} .header .menu>li>span { cursor: default;} .header .menu>li i { width: 7px; height: 100%; position: absolute; top: 0; right: 0; transition: all 300ms ease-in-out;} .header .menu>li i:before { width: 7px; height: 100%; background: url("../images/arrow_sub.svg") 0 52% / contain no-repeat; position: absolute; top: 0; right: 0; content: "";} .header .menu>li:has(i)>a, .header .menu>li:has(i)>span { padding-right: 18px;} .header .sub { width: 280px; position: absolute; top: 110%; left: -15px; visibility: hidden; opacity: 0; padding: 20px 0; background: #fff; box-shadow: 0 50vh 0 200vh rgba(0, 0, 0, 50%);} .header .sub>li { width: 100%; margin: 0;} .header .sub>li>a { width: 100%; line-height: 34px; height: 34px; display: block; padding: 0 30px;} .header .sub>li>a:before { width: 7px; height: 100%; background: url("../images/arrow_sub_link.svg") 50% no-repeat; position: absolute; top: 0; right: 30px;content: "";} .header .sub>li.active a { color: var(--orange);} .header .sub_sol { width: 1180px; margin: 0; text-align: left; left: 0; min-height: 380px; padding: 0 340px 0 0;} .header .sub_sol>img { width: 340px; height: 100%; object-fit: cover; position: absolute; right: 0; top: 0;} .header .sub_sol ul { display: grid; grid-template-columns: 1fr 1fr; padding: 30px; grid-gap: 10px;} .header .sub_sol ul li.icon a { padding: 25px; background: linear-gradient(to top, #fff 0% 50%, var(--bgColorLight) 50% 100%); background-size: 100% 200%; background-position: 0 100%; font-size: clamp(12px, 1.2vw, 14px); line-height: 160%; display: block;} .header .sub_sol ul li.icon img { display: block; margin: 0 0 12px 0; height: 32px; object-fit: contain; object-position: center bottom;} .header .sub_sol ul li.icon b { display: block; font-size: clamp(16px, 1.4vw, 17px); font-weight: 600; margin-bottom: 8px;} .header .sub_sol ul li:nth-child(1) img { width: 26px;} .header .sub_sol ul li:nth-child(2) img { width: 30px;} .header .sub_sol ul li:nth-child(3) img { width: 35px; margin-right: -3px;} .header .sub_sol ul li:nth-child(4) img { width: 32px;} .header .sub_sol ul li:last-child { margin: 10px 0 0 10px;} .header .cta_langs { display: grid; grid-template-columns: auto auto; align-items: center; position: relative; z-index: 10;} .header .cta_langs .link { width: 80px; height: 40px; padding: 0; text-align: center; line-height: 38px; font-weight: 500; z-index: 10;} .header .cta_langs .langs { margin-left: 30px; z-index: 15;} body:has(.top_page) .header { padding-right: 0;} @media (min-width:1600px) { .header { padding: 40px 30% 15px 0; background: linear-gradient(to top, rgba(255,255,255,0) 0% 50%, rgba(255,255,255,1) 50% 100%); background-size: 100% 200%; background-position: 0 100%; transition: all 300ms ease-in-out 200ms, padding 300ms ease-in-out 0ms;} .sticky .header { transition: all 300ms ease-in-out 0ms, padding 300ms ease-in-out 200ms;} } @media (min-width:1201px) { .menu_mobile, .header .mobile_only { display: none;} .header .menu>li:hover { z-index: 999;} .header .menu>li:hover .sub { visibility: visible; opacity: 1; top: 100%;} .header .menu>li:has(i):hover>a, .header .menu>li:has(i):hover>span { color: #fff; z-index: 999;} .header .menu>li:hover>i { filter: invert(1); z-index: 999;} .header .sub_sol ul li.icon a:hover { background-position: 0 0;} .sticky .header { padding: 15px 0; background-position: 0 0;} .sticky .header .logo { width: 110px;} } @media (max-width:1450px) { .header .sub_sol { width: 850px; padding: 0; min-height: inherit;} .header .sub_sol>img { display: none;} .header .sub_sol ul li:last-child { margin: 5px 0 0 10px;} } @media (max-width:1200px) { .menu_mobile { width: 70px; height: 90px; display: inline-block; vertical-align: middle; cursor: pointer; position: relative; z-index: 250; margin: 0 -15px;} .menu_mobile div { width: 40px; height: 2px; background: #000; position: absolute; right: 50%; top: 50%; margin: -1px -20px 0 0; transition: all 0ms ease-in-out 500ms;} .menu_mobile div:before { width: 100%; height: 2px; background: #000; position: absolute; right: 0; top: 7px; content: ""; transition: all 0ms ease-in-out 500ms;} .menu_mobile div:after { width: 100%; height: 2px; background: #000; position: absolute; right: 0; top: -7px; content: ""; transition: all 0ms ease-in-out 500ms;} .menu_mobile.active div { height: 0; width: 30px; margin-right: -15px; transition-delay: 250ms;} .menu_mobile.active div:before { top: 0; transform: rotate(45deg); transition-delay: 250ms;} .menu_mobile.active div:after { top: 0; transform: rotate(-45deg); transition-delay: 250ms;} .menu_mobile.active:after { width: 100vw; position: fixed; top: 0; bottom: 0; right: calc(635px - 5vw); content: "";} .header { padding: 0;} .header:before { width: 100vw; height: 120vh; position: fixed; left: 0; top: 0; background: #000; opacity: 0; visibility: hidden; transition: all 200ms ease-in-out 300ms; z-index: 20; content: "";} .header ::-webkit-scrollbar { display: none;} .header .container { grid-template-columns: 1fr auto auto; grid-gap: 4vw;} .header .logo { width: 110px;} .header .header_nav { width: 600px; position: fixed; right: -600px; top: 0; bottom: 0; overflow-y: scroll; z-index: 200; background: #fff; margin: 0; transition: all 300ms ease-in-out 200ms;} .header .menu { display: block; width: auto; padding: 90px 7vw 0 7vw; position: relative; z-index: 100; opacity: 0; transition: all 300ms ease-in-out 0ms;} .header .menu>li { width: 100%; display: block; margin: 0;} .header .menu>li:last-child { display: none;} .header .menu>li>a, .header .menu>li>span { font-size: clamp(18px, 4.5vw, 26px); line-height: 64px; transition: none; display: inline-block;} .header .menu>li>a { z-index: 10;} .header .menu>li:has(i)>a, .header .menu>li:has(i)>span { padding: 0;} .header .menu>li i { width: 100%; height: 64px; transition: all 0ms ease-in-out 0ms;} .header .menu>li i:before { background-image: url("../images/arrow_link_small.svg"); width: 20px;} .header .menu>li i.active { position: fixed; top: 0; right: calc(560px - 5vw); width: 40px; height: 90px; z-index: 25;} .header .menu>li i.active:before { background-image: url("../images/back.svg"); background-position: 0 48%; right: 20px;} .header .sub { opacity: 1; visibility: visible; box-shadow: none; position: fixed; left: auto; right: -600px; top: 0; bottom: 0; width: 600px; background: #eee; z-index: 20; padding: 100px 7vw 5vw 7vw; overflow-y: scroll; transition: all 300ms ease-in-out 200ms;} .header .sub.active { right: 0; transition-delay: 0ms;} .header .sub>li { background: #fff; text-align: left; margin-bottom: 10px;} .header .sub>li>a { font-size: clamp(16px, 1.4vw, 18px); display: block; line-height: 50px; height: auto; background: #fff; padding: 0 20px;} .header .sub>li>a:before { right: 20px;} .header .sub_sol { min-height: inherit;} .header .sub_sol>img { display: none;} .header .sub_sol ul { padding: 0; grid-template-columns: 1fr; grid-gap: 10px;} .header .sub_sol ul li.icon a { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 0 20px;} .header .sub_sol ul li.icon img { margin: 0 auto; height: auto;} .header .cta_langs .langs { margin-left: 25px;} .header .mobile_only { padding-top: 0; padding-bottom: 5vw; margin-top: -10px; z-index: 80;} .header .mobile_only .multi_links { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; text-align: center; padding: 5vw 0;} .header .mobile_only .multi_links .link { padding: 0; height: 56px; line-height: 54px;} .header .mobile_only>ul { padding-top: 5vw; margin-top: -5px;} .header .mobile_only>ul li { display: inline-block; margin-right: 20px;} .header .mobile_only>ul li a { display: inline-block; opacity: 0.5;} .header .mobile_only>ul li a.active { font-weight: 600; opacity: 1; border-bottom: 2px solid #000;} .header.active:before { opacity: 0.5; visibility: visible; transition-delay: 0ms;} .header.active .header_nav { right: 0; transition-delay: 150ms;} .header.active .menu { opacity: 1; transition-delay: 400ms;} } @media (max-width:700px) { .menu_mobile { height: 70px;} .header .container { grid-gap: 7.5vw;} .header .logo { width: 90px;} .header .header_nav { width: 100%; right: -100%;} .header .menu { padding: 70px 8vw 0 8vw;} .header .menu>li>a, .header .menu>li>span { line-height: calc(6vw + 25px);} .header .menu>li i { height: calc(6vw + 25px);} .header .menu>li i.active { right: calc(88vw - 20px); height: 70px;} .header .sub { width: 100%; right: -100%; padding: 70px 8vw 5vw 8vw;} .header .sub>li>a { line-height: 44px;} .header .sub_sol ul li.icon a { display: block; padding: 20px;} .header .sub_sol ul li.icon img { margin: 0 0 12px 0; height: 32px;} .header .mobile_only { padding-top: 0; padding-bottom: 5vw} .header .mobile_only .multi_links { padding: clamp(35px, 10vw, 50px) 0;} .header .mobile_only .multi_links .link { height: 50px; line-height: 48px;} .header .mobile_only>ul { padding-top: clamp(35px, 10vw, 50px); margin-top: 0;} .header .cta_langs { display: block; line-height: 0;} .header .cta_langs .link { width: 70px; height: 34px; font-size: 13px; line-height: 32px;} .header .cta_langs .langs { display: none;} } /***** langs *****/ .langs { font-size: 12px; line-height: 220%; font-weight: 500; letter-spacing: 0.6px; position: relative;} .langs div { line-height: 40px; padding-right: 15px; position: relative; cursor: default; transition: all 300ms ease-in-out;} .langs div:before { width: 7px; height: 100%; background: url("../images/arrow_sub.svg") 0 50% / contain no-repeat; position: absolute; top: 0; right: 0; transition: all 300ms ease-in-out; content: "";} .langs ul { width: 100px; margin: 0 0 0 -50px; text-align: center; position: absolute; top: 110%; left: 50%; visibility: hidden; opacity: 0; padding: 10px 0; background: #fff; box-shadow: 0 50vh 0 200vh rgba(0, 0, 0, 50%); transition: all 300ms ease-in-out;} .langs ul li a { display: block;} .langs:hover { z-index: 999;} .langs:hover ul { visibility: visible; opacity: 1; top: 100%;} .langs:hover div { color: #fff; z-index: 999;} .langs:hover div:before { filter: invert(1);} /***** banner *****/ .banner { position: relative; display: grid; grid-template-columns: 1fr 30%; padding-top: 90px; padding-bottom: calc(2vw + 20px);} .banner .content { padding: 0 5vw; display: grid; align-items: center;} .banner .content .container { max-width: 1040px; margin: 0 auto;} .banner .content :last-child { margin-bottom: 0;} .banner .content .chapo span { display: inline;} .banner .multi_links { font-size: 0; letter-spacing: 0; padding-top: clamp(10px, 2vw, 20px);} .banner .multi_links .link:first-child { margin-right: 10px;} .banner .link_purple span { padding-right: 25px; margin-right: -5px; display: inline-block;} .banner .link_purple span:before { width: 9px; height: 100%; background: url("../images/arrow_sub.svg") 0 50% / contain no-repeat; position: absolute; right: 0; top: 0; filter: invert(1); content: "";} .banner .img picture { display: block;} .banner .img img { width: 100%; height: auto; display: block; object-fit: cover;} .banner .img .txt { display: grid; align-items: center; background: var(--orange); padding: 4.2vw clamp(20px, 4.2vw, 80px); color: #fff;} .banner .img .txt .txt_serif { margin: 0 auto 10px auto;} @media (min-width:1600px) { .banner { padding-top: 0;} .banner .content { padding-top: 70px;} } @media (max-width:1200px) { .banner { grid-template-columns: 1fr 35%;} .banner .img .txt .txt_serif { margin-bottom: 5px;} } @media (max-width:1000px) { .banner { grid-template-columns: 1fr; grid-gap: 8vw; padding-bottom: 0; margin-bottom: clamp(45px, 12vw, 70px);} .banner .content { margin-top: 6vw;} .banner .multi_links { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; text-align: center;} .banner .multi_links .link:first-child { margin-right: 0;} .banner .img img { aspect-ratio: 2/1;} .banner .img .txt { aspect-ratio: auto; padding: 7vw 5vw;} } @media (max-width:700px) { .banner { padding-top: 70px;} .banner .content { text-align: center;} .banner .content .chapo span { display: none;} .banner .multi_links { display: none;} .banner .img .txt .txt_serif { margin-bottom: 2px;} } /***** bloc txt img *****/ .bloc_txt_img { position: relative; overflow: hidden;} .bloc_txt_img:before { position: absolute; left: 20px; right: 60%; top: 25%; bottom: 0; background: var(--bgColorLight); visibility: hidden; transition: none; content: "";} .bloc_txt_img .container { display: grid; grid-template-columns: 50% 1fr; grid-gap: 5vw; align-items: center; position: relative;} .bloc_txt_img .container>.item { position: relative;} .bloc_txt_img .container>.item :last-child { margin-bottom: 0;} .bloc_txt_img .container .txt { margin: 0;} .bloc_txt_img .container .txt .wrap { max-width: 600px; margin: 0 auto;} .bloc_txt_img .container .img img { width: 100%; height: auto; object-fit: cover; display: block; border-radius: var(--imgRadius);} .bloc_txt_img .container .link { margin-top: 10px;} .bloc_txt_img .container .multi_links { display: grid; grid-template-columns: 140px 140px; grid-gap: 10px; margin-top: 25px;} .bloc_txt_img .container .multi_links .link { margin: 0; text-align: center; padding: 0;} .bloc_txt_img.reverse:before { left: 60%; right: 20px; top: 25%; bottom: -10%; background: var(--bgColorLight); border-radius: 20px visibility: visible; content: "";} .bloc_txt_img.reverse .container { grid-template-columns: 1fr 50%;} .bloc_txt_img.reverse .container>.item:last-child { grid-area: 1 / 1;} .bloc_txt_img.reverse .container>.item:first-child { grid-area: 1 / 2;} .bloc_txt_img.align_top .container { align-items: start;} @media (max-width:1200px) { .bloc_txt_img .container { align-items: start;} } @media (max-width:1000px) { .bloc_txt_img .container { grid-template-columns: 100%; grid-gap: 40px;} .bloc_txt_img .container .txt .wrap { width: 90vw; max-width: none;} .bloc_txt_img.reverse .container { grid-template-columns: 1fr;} .bloc_txt_img.reverse .container>.item:last-child { grid-area: 2;} .bloc_txt_img.reverse .container>.item:first-child { grid-area: 1;} } @media (max-width:700px) { .bloc_txt_img .container { grid-gap: 30px;} .bloc_txt_img .container p { margin-bottom: 10px;} .bloc_txt_img .container .multi_links { grid-template-columns: 1fr 1fr; grid-gap: 10px; margin-top: 20px;} } .bloc_txt_img .slider .slick-list { overflow: visible;} .item_preview { position: relative; padding-bottom: 5.25vw;} .item_preview .square_color { aspect-ratio: 55/60; width: 65%; margin: 0 10% 0 25%;} .item_preview img { position: absolute; height: auto; display: block; object-fit: cover;} .item_preview img:first-of-type { aspect-ratio: 12/6.1; left: 0; top: 16%; width: 80%;} .item_preview img:last-of-type { aspect-ratio: 1/1; right: 0; bottom: 0; width: 35%;} .square_purple { background: var(--purple);} .square_orange { background: var(--orange);} .square_green { background: var(--green);} .square_cyan { background: var(--cyan);} .square_blue { background: var(--blue);} @media (max-width:1000px){ .item_preview { padding-bottom: 8vw;} .item_preview .square_color { width: 70%; margin: 0 0 0 20%; aspect-ratio: 60/55;} } @media (max-width:700px){ .item_preview { padding-bottom: 0;} .item_preview .square_color { aspect-ratio: 1/1; width: 75%; margin: 0 0 0 -5vw;} .item_preview img:first-of-type { top: 50%; left: 5%; width: 90%; transform: translateY(-50%);} .item_preview img:last-of-type { display: none;} } .item_preview.slick-slide .square_color { clip-path: inset(0 100% 0 0); transition: all 600ms ease-in-out;} .item_preview.slick-slide img { opacity: 0; transform: scale(0.9); transition: opacity 200ms ease-in-out, transform 400ms ease-in-out;} .item_preview.slick-slide img:last-of-type { opacity: 1; clip-path: inset(0 0 0 100%); /*transform: translateY(15%);*/ transform: none; transition: all 400ms ease-in-out;} .item_preview.slick-active .square_color { clip-path: inset(0 0 0 0); transform: translateX(0); transition-delay: 250ms;} .item_preview.slick-active img { opacity: 1; transform: scale(1); transition-delay: 500ms;} .item_preview.slick-active img:last-of-type { clip-path: inset(0 0 0 0); transform: translateY(0); transition-delay: 500ms;} @media (max-width:1000px){ .item_preview.slick-slide .square_color { clip-path: inset(0 0 100% 0); transform: none;} .item_preview.slick-active .square_color { clip-path: inset(0 0 0 0);} .item_preview.slick-slide img:last-of-type { clip-path: inset(0 100% 0 0); transform: none;} .item_preview.slick-active img:last-of-type { clip-path: inset(0 0 0 0);} } @media (max-width:700px){ .item_preview.slick-slide .square_color { clip-path: inset(0 0 0 0);} .item_preview.slick-slide img:first-of-type { transform: translate(-100%, -50%) scale(1);} .item_preview.slick-active img:first-of-type { transform: translate(0, -50%) scale(1);} } /***** item square + img *****/ .item_square_img { position: relative; padding-bottom: 5vw;} .item_square_img .square_color { aspect-ratio: 4/3; width: 85%; margin: 0 15% 0 0;} .item_square_img img { position: absolute; height: auto; display: block; object-fit: cover; aspect-ratio: 1/1; right: 0; bottom: 0; width: 55%;} .reverse .item_square_img .square_color { margin: 0 0 0 15%;} .reverse .item_square_img img { left: 0; right: auto;} @media (max-width:1000px){ .item_square_img { padding-bottom: 8vw;} .item_square_img .square_color { width: 80%; margin: 0 20% 0 0;} .reverse .item_square_img .square_color { margin: 0 0 0 20%;} } /***** item img + img *****/ .item_img_img { position: relative; padding-bottom: 8vw;} .item_img_img img { aspect-ratio: 1/1; width: 55%; height: auto; display: block; object-fit: cover; margin: 0 45% 0 0;} .item_img_img img:last-of-type { position: absolute; right: 0; bottom: 0; margin: 0;} .reverse .item_img_img img { margin: 0 0 0 45%;} .reverse .item_img_img img:last-of-type { left: 0; right: auto; margin: 0;} @media (min-width:1600px){ .item_img_img { margin-left: 5vw;} .reverse .item_img_img { margin: 0 5vw 0 0;} } @media (max-width:1000px){ .item_img_img { padding-bottom: 0;} .reverse .item_img_img img { width: calc(50% - 7px); margin: 0 0 0 calc(50% + 7px);} } @media (max-width:700px){ .reverse .item_img_img img { width: calc(50% - 5px); margin: 0 0 0 calc(50% + 5px);} } /***** miniature *****/ .miniature>a { display: block;} .miniature .link_text_arrow { display: block; margin-top: 15px; font: 500 clamp(20px, 1.6vw, 22px)/120% "ClashGrotesk-Variable"; letter-spacing: 0;} /***** card color *****/ .card_color { position: relative; background: linear-gradient(to left, var(--bgColorLight) 0% 50%, #fff 50% 100%); background-size: 200% 100%; background-position: 100% 0; transition: all 300ms ease-in-out;} .card_color .wrap { display: grid; height: 100%; grid-template-rows: 1fr auto;} .card_color a:after { position: absolute; right: 25px; bottom: 25px; width: 25px; height: 16px; background: url("../images/arrow_link.svg") 50% / contain no-repeat; z-index: 10; content: "";} .card_color .head { padding: clamp(20px, 2.5vw, 30px) clamp(20px, 3vw, 40px);} .card_color .head .tag { transform: scale(0.9); transform-origin: left top; display: block;} .card_color .head .sous_titre { margin: 0; padding: 5px 0;} .card_color .head .date { transform: scale(0.9); transform-origin: left bottom; display: block;} .card_color .head .date li { display: inline-block;} .card_color .head .date li:nth-child(2) { padding-left: 30px; position: relative;} .card_color .head .date li:nth-child(2):before { width: 7px; height: 100%; background: url("../images/arrow_sub.svg") 0 52% / contain no-repeat; position: absolute; top: 0; left: 9px; transform: rotate(-90deg); content: "";} .card_color .txt { padding: clamp(20px, 2.5vw, 30px) clamp(20px, 3vw, 40px) 55px clamp(20px, 3vw, 40px);} .card_color .txt p { display: block; height: 110px; text-overflow: ellipsis; overflow: hidden;} @media (min-width:1201px) { .card_color:has(a.wrap):hover { background-position: 0 0; transform: translateY(-15px);} } @media (max-width:700px) { .card_color .txt { padding-bottom: 45px;} .card_color a:after { right: clamp(20px, 4vw, 25px); bottom: clamp(20px, 4vw, 25px); /*width: 20px; height: 12px; background-image: url("../images/arrow_link_small.svg");*/} } /***** grid bloc *****/ .grid_bloc { position: relative;} .grid_bloc:before { width: auto; height: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: var(--bgColorLight); transition: none; z-index: -1; visibility: hidden; content: "";} .grid_bloc .container { display: grid; grid-gap: 15px;} .grid_bloc .container img { width: 100%; height: auto; object-fit: cover; display: block; border-radius: var(--imgRadius);} .grid_bloc .item { padding: clamp(20px, 3vw, 35px) clamp(20px, 3vw, 40px);} .grid_bloc .item :last-child { margin-bottom: 0;} @media (max-width:1200px) { .grid_bloc:before { left: 0; right: 0; top: 0; bottom: 0; border-radius: 0;} } @media (max-width:700px) { .grid_bloc .container { grid-gap: 10px;} } /* custom colums */ .grid_bloc.col_2 .container { grid-template-columns: repeat(2, 1fr);} .grid_bloc.col_3 .container { grid-template-columns: repeat(3, 1fr);} .grid_bloc.col_4 .container { grid-template-columns: repeat(4, 1fr);} .grid_bloc.col_5 .container { grid-template-columns: repeat(5, 1fr);} .grid_bloc.col_6 .container { grid-template-columns: repeat(5, 1fr);} .grid_bloc.col_7 .container { grid-template-columns: repeat(7, 1fr);} .grid_bloc.col_8 .container { grid-template-columns: repeat(8, 1fr);} @media (max-width:1200px) { .grid_bloc.col_4 .container { grid-template-columns: 1fr 1fr;} .grid_bloc.col_7 .container { grid-template-columns: repeat(6, 1fr);} } @media (max-width:1000px) { .grid_bloc.col_3 .container { grid-template-columns: 1fr;} .grid_bloc.col_7 .container { grid-template-columns: repeat(4, 1fr);} } @media (max-width:700px) { .grid_bloc.col_2 .container, .grid_bloc.col_3 .container, .grid_bloc.col_4 .container { grid-template-columns: 1fr;} .grid_bloc.col_7 .container { grid-template-columns: repeat(3, 1fr);} } /* swipe mobile */ @media (max-width:700px) { .swipe_mobile .container { display: flex; gap: 10px; width: 100vw; margin-left: -5vw; overflow-x: auto; padding: 0 5vw;} .swipe_mobile .container::-webkit-scrollbar { display: none;} .swipe_mobile .container .item { min-width: clamp(280px, 75vw, 360px);} } /** grid miniatures **/ .grid_miniatures .container { grid-template-columns: 1.1fr 1fr 1fr 1fr; grid-gap: clamp(10px, 2.5vw, 40px);} .grid_miniatures .item { padding: 0;} .grid_miniatures .intro { align-self: center;} .grid_miniatures .no_arrow:before { display: none;} @media (max-width:1200px) { .grid_miniatures .container { grid-template-columns: 1.4fr 1fr 1fr 1fr;} } @media (max-width:1000px) { .grid_miniatures .container { grid-template-columns: 1fr 1fr 1fr;} .grid_miniatures .container .intro { grid-column: span 3; padding-bottom: 10px;} } /** grid cards **/ .grid_cards .container { grid-template-columns: 1fr 3fr;} .grid_cards .swipe_mobile .container { grid-template-columns: 1fr 1fr 1fr;} .grid_cards .item { padding: 0;} .grid_cards .intro { padding: 0 clamp(20px, 3vw, 40px); align-self: center;} @media (max-width:1600px) { .grid_cards .intro { padding-left: 0;} } @media (max-width:1200px) { .grid_cards .container { grid-template-columns: 1fr;} .grid_cards .intro { padding: 0 0 10px 0;} } @media (max-width:1000px) { .grid_cards ::-webkit-scrollbar { display: none;} .grid_cards .swipe_mobile .container { width: 100vw; overflow-x: auto; padding: 0 5vw 0 5vw; margin: 0 -5vw;} .grid_cards .swipe_mobile .item { min-width: clamp(180px, 75vw, 400px); min-height: clamp(120px, 50vw, 200px);} } /***** bloc CTA *****/ .bloc_cta .container { display: grid; grid-template-columns: 1fr 1fr;} .bloc_cta .link { display: block; height: auto; padding: clamp(20px, 3vw, 50px);} .bloc_cta .link span { display: block;} .bloc_cta .link .titre_main { margin: -0.6vw 0 clamp(40px, 6vw, 75px) 0;} .bloc_cta .link .titre_main:after { width: 42px; height: 32px; background: url("../images/cta_demo.svg") 50% / contain no-repeat; filter: invert(1); display: inline-block; margin: 0 0 -6px 15px; content: "";} .bloc_cta .link .link_text_arrow { position: absolute; right: clamp(20px, 2.4vw, 40px); bottom: clamp(20px, 2.4vw, 40px); padding-right: 40px; margin-bottom: -8px;} .bloc_cta .link .link_text_arrow:before { filter: invert(1); background-image: url("../images/arrow_link.svg"); width: 25px;} .bloc_cta .link_purple .titre_main:after { background-image: url("../images/cta_offer.svg");} @media (max-width:1000px) { .bloc_cta .container { grid-template-columns: 1fr; grid-gap: clamp(10px, 2vw, 15px);} } @media (max-width:700px) { .bloc_cta .link { padding: clamp(20px, 5vw, 30px);} .bloc_cta .link .titre_main { padding-left: calc(34px + clamp(20px, 5vw, 30px)); margin: 0.5vw 0 6.5vw 0;} .bloc_cta .link .titre_main:after { width: 34px; height: 100%; position: absolute; left: 0; top: 0; margin: 0;} .bloc_cta .link .link_text_arrow { font-size: 0; right: clamp(20px, 4vw, 25px); bottom: clamp(20px, 4vw, 25px);} } /***** show hide *****/ .show_hide { position: relative; margin: clamp(15px, 2vw, 20px) 0; display: grid; grid-gap: 10px;} .show_hide .item { position: relative;} .show_hide .item:before { width: 40px; height: 3px; position: absolute; left: 0; bottom: 0; background: #000; transition: all 300ms ease-in-out; content: "";} .show_hide .item_purple:before { background: var(--purple);} .show_hide .item_green:before { background: var(--green);} .show_hide .item_orange:before { background: var(--orange);} .show_hide .item_cyan:before { background: var(--cyan);} .show_hide .item_blue:before { background: var(--blue);} .show_hide .titre { font: 500 clamp(20px, 1.6vw, 23px)/140% "ClashGrotesk-Variable"; letter-spacing: 0; position: relative; cursor: pointer; padding: clamp(10px, 1.6vw, 22px) 40px clamp(10px, 1.6vw, 22px) 0; margin: 0; transition: color 200ms ease-in-out;} .show_hide .titre:after { width: 22px; height: 2px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: #000; transition: none; content: "";} .show_hide .titre:before { width: 2px; height: 22px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: #000; transition: none; content: "";} .show_hide .titre.active:before { display: none;} .show_hide .hide { margin: 0; padding: 0 0 clamp(15px, 4vw, 30px) 0; display: none; /*opacity: 0; transition: opacity 200ms ease-in-out 0ms;*/} .show_hide .hide .hide_wrap { opacity: 0; transition: opacity 200ms ease-in-out 0ms;} .show_hide .hide p { margin-bottom: 15px;} .show_hide .hide p a { color: var(--red); border-bottom: 1px solid var(--red); padding-bottom: 1px;} .show_hide .hide :last-child { margin-bottom: 0;} .show_hide .item.active:before { width: 100%; transition-delay: 400ms;} .show_hide .item.active .hide .hide_wrap { opacity: 1; transition-delay: 400ms;} @media (max-width:1000px){ .show_hide .titre { font-size: clamp(18px, 2.6vw, 25px);} } @media (max-width:700px){ .show_hide { grid-gap: 0;} .show_hide .item:before { display: none;} .show_hide .hide .hide_wrap { opacity: 1;} .show_hide .titre:after { width: 18px;} .show_hide .titre:before { height: 18px; right: 8px;} } /** variant show hide faq **/ .show_hide.faq { margin: clamp(15px, 2.5vw, 25px) 0;} .show_hide.faq .item { border: 2px solid #000; margin: 0;} .show_hide.faq .item:before { display: none;} .show_hide.faq .titre { font: 600 clamp(14px, 1.4vw, 18px)/140% "Manrope"; letter-spacing: 0.4px; padding: 20px 65px 20px 25px;} .show_hide.faq .titre:after { right: 25px;} .show_hide.faq .titre:before { right: 35px;} .show_hide.faq .hide { padding: 0 30px 20px 30px;} /* .show_hide.faq .item_purple { border-color: var(--purple);} .show_hide.faq .item_green { border-color: var(--green);} .show_hide.faq .item_orange { border-color: var(--orange);} .show_hide.faq .item_cyan { border-color: var(--cyan);} .show_hide.faq .item_blue { border-color: var(--blue);} */ @media (max-width:1000px){ .show_hide.faq .titre { font-size: clamp(14px, 2vw, 18px); padding: 18px 60px 18px 30px;} } @media (max-width:700px){ .show_hide.faq { grid-gap: 10px;} .show_hide.faq .item { border: none; background: var(--bgColorLight);} .show_hide.faq .titre { padding: 14px 60px 16px 20px; letter-spacing: 0.2px;} .show_hide.faq .titre:after { right: 20px;} .show_hide.faq .titre:before { right: 28px;} .show_hide.faq .hide { padding: 0 20px 15px 20px;} } /***** book bloc *****/ .book_bloc { position: fixed; left: 0; top: 0; bottom: 0; right: 0; display: none; z-index: 999;} .book_bloc_close { position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: #000; opacity: 0.5;} .book_bloc .wrapper { width: 100%; max-width: 1024px; height: 100%; padding: 0; margin: 0; float: right;} .book_bloc .container { width: 100%; height: 100%; background: #fff; margin: 0 auto;} .book_bloc .container .titre { padding: clamp(30px, 5vw, 50px) clamp(20px, 5vw, 50px) 5px clamp(20px, 5vw, 50px); margin: 0;} .book_bloc .container iframe { width: 100%; height: 100%; position: relative; border: none;} .book_bloc .close { position: absolute; right: 20px; top: 20px; width: 60px; height: 60px; cursor: pointer; z-index: 20;} .book_bloc .close:after { width: 26px; height: 2px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); background: #000; transition: none; content: "";} .book_bloc .close:before { width: 2px; height: 26px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); background: #000; transition: none; content: "";} @media (min-width:1200px){ .book_bloc#book_support .close, .book_bloc#book_demo .close { margin-right: 8px;} } @media (max-width:1020px){ .book_bloc#book_support iframe, .book_bloc#book_demo iframe { margin-top: -25px; height: calc(100% + 25px);} } @media (max-width:700px){ .book_bloc .container .titre { padding-bottom: 0;} .book_bloc .close { right: 0; top: 0; filter: invert(1); background: #fff; width: 44px; height: 44px;} .book_bloc .close:after { width: 22px;} .book_bloc .close:before { height: 22px;} .book_bloc#helpdesk iframe { padding: 0 calc(5vw - 15px);} } /***** contact info *****/ .contact_infos .icon { padding-left: 30px; line-height: 220%; position: relative;} .contact_infos .icon:after { width: 16px; height: 100%; position: absolute; left: 0; top: 0; content: "";} .contact_infos .tel a:after { background: url("../images/tel.svg") 0 50% no-repeat;} .contact_infos .email a:after { background: url("../images/email.svg") 0 50% no-repeat;} .contact_infos .linkedin a:after { background: url("../images/linkedin.svg") 0 30% no-repeat;} .contact_infos p:not(.sous_titre) { margin: 0;} .contact_infos p.email { margin: 4px 0 6px 0;} /***** footer *****/ .footer { background: #000; padding-top: clamp(40px, 8vw, 120px);} .footer a { color: #fff; display: inline-block;} .footer .container { display: grid; grid-template-columns: 140px auto auto auto 1fr auto; grid-gap: 4vw; color: #fff; letter-spacing: 0.6px; position: relative;} .footer .container .logo { width: 100%; height: auto; display: block; filter: invert(1);} .footer .bloc_footer { position: relative;} .footer .bloc_footer .sous_titre { font-size: clamp(16px, 2.4vw, 20px); line-height: 120%;} .footer .contact_infos .icon:after { filter: invert(1);} .footer .bloc_footer ul li a { line-height: 200%;} .footer .top_scroll { display: grid; grid-template-columns: auto auto; align-items: center; align-self: start;} .footer .top_scroll .scroll { width: 50px; height: 50px; background: url("../images/arrow_link_small.svg") 50% no-repeat #fff; display: block; border-radius: 50%; transform: rotate(-90deg);} .footer .top_scroll .langs { margin-right: 30px;} .footer .top_scroll .langs div:before { filter: invert(1);} .footer .top_scroll .langs ul { box-shadow: none;} .footer .top_scroll .langs ul li a { color: #000;} .footer_bottom { line-height: 0; margin-top: clamp(40px, 10vw, 140px); background: #fff; text-align: center;} .footer_bottom .wrapper_large { display: grid; grid-template-columns: 90px 1fr 80px; grid-gap: 20px; align-items: center; min-height: 90px; padding: 20px 0;} .footer_bottom .wrapper_large>a { display: block;} .footer_bottom .wrapper_large>a.toponweb { margin-bottom: -5px;} .footer_bottom img { width: 100%; height: auto; display: block;} .footer_bottom ul li { display: inline-block; font-size: 14px; line-height: 20px; margin-right: 30px; position: relative;} .footer_bottom ul li:last-child { margin: 0;} .footer_bottom ul li a { color: #000;} @media (min-width:1201px) { .footer a:not(.scroll):hover { opacity: 0.5;} .footer a.scroll:hover { transform: rotate(-90deg) translateX(8px);} } @media (max-width:1200px) { .footer .container { grid-template-columns: auto auto auto auto;} .footer .logo { grid-column: span 4; max-width: 120px;} .footer .top_scroll { position: absolute; right: 0; top: 0;} .footer_bottom { margin-top: clamp(30px, 8vw, 120px); text-align: left;} .footer_bottom .wrapper_large { display: block; padding-right: 120px;} .footer_bottom .wrapper_large>a.idtech { width: 90px; margin: 10px 0;} .footer_bottom .wrapper_large>a.toponweb { margin-bottom: 0; position: absolute; bottom: 20px; right: 0;} .footer_bottom ul li { font-size: 13px; margin-right: 20px;} } @media (max-width:1000px) { .footer .container { grid-template-columns: auto auto auto; grid-gap: 6vw 4vw;} .footer .logo { grid-column: span 3;} .footer .contact_infos { grid-column: span 3; margin-top: -2vw;} .footer .contact_infos .sous_titre { display: none;} .footer .top_scroll { position: absolute; right: 0; top: 0;} } @media (max-width:700px) { .footer .container { grid-template-columns: 1fr; grid-gap: 2vw;} .footer .logo { grid-column: auto; max-width: 100px;} .footer .bloc_footer { margin: 0 3vw;} .footer .contact_infos { grid-column: auto; margin: 5vw 3vw 3vw 3vw;} .footer .bloc_footer .sous_titre { line-height: 40px; margin: 0;} .footer .bloc_footer i { width: 100%; height: 40px; display: block; position: absolute; top: 0; left: 0;} .footer .bloc_footer i:before { width: 7px; height: 100%; background: url("../images/arrow_sub.svg") 0 50% / contain no-repeat; position: absolute; top: 0; right: 0; filter: invert(1); content: "";} .footer .bloc_footer i.active:before { transform: rotate(-180deg);} .footer .top_scroll .langs { margin-right: 25px; filter: invert(1);} .footer .top_scroll .scroll { width: 44px; height: 44px;} .footer .bloc_footer ul { display: none; padding: 0 2vw;} .footer .bloc_footer ul li a { opacity: 0.65; line-height: 220%;} .footer_bottom .wrapper_large>a.idtech { margin: 10px 0 15px 0;} .footer_bottom ul li { font-size: 12px; line-height: 200%; display: block; margin: 0;} }