/* Reset universel : padding/border inclus dans width/height (standard moderne, présent dans tous les sites Webflow via global.css). Sans cette règle, tout `width: 100% + padding` déborde du parent. */ *, *::before, *::after { box-sizing: border-box; } /* Reveal anti-FOUC : la classe `js` est ajoutée à inline dans . Si JS désactivé, .js-reveal et .js-reveal-scroll restent visibles (pas de masquage permanent). Pour .js-reveal-scroll on définit aussi la translation initiale en CSS : ça permet à l'animation JS de simplement `cancel()` pour reset, sans avoir à réappliquer la transform manuellement. */ html.js .js-reveal, html.js .js-reveal-scroll { opacity: 0; } html.js .js-reveal-scroll { transform: translateY(2vw); } /* Pages liste (toggle catégories) : reveal en fondu seul, pas de glissement vertical. La classe `reveal-fade-only` est posée sur de ces pages. On neutralise la transform initiale pour que le cancel() JS reset proprement sans décaler l'élément. */ html.js body.reveal-fade-only .js-reveal-scroll { transform: none; } /* Anti-FOUC pour la section #methode (scroll-driven, géré par animation.js). État initial = état à scroll progress = 0 : - left-pannel / cards-pannel : translateX(5%) - approche-cards : opacity 0, translateY(50%) Uniquement en desktop — sur mobile le layout passe en stack vertical et les éléments restent à leur état normal. */ @media (min-width: 992px) { html.js #methode .approche_left-pannel, html.js #methode .approche_cards-pannel { transform: translateX(5%); } html.js #methode .approche-card { opacity: 0; transform: translateY(50%); } } /* Apparition du titre hero — SANS le mettre en opacity:0. Un élément en opacity:0 n'est pas "contentful" pour le navigateur : mettre le titre (= plus gros élément = candidat LCP) en opacity:0 faisait que Lighthouse ne détectait aucun LCP → erreur NO_LCP. Donc le titre reste toujours peint, et on pose une "toile" (::after) de la couleur du fond par-dessus ; c'est ELLE qui s'efface au chargement → fondu identique aux .js-reveal, mais le titre est peint dès la 1re frame. Scopé à la hero pour ne pas toucher les autres .heading_1. Gate html.js : sans JS, pas de toile (titre visible d'emblée). */ .section.hero .heading_1 { position: relative; } html.js .section.hero .heading_1::after { content: ""; position: absolute; inset: 0; background: var(--off_white); pointer-events: none; animation: heroTitleReveal 0.8s ease-out 0.15s both; } @keyframes heroTitleReveal { from { opacity: 1; } to { opacity: 0; } } /* Toile réutilisable pour les titres LCP des autres pages (fond off-white). Même principe que le titre hero : le titre reste toujours peint (opacity:1), c'est la toile ::after qui s'efface → fondu sans casser le LCP. À poser sur le gros titre de page (.heading_big des pages mentions légales / CGV / etc.). */ .js-reveal-title { position: relative; } html.js .js-reveal-title::after { content: ""; position: absolute; /* Dépasse en haut/bas (en em, proportionnel au titre) pour couvrir accents et jambages (g, j, p, y) qui débordent de la boîte de texte (line-height: 1). Invisible ailleurs : même couleur que le fond de page. */ inset: -0.25em 0; background: var(--off_white); pointer-events: none; animation: heroTitleReveal 0.8s ease-out 0.15s both; } /* Reset margin par défaut du body (8px appliqué par le navigateur). Présent dans normalize.css à l'origine (qu'on n'a pas inclus). */ body { margin: 0; } @font-face { font-family: Ppnikkeijournal; src: url('public/fonts/PPNikkeiJournal-Ultrabold.woff2') format("woff2"), url('public/fonts/PPNikkeiJournal-Ultrabold.otf') format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: Ppnikkeijournal; src: url('public/fonts/PPNikkeiJournal-RegularItalic.woff2') format("woff2"), url('public/fonts/PPNikkeiJournal-RegularItalic.otf') format("opentype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: Ppnikkeimaru; src: url('public/fonts/PPNikkeiMaru-LightItalic.woff2') format("woff2"), url('public/fonts/PPNikkeiMaru-LightItalic.otf') format("opentype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: Ppnikkeijournal; src: url('public/fonts/PPNikkeiJournal-Light.woff2') format("woff2"), url('public/fonts/PPNikkeiJournal-Light.otf') format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: Ppnikkeijournal; src: url('public/fonts/PPNikkeiJournal-Regular.woff2') format("woff2"), url('public/fonts/PPNikkeiJournal-Regular.otf') format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Ppnikkeiline; src: url('public/fonts/PPNikkeiLine-UltraboldItalic.woff2') format("woff2"), url('public/fonts/PPNikkeiLine-UltraboldItalic.otf') format("opentype"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: Ppnikkeijournal; src: url('public/fonts/PPNikkeiJournal-UltraboldItalic.woff2') format("woff2"), url('public/fonts/PPNikkeiJournal-UltraboldItalic.otf') format("opentype"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: Ppnikkeijournal; src: url('public/fonts/PPNikkeiJournal-LightItalic.woff2') format("woff2"), url('public/fonts/PPNikkeiJournal-LightItalic.otf') format("opentype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: Ppnikkeimaru; src: url('public/fonts/PPNikkeiMaru-Regular.woff2') format("woff2"), url('public/fonts/PPNikkeiMaru-Regular.otf') format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Ppnikkeiline; src: url('public/fonts/PPNikkeiLine-LightItalic.woff2') format("woff2"), url('public/fonts/PPNikkeiLine-LightItalic.otf') format("opentype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: Ppnikkeimaru; src: url('public/fonts/PPNikkeiMaru-RegularItalic.woff2') format("woff2"), url('public/fonts/PPNikkeiMaru-RegularItalic.otf') format("opentype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: Ppnikkeimaru; src: url('public/fonts/PPNikkeiMaru-Light.woff2') format("woff2"), url('public/fonts/PPNikkeiMaru-Light.otf') format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: Ppnikkeimaru; src: url('public/fonts/PPNikkeiMaru-UltraboldItalic.woff2') format("woff2"), url('public/fonts/PPNikkeiMaru-UltraboldItalic.otf') format("opentype"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: Ppnikkeipacific; src: url('public/fonts/PPNikkeiPacific-RegularItalic.woff2') format("woff2"), url('public/fonts/PPNikkeiPacific-RegularItalic.otf') format("opentype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: Ppnikkeipacific; src: url('public/fonts/PPNikkeiPacific-Ultrabold.woff2') format("woff2"), url('public/fonts/PPNikkeiPacific-Ultrabold.otf') format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: Ppnikkeipacific; src: url('public/fonts/PPNikkeiPacific-LightItalic.woff2') format("woff2"), url('public/fonts/PPNikkeiPacific-LightItalic.otf') format("opentype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: Ppnikkeimaru; src: url('public/fonts/PPNikkeiMaru-Ultrabold.woff2') format("woff2"), url('public/fonts/PPNikkeiMaru-Ultrabold.otf') format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: Ppnikkeiline; src: url('public/fonts/PPNikkeiLine-Light.woff2') format("woff2"), url('public/fonts/PPNikkeiLine-Light.otf') format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: Ppnikkeipacific; src: url('public/fonts/PPNikkeiPacific-UltraboldItalic.woff2') format("woff2"), url('public/fonts/PPNikkeiPacific-UltraboldItalic.otf') format("opentype"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: Ppnikkeipacific; src: url('public/fonts/PPNikkeiPacific-Regular.woff2') format("woff2"), url('public/fonts/PPNikkeiPacific-Regular.otf') format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Ppnikkeiline; src: url('public/fonts/PPNikkeiLine-RegularItalic.woff2') format("woff2"), url('public/fonts/PPNikkeiLine-RegularItalic.otf') format("opentype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: Ppnikkeiline; src: url('public/fonts/PPNikkeiLine-Ultrabold.woff2') format("woff2"), url('public/fonts/PPNikkeiLine-Ultrabold.otf') format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: Ppnikkeiline; src: url('public/fonts/PPNikkeiLine-Regular.woff2') format("woff2"), url('public/fonts/PPNikkeiLine-Regular.otf') format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Ppnikkeipacific; src: url('public/fonts/PPNikkeiPacific-Light.woff2') format("woff2"), url('public/fonts/PPNikkeiPacific-Light.otf') format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: Ppneuemontreal; src: url('public/fonts/PPNeueMontreal-Bold.woff2') format("woff2"), url('public/fonts/PPNeueMontreal-Bold.otf') format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: Ppneuemontreal; src: url('public/fonts/PPNeueMontreal-Italic.woff2') format("woff2"), url('public/fonts/PPNeueMontreal-Italic.otf') format("opentype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: Ppneuemontreal Book; src: url('public/fonts/PPNeueMontreal-Book.woff2') format("woff2"), url('public/fonts/PPNeueMontreal-Book.otf') format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Ppneuemontreal; src: url('public/fonts/PPNeueMontreal-Medium.woff2') format("woff2"), url('public/fonts/PPNeueMontreal-Medium.otf') format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: Ppneuemontreal; src: url('public/fonts/PPNeueMontreal-SemiBolditalic.woff2') format("woff2"), url('public/fonts/PPNeueMontreal-SemiBolditalic.otf') format("opentype"); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: Ppneuemontreal; src: url('public/fonts/PPNeueMontreal-Thin.woff2') format("woff2"), url('public/fonts/PPNeueMontreal-Thin.otf') format("opentype"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: Ppneuecorp; src: url('public/fonts/PPNeueCorp-NormalUltralight.woff2') format("woff2"), url('public/fonts/PPNeueCorp-NormalUltralight.otf') format("opentype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: Ppneuecorp; src: url('public/fonts/PPNeueCorp-NormalMedium.woff2') format("woff2"), url('public/fonts/PPNeueCorp-NormalMedium.otf') format("opentype"), url('public/fonts/PPNeueCorp-NormalUltrabold.woff2') format("woff2"), url('public/fonts/PPNeueCorp-NormalUltrabold.otf') format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } :root { --padding_horizontal: 6.5vw; --corp: Ppneuecorp, Arial, sans-serif; --violet_foncé: #1b1521; --blanc: white; --noir: #2f2f2f; --gris-fonce: #6b6a66; --montreal-book: "Ppneuemontreal Book", Arial, sans-serif; --off_white: #f4f4f4; --rose: #fca5f1; --bleu: #97eaea; --corner: 6vw; --vertical_padding: 10vw; --paragraph_white: #b5b5b5; --montreal: Ppneuemontreal, Arial, sans-serif; --title_white: white; --violet_moyen: #2d203b; --violet_clair: #e2c7fc; } h1 { margin-top: 20px; margin-bottom: 10px; font-size: 38px; font-weight: bold; line-height: 44px; } h2 { margin-top: 20px; margin-bottom: 10px; font-size: 32px; font-weight: bold; line-height: 36px; } h3 { margin-top: 20px; margin-bottom: 10px; font-size: 24px; font-weight: bold; line-height: 30px; } h4 { margin-top: 10px; margin-bottom: 10px; font-size: 18px; font-weight: bold; line-height: 24px; } p { margin-bottom: 10px; } a { text-decoration: none; } blockquote { border-left: 5px solid #e2e2e2; margin-bottom: 10px; padding: 10px 20px; font-size: 18px; line-height: 22px; } figure { margin-bottom: 10px; } .nav_bar { z-index: 50; width: 100%; max-width: 100%; padding: 1vw var(--padding_horizontal) 1vw 5vw; flex-flow: row; justify-content: center; align-items: center; display: flex; position: fixed; overflow: hidden; } .section-stylesheet { width: 100%; height: 100vh; padding-right: var(--padding_horizontal); padding-left: var(--padding_horizontal); } .heading_1 { font-family: var(--corp); color: var(--violet_foncé); text-align: left; letter-spacing: -.2vw; margin-top: 0; margin-bottom: 0; font-size: 4vw; font-weight: 400; line-height: 1; } .heading_1.centerer { text-align: center; width: 100%; } .heading_1.white { color: var(--blanc); text-align: left; } .heading_1.center { text-align: center; letter-spacing: -.05em; font-size: 3.5vw; } .heading_2 { font-family: var(--corp); color: var(--noir); text-align: center; margin-top: 0; margin-bottom: 0; font-size: 1vw; font-style: normal; font-weight: 400; line-height: 1.4; } .heading_2.white { width: 100%; color: var(--blanc); text-align: center; font-size: 1.5vw; font-style: normal; position: relative; } .heading_3 { font-family: var(--corp); color: var(--gris-fonce); text-transform: uppercase; margin-top: 0; margin-bottom: 0; font-size: 1.52793vw; font-weight: 400; line-height: 1.2; } .paragraphe_big { font-family: var(--montreal-book); color: var(--violet_foncé); margin-top: 0; margin-bottom: 0; font-size: 1vw; font-style: normal; font-weight: 400; line-height: 1.4; } .paragraphe_big.white { color: var(--off_white); margin-top: 0; } .paragraphe_big.white.center { text-align: center; } .paragraphe_big.centered { text-align: center; margin-top: 0; } .home_link { justify-content: flex-start; align-items: center; width: 8vw; text-decoration: none; display: flex; overflow: hidden; } .text-span { background-image: linear-gradient(90deg, var(--rose), var(--bleu)); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; padding-right: .2vw; font-family: Ppneuecorp, Arial, sans-serif; overflow: visible; } .cta_1 { grid-column-gap: 1vw; grid-row-gap: 1vw; border-radius: var(--corner); background-color: var(--violet_foncé); font-family: var(--corp); color: var(--off_white); justify-content: center; align-items: center; padding: .8vw 2vw; font-size: .9vw; font-weight: 400; text-decoration: none; display: flex; transform: translate(0); } .section { width: 100%; height: 100vh; padding-right: var(--padding_horizontal); padding-left: var(--padding_horizontal); flex-flow: row; justify-content: space-between; align-items: center; display: flex; position: relative; } .section.hero { justify-content: center; height: auto; padding-bottom: 0; display: flex; overflow: hidden; position: relative; } /* Canvas WebGL (scène robot) — couvre toute la hero, derrière le contenu. height: 100vw (et non vh) → la scène scale avec la largeur du viewport plutôt qu'avec sa hauteur, donc le robot garde une taille proportionnelle au reste du layout (qui est aussi en vw). La hero est en overflow:hidden, le surplus éventuel est clippé. pointer-events:none pour laisser passer les clics vers le titre / boutons. */ .hero-webgl-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100vw; pointer-events: none; display: block; background: #f4f4f4; } /* hero_content-wrapper a position:relative pour passer devant le canvas absolu (sans ça, l'absolu se retrouve au-dessus du flux statique). */ .hero_content-wrapper { position: relative; } .section.hero.hide { display: flex; } .section.defis { height: auto; padding-top: var(--padding_horizontal); padding-bottom: var(--padding_horizontal); grid-column-gap: 6vw; grid-row-gap: 6vw; flex-flow: column; justify-content: center; align-items: flex-start; display: flex; } .section.solutions { height: auto; padding-top: var(--vertical_padding); padding-bottom: var(--vertical_padding); grid-column-gap: 4vw; grid-row-gap: 4vw; flex-flow: column; justify-content: center; display: none; } .section.technologie { z-index: 10; grid-column-gap: 4vw; grid-row-gap: 4vw; flex-flow: column; justify-content: flex-start; height: auto; padding: 10vw 0; display: none; } .section.manifeste { background-color: #0e0a12; height: auto; padding: 0; display: none; overflow: hidden; } .section.notre-approche { flex-flow: column; justify-content: flex-start; height: 500vh; padding: 0; } .section.approche_2 { background-image: radial-gradient(circle, #1e1725, #0e0a12); flex-flow: column; justify-content: center; align-items: center; height: auto; padding-left: 0; padding-right: 0; overflow: hidden; } .section.nos_services { flex-flow: column; justify-content: flex-start; height: auto; padding: 0; } .section.footer { background-image: radial-gradient(circle, #1e1725, #0e0a12); height: auto; padding-left: 0; padding-right: 0; } .section.mentions-legales { grid-column-gap: 3vw; grid-row-gap: 3vw; color: #000; flex-flow: column; justify-content: flex-start; align-items: flex-start; height: auto; padding-top: 15vh; padding-bottom: 15vh; } .section.carrousel { flex-flow: column; height: auto; padding-left: 0; padding-right: 0; } .section.equipe { z-index: 10; grid-column-gap: 4vw; grid-row-gap: 4vw; flex-flow: column; justify-content: flex-start; height: auto; padding: 10vw 0; } .section.valeurs { z-index: 10; grid-column-gap: 0vw; grid-row-gap: 0vw; flex-flow: column; justify-content: flex-start; height: 300vh; padding: 10vw 0 0; display: flex; } .section.autres-articles { height: auto; padding-bottom: 10vw; } .hero_content-wrapper { grid-column-gap: 2vw; grid-row-gap: 2vw; flex-flow: column; justify-content: center; align-items: center; width: 65%; padding-top: 22vw; display: flex; } .div-block-2 { border-radius: var(--corner); width: 45%; height: 70%; display: none; overflow: hidden; } .image-4 { object-fit: cover; width: 100%; height: 100%; } .link_text { white-space: nowrap; font-size: .8vw; line-height: 1.2vw; } .link-block { grid-column-gap: 0vw; grid-row-gap: 0vw; height: 1.2vw; font-family: var(--corp); color: var(--violet_foncé); flex-flow: column; font-size: .9vw; font-weight: 400; text-decoration: none; display: flex; overflow: hidden; } .nav_links-container { grid-column-gap: 2vw; grid-row-gap: 2vw; justify-content: center; align-items: center; display: flex; } .spline-scene { z-index: -1; border-radius: var(--corner); pointer-events: none; cursor: default; width: 100%; height: 100vh; display: flex; position: absolute; inset: 0%; } .spline-scene.hide { background-color: #0d0a11; display: flex; } .div-block-3 { grid-column-gap: 1.6vw; grid-row-gap: 1.6vw; flex-flow: column; display: flex; } .div-block-4 { grid-column-gap: 1vw; grid-row-gap: 1vw; justify-content: center; display: flex; } .cta_2 { grid-column-gap: 1vw; grid-row-gap: 1vw; border-radius: var(--corner); background-color: var(--violet_foncé); font-family: var(--corp); color: var(--off_white); justify-content: center; align-items: center; padding: .8vw 2vw; font-size: .9vw; font-weight: 400; text-decoration: none; display: flex; } .cta_2.white { background-color: var(--off_white); color: var(--violet_foncé); } .cta_2.white.google { display: none; } .cta_3 { border-radius: var(--corner); font-family: var(--corp); color: var(--violet_foncé); border: 1px solid #0e001b5e; justify-content: center; align-items: center; padding: .8vw 2vw; font-size: .9vw; font-weight: 400; text-decoration: none; display: flex; } .cta_3.white { color: var(--off_white); border-color: #ffffff73; } .nav_links-container-center { grid-column-gap: 2vw; grid-row-gap: 2vw; justify-content: center; align-items: center; display: none; } .defis_card-wrapper { grid-column-gap: 1vw; grid-row-gap: 1vw; display: flex; } .defis-card { grid-column-gap: 4vw; grid-row-gap: 4vw; border-radius: var(--corner); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid #17091d; flex-flow: column; justify-content: center; align-items: flex-start; width: 33%; padding: 4vw 3vw; display: flex; position: relative; overflow: hidden; box-shadow: 0 0 15px #0000000d; } .image-5 { object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0%; } .defis_title-wrapper { grid-column-gap: 2vw; grid-row-gap: 2vw; flex-flow: column; width: 40%; display: flex; } .paragraphe_small { font-family: var(--corp); color: var(--gris-fonce); margin-bottom: 0; font-size: .944331vw; font-style: normal; font-weight: 400; line-height: 1.4; } .paragraphe_small.white { color: var(--paragraph_white); font-size: .9vw; position: relative; } .paragraphe_small.defis { width: 75%; font-family: var(--montreal-book); color: var(--gris-fonce); letter-spacing: .05vw; font-size: 1vw; font-weight: 400; line-height: 1.4; } .citation_card { border-radius: var(--corner); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); background-color: #ffffff4f; justify-content: center; align-items: center; padding-top: 4vw; padding-bottom: 4vw; display: flex; box-shadow: 0 0 20px #00000005; } .div-block-5 { justify-content: center; align-items: flex-start; width: 50%; height: 50vh; display: none; } .title_centered-container { grid-column-gap: 2vw; grid-row-gap: 2vw; flex-flow: column; width: 60%; display: flex; } .card_wrapper { grid-column-gap: 1vw; grid-row-gap: 1vw; display: flex; } .solution_card { grid-column-gap: .6vw; grid-row-gap: .6vw; border-radius: var(--corner); background-color: #fff; flex-flow: column; justify-content: flex-end; align-items: flex-start; width: 33%; padding: 3vw; display: flex; position: relative; overflow: hidden; } .card_link-block { font-family: var(--corp); color: var(--gris-fonce); margin-top: 1vw; font-size: .9vw; font-weight: 500; text-decoration: none; display: none; } .spline-scene-2 { pointer-events: none; width: 10vw; margin-bottom: 2vw; } .body { background-color: #f4f4f4; } .image-6 { filter: invert(); width: 1vw; position: absolute; top: 3vw; right: 3vw; } .spline-scene-copy { z-index: -1; border-radius: var(--corner); pointer-events: none; width: 80%; height: 140%; display: none; position: absolute; bottom: -60vh; left: -31vw; } .dashboard_content-wrapper { grid-column-gap: 10%; grid-row-gap: 10%; flex-flow: row; justify-content: center; align-items: center; width: 100%; height: 26vw; max-height: 50vh; display: flex; } .dashboard_title-wrapper { grid-column-gap: 1vw; grid-row-gap: 1vw; flex-flow: column; align-items: center; width: 55%; display: flex; position: relative; } .dashboard_fonction-wrapper { grid-column-gap: 4vw; grid-row-gap: 4vw; flex-flow: column; align-items: flex-start; width: 45%; height: 100%; padding-left: 4vw; display: flex; position: relative; overflow: hidden; } .dashboard_fonction-line { grid-column-gap: .8vw; grid-row-gap: .8vw; flex-flow: column; align-items: flex-start; width: 82%; display: flex; } .dashboard_fonction-line.hide { display: none; } .dashboard_fonction-icon { width: 2vw; } .dashboard_preview { width: 45%; height: 50%; display: flex; } .image-7 { aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2vw; width: 40%; max-height: 100%; box-shadow: 4px 4px 17px #0000001a; } .page_wrapper { width: 100%; overflow: visible; } .chiffres_wrapper { grid-column-gap: 4vw; grid-row-gap: 4vw; color: var(--blanc); background-image: linear-gradient(339deg, #170f20, #0e0a12); border: 1px solid #29005775; border-radius: 100vw; flex-flow: row; justify-content: center; align-items: center; padding: 3vw 4vw; display: none; } .hero_heading { text-transform: uppercase; font-family: Ppneuemontreal, Arial, sans-serif; font-size: 7vw; font-weight: 400; line-height: 1; } .image-8 { flex: none; width: 8vw; max-width: none; } .button_arrow { width: .6vw; aspect-ratio: 1; } .button_arrow.invert, .button_arrow.negatif { filter: invert(); } .section_name { font-family: var(--montreal); color: var(--violet_foncé); text-transform: uppercase; margin-top: 0; margin-bottom: 0; font-size: 1vw; font-weight: 500; line-height: 1; } .section_name.white { color: var(--title_white); } .enjeux_bloc-wrapper { grid-column-gap: 1vw; grid-row-gap: 1vw; flex-flow: row; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr; grid-auto-columns: 1fr; justify-content: flex-end; align-items: flex-start; padding-top: 10vw; display: none; } .card-title { font-family: var(--corp); color: var(--title_white); text-align: left; letter-spacing: -.04vw; margin-top: 0; margin-bottom: 0; font-size: 1.8vw; font-weight: 400; line-height: 1; } .card { grid-column-gap: 3vw; grid-row-gap: 3vw; border-radius: var(--corner); width: 20vw; color: var(--blanc); background-color: #fff; background-image: radial-gradient(circle at 100% 100%, #170f20, #0e0a12); border: 1px solid #29005775; flex-flow: column; justify-content: space-between; align-items: flex-start; padding: 3vw 3vw 2vw; display: flex; } .card.margin { background-image: radial-gradient(circle at 100% 100%, #170f20, #0e0a12); margin-top: 8vw; } .heading_big { font-family: var(--corp); color: var(--violet_foncé); text-align: left; letter-spacing: -.05em; margin-top: 0; margin-bottom: 0; font-size: 3vw; font-weight: 400; line-height: 1; } .heading_big.centered { text-align: center; } .heading_big.white { color: var(--title_white); } .heading_big.white.center { text-align: center; } .card_number-container { justify-content: flex-end; width: 100%; display: flex; } .card_text-wrapper { grid-column-gap: 1.3vw; grid-row-gap: 1.3vw; flex-flow: column; align-items: flex-start; display: flex; } .card_text-wrapper.center { align-items: center; } .card_text-wrapper.right { align-items: flex-end; } .kpi_wrapper { grid-column-gap: 1vw; grid-row-gap: 1vw; border-radius: 1000px; flex-flow: column; justify-content: center; align-items: center; width: 17vw; padding-left: 2vw; padding-right: 2vw; display: flex; } .kpi_chiffre { font-family: var(--corp); text-align: left; margin-top: 0; margin-bottom: 0; font-size: 2.1034vw; font-weight: 400; line-height: 1; } .div-block-8 { grid-column-gap: 1vw; grid-row-gap: 1vw; flex-flow: column; display: flex; } .div-block-10 { z-index: 2; grid-column-gap: 1vw; grid-row-gap: 1vw; flex-flow: column; width: 90%; display: flex; position: relative; } .enjeux_text-wrapper { z-index: 2; grid-column-gap: 2vw; grid-row-gap: 2vw; flex-flow: column; align-items: center; width: 55%; display: flex; position: relative; } .divider { background-color: #29005775; border-radius: 100%; width: 1px; height: 6vw; } .paragraph_small { font-family: var(--montreal-book); color: var(--violet_foncé); text-align: left; margin-top: 0; margin-bottom: 0; font-size: 1vw; font-weight: 400; line-height: 1.4; } .paragraph_small.centered { text-align: center; } .paragraph_small.white { color: var(--title_white); } .paragraph_small.white.center { text-align: center; line-height: 1.4; } .paragraph_small.hide { display: none; } .enjeux_inner { width: 100%; padding: 15vw var(--padding_horizontal); grid-column-gap: 4vw; grid-row-gap: 4vw; background-image: radial-gradient(circle, #1e1725, #0e0a12); flex-flow: column; justify-content: center; align-items: center; display: flex; position: relative; } .section_title-wrapper { grid-column-gap: 1.5vw; grid-row-gap: 1.5vw; flex-flow: column; align-items: flex-start; width: 100%; display: flex; } .section_title-wrapper.center { grid-column-gap: 1.5vw; grid-row-gap: 1.5vw; align-items: center; width: 45%; } .paragraph_medium { font-family: var(--montreal-book); margin-top: 0; margin-bottom: 0; font-size: 1.23609vw; line-height: 1.4; } .paragraph_medium.white { color: var(--paragraph_white); } .paragraph_medium.white.center { text-align: center; } .service-card { z-index: 1; width: 100%; height: 100vh; padding-right: var(--padding_horizontal); padding-left: var(--padding_horizontal); grid-column-gap: 8vw; grid-row-gap: 8vw; border-top-left-radius: var(--corner); border-top-right-radius: var(--corner); background-color: var(--violet_foncé); perspective: 1000px; flex-flow: row; justify-content: center; align-items: center; display: flex; position: sticky; top: .5vw; box-shadow: 0 0 17px 7px #0000001f; } .service-card.big { width: 80%; } .service-card._2 { z-index: 2; background-color: var(--violet_moyen); top: 1.5vw; } .service-card._3 { z-index: 3; top: 2.5vw; } .divider_vertical { background-color: #e3e3e3; width: 1px; height: 5vh; } .divider_vertical.long { height: 20vh; } .divider_wrapper { flex-flow: column; justify-content: center; align-items: center; padding-bottom: 2vw; display: flex; } .divider_horizontal { background-color: #e3e3e3; width: 100%; height: 1px; } .heading_small { font-family: var(--corp); letter-spacing: -.05em; margin-top: 0; margin-bottom: 0; font-size: 1.3vw; font-style: normal; font-weight: 400; line-height: 1.2; display: block; } .heading_small.white { color: var(--title_white); } .heading_small.center { text-align: center; } .ia_management-image { z-index: 1; border-radius: var(--corner); object-fit: cover; width: 50vw; height: 25vw; position: relative; } .heading_medium { font-family: var(--corp); color: var(--violet_foncé); text-align: left; letter-spacing: -.1vw; margin-top: 0; margin-bottom: 0; font-size: 2vw; font-weight: 400; line-height: 1; } .heading_medium.white { color: var(--title_white); } .heading_medium.white.center { text-align: center; } .heading_medium.centered { text-align: center; width: 65%; } .card-icon { width: 2.2vw; } .solution_card-hover { grid-column-gap: 3vw; grid-row-gap: 3vw; background-color: var(--blanc); opacity: 0; perspective-origin: 0 100%; justify-content: center; align-items: flex-start; width: 100%; height: 100%; padding: 5vw 3vw; display: flex; position: absolute; inset: 0%; } .solution-collumn { grid-column-gap: 1.5vw; grid-row-gap: 1.5vw; opacity: 0; flex-flow: column; width: 33%; height: 100%; display: flex; } .solution_card_text-mask { display: flex; overflow: hidden; } .solution_card_text-container { max-width: 22vw; } .enjeux-bento { z-index: 2; grid-column-gap: 16px; grid-row-gap: 16px; grid-template-rows: auto auto auto; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-columns: 1fr; width: 100%; display: none; position: relative; } .bento-card { grid-column-gap: 3vw; grid-row-gap: 3vw; border-radius: var(--corner); width: 100%; height: 100%; color: var(--blanc); background-color: #fff; background-image: radial-gradient(circle at 100% 100%, #0e0a12, #170f20); border: 1px solid #290057; flex-flow: column; justify-content: space-between; align-items: flex-start; padding: 3vw; transition: all .3s cubic-bezier(.645, .045, .355, 1); display: flex; } .bento-card:hover { border-color: #49009c; } .bento-card.margin { background-image: radial-gradient(circle at 100% 100%, #170f20, #0e0a12); margin-top: 8vw; } .bento-card.revolution { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .bento-card.budget-etat { justify-content: center; align-items: center; } .bento-card.processus { grid-column-gap: 9vw; grid-row-gap: 9vw; flex-flow: row; align-items: center; } .bento-card.risque { grid-column-gap: 9vw; grid-row-gap: 9vw; flex-flow: row; } .bento_image-container { grid-column-gap: 3vw; grid-row-gap: 3vw; border-radius: var(--corner); background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg'); background-position: 50%; background-repeat: no-repeat; background-size: 100%; border: 1px solid #290057; flex-flow: column; justify-content: center; align-items: center; padding: 0; transition: all .4s cubic-bezier(.645, .045, .355, 1); display: flex; overflow: hidden; } .bento_image-container:hover { background-size: 110%; border-color: #49009c; } .bento_image-container.margin { background-image: radial-gradient(circle at 100% 100%, #170f20, #0e0a12); margin-top: 8vw; } .bento_image-container._1 { background-image: url('public/images/€_blue.webp'); } .bento_image-container._2 { background-image: url('public/images/revolution_blue.webp'); } .bento_image-container._3 { background-image: url('public/images/risque_blue.webp'); } .paragraph_xs { font-family: var(--montreal-book); text-align: left; margin-top: 0; margin-bottom: 0; font-size: .8vw; font-weight: 400; line-height: 1.2; display: flex; } .paragraph_xs.centered { text-align: center; } .paragraph_xs.white { color: #fff; } .paragraph_xs.white.center { text-align: center; } .paragraph_xs.white.blog { display: none; } .paragraph_xs.blanc { color: var(--paragraph_white); line-height: 1.4; } .paragraph_xs.blanc.right { text-align: right; } .paragraph_xs.blanc.center { text-align: center; } .card-kpi { font-family: var(--corp); color: var(--off_white); text-align: left; letter-spacing: -.04vw; margin-top: 0; margin-bottom: 0; font-size: 3vw; font-weight: 400; line-height: 1; } .card-kpi-small { font-family: var(--corp); color: var(--off_white); text-align: left; letter-spacing: -.04vw; margin-top: 0; margin-bottom: 0; font-size: 1.8vw; font-weight: 400; line-height: 1; } .spline-scene-3 { pointer-events: auto; width: 100%; height: 100%; display: flex; } .spline_bg { z-index: 0; pointer-events: none; display: flex; position: absolute; inset: 0%; } .approche_left-pannel { width: 40vw; height: 100vh; padding-left: var(--padding_horizontal); flex: none; justify-content: center; align-items: center; display: flex; position: sticky; top: 0; } .approche_text-wrapper { grid-column-gap: 1vw; grid-row-gap: 1vw; flex-flow: column; justify-content: flex-start; align-items: flex-start; width: 100%; display: flex; overflow: hidden; } .services_2 { justify-content: center; align-items: center; width: 100%; height: 80vh; display: flex; } .bold-text, .span-white { color: var(--title_white); } .services_1 { width: 100%; height: 70vh; padding-right: var(--padding_horizontal); padding-left: var(--padding_horizontal); justify-content: center; align-items: center; display: flex; position: sticky; top: 0; } .approche_camera { flex: none; align-items: center; width: 100%; max-width: 100%; height: 100vh; overflow: hidden; display: flex; position: sticky; top: 0; overflow: hidden; } .approche-card { grid-column-gap: 3vw; grid-row-gap: 3vw; background-color: var(--off_white); width: 25vw; color: var(--violet_moyen); border-radius: 3vw; flex-flow: column; justify-content: flex-start; align-items: flex-start; padding: 3vw; display: flex; position: relative; top: 0; overflow: hidden; box-shadow: 0 2px 19px #0000000d; } .approche-card.big { width: 80%; } .approche-card._2 { background-color: var(--violet_moyen); top: 2vh; } .approche-card._3 { top: 4vh; } .approche-card.hide { display: none; } .approche_cards-wrapper { grid-column-gap: 1.5vw; grid-row-gap: 1.5vw; display: flex; } .approche_cards-pannel { z-index: 1; height: 100%; padding-right: var(--padding_horizontal); padding-left: var(--padding_horizontal); flex: none; justify-content: center; align-items: center; display: flex; position: relative; } .image-9 { z-index: -1; object-fit: cover; border-radius: 2vw; width: 100%; height: 100%; display: none; position: absolute; inset: 0%; transform: rotate(0); } .spline_services { width: 50%; height: 80%; display: none; } .service_text-wrapper { grid-column-gap: 1vw; grid-row-gap: 1vw; flex-flow: column; justify-content: flex-start; align-items: flex-start; width: 50%; display: flex; } .hero_paragraph-wrapper { width: 85%; } .approche_card-icon { width: auto; height: 4vw; display: block; } .spline-scene-4 { z-index: 1; height: 100%; display: flex; position: absolute; inset: 0%; } .service_image { aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4vw; height: 60%; box-shadow: 0 2px 12px #0000004f; } .solution_content-container { z-index: 1; grid-column-gap: 5vw; grid-row-gap: 5vw; flex-flow: row; justify-content: space-between; align-items: center; width: 100%; display: flex; position: relative; } .video-2_wrapper { border-radius: 2vw; width: 45%; overflow: hidden; box-shadow: 0 2px 20px #0000001c; } .paragraph_classique-3 { margin-bottom: 0; font-size: 1.25vw; line-height: 1.5; } .solution_wrapper { z-index: 10; width: 100%; height: 300vh; display: flex; position: relative; } .value_content { grid-column-gap: 3vw; grid-row-gap: 3vw; display: flex; } .value_texte-title { margin-top: 0; margin-bottom: 0; font-size: 1.6vw; line-height: 1; } .value_line { background-color: var(--violet_moyen); opacity: .1; width: 1.5px; height: 100%; } .value-scrollbar { z-index: 15; flex-flow: column; justify-content: center; align-items: center; height: 90%; display: flex; position: absolute; top: 5%; left: 1%; right: auto; } .value_cursor { background-color: #5b4176; border-radius: 100vw; width: .3vw; height: 10%; position: absolute; inset: 0% auto auto; } .solution_text-container { grid-column-gap: 2.5vw; grid-row-gap: 2.5vw; flex-flow: column; justify-content: flex-start; align-items: flex-start; width: 40%; display: flex; } .solution_container-wrapper { padding-top: 10vh; position: sticky; top: 0; } .value_text-wrapper { grid-column-gap: 2vw; grid-row-gap: 2vw; flex-flow: column; display: flex; } .ligne_3 { z-index: 0; pointer-events: none; object-fit: cover; background-color: #ededed00; width: 100%; height: 100vh; display: block; position: absolute; inset: 0% 0% auto; } .code-embed-4 { width: 100%; } .value_title-2 { color: #6d688a; text-transform: uppercase; margin-top: 0; margin-bottom: 0; font-size: 1vw; line-height: 1.5; } .value_text-block { grid-column-gap: 1.5vw; grid-row-gap: 1.5vw; opacity: .2; flex-flow: row; justify-content: flex-start; align-items: center; display: flex; } .cta-3 { color: #fff; background-color: #20033c; border: 1.5px solid #20033c; border-radius: .5vw; justify-content: center; align-items: center; margin-left: 3.1vw; padding: 1vw 2vw; font-size: 1vw; font-weight: 700; line-height: 1; text-decoration: none; transition: all .2s cubic-bezier(.77, 0, .175, 1); display: flex; } .cta-3:hover { color: #fff; background-color: #ff39ca; border-color: #ff39ca; } .dashboard_keypoint-text { grid-column-gap: .8vw; grid-row-gap: .8vw; flex-flow: column; align-items: center; display: flex; } .service_paragraph-wrapper { width: 80%; } .service_keypoint-wrapper { grid-column-gap: 1vw; grid-row-gap: 1vw; flex-flow: row; align-items: center; width: 95%; display: flex; } .service_keypoint-wrapper.hide { display: none; } .service_keypoint-wrapper.small { width: 80%; } .service_carrousel-gradientmask { z-index: 10; background-image: linear-gradient(180deg, var(--off_white) 5%, #fff0 29%, #fff0 75%, var(--off_white) 95%); pointer-events: none; width: 100%; position: absolute; inset: 0%; } .dashboard_fonction_lines-wrapper { grid-column-gap: 4vw; grid-row-gap: 4vw; flex-flow: column; flex: none; justify-content: space-between; display: flex; } .dashboard-camera { grid-column-gap: 7vw; grid-row-gap: 7vw; flex-flow: column; justify-content: center; align-items: center; height: 100vh; display: flex; position: sticky; top: 0; } .service_keypoints-wrapper { grid-column-gap: 1.5vw; grid-row-gap: 1.5vw; flex-flow: column; align-items: flex-start; width: 95%; height: 100%; margin-top: 1vw; margin-bottom: 2vw; display: flex; position: relative; overflow: hidden; } .super_title-wrapper { z-index: 2; grid-column-gap: 4vw; grid-row-gap: 4vw; pointer-events: auto; flex-flow: column; width: 60%; display: flex; position: relative; } .nav_cta_text-wrapper { flex-flow: column; flex: none; justify-content: flex-start; align-items: flex-start; height: 1.2vw; display: flex; overflow: hidden; } .nav_bar_content-wrapper { border-radius: var(--corner); justify-content: space-between; width: 100%; padding-left: 1.5vw; display: flex; } .mail-button { grid-column-gap: 1vw; grid-row-gap: 1vw; border-radius: var(--corner); background-color: var(--violet_clair); font-family: var(--corp); color: var(--off_white); justify-content: center; align-items: center; margin-right: -3.4vw; padding: .8vw 4vw .8vw 1.3vw; font-size: .9vw; font-weight: 400; text-decoration: none; transition: all .4s cubic-bezier(.77, 0, .175, 1); display: flex; transform: translate(0); } .mail-button:hover { background-color: var(--rose); transform: translate(-3%); } .div-block-11 { display: flex; } .account-icon { width: 1.2vw; height: auto; aspect-ratio: 1; display: block; } .account-icon.invert { filter: invert(); } .nav-trigger { width: 0; height: 0; position: absolute; top: 15%; } .nav-trigger._2 { position: fixed; top: 5vh; } .nav-trigger.long { position: absolute; top: 15vh; } .loading_page { z-index: 1000; background-color: var(--violet_foncé); flex-flow: column; justify-content: center; align-items: center; width: 100%; max-width: 100%; height: 100vh; display: none; position: fixed; overflow: hidden; } .volet_noir { background-color: var(--violet_foncé); width: 100%; height: 100%; position: absolute; top: 0; } .anim_logo-wrapper { z-index: 1; flex-flow: column; justify-content: center; align-items: center; display: flex; position: absolute; } .logo-mask { padding: .35vw 1vw; display: flex; overflow: hidden; } .anim_loo-image { width: 20vw; } .loading-wrapper { border-radius: var(--corner); border: 1px solid #fff; justify-content: flex-start; align-items: stretch; width: 70%; padding: .1vw; display: flex; position: absolute; overflow: hidden; } .loading-bar { border-radius: var(--corner); background-color: #fff; width: 0%; height: 100%; } .lottie-animation { flex: none; width: 80%; height: 70vh; position: absolute; top: 15vh; } .image-10 { box-sizing: border-box; object-fit: cover; height: 100%; } .approche2-inner { flex-flow: column; justify-content: center; align-items: center; width: 100%; height: 100%; padding-top: 15vw; padding-bottom: 15vw; display: flex; position: relative; } .heading_intermediaire { font-family: var(--corp); color: var(--violet_foncé); text-align: left; letter-spacing: -.2vw; margin-top: 0; margin-bottom: 0; font-size: 3vw; font-weight: 400; line-height: 1; } .heading_intermediaire.centered { text-align: center; } .heading_intermediaire.white { color: var(--title_white); } .heading_intermediaire.white.center { text-align: center; } .code-embed-5 { z-index: 0; opacity: .6; width: 100%; height: 100%; display: flex; position: absolute; inset: 0%; } .blog_hero_section { grid-column-gap: 2vw; grid-row-gap: 2vw; flex-flow: column; justify-content: center; align-items: center; padding-top: 9vw; padding-left: 22vw; padding-right: 22vw; display: flex; } .blog_heading { margin-top: 0; margin-bottom: 0; font-family: Ppneuecorp, Arial, sans-serif; font-size: 10vw; font-weight: 400; line-height: 1; } .paragraph-3 { text-align: center; margin-bottom: 0; font-family: Ppnikkeimaru, Arial, sans-serif; font-size: 3vw; font-weight: 300; line-height: 1; } .text-span-3 { font-weight: 400; } .section-2 { grid-column-gap: 3vw; grid-row-gap: 3vw; flex-flow: column; padding-top: 10vw; padding-left: 4vw; padding-right: 4vw; display: flex; } /* Section "Ressources à la une" sur l'accueil : même rythme que les autres sections (l'espace haut est fourni par le padding-bas de la section équipe, d'où padding-top:0) + padding-bas égal à celui de la section équipe. */ .section-2.ressources-une { padding-top: 0; padding-bottom: 10vw; } .blog_related-list { grid-column-gap: .7vw; grid-row-gap: .7vw; flex-flow: column; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-columns: 1fr; display: grid; } .blog-card { width: 100%; min-height: 40vh; color: var(--title_white); background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg'); background-position: 50%; background-size: cover; border-radius: 2vw; flex-flow: column; justify-content: space-between; overflow: hidden; box-shadow: 15px 15px 20px -7px #0000001c; } .blog_link { flex-flow: column; justify-content: flex-end; align-items: flex-start; width: 100%; height: 100%; padding: 2vw; text-decoration: none; display: flex; position: relative; } .blog_card-info-wrapper { grid-column-gap: 1vw; grid-row-gap: 1vw; width: 100%; color: var(--title_white); flex-flow: column; justify-content: flex-end; align-items: flex-start; display: flex; position: relative; } .sub-title { color: #1c1c1c; margin-top: 0; margin-bottom: 0; font-family: Ppnikkeimaru, Arial, sans-serif; font-size: 1.90948vw; font-weight: 400; line-height: 1; } .sub-title.white { color: #fff; font-size: 1.5vw; } .lire-article { color: var(--violet_foncé); text-transform: uppercase; margin-bottom: 0; font-family: Ppnikkeimaru, Arial, sans-serif; font-size: .8vw; line-height: 1.4; } .paragraph-2 { margin-bottom: 0; font-family: Ppnikkeimaru, Arial, sans-serif; font-size: .8vw; line-height: 1.4; } .paragraph-2.white { color: #fff; } .lottie-animation-2 { width: 4vw; display: flex; position: absolute; inset: 1vw 1vw auto auto; } .lottie-animation-2.invert { filter: invert(); width: 5%; position: absolute; inset: 2vw 2vw auto auto; } .lire-article-wrapper { justify-content: flex-start; align-items: flex-end; display: flex; } .lire-article-text-wrapper { display: flex; overflow: hidden; } .blog-post-section { width: 100%; padding: var(--vertical_padding) var(--padding_horizontal); grid-column-gap: 4vw; grid-row-gap: 4vw; flex-flow: row; display: flex; } .image-11 { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3vw; } .footer-inner { width: 100%; height: auto; padding: 2vh var(--padding_horizontal) 4vh; grid-column-gap: 20vh; grid-row-gap: 20vh; flex-flow: column; justify-content: space-between; align-items: center; display: flex; } .footer_text-wrapper { z-index: 2; grid-column-gap: 2vw; grid-row-gap: 2vw; flex-flow: column; align-items: center; width: 80%; display: flex; position: relative; } .footer-line { z-index: 2; justify-content: space-between; width: 100%; display: flex; position: relative; } .link-block-2 { color: #fff; text-decoration: underline; } .link-block-2.hide { display: none; } .footer-text { color: #fff; font-family: Ppneuecorp, Arial, sans-serif; font-size: 1vw; line-height: 1; } .code-embed-6 { background-color: var(--title_white); border-radius: 2.5vw; width: 100%; overflow: hidden; } .section-4 { display: none; } .menu_button { z-index: 1000; aspect-ratio: 1; color: #000; text-transform: uppercase; background-color: #fff; border-radius: 10vw; flex-flow: column; justify-content: center; align-items: center; height: 2.3vw; padding-top: .8vw; padding-bottom: .8vw; font-family: Ppneuemontreal, Arial, sans-serif; font-size: .8vw; font-weight: 400; line-height: 1; text-decoration: none; transition: all .5s cubic-bezier(.77, 0, .175, 1); display: none; position: relative; box-shadow: 0 0 7px #8989890d; } .ligne1, .ligne2 { background-color: #000; border-radius: 100vw; width: 1vw; height: 2px; position: absolute; } .dropdown_menu-container { z-index: 1000; grid-column-gap: .5vw; grid-row-gap: .5vw; background-color: #fff; border-radius: 2vw; flex-flow: column; justify-content: center; width: 20vw; height: 0; padding-left: .5vw; padding-right: 4vw; display: flex; position: absolute; top: 5vw; right: 4vw; box-shadow: 0 0 7px #8989890d; } .dropdown_menu_button_text-wrapper { pointer-events: none; flex-flow: column; height: 1.5vw; display: flex; overflow: hidden; } .dropdown_menu-button { color: #000; text-transform: uppercase; padding: 1.25vw 2vw; font-family: Ppneuemontreal, Arial, sans-serif; font-size: 1.5vw; line-height: 1; text-decoration: none; display: none; } .dropdown_menu-button.equipe, .dropdown_menu-button.home, .dropdown_menu-button.engagements, .dropdown_menu-button.methode, .dropdown_menu-button.services, .dropdown_menu-button.contact, .dropdown_menu-button.ressources { cursor: pointer; } .navbutton-text { font-weight: 500; display: flex; } .code-embed-3 { display: none; } .menu_close-trigger { z-index: 899; cursor: pointer; width: 100vw; height: 100vh; display: none; position: fixed; top: 0%; left: 0%; right: 0%; } .code-embed-7 { width: 100%; height: 100vh; display: block; } .body-2 { background-color: #050303; } .bg { background-color: #000; flex-flow: column; justify-content: center; align-items: center; width: 100%; height: 200vh; display: flex; } .code-embed-8 { z-index: 0; width: 100%; height: 100vh; position: static; } .text { z-index: 10; pointer-events: none; color: #fff; position: fixed; top: 40%; left: 40%; } .div-block-13 { width: 100%; height: 100vh; } .carrousel-wrapper { width: 100%; height: 100%; display: flex; position: relative; } .certif_logos-container { grid-column-gap: 3vw; grid-row-gap: 3vw; filter: drop-shadow(0 2px 20px #0000001a); background-color: #f4f4f4; border-radius: 1.5vw; justify-content: center; align-items: center; padding: 2vw 3vw; display: flex; } .image-13 { position: absolute; inset: auto 0% 0%; } .carrousel-image { object-fit: cover; width: 100%; height: 100%; } /*