/* Revolia — Design Tokens (CSS custom properties) Source : design-system.json (v2.0.0) / Revolia - Fiche identitaire graphique.pdf Usage : importer en premier dans le global CSS du site. Note : Satoshi n'est pas vendorée ici — la charger via Fontshare (https://www.fontshare.com/fonts/satoshi) dans le ou via @font-face en amont de ce fichier. */ :root { /* ——— Couleurs de base (répartition 50 / 25 / 12.5 / 12.5) ——— */ --color-bg-primary: #FFFFFF; --color-bg-secondary: #F3F3F7; --color-text-primary: #0F0E15; --color-text-inverse: #FFFFFF; --color-text-muted: #5B5B66; --color-accent-blue: #2860E1; --color-accent-navy: #013368; --color-accent-purple: #B343F2; /* ——— Palette étendue (déclinaisons) ——— */ --color-mono-100: #FFFFFF; --color-mono-200: #F3F3F7; --color-mono-800: #0F0E15; --color-blue-500: #2860E1; --color-blue-800: #013368; --color-violet-500: #B343F2; --color-violet-700: #7A2AA8; /* ——— États ——— */ --color-link: var(--color-accent-blue); --color-link-hover: #1E4CC4; --color-focus-ring: var(--color-accent-blue); --color-success: #1F9D6B; --color-warning: #E9A13B; --color-danger: #D64545; /* ——— Surfaces ——— */ --color-surface-card: #FFFFFF; --color-surface-card-alt: #F3F3F7; --color-border: #E6E6EE; --color-border-strong: #0F0E15; --color-overlay: rgba(15, 14, 21, 0.55); /* ——— Gradient signature « Aura » ——— */ --gradient-aura: radial-gradient(60% 55% at 18% 22%, #EED9FB 0%, rgba(238, 217, 251, 0) 70%), radial-gradient(70% 65% at 30% 55%, #B29BF0 0%, rgba(178, 155, 240, 0) 70%), radial-gradient(80% 80% at 70% 80%, #3E5FE2 0%, #2860E1 100%); --gradient-aura-soft: radial-gradient(120% 80% at 10% 0%, #F4E9FC 0%, rgba(244, 233, 252, 0) 60%), radial-gradient(90% 70% at 95% 100%, #DCE4FD 0%, rgba(220, 228, 253, 0) 55%); --gradient-brand-solid: #2860E1; /* ——— Typographie ——— */ --font-sans: 'Satoshi', 'Helvetica Neue', 'Arial', system-ui, sans-serif; --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Typeramp web officielle (PDF p.12) : size / weight / line-height / letter-spacing */ --fs-display: 88px; --lh-display: 1.05; --ls-display: -0.03em; --fw-display: 700; --fs-h1: 64px; --lh-h1: 1.2; --ls-h1: -0.03em; --fw-h1: 600; --fs-h2: 43px; --lh-h2: 1.2; --ls-h2: -0.03em; --fw-h2: 600; --fs-h3: 34px; --lh-h3: 1.2; --ls-h3: -0.02em; --fw-h3: 600; --fs-h4: 27px; --lh-h4: 1.2; --ls-h4: -0.02em; --fw-h4: 600; --fs-h5: 22px; --lh-h5: 1.2; --ls-h5: -0.02em; --fw-h5: 600; --fs-h6: 18px; --lh-h6: 1.2; --ls-h6: -0.02em; --fw-h6: 600; --fs-paragraph: 14px; --lh-paragraph: 1.2; --ls-paragraph: -0.01em; --fw-paragraph: 500; --fs-button: 14px; --lh-button: 1.2; --ls-button: 0; --fw-button: 700; --fs-caption: 11px; --lh-caption: 1.1; --ls-caption: 0; --fw-caption: 500; /* ——— Espacements (échelle 4pt) ——— */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --space-40: 160px; /* ——— Rayons ——— */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 40px; --radius-pill: 9999px; /* ——— Ombres ——— */ --shadow-xs: 0 1px 2px rgba(15, 14, 21, 0.06); --shadow-sm: 0 2px 6px rgba(15, 14, 21, 0.08); --shadow-md: 0 8px 24px rgba(15, 14, 21, 0.10); --shadow-lg: 0 20px 48px rgba(15, 14, 21, 0.12); --shadow-xl: 0 32px 80px rgba(15, 14, 21, 0.16); --shadow-glow-blue: 0 20px 60px rgba(40, 96, 225, 0.35); --shadow-glow-purple: 0 20px 60px rgba(179, 67, 242, 0.30); --shadow-focus: 0 0 0 3px rgba(40, 96, 225, 0.35); /* ——— Flous ——— */ --blur-sm: 8px; --blur-md: 20px; --blur-lg: 40px; --blur-xl: 80px; /* ——— Mouvement ——— */ --duration-instant: 80ms; --duration-fast: 150ms; --duration-base: 240ms; --duration-slow: 400ms; --duration-slower: 700ms; --easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --easing-entrance: cubic-bezier(0.16, 1, 0.3, 1); --easing-exit: cubic-bezier(0.4, 0, 1, 1); --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* ——— Layout (grilles PDF p.17–20) ——— sm : 230–511 | 8 cols | 8px gutter | 16px margin md : 512–1279 | 16 cols | 16px gutter | 32px margin lg : 1280–1679 | 16 cols | 16px gutter | 48px margin xl : ≥ 1680 | 16 cols | 16px gutter | auto margin */ --grid-columns: 8; --grid-gutter: 8px; --grid-margin: 16px; --container-max: 1680px; --container-wide-max: 1680px; --container-pad: 16px; --section-pad-y: 64px; } @media (min-width: 512px) { :root { --grid-columns: 16; --grid-gutter: 16px; --grid-margin: 32px; --container-pad: 32px; --section-pad-y: 96px; } } @media (min-width: 1280px) { :root { --grid-margin: 48px; --container-pad: 48px; --section-pad-y: 128px; } } @media (min-width: 1680px) { :root { --grid-margin: auto; --container-pad: 0; } } /* ——— Base reset minimal ——— */ html { font-family: var(--font-sans); font-size: var(--fs-paragraph); line-height: var(--lh-paragraph); letter-spacing: var(--ls-paragraph); color: var(--color-text-primary); background: var(--color-bg-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; font-weight: var(--fw-paragraph); } ::selection { background: var(--color-accent-blue); color: #FFFFFF; } :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } /* ——— Typographie utilitaires (typeramp officielle) ——— */ .t-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-display); } .t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--fw-h1); } .t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-h2); } .t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-h3); } .t-h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); font-weight: var(--fw-h4); } .t-h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); font-weight: var(--fw-h5); } .t-h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); letter-spacing: var(--ls-h6); font-weight: var(--fw-h6); } .t-paragraph { font-size: var(--fs-paragraph); line-height: var(--lh-paragraph); letter-spacing: var(--ls-paragraph); font-weight: var(--fw-paragraph); } .t-button { font-size: var(--fs-button); line-height: var(--lh-button); letter-spacing: var(--ls-button); font-weight: var(--fw-button); } .t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); font-weight: var(--fw-caption); } .t-mono { font-family: var(--font-mono); } /* Hiérarchie par défaut pour les balises HTML (sans styliser brutalement tout) */ h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--fw-h1); margin: 0 0 var(--space-6); } h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-h2); margin: 0 0 var(--space-5); } h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-h3); margin: 0 0 var(--space-4); } h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); font-weight: var(--fw-h4); margin: 0 0 var(--space-4); } h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); font-weight: var(--fw-h5); margin: 0 0 var(--space-3); } h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); letter-spacing: var(--ls-h6); font-weight: var(--fw-h6); margin: 0 0 var(--space-3); } p { font-size: var(--fs-paragraph); line-height: var(--lh-paragraph); letter-spacing: var(--ls-paragraph); font-weight: var(--fw-paragraph); margin: 0 0 var(--space-4); } /* ——— Composants clés ——— */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-5); font-family: var(--font-sans); font-size: var(--fs-button); font-weight: var(--fw-button); line-height: 1; letter-spacing: var(--ls-button); border: 0; border-radius: var(--radius-pill); cursor: pointer; transition: transform var(--duration-fast) var(--easing-standard), background var(--duration-fast) var(--easing-standard), box-shadow var(--duration-base) var(--easing-standard); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--color-accent-blue); color: #FFFFFF; } .btn--primary:hover { background: var(--color-link-hover); box-shadow: var(--shadow-glow-blue); } .btn--inverse { background: var(--color-text-primary); color: #FFFFFF; } .btn--inverse:hover { background: #23222C; } .btn--ghost { background: transparent; color: var(--color-text-primary); } .btn--ghost:hover { background: var(--color-bg-secondary); } .btn--gradient { background: var(--gradient-aura); color: #FFFFFF; } .btn--gradient:hover { box-shadow: var(--shadow-glow-purple); } .btn--sm { height: 36px; padding: 0 14px; } .btn--lg { height: 56px; padding: 0 28px; font-size: 16px; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: var(--fw-medium); line-height: 1.2; } .badge--neutral { background: var(--color-bg-secondary); color: var(--color-text-primary); } .badge--blue { background: rgba(40, 96, 225, 0.12); color: var(--color-accent-blue); } .badge--purple { background: rgba(179, 67, 242, 0.12); color: var(--color-accent-purple); } .badge--dark { background: var(--color-text-primary); color: #FFFFFF; } /* Cards */ .card { background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-base) var(--easing-standard), transform var(--duration-base) var(--easing-standard); } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .card--soft { background: var(--color-bg-secondary); border-color: transparent; } .card--dark { background: var(--color-text-primary); color: var(--color-text-inverse); border-color: transparent; } .card--gradient { background: var(--gradient-aura); color: var(--color-text-inverse); border: 0; } /* Section hero */ .hero { position: relative; min-height: 680px; padding: 120px var(--container-pad); border-radius: var(--radius-2xl); background: var(--gradient-aura); color: var(--color-text-inverse); overflow: hidden; } /* Navigation */ .nav { position: sticky; top: 0; height: 72px; background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--color-border); z-index: 50; } /* Inputs */ .input { display: block; width: 100%; height: 48px; padding: 0 var(--space-4); font-family: var(--font-sans); font-size: var(--fs-paragraph); line-height: 1.2; color: var(--color-text-primary); background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard); } .input:focus { outline: none; border-color: var(--color-accent-blue); box-shadow: var(--shadow-focus); } /* Icônes csh Icons — tailles officielles (16 info, 20 mobile, 24 desktop) */ .icon { width: 20px; height: 20px; display: inline-block; vertical-align: middle; color: currentColor; } .icon--16 { width: 16px; height: 16px; } .icon--20 { width: 20px; height: 20px; } .icon--24 { width: 24px; height: 24px; } /* Tuile pour icône 3D (legacy) */ .icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 120px; padding: var(--space-4); background: var(--color-bg-secondary); border-radius: var(--radius-lg); transition: transform var(--duration-base) var(--easing-bounce); } .icon-tile:hover { transform: translateY(-4px) rotate(-1deg); } .icon-tile img { width: 100%; height: 100%; object-fit: contain; } /* Float animation pour icônes 3D */ @keyframes revolia-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .icon-float { animation: revolia-float 3s ease-in-out infinite; } /* Respect des préférences de mouvement */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; } } /* Container + grille (spécifications PDF p.17–20) */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding-left: var(--container-pad); padding-right: var(--container-pad); } .grid { display: grid; grid-template-columns: repeat(var(--grid-columns), 1fr); column-gap: var(--grid-gutter); } .section { padding-top: var(--section-pad-y); padding-bottom: var(--section-pad-y); }