/***** fonts *****/ /* latin-ext */ @font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 100 1000; font-display: swap; src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Fp2ywxg089UriCZa4ET-DNl0.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: 'DM Sans'; font-style: italic; font-weight: 100 1000; font-display: swap; src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Fp2ywxg089UriCZa4Hz-D.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; } /* latin-ext */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZ2IHSeH.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: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZOIHQ.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; } /***** variables *****/ :root { --blue: #238cff; --gray: #f3f3f3; --bgColorLight: #f3f3f3; --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(70px, 8vw, calc(100px + 2vw)) 0; --paddingT: clamp(70px, 8vw, calc(100px + 2vw)); --paddingB: clamp(70px, 8vw, calc(100px + 2vw)); --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); --paddingTB: clamp(45px, 12vw, 70px) 0; --paddingT: clamp(45px, 12vw, 70px); --paddingB: 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: 500; font-size: clamp(16px, 1.3vw, 18px);} ul { list-style-type: none;} body { font: 400 clamp(14px, 1.2vw, 16px)/165% "DM Sans"; letter-spacing: 0.2px; color: var(--txtColor); background: #fff; position: relative;} body:before { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,35%); backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transition: all 300ms cubic-bezier(0.4,0,0.2,1) 400ms; z-index: 999; content: "";} body.active:before { opacity: 1; visibility: visible; transition-delay: 0ms;} body.active_overflow { height: 100vh; overflow: hidden;} a { text-decoration: none; position: relative; color: var(--txtColor);} img { border: none;} p { margin-bottom: clamp(10px, 1.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(14px, 2.2vw, 16px);} } @media (max-width:700px) { body { line-height: 160%; letter-spacing: 0;} } /***** 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, .sub { transition: all 300ms ease-in;} } /***** class *****/ .wrapper { width: 70vw; margin: 0 auto; position: relative;} .wrapper_small { width: 60vw; margin: 0 auto; position: relative;} .wrapper_large { width: 80vw; margin: 0 auto; position: relative;} @media (max-width:2000px) { .wrapper { width: 80vw;} .wrapper_large { width: 90vw;} } @media (max-width:1400px) { .wrapper { width: 90vw;} } .margin_top_bottom { margin: var(--marginTB);} .margin_top { margin-top: var(--marginT);} .margin_bottom { margin-bottom: var(--marginB);} .margin_top_bottom_m { margin: calc(var(--marginT) * 0.65) auto;} .margin_top_m { margin-top: calc(var(--marginT) * 0.65);} .margin_bottom_m { margin-bottom: calc(var(--marginB) * 0.65);} .margin_top_bottom_s { margin: calc(var(--marginT) * 0.35) auto;} .margin_top_s { margin-top: calc(var(--marginT) * 0.35);} .margin_bottom_s { margin-bottom: calc(var(--marginB) * 0.35);} .margin_top_bottom_xs { margin: calc(var(--marginT) * 0.2) auto;} .margin_top_xs { margin-top: calc(var(--marginT) * 0.2);} .margin_bottom_xs { margin-bottom: calc(var(--marginB) * 0.2);} .color_blue { color: var(--blue);} .clear { clear: both; display: block;} .anchor_section { scroll-margin-top: 120px;} .txt_size_m { font-size: clamp(14px, 1.5vw, 18px);} .titre_main { font: 700 clamp(28px, 3vw, 60px)/110% "DM Sans"; letter-spacing: 1.4px; position: relative; margin-bottom: clamp(12px, 1.2vw, 15px);} .titre_main.bigger { font-size: clamp(40px, 3.5vw, 70px);} .titre_main.smaller { font-size: clamp(22px, 2.5vw, 40px); letter-spacing: 1px; margin-bottom: clamp(10px, 1.2vw, 15px);} .titre_main span { display: inline-block;} .titre { font: 600 clamp(22px, 1.5vw, 30px)/120% "DM Sans"; letter-spacing: 0.6px; position: relative; margin-bottom: clamp(10px, 1.2vw, 15px);} .sous_titre { font: 400 clamp(20px, 1.8vw, 30px)/120% "DM Sans"; letter-spacing: 0.8px; position: relative; margin-bottom: clamp(10px, 1.2vw, 15px);} .sous_titre.smaller { font-size: clamp(16px, 1.6vw, 22px); line-height: 130%; letter-spacing: 0.4px;} .chapo { font: 600 clamp(18px, 2vw, 40px)/130% "DM Sans"; margin-bottom: clamp(10px, 1.2vw, 15px);} .chapo.bigger { font-size: clamp(24px, 3vw, 55px);} .chapo.smaller { font-size: clamp(18px, 1.45vw, 24px); line-height: 140%; font-weight: 500;} .link { font: 500 clamp(15px, 1.3vw, 16px)/58px "DM Sans"; letter-spacing: 0.4px; height: 60px; display: inline-block; color: #fff; padding: 0 35px; border-radius: var(--linkRadius); background: linear-gradient(to top, var(--blue) 0% 50%, #000 50% 100%); background-size: 100% 205%; background-position: 0 100%;} .link_black { background-image: linear-gradient(to top, #000 0% 50%, var(--blue) 50% 100%);} .link span { position: relative; z-index: 5;} .link_border { color: var(--txtcolor); border: 1px solid #ddd; background-image: linear-gradient(to top, #fff 0% 50%, var(--bgColorLight) 50% 100%)} .link_txt_arrow { font: 600 clamp(15px, 1.3vw, 16px)/40px "DM Sans"; display: inline-block; padding-right: 50px; position: relative;} .link_txt_arrow:before { width: 36px; height: 36px; position: absolute; right: 0; top: 2px; border-radius: 50%; background: url("../images/arrow_black.svg") 48% 50% no-repeat var(--gray); content: "";} .link_txt_arrow.blue:before { background: url("../images/arrow_white.svg") 48% 50% no-repeat var(--blue);} .link_arrow { width: 36px; height: 36px; display: block; background: #fff; border-radius: 50%; position: relative;} .link_arrow:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("../images/arrow_black.svg") 48% 50% no-repeat; content: "";} .link_arrow.blue { background: var(--blue);} .link_arrow.blue:after { filter: invert(1);} .read_more { display: inline-block; color: var(--green); cursor: poDM Sans; transition: color 300ms ease-in-out;} .hide { display: none;} .ul_check { margin: clamp(15px, 1.6vw, 25px) 0;} .ul_check li { position: relative; padding-left: clamp(28px, 2vw, 32px); font-size: clamp(15px, 1.3vw, 18px); line-height: 140%; font-weight: 500; margin-bottom: 10px;} .ul_check li:before { width: clamp(16px, 1.4vw, 20px); height: clamp(16px, 1.4vw, 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_check_square { margin: clamp(15px, 2vw, 20px) 0;} .ul_check_square li { position: relative; padding-left: 34px; margin-bottom: 10px; line-height: 160%;} .ul_check_square li:before { width: 22px; height: 22px; background: url("../images/check_small.svg") 50% 55% var(--blue) no-repeat; position: absolute; left: 0; top: 2px; content: "";} .ul_check_square.bbs { padding-top: 5px;} .ul_check_square.bbs li { margin-bottom: clamp(15px, 2.2vw, 20px); padding-left: 40px;} .ul_check_square.bbs li b { font-weight: 500;} .ul_check_square.bbs li:before { background-color: #000; width: 26px; height: 26px; top: 0;} .ul_less_square { margin: clamp(15px, 2vw, 20px) 0;} .ul_less_square li { position: relative; padding-left: 34px; margin-bottom: 10px; line-height: 160%;} .ul_less_square li:before { width: 22px; height: 22px; background: #000; position: absolute; left: 0; top: 2px; content: "";} .ul_less_square li:after { width: 8px; height: 2px; background: #fff; position: absolute; left: 7px; top: 12px; content: "";} .ul_list { margin: clamp(10px, 2vw, 20px) 0;} .ul_list li { position: relative; padding-left: 28px; margin-bottom: 10px; line-height: 160%;} .ul_list li:before { width: 14px; height: 3px; position: absolute; left: 0; top: 12px; background: var(--blue); content: "";} .ul_list li:last-child { margin-bottom: 0;} lord-icon { width: clamp(40px, 6vw, 80px); height: clamp(40px, 6vw, 80px); display: block; margin: 0;} .titre_icon { display: flex; gap: 20px; align-items: center; margin-bottom: clamp(10px, 2vw, 15px); position: relative;} .titre_icon * { margin: 0;} .titre_check { position: relative; padding-left: 34px; font-weight: 500; font-size: clamp(18px, 1.4vw, 20px);} .titre_check:before { width: 22px; height: 22px; background: url("../images/check_small.svg") 50% 55% var(--blue) no-repeat; position: absolute; left: 0; top: 2px; content: "";} @media (min-width:1201px) { .link:hover { background-position: 0 0;} .link_txt_arrow.blue:hover:before { background-color: #000;} .link_txt_arrow:not(.blue):hover:before { filter: invert(1);} } @media (max-width:1800px) { .titre_main { letter-spacing: 1px;} .titre { letter-spacing: 0.4px;} .sous_titre { letter-spacing: 0.8px;} } @media (max-width:1400px) { .titre_main { letter-spacing: 0.8px;} .titre_main.smaller { letter-spacing: 0.6px;} .titre { letter-spacing: 0.2px;} .sous_titre { letter-spacing: 0.4px;} } @media (max-width:1200px) { .titre_main { letter-spacing: 0.6px;} .titre_main.smaller { letter-spacing: 0.2px;} .sous_titre { letter-spacing: 0.2px;} .link { background: var(--blue);} .link_black { background: #000;} } @media (max-width:1000px) { lord-icon { width: clamp(46px, 9vw, 60px); height: clamp(46px, 9vw, 60px);} .titre_main, .titre_main.bigger { font-size: clamp(26px, 7.6vw, 40px); line-height: 120%; letter-spacing: 0.4px;} .titre_main.smaller { font-size: clamp(18px, 4vw, 22px); letter-spacing: 0;} .chapo { font-size: clamp(22px, 5.6vw, 28px);} .chapo.bigger { font-size: clamp(22px, 5.6vw, 28px);} .chapo.smaller { font-size: clamp(15px, 3.8vw, 18px);} .titre { font-size: clamp(18px, 4.8vw, 22px); letter-spacing: 0;} .sous_titre { font-size: clamp(17px, 4.6vw, 20px);} .txt_size_m { font-size: clamp(14px, 2.2vw, 18px);} } @media (max-width:700px) { .titre_main, .titre_main.bigger, .sous_titre { letter-spacing: 0;} .link { height: 50px; line-height: 48px; padding: 0 25px;} .link_txt_arrow { padding-right: 40px; line-height: 32px;} .link_txt_arrow:before { width: 28px; height: 28px; top: 2px; background-image: url("../images/arrow_white.svg"); background-color: var(--blue); background-position: 45% 50%;} .link_arrow { width: 28px; height: 28px; background-position: 45% 50%;} .ul_check_square li { padding-left: 32px; line-height: 150%;} .ul_check_square li:before { width: 20px; height: 20px; background-position: 50% 52%; top: 0;} .ul_check_square.bbs li { padding-left: 36px;} .ul_check_square.bbs li:before { width: 22px; height: 22px; top: -1px;} .ul_less_square li { padding-left: 32px; line-height: 150%;} .ul_less_square li:before { width: 20px; height: 20px; top: 0; content: "";} .ul_less_square li:after { width: 6px; top: 9px;} .titre_check { padding-left: 32px;} .titre_check:before { width: 20px; height: 20px; top: 1px;} } /***** header et menu *****/ .header { width: 100%; position: fixed; left: 0; top: 0; z-index: 100; padding: 25px 0; background: #fff; transition: all 300ms ease;} .header .wrapper_large { display: grid; grid-template-columns: 200px 1fr auto; grid-gap: 4vw; align-items: center;} .header .logo { width: 100%;} .header .logo img { width: 100%; height: auto; display: block;} .header .menu { display: flex; flex-wrap: wrap; width: max-content;} .header .menu>li { padding-right: 30px; position: relative;} .header .menu>li:last-child { padding-right: 0;} .header .menu>li:has(.sub_full) { position: static;} .header .menu>li>a, .header .menu>li>span { font-size: 18px; line-height: 40px; font-weight: 500; letter-spacing: 0.4px; display: inline-block; vertical-align: top; position: relative; transition: all 300ms ease-in; cursor: pointer;} .header .menu>li>span { cursor: default;} .header .menu>li i { width: 7px; height: 40px; display: inline-block; vertical-align: top; position: relative; transition: all 300ms ease-in;} .header .menu>li i:before { width: 7px; height: 100%; background: url("../images/arrow_sub.svg") 0 50% / contain no-repeat; position: absolute; top: 0; right: 0; content: "";} .header .menu>li:has(i)>a, .header .menu>li:has(i)>span { padding-right: 8px;} .header .sub { width: 100%; min-width: 250px; display: flex; flex-wrap: wrap; justify-content: space-between; padding: clamp(10px, 1vw, 20px); position: absolute; left: 0; background: #fff; z-index: 900;} .header .sub:before { width: 100%; height: 25px; position: absolute; left: 0; top: -25px; content: "";} .header .sub ul { padding-inline: 10px; min-width: 100%;} .header .sub ul li a { display: block; line-height: 210%;} .header .sub ul li a:before { width: 5px; height: 100%; background: url("../images/arrow_list.svg") 50% 48% / contain no-repeat; position: absolute; top: 0; right: 0; content: "";} .header .sub_full ul { margin-bottom: clamp(15px, 2.5vw, 25px); padding: 0; min-width: inherit;} .header .sub_full ul:last-of-type { margin-bottom: 0;} .header .sub_full ul li a { opacity: 0.7; line-height: 200%; padding-inline: 18px clamp(55px, 4vw, 90px);} .header .sub_full ul li a:before { right: auto; left: 0;} .header .sub_full ul li .main { opacity: 1; font-weight: 600; font-size: 18px; line-height: 32px; margin: 0 0 5px 0; display: block; padding-left: 0;} .header .sub_full ul li a.main:after { width: 32px; height: 32px; position: absolute; right: 0; top: 0; border-radius: 50%; background: url("../images/arrow_black.svg") 48% 50% no-repeat var(--gray); content: "";} .header .sub_full ul li a.main:before { display: none;} .header .sub_full .col_head { width: 22%; max-width: 380px; padding: clamp(10px, 1.8vw, 30px); padding-right: 0;} .header .sub_full .col { padding: clamp(10px, 1.8vw, 30px) 0;} .header .sub_full .col_img { width: 25%; max-width: 400px; position: relative;} .header .sub_full .col_img img { width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;} .header .sub_full .ul_main { margin-bottom: 35px;} .header .sub_full .ul_main li .main { margin: 0 0 20px 0;} .header .cta_langs { display: grid; grid-template-columns: auto auto; align-items: center; position: relative; z-index: 10; padding: 5px 0;} .header .cta_langs .link { height: 50px; line-height: 48px; font-weight: 500; padding: 0 25px; z-index: 10;} .header .cta_langs .langs { margin-left: 30px; z-index: 15;} .sticky:not(.scrolling_top) .header { transform: translateY(-100%);} @media (min-width:1201px) { .menu_mobile, .header .mobile_only { display: none;} .header .menu>li .sub { visibility: hidden; opacity: 0; box-shadow: 0 50vh 0 200vh rgba(0, 0, 0, 50%); top: 60px;} .header .menu>li .sub_full { top: 80px;} .header .menu>li:hover { z-index: 999;} .header .menu>li:hover .sub { visibility: visible; opacity: 1; top: 50px; z-index: 905;} .header .menu>li:hover .sub_full { top: 70px; z-index: 905;} .header .menu>li:hover>a { color: var(--blue); z-index: 999;} .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 ul li a:hover, .header .sub_full ul li a.main:hover { color: var(--blue);} .header .sub_full ul li a:hover { color: #000; opacity: 1;} .sticky .header { padding: 15px 0;} } @media (max-width:1400px) { .header .menu>li { padding-right: 25px;} } @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 600ms;} .menu_mobile div:before { width: 100%; height: 2px; background: #000; position: absolute; right: 0; top: 7px; content: ""; transition: all 0ms ease-in-out 600ms;} .menu_mobile div:after { width: 100%; height: 2px; background: #000; position: absolute; right: 0; top: -7px; content: ""; transition: all 0ms ease-in-out 600ms;} .menu_mobile.active div { height: 0; width: 30px; margin-right: -15px; transform: translateX(4px); 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 { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,35%); backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transition: all 300ms cubic-bezier(0.4,0,0.2,1) 600ms; z-index: 100; content: "";} .header ::-webkit-scrollbar { display: none;} .header .wrapper_large { grid-template-columns: 1fr auto auto; grid-gap: 4vw;} .header .logo { width: 160px;} .header .header_nav { width: 500px; position: fixed; right: -500px; top: 0; bottom: 0; overflow-y: scroll; z-index: 200; background: #fff; margin: 0; transition: all 600ms cubic-bezier(0.4,0,0.2,1) 300ms;} .header .menu { display: block; width: auto; padding: 80px 5vw 0 5vw; opacity: 0; transition: opacity 600ms cubic-bezier(0.4,0,0.2,1) 0ms;} .header .menu>li { width: 100%; display: block; padding: 0; line-height: 0;} .header .menu>li>a, .header .menu>li>span { font-size: clamp(18px, 4.5vw, 26px); line-height: 60px; font-weight: 600; letter-spacing: 0.2px; 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: 60px; margin-top: -60px; transition: all 0ms ease-in-out 0ms;} .header .menu>li i:before { width: 36px; height: 36px; border-radius: 50%; background: url("../images/arrow_black.svg") 48% 50% no-repeat var(--gray); top: 52%; transform: translateY(-50%);} .header .menu>li i.active { position: fixed; top: 0; right: calc(460px - 5vw); width: 40px; height: 90px; margin: 0; z-index: 25;} .header .menu>li i.active:before { top: 50%; left: 0; right: auto; background-color: transparent; transform: translateY(-50%) rotate(180deg); background-position: right center;} .header .menu>li i.active:after { content: "Back"; font-size: 13px; line-height: 92px; position: absolute; left: 30px; top: 0; font-style: normal; letter-spacing: 0.4px;} .header .sub { position: fixed; left: auto; right: -500px; top: 0; bottom: 0; width: 500px; z-index: 20; padding: 100px 5vw 5vw 5vw; overflow-y: scroll; line-height: 160%; display: block; background: var(--gray); transition: all 300ms ease-in-out 200ms;} .header .sub.active { right: 0; transition-delay: 0ms;} .header .sub .col_head { display: none;} .header .sub .col, .header .sub .col_cta { width: 100%; max-width: none; padding: 0;} .header .sub .col, .header .sub_full .ul_main { margin-bottom: 5vw;} .header .sub_full ul li a.main:after { background-color: #fff;} .header .sub ul { padding: 0;} .header .sub:not(.sub_full) ul li a { font-weight: 600; font-size: 18px; line-height: 32px; margin-bottom: 20px;} .header .sub:not(.sub_full) ul li a:before { width: 32px; height: 32px; border-radius: 50%; background: url(../images/arrow_black.svg) 48% 50% no-repeat #fff;} .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; } .header .mobile_only .link { width: 100%; height: 50px; line-height: 48px; text-align: center; margin: 5vw 0;} .header .mobile_only>ul { padding-top: 5vw; line-height: 160%;} .header .mobile_only>ul li { display: inline-block; margin-right: 15px;} .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: 1; visibility: visible; transition-delay: 0ms;} .header.active .header_nav { right: 0; transition-delay: 150ms;} .header.active .menu { opacity: 1; transition-delay: 600ms;} } @media (max-width:700px) { .menu_mobile { height: 70px;} .header .wrapper_large { grid-gap: 5vw; grid-template-columns: 1fr auto;} .header .logo { width: 100px;} .header .header_nav { width: 100%; right: -100%;} .header .menu { padding-inline: 6vw;} .header .menu>li>a, .header .menu>li>span { line-height: 50px; letter-spacing: 0;} .header .menu>li i { height: 50px; margin-top: -50px;} .header .menu>li i.active { right: auto; left: 6vw; height: 70px;} .header .menu>li i.active:after { font-size: 12px; line-height: 70px;} .header .sub { width: 100%; right: -100%; padding-inline: 6vw; padding-top: 90px;} .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 { line-height: 0; display: block; display: none;} .header .cta_langs .link { height: 34px; font-size: 13px; line-height: 34px; padding: 0 15px;} .header .cta_langs .langs { display: none;} } /***** langs *****/ .langs { font-size: 14px; line-height: 220%; font-weight: 600; letter-spacing: 0.4px; text-align: center; 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: 60px; margin: 0 0 0 -30px; 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);} /***** contact info *****/ .contact_info p { margin-bottom: 10px;} .contact_info p b { font-size: clamp(16px, 1.4vw, 20px); letter-spacing: 0.2px; display: block;} .contact_info :last-child { margin-bottom: 0;} .contact_info p.address { margin-bottom: 15px;} .contact_info p a { display: inline-block;} .contact_info p.tel a { padding-left: 30px; background: url("../images/tel.svg") 0 5px no-repeat;} .contact_info p.email a { padding-left: 30px; background: url("../images/email.svg") 0 7px no-repeat;} @media (max-width:700px) { .contact_info p.tel a { background-position: 0 4px;} .contact_info p.email a { background-position: 0 6px;} } /***** head page *****/ .head_page { padding-top: clamp(160px, 14vw, calc(80px + 6vw)); position: relative;} .head_page :last-child { margin-bottom: 0;} @media (max-width:1200px) { .head_page { padding-top: calc(90px + 4vw); position: relative;} } @media (max-width:700px) { .head_page { padding-top: calc(60px + 8vw);} } /***** slick *****/ .slick-slider { position:relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;} .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0;} .slick-list:focus { outline: none;} .slick-list.dragging { cursor: pointer; cursor: hand;} .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0 0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0);} .slick-track { position: relative; top: 0; left: 0; display: block;} .slick-track:before, .slick-track:after { display: table; content: '';} .slick-track:after { clear: both;} .slick-loading .slick-track { visibility: hidden;} .slick-slide { display: none; float: left; height: 100%; min-height: 1px;} [dir='rtl'] .slick-slide { float: right;} .slick-slide img { display: block;} .slick-slide.slick-loading img { display: none;} .slick-slide.dragging img { pointer-events: none;} .slick-initialized .slick-slide { display: block;} .slick-loading .slick-slide { visibility: hidden;} .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent;} /* slick dots */ .slick-dots { width: 100%; line-height: 0; margin: clamp(10px, 2vw, 20px) 0 0 0;} .slick-dots li { display: inline-block; vertical-align: middle; margin: 0 10px 0 0; padding: clamp(10px, 2vw, 20px) 0; cursor: pointer;} .slick-dots button { border: none; font-size: 0; padding: 0; width: clamp(30px, 5vw, 60px); height: 5px; background: #ddd; display: block; cursor: pointer;} .slick-active button { background: #000;} /* slick arrows */ .slick-arrow { width: clamp(46px, 4vw, 60px); height: clamp(46px, 4vw, 60px); border: 0; padding: 0; font-size: 0; cursor: pointer; background: url("../images/arrow_black.svg") 52% 50% no-repeat #fff; border-radius: var(--linkRadius); border: 1px solid #e5e5e5;} .slick-disabled { opacity: 0.65; cursor: default;} .slick-next { left: auto; float: right; margin-left: 10px;} .slick-prev { transform: rotate(180deg);} @media (max-width:1200px) { } @media (max-width:700px) { .slick-dots li { margin: 0 7px;} } /***** bloc txt img *****/ .bloc_txt_img { position: relative;} .bloc_txt_img .container { display: grid; grid-template-columns: 1fr 50%; 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 .txt { margin: 0;} .bloc_txt_img .wrap { max-width: 650px; width: 90%; margin: 0 auto;} .bloc_txt_img .wrap_size_small { max-width: 500px;} .bloc_txt_img .wrap_size_large { max-width: 800px;} .bloc_txt_img .img picture { overflow: hidden; display: block;} .bloc_txt_img .img img { width: 100%; height: auto; object-fit: cover; display: block; border-radius: var(--imgRadius);} .bloc_txt_img .img.col_2 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: clamp(10px, 1.2vw, 20px);} .bloc_txt_img .link { margin-top: 10px;} .bloc_txt_img .multi_links { margin-top: 25px;} .bloc_txt_img.reverse .container { grid-template-columns: 50% 1fr;} .bloc_txt_img.reverse .container>.item:last-child { grid-area: 1 / 1;} .bloc_txt_img.reverse .container>.item:first-child { grid-area: 1 / 2;} @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 { margin-top: 20px;} } /***** grid sticky *****/ .grid_sticky .container { display: grid; grid-template-columns: auto 1fr; grid-gap: clamp(20px, 1.5vw, 40px); align-items: start; position: relative;} .grid_sticky .item_sticky { position: sticky; top: clamp(20px, 1.5vw, 40px); transition: all 300ms ease;} .grid_sticky .content { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.2vw, 20px);} .grid_sticky .content .item { background: var(--gray); position: relative;} .scrolling_top .grid_sticky .item_sticky { top: calc(90px + clamp(20px, 1.5vw, 40px));} @media (max-width:1000px) { .grid_sticky .container { grid-template-columns: 1fr;} .grid_sticky .item_sticky { width: 100%; position: static;} } /***** 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-template-columns: 1fr; grid-gap: clamp(10px, 1.2vw, 20px);} .grid_bloc .item :last-child { margin-bottom: 0;} .grid_bloc .item img { width: 100%; height: auto; object-fit: cover; display: block; border-radius: var(--imgRadius);} @media (max-width:1200px) { .grid_bloc:before { left: 0; right: 0; top: 0; bottom: 0; border-radius: 0;} } /* 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);} @media (max-width:1400px) { .grid_bloc.col_5 .container { grid-template-columns: repeat(4, 1fr);} } @media (max-width:1200px) { .grid_bloc.col_4 .container { grid-template-columns: 1fr 1fr;} .grid_bloc.col_5 .container { grid-template-columns: repeat(3, 1fr);} } @media (max-width:1000px) { .grid_bloc.col_3 .container { grid-template-columns: 1fr;} .grid_bloc.col_5 .container { grid-template-columns: repeat(2, 1fr);} } @media (max-width:700px) { .grid_bloc.col_2 .container, .grid_bloc.col_3 .container, .grid_bloc.col_4 .container { grid-template-columns: 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);} } /***** param *****/ .align_start .container { align-items: start;} .multi_links { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px;} .multi_links .link { margin: 0; text-align: center; padding: 0;} /**** sticky zone + nav sticky ****/ .sticky_zone { position: relative;} .nav_bloc_sticky { position: sticky; top: calc(clamp(10px, 1.5vw, 20px) - 4px); z-index: 800; transition: top 300ms ease-in-out;} .nav_bloc_sticky .sous_titre { display: none;} .nav_bloc { background: #fff; box-shadow: 0 0 40px rgba(0,0,0,8%); border-radius: var(--linkRadius); display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 35px); padding: 0 clamp(20px, 3vw, 40px); width: max-content; justify-self: center;} .nav_bloc .nav_item { font-size: 18px; line-height: 76px; font-weight: 500; letter-spacing: 0.4px; display: inline-block; vertical-align: top; position: relative; cursor: pointer;} .nav_bloc .nav_item:after { width: 0; height: 3px; background: var(--blue); position: absolute; left: 0; bottom: 18px; transition: all 300ms ease-in-out; content: "";} .nav_bloc .nav_item.active:after { width: 100%;} .nav_bloc:not(:has(a.active)) a:first-child:after { width: 100%;} .nav_bloc { background: #ffffff95; backdrop-filter: blur(15px); border: 1px solid #ffffff75;} @media (min-width: 1001px){ body.scrolling_top .nav_bloc_sticky { top: -80px;} } @media (max-width: 1400px){ .nav_bloc .nav_item { font-size: 16px; height: 70px; line-height: 66px;} } @media (max-width:1000px) { .sticky_zone { margin-top: -10px;} .nav_bloc_sticky { position: absolute; left: 10vw; top: 10px; margin: 0 auto; width: 80vw; transition: none; background: #fff; box-shadow: 0 0 40px rgba(0,0,0,8%);} .nav_bloc_sticky .sous_titre { display: block; height: 50px; line-height: 40px; padding: 5px 20px; margin: 0; font-size: clamp(15px, 4.2vw, 18px); font-weight: 500;} .nav_bloc_sticky .container { display: block;} .nav_bloc_sticky .nav_bloc { display: block; width: 100%; padding: 15px 20px; box-shadow: none; border: none; border-top: 1px solid #e5e5e5; background: #fff;} .nav_bloc_sticky .open_close { position: absolute; right: 0; top: 0; left: 0; bottom: 0;} .nav_bloc_sticky .open_close:before { position: absolute; right: 7px; top: 7px; width: 36px; height: 36px; background: url("../images/arrow_down.svg") 50% 52% no-repeat #000; content: "";} .nav_bloc_sticky .nav_item { display: block; margin: 0; padding: 0 0 0 15px; background: url("../images/arrow_list.svg") 0 50% no-repeat; height: auto; line-height: 32px; font-size: clamp(14px, 2.2vw, 16px); font-weight: 400;} .nav_bloc_sticky .nav_item:after { display: none;} .nav_bloc:not(:has(a.active)) a:first-child { background-color: transparent; color: var(--blue);} .nav_bloc a.active { color: var(--blue);} .nav_bloc_sticky.is_sticky { position: fixed; top: 10px;} } @media (max-width:700px) { .nav_bloc_sticky .sous_titre { height: 46px; line-height: 36px; padding: 5px 20px;} .nav_bloc_sticky .open_close:before { width: 32px; height: 32px;} .nav_bloc_sticky .nav_bloc { padding: 14px 18px;} .nav_bloc .nav_item { line-height: 28px; letter-spacing: 0; background-position: 0 55%;} } /***** tag *****/ .tag, .tags li { display: inline-block; background: #fff; color: #000; font-size: 13px; line-height: 28px; height: 28px; border-radius: 25em; padding: 0 15px;} .tags li.blue { background: var(--blue); color: #fff;} .tags li.black { background: #000; color: #fff;} .tags { display: flex; flex-wrap: wrap; gap: 10px;} @media (max-width: 1200px){ .tag, .tags li { font-size: 12px; line-height: 24px; height: 24px; padding: 0 12px;} .tags { gap: 8px;} } /***** card reveal *****/ .card_reveal { position: relative;} .card_reveal a { display: block; overflow: hidden;} .card_reveal a:before { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0,0,0,60%) 15%, rgba(0,0,0,0) 85%); opacity: 0.25; z-index: 10; content: "";} .card_reveal picture { display: block; position: relative; z-index: 5;} .card_reveal picture img { width: 100%; height: auto; object-fit: cover; display: block; transition: all 300ms ease-in;} .card_reveal .txt { position: absolute; left: 0; right: 0; bottom: 0; color: #fff; margin: clamp(25px, 1.8vw, 30px) clamp(25px, 2.2vw, 40px); padding-bottom: 40px; overflow: hidden; z-index: 15;} .card_reveal .txt .titre { line-height: 40px; margin: 0; padding-right: 50px;} .card_reveal .tags { position: absolute; left: 20px; top: 20px; z-index: 50;} .card_reveal .link_arrow, .card_reveal .link_txt_arrow { position: absolute; right: clamp(25px, 2.2vw, 40px); bottom: clamp(25px, 1.8vw, 30px); z-index: 20;} @media (min-width:1201px) { .card_reveal .txt .wrap { transform: translateY(100%); transition: all 600ms cubic-bezier(0.4,0,0.2,1) 100ms;} .card_reveal .txt .hide { max-width: 450px; display: block; letter-spacing: 0.4px; margin: 10px 0 0 0; opacity: 0; transition: all 200ms ease-in 0ms;} .card_reveal a:hover:before { opacity: 1;} .card_reveal a:has(.hide):hover .txt .wrap { transform: translateY(0); transition-delay: 0ms;} .card_reveal a:hover .txt .hide { opacity: 1; transition-delay: 200ms;} .card_reveal a:hover .link_arrow { transform: rotate(-45deg);} .card_reveal a:hover .link_txt_arrow:before { background-color: #000;} } @media (max-width: 1200px){ .card_reveal .tags { left: 15px; top: 15px;} .card_reveal .txt { padding-bottom: 0; margin-bottom: 20px;} .card_reveal .txt .titre { line-height: 125%; padding-right: 40%;} } @media (max-width: 700px){ .card_reveal .tags { left: 12px; top: 12px;} .card_reveal .txt { margin: clamp(15px, 4vw, 25px); padding-left: 5px;} .card_reveal .link_arrow, .card_reveal .link_txt_arrow { right: clamp(15px, 4vw, 25px); bottom: clamp(15px, 4vw, 25px);} } /***** card product *****/ .card_product { padding: 0; position: relative; transition: all 300ms ease-in-out;} .card_product a, .card_product>div { display: grid; grid-template-rows: 1fr auto; grid-gap: clamp(10px, 2.2vw, 20px); height: 100%; background: var(--gray); padding: clamp(20px, 2.5vw, 30px);} .card_product img { aspect-ratio: 6/5; object-fit: contain; max-width: 400px; width: 100%; height: auto; margin: 0 auto; padding: 10px; transition: all 300ms ease-in;} .card_product .titre { margin: 0; font-size: clamp(18px, 1.4vw, 22px); line-height: 36px; letter-spacing: 0.2px; padding-right: 50px;} .card_product .titre span { font-size: 14px; line-height: 140%; font-weight: 400; letter-spacing: 0.4px; transform: translateY(4px); display: block;} .card_product .titre:has(span) { line-height: 120%;} .card_product .link_arrow, .card_product .link_txt_arrow { position: absolute; right: clamp(20px, 2.5vw, 30px); bottom: clamp(20px, 2.5vw, 30px);} .card_product .tags { position: absolute; left: 20px; top: 20px;} @media (min-width:1201px) { .card_product:has(a):hover img { transform: scale(0.95);} .card_product:has(a):hover .link_arrow, .card_product:has(a):hover .link_txt_arrow:before { background-color: #000;} } @media (max-width:1200px) { .card_product .tags { left: 15px; top: 15px;} } @media (max-width:1000px) { .card_product .titre { font-size: clamp(16px, 2.4vw, 20px); letter-spacing: 0;} .card_product .titre span { font-size: 13px;} } @media (max-width:700px) { .card_product a, .card_product>div { padding: clamp(15px, 4vw, 25px);} .card_product .titre { line-height: 28px;} .card_product .titre span { transform: none; margin-top: 4px;} .card_product .link_arrow, .card_product .link_txt_arrow { right: clamp(15px, 4vw, 25px)); bottom: clamp(15px, 4vw, 25px);} .card_product .tags { left: 12px; top: 12px;} } /***** card logo *****/ .card_logo { padding: 0; position: relative; transition: all 300ms ease-in-out;} .card_logo a, .card_logo div { display: grid; align-items: center; aspect-ratio: 1/1; background: var(--gray); padding: clamp(20px, 2vw, 40px);} .card_logo img { width: 90%; max-width: 320px; height: auto; display: block; margin: 0 auto; filter: grayscale(100%) brightness(80%); transition: all 300ms ease-in-out;} .card_logo .tags { position: absolute; left: 20px; top: 20px;} .card_logo .link_arrow { position: absolute; right: clamp(15px, 2.2vw, 20px); bottom: clamp(15px, 2.2vw, 20px);} @media (min-width:1201px) { .card_logo:has(a):hover img { filter: grayscale(0) brightness(1); transform: scale(0.95);} .card_logo:has(a):hover .link_arrow { transform: rotate(-45deg);} } @media (max-width:1200px) { .card_logo .tags { left: 15px; top: 15px;} } @media (max-width:700px) { .card_logo img { width: 100%;} .card_logo .tags { left: 12px; top: 12px; display: none;} } /***** card mod *****/ .card_mod { position: relative; background: var(--gray); transition: all 300ms ease-in-out;} .card_mod a { display: block; position: static; padding: clamp(25px, 1.8vw, 35px) clamp(25px, 2.2vw, 40px);} .card_mod .tag { margin-bottom: clamp(10px, 2vw, 20px);} .card_mod .tags { margin-top: clamp(15px, 2.5vw, 30px); padding-right: 40px;} .card_mod .date { margin-bottom: clamp(10px, 2vw, 15px); color: var(--blue); line-height: 120%;} .card_mod .date li { display: inline-block; font-size: 14px;} .card_mod .date li:nth-child(2) { padding-left: 30px; position: relative;} .card_mod .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_mod .link_arrow { position: absolute; right: clamp(15px, 1.8vw, 30px); bottom: clamp(15px, 1.8vw, 30px);} .card_job .tag { background: #000; color: #fff;} .card_job .date { color: #000;} @media (min-width:1201px) { .card_mod:has(a):hover .link_arrow { filter: invert(1);} } @media (max-width:700px) { .card_mod a { padding: clamp(20px, 5vw, 30px);} .card_mod .date li { font-size: 13px;} .card_mod .date li:nth-child(2) { padding-left: 24px; position: relative;} .card_mod .date li:nth-child(2):before { left: 7px;} } /***** bloc detail *****/ .bloc_detail { width: 90vw; max-width: 800px; position: fixed; top: 0; bottom: 0; right: -800px; padding: 0; background: #fff; z-index: 999; transition: all 600ms cubic-bezier(0.4,0,0.2,1) 400ms;} .bloc_detail .row { display: grid; grid-template-rows: auto 1fr; position: relative; height: 100%; overflow-y: auto; padding: 0 20px;} .bloc_detail .content { padding-inline: clamp(40px, 4vw, 60px); padding-bottom: clamp(40px, 4vw, 60px); opacity: 0; transition: all 400ms cubic-bezier(0.4,0,0.2,1) 200ms;} .bloc_detail .content picture { position: fixed; right: 800px; background: #f2f2f2; top: 0; padding: 40px; height: 100%; visibility: hidden; clip-path: inset(0 0 0 100%); transition: all 400ms cubic-bezier(0.4,0,0.2,1) 0ms;} .bloc_detail .content picture img { width: clamp(200px, 25vw, 480px); height: auto; display: block; margin: 20px auto 0 auto; opacity: 0; transition: all 400ms cubic-bezier(0.4,0,0.2,1) 0ms;} .bloc_detail .content .titre_main { margin-bottom: 10px;} .bloc_detail .btn_close { width: 50px; height: 50px; position: sticky; right: 0; top: 15px; cursor: pointer; background: var(--blue); justify-self: end; align-self: start; z-index: 15;} .bloc_detail .btn_close:before { width: 26px; height: 2px; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%) rotate(45deg); content: "";} .bloc_detail .btn_close:after { width: 26px; height: 2px; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%) rotate(-45deg); content: "";} .bloc_detail .bg_close { position: fixed; left: 0; top: 0; bottom: 0; right: 0; visibility: hidden; content: "";} .bloc_detail.active { opacity: 1; visibility: visible; right: 0; transition-delay: 200ms;} .bloc_detail.active .bg_close { visibility: visible;} .bloc_detail.active .content { opacity: 1; transition-delay: 800ms;} .bloc_detail.active .content picture { clip-path: inset(-1px -1px -1px -1px); visibility: visible; transition-duration: 600ms; transition-delay: 800ms;} .bloc_detail.active .content picture img { margin-top: 0; opacity: 1; transition-delay: 1200ms;} @media (max-width:1400px) { .bloc_detail { max-width: 650px; right: -650px;} .bloc_detail .content picture { right: 650px;} } @media (max-width:1200px) { .bloc_detail { max-width: 65vw; right: -65vw;} .bloc_detail .content picture { right: 65vw; padding: 0;} .bloc_detail .content picture img { width: 35vw; padding: 2.5vw;} } @media (max-width:1000px) { .bloc_detail { max-width: 80vw; right: -80vw;} .bloc_detail .row { padding: 0;} .bloc_detail .content { padding-inline: 5vw; padding-bottom: calc(var(--paddingB) * 0.65);} .bloc_detail .content picture { position: static; display: block; height: auto; margin: -50px -5vw calc(var(--paddingB) * 0.65) -5vw;} .bloc_detail .content picture img { width: 40vw; padding: 2vw 0; margin: 0 auto;} .bloc_detail .btn_close { right: 15px; top: 15px;} } @media (max-width:700px) { .bloc_detail { width: 100vw; max-width: none; right: -100vw;} .bloc_detail .content picture img { width: 80vw; padding: 4vw 2vw 2vw 2vw;} .bloc_detail .btn_close { width: 42px; height: 42px;} .bloc_detail .btn_close:before { width: 22px;} .bloc_detail .btn_close:after { width: 22px;} } /***** customers *****/ .customers { position: relative; overflow: hidden; text-align: center;} .customers:before { width: 15vw; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(to left, rgba(255,255,255,0) 0%, #fff 60% 100%); z-index: 5; content: "";} .customers:after { width: 15vw; height: 100%; position: absolute; right: 0; top: 0; background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 60% 100%); z-index: 5; content: "";} .customers .slider { display: flex; gap: clamp(10px, 1.2vw, 20px); will-change: transform; position: relative; margin-top: clamp(15px, 2vw, 30px); padding-bottom: clamp(20px, 2vw, 40px); animation: srolling_x 50s linear infinite;} .customers .slider .card_ref { width: clamp(220px, 15vw, 320px); aspect-ratio: 7/5; flex-shrink: 0; overflow: hidden; position: relative; display: grid; align-items: center; justify-content: center; background: var(--gray);} .customers .slider .card_ref img { display: block; width: 90%; max-width: 280px; aspect-ratio: 7/5; height: auto; object-fit: contain; margin: 0 auto;} @keyframes srolling_x { 0% { transform: translateX(0);} 100% { transform: translateX(-100%);} } @media (max-width:2000px) { .customers .slider { animation-duration: 40s;} } @media (max-width:1600px) { .customers .slider { animation-duration: 30s;} } @media (max-width:1400px) { .customers .slider { animation-duration: 25s;} } @media (max-width:1200px) { .customers .slider { animation-duration: 20s;} .customers .slider .card_ref { width: clamp(120px, 22.5vw, 180px);} } @media (max-width:700px) { .customers .slider { animation-duration: 10s;} } /***** show hide *****/ .show_hide { position: relative; margin: clamp(15px, 2vw, 20px) 0; display: grid; grid-gap: clamp(10px, 1.2vw, 15px);} .show_hide .item { position: relative;} .show_hide .item:before { width: 40px; height: 2px; position: absolute; left: 0; bottom: 0; background: var(--blue); transition: all 300ms cubic-bezier(0.4,0,0.2,1) 0ms; content: "";} .show_hide .item.active:before { width: 100%; transition-delay: 400ms;} .show_hide .titre { font-size: clamp(18px, 1.4vw, 20px); line-height: 26px; letter-spacing: 0; position: relative; cursor: pointer; padding: clamp(12px, 1.6vw, 22px) 40px clamp(12px, 1.6vw, 22px) 0; margin: 0;} .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(20px, 3vw, 30px) 0; visibility: hidden; } .show_hide .hide_wrap { opacity: 0; transition: all 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 .hide { visibility: visible;} .show_hide .item.active .hide_wrap { opacity: 1; visibility: visible; transition-delay: 400ms;} @media (max-width:1000px){ .show_hide .titre { font-size: clamp(15px, 3.8vw, 17px); line-height: 24px;} } @media (max-width:700px){ .show_hide .item:before { width: 30px;} .show_hide .titre { font-weight: 500; line-height: 20px;} .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% "DM Sans"; 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;} @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;} }*/ /***** bloc CTA *****/ .bloc_cta { margin-top: clamp(25px, 3vw, 40px);} .bloc_cta .container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: clamp(10px, 1.2vw, 20px);} .bloc_cta .link { display: block; height: auto; padding: clamp(25px, 2.6vw, 50px); line-height: 150%; transition-duration: 400ms;} .bloc_cta .link lord-icon { position: absolute; left: calc(100% + 10px); top: 0; width: 55px; height: 55px; transition: all 300ms ease-in;} .bloc_cta .link span { display: block;} .bloc_cta .link .txt_size_m { margin-top: -5px; letter-spacing: 0.6px;} .bloc_cta .link .titre { margin-bottom: clamp(20px, 1.6vw, 30px); position: relative; line-height: 55px; display: inline-block;} .bloc_cta .link .link_arrow { position: absolute; right: clamp(15px, 2vw, 25px); bottom: clamp(15px, 2vw, 25px);} .bloc_cta_center { text-align: center;} .bloc_cta_center .link { margin-top: 10px;} @media (min-width:1201px) { .bloc_cta .link:hover lord-icon { opacity: 1; transform: scale(1);} .bloc_cta .link:hover .link_arrow { transform: rotate(-45deg);} } @media (max-width:1400px) { .bloc_cta .link .txt_size_m { margin: -5px 0;} } @media (max-width:1200px) { .bloc_cta .link .txt_size_m { margin: 0 0 -8px 0;} } @media (max-width:1000px) { .bloc_cta .container { grid-template-columns: 1fr;} .bloc_cta .link { padding: clamp(20px, 5vw, 30px);} } @media (max-width:700px) { .bloc_cta .link .txt_size_m { letter-spacing: 0.4px; margin-bottom: -4px;} .bloc_cta .link .titre { line-height: 40px;} .bloc_cta .link lord-icon { width: 40px; height: 40px;} } /***** certifications *****/ .certifications { display: grid; grid-gap: clamp(10px, 2vw, 15px);} .certifications div { background: var(--bgColorLight);} .certifications img { width: 100%; max-width: clamp(100px, 10vw, 160px); height: auto; display: block; filter: brightness(0) invert(0); margin: 0 auto;} .certifications img.border { border: 1px solid #e5e5e5;} /***** footer *****/ .footer { position: relative; background: #fff;} .footer .footer_grid { position: relative; border-top: 3px solid var(--blue); padding-top: var(--paddingT); padding-right: 100px; display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 8vw, 40px) clamp(20px, 4.5vw, 120px);} .footer .footer_blocs { display: flex; flex-wrap: wrap; align-items: start; gap: clamp(20px, 8vw, 40px) clamp(20px, 4.5vw, 120px);} .footer .logo { width: 260px; height: auto; display: inline-block; vertical-align: top; margin: 0;} .footer .bloc_footer { display: inline-block; vertical-align: top; position: relative; } .footer .bloc_footer p { margin: 0;} .footer .bloc_footer p b { font-size: clamp(16px, 1.4vw, 20px); letter-spacing: 0.2px;} .footer .bloc_footer p a, .footer .bloc_footer li a { display: inline-block;} .footer .bloc_footer li a { padding: 2px 0 2px 30px; background: url("../images/arrow_blue.svg") 0 48% no-repeat;} .footer .bloc_footer p.address { margin: clamp(10px, 2vw, 12px) 0; line-height: 160%;} .footer .rs { font-size: 0; line-height: 0; letter-spacing: 0; position: absolute; right: 0; top: var(--paddingT); display: flex; flex-wrap: wrap; gap: 10px;} .footer .rs .item { display: block; width: 50px; height: 50px; border-radius: var(--linkRadius); border: none; cursor: pointer; transition: all 300ms ease-in;} .footer .rs .item.linkedin { background: url("../images/linkedin.svg") 50% no-repeat var(--gray);} .footer .rs .item.scroll { background: url("../images/arrow_top.svg") 50% no-repeat var(--gray);} .footer .certifications { grid-template-columns: repeat(4, 1fr); grid-gap: 10px; width: 100%; max-width: fit-content; margin: 4vw auto;} .footer .certifications img { width: 100%; max-width: 100px;} .footer .langs { position: absolute; right: 0; bottom: 20px;} .footer .langs ul { top: auto; bottom: 110%;} .footer .langs div { padding-left: 25px;} .footer .langs div:after { width: 15px; height: 100%; background: url(../images/icon_map.svg) 50% 52% / contain no-repeat; position: absolute; top: 0; left: 0; transition: all 300ms ease-in-out; content: "";} .footer .langs:hover ul { bottom: 100%;} .footer .langs:hover div:after { filter: invert(1);} .footer_bottom { padding: 30px 0; line-height: 0; margin-top: clamp(30px, 8vw, 100px); border-top: 1px solid #ddd;} .footer_bottom li { display: inline-block; font-size: 13px; line-height: 20px; margin-right: 20px; letter-spacing: 0.6px; position: relative;} @media (min-width:1201px) { .footer .bloc_footer p a:hover, .footer .bloc_footer li a:hover, .footer_bottom li a:hover { color: var(--blue);} .footer .rs .item:hover { background-color: #e5e5e5;} } @media (max-width:1200px) { .footer .logo { width: 200px;} .footer .footer_grid { padding-right: 0; grid-template-columns: 1fr;} .footer .footer_blocs { gap: clamp(20px, 8vw, 40px) clamp(20px, 10vw, 80px);} .footer .langs { bottom: 10px;} .footer_bottom { padding: 20px 0;} } @media (max-width:700px) { .footer .logo { width: 160px;} .footer .certifications { grid-gap: 8px; margin: 8vw auto;} .footer .certifications img { width: 100%;} .footer ul.bloc_footer { display: none;} .footer .bloc_footer p.email a, .footer .bloc_footer p.tel a { line-height: 200%;} .footer .langs { bottom: 15px;} .footer_bottom { padding: 8vw 0 20px 0; margin: 0;} .footer_bottom li { display: block; font-size: 12px; line-height: 26px; margin: 0; letter-spacing: 0.2px;} .footer_bottom li:first-child { margin-top: -6px;} .footer_bottom li:after { display: none;} } @media (max-width:500px) { .footer .footer_blocs { display: grid; grid-template-columns: 1fr 1fr; gap: inherit;} } /***** custom popup cookies *****/ .alertCookies { border-radius: 0!important; font: 400 13px/22px "DM Sans"!important; letter-spacing: 0.2px !important;} .alertCookies p.alertCookiesTitle { margin-bottom: 15px !important; font: 700 35px / 40px "DM Sans" !important; letter-spacing: 0 !important;} .alertCookies .alertCookiesActions .rgpdAccept, .alertCookies .alertCookiesActions .rgpdCustom { width: 100%; height: 50px; font: 500 16px/48px "DM Sans"; letter-spacing: 0.4px; background: #000; color: #fff !important; text-align: center; text-decoration: none; border-radius: 0; display: inline-block; cursor: pointer; transition: background 400ms ease-in-out;} .alertCookies .alertCookiesActions .rgpdAccept { margin: 2px 0 0 0;} .alertCookies .alertCookiesActions .rgpdCustom { margin: 10px 0 0 0; padding: 0 45px; overflow: hidden;}