/* =========================================================================== FIVERTU — DESIGN SYSTEM · SOCLE (socle.css) · version 1 (novembre 2026) --------------------------------------------------------------------------- Le premier fichier de chaque page. Contient : 0. Tokens ............ échelles (typo, espacement, rayons, mouvement, layout) + couleurs du thème sombre (défaut) 1. Tokens clairs ..... html[data-theme="light"] « Encre & Cobalt » : uniquement des tokens 2. Base .............. reset, corps de page, focus, apparition au défilement, sections 3. Boutons et liens .. bouton principal, secondaire, sobre, lien fléché 4. Fondu de thème et mouvement réduit Ordre de chargement d'une page : fonts.css → socle.css → header.css → footer.css → composants.css → .css Règles - Aucune couleur en dur hors des blocs de tokens (0 et 1). - Le thème clair ne redéfinit que des tokens ; la composition est la même dans les deux thèmes. Exceptions, toutes signalées dans leur fichier : les icônes du sélecteur de thème (header.css), l'ombre de la carte du tableau compact (composants.css) et le fond « Horizon » du hero, retiré en clair (home.css). - Niveaux de surface : Field (fond) → Paper (cartes simples, menus) → Process (cartes Lumière). Ce qui fait décider (colonne FIVERTU, offres) garde la surface Process et se distingue par le cobalt (cadre, reflet), pas par une autre couleur. - Une seule police : Instrument Sans, pour le texte comme pour les chiffres (chiffres de même largeur : font-variant-numeric: tabular-nums, là où ils s'alignent). =========================================================================== */ /* =========================================================================== 0. TOKENS — échelles + couleurs du thème sombre (défaut) =========================================================================== */ :root { /* ---- Typographie : 9 tailles ---- */ --ff: "Instrument Sans", system-ui, sans-serif; --fs-display: clamp(56px, 4.5vw, 66px); /* H1, prix, n° d'étape, titre du CTA final */ --fs-h2: clamp(44px, 4.15vw, 60px); /* titres de section */ --fs-h3: clamp(22px, 2.2vw, 30px); /* titres de carte */ --fs-lead: clamp(17px, 1.5vw, 21px); /* chapôs, sous-titre du hero */ --fs-intro: clamp(16px, 1.25vw, 18px); /* chapô d'un en-tête en deux colonnes */ --fs-body: 16px; --fs-sm: 14px; --fs-xs: 12px; --fs-label: 11px; /* micro-capitales — plancher de lisibilité */ --ls-display: -0.03em; --ls-heading: -0.02em; --ls-body: 0; --ls-caps: 0.22em; --ls-caps-tight: 0.14em; /* pastilles et badges */ --lh-display: 1.04; --lh-heading: 1.15; --lh-dense: 1.35; --lh-body: 1.6; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; /* ---- Espacement — grille : pas de 2 px sous 16 px, de 4 px au-dessus ---- Échelle de référence pour les nouvelles pages. Les composants existants gardent leurs valeurs en px (câblage progressif, sans changement visible). */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; --sp-12: 96px; --sp-section: clamp(56px, 8.5vw, 120px); /* demi-écart entre deux sections (chaque section en porte un en haut et un en bas) — v122 : page sans blocs, écart resserré */ --sp-block: clamp(32px, 4vw, 56px); /* bloc → bloc */ --sp-card-xs: clamp(16px, 2vw, 24px); /* padding de carte */ --sp-card-sm: clamp(24px, 2.6vw, 36px); --sp-card: clamp(24px, 3.2vw, 44px); --sp-card-lg: clamp(32px, 4vw, 56px); --card-h: clamp(280px, 25vw, 340px); /* hauteur des cartes profils = cartes titres */ /* ---- Élévation au survol ---- */ --lift-card: -4px; /* surfaces de type carte */ --lift-micro: -2px; /* liens, boutons, lignes de menu */ /* ---- Rayons ---- */ --radius-sm: 4px; /* contrôles, badges */ --radius-md: 5px; /* cartes, surfaces */ --radius-full: 999px; /* vraies pilules : puces, icônes rondes */ /* ---- Mouvement ---- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --t-fast: 200ms var(--ease); --t-base: 360ms var(--ease); /* ---- Layout ---- */ --container: 1280px; --pad-x: clamp(20px, 4vw, 48px); --header-block: 82px; /* hauteur réelle du bandeau d'en-tête — mesurée en JS */ /* Ruptures (référence — @media n'accepte pas les variables) : 560 · 640 · 720 · 768 · 860 · 900 · 980 · 1040 · 1100 */ /* ========================================================================= COULEURS — THÈME SOMBRE · palette « Cobalt & Argent » (v96) Le cobalt porte la marque (blocs de décision, emphases des titres) ; le platine porte les détails (n° d'étape, étiquettes, focus, bouton). ========================================================================= */ /* --- Field : le fond de page --- */ --bg: #060E1C; /* --- Paper / Process --- */ --surface: #101B2D; /* Paper : cartes simples, menus, bulles */ --process: #101B2D; /* Process : cartes Lumière (étapes, profils, offres, colonne FIVERTU) */ --process-fg: #F3F6FB; /* --- Encre --- */ --fg: #F3F6FB; /* texte principal */ --fg-ch: 243 246 251; --fg-3: #9FAABB; /* texte secondaire */ --fg-2: #8D99AB; /* texte tertiaire (AA) */ /* --- Filets --- */ --line: #2D3A4D; --line-soft: #243041; --line-pill: #364459; /* --- Cobalt (marque) --- */ --cobalt: #315DA8; /* le cobalt de marque */ --cobalt-lt: #7DACF3; /* cobalt clair, lisible sur fond sombre */ --cobalt-ch: 49 93 168; /* --- Accent, teinte, signature --- */ --accent: #B8D3F9; /* survol des liens, accents froids */ --tint-ch: 219 222 226; /* teinte des lueurs, survols et filets d'accent */ --sig-ch: 213 212 208; /* signature : platine */ --sig: rgb(var(--sig-ch)); --em-2: #B2BFD1; /* 2e partie des titres de section () */ /* Rôles */ --sig-text: #CCCAC5; /* n° d'étape */ --em-hero: var(--cobalt-lt); /* 3e ligne du titre du hero */ --logo: var(--fg); /* logo de l'en-tête et du pied de page */ /* --- Boutons --- */ --btn-accent: #E7E6E3; /* platine */ --btn-accent-hover: var(--fg); /* survol : le platine s'éclaircit vers le blanc froid */ --btn-accent-fg: #0B1830; /* --- Remplissages d'interface --- */ --fill-quiet: rgb(255 255 255 / 0.02); /* sélecteur de thème, boutons du menu mobile */ --fill-hover: rgb(255 255 255 / 0.03); /* survol des liens de navigation */ --fill-soft: rgb(var(--tint-ch) / 0.045); /* survol des boutons secondaires (liens) */ --ui-focus: var(--sig); /* --- Verre et ombres --- */ --header-glass: rgb(8 16 30 / 0.62); /* en-tête condensé */ --header-edge: var(--line-soft); /* filet de l'en-tête condensé */ --scrim: rgb(4 9 18 / 0.6); /* voile du menu mobile */ --shadow-ch: 0 0 0; --tooltip-shadow: 0 12px 26px -12px rgb(0 0 0 / 0.45); --sheen: rgb(255 255 255 / 0.4); /* reflet du bouton principal */ /* --- Dashboard (Bento) et photos --- */ --slot-bg: #050B16; /* fond des images du dashboard */ --mz-tag-bg: rgb(243 246 251 / 0.92); /* v121 — étiquettes posées sur les photos */ --mz-tag-fg: #0B1830; /* --- Menu mobile : titres de groupe (cadre cobalt) --- */ --mm-lbl: var(--cobalt-lt); /* --- Lumière des cartes et reflet des offres --- */ --lum-acc-ch: 125 172 243; --lum-halo-ch: 49 93 168; /* lueur posée en background-image sur les cartes (composants.css, « Lumière ») */ /* novembre 2026 : intensité baissée d'environ 25 % (0,16 → 0,12 ; 0,14 → 0,10) */ --lum-glow: radial-gradient(80% 110% at 0% 0%, rgb(var(--lum-acc-ch) / 0.12), transparent 62%), radial-gradient(60% 90% at 100% 100%, rgb(var(--lum-halo-ch) / 0.10), transparent 70%); /* reflet cobalt qui fait le tour des offres SAA / TAA (composants.css) */ --ring-1: rgb(var(--lum-halo-ch) / 0.55); --ring-2: rgb(var(--lum-acc-ch)); --ring-3: rgb(var(--lum-acc-ch) / 0.5); /* --- Fond du hero « Horizon » (v113) : bande cobalt en bas du hero --- */ --hz-ch: 49 93 168; /* cobalt */ --hz-a: 0.6; --hz-hi-ch: 125 172 243; /* cœur : cobalt clair */ --hz-hi-a: 0.26; /* --- Survol des cartes, étape en cours (How it works) --- */ --card-hover-edge: color-mix(in srgb, var(--accent) 30%, var(--line-soft)); --step-idle: var(--sig-text); /* n° d'étape au repos */ --step-on: var(--cobalt-lt); /* n° de l'étape en cours */ /* --- Méga menu : touches des icônes (face, tranche ; cobalt au survol) --- */ --key-top: rgb(24 38 64 / 0.86); /* face : verre sombre */ --key-edge: rgb(213 212 208 / 0.42); /* filet platine */ --key-acc-top: rgb(49 93 168 / 0.80); /* touche survolée : cobalt */ --key-acc-edge: rgb(125 172 243 / 0.95); --key-acc-label: #E6EFFF; /* --- Méga menu : ombre, cartes --- */ --menu-shadow-a: 0.75; --dm-card: rgb(6 14 28 / 0.72); /* cartes-blocs voilées : la lumière du fond se devine */ /* --- Accent cobalt (canaux) : cadres cobalt, système d'allocation du hero --- */ --acc-ch: 125 172 243; /* cobalt clair */ } @media (max-width: 1040px) { :root { --fs-display: clamp(39px, 7vw, 60px); --fs-h2: clamp(34px, 4.6vw, 50px); } } @media (max-width: 640px) { :root { --fs-display: clamp(39px, 10vw, 45px); --fs-h2: clamp(32px, 9vw, 42px); } } /* =========================================================================== 1. TOKENS — THÈME CLAIR · « Encre & Cobalt » (v115, retenu le 24/10) Page entièrement claire : fond, sections, cartes, en-tête et menus. Noir et blanc ; le cobalt aux endroits qui comptent : bouton principal, 3e ligne du hero, étape en cours, colonne FIVERTU et offres, filets, icônes, titres en cadre, système d'allocation du hero. =========================================================================== */ html[data-theme="light"] { color-scheme: light; /* Field : le fond de page */ --bg: #FFFFFF; /* Paper / Process */ --surface: #FFFFFF; --process: #FFFFFF; --process-fg: #0A0A0A; /* Encre */ --fg: #0A0A0A; --fg-ch: 10 10 10; --fg-3: #575757; --fg-2: #666666; /* Filets */ --line: #E2E2E2; --line-soft: #EBEBEB; --line-pill: #CFCFCF; /* Cobalt : bouton, 3e ligne du hero, étape en cours, filets, icônes, étiquettes */ --cobalt: #315DA8; --cobalt-lt: #315DA8; --cobalt-ch: 49 93 168; --accent: #315DA8; --tint-ch: 10 10 10; --sig-ch: 49 93 168; --em-2: #315DA8; /* v120 — 2e partie des titres de section en cobalt (clair) */ --sig-text: #858585; --em-hero: #315DA8; --logo: var(--cobalt); /* logo en cobalt, la couleur des boutons */ /* Boutons */ --btn-accent: #315DA8; --btn-accent-hover: #294E8D; --btn-accent-fg: #FFFFFF; /* Remplissages d’interface */ --fill-quiet: rgb(10 10 10 / 0.03); --fill-hover: rgb(10 10 10 / 0.045); --fill-soft: rgb(49 93 168 / 0.05); --ui-focus: #315DA8; /* Verre et ombres */ --header-glass: rgb(255 255 255 / 0.84); --header-edge: #E2E2E2; --scrim: rgb(10 10 10 / 0.22); --shadow-ch: 0 0 0; --tooltip-shadow: 0 12px 26px -14px rgb(0 0 0 / 0.2); --sheen: rgb(255 255 255 / 0.3); /* Dashboard (Bento) et photos */ --slot-bg: #F2F2F2; --mz-tag-bg: rgb(255 255 255 / 0.94); --mz-tag-fg: #0A0A0A; /* Titres en cadre, étapes */ --mm-lbl: #315DA8; --step-idle: #858585; --step-on: #315DA8; /* Menu mobile : touches des icônes, cartes */ --key-top: #FFFFFF; --key-edge: #CFCFCF; --key-acc-top: #315DA8; --key-acc-edge: #315DA8; --key-acc-label: #FFFFFF; --menu-shadow-a: 0.16; --dm-card: #FFFFFF; /* Accent cobalt (canaux) */ --acc-ch: 49 93 168; /* Lumière des cartes et reflet des offres, en clair */ /* novembre 2026 : plus de lueur Lumière en clair — cartes blanches et nettes (palette Encre & Cobalt) */ --lum-glow: none; --ring-1: rgb(49 93 168 / 0.35); --ring-2: rgb(49 93 168); --ring-3: rgb(49 93 168 / 0.5); } /* =========================================================================== 2. BASE =========================================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 88px; scroll-padding-bottom: 24px; } /* v122 — un élément atteint au clavier ne colle plus au bas de l’écran */ body { font-family: var(--ff); background: var(--bg); /* v122 — fond uni (décision du 27/10) */ color: var(--fg); font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* Focus : une règle unique, tous contextes */ :where(a, button, [tabindex], input, select, textarea):where(:focus-visible) { outline: 2px solid var(--ui-focus); outline-offset: 3px; border-radius: var(--radius-sm); } /* Apparition au défilement */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); transition-delay: var(--d, 0ms); } .reveal.in-view { opacity: 1; transform: translateY(0); } section { position: relative; z-index: 1; } .section-pad { padding: var(--sp-section) var(--pad-x); } .section-inner { max-width: var(--container); margin: 0 auto; } .link-arrow, .btn { -webkit-tap-highlight-color: transparent; } /* =========================================================================== 3. BOUTONS ET LIENS =========================================================================== */ .btn { display: inline-flex; align-items: center; gap: 8px; position: relative; padding: 8px 16px; border: 1px solid transparent; border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; transition: all var(--t-fast); } .btn-lg { padding: 14px 28px; font-size: var(--fs-body); } .magnetic { will-change: transform; } /* Lien sobre (« Log in ») */ .btn-ghost-inline { color: var(--fg); padding: 8px 12px; } .btn-ghost-inline:hover { color: var(--accent); } /* Bouton principal */ .btn-primary-pill { overflow: hidden; color: var(--btn-accent-fg); background: var(--btn-accent); border-color: var(--btn-accent); } .btn-primary-pill::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--sheen), transparent); transform: translateX(-100%); transition: transform 600ms var(--ease); } .btn-primary-pill:hover { background: var(--btn-accent-hover); border-color: var(--btn-accent-hover); } .btn-primary-pill:hover::before { transform: translateX(100%); } /* Bouton secondaire */ .btn-secondary-pill { color: var(--fg); background: transparent; border-color: var(--line-pill); backdrop-filter: blur(10px); transition: transform var(--t-fast), scale var(--t-fast), gap var(--t-fast), color var(--t-fast), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); } .btn-secondary-pill:hover { color: var(--fg); background: color-mix(in srgb, var(--accent) 5%, transparent); } /* Lien fléché = bouton secondaire du site */ .link-arrow { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; color: var(--fg); background: transparent; border: 1px solid var(--line-pill); border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), scale var(--t-fast); } .link-arrow svg { width: 14px; height: 12px; flex: none; } .link-arrow:hover { color: var(--fg); background: var(--fill-soft); border-color: var(--btn-accent); } @media (hover: hover) and (pointer: fine) { .btn-secondary-pill:hover { transform: translateY(var(--lift-micro)); } } /* Clic : le bouton s'enfonce très légèrement (propriété scale : se combine avec l'effet magnétique, posé en transform) */ .btn-primary-pill:active, .btn-secondary-pill:active, .link-arrow:active { scale: 0.98; } /* Flèches « → » : elles glissent de 4 px au survol, partout (boutons, liens fléchés, menus) */ .btn .arr, .link-arrow svg { display: inline-block; transition: transform var(--t-fast), color var(--t-fast); } .btn:hover .arr, .link-arrow:hover svg { transform: translateX(4px); } /* =========================================================================== 4. FONDU DE THÈME ET MOUVEMENT RÉDUIT (socle) Fondu global, actif seulement pendant ~520 ms au changement de thème (header.js pose html.theme-anim). « body * » : il passe devant les transitions propres aux éléments, quel que soit l'ordre des fichiers. =========================================================================== */ html.theme-anim, html.theme-anim body, html.theme-anim body *, html.theme-anim body *::before, html.theme-anim body *::after { transition: background-color 0.45s ease, background-image 0.45s ease, border-color 0.45s ease, color 0.45s ease, fill 0.45s ease, box-shadow 0.45s ease; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.theme-anim, html.theme-anim body, html.theme-anim body *, html.theme-anim body *::before, html.theme-anim body *::after { transition: none; } .reveal { opacity: 1; transform: none; } .link-arrow, .btn-secondary-pill { transition: none; } /* pas de glissement, d'enfoncement ni de reflet */ .link-arrow:hover, .btn-secondary-pill:hover, .btn:hover .arr, .link-arrow:hover svg { transform: none; } .btn-primary-pill:active, .btn-secondary-pill:active, .link-arrow:active { scale: none; } .btn-primary-pill::before { display: none; } }