@charset "UTF-8"; @font-face { font-display: swap; font-family: "Open Sans"; font-style: normal; font-weight: 400; src: url("../fonts/OpenSans/OpenSans-Regular.woff2") format("woff2"), url("../fonts/OpenSans/OpenSans-Regular.ttf") format("truetype"); } @font-face { font-display: swap; font-family: "Open Sans"; font-style: normal; font-weight: 700; src: url("../fonts/OpenSans/OpenSans-Bold.woff2") format("woff2"), url("../fonts/OpenSans/OpenSans-Bold.ttf") format("truetype"); } @font-face { font-display: swap; font-family: "PT Sans"; font-style: normal; font-weight: 400; src: url("../fonts/PT-Sans/PT-Sans-Regular.woff2") format("woff2"), url("../fonts/PT-Sans/PT-Sans-Regular.ttf") format("truetype"); } /************************************ * Grids */ /************************************ * Breakpoints */ /************************************ * Transitions */ /************************************ * Paths */ /************************************ * Fonts */ /*** LOCAL FONTS ***/ /*** FONTS ***/ /*** VARIABLES TO USE ***/ /************************************ * Font Sizes */ /************************************ * COLORS */ /************************************ * THEME */ /** * Font-size calcul */ /** * Trigger hover effect on different pseudo-classes * depending on touch or no-touch device * => no-touch > on hover and on focus (by default, can be disable) * => touch > on active, and when a class is added on the targeted element (optionnal) * * @param $focus (boolean) set to false to disable the hover effect on focus (no-touch only) * @param $touchClass (string) the hover effect will be set if the targeted element has this class */ /** * Set an item to 100% of its parent's width and height */ /** * Set an item to 100% of the window width (and 100% of its parent height) * even if located in a limited width wrapper */ /** * Set an item to 100% of the window width * even if located in a limited width wrapper, * but keep it in the flow */ /** * To call on an tag. * Set the image size to adapt to its parent */ /** * Like img-cover(), but for responsive img with * /!\ To call on , or parent. */ /** * Floating form items * if $class2 equals 'empty', the next item is cleared */ /* A simple little SCSS mixin for creating scrim gradients Inspired by Andreas Larson - https://github.com/larsenwork https://css-tricks.com/easing-linear-gradients/ */ /** Convert em value into px */ /** Fluid font-size between 2 breakpoints. Font-size must be in px, use em2px() function to convert from em. */ /** Fluid value between 2 breakpoints (can be use for other than font-size) (Font-size must be in px, use em2px() function to convert from em) */ /* Fluid value - clamp version (2023) @see https://www.smashingmagazine.com/2022/10/fluid-typography-clamp-sass-functions/ */ /** * Animated placeholder for images or divs (FB like) */ /*@mixin breakpoint($point) { @if $point == desktop { @media only screen and (max-width: $bp-xlarge) { @content; } } @else if $point == table { @media only screen and (max-width: $bp-large) { @content; } } @else if $point == mobile { @media only screen and (max-width: $bp-xsmall) { @content; } } }*/ /*** SPECIFIC TO CURRENT PROJECT ***/ /* SCSS variables are information about icon's compiled state, stored under its original file name .icon-home { width: $icon-home-width; } The large array-like variables contain all information about a single icon $icon-home: x y offset_x offset_y width height total_width total_height image_path; At the bottom of this section, we provide information about the spritesheet itself $spritesheet: width height image $spritesheet-sprites; */ /* These "retina group" variables are mappings for the naming and pairing of normal and retina sprites. The list formatted variables are intended for mixins like `retina-sprite` and `retina-sprites`. */ /* The provided mixins are intended to be used with the array-like variables .icon-home { @include sprite-width($icon-home); } .icon-email { @include sprite($icon-email); } Example usage in HTML: `display: block` sprite:
To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class: // CSS .icon { display: inline-block; } // HTML */ /* The `retina-sprite` mixin sets up rules and a media query for a sprite/retina sprite. It should be used with a "retina group" variable. The media query is from CSS Tricks: https://css-tricks.com/snippets/css/retina-display-media-query/ $icon-home-group: ('icon-home', $icon-home, $icon-home-2x, ); .icon-home { @include retina-sprite($icon-home-group); } */ /* The `sprites` mixin generates identical output to the CSS template but can be overridden inside of SCSS @include sprites($spritesheet-sprites); */ /* The `retina-sprites` mixin generates a CSS rule and media query for retina groups This yields the same output as CSS retina template but can be overridden in SCSS @include retina-sprites($retina-groups); */ /** * SVG Sprites */ html, body, div, span, applet, object, iframe, h1, h2, h3, .foi-teaser__content .title, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*** VARIABLES TO USE ***/ :root { --c-main: #191414; --c-secondary: #0033A0; --c-dark: #001841; --c-light: #D2FAFF; --c-action: #00D3B7; --c-tertiary: #D8DE49; --c-quaternary: #68B9C3; --c-default: #191414; --c-overflow: rgba(0, 24, 65, 0.3); --c-overflow-dark: rgba(0, 24, 65, 0.6); --c-text: #191414; --c-title: #191414; --c-link: #0033A0; --c-link-hover: #333333; --c-link-visited: #666666; --c-border: #C1C1C1; --c-input-border: #C1C1C1; --c-input-focus-border: #0033A0; --c-input-placeholder: #666666; --c-thumbnail-border: #EEEEEE; --c-picture-background: #EEEEEE; --c-page-bg: #F5F5F7; --c-tag: #ffffff; --c-tag-bg: #191414; /** FONTS */ --f-default: source-sans-pro, sans-serif; --f-title: archivo-variable, sans-serif; --f-special: archivo-black, sans-serif; --f-button: source-sans-pro, sans-serif; --f-top-bar-title: Open Sans, sans-serif; --f-top-bar: PT Sans, sans-serif; /** TYPO */ --default-font-family: var(--f-default); --default-font-size: 1.15em; --default-font-weight: 400; --default-line-height: 1.3; --paragraph-line-height: 1.4; --heading-font-family: var(--f-special); --heading-font-weight: 900; --heading-color: var(--c-dark); --heading-line-height: 1.2; --heading-text-transform: none; --heading-font-style: normal; --h1-font-family: archivo-black, sans-serif; --h1-font-weight: var(--heading-font-weight); --h1-color: #ffffff; --h1-line-height: 1.1; --h1-text-transform: var(--heading-text-transform); --h1-font-style: var(--heading-font-style); --h1-font-size: clamp(40px, 2.59vw + 30.29px, 80px); --h2-font-family: var(--heading-font-family); --h2-font-weight: 500; --h2-color: var(--heading-color); --h2-line-height: var(--heading-line-height); --h2-text-transform: var(--heading-text-transform); --h2-font-style: var(--heading-font-style); --h2-font-size: clamp(40px, 1.29vw + 35.15px, 60px); --h3-font-family: var(--heading-font-family); --h3-font-weight: 400; --h3-color: var(--heading-color); --h3-line-height: var(--heading-line-height); --h3-text-transform: var(--heading-text-transform); --h3-font-style: var(--heading-font-style); --h3-font-size: clamp(21px, 0.45vw + 19.3px, 28px); --h4-font-family: var(--heading-font-family); --h4-font-weight: var(--heading-font-weight); --h4-color: var(--heading-color); --h4-line-height: var(--heading-line-height); --h4-text-transform: var(--heading-text-transform); --h4-font-style: var(--heading-font-style); --h4-font-size: clamp(20px, 0.32vw + 18.79px, 25px); --h5-font-family: var(--heading-font-family); --h5-font-weight: var(--heading-font-weight); --h5-color: var(--heading-color); --h5-line-height: var(--heading-line-height); --h5-text-transform: var(--heading-text-transform); --h5-font-style: var(--heading-font-style); --h5-font-size: clamp(18px, 0.26vw + 17.03px, 22px); --h6-font-family: var(--heading-font-family); --h6-font-weight: var(--heading-font-weight); --h6-color: var(--heading-color); --h6-line-height: var(--heading-line-height); --h6-text-transform: var(--heading-text-transform); --h6-font-style: var(--heading-font-style); --h6-font-size: clamp(14px, 0.13vw + 13.51px, 16px); --c-button-primary__color: #001841; --c-button-primary__background: #00D3B7; --c-button-primary__border: #00D3B7; --c-button-primary__hover__color: #ffffff; --c-button-primary__hover__background: #001841; --c-button-primary__hover__border: #001841; --c-button-secondary__color: #0033A0; --c-button-secondary__background: #D8DE49; --c-button-secondary__border: #D8DE49; --c-button-secondary__hover__color: #ffffff; --c-button-secondary__hover__background: #0033A0; --c-button-secondary__hover__border: #0033A0; --c-button-tertiary__color: #ffffff; --c-button-tertiary__background: transparent; --c-button-tertiary__border: #ffffff; --c-button-tertiary__hover__color: #0033A0; --c-button-tertiary__hover__background: #D2FAFF; --c-button-tertiary__hover__border: #D2FAFF; --c-button-action__color: #0033A0; --c-button-action__background: transparent; --c-button-action__border: #0033A0; --c-button-action__hover__color: #ffffff; --c-button-action__hover__background: #0033A0; --c-button-action__hover__border: #0033A0; --g-gutter: 15px; --g-max-content-width: 1725px; --g-small-content-width: 1430px; --g-std-content-width: 1130px; --input-height: 45px; --select-height: 62px; --input-padding-inline: 15px; /** CURSOR */ --c-cursor-bg: #f4573d; --c-cursor: #ffffff; /** HEADER */ --c-header-bg: transparent; --c-header-color: #0033A0; --header-mobile-height: 92px; /** FLASH INFO */ --c-flash-info-bg: #202223; --c-flash-info-color: #ffffff; --testimonial-ar-mobile: 300 / 436; --testimonial-ar-desktop: 556 / 436; --padding-left-quote: 70px; /** FOOTER */ --c-footer-bg: transparent; --c-footer-bg-mobile: #0033A0; --c-footer-color: #ffffff; /** NAV */ /** MEGA-MENU */ /** BLOC SHORT LINKS */ /** BLOC NEWS/BLOG */ /** BLOC EVENTS */ /** BLOC SLIDER */ --c-bloc-slider-arrow-bg: var(--c-button-primary__background); --c-bloc-slider-dot-bg: #ffffff; --c-bloc-slider-dot-bg-active: #00D3B7; --c-bloc-slider-dot-border: #D7D7D7; --c-bloc-slider-btn-bg: var(--c-button-primary__background); --c-bloc-slider-btn: var(--c-button-primary__color); --c-bloc-slider-title: var(--c-title); /** BLOC LIST */ /** BLOC SCROLLING TEXT */ } @-webkit-keyframes placeHolderGradient { from { left: -100px; } to { left: 100%; } } @keyframes placeHolderGradient { from { left: -100px; } to { left: 100%; } } .btn, .button { position: relative; display: inline-block; padding: 13px 28px; background-color: var(--c-button-primary__background); border: 1px solid var(--c-button-primary__border); border-radius: 30px; color: var(--c-button-primary__color); font-size: 16px; font-weight: 600; text-align: center; line-height: 1.2; vertical-align: middle; text-decoration: none; text-transform: uppercase; -webkit-transition: all 300ms ease; transition: all 300ms ease; cursor: pointer; } .btn:hover, .button:hover { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .btn:focus, .button:focus { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .touchevents .btn:active, .touchevents .button:active { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .btn:focus, .btn:active, .button:focus, .button:active { text-decoration: none; } .btn:visited, .button:visited { color: var(--c-button-primary__color); } .btn:visited:hover, .btn:visited:focus, .btn:visited:focus-visible, .button:visited:hover, .button:visited:focus, .button:visited:focus-visible { color: var(--c-button-primary__hover__color); } .btn-arrow-green { position: relative; display: inline-block; padding: 13px 28px; background-color: var(--c-button-primary__background); border: 1px solid var(--c-button-primary__border); border-radius: 30px; color: var(--c-button-primary__color); font-size: 16px; font-weight: 600; text-align: center; line-height: 1.2; vertical-align: middle; text-decoration: none; text-transform: uppercase; -webkit-transition: all 300ms ease; transition: all 300ms ease; cursor: pointer; padding-right: 62px; background-image: url("../svg/arrow-white.svg"); background-position: right 30px center; background-size: 17px; background-repeat: no-repeat; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .btn-arrow-green:hover { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .btn-arrow-green:focus { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .touchevents .btn-arrow-green:active { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .btn-arrow-green:focus, .btn-arrow-green:active { text-decoration: none; } .btn-arrow-green:visited { color: var(--c-button-primary__color); } .btn-arrow-green:visited:hover, .btn-arrow-green:visited:focus, .btn-arrow-green:visited:focus-visible { color: var(--c-button-primary__hover__color); } .btn-arrow-green:hover { color: #fff; background-color: var(--c-button-secondary__hover__background); border-color: var(--c-button-secondary__hover__border); } .btn-arrow-yellow { position: relative; display: inline-block; padding: 13px 28px; background-color: var(--c-button-primary__background); border: 1px solid var(--c-button-primary__border); border-radius: 30px; color: var(--c-button-primary__color); font-size: 16px; font-weight: 600; text-align: center; line-height: 1.2; vertical-align: middle; text-decoration: none; text-transform: uppercase; -webkit-transition: all 300ms ease; transition: all 300ms ease; cursor: pointer; padding-right: 62px; background-image: url("../svg/arrow-white.svg"); background-position: right 30px center; background-size: 17px; background-repeat: no-repeat; -webkit-transition: 0.2s ease; transition: 0.2s ease; background-color: var(--c-button-secondary__background); border-color: var(--c-button-secondary__border); color: var(--c-button-secondary__color); } .btn-arrow-yellow:hover { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .btn-arrow-yellow:focus { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .touchevents .btn-arrow-yellow:active { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .btn-arrow-yellow:focus, .btn-arrow-yellow:active { text-decoration: none; } .btn-arrow-yellow:visited { color: var(--c-button-primary__color); } .btn-arrow-yellow:visited:hover, .btn-arrow-yellow:visited:focus, .btn-arrow-yellow:visited:focus-visible { color: var(--c-button-primary__hover__color); } .btn-arrow-yellow:hover { color: #fff; background-color: var(--c-button-secondary__hover__background); border-color: var(--c-button-secondary__hover__border); } .btn-arrow { position: relative; display: inline-block; padding: 13px 28px; background-color: var(--c-button-primary__background); border: 1px solid var(--c-button-primary__border); border-radius: 30px; color: var(--c-button-primary__color); font-size: 16px; font-weight: 600; text-align: center; line-height: 1.2; vertical-align: middle; text-decoration: none; text-transform: uppercase; -webkit-transition: all 300ms ease; transition: all 300ms ease; cursor: pointer; border-color: #fff; color: #fff; background-color: transparent; padding-right: 62px !important; background-image: url("../svg/arrow-green.svg"); background-position: right 30px center; background-size: 17px; background-repeat: no-repeat; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .btn-arrow:hover { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .btn-arrow:focus { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .touchevents .btn-arrow:active { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .btn-arrow:focus, .btn-arrow:active { text-decoration: none; } .btn-arrow:visited { color: var(--c-button-primary__color); } .btn-arrow:visited:hover, .btn-arrow:visited:focus, .btn-arrow:visited:focus-visible { color: var(--c-button-primary__hover__color); } .btn-arrow:hover { background-image: url("../svg/arrow-blue.svg"); } .btn-arrow.btn-tertiary:hover { background-color: var(--c-button-tertiary__hover__background); border-color: var(--c-button-tertiary__hover__border); color: var(--c-button-tertiary__hover__color); } .btn-arrow.btn-tertiary:focus { background-color: var(--c-button-tertiary__hover__background); border-color: var(--c-button-tertiary__hover__border); color: var(--c-button-tertiary__hover__color); } .touchevents .btn-arrow.btn-tertiary:active { background-color: var(--c-button-tertiary__hover__background); border-color: var(--c-button-tertiary__hover__border); color: var(--c-button-tertiary__hover__color); } .btn-light { position: relative; display: inline-block; padding: 13px 28px; background-color: var(--c-button-primary__background); border: 1px solid var(--c-button-primary__border); border-radius: 30px; color: var(--c-button-primary__color); font-size: 16px; font-weight: 600; text-align: center; line-height: 1.2; vertical-align: middle; text-decoration: none; text-transform: uppercase; -webkit-transition: all 300ms ease; transition: all 300ms ease; cursor: pointer; background-color: transparent; border-color: var(--c-button-secondary__color); color: var(--c-button-secondary__color); } .btn-light:hover { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .btn-light:focus { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .touchevents .btn-light:active { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .btn-light:focus, .btn-light:active { text-decoration: none; } .btn-light:visited { color: var(--c-button-primary__color); } .btn-light:visited:hover, .btn-light:visited:focus, .btn-light:visited:focus-visible { color: var(--c-button-primary__hover__color); } .btn-light:hover { background-color: var(--c-button-secondary__hover__background); color: #fff; } .btn-light:focus { background-color: var(--c-button-secondary__hover__background); color: #fff; } .touchevents .btn-light:active { background-color: var(--c-button-secondary__hover__background); color: #fff; } .btn-light:visited:not(:hover) { color: var(--c-button-secondary__color); } .btn-white { position: relative; display: inline-block; padding: 13px 28px; background-color: var(--c-button-primary__background); border: 1px solid var(--c-button-primary__border); border-radius: 30px; color: var(--c-button-primary__color); font-size: 16px; font-weight: 600; text-align: center; line-height: 1.2; vertical-align: middle; text-decoration: none; text-transform: uppercase; -webkit-transition: all 300ms ease; transition: all 300ms ease; cursor: pointer; background-color: transparent; border-color: #fff; color: #fff; } .btn-white:hover { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .btn-white:focus { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .touchevents .btn-white:active { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .btn-white:focus, .btn-white:active { text-decoration: none; } .btn-white:visited { color: var(--c-button-primary__color); } .btn-white:visited:hover, .btn-white:visited:focus, .btn-white:visited:focus-visible { color: var(--c-button-primary__hover__color); } .btn-white:hover { background-color: var(--c-light); color: var(--c-button-secondary__color); border-color: var(--c-light); } .btn-white:focus { background-color: var(--c-light); color: var(--c-button-secondary__color); border-color: var(--c-light); } .touchevents .btn-white:active { background-color: var(--c-light); color: var(--c-button-secondary__color); border-color: var(--c-light); } .btn-white:visited:not(:hover) { color: #fff; } .btn-secondary { position: relative; display: inline-block; padding: 13px 28px; background-color: var(--c-button-primary__background); border: 1px solid var(--c-button-primary__border); border-radius: 30px; color: var(--c-button-primary__color); font-size: 16px; font-weight: 600; text-align: center; line-height: 1.2; vertical-align: middle; text-decoration: none; text-transform: uppercase; -webkit-transition: all 300ms ease; transition: all 300ms ease; cursor: pointer; background-color: var(--c-button-secondary__background); border-color: var(--c-button-secondary__border); color: var(--c-button-secondary__color); } .btn-secondary:hover { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .btn-secondary:focus { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .touchevents .btn-secondary:active { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .btn-secondary:focus, .btn-secondary:active { text-decoration: none; } .btn-secondary:visited { color: var(--c-button-primary__color); } .btn-secondary:visited:hover, .btn-secondary:visited:focus, .btn-secondary:visited:focus-visible { color: var(--c-button-primary__hover__color); } .btn-secondary:hover { background-color: var(--c-button-secondary__hover__background); border-color: var(--c-button-secondary__hover__border); color: var(--c-button-secondary__hover__color); } .btn-secondary:focus { background-color: var(--c-button-secondary__hover__background); border-color: var(--c-button-secondary__hover__border); color: var(--c-button-secondary__hover__color); } .touchevents .btn-secondary:active { background-color: var(--c-button-secondary__hover__background); border-color: var(--c-button-secondary__hover__border); color: var(--c-button-secondary__hover__color); } .btn-secondary:visited:not(:hover) { color: var(--c-button-secondary__color); } .btn-tertiary { position: relative; display: inline-block; padding: 13px 28px; background-color: var(--c-button-primary__background); border: 1px solid var(--c-button-primary__border); border-radius: 30px; color: var(--c-button-primary__color); font-size: 16px; font-weight: 600; text-align: center; line-height: 1.2; vertical-align: middle; text-decoration: none; text-transform: uppercase; -webkit-transition: all 300ms ease; transition: all 300ms ease; cursor: pointer; background-color: var(--c-button-tertiary__background); border-color: var(--c-button-tertiary__border); color: var(--c-button-tertiary__color); } .btn-tertiary:hover { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .btn-tertiary:focus { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .touchevents .btn-tertiary:active { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .btn-tertiary:focus, .btn-tertiary:active { text-decoration: none; } .btn-tertiary:visited { color: var(--c-button-primary__color); } .btn-tertiary:visited:hover, .btn-tertiary:visited:focus, .btn-tertiary:visited:focus-visible { color: var(--c-button-primary__hover__color); } .btn-tertiary:hover { background-color: var(--c-button-tertiary__hover__background); border-color: var(--c-button-tertiary__hover__border); color: var(--c-button-tertiary__hover__color); } .btn-tertiary:focus { background-color: var(--c-button-tertiary__hover__background); border-color: var(--c-button-tertiary__hover__border); color: var(--c-button-tertiary__hover__color); } .touchevents .btn-tertiary:active { background-color: var(--c-button-tertiary__hover__background); border-color: var(--c-button-tertiary__hover__border); color: var(--c-button-tertiary__hover__color); } .btn-tertiary:visited:hover { color: var(--c-button-tertiary__hover__color); } .btn-alert { position: relative; display: inline-block; padding: 13px 28px; background-color: var(--c-button-primary__background); border: 1px solid var(--c-button-primary__border); border-radius: 30px; color: var(--c-button-primary__color); font-size: 16px; font-weight: 600; text-align: center; line-height: 1.2; vertical-align: middle; text-decoration: none; text-transform: uppercase; -webkit-transition: all 300ms ease; transition: all 300ms ease; cursor: pointer; background-color: var(--c-button-action__background); border-color: var(--c-button-action__border); color: var(--c-button-action__color); text-decoration: none; } .btn-alert:hover { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .btn-alert:focus { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .touchevents .btn-alert:active { background-color: var(--c-button-primary__hover__background); border-color: var(--c-button-primary__hover__border); color: var(--c-button-primary__hover__color); cursor: pointer; text-decoration: none; outline: none; } .btn-alert:focus, .btn-alert:active { text-decoration: none; } .btn-alert:visited { color: var(--c-button-primary__color); } .btn-alert:visited:hover, .btn-alert:visited:focus, .btn-alert:visited:focus-visible { color: var(--c-button-primary__hover__color); } .btn-alert:hover { background-color: var(--c-button-action__hover__background); border-color: var(--c-button-action__hover__border); color: var(--c-button-action__hover__color); } .btn-alert:focus { background-color: var(--c-button-action__hover__background); border-color: var(--c-button-action__hover__border); color: var(--c-button-action__hover__color); } .touchevents .btn-alert:active { background-color: var(--c-button-action__hover__background); border-color: var(--c-button-action__hover__border); color: var(--c-button-action__hover__color); } .btn-alert.full { -webkit-padding-start: 70px; padding-inline-start: 70px; background-image: url("../svg/alert.svg"); background-size: 25px; background-position: left 28px center; background-repeat: no-repeat; } .btn-alert.full:hover { background-image: url("../svg/alert-white.svg"); } .btn-alert.full:focus { background-image: url("../svg/alert-white.svg"); } .touchevents .btn-alert.full:active { background-image: url("../svg/alert-white.svg"); } @media screen and (max-width: 768px) { .btn-alert.alert-mobile { -webkit-padding-start: 70px; padding-inline-start: 70px; background-image: url("../svg/alert.svg"); background-size: 25px; background-position: left 28px center; background-repeat: no-repeat; } .btn-alert.alert-mobile:hover { background-image: url("../svg/alert-white.svg"); } .btn-alert.alert-mobile:focus { background-image: url("../svg/alert-white.svg"); } .touchevents .btn-alert.alert-mobile:active { background-image: url("../svg/alert-white.svg"); } } .btn-small { padding: 0.5em 1em; font-size: 0.7rem; } .link-arrow { position: relative; margin-left: 40px; } .link-arrow:after { content: ""; position: absolute; left: -40px; top: 6px; background: url("../svg/arrow-green.svg") no-repeat left top; background-size: 100%; width: 20px; height: 20px; } .link-arrow-back { position: relative; margin-left: 40px; } .link-arrow-back:after { content: ""; position: absolute; left: -40px; top: 6px; background: url("../svg/arrow-green.svg") no-repeat left top; background-size: 100%; width: 20px; height: 20px; } .link-arrow-back:after { background-image: url("../svg/arrow-yellow-left.svg"); } .link-arrow-right { position: relative; display: inline-block; line-height: 1.2; } .link-arrow-right:after { content: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2217%22%20height%3D%2212%22%20viewBox%3D%220%200%2017%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_1490_6379)%22%3E%3Cpath%20d%3D%22M11.4424%200.217628C11.2278-0.0395029%2010.848-0.0735599%2010.5908%200.140999C10.3336%200.355559%2010.2995%200.735295%2010.5141%200.992426C10.538%201.01967%2010.5635%201.04692%2010.5908%201.06905L14.9357%205.41814H0.574058C0.240223%205.43517-0.0169653%205.72125%206.70307e-05%206.05501C0.0170994%206.36492%200.264069%206.61184%200.574058%206.62887H14.9357L10.584%2010.9728C10.3557%2011.2112%2010.3557%2011.5859%2010.584%2011.8243C10.819%2012.0593%2011.1988%2012.0593%2011.4339%2011.8243L16.8161%206.44326C17.0512%206.21678%2017.058%205.84215%2016.8314%205.60716C16.8263%205.60205%2016.8212%205.59694%2016.8161%205.59183L11.4424%200.217628Z%22%20fill%3D%22%2300D3B7%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_1490_6379%22%3E%3Crect%20width%3D%2217%22%20height%3D%2212%22%20fill%3D%22white%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); -webkit-transform: translateY(2px); transform: translateY(2px); position: relative; display: inline-block; width: 17px; margin-left: 3px; } .link-arrow-right-yellow { position: relative; display: inline-block; line-height: 1.2; } .link-arrow-right-yellow:after { content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNyAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMTQ5MF82Mzc5KSI+DQogICAgICAgIDxwYXRoIGQ9Ik0xMS40NDI0IDAuMjE3NjI4QzExLjIyNzggLTAuMDM5NTAyOSAxMC44NDggLTAuMDczNTU5OSAxMC41OTA4IDAuMTQwOTk5QzEwLjMzMzYgMC4zNTU1NTkgMTAuMjk5NSAwLjczNTI5NSAxMC41MTQxIDAuOTkyNDI2QzEwLjUzOCAxLjAxOTY3IDEwLjU2MzUgMS4wNDY5MiAxMC41OTA4IDEuMDY5MDVMMTQuOTM1NyA1LjQxODE0SDAuNTc0MDU4QzAuMjQwMjIzIDUuNDM1MTcgLTAuMDE2OTY1MyA1LjcyMTI1IDYuNzAzMDdlLTA1IDYuMDU1MDFDMC4wMTcwOTk0IDYuMzY0OTIgMC4yNjQwNjkgNi42MTE4NCAwLjU3NDA1OCA2LjYyODg3SDE0LjkzNTdMMTAuNTg0IDEwLjk3MjhDMTAuMzU1NyAxMS4yMTEyIDEwLjM1NTcgMTEuNTg1OSAxMC41ODQgMTEuODI0M0MxMC44MTkgMTIuMDU5MyAxMS4xOTg4IDEyLjA1OTMgMTEuNDMzOSAxMS44MjQzTDE2LjgxNjEgNi40NDMyNkMxNy4wNTEyIDYuMjE2NzggMTcuMDU4IDUuODQyMTUgMTYuODMxNCA1LjYwNzE2QzE2LjgyNjMgNS42MDIwNSAxNi44MjEyIDUuNTk2OTQgMTYuODE2MSA1LjU5MTgzTDExLjQ0MjQgMC4yMTc2MjhaIg0KICAgICAgICAgICAgICBmaWxsPSIjRDhERTQ5Ii8+DQogICAgPC9nPg0KICAgIDxkZWZzPg0KICAgICAgICA8Y2xpcFBhdGg+DQogICAgICAgICAgICA8cmVjdCB3aWR0aD0iMTciIGhlaWdodD0iMTIiIGZpbGw9IndoaXRlIi8+DQogICAgICAgIDwvY2xpcFBhdGg+DQogICAgPC9kZWZzPg0KPC9zdmc+DQo="); -webkit-transform: translateY(2px); transform: translateY(2px); position: relative; display: inline-block; width: 17px; margin-left: 3px; } .btn-search { width: 50px; height: 50px; appearance: none; -moz-appearance: none; -webkit-appearance: none; border: none; outline: none; background: url("../svg/search-large.svg") no-repeat center; background-size: contain; } .btn-phone { display: inline-block; border: 1px solid var(--c-quaternary); border-radius: 50px; background: url("../svg/phone.svg") no-repeat left 15px center; background-size: 20px; font-size: clamp(18px, 0.13vw + 17.51px, 20px); color: var(--c-dark); padding: 10px 15px 10px 45px; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .btn-phone:hover { background-color: var(--c-quaternary); background-image: url("../svg/phone-white.svg"); color: #fff; } .view-more { position: relative; border-radius: 25px; border: 1px solid #C7CDDF; padding: 5px 40px 5px 15px; cursor: pointer; background-color: #fff; color: var(--c-secondary); font-size: 15px; font-weight: 600; -webkit-transition: 0.2s ease; transition: 0.2s ease; z-index: 1; } .view-more:before { content: ""; left: 50%; top: 50%; position: absolute; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: var(--c-secondary); opacity: 0; -webkit-transition: 0.2s ease; transition: 0.2s ease; width: 100%; height: calc(100% + 3px); border-radius: 25px; z-index: -1; } .view-more:after { content: ""; right: 15px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; background-image: url("../svg/view-more.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; width: 16px; height: 16px; -webkit-transition: 0.2s ease; transition: 0.2s ease; } @media screen and (hover: hover) { .view-more:not(:disabled):hover { color: #fff; border-color: transparent; } .view-more:not(:disabled):hover:before { opacity: 1; width: calc(100% + 20px); } .view-more:not(:disabled):hover:after { background-image: url("../svg/view-more-white.svg"); } } button.more-filters, a.more-filters { appearance: none; -moz-appearance: none; -webkit-appearance: none; border: none; outline: none; padding-left: 38px; background: url("../svg/filters.svg") no-repeat left center; background-size: 25px; } button.see-filters, a.see-filters { appearance: none; -moz-appearance: none; -webkit-appearance: none; border: none; outline: none; padding-left: 38px; background: url("../svg/filters.svg") no-repeat left center; background-size: 25px; background-color: #fff; padding-block: 15px; padding-inline: 48px 15px; border-radius: 25px; background-position: left 15px center; } button, input, optgroup, select, textarea { -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 100%; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } input { overflow: visible; } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } textarea, select, [type=text], [type=search], [type=tel], [type=url], [type=email], [type=password], [type=date], [type=time], [type=number] { background-color: #fff; border: 1px solid var(--c-input-border); border-radius: 5px; font-family: var(--f-default); color: var(--c-default); -webkit-appearance: none; outline: none; } textarea:focus, select:focus, [type=text]:focus, [type=search]:focus, [type=tel]:focus, [type=url]:focus, [type=email]:focus, [type=password]:focus, [type=date]:focus, [type=time]:focus, [type=number]:focus { border-color: var(--c-input-focus-border); } [type=text], [type=search], [type=tel], [type=url], [type=email], [type=password], [type=date], [type=time], [type=number] { height: var(--input-height); width: 100%; max-width: 100%; padding: 0 var(--input-padding-inline); } [type=file] { width: 100%; max-width: 500px; } input[type=date]::-webkit-inner-spin-button { -webkit-appearance: none; display: none; } [type=checkbox], [type=radio] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } /*fieldset { border: 1px solid var(--c-input-border); margin: 0 2px; }*/ legend { -webkit-box-sizing: border-box; box-sizing: border-box; display: table; max-width: 100%; white-space: normal; color: inherit; -webkit-margin-start: -5px; margin-inline-start: -5px; padding: 0 5px; } label { display: block; -webkit-margin-after: 0.4em; margin-block-end: 0.4em; } select { width: 100%; height: var(--input-height); padding: 0 20px 0 var(--input-padding-inline); background-image: url("../svg/select.svg"); background-repeat: no-repeat; background-position: right 6px center; } select::-ms-expand { display: none; } optgroup { font-weight: bold; } textarea { overflow: auto; padding: 0.5em var(--input-padding-inline); width: 100%; max-width: 100%; } .form-item { margin: 1.5em 0; } .form-radios .form-item.form-type-checkbox, .form-radios .form-item.form-type-radio, .form-checkboxes .form-item.form-type-checkbox, .form-checkboxes .form-item.form-type-radio { position: relative; display: inline-block; -webkit-margin-end: 1.5em; margin-inline-end: 1.5em; } .form-radios .form-item.form-type-checkbox:last-child, .form-radios .form-item.form-type-radio:last-child, .form-checkboxes .form-item.form-type-checkbox:last-child, .form-checkboxes .form-item.form-type-radio:last-child { -webkit-margin-end: 0; margin-inline-end: 0; } .form-type-radios > label { display: inline-block; vertical-align: top; -webkit-margin-end: 2em; margin-inline-end: 2em; } .form-type-checkbox, .form-type-radio { position: relative; -webkit-margin-after: 1em; margin-block-end: 1em; } .form-type-checkbox label, .form-type-radio label { -webkit-padding-start: 0; padding-inline-start: 0; } .form-type-checkbox input, .form-type-radio input { position: relative; inset-block-start: 2px; } .form-type-submit { text-align: center; } #back-to-top { position: absolute; top: 0; width: 88px; height: 84px; aspect-ratio: 88/84; appearance: none; -webkit-appearance: none; -moz-appearance: none; outline: none; border: none; background-color: transparent; padding: 32px 20px 14px; background-color: rgba(0, 24, 65, 0.7); background-image: url("../svg/back-to-top.svg"); background-size: 12px; background-repeat: no-repeat; background-position: top 14px center; color: #fff; text-align: center; font-size: 16px; line-height: 18px; border-radius: 50%; cursor: pointer; z-index: 9999; -webkit-transition: 0.3s ease; transition: 0.3s ease; } @media screen and (hover: hover) { #back-to-top:hover { background-color: rgb(0, 24, 65); background-position: top 8px center; } } @media screen and (max-width: 980px) { #back-to-top { -webkit-transform: translate(-58%, -40%); transform: translate(-58%, -40%); left: 50%; } } @media screen and (min-width: 981px) { #back-to-top { top: 20px; right: 10vw; } } .job-alert-popup { position: fixed; visibility: hidden; opacity: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100dvh; width: 100dvw; left: 0; z-index: -1; bottom: 100%; -webkit-transition: bottom 0.55s cubic-bezier(0, 1.18, 0.55, 1.02), opacity 0.2s linear, visibility 0.2s linear; transition: bottom 0.55s cubic-bezier(0, 1.18, 0.55, 1.02), opacity 0.2s linear, visibility 0.2s linear; } .job-alert-popup.active { z-index: 1001; bottom: 0; visibility: visible; opacity: 1; } .job-alert-popup .close { display: block; position: absolute; right: 12px; top: 12px; cursor: pointer; width: 40px; height: 40px; background-color: var(--c-default); background-image: url("../svg/close.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; -webkit-transition: 0.3s ease; transition: 0.3s ease; border-radius: 50%; aspect-ratio: 1; z-index: 1; } .job-alert-popup .close:after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); -webkit-transition: 0.3s ease 0s; transition: 0.3s ease 0s; background: url("../svg/closing.svg") no-repeat center; background-size: contain; } .job-alert-popup .close:hover { background-color: #000; } .job-alert-popup .close:hover:after { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .job-alert-popup__scrollable { overflow-y: auto; padding-block: 45px; padding-inline: clamp(20px, 1.94vw + 12.72px, 50px); scrollbar-width: thin; /* Pour Firefox */ scrollbar-color: var(--c-input-border) transparent; /* Pour Firefox */ } .job-alert-popup__scrollable::-webkit-scrollbar { width: 8px; } .job-alert-popup__scrollable::-webkit-scrollbar-thumb { background-color: var(--c-input-border); border-radius: 10px; } .job-alert-popup__scrollable::-webkit-scrollbar-track { background-color: transparent; } .job-alert-popup__scrollable::-webkit-scrollbar-button { display: none; } .job-alert-popup__scrollable::-webkit-scrollbar-button:single-button:vertical:increment, .job-alert-popup__scrollable ::-webkit-scrollbar-button:single-button:vertical:decrement { display: none; width: 0; height: 0; color: transparent; } .job-alert-popup__inner { position: relative; overflow: hidden; background: var(--c-page-bg); width: 600px; height: 750px; max-height: 90vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: 100dvw; border-radius: 10px; -webkit-box-shadow: 10px 10px 25px 0px rgba(0, 0, 0, 0.1); box-shadow: 10px 10px 25px 0px rgba(0, 0, 0, 0.1); } .job-alert-popup__inner > * { position: relative; } .job-alert-popup__title { font-family: var(--f-special); letter-spacing: -0.8px; font-size: 25px; color: var(--c-dark); -webkit-padding-start: 40px; padding-inline-start: 40px; background: url("../svg/alert-black.svg") no-repeat left center; background-size: 25px; } .job-alert-popup__description { font-size: clamp(18px, 0.13vw + 17.51px, 20px); padding-block: clamp(15px, 0.65vw + 12.57px, 25px); } .job-alert-popup #message { display: none; } .job-alert-popup #acf-form { position: relative; } .job-alert-popup #acf-form > .acf-notice { margin-top: 5px; text-align: center; width: 100%; } .job-alert-popup #acf-form > .acf-notice > p { line-height: 1; } .job-alert-popup #acf-form > .acf-notice.-error { background: #fff; border-left: 3px solid #c92c2c; padding-block: 5px; padding-inline: 5px; } .job-alert-popup #acf-form .acf-field { position: relative; } .job-alert-popup #acf-form .acf-field[data-name=job_alert_user_infos] { position: relative; padding-block: 35px 25px; } .job-alert-popup #acf-form .acf-field[data-name=job_alert_user_infos]:after { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #C7CDDF; } .job-alert-popup #acf-form .acf-field[data-name=job_alert_user_infos] > .acf-label label { font-size: clamp(20px, 0.13vw + 19.51px, 22px); font-weight: 700; font-family: var(--f-title); margin-bottom: 10px; } .job-alert-popup #acf-form .acf-field[data-name=job_alert_user_infos] > .acf-input > .acf-fields { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 15px clamp(5px, 1.29vw + 0.15px, 25px); } .job-alert-popup #acf-form .acf-field[data-name=job_alert_user_infos] > .acf-input > .acf-fields .acf-label { font-size: 18px; font-weight: 600; } .job-alert-popup #acf-form .acf-field[data-name=job_alert_user_infos] > .acf-input > .acf-fields > .acf-field { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 220px; } .job-alert-popup #acf-form .acf-notice { font-size: 15px; } .job-alert-popup #acf-form .acf-notice.-error { color: #c92c2c; } .job-alert-popup #acf-form .acf-field-taxonomy, .job-alert-popup #acf-form .acf-field-checkbox { padding-block: 8px; padding-inline: 25px; border-radius: 8px; background-color: #F9F9F9; -webkit-transition: 0.2s ease; transition: 0.2s ease; margin-bottom: 1px; } .job-alert-popup #acf-form .acf-field-taxonomy:hover, .job-alert-popup #acf-form .acf-field-checkbox:hover { background-color: #FFFFFF; } .job-alert-popup #acf-form .acf-field-taxonomy:hover .acf-label, .job-alert-popup #acf-form .acf-field-checkbox:hover .acf-label { color: var(--c-action); } .job-alert-popup #acf-form .acf-field-taxonomy.open .acf-label:after, .job-alert-popup #acf-form .acf-field-checkbox.open .acf-label:after { -webkit-transform: rotate(0.5turn); transform: rotate(0.5turn); } .job-alert-popup #acf-form .acf-field-taxonomy .acf-label, .job-alert-popup #acf-form .acf-field-checkbox .acf-label { cursor: pointer; padding-block: 10px; font-size: 18px; font-weight: 600; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; position: relative; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .job-alert-popup #acf-form .acf-field-taxonomy .acf-label label, .job-alert-popup #acf-form .acf-field-checkbox .acf-label label { -webkit-margin-after: 0; margin-block-end: 0; } .job-alert-popup #acf-form .acf-field-taxonomy .acf-label .count-terms, .job-alert-popup #acf-form .acf-field-checkbox .acf-label .count-terms { position: absolute; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; right: 28px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); visibility: hidden; opacity: 0; -webkit-transition: 0.2s ease; transition: 0.2s ease; background-color: var(--c-secondary); color: #fff; border-radius: 50%; font-size: 13px; font-weight: 600; aspect-ratio: 1; width: 17px; } .job-alert-popup #acf-form .acf-field-taxonomy .acf-label .count-terms.visible, .job-alert-popup #acf-form .acf-field-checkbox .acf-label .count-terms.visible { visibility: visible; opacity: 1; } .job-alert-popup #acf-form .acf-field-taxonomy .acf-label:after, .job-alert-popup #acf-form .acf-field-checkbox .acf-label:after { position: relative; content: ""; right: 0; top: 0; width: 18px; height: 12px; -webkit-box-flex: 0; -ms-flex: 0 0 18px; flex: 0 0 18px; background: url("../svg/select.svg") no-repeat center; background-size: contain; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .job-alert-popup #acf-form .acf-field-taxonomy .acf-input .acf-checkbox-list, .job-alert-popup #acf-form .acf-field-checkbox .acf-input .acf-checkbox-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transition: height 0.5s ease; transition: height 0.5s ease; overflow: hidden; padding-block: 5px; } .job-alert-popup #acf-form .acf-field-taxonomy .acf-input .acf-checkbox-list:not(.open), .job-alert-popup #acf-form .acf-field-checkbox .acf-input .acf-checkbox-list:not(.open) { display: none; } .job-alert-popup #acf-form .acf-field-taxonomy .acf-input .acf-checkbox-list li label, .job-alert-popup #acf-form .acf-field-checkbox .acf-input .acf-checkbox-list li label { position: relative; padding-block: 5px; -webkit-margin-after: 0; margin-block-end: 0; font-size: clamp(15px, 0.06vw + 14.76px, 16px); display: -webkit-box; display: -ms-flexbox; display: flex; gap: 5px; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .job-alert-popup #acf-form .acf-field-taxonomy .acf-input .acf-checkbox-list li label:before, .job-alert-popup #acf-form .acf-field-checkbox .acf-input .acf-checkbox-list li label:before { position: relative; display: block; content: ""; width: 18px; height: 18px; background-color: #fff; border-radius: 2px; border: 1px solid var(--c-border); -webkit-transition: 0.2s ease; transition: 0.2s ease; z-index: 1; } .job-alert-popup #acf-form .acf-field-taxonomy .acf-input .acf-checkbox-list li label:after, .job-alert-popup #acf-form .acf-field-checkbox .acf-input .acf-checkbox-list li label:after { position: absolute; content: ""; width: 12px; height: 12px; background-color: var(--c-secondary); z-index: 1; right: 3px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 0; visibility: hidden; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .job-alert-popup #acf-form .acf-field-taxonomy .acf-input .acf-checkbox-list li label .sub-label > span, .job-alert-popup #acf-form .acf-field-taxonomy .acf-input .acf-checkbox-list li label .sub-label small, .job-alert-popup #acf-form .acf-field-checkbox .acf-input .acf-checkbox-list li label .sub-label > span, .job-alert-popup #acf-form .acf-field-checkbox .acf-input .acf-checkbox-list li label .sub-label small { display: block; } .job-alert-popup #acf-form .acf-field-taxonomy .acf-input .acf-checkbox-list li label .sub-label small.description, .job-alert-popup #acf-form .acf-field-checkbox .acf-input .acf-checkbox-list li label .sub-label small.description { font-size: 90%; opacity: 0.85; } .job-alert-popup #acf-form .acf-field-taxonomy .acf-input .acf-checkbox-list li label input, .job-alert-popup #acf-form .acf-field-checkbox .acf-input .acf-checkbox-list li label input { position: absolute; margin: 0; opacity: 0; } .job-alert-popup #acf-form .acf-field-taxonomy .acf-input .acf-checkbox-list li label.selected:before, .job-alert-popup #acf-form .acf-field-checkbox .acf-input .acf-checkbox-list li label.selected:before { border-color: var(--c-secondary); } .job-alert-popup #acf-form .acf-field-taxonomy .acf-input .acf-checkbox-list li label.selected:after, .job-alert-popup #acf-form .acf-field-checkbox .acf-input .acf-checkbox-list li label.selected:after { opacity: 1; visibility: visible; } .job-alert-popup #acf-form .acf-field-taxonomy .acf-input .acf-checkbox-list li.disabled, .job-alert-popup #acf-form .acf-field-checkbox .acf-input .acf-checkbox-list li.disabled { opacity: 0.5; } .job-alert-popup #acf-form .acf-field-taxonomy .acf-input .acf-checkbox-list li:not(.disabled), .job-alert-popup #acf-form .acf-field-checkbox .acf-input .acf-checkbox-list li:not(.disabled) { cursor: pointer; } .job-alert-popup #acf-form .acf-field-taxonomy .acf-input .acf-checkbox-list li.selected .checkbox, .job-alert-popup #acf-form .acf-field-checkbox .acf-input .acf-checkbox-list li.selected .checkbox { border-color: var(--c-secondary); } .job-alert-popup #acf-form .acf-field-taxonomy .acf-input .acf-checkbox-list li.selected .checkbox:after, .job-alert-popup #acf-form .acf-field-checkbox .acf-input .acf-checkbox-list li.selected .checkbox:after { opacity: 1; visibility: visible; } .job-alert-popup #acf-form .acf-field-true-false { position: relative; padding-block: 8px; max-width: calc(100% - 50px); margin-inline: auto; font-size: clamp(15px, 0.06vw + 14.76px, 16px); display: -webkit-box; display: -ms-flexbox; display: flex; gap: 5px; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .job-alert-popup #acf-form .acf-field-true-false[data-name=job_alert_team_supervision] { -webkit-margin-before: 10px; margin-block-start: 10px; } .job-alert-popup #acf-form .acf-field-true-false:before { -webkit-box-flex: 0; -ms-flex: 0 0 18px; flex: 0 0 18px; position: relative; display: block; content: ""; width: 18px; height: 18px; background-color: #fff; border-radius: 2px; border: 1px solid var(--c-border); -webkit-transition: 0.2s ease; transition: 0.2s ease; z-index: 1; } .job-alert-popup #acf-form .acf-field-true-false:after { position: absolute; content: ""; width: 12px; height: 12px; background-color: var(--c-secondary); z-index: 1; right: 3px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 0; visibility: hidden; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .job-alert-popup #acf-form .acf-field-true-false .acf-label { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .job-alert-popup #acf-form .acf-field-true-false .acf-label label { cursor: pointer; -webkit-margin-after: 0; margin-block-end: 0; } .job-alert-popup #acf-form .acf-field-true-false .acf-input input[type=checkbox] { position: absolute; margin: 0; opacity: 0; } .job-alert-popup #acf-form .acf-field-true-false.selected:before { border-color: var(--c-secondary); } .job-alert-popup #acf-form .acf-field-true-false.selected:after { opacity: 1; visibility: visible; } .job-alert-popup #acf-form .acf-field-true-false[data-name=job_alert_accept_terms] { padding-block: 20px 0; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 10px; max-width: 100%; } .job-alert-popup #acf-form .acf-field-true-false[data-name=job_alert_accept_terms]:after { top: 23px; left: 3px; -webkit-transform: translateY(0); transform: translateY(0); right: unset; } .job-alert-popup #acf-form .acf-field-true-false[data-name=job_alert_accept_terms] .acf-label { display: none; } .job-alert-popup #acf-form .acf-field-message { -webkit-padding-before: 15px; padding-block-start: 15px; } .job-alert-popup #acf-form .acf-field-message .acf-label { display: none; } .job-alert-popup #acf-form .acf-form-submit { position: relative; -webkit-padding-before: 20px; padding-block-start: 20px; padding-inline: clamp(0px, 0.87vw + -6.67px, 10px); display: -webkit-box; display: -ms-flexbox; display: flex; gap: clamp(10px, 0.97vw + 6.36px, 25px); -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .job-alert-popup #acf-form .acf-form-submit > button, .job-alert-popup #acf-form .acf-form-submit input { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; outline: none; } .job-alert-popup #acf-form .acf-form-submit input[type=submit]:hover { background-color: var(--c-secondary); border-color: var(--c-secondary); } .job-alert-popup #acf-form .acf-form-submit .acf-spinner { position: absolute; top: 50%; right: 25%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media screen and (max-width: 768px) { .job-alert-popup__inner { border-radius: 0; width: 100dvw; height: 100dvh; max-height: 100dvh; } } #job-alert-confirmation { visibility: hidden; opacity: 0; z-index: -1; position: fixed; bottom: 5vh; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: auto; width: calc(100vw - 30px); max-width: var(--g-small-content-width); -webkit-transition: 0.3s ease; transition: 0.3s ease; } #job-alert-confirmation .message { display: block; background: var(--c-action); color: #fff; border-radius: 10px; padding: 15px 25px; text-align: center; font-weight: 600; } #job-alert-confirmation.visible { visibility: visible; opacity: 1; z-index: 10; } *, *::before, *::after { -webkit-box-sizing: inherit; box-sizing: inherit; } * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; text-rendering: optimizeLegibility; } html { font-size: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; scroll-behavior: smooth; } body { min-width: 320px; font-family: var(--default-font-family); font-size: var(--default-font-size); font-weight: var(--default-font-weight); line-height: var(--default-line-height); color: var(--c-default); background-color: var(--c-page-bg); } body.no-scroll, body.menu-open, body.filters-open { overflow: hidden; } body.overflow, body.filters-open { overflow: hidden; } body.overflow:before, body.filters-open:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; position: fixed; background-color: var(--c-overflow); z-index: 101; } /* ============================================ * * Global * ============================================ */ html, body { height: 100%; } .wrap { margin: 0 auto; max-width: calc(var(--g-max-content-width) + var(--g-gutter) * 2); /* Try to delete gutter to a better pixel perfect style */ padding-inline: var(--g-gutter); } @media screen and (min-width: 981px) and (max-width: 1755px) { .wrap { padding-inline: 5vw; } } @media screen and (max-width: 1725px) { .wrap { max-width: 100%; } } .wrap-sm { margin: 0 auto; max-width: calc(var(--g-max-content-width) + var(--g-gutter) * 2); /* Try to delete gutter to a better pixel perfect style */ padding-inline: var(--g-gutter); max-width: calc(var(--g-small-content-width) + var(--g-gutter) * 2); } @media screen and (min-width: 981px) and (max-width: 1755px) { .wrap-sm { padding-inline: 5vw; } } @media screen and (max-width: 1725px) { .wrap-sm { max-width: 100%; } } .wrap-std { margin: 0 auto; max-width: calc(var(--g-max-content-width) + var(--g-gutter) * 2); /* Try to delete gutter to a better pixel perfect style */ padding-inline: var(--g-gutter); max-width: calc(var(--g-std-content-width) + var(--g-gutter) * 2); } @media screen and (min-width: 981px) and (max-width: 1755px) { .wrap-std { padding-inline: 5vw; } } @media screen and (max-width: 1725px) { .wrap-std { max-width: 100%; } } .site { position: relative; overflow-x: hidden; } @media screen and (max-width: 1200px) { .site-main { margin-top: 64px; } } .yellow { color: var(--c-tertiary); } .has-fixed-section { position: relative; } .has-fixed-section .fixed-section { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; will-change: transform; /* optimisation des performances */ } .has-fixed-section .overlay-section { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; position: relative; background-color: var(--c-page-bg); padding-top: clamp(25px, 0.97vw + 21.36px, 40px); -webkit-padding-after: clamp(70px, 1.74vw + 56.67px, 90px); padding-block-end: clamp(70px, 1.74vw + 56.67px, 90px); } .dark-block { display: -webkit-box; display: -ms-flexbox; display: flex; padding-block: clamp(25px, 1.62vw + 18.93px, 50px); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-shadow: 5px 10px 25px 0px rgba(0, 0, 0, 0.08); box-shadow: 5px 10px 25px 0px rgba(0, 0, 0, 0.08); font-size: clamp(18px, 0.13vw + 17.51px, 20px); padding-inline: clamp(20px, 0.32vw + 18.79px, 25px); color: #fff; background: var(--c-dark); border-radius: 25px; gap: 30px; } .dark-block h3, .dark-block .foi-teaser__content .title, .foi-teaser__content .dark-block .title { font-size: clamp(25px, 0.32vw + 23.79px, 30px); margin-bottom: 0; text-transform: capitalize; } .dark-block .content { line-height: 1.25; } .dark-block h3, .dark-block .foi-teaser__content .title, .foi-teaser__content .dark-block .title { color: #fff; font-variation-settings: "wdth" 100, "wght" 700; } .dark-block ul { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 34px; gap: clamp(25px, 0.58vw + 22.82px, 34px); } .dark-block ul li { position: relative; padding-left: clamp(50px, 0.65vw + 47.57px, 60px); } .dark-block ul li:before { content: ""; width: clamp(30px, 0.65vw + 27.57px, 40px); height: clamp(30px, 0.65vw + 27.57px, 40px); background-image: url("../svg/checkmark.svg"); background-size: contain; background-repeat: no-repeat; position: absolute; left: 0; top: 7px; } .dark-block ol { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 34px; list-style-type: none; counter-reset: section; } .dark-block ol li { position: relative; padding-left: clamp(50px, 0.65vw + 47.57px, 60px); } .dark-block ol li { counter-increment: section; } .dark-block ol li:before { content: counter(section); width: clamp(30px, 0.65vw + 27.57px, 40px); height: clamp(30px, 0.65vw + 27.57px, 40px); border-radius: 50%; position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 0; top: 7%; background-color: var(--c-tertiary); color: var(--c-dark); font-size: clamp(20px, 0.65vw + 17.57px, 30px); font-weight: 600; } nav.navigation.pagination { padding-block: clamp(50px, 1.29vw + 45.15px, 70px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } nav.navigation.pagination .nav-links { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 5px; } nav.navigation.pagination a.prev, nav.navigation.pagination a.next { position: absolute; display: block; width: 40px; height: auto; text-indent: -9999px; white-space: nowrap; overflow: hidden; background-image: url("../svg/arrow-blue.svg"); background-repeat: no-repeat; background-size: 30px; background-position: left center; font-family: var(--f-special); letter-spacing: -0.8px; } @media screen and (hover: hover) { nav.navigation.pagination a.prev:hover, nav.navigation.pagination a.next:hover { background-position: right center; } } nav.navigation.pagination a.prev { right: calc(100% + 20px); -webkit-transform: rotate(0.5turn); transform: rotate(0.5turn); } nav.navigation.pagination a.next { left: calc(100% + 20px); } nav.navigation.pagination .page-numbers { -webkit-transition: 0.2s ease; transition: 0.2s ease; } nav.navigation.pagination .page-numbers:not(.next):not(.prev) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px; height: calc(20px + clamp(25px, 0.32vw + 23.79px, 30px)); font-size: clamp(25px, 0.32vw + 23.79px, 30px); aspect-ratio: 1; border-radius: 50%; line-height: 1; } nav.navigation.pagination .page-numbers:not(.next):not(.prev).current, nav.navigation.pagination .page-numbers:not(.next):not(.prev):hover { color: #fff; background-color: var(--c-secondary); } .team-member { container-type: inline-size; display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 300px; min-width: 240px; padding: 5px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 18px; border-radius: 55px; background: var(--c-dark); } .team-member .left { background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 100%; -webkit-box-flex: 0; -ms-flex: 0 0 clamp(80px, 9.43vw + 7.55px, 100px); flex: 0 0 clamp(80px, 9.43vw + 7.55px, 100px); aspect-ratio: 1; -webkit-box-shadow: 2px 5px 10px 0px rgba(0, 0, 0, 0.1); box-shadow: 2px 5px 10px 0px rgba(0, 0, 0, 0.1); } .team-member .right { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-right: 20px; } .team-member .right .name { color: var(--c-action); font-size: clamp(18px, 0.13vw + 17.51px, 20px); font-family: var(--f-special); letter-spacing: -0.8px; } .team-member .right .job { color: #fff; font-size: clamp(16px, 0.13vw + 15.51px, 18px); font-weight: 300; } @container (max-width: 280px) { .team-member .right { padding-right: 5px; } .team-member .right .name { font-size: 18px; } .team-member .right .job { font-size: 16px; } } .mt-20 { margin-top: 20px; } #primary-menu { position: fixed; display: none; z-index: 100; width: 100vw; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100dvh; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #ffffff; } #primary-menu li a { font-family: "archivo-variable", sans-serif; position: relative; font-size: 17px; font-weight: 500; text-transform: uppercase; white-space: nowrap; display: inline-block; padding-block: 5px; } #primary-menu li a:after { position: absolute; content: ""; bottom: 0; left: 0; width: 0; height: 1px; -webkit-transition: 0.2s ease; transition: 0.2s ease; background-color: var(--c-action); } @media screen and (hover: hover) { #primary-menu li a:hover { color: var(--c-action); } #primary-menu li a:hover:after { width: 100%; } } #primary-menu li.current-menu-item a { color: var(--c-action); } #primary-menu li.current-menu-item a:after { width: 100%; } #primary-menu .menu-item-has-children.open > a:first-child { font-weight: 700; font-size: 16px; color: var(--c-secondary); } #primary-menu .menu-item-has-children.open > a:first-child:before { content: url("../svg/arrow-small.svg"); -webkit-transform: scaleX(-1); transform: scaleX(-1); } #primary-menu .menu-item-has-children.open > a:first-child:after { opacity: 0; } #primary-menu .menu-item-has-children > a { font-weight: bold; } #primary-menu .menu-item-has-children .sub-menu { display: none; position: relative; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; left: 0; width: 100vw; height: 100dvh; background: #ffffff; z-index: 101; } .menu-burger { cursor: pointer; } .menu-burger .line { fill: var(--c-secondary); -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } .menu-burger.open .line.top { -webkit-transform: translateY(17px) rotate(45deg); transform: translateY(17px) rotate(45deg); } .menu-burger.open .line.middle { -webkit-transform: scale(0); transform: scale(0); } .menu-burger.open .line.bottom { -webkit-transform: translateY(-17px) rotate(-45deg); transform: translateY(-17px) rotate(-45deg); } @media screen and (min-width: 1201px) { .menu-burger { display: none; } #primary-menu { position: unset; -webkit-transform: unset; transform: unset; padding-bottom: unset; display: -webkit-box; display: -ms-flexbox; display: flex; background-color: transparent; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: clamp(15px, 5vw + -55px, 41px); top: 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: unset; } #primary-menu li { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } #primary-menu li.fyp a { font-family: var(--f-special); letter-spacing: -0.8px; -webkit-padding-before: 2px; padding-block-start: 2px; letter-spacing: -0.1px; -webkit-transition: 0.25s ease; transition: 0.25s ease; } #primary-menu li.fyp a:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); } #primary-menu li.fyp a:hover:after { background: url("../svg/chevron-active.svg") no-repeat center; bottom: -14px; } #primary-menu li.fyp a:after { background: url("../svg/chevron.svg") no-repeat center; width: 15px; height: 8px; left: 50%; bottom: -6px; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-size: contain; -webkit-transition: 0.2s ease; transition: 0.2s ease; } #primary-menu li a { font-size: clamp(14px, 0.06vw + 13.76px, 15px); } #primary-menu .menu-item-has-children.open > a:first-child { font-size: 15px; color: var(--c-main); } #primary-menu .menu-item-has-children.open > a:first-child:before { display: none; } #primary-menu .menu-item-has-children.open > a:first-child:after { display: none; } #primary-menu .menu-item-has-children .sub-menu { position: fixed; width: 100%; background: var(--c-secondary); padding: 45px; } #primary-menu .menu-item-has-children .sub-menu li a { font-weight: normal; color: #ffffff; font-size: clamp(22px, 0.52vw + 20.06px, 30px); } #primary-menu .menu-item-has-children .sub-menu li:hover { border-color: #ffffff; } #primary-menu .menu-item-has-children .sub-menu .menu-item-has-children.open > a:first-child { font-weight: normal; color: #ffffff; font-size: clamp(22px, 0.52vw + 20.06px, 30px); } #primary-menu .menu-item-has-children .sub-menu .menu-item-has-children.open > a:first-child:before { display: none; } #primary-menu .menu-item-has-children .sub-menu .menu-item-has-children.open > a:first-child:after { display: none; } } #header-search { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; width: 50px; height: 50px; border-radius: 50%; background-color: #EAECEF; } #header-search label { margin-bottom: 0; } #header-search input[type=search] { background-color: transparent; border: none; padding-left: 0; padding-right: 0; color: var(--c-text); } #header-search input[type=search]::-webkit-input-placeholder { color: var(--c-text); } #header-search input[type=search]::-moz-placeholder { color: var(--c-text); } #header-search input[type=search]:-ms-input-placeholder { color: var(--c-text); } #header-search input[type=search]::-ms-input-placeholder { color: var(--c-text); } #header-search input[type=search]::placeholder { color: var(--c-text); } #header-search input[type=submit] { display: none; } @media screen and (max-width: 1200px) { #header-search { width: 40px; height: 40px; } #header-search svg { -webkit-transform: scale(0.8); transform: scale(0.8); } } .search-overlay { display: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: fixed; height: 100vh; background: var(--c-overflow-dark); width: 100%; z-index: 102; padding-inline: clamp(15px, 1.62vw + 8.93px, 40px); padding-bottom: 6%; } .search-overlay .form { width: 100%; max-width: 1485px; } .search-overlay form { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 20px; border-radius: 50px; background: #FFF; -webkit-box-shadow: 5px 15px 11px 0px rgba(0, 0, 0, 0.1); box-shadow: 5px 15px 11px 0px rgba(0, 0, 0, 0.1); height: clamp(60px, 1.62vw + 53.93px, 85px); padding-inline: clamp(20px, 1.94vw + 12.72px, 50px); } .search-overlay form ::-webkit-input-placeholder { opacity: 1; } .search-overlay form ::-moz-placeholder { opacity: 1; } .search-overlay form :-ms-input-placeholder { opacity: 1; } .search-overlay form ::-ms-input-placeholder { opacity: 1; } .search-overlay form ::placeholder { opacity: 1; } .search-overlay form .btn-search { cursor: pointer; width: clamp(25px, 1.62vw + 18.93px, 50px); height: clamp(25px, 1.62vw + 18.93px, 50px); } @media screen and (min-width: 981px) { .search-overlay form .btn-search { margin-inline: 30px; } } .search-overlay form input { font-size: clamp(16px, 0.91vw + 12.6px, 30px); background: transparent; border: none; padding-inline: clamp(0px, 2.6vw + -20px, 30px); width: 100%; } #cern-toolbar { position: relative; z-index: 3; background-color: #222; width: 100%; -webkit-transition: 0.2s ease; transition: 0.2s ease; } #cern-toolbar .top-bar { font-family: var(--f-top-bar); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-block: 4px; } #cern-toolbar .top-bar a { display: inline-block; color: #999; font-size: 14px; line-height: 1; padding-block: 6px; } @media screen and (min-width: 1201px) { #cern-toolbar .top-bar a { border-radius: 5px; } } #cern-toolbar .top-bar__left a { font-family: var(--f-top-bar-title); color: #fff; font-weight: 700; } #cern-toolbar .top-bar__left a span { display: none; } #cern-toolbar .top-bar__right ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #cern-toolbar .top-bar__right ul li a { padding-left: 16px; } @media screen and (min-width: 751px) { #cern-toolbar .top-bar__left a span { display: inline-block; color: #999; letter-spacing: normal; } } @media screen and (max-width: 750px) { #cern-toolbar .top-bar__right ul li a { height: 26px; width: 26px; text-indent: -5000px !important; border-left: 1px solid #444; background-repeat: no-repeat; background-position: center; background-size: 18px; } #cern-toolbar .top-bar__right ul li.signin a { background-image: url("../images/login.png"); } #cern-toolbar .top-bar__right ul li.directory a { background-image: url("../images/directory.png"); } } #masthead { --c-default: var(--c-header-color); --c-text: var(--c-header-color); --c-link: var(--c-header-color); background-color: var(--c-header-bg); } #mobile-panel { left: 0; top: 0; width: 100dvw; height: 100dvh; position: fixed; background-color: #fff; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: 0.3s ease; transition: 0.3s ease; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow-x: hidden; } #mobile-panel.open { -webkit-transform: translateX(0); transform: translateX(0); } #mobile-panel .wrapper { padding-inline: 25px; } #mobile-panel .mobile-panel__top { -webkit-box-flex: 0; -ms-flex: 0 0 var(--header-mobile-height); flex: 0 0 var(--header-mobile-height); -webkit-box-shadow: 5px 15px 11px 0px rgba(0, 0, 0, 0.1); box-shadow: 5px 15px 11px 0px rgba(0, 0, 0, 0.1); } #mobile-panel .mobile-panel__scrollable { padding-block: 7vh; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow-y: auto; } @media screen and (max-width: 375px) and (max-height: 680px) { #mobile-panel .mobile-panel__scrollable { padding-block: 5vh; } } #mobile-panel .mobile-panel__scrollable .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; gap: 15px; } #mobile-panel .mobile-panel__scrollable #all-jobs-panel { width: 100%; margin-inline: auto; max-width: 325px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } #mobile-panel .mobile-panel__scrollable #primary-menu-mobile { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } #mobile-panel .mobile-panel__scrollable #primary-menu-mobile li a { font-size: clamp(15px, -0.14vw + 17.52px, 17px); font-family: var(--f-title); text-transform: uppercase; display: block; border-bottom: 1px solid #C7CDDF; padding-block: calc(5px + 1.75vh); } @media screen and (max-width: 375px) and (max-height: 680px) { #mobile-panel .mobile-panel__scrollable #primary-menu-mobile li a { padding-block: calc(5px + 1.3vh); } } #mobile-panel .mobile-panel__scrollable #primary-menu-mobile li:first-of-type a { padding-top: 0; } #mobile-panel .mobile-panel__scrollable #primary-menu-mobile li.fyp a { font-family: var(--f-special); letter-spacing: -0.8px; padding-right: 25px; } #mobile-panel .mobile-panel__scrollable #primary-menu-mobile li.fyp a:after { position: absolute; content: ""; right: 10px; top: calc(50% - 5px); background-image: url("../svg/chevron.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); width: 15px; height: 10px; } #mobile-panel .mobile-panel__footer { background: linear-gradient(309deg, #0033A0 9.03%, #00123A 47.25%); position: relative; padding-block: 33px; display: none; } #mobile-panel .mobile-panel__footer .title { font-size: 17px; text-transform: uppercase; color: #fff; font-family: var(--f-title); margin-bottom: 20px; } #mobile-panel .mobile-panel__footer:after { content: ""; right: 30px; top: 25px; position: absolute; background-image: url("../svg/stars.svg"); width: 23px; height: 38px; } #mobile-panel .mobile-panel__soc-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px 15px; } #mobile-panel .mobile-panel__soc-links a { text-align: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; border: 2px solid #fff; padding: 12px; aspect-ratio: 1; -webkit-transition: 0.2s ease; transition: 0.2s ease; } #mobile-panel .mobile-panel__soc-links a img, #mobile-panel .mobile-panel__soc-links a svg { height: 18px; width: 18px; aspect-ratio: 1; -o-object-fit: contain; object-fit: contain; } @media screen and (hover: hover) { #mobile-panel .mobile-panel__soc-links a:hover { border-color: transparent; -webkit-transform: scale(1.2); transform: scale(1.2); } } body.menu-open #cern-toolbar { z-index: -1; opacity: 0; } body.menu-open .site-header { z-index: 2; background-color: var(--c-page-bg); } .site-header { position: fixed; left: 0; top: 0; width: 100%; z-index: 2; overflow-x: hidden; } .site-header.scroll.header-hidden { z-index: 0; } .site-header.scroll.header-hidden .site-header__main { -webkit-transform: translateY(-100%); transform: translateY(-100%); } .site-header:not(.scroll) .site-header__main { margin-top: 34px; } .site-header__main { position: relative; z-index: 100; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .site-header__navbar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; padding-block: 6px; padding-inline: 12px; background-color: #fff; } .site-header__navbar__right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; gap: clamp(10px, 0.69vw + 1.67px, 15px); } .site-branding a { font-size: clamp(16px, 0.32vw + 14.79px, 21px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; gap: clamp(0px, 0.83vw + -10px, 6px); } .site-branding img { max-height: 60px; -o-object-fit: contain; object-fit: contain; } .site-branding .blog-name { width: clamp(65px, 1.29vw + 60.15px, 85px); aspect-ratio: 82/15; background: url("../svg/careers.svg") no-repeat center; background-size: contain; } @media screen and (min-width: 1601px) { .site-header .site-branding, .site-header .navbar__right { -webkit-box-flex: 0; -ms-flex: 0 0 195px; flex: 0 0 195px; } } @media screen and (min-width: 1201px) and (max-width: 1400px) { .site-header .site-branding .blog-name { display: none; } } @media screen and (min-width: 1201px) { #mobile-panel { display: none; } .site-header__main { padding-block: 30px; } .site-header__navbar { border-radius: 35px; -webkit-box-shadow: 5px 15px 11px 0px rgba(0, 0, 0, 0.1); box-shadow: 5px 15px 11px 0px rgba(0, 0, 0, 0.1); } .site-header .main-navigation { padding-right: clamp(0px, 4.42vw + -61.92px, 23px); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media screen and (min-width: 1201px) and (max-width: 1450px) { .site-header__main { padding-inline: 2vw; } } @media screen and (max-width: 1200px) { body:not(.menu-open) .site-header__navbar { padding-block: 9px; -webkit-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1); } .site-header__main { padding-inline: 0 !important; } .site-header__navbar { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-inline: 16px; } .site-header__navbar .burger-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .site-header__navbar .burger-wrapper, .site-header__navbar .navbar__right { -webkit-box-flex: 0; -ms-flex: 0 0 40px; flex: 0 0 40px; } .site-header__navbar .site-branding { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .site-header__navbar .site-branding a { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .site-header__navbar .site-branding img { max-height: 46px; } .site-header__navbar__right #all-jobs { display: none; } } .site-footer { --c-default: var(--c-footer-color); --c-text: var(--c-footer-color); --c-link: var(--c-footer-color); --c-link-hover: var(--c-footer-color); background: var(--c-footer-bg); -webkit-padding-after: clamp(47px, 0.58vw + 44.82px, 56px); padding-block-end: clamp(47px, 0.58vw + 44.82px, 56px); -webkit-padding-before: clamp(82px, 16.41vw + -44px, 271px); padding-block-start: clamp(82px, 16.41vw + -44px, 271px); position: relative; z-index: 0; } .site-footer:before { position: absolute; content: ""; left: 22.5%; top: -17px; background: url("../svg/stars.svg") no-repeat center; background-size: contain; width: clamp(40px, 0.84vw + 36.84px, 53px); height: clamp(66px, 1.49vw + 60.42px, 89px); } .site-footer__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; mask-image: url("../svg/footer-shape.svg"); -webkit-mask-image: url("../svg/footer-shape.svg"); mask-size: cover; -webkit-mask-size: cover; mask-position: top right; -webkit-mask-position: top right; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; } .site-footer__bg:before { content: ""; position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; background-image: url("../images/wave.jpg"); background-repeat: no-repeat; background-size: cover; background-position: top 40% right; } .site-footer__bg:after { content: ""; position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; background: linear-gradient(300deg, #0033A0 21.19%, rgba(0, 52, 160, 0) 54.1%); } .site-footer__group { position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 25px; } .site-footer .block-title { width: unset; position: relative; text-transform: uppercase; line-height: 1.2; font-size: clamp(16px, 0.13vw + 15.51px, 18px); font-weight: 700; margin-bottom: clamp(40px, 0.65vw + 37.57px, 50px); white-space: nowrap; color: var(--c-text); } .site-footer .block-title:after { content: ""; position: absolute; left: 0; bottom: -13px; background: var(--c-tertiary); height: 2px; width: 43px; } .site-footer .section-footer { position: relative; } .site-footer .section-footer--top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-block: 18px; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 82px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (min-width: 981px) { .site-footer .section-footer--top { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .site-footer .section-footer--top .block-soc-links .soc-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px 18px; } .site-footer .section-footer--top .block-soc-links .soc-links a { text-align: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; border: 2px solid #fff; padding: 12px; aspect-ratio: 1; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .site-footer .section-footer--top .block-soc-links .soc-links a img, .site-footer .section-footer--top .block-soc-links .soc-links a svg { height: 29px; width: 29px; aspect-ratio: 1; -o-object-fit: contain; object-fit: contain; } @media screen and (hover: hover) { .site-footer .section-footer--top .block-soc-links .soc-links a:hover { border-color: transparent; -webkit-transform: scale(1.2); transform: scale(1.2); } } .site-footer .section-footer--top .footer-contact__buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .site-footer .section-footer--top .footer-contact__buttons a, .site-footer .section-footer--top .footer-contact__buttons button { --c-button-primary__color: #fff; } .site-footer .section-footer--top .footer-menus-top .footer-menu li a { display: inline-block; padding-block: 6px; position: relative; font-weight: 300; font-size: clamp(16px, 0.13vw + 15.51px, 18px); } .site-footer .section-footer--top .footer-menus-top .footer-menu li a:after { content: ""; position: absolute; left: 0; bottom: 6px; background: var(--c-text); height: 1px; width: 0; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .site-footer .section-footer--top .footer-menus-top .footer-menu li a:hover:after { width: 100%; } .site-footer .section-footer--left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 40px clamp(25px, 8.09vw + -5.34px, 150px); } .site-footer .section-footer--bottom { color: var(--c-default); } .site-footer .section-footer--bottom .copyright { font-size: 16px; color: rgba(255, 255, 255, 0.7); font-weight: 300; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: unset; -ms-flex-align: unset; align-items: unset; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .site-footer .section-footer--bottom .copyright img { max-width: 88px; } @media screen and (min-width: 1401px) { .site-footer .section-footer--top .block-logo { padding-right: 3vw; } } @media screen and (max-width: 980px) { .site-footer__bg { mask-position: right 7% top; -webkit-mask-position: right 7% top; } } @media screen and (min-width: 769px) { .site-footer .section-footer--top .block-logo { max-width: 13%; } .site-footer .section-footer--top .footer-contact__buttons { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } @media screen and (max-width: 768px) { .site-footer { background: -webkit-gradient(linear, left bottom, left top, from(var(--c-footer-bg-mobile)), color-stop(60%), color-stop(60%, transparent)); background: linear-gradient(to top, var(--c-footer-bg-mobile), 60%, transparent 60%); } .site-footer:before { left: 30px; top: -110px; } .site-footer__bg { max-height: 440px; mask-size: auto 100%; -webkit-mask-size: auto 100%; } .site-footer__bg:before { background-size: 1400px; background-position: top right 10%; } .site-footer__bg:after { background: linear-gradient(-21deg, #0033A0 33.19%, rgba(0, 52, 160, 0) 116.1%); } .site-footer .block-title:after { left: calc(50% - 21.5px); } .site-footer .section-footer { text-align: center; } .site-footer .section-footer--top .soc-links { padding-top: 17.5px; } .site-footer .section-footer--top .footer-contact__buttons { padding-top: 17.5px; } .site-footer .section-footer--left { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .find-your-path-popup { position: fixed; visibility: hidden; opacity: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100dvh; width: 100dvw; left: 0; z-index: -1; -webkit-transition: 0.1s ease; transition: 0.1s ease; /* Override block default style */ } .find-your-path-popup__inner { position: relative; overflow: hidden; width: 100%; height: 100%; max-height: 90vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 auto; max-width: calc(var(--g-max-content-width) + var(--g-gutter) * 2); /* Try to delete gutter to a better pixel perfect style */ padding-inline: var(--g-gutter); max-width: calc(var(--g-max-content-width) + var(--g-gutter) * 2 - 30px); } @media screen and (min-width: 981px) and (max-width: 1755px) { .find-your-path-popup__inner { padding-inline: 5vw; } } @media screen and (max-width: 1725px) { .find-your-path-popup__inner { max-width: 100%; } } .find-your-path-popup__inner > * { position: relative; } .find-your-path-popup.active { visibility: visible; opacity: 1; z-index: 10; } .find-your-path-popup.active .find-your-path-popup__header, .find-your-path-popup.active .find-your-path-popup__body { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } .find-your-path-popup__close { display: none; } .find-your-path-popup__header, .find-your-path-popup__body { width: 100%; max-width: 1440px; margin: auto; opacity: 0; -webkit-transform: translateX(-40px); transform: translateX(-40px); -webkit-transition: 0.4s ease; transition: 0.4s ease; } .find-your-path-popup__header { color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.5vh 25px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: clamp(22px, 0.85vw + 13.66px, 30px); -webkit-transition-delay: 0.22s; transition-delay: 0.22s; } .find-your-path-popup__header .title { font-family: var(--f-special); letter-spacing: -0.8px; font-size: clamp(30px, 2.13vw + 9.15px, 50px); } .find-your-path-popup__header .back-icon { position: absolute; left: 5px; top: 15px; } .find-your-path-popup__body { -webkit-transition-delay: 0.33s; transition-delay: 0.33s; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: auto; scrollbar-width: thin; /* Pour Firefox */ scrollbar-color: var(--c-input-border) transparent; /* Pour Firefox */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 15px; } .find-your-path-popup__body::-webkit-scrollbar { width: 8px; } .find-your-path-popup__body::-webkit-scrollbar-thumb { background-color: var(--c-input-border); border-radius: 10px; } .find-your-path-popup__body::-webkit-scrollbar-track { background-color: transparent; } .find-your-path-popup__body::-webkit-scrollbar-button { display: none; } .find-your-path-popup__body::-webkit-scrollbar-button:single-button:vertical:increment, .find-your-path-popup__body ::-webkit-scrollbar-button:single-button:vertical:decrement { display: none; width: 0; height: 0; color: transparent; } .find-your-path-popup__bottom { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; max-width: 1440px; width: 100%; margin-inline: auto; text-align: center; } .find-your-path-popup .find-your-path__body { padding-top: 10px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow-y: auto; } .find-your-path-popup .find-your-path__steps { padding-inline: 0; } .find-your-path-popup .find-your-path__steps .fyp-form__step-title { color: var(--c-tertiary); } .find-your-path-popup .find-your-path__steps .fyp-form__options a:after { background-image: url("../svg/arrow-yellow.svg"); } @media screen and (min-width: 1201px) and (max-width: 1820px) { .find-your-path-popup__inner { max-width: calc(100% - 50px); } } @media screen and (min-width: 1201px) { .find-your-path-popup { bottom: 100%; left: 0; -webkit-transition: bottom 0.55s cubic-bezier(0, 1.18, 0.55, 1.02), opacity 0.2s linear, visibility 0.2s linear; transition: bottom 0.55s cubic-bezier(0, 1.18, 0.55, 1.02), opacity 0.2s linear, visibility 0.2s linear; } .find-your-path-popup.active { z-index: 1001; bottom: 0; } .find-your-path-popup__inner { background: var(--c-secondary); min-height: 50%; height: 742px; padding: 35px 40px; border-radius: 30px; margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .find-your-path-popup__header { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); -webkit-transition-delay: 0.11s; transition-delay: 0.11s; } .find-your-path-popup__header .back-icon { display: none; } .find-your-path-popup__bottom { border-top: 1px solid rgba(255, 255, 255, 0.2); text-align: right; -webkit-padding-before: 25px; padding-block-start: 25px; } .find-your-path-popup__close { display: block; position: absolute; right: 12px; top: 12px; cursor: pointer; width: 58px; height: 58px; background-color: var(--c-default); background-image: url("../svg/close.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; -webkit-transition: 0.3s ease; transition: 0.3s ease; border-radius: 50%; aspect-ratio: 1; z-index: 1; } .find-your-path-popup__close:after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); -webkit-transition: 0.3s ease 0s; transition: 0.3s ease 0s; background: url("../svg/closing.svg") no-repeat center; background-size: contain; } .find-your-path-popup__close:hover { background-color: #000; } .find-your-path-popup__close:hover:after { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .find-your-path-popup__body { max-width: calc(1440px + (clamp(15px, 4.86vw + -43.33px, 50px) * 2) + (clamp(0px, 5.77vw + -80.77px, 30px) * 2)); -webkit-transition-delay: 0.22s; transition-delay: 0.22s; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } } @media screen and (max-width: 1200px) { .find-your-path-popup { top: var(--header-mobile-height); height: calc(100vh - var(--header-mobile-height)); -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .find-your-path-popup__inner { padding-block: 28px; } .find-your-path-popup__inner:before { position: absolute; content: ""; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; background-color: var(--c-secondary); z-index: 0; -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); -webkit-transition: border-radius 0.4s ease 0.4s, -webkit-transform 0.6s cubic-bezier(0, 1.18, 0.55, 1.02); transition: border-radius 0.4s ease 0.4s, -webkit-transform 0.6s cubic-bezier(0, 1.18, 0.55, 1.02); transition: transform 0.6s cubic-bezier(0, 1.18, 0.55, 1.02), border-radius 0.4s ease 0.4s; transition: transform 0.6s cubic-bezier(0, 1.18, 0.55, 1.02), border-radius 0.4s ease 0.4s, -webkit-transform 0.6s cubic-bezier(0, 1.18, 0.55, 1.02); } } @media screen and (max-width: 1200px) and (orientation: landscape) { .find-your-path-popup__inner:before { width: 100%; } } @media screen and (max-width: 1200px) and (orientation: portrait) { .find-your-path-popup__inner:before { height: calc(100% + var(--header-mobile-height) * 2); } } @media screen and (max-width: 1200px) { .find-your-path-popup.active .find-your-path-popup__inner:before { border-radius: 0; -webkit-transform: translate(-50%, -50%) scale(100%); transform: translate(-50%, -50%) scale(100%); } .find-your-path-popup.gone .find-your-path-popup__inner:before { border-radius: 50% !important; -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); -webkit-transition: border-radius 0s ease 0s, -webkit-transform 0.6s cubic-bezier(0, 1.18, 0.55, 1.02); transition: border-radius 0s ease 0s, -webkit-transform 0.6s cubic-bezier(0, 1.18, 0.55, 1.02); transition: transform 0.6s cubic-bezier(0, 1.18, 0.55, 1.02), border-radius 0s ease 0s; transition: transform 0.6s cubic-bezier(0, 1.18, 0.55, 1.02), border-radius 0s ease 0s, -webkit-transform 0.6s cubic-bezier(0, 1.18, 0.55, 1.02); } .find-your-path-popup.gone .find-your-path-popup__header, .find-your-path-popup.gone .find-your-path-popup__body { opacity: 0; -webkit-transition: 0.1s ease; transition: 0.1s ease; } .find-your-path-popup__header { text-align: center; padding-bottom: 15px; } .find-your-path-popup__header .fyp-icon { display: none; } .find-your-path-popup__body { padding-block: 0; } .find-your-path-popup .find-your-path__steps .fyp-form__options li button, .find-your-path-popup .find-your-path__steps .fyp-form__options li a { padding-inline: 30px; } } @media screen and (max-width: 768px) { .find-your-path-popup .find-your-path__steps .fyp-form__step { padding-inline: 0; } .find-your-path-popup .find-your-path__steps .fyp-form__step-title { text-align: left; } } @media screen and (max-width: 374px) { .find-your-path-popup__header .title { font-size: 26px; } } @media screen and (min-width: 769px) and (orientation: landscape) and (max-height: 768px) { .find-your-path-popup__inner { padding-block: 20px; } .find-your-path-popup__header { padding-bottom: 15px; } .find-your-path-popup__body { gap: 0; } .find-your-path-popup__bottom { -webkit-padding-before: 20px; padding-block-start: 20px; } .find-your-path-popup .find-your-path__steps .fyp-form__step { -webkit-padding-before: 3vh; padding-block-start: 3vh; -webkit-padding-after: 3vh; padding-block-end: 3vh; } .find-your-path-popup .find-your-path__steps .fyp-form__step-title { padding-bottom: 20px; } } @media screen and (min-width: 769px) and (orientation: landscape) and (max-height: 650px) { .find-your-path-popup__inner { padding-block: 15px; } .find-your-path-popup .find-your-path__steps .fyp-form__step { -webkit-padding-before: 0; padding-block-start: 0; } .find-your-path-popup .find-your-path__steps .fyp-form__step li button, .find-your-path-popup .find-your-path__steps .fyp-form__step li a { padding-block: 10px; font-size: 19px; } } .foi-teaser { padding-block: 7.5px; } .foi-teaser__inner { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; border-radius: 10px; background-color: #fff; border: 1px solid var(--c-action); max-width: 410px; margin: auto; overflow: hidden; height: 100%; -webkit-transition: 0.2s ease; transition: 0.2s ease; } @media screen and (min-width: 980px) and (hover: hover) { .foi-teaser__inner:hover { cursor: pointer; -webkit-box-shadow: 10px 10px 0px 0px #00D3B7; box-shadow: 10px 10px 0px 0px #00D3B7; } .foi-teaser__inner:hover .foi-teaser__content { opacity: 1; visibility: visible; } .foi-teaser__inner:hover .foi-teaser__content .title { top: 0; } .foi-teaser__inner:hover .foi-teaser__content .link:before { width: 0; } } .foi-teaser__content { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; position: absolute; left: 0; top: 0; height: 100%; width: 100%; padding-block: clamp(35px, 0.65vw + 32.57px, 45px); padding-inline: clamp(15px, 0.65vw + 12.57px, 25px); visibility: hidden; opacity: 0; background-color: #fff; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .foi-teaser__content .title { margin: 0; position: relative; top: 90%; -webkit-transition: 0.4s cubic-bezier(0, 1.18, 0.55, 1.02); transition: 0.4s cubic-bezier(0, 1.18, 0.55, 1.02); } .foi-teaser__content .description { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-inline: clamp(15px, 0.65vw + 12.57px, 25px); color: var(--c-default); overflow-y: auto; } .foi-teaser__content .link { position: relative; display: block; margin-inline: clamp(15px, 0.65vw + 12.57px, 25px); position: relative; display: inline-block; line-height: 1; font-weight: 600; color: var(--c-link); } .foi-teaser__content .link:before { content: ""; position: absolute; bottom: 0; left: 0; background-color: var(--c-link); -webkit-transition: 0.2s ease; transition: 0.2s ease; width: 0; height: 1px; } @media screen and (hover: hover) { .foi-teaser__content .link:hover:before { width: 100%; } } @media screen and (hover: none) { .foi-teaser__content .link:before { width: 100%; } } .foi-teaser__content .link:before { width: 100%; } @media screen and (hover: hover) { .foi-teaser__content .link:hover:before { width: 0; } } .foi-teaser__content .link:after { content: ""; position: absolute; width: 17px; height: 12px; left: calc(100% + 15px); top: calc(50% - 6px); background-image: url("../svg/arrow-green.svg"); background-repeat: no-repeat; background-position: right center; background-size: contain; } .foi-teaser__top { aspect-ratio: 1; } .foi-teaser__top img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; vertical-align: middle; } .foi-teaser__bottom { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-inline: clamp(15px, 1.62vw + 8.93px, 40px) clamp(20px, 1.94vw + 12.72px, 50px); background-image: url("../svg/arrow-green.svg"); background-position: right 25px top 25px; background-size: 17px; background-repeat: no-repeat; } .foi-teaser__bottom h3, .foi-teaser__bottom .foi-teaser__content .title, .foi-teaser__content .foi-teaser__bottom .title { margin: 0; } @media screen and (min-width: 601px) { .foi-teaser { padding-inline: 10px; padding-block: 10px; } .foi-teaser__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .foi-teaser__top { aspect-ratio: 1.03; } .foi-teaser__bottom { padding-block: 15px 30px; } } @media screen and (max-width: 600px) { .foi-teaser__top { -webkit-box-flex: 0; -ms-flex: 0 0 29%; flex: 0 0 29%; } .foi-teaser__bottom { padding-block: 10px 25px; background-position: bottom 13px right 15px; } .foi-teaser__bottom h3, .foi-teaser__bottom .foi-teaser__content .title, .foi-teaser__content .foi-teaser__bottom .title { font-family: var(--f-default); font-size: 18px; font-weight: 600; } } .archive__term, .empty-foi { border-top: 1px solid var(--c-border); padding-block: clamp(17px, 1.49vw + 11.42px, 40px); } .archive__term h2.archive__term-title, .empty-foi h2.archive__term-title { color: var(--c-dark); font-size: clamp(25px, 1.39vw + 8.33px, 35px); font-family: var(--f-special); letter-spacing: -0.8px; } @media screen and (min-width: 769px) { .archive__term > *:first-of-type, .empty-foi > *:first-of-type { -webkit-box-flex: 0; -ms-flex: 0 0 41%; flex: 0 0 41%; -webkit-padding-end: clamp(20px, 1.3vw + 10px, 35px); padding-inline-end: clamp(20px, 1.3vw + 10px, 35px); } .archive__term > *:last-of-type, .empty-foi > *:last-of-type { -webkit-box-flex: 0; -ms-flex: 0 0 59%; flex: 0 0 59%; -webkit-padding-start: clamp(20px, 0.43vw + 16.67px, 25px); padding-inline-start: clamp(20px, 0.43vw + 16.67px, 25px); } .archive__term-right, .archive__term__right, .empty-foi-right, .empty-foi__right { border-left: 1px solid var(--c-border); } } .empty-foi { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .empty-foi:before { content: ""; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; top: 0; height: 100%; position: absolute; background-color: #fff; z-index: -1; opacity: 0; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .empty-foi h2 { -webkit-margin-after: 0; margin-block-end: 0; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .empty-foi__text { color: #5D6066; font-size: clamp(16px, 0.21vw + 13.91px, 18px); } .empty-foi__right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: clamp(15px, 2.78vw + -18.33px, 35px); } @media screen and (hover: hover) { .empty-foi:hover:before { opacity: 1; } .empty-foi:hover h2 { color: var(--c-secondary); } } @media screen and (min-width: 769px) { .empty-foi { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .empty-foi__right { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .empty-foi__right .btn-alert { white-space: nowrap; } .empty-foi__text { text-align: right; } } @media screen and (max-width: 768px) { .empty-foi__right { -webkit-padding-after: 10px; padding-block-end: 10px; } } .archive__term { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 25px 0; } .archive__term:before { content: ""; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; top: 0; height: 100%; position: absolute; background-color: #fff; z-index: -1; opacity: 0; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .archive__term-left { position: relative; } .archive__term-left:after { content: ""; top: 5px; right: 25px; height: clamp(25px, 1.06vw + 14.57px, 35px); width: clamp(25px, 1.06vw + 14.57px, 35px); position: absolute; opacity: 0; -webkit-transition: all 300ms ease; transition: all 300ms ease; background: url("../svg/arrow-green.svg") no-repeat center; background-size: contain; } @media screen and (hover: hover) { .archive__term:hover:before { opacity: 1; } .archive__term:hover .archive__term-left h2 { color: var(--c-secondary); } .archive__term:hover .archive__term-left:after { opacity: 1; } } .archive__term .btn-alert { -webkit-padding-start: clamp(50px, 1.29vw + 45.15px, 70px); padding-inline-start: clamp(50px, 1.29vw + 45.15px, 70px); } .archive__term .job-offer-teaser { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px; border-radius: 10px; background: #FFF; -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.02); box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.02); padding-block: 18px; padding-inline: clamp(15px, 0.65vw + 12.57px, 25px); } .archive__term .job-offer-teaser__top { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0 15px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .archive__term .job-offer-teaser__top .ref { display: none; color: #5D6066; font-size: clamp(14px, 0.17vw + 12.67px, 16px); line-height: calc(clamp(18px, 0.26vw + 17.03px, 22px) * var(--h3-line-height)); } .archive__term .job-offer-teaser__tags { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px 25px; color: #191414; font-size: 15px; display: none; } .archive__term .job-offer-teaser__tags li { position: relative; padding-left: 25px; } .archive__term .job-offer-teaser__tags li:before { content: ""; position: absolute; left: 0; top: -1px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("../svg/contract.svg"); width: 18px; height: 18px; } .archive__term .job-offer-teaser__tags li.flexibility-tag:before { width: 20px; height: 20px; background-image: url("../svg/laptop.svg"); } .archive__term .job-offer-teaser h3, .archive__term .job-offer-teaser .foi-teaser__content .title, .foi-teaser__content .archive__term .job-offer-teaser .title { font-family: var(--f-default); font-size: clamp(18px, 0.35vw + 15.33px, 22px); color: var(--c-primary); font-weight: 600; -webkit-margin-after: 0; margin-block-end: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-transition: all 300ms ease; transition: all 300ms ease; } @media screen and (hover: hover) { .archive__term .job-offer-teaser:hover h3, .archive__term .job-offer-teaser:hover .foi-teaser__content .title, .foi-teaser__content .archive__term .job-offer-teaser:hover .title { color: var(--c-action); } } @media screen and (min-width: 769px) { .archive__term .job-offer-teaser__top .ref { display: block; } .archive__term .job-offer-teaser__tags { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 25px; } } @media screen and (max-width: 980px) { .archive__term .job-offer-teaser__top { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .archive__term-left h2 { margin-bottom: clamp(16.56px, 0.12vw + 16.11px, 18.4px); } .archive__term-jobs { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 15px; } @media screen and (min-width: 769px) { .archive__term { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .foi__explore-foi-slider-wrapper { padding-block: clamp(30px, 1.94vw + 22.72px, 60px); } @media screen and (min-width: 481px) { .foi__explore-foi-slider-wrapper { margin-inline: -10px; } } .foi__explore-foi-slider .slick-list { overflow: visible; } .foi__explore-foi-slider .slick-track { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .foi__explore-foi-slider .slick-slide { height: inherit !important; } .program-teaser { max-width: 575px; } @media screen and (hover: hover) { .program-teaser:hover .program-teaser__inner:after { -webkit-transform: translate(0); transform: translate(0); } .program-teaser:hover .program-teaser__top img { -webkit-transform: scale(1.2); transform: scale(1.2); } .program-teaser:hover .program-teaser__bottom .title { color: var(--c-action); } .program-teaser:hover .program-teaser__bottom .title:after { -webkit-transform: translateX(15px); transform: translateX(15px); } } .program-teaser__inner { position: relative; height: 100%; border-radius: 25px; background: var(--c-dark); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; color: #fff; overflow: hidden; padding-bottom: 25px; -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; } .program-teaser__inner > * { position: relative; z-index: 1; } .program-teaser__inner:after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(309deg, #0033A0 9.03%, transparent 47.25%); -webkit-transform: translate(100%, 100%); transform: translate(100%, 100%); -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; } .program-teaser__top { width: 100%; aspect-ratio: 560/170; -webkit-box-flex: 0; -ms-flex: 0 0 170px; flex: 0 0 170px; overflow: hidden; } .program-teaser__top img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: 0.3s ease-in; transition: 0.3s ease-in; } .program-teaser__bottom { padding-inline: clamp(25px, 2.66vw + -1.06px, 50px); padding-block: 16px; } .program-teaser__bottom .title { position: relative; padding-right: 35px; font-family: var(--f-special); letter-spacing: -0.8px; font-size: clamp(30px, 0.53vw + 24.79px, 35px); line-height: 1.1; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .program-teaser__bottom .title:after { content: ""; position: absolute; bottom: 0; right: 0; width: 34px; height: clamp(30px, 1.29vw + 25.15px, 50px); -webkit-transition: all 300ms ease; transition: all 300ms ease; background: url("../svg/arrow-green.svg") no-repeat center; background-size: contain; } .program-teaser__bottom .description { padding-block: 17px clamp(25px, 0.65vw + 22.57px, 35px); font-size: clamp(18px, 0.13vw + 17.51px, 20px); } .program-teaser__bottom .criteria { padding-block: clamp(25px, 1.62vw + 18.93px, 50px) 15px; border-top: 1px solid rgba(210, 250, 255, 0.5); color: var(--c-light); } .program-teaser__bottom .criteria .label { text-transform: uppercase; font-family: var(--f-title); font-variation-settings: "wdth" 100, "wght" 700; font-size: clamp(16px, 0.06vw + 15.76px, 17px); } .program-teaser__bottom .criteria .checklist { -webkit-padding-before: clamp(20px, 0.32vw + 18.79px, 25px); padding-block-start: clamp(20px, 0.32vw + 18.79px, 25px); list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 34px; gap: clamp(8px, 0.13vw + 7.51px, 10px); font-size: 17px; } .program-teaser__bottom .criteria .checklist li { position: relative; padding-left: clamp(50px, 0.65vw + 47.57px, 60px); } .program-teaser__bottom .criteria .checklist li:before { content: ""; width: clamp(30px, 0.65vw + 27.57px, 40px); height: clamp(30px, 0.65vw + 27.57px, 40px); background-image: url("../svg/checkmark.svg"); background-size: contain; background-repeat: no-repeat; position: absolute; left: 0; top: 7px; } .program-teaser__bottom .criteria .checklist li { padding-left: clamp(50px, 0.97vw + 46.36px, 65px); } /************************************ * TITLES */ h1, .h1, h2, .h2, h3, .foi-teaser__content .title, .h3, h4, .h4, h5, .h5, h6, .h6 { -webkit-margin-before: 0; margin-block-start: 0; -webkit-margin-after: 0.25em; margin-block-end: 0.25em; } h1, .h1 { font-family: var(--h1-font-family); font-size: var(--h1-font-size); font-weight: var(--h1-font-weight); font-style: var(--h1-font-style); color: var(--h1-color); line-height: var(--h1-line-height); text-transform: var(--h1-text-transform); -webkit-margin-after: 0; margin-block-end: 0; padding-block: 10px; letter-spacing: -1.5px; } h2, .h2 { font-family: var(--h2-font-family); font-size: var(--h2-font-size); font-weight: var(--h2-font-weight); font-style: var(--h2-font-style); color: var(--h2-color); line-height: var(--h2-line-height); text-transform: var(--h2-text-transform); } h3, .foi-teaser__content .title, .h3 { font-family: var(--h3-font-family); font-size: var(--h3-font-size); font-weight: var(--h3-font-weight); font-style: var(--h3-font-style); color: var(--h3-color); line-height: var(--h3-line-height); text-transform: var(--h3-text-transform); } h4, .h4 { font-family: var(--h4-font-family); font-size: var(--h4-font-size); font-weight: var(--h4-font-weight); font-style: var(--h4-font-style); color: var(--h4-color); line-height: var(--h4-line-height); text-transform: var(--h4-text-transform); } h5, .h5 { font-family: var(--h5-font-family); font-size: var(--h5-font-size); font-weight: var(--h5-font-weight); font-style: var(--h5-font-style); color: var(--h5-color); line-height: var(--h5-line-height); text-transform: var(--h5-text-transform); } h6, .h6 { font-family: var(--h6-font-family); font-size: var(--h6-font-size); font-weight: var(--h6-font-weight); font-style: var(--h6-font-style); color: var(--h6-color); line-height: var(--h6-line-height); text-transform: var(--h6-text-transform); } /************************************ * LISTES */ ul.nostyle, ol.nostyle { margin: 0; padding: 0; list-style-type: none; } ul.nostyle li, ol.nostyle li { margin: 0; } /************************************ * PARAGRAPH */ p { line-height: var(--paragraph-line-height); } * + p { -webkit-margin-before: 0.5em; margin-block-start: 0.5em; } /************************************ * LINKS */ a { position: relative; color: var(--c-link); text-decoration: none; -webkit-transition: all 300ms ease; transition: all 300ms ease; } a.anchor-link { text-decoration: underline; } a.underline:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; max-width: 0; height: 1px; background-color: var(--c-link); -webkit-transition: all 300ms ease; transition: all 300ms ease; } a:focus.underline:after, a:hover.underline:after, a:active.underline:after { max-width: 100% !important; } a:focus, a:active { outline: 0; } a.nostyle { text-decoration: none; } /************************************ * TEXT STYLES */ strong { font-weight: 600; } dfn, cite, em, i { font-style: italic; } sup { font-size: 60%; line-height: normal; vertical-align: top; } /************************************ * IMAGE */ img { max-width: 100%; height: auto; border: none; image-rendering: optimizeQuality; } /************************************ * VIDEO */ video { max-width: 100%; height: auto; } /************************************ * MISC */ blockquote { margin: 0 1.5em; } address { margin: 0 0 1.5em; } hr { border: 0; height: 1px; -webkit-margin-after: 1.5em; margin-block-end: 1.5em; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object { max-width: 100%; } .wp-caption { float: none; font-size: 0.875rem; margin: 0; max-width: 100%; } /* ============================================ * * Global * ============================================ */ .std { color: var(--c-text); /*p, ul, ol { line-height: 1.5; }*/ } .std h1, .std h2, .std h3, .std .foi-teaser__content .title, .foi-teaser__content .std .title, .std h4, .std h5, .std h6 { -webkit-margin-before: 1.3em; margin-block-start: 1.3em; } .std p { margin: 1.3em 0 0; } .std ul { -webkit-padding-start: 25px; padding-inline-start: 25px; margin: 1.3em 0; list-style: none; } .std ul li:before { content: "•"; display: inline-block; vertical-align: top; width: 1.2em; -webkit-margin-start: -1.2em; margin-inline-start: -1.2em; color: var(--c-text); font-size: 20px; line-height: 1.8rem; } .std ul li ul { -webkit-margin-before: 1em; margin-block-start: 1em; } .std ul li ul, .std ul li ul:last-child { -webkit-margin-after: 1em; margin-block-end: 1em; } .std blockquote { margin-block: 2em; margin-inline: 8% 16%; -webkit-padding-start: 8%; padding-inline-start: 8%; -webkit-border-start: 3px solid var(--c-text); border-inline-start: 3px solid var(--c-text); } .std a.btn { text-decoration: none; } .std *:first-child { -webkit-margin-before: 0; margin-block-start: 0; } .std *:last-child { -webkit-margin-after: 0; margin-block-end: 0; } .close-link { font-size: 0; text-indent: 100%; overflow: hidden; display: block; width: 35px; height: 35px; position: absolute; right: 30px; top: 30px; padding: 0; border: none; border-radius: 50%; background: #000; outline: none; cursor: pointer; } .close-link:before, .close-link:after { content: ""; display: block; width: 21px; border-top: 3px solid #fff; position: absolute; top: 50%; left: 50%; margin: -2px 0 0 -11px; } .close-link:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .close-link:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .close-link:hover { /*&:before, &:after { border-color: #fff; }*/ } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .notice { display: block; font-size: 80%; font-style: italic; } /** * Font-size calcul */ /** * Trigger hover effect on different pseudo-classes * depending on touch or no-touch device * => no-touch > on hover and on focus (by default, can be disable) * => touch > on active, and when a class is added on the targeted element (optionnal) * * @param $focus (boolean) set to false to disable the hover effect on focus (no-touch only) * @param $touchClass (string) the hover effect will be set if the targeted element has this class */ /** * Set an item to 100% of its parent's width and height */ /** * Set an item to 100% of the window width (and 100% of its parent height) * even if located in a limited width wrapper */ /** * Set an item to 100% of the window width * even if located in a limited width wrapper, * but keep it in the flow */ /** * To call on an tag. * Set the image size to adapt to its parent */ /** * Like img-cover(), but for responsive img with * /!\ To call on , or parent. */ /** * Floating form items * if $class2 equals 'empty', the next item is cleared */ /* A simple little SCSS mixin for creating scrim gradients Inspired by Andreas Larson - https://github.com/larsenwork https://css-tricks.com/easing-linear-gradients/ */ /** Convert em value into px */ /** Fluid font-size between 2 breakpoints. Font-size must be in px, use em2px() function to convert from em. */ /** Fluid value between 2 breakpoints (can be use for other than font-size) (Font-size must be in px, use em2px() function to convert from em) */ /* Fluid value - clamp version (2023) @see https://www.smashingmagazine.com/2022/10/fluid-typography-clamp-sass-functions/ */ /** * Animated placeholder for images or divs (FB like) */ /*@mixin breakpoint($point) { @if $point == desktop { @media only screen and (max-width: $bp-xlarge) { @content; } } @else if $point == table { @media only screen and (max-width: $bp-large) { @content; } } @else if $point == mobile { @media only screen and (max-width: $bp-xsmall) { @content; } } }*/ /*** SPECIFIC TO CURRENT PROJECT ***/ /************************************ * Grids */ /************************************ * Breakpoints */ /************************************ * Transitions */ /************************************ * Paths */ /************************************ * Fonts */ /*** LOCAL FONTS ***/ /*** FONTS ***/ /*** VARIABLES TO USE ***/ /************************************ * Font Sizes */ /************************************ * COLORS */ /************************************ * THEME */ .event-teaser { padding-block: 7.5px; padding-inline: 10px; } .event-teaser__inner { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 13px; padding-block: 33px; padding-inline: clamp(20px, 0.97vw + 16.36px, 35px); border-radius: 10px; background-color: #fff; color: var(--c-secondary); -webkit-box-shadow: 10px 10px 0px 0px #00D3B7; box-shadow: 10px 10px 0px 0px #00D3B7; max-width: 410px; margin: auto; overflow: hidden; height: 100%; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .event-teaser__date { font-weight: 700; font-size: clamp(18px, 0.26vw + 17.03px, 22px); } .event-teaser__title { padding-block: 10px 0; margin-bottom: 0.3em; color: var(--c-secondary) !important; font-size: clamp(25px, 0.32vw + 23.79px, 30px); } .event-teaser__content { padding-block: clamp(10px, 0.65vw + 7.57px, 20px); position: relative; } .event-teaser__content:before { content: ""; position: absolute; left: 0; top: 0; width: clamp(40px, 0.97vw + 36.36px, 55px); height: 2px; background-color: var(--c-tertiary); } .event-teaser__content .block-multifocus__multi-col p { font-size: clamp(18px, 0.13vw + 17.51px, 20px); line-height: 1.27; color: var(--c-secondary); } .event-teaser__infos { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 5px; padding-block: 15px; padding-inline: clamp(10px, -5.95vw + 45.71px, 0px); border-radius: 5px; } .event-teaser__infos:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--c-light); width: calc(100% + clamp(15px, 0.97vw + 11.36px, 30px)); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .event-teaser__infos .for, .event-teaser__infos .where { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; font-size: 16px; line-height: 1.25; } .event-teaser__infos .for > .label, .event-teaser__infos .where > .label { -webkit-box-flex: 0; -ms-flex: 0 0 35%; flex: 0 0 35%; color: var(--c-dark); font-weight: 700; text-transform: uppercase; } .event-teaser__infos .for > .value, .event-teaser__infos .where > .value { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-weight: 600; } .event-teaser__link { padding-top: 26px; margin-inline: -7.5px; } .event-teaser__link a { position: relative; display: inline-block; line-height: 1; max-width: calc(100% - 30px); line-height: 25px; } .event-teaser__link a:before { content: ""; position: absolute; bottom: 0; left: 0; background-color: var(--c-link); -webkit-transition: 0.2s ease; transition: 0.2s ease; width: 0; height: 1px; } @media screen and (hover: hover) { .event-teaser__link a:hover:before { width: 100%; } } @media screen and (hover: none) { .event-teaser__link a:before { width: 100%; } } .event-teaser__link a:before { width: 100%; } @media screen and (hover: hover) { .event-teaser__link a:hover:before { width: 0; } } .event-teaser__link a:after { content: ""; position: absolute; left: calc(100% + 5px); background: url("../svg/link-blank.svg") no-repeat center; width: 25px; height: 25px; } @media screen and (min-width: 601px) { .event-teaser__inner { padding-block: 30px; } .event-teaser__title { padding-block: 5px; } .event-teaser.slick-slide { -webkit-transition: 0.2s ease; transition: 0.2s ease; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .event-teaser.slick-slide:not(.slick-active):not(.slick-current) { opacity: 0.3; } } @media screen and (max-width: 600px) { .event-teaser { padding-inline: 15px; } } .testimonial-teaser { width: 100%; max-width: 581px; padding-inline: 12.5px; container-type: inline-size; } .testimonial-teaser__inner { aspect-ratio: var(--testimonial-ar-mobile); min-height: 320px; max-height: 500px; margin-inline: auto; background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 10px; overflow: hidden; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding: 40px; } @media screen and (hover: hover) { .testimonial-teaser__inner:hover .testimonial-teaser__back { visibility: visible; opacity: 1; z-index: 1; } .testimonial-teaser__inner:hover .testimonial-teaser__title, .testimonial-teaser__inner:hover .testimonial-teaser__job { opacity: 0; } } @media screen and (hover: none) { .testimonial-teaser__inner.hover .testimonial-teaser__back { visibility: visible; opacity: 1; z-index: 1; } .testimonial-teaser__inner.hover .testimonial-teaser__title, .testimonial-teaser__inner.hover .testimonial-teaser__job { opacity: 0; } } .testimonial-teaser__front { color: #fff; } .testimonial-teaser__view { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .testimonial-teaser__view:after { content: ""; position: relative; display: block; background-color: rgba(0, 211, 183, 0.5); background-image: url("../svg/eye.svg"); background-position: center; background-size: 35px; background-repeat: no-repeat; width: 60px; height: 60px; border-radius: 50%; } .testimonial-teaser__title { font-family: var(--f-special); letter-spacing: -0.8px; font-size: clamp(25px, 0.32vw + 23.79px, 30px); -webkit-transition: 0.2s ease; transition: 0.2s ease; } .testimonial-teaser__job { font-size: clamp(18px, 0.13vw + 17.51px, 20px); -webkit-transition: 0.2s ease; transition: 0.2s ease; } .testimonial-teaser__back { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-height: 100%; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; background-color: rgba(0, 24, 65, 0.9); padding-block: clamp(30px, 2.27vw + 21.5px, 65px); padding-inline: clamp(40px, 0.87vw + 33.33px, 50px) clamp(40px, 2.6vw + 20px, 70px); opacity: 0; visibility: hidden; z-index: -1; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .testimonial-teaser__back .close { display: block; position: absolute; right: 12px; top: 12px; cursor: pointer; width: 40px; height: 40px; background-color: var(--c-default); background-image: url("../svg/close.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; -webkit-transition: 0.3s ease; transition: 0.3s ease; border-radius: 50%; aspect-ratio: 1; z-index: 1; } .testimonial-teaser__back .close:after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); -webkit-transition: 0.3s ease 0s; transition: 0.3s ease 0s; background: url("../svg/closing.svg") no-repeat center; background-size: contain; } .testimonial-teaser__back .close:hover { background-color: #000; } .testimonial-teaser__back .close:hover:after { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .testimonial-teaser__link { position: relative; display: inline-block; line-height: 1; margin-top: 40px; color: #fff; font-size: 18px; } .testimonial-teaser__link:before { content: ""; position: absolute; bottom: 0; left: 0; background-color: var(--c-link); -webkit-transition: 0.2s ease; transition: 0.2s ease; width: 0; height: 1px; } @media screen and (hover: hover) { .testimonial-teaser__link:hover:before { width: 100%; } } @media screen and (hover: none) { .testimonial-teaser__link:before { width: 100%; } } .testimonial-teaser__link:before { width: 100%; } @media screen and (hover: hover) { .testimonial-teaser__link:hover:before { width: 0; } } .testimonial-teaser__link:before { background-color: #fff; } .testimonial-teaser__link:after { position: absolute; margin-left: 10px; } .testimonial-teaser__excerpt { position: relative; padding-left: var(--padding-left-quote); -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; overflow: auto; font-size: clamp(20px, 0.13vw + 19.51px, 22px) !important; color: #fff !important; scrollbar-width: thin; /* Pour Firefox */ scrollbar-color: var(--c-input-border) transparent; /* Pour Firefox */ } .testimonial-teaser__excerpt, .testimonial-teaser__excerpt p { font-size: clamp(20px, 0.52vw + 18.06px, 28px); font-style: italic; font-weight: 300; line-height: 1.25; color: var(--c-dark); } .testimonial-teaser__excerpt:before { position: absolute; content: ""; width: 40px; height: 35px; left: 0; top: 0; background: url("../svg/quote.svg") no-repeat center; background-size: contain; } @media screen and (max-width: 768px) { .testimonial-teaser__excerpt { padding-left: 0; } .testimonial-teaser__excerpt:before { position: relative; display: block; -webkit-margin-after: 20px; margin-block-end: 20px; } } .testimonial-teaser__excerpt::-webkit-scrollbar { width: 8px; } .testimonial-teaser__excerpt::-webkit-scrollbar-thumb { background-color: var(--c-input-border); border-radius: 10px; } .testimonial-teaser__excerpt::-webkit-scrollbar-track { background-color: transparent; } .testimonial-teaser__excerpt::-webkit-scrollbar-button { display: none; } .testimonial-teaser__excerpt::-webkit-scrollbar-button:single-button:vertical:increment, .testimonial-teaser__excerpt ::-webkit-scrollbar-button:single-button:vertical:decrement { display: none; width: 0; height: 0; color: transparent; } @media screen and (hover: hover) { .testimonial-teaser__back .close { display: none; } } @media screen and (hover: none) { .testimonial-teaser__view { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media screen and (max-width: 768px) { .testimonial-teaser__link { -ms-flex-item-align: end; align-self: flex-end; -webkit-transform: translateX(-27px); transform: translateX(-27px); } } @media screen and (min-width: 769px) { @container (max-width: 500px) { .testimonial-teaser .testimonial-teaser__back { padding-block: 50px; padding-inline: 20px; } } @container (max-width: 400px) { .testimonial-teaser .testimonial-teaser__excerpt { -webkit-padding-start: calc(var(--padding-left-quote) - 20px); padding-inline-start: calc(var(--padding-left-quote) - 20px); } .testimonial-teaser .testimonial-teaser__link { -webkit-margin-start: calc(var(--padding-left-quote) - 20px); margin-inline-start: calc(var(--padding-left-quote) - 20px); margin-top: 15px; } } .testimonial-teaser__inner { min-height: 300px; aspect-ratio: var(--testimonial-ar-desktop); } .testimonial-teaser__link { -webkit-margin-start: var(--padding-left-quote); margin-inline-start: var(--padding-left-quote); } } .site-footer__bg:before, .site-footer__bg:after { -webkit-filter: blur(8px); filter: blur(8px); -webkit-transition: blur 0.6s cubic-bezier(0.08, 0.9, 0.62, 0.44) 0.2s; transition: blur 0.6s cubic-bezier(0.08, 0.9, 0.62, 0.44) 0.2s; } .site-footer .animated { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); -webkit-transition: 0.5s ease; transition: 0.5s ease; } .site-footer .animated-2 { -webkit-transition-delay: 0.11s; transition-delay: 0.11s; } .site-footer .animated-3 { -webkit-transition-delay: 0.22s; transition-delay: 0.22s; } .site-footer .animated-4 { -webkit-transition-delay: 0.33s; transition-delay: 0.33s; } .site-footer.visible .site-footer__bg:before, .site-footer.visible .site-footer__bg:after { -webkit-filter: blur(0); filter: blur(0); } .site-footer.visible .animated { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /*# sourceMappingURL=styles.css.map */