/* ========================================================================== Michael Paetzold — design tokens Source: MICHAEL PAETZOLD — MAQUETTE SITE V4 — 08/03/2026 (Figma, 1920px) Valeurs relevées telles quelles. Ne pas arrondir. ========================================================================== */ :root { /* --- Brand / univers -------------------------------------------------- */ --mp-cyan: #00AEEC; /* rgb(0,174,236) — marque, nav, liens */ --mp-cyan-label: #00AFEC; /* rgb(0,175,236) — libellés de bouton */ --mp-green: #008774; /* rgb(0,135,116) — univers prestations */ --mp-green-dark: #0E735C; /* rgb(14,115,92) — logo/aplat vert */ --mp-green-bubble: #2BC0A8; /* pastille picto sur carte verte */ --mp-magenta: #B2235C; /* rgb(178,35,92) — univers équipements */ --mp-magenta-dark: #A30042; /* rgb(163,0,66) */ --mp-magenta-bubble: #EB6A9D; /* pastille picto sur carte magenta */ --mp-concept: #587F1A; /* rgb(88,127,26) — univers concept */ /* --- Neutres ---------------------------------------------------------- */ --mp-ink: #161615; /* rgb(22,22,21) — logo */ --mp-black: #000000; --mp-text: #2D2D2D; /* rgb(45,45,45) — texte, cartes sombres */ --mp-text-alt: #222222; /* rgb(34,34,34) */ --mp-text-alt2: #2B2B2B; /* rgb(43,43,43) */ --mp-ink-soft: #1D1D1B; /* rgb(29,29,27) */ --mp-muted: #959595; /* rgb(149,149,149) — texte secondaire */ --mp-border: #707070; /* rgb(112,112,112) — filets, bordures */ --mp-border-light: #E2E2E2; /* rgb(226,226,226) */ --mp-hairline: #B1B1B1; /* rgb(177,177,177) */ --mp-surface: #F8F8F8; /* rgb(248,248,248) — fond de carte/bande */ --mp-surface-alt: #D9D9D9; /* rgb(217,217,217) */ --mp-surface-alt2: #DEDEDE; /* rgb(222,222,222) — lignes alternées abécédaire */ --mp-surface-card: #D1D1D1; /* rgb(209,209,209) — bloc texte des JobCard */ --mp-white: #FFFFFF; --mp-white-soft: #FAFAFA; /* rgb(250,250,250) — texte sur média */ --mp-dot: #8B8B8B; /* rgb(139,139,139) — puces carrousel */ --mp-picto: #0C1B66; /* rgb(12,27,102) — trait pictogramme */ /* --- Voiles ----------------------------------------------------------- */ --mp-scrim-cta: #002838; /* opacité .275, aplat */ --mp-scrim-home: #919191; /* opacité .595, mix-blend-mode: multiply */ --mp-scrim-page: #707070; /* opacité .600, mix-blend-mode: multiply */ /* --- Typographie ------------------------------------------------------ */ --mp-font: Oswald, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mp-fw-light: 300; --mp-fw-regular: 400; --mp-fw-medium: 500; --mp-fs-59: 59px; --mp-lh-59: 100%; --mp-fs-50: 50px; --mp-lh-50: 120%; --mp-fs-40: 40px; --mp-lh-40: 125%; --mp-fs-30: 30px; --mp-lh-30: 133.333%; --mp-fs-25: 25px; --mp-fs-23: 23px; --mp-lh-23: 260.87%; --mp-fs-22: 22px; --mp-fs-20: 20px; --mp-lh-20: 150%; --mp-fs-18: 18px; --mp-fs-16: 16px; --mp-lh-16: 156.25%; --mp-ls-nav: 0.02em; /* nav, chiffres, légendes */ --mp-ls-address: 0.03em; /* adresse footer */ /* --- Géométrie -------------------------------------------------------- */ --mp-page-w: 1920px; --mp-gutter-x: 140px; /* marge latérale */ --mp-container: 1640px; /* zone utile */ --mp-measure: 1104px; /* zone de formulaire */ --mp-measure-text: 1088px; /* largeur de lecture : article, intro carrière */ --mp-space-text: 30px; /* respiration entre paragraphes et listes */ --mp-section-y: 49px; /* respiration verticale d'une section ; 98 entre deux sections. 30 en mobile, soit 60, relevé sur « iPhone 14 Pro – 1 » */ --mp-radius: 4px; /* rayon unique */ --mp-shadow: 0 3px 6px rgba(0, 0, 0, 0.1608); --mp-col-4: 398px; --mp-gap-4: 16px; /* cartes agence / vidéo, frise chiffres */ --mp-stat-w: 260px; /* carte chiffre-clé, 260 × 370 */ --mp-video-ratio: 398 / 384; /* vignette vidéo : 398 × 384 en desktop, 322 × 311 en mobile, même rapport */ --mp-col-3: 517px; --mp-gap-3: 44.5px; /* actus, prestations, offres */ --mp-col-2: 674px; --mp-gap-2: 20px; /* accordéon */ --mp-field-w: 336px; --mp-gap-field: 48px; --mp-nav-h-home: 125px; --mp-nav-h-mobile: 70px; /* burger : une seule hauteur, accueil compris */ --mp-nav-h-compact: 80px; /* bandeau réduit au défilement, menu desktop */ --mp-nav-h-inner: 87px; --mp-hero-h-home: 955px; /* photo seule ; 1080 dans le design system, mais ce chiffre inclut les 125 du bandeau */ --mp-hero-h-inner: 529px; --mp-cta-h: 386px; --mp-footer-h: 643.896px; /* --- Traits ----------------------------------------------------------- */ --mp-stroke-hairline: 0.5px; /* flèches de lien, chevrons */ --mp-stroke-border: 1px; /* bordures, accordéon */ --mp-stroke-icon: 1.5px; /* pictogrammes, flèches carrousel */ } /* --- Styles de texte nommés ---------------------------------------------- */ .mp-display { font: var(--mp-fw-medium) 50px/120% var(--mp-font); color: var(--mp-cyan); } .mp-page-title{ font: var(--mp-fw-medium) 50px/70% var(--mp-font); color: var(--mp-white); text-align: center; text-transform: uppercase; } .mp-h2 { font: var(--mp-fw-regular) 40px/150% var(--mp-font); color: var(--mp-cyan); text-transform: uppercase; } .mp-h3 { font: var(--mp-fw-medium) 30px/133.333% var(--mp-font); text-transform: uppercase; } .mp-card-title{ font: var(--mp-fw-medium) 23px/260.87% var(--mp-font); text-transform: uppercase; } .mp-eyebrow { font: var(--mp-fw-regular) 23px/260.87% var(--mp-font); text-transform: uppercase; } .mp-stat { font: var(--mp-fw-regular) 59px/100% var(--mp-font); letter-spacing: var(--mp-ls-nav); color: var(--mp-text); } .mp-nav { font: var(--mp-fw-regular) 20px/100% var(--mp-font); letter-spacing: var(--mp-ls-nav); color: var(--mp-text); text-transform: uppercase; } .mp-body { font: var(--mp-fw-regular) 20px/150% var(--mp-font); color: var(--mp-text); text-wrap: pretty; } .mp-label { font: var(--mp-fw-regular) 20px/175% var(--mp-font); letter-spacing: var(--mp-ls-nav); color: var(--mp-muted); text-transform: uppercase; } .mp-breadcrumb{ font: var(--mp-fw-regular) 20px/150% var(--mp-font); color: var(--mp-muted); opacity: 0.73; } .mp-address { font: var(--mp-fw-regular) 20px/300% var(--mp-font); letter-spacing: var(--mp-ls-address); color: var(--mp-muted); } .mp-legal { font: var(--mp-fw-regular) 16px/156.25% var(--mp-font); color: var(--mp-muted); }