@charset "UTF-8"; :root { --color-white: #fff; --color-dark: #003B4A; --color-beige: #EFE5D7; --color-beige-accent: #E6D6C0; --color-gold: #C7B294; --color-rose: #C32AA3; --color-main-bg: var(--color-white); --color-main-text: var(--color-dark); --color-main-link: var(--color-dark); --color-main-border: var(--color-gold); --color-primary: var(--color-dark); --color-secondary: var(--color-beige); --color-success: #27a658; --color-error: #ff5655; --color-info: dodgerblue; --color-warning: #fc5d00; } @font-face { font-family: "AvantGardeLT-Book"; src: url("../fonts/AvantGardeLT-Book.woff2") format("woff2"), url("../fonts/AvantGardeLT-Book.woff") format("woff"), url("../fonts/AvantGardeLT-Book.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "AvantGardeLT"; src: url("../fonts/AvantGardeLT-Medium.woff2") format("woff2"), url("../fonts/AvantGardeLT-Medium.woff") format("woff"), url("../fonts/AvantGardeLT-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "AvantGardeLT"; src: url("../fonts/AvantGardeLT-Bold.woff2") format("woff2"), url("../fonts/AvantGardeLT-Bold.woff") format("woff"), url("../fonts/AvantGardeLT-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } :root { --font-light: AvantGardeLT-Book, sans-serif; --font-medium: AvantGardeLT, sans-serif; --font-serif: Arapey, serif; } *, *::before, *::after { box-sizing: border-box; } :root { scroll-behavior: smooth; } html { line-height: 1.15; font-size: 62.5%; scroll-behavior: smooth; } body { margin: 0; padding: 0; line-height: 1.3; color: var(--color-black); font-family: sans-serif; font-size: 1em; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0; } p { margin-top: 0; margin-bottom: 0; } blockquote p, td p, th p, li li, li p, li h1, li h2, li h3, li h4, li h5, li h6, li label, li select, li input, li textarea, li button { font-size: 100%; } button { display: inline; margin: 0; outline: none; border: none; cursor: pointer; padding: 0; } a img { border: none; } img { max-width: 100%; height: auto; vertical-align: middle; } hr { border: none; background-color: var(--color-black); height: 0.1rem; } input, select, textarea { font-family: sans-serif; } fieldset { margin: 0; border: none; padding: 0; } select { cursor: pointer; width: auto; } input, select, textarea, label { vertical-align: middle; } .screen-reader { position: absolute; margin: -1px; border-width: 0; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .screen-reader-focusable:focus { position: relative; margin: inherit; border: initial; padding: inherit; width: auto; height: auto; clip: initial; } /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: ""; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } [href] { cursor: pointer; } ::-moz-selection { background-color: var(--color-rose); color: var(--color-main-bg); } ::selection { background-color: var(--color-rose); color: var(--color-main-bg); } body { position: relative; z-index: 1; margin: 0 auto; background-color: var(--color-main-bg); overflow-x: hidden; color: var(--color-main-text); font-family: var(--font-light); font-size: 1.6rem; font-weight: 400; overscroll-behavior: auto none; } body.no-scroll, body:has(.c-navigation__list.is-visible) { overflow: hidden; } input[type=date], input[type=email], input[type=number], input[type=password], input[type=phone], input[type=search], input[type=tel], input[type=text], select, textarea { border: 0.1rem solid var(--color-main-border); background-color: var(--color-white); padding: 0.5rem 2rem; width: 100%; height: 4.1rem; text-align: left; font-family: var(--font-medium); font-size: 1.2rem; } textarea { height: 20rem; } label { display: block; margin-bottom: 0.6rem; font-family: var(--font-medium); font-size: 1.2rem; font-weight: 700; } h1, .heading-h1, h2, .heading-h2, h3, .heading-h3, h4, .heading-h4, h5, .heading-h5, h6, .heading-h6 { text-transform: uppercase; font-family: var(--font-medium); font-weight: 700; } h1, .heading-h1, h2, .heading-h2 { font-size: 2.6rem; } h3, .heading-h3, h4, .heading-h4 { font-size: 2rem; } h5, .heading-h5 { font-size: 1.8rem; } h6, .heading-h6 { font-size: 1.6rem; } .link--underline { text-decoration: underline; } p, .text--medium { font-size: 1.6rem; } em, i { font-style: italic; } strong, b { font-weight: 700; } sub, sup { position: relative; font-size: 0.6em; } sub { vertical-align: sub; } sup { vertical-align: super; } mark { background-color: #ffeeae; } s { text-decoration: line-through; } s::before, s::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } s::before { content: " [Début du texte rayé]"; } s::after { content: " [Fin du texte rayé] "; } u { text-decoration: underline; } hr { margin-block: 2rem; background-color: var(--color-main-text); width: 8rem; } .alert { color: #ff5655; font-size: 14px; font-weight: 700; } .alert.success { color: var(--color-success); } .alert.error { color: var(--color-error); } .alert.info { color: var(--color-info); } .alert.warning { color: var(--color-warning); } .video { max-width: 100%; } .video-container { max-width: 100%; } .o-container { width: 135rem; } .o-container, .o-container--fluid, .o-container--small { margin: auto; max-width: 100%; } @media screen and (width < 1024px) { .o-container, .o-container--fluid, .o-container--small { padding-inline: 1.6rem; } } @media screen and (1024px <= width) { .o-container, .o-container--fluid, .o-container--small { padding-inline: 3rem; } } @media screen and (1024px <= width) { .o-container--small { width: 110rem; } } :root { --layout-default-repeat: 3; --layout-default-gap: 3.2rem; --layout-fluid-min: 20rem; } .o-repeating-grid { --_grid-repeat: var(--grid-repeat, var(--layout-default-repeat)); --_repeating-grid-gap: var(--grid-gap, var(--layout-default-gap)); display: grid; grid-template-columns: repeat(var(--_grid-repeat), 1fr); gap: var(--_repeating-grid-gap); } .o-repeating-flex { --_flex-repeat: var(--flex-repeat, var(--layout-default-repeat)); --_repeating-flex-gap: var(--flex-gap, var(--layout-default-gap)); --_gap-count: calc(var(--_flex-repeat) - 1); --_gap-repeater-calc: calc( var(--_repeating-flex-gap) / var(--_flex-repeat) * var(--_gap-count) ); display: flex; flex-wrap: wrap; gap: var(--_repeating-flex-gap); } .o-repeating-flex > * { flex: 1 1 calc(100% / var(--_flex-repeat) - var(--_gap-repeater-calc)); } .o-fluid-grid { --_fluid-grid-min: var(--fluid-grid-min, var(--layout-fluid-min)); --_fluid-grid-gap: var(--grid-gap, var(--layout-default-gap)); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--_fluid-grid-min), 100%), 1fr)); gap: var(--_fluid-grid-gap); } .o-fluid-flex { --_fluid-flex-min: var(--fluid-flex-min, var(--layout-fluid-min)); --_fluid-flex-gap: var(--flex-gap, var(--layout-default-gap)); display: flex; flex-wrap: wrap; gap: var(--_fluid-flex-gap); } .o-fluid-flex > * { flex: 1 1 var(--_fluid-flex-min); } .o-subgrid-rows > * { display: grid; grid-template-rows: subgrid; grid-row: auto/span var(--subgrid-rows, 4); gap: var(--subgrid-gap, 0); } blockquote { text-align: center; line-height: 1.3em; font-family: var(--font-serif) !important; font-size: 2rem !important; font-style: italic; } @media screen and (width < 1024px) { blockquote { padding-inline: 3rem; } } .o-icon--building::before { -webkit-mask-image: url("../img/icons/building.svg"); mask-image: url("../img/icons/building.svg"); content: ""; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .o-icon--building::before { background-image: url("../img/icons/building.svg"); } } .o-icon--diamond::before { -webkit-mask-image: url("../img/icons/diamond.svg"); mask-image: url("../img/icons/diamond.svg"); content: ""; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .o-icon--diamond::before { background-image: url("../img/icons/diamond.svg"); } } .o-icon--instagram::before { -webkit-mask-image: url("../img/icons/instagram.svg"); mask-image: url("../img/icons/instagram.svg"); content: ""; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .o-icon--instagram::before { background-image: url("../img/icons/instagram.svg"); } } .o-icon--linkedin::before { -webkit-mask-image: url("../img/icons/linkedin.svg"); mask-image: url("../img/icons/linkedin.svg"); content: ""; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .o-icon--linkedin::before { background-image: url("../img/icons/linkedin.svg"); } } .o-icon--mail::before { -webkit-mask-image: url("../img/icons/mail.svg"); mask-image: url("../img/icons/mail.svg"); content: ""; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .o-icon--mail::before { background-image: url("../img/icons/mail.svg"); } } .o-icon--wallet::before { -webkit-mask-image: url("../img/icons/wallet.svg"); mask-image: url("../img/icons/wallet.svg"); content: ""; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .o-icon--wallet::before { background-image: url("../img/icons/wallet.svg"); } } .o-icon--work::before { -webkit-mask-image: url("../img/icons/work.svg"); mask-image: url("../img/icons/work.svg"); content: ""; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .o-icon--work::before { background-image: url("../img/icons/work.svg"); } } .o-icon--worker::before { -webkit-mask-image: url("../img/icons/worker.svg"); mask-image: url("../img/icons/worker.svg"); content: ""; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .o-icon--worker::before { background-image: url("../img/icons/worker.svg"); } } [class*=o-icon-] { --icon-size: 1.5rem; } [class*=o-icon-]::before { display: inline-block; flex: 0 0 auto; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; background-color: currentColor; width: var(--icon-size); height: var(--icon-size); vertical-align: calc(0.375em - var(--icon-size) * 0.5); } .o-icon { display: inline-flex; flex-direction: row; align-items: center; gap: 0.5rem; z-index: 1; padding: 0.5rem 1rem; width: -moz-fit-content; width: fit-content; min-height: 2.5rem; font-weight: 500; } .o-icon--extra-large { --icon-size: 3.2rem; } .o-icon--large { --icon-size: 2.4rem; } .o-icon--medium { --icon-size: 2rem; } .o-icon--small { --icon-size: 1.2rem; } .o-icon--right { order: 1; }