/* ==========================================================================
PROSPEE — tokens.css
Source de vérité technique de la charte « Noir sur blanc ».
Référence : brand/review/04-direction-finale.md (contrat d'exécution).
==========================================================================
COMMENT IMPORTER
----------------
En premier dans le , avant toute autre feuille :
ou, en tête d'une feuille globale :
@import url("/brand/tokens.css");
RÈGLE DES RATIOS D'USAGE COULEUR (mesurés sur la surface rendue d'une page)
---------------------------------------------------------------------------
≈ 80 % fonds clairs (--lumiere / --blanc / --ivoire)
≈ 12 % encre (--encre / --encre-2 : texte, pictos, wordmark)
≈ 5 % filets & surfaces d'accent (--filet / --filet-fort / --bleu-eau)
≤ 3 % bleu confirmé (un CTA, un lien, une coche, une case par écran ;
si l'accent fuit, il n'existe plus)
--encre-nuit : UNE section par page, jamais deux.
--rouge-recredit : états sémantiques uniquement, jamais décoratif.
Interdits durs : aucun dégradé (zéro exception), jamais #000 ni #FFF purs en
fond de page ou en texte courant, jamais de vert / orange / jaune.
BREAKPOINTS (en commentaire — les media queries ne lisent pas les custom properties)
-------------------------------------------------------------------------------------
sm : 640px — mobile large
md : 768px — tablette
lg : 1024px — desktop
xl : 1240px — largeur max du conteneur (--largeur-contenu)
480px — cas particulier navigation : lockup → symbole seul (charte §8.8).
Les tailles de texte sont fluides via clamp() : pas de breakpoint typographique.
========================================================================== */
/* --------------------------------------------------------------------------
@font-face — SELF-HOST (aucun appel runtime à Google, ni en dev ni en prod)
Fichiers woff2 variables livrés dans brand/fonts/ (licences OFL, gratuites),
résolus relativement à CE fichier — en production, servir brand/ tel quel.
Précharger la fonte des titres dans le :
-------------------------------------------------------------------------- */
@font-face {
font-family: "Schibsted Grotesk";
src: url("fonts/schibsted-grotesk.woff2") format("woff2-variations");
font-weight: 400 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Source Sans 3";
src: url("fonts/source-sans-3.woff2") format("woff2-variations");
font-weight: 200 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Source Sans 3";
src: url("fonts/source-sans-3-italic.woff2") format("woff2-variations");
font-weight: 200 900;
font-style: italic;
font-display: swap;
}
:root {
/* ========================================================================
1. COULEURS — PRIMITIVES
Les seuls hex autorisés du système. Aucun autre hex nulle part.
======================================================================== */
--lumiere: #FBFAF7; /* Fond principal de page. Blanc chaud, jamais clinique. */
--blanc: #FFFFFF; /* Surface élevée : cartes, tuile d'agenda, champs. N'existe que posé sur --lumiere. */
--ivoire: #F3F1EA; /* Surface secondaire : sections alternées, fonds de tableau, créneau libre. */
--filet: #E7E7DF; /* Filets d'heures/jours (hairlines 1 px), séparateurs. Décoratif uniquement. */
--filet-fort: #8A9087; /* Bordures porteuses de sens : inputs, contours actifs, icônes-contours (3,1:1). */
--encre: #15211C; /* Titres, texte courant, pictos, wordmark. Noir teinté vert — jamais #000. */
--encre-2: #5A6661; /* Texte secondaire. LE GRIS LE PLUS CLAIR AUTORISÉ du système. */
--bleu-confirme: #15487A; /* ACCENT UNIQUE : CTA, liens, coche, « Confirmé ». Sert aussi de succès. */
--bleu-eau: #E7EFF6; /* Surface d'accent : tuile confirmée, badge de garantie, surlignage discret. */
--bleu-sombre-txt: #6FA8DC; /* L'accent traduit pour la section sombre. INTERDIT sur fond clair. */
--rouge-recredit: #B42318; /* Sémantique erreur uniquement : RDV non honoré, erreur de formulaire. */
--encre-nuit: #0E1714; /* Section sombre — 1 maximum par page : clause de garantie + CTA final. */
--papier-nuit: #F5F4EF; /* Texte sur --encre-nuit (16,6:1 AAA). Jamais #FFF pur. */
/* ========================================================================
2. COULEURS — ALIAS SÉMANTIQUES
À utiliser dans les composants ; les primitives restent la référence.
Paires texte/fond : seules les paires validées WCAG du contrat (04, §2)
sont autorisées — toute autre paire est interdite.
======================================================================== */
/* Fonds & surfaces */
--color-fond: var(--lumiere); /* fond de page par défaut */
--color-surface: var(--blanc); /* cartes, champs, tuiles d'agenda */
--color-surface-2: var(--ivoire); /* sections alternées, créneau libre */
--color-surface-accent: var(--bleu-eau); /* tuile confirmée, badge de garantie */
--color-fond-nuit: var(--encre-nuit); /* la section sombre (1 max / page) */
/* Encre (texte, pictos) */
--color-encre: var(--encre); /* corps courant, titres — AAA partout */
--color-encre-2: var(--encre-2); /* secondaire : légendes, méta, heures */
--color-encre-nuit: var(--papier-nuit); /* texte sur section sombre */
--color-encre-nuit-2: rgba(245, 244, 239, 0.7); /* secondaire sur sombre (70 %) */
/* Accent & sémantique */
--color-accent: var(--bleu-confirme); /* CTA, liens, coche — ≤ 3 % des surfaces */
--color-accent-nuit: var(--bleu-sombre-txt);/* liens/coche/« e » sur --encre-nuit uniquement */
--color-succes: var(--bleu-confirme); /* l'accent EST la sémantique succès */
--color-succes-surface: var(--bleu-eau);
--color-erreur: var(--rouge-recredit); /* jamais décoratif, jamais marketing */
--color-sur-accent: var(--blanc); /* texte de CTA sur fond bleu (9,4:1) */
/* Bordures */
--color-bordure: var(--filet); /* décorative : trame, séparateurs */
--color-bordure-forte: var(--filet-fort); /* porteuse de sens : inputs, contours actifs */
/* ========================================================================
3. TYPOGRAPHIE
Paire : Schibsted Grotesk (titres & chiffres) + Source Sans 3 (texte & UI).
OFL, self-hostées (voir snippet @font-face en tête de fichier).
Base 18 px, ratio ~1,25, tailles fluides via clamp().
Règles dures : rien sous 13 px ; 3 niveaux typographiques max par écran ;
font-variant-numeric: tabular-nums sur TOUT chiffre aligné ou changeant ;
--text-display-num réservé aux chiffres-preuves SOURCÉS, rien d'autre.
======================================================================== */
/* Familles (stacks de fallback système complètes) */
--font-titres: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
--font-texte: "Source Sans 3", system-ui, -apple-system, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
/* Graisses retenues (les seules) */
--graisse-display-num: 800; /* Schibsted — chiffres-preuves uniquement */
--graisse-titre: 700; /* Schibsted — displays, h2 */
--graisse-titre-doux: 500; /* Schibsted — h3, labels forts */
--graisse-texte: 400; /* Source Sans — courant (+ italique 400 citations) */
--graisse-ui: 600; /* Source Sans — boutons, UI, captions */
/* Échelle fluide — du plus petit au plus grand
(équivalences : xs=caption · sm=small · base=body · lead · h3 · h2 ·
display-l=display-2 · display-xl=display-1 · display-num=chiffres-preuves) */
/* caption — 13 px fixes, Source Sans 600, MAJUSCULES. Minimum absolu. */
--text-xs: 0.8125rem;
--leading-xs: 1.3;
--tracking-xs: 0.08em;
/* small — 15 px fixes, Source Sans 400. Mentions, méta, réassurance. */
--text-sm: 0.9375rem;
--leading-sm: 1.5;
--tracking-sm: 0;
/* body — 17 → 18 px, Source Sans 400. Texte courant. */
--text-base: clamp(1.0625rem, 1.026rem + 0.16vw, 1.125rem);
--leading-base: 1.6;
--tracking-base: 0;
/* lead — 19 → 21 px, Source Sans 400. Chapeau sous le titre. */
--text-lead: clamp(1.1875rem, 1.115rem + 0.31vw, 1.3125rem);
--leading-lead: 1.45;
--tracking-lead: 0;
/* h3 — 23 → 28 px, Schibsted 500. Sous-sections, titres de carte.
Borne basse 1.4375rem = 23 px exactement (charte §4.2). */
--text-h3: clamp(1.4375rem, 1.2rem + 0.9vw, 1.75rem);
--leading-h3: 1.25;
--tracking-h3: -0.01em;
/* h2 — 28 → 40 px, Schibsted 700. Titres de section. */
--text-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);
--leading-h2: 1.15;
--tracking-h2: -0.01em;
/* display-l (display-2) — 34 → 56 px, Schibsted 700. Sections majeures. */
--text-display-l: clamp(2.125rem, 1.3rem + 3.4vw, 3.5rem);
--leading-display-l: 1.08;
--tracking-display-l: -0.02em;
/* display-xl (display-1) — 40 → 76 px, Schibsted 700. Hero uniquement. */
--text-display-xl: clamp(2.5rem, 1.2rem + 5.5vw, 4.75rem);
--leading-display-xl: 1.05;
--tracking-display-xl: -0.025em;
/* display-num — 48 → 96 px, Schibsted 800 + tabular-nums.
Les chiffres-preuves (110 €, ×5 à ×7) — un chiffre inventé ici = faute grave. */
--text-display-num: clamp(3rem, 1.25rem + 7.4vw, 6rem);
--leading-display-num: 1.0;
--tracking-display-num: -0.02em;
/* Sur --encre-nuit : letter-spacing du small/caption augmenté de +0.005em
(le blanc engraisse sur sombre). */
--tracking-xs-nuit: 0.085em;
--tracking-sm-nuit: 0.005em;
/* ========================================================================
4. ESPACEMENTS — grille 8 pt (suffixe = multiple de 4 px)
Loi de proximité : espace AU-DESSUS d'un titre ≥ 2× l'espace en dessous.
======================================================================== */
--space-1: 0.25rem; /* 4 px */
--space-2: 0.5rem; /* 8 px */
--space-3: 0.75rem; /* 12 px */
--space-4: 1rem; /* 16 px */
--space-5: 1.25rem; /* 20 px */
--space-6: 1.5rem; /* 24 px */
--space-8: 2rem; /* 32 px */
--space-12: 3rem; /* 48 px */
--space-16: 4rem; /* 64 px */
--space-24: 6rem; /* 96 px */
--space-32: 8rem; /* 128 px */
--space-40: 10rem; /* 160 px */
/* Padding vertical de section (le blanc, c'est le luxe) :
standard 64 → 128 px, ample (hero, garantie) 96 → 160 px. */
--space-section: clamp(4rem, 1.7rem + 9.8vw, 8rem);
--space-section-ample: clamp(6rem, 3.7rem + 9.8vw, 10rem);
/* ========================================================================
5. RAYONS, OMBRES, LARGEURS
======================================================================== */
/* Rayons — une seule échelle, partout. */
--rayon-xs: 6px; /* coches, petites tuiles, badges */
--rayon-s: 10px; /* boutons, champs de formulaire */
--rayon-m: 16px; /* cartes, tuiles d'agenda */
--rayon-l: 24px; /* grande carte agenda, blocs de preuve */
/* Ombres — teintées encre (16,22,18), JAMAIS noir pur. 3 niveaux max.
Hover = +1 niveau, c'est tout. */
--ombre-douce: 0 1px 2px rgba(16, 22, 18, 0.05);
--ombre-moyenne: 0 1px 2px rgba(16, 22, 18, 0.05), 0 8px 24px rgba(16, 22, 18, 0.07);
--ombre-carte: 0 2px 4px rgba(16, 22, 18, 0.05), 0 16px 48px rgba(16, 22, 18, 0.10);
/* Largeurs */
--largeur-contenu: 77.5rem; /* 1240 px — conteneur global */
--largeur-lecture: 40rem; /* 640 px — largeur max d'un bloc de texte (~70 caractères) */
/* Filets (trame d'agenda) */
--filet-epaisseur: 1px; /* hairline --filet : trame d'heures, séparateurs */
/* Focus visible — anneau 2 px bleu confirmé décalé de 2 px, JAMAIS supprimé. */
--focus-epaisseur: 2px;
--focus-decalage: 2px;
/* ========================================================================
6. MOTION — tokens du contrat (04, §5), à utiliser tels quels
Loi absolue : rien ne rebondit, jamais. Toute entrée = --ease-pose.
Toute sortie = 60 % de la durée d'entrée, fondu --ease-sortie.
Seules transform et opacity s'animent. linear interdit sauf opacité seule.
======================================================================== */
/* Courbes */
--ease-pose: cubic-bezier(0.16, 1, 0.3, 1); /* toute ENTRÉE : arrive vite, se pose */
--ease-trace: cubic-bezier(0.22, 1, 0.36, 1); /* tracé de coche, micro-éléments de scène */
--ease-ui: cubic-bezier(0.4, 0, 0.2, 1); /* micro-feedback : hover, focus, toggle */
--ease-sortie: ease-in; /* toute SORTIE : fondu simple */
/* Durées */
--duree-ui: 150ms; /* hover, focus, active — identique sur tout le site */
--duree-ui-retour: 90ms; /* règle : toute sortie = 60 % de la durée d'entrée */
--duree-reveal: 600ms; /* scroll-reveal d'un bloc */
--duree-pose: 500ms; /* scène signature, phase 1 : la tuile se pose */
--duree-trace: 250ms; /* scène signature, phase 3 : la coche se trace */
--duree-compteur: 1200ms; /* count-up des chiffres-preuves */
--duree-attente: 900ms; /* indicateur d'attente de l'état loading (§8.1) : cycle du
fondu séquencé des trois points. Opacité seule, zéro
rotation — les lois motion s'appliquent sans exception ;
la répétition EST l'information (le chargement dure) et
s'arrête dès que l'action aboutit. */
}
/* ==========================================================================
PREFERS-REDUCED-MOTION (non négociable — approche no-motion-first)
Les animations ne s'activent que sous (prefers-reduced-motion: no-preference).
En mode réduit : tout est affiché d'emblée (scène signature = état final,
coche tracée, count-up = valeur finale) ; seuls les fondus d'opacité subsistent.
Côté JS : tester matchMedia('(prefers-reduced-motion: reduce)') avant toute
animation script.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
:root {
--duree-ui: 0.01ms;
--duree-ui-retour: 0.01ms;
--duree-reveal: 0.01ms;
--duree-pose: 0.01ms;
--duree-trace: 0.01ms;
--duree-compteur: 0.01ms;
--duree-attente: 0.01ms;
}
/* Ceinture + bretelles : neutralisation globale */
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}