/* ========================================================================== design-tokens.css : SOURCE UNIQUE de la direction artistique « T'as signé ? » Généré à partir de CHARTE.md v1.0. Chargé AVANT tout autre CSS. Règle absolue : aucune couleur en dur ailleurs. Si tu écris un #RRGGBB dans un autre fichier, c'est une erreur, pas un raccourci. Le fichier a trois couches, dans cet ordre : 1. LA MARQUE valeurs brutes de la charte, jamais utilisées directement 2. LE SENS ce que chaque couleur veut dire dans le produit 3. LE PONT anciens noms de variables, gardés le temps de la migration La couche 3 disparaîtra page par page au lot 3 de la Phase 1. ========================================================================== */ /* -------------------------------------------------------------------------- La police, servie depuis notre propre serveur. Bricolage Grotesque, licence SIL Open Font License, usage commercial libre. Sous-ensemblée au latin étendu et convertie en woff2 : 346 Ko de .ttf deviennent 75 Ko. `swap` garantit qu'aucun texte n'est invisible pendant le chargement. -------------------------------------------------------------------------- */ @font-face { font-family: "Bricolage Grotesque"; src: url("/marque/fonts/bricolage-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Bricolage Grotesque"; src: url("/marque/fonts/bricolage-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Bricolage Grotesque"; src: url("/marque/fonts/bricolage-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ======================================================================= 1. LA MARQUE Quatre rôles, jamais plus. Part visée de l'écran : papier 70 %, encre 15 %, bleu 10 %, orange moins de 3 %. ======================================================================= */ --ink: #14163C; /* texte, pointe du stylo, pupilles */ --blue: #3B4FE4; /* corps de Paraf, boutons, liens */ --orange: #FF6B35; /* le paraphe, et les moments de réussite */ --paper: #FFFDF8; /* fond de toutes les pages */ /* Nuances de service de la charte. Servent au dessin de la marque et aux dérivés d'interface. Jamais choisies « parce qu'elles sont jolies ». */ --blue-light: #5D6BF0; --blue-lighter: #4B57E8; --blue-dark: #2F3BC9; --blue-darker: #2E39BF; --gloss: #7480F6; --clip: #232C9E; --metal: #CFD4EA; --metal-light: #EDF0FA; --orange-light: #FF9366; --shadow-hue: #DEDCF3; --line: #E9E5D9; /* filets, bordures de cartes */ --muted: #5C5880; /* texte secondaire */ /* Fonds de panneau par état, définis par la charte. */ --fond-neutre: #EFEDFC; --fond-succes: #DFF2E8; --fond-alerte: #FBE6DA; --fond-signature: #FBEFD6; /* ----------------------------------------------------------------------- Dérivés d'état, calculés pour cette charte et vérifiés au contraste. Voir scripts/verifier-contraste.js pour les ratios réels. Pourquoi l'alerte n'est pas en --orange : la charte interdit l'orange saturé hors réussite. Une relance en retard emprunte donc le fond pêche de la charte, mais son texte est une terre cuite désaturée, qui se lit comme « urgent » et jamais comme « bravo ». --------------------------------------------------------------------- */ /* L'orange de marque ne fait que 2,79:1 sur le papier : il est INTERDIT comme couleur de texte. Il ne vit qu'en trait, en aplat ou en dessin. Quand un mot de réussite doit être orange, il prend --orange-texte. Sur un aplat orange, le texte est en encre (6,12:1), jamais en blanc (2,84:1, illisible). */ --orange-texte: #B8460F; --sur-orange: var(--ink); --sur-bleu: #FFFFFF; /* seul texte admis sur un aplat bleu, 6,13:1 */ --succes: #1E8A61; --succes-texte: #14634A; --alerte: #C4521F; --alerte-texte: #9A3D14; --refus: #B3364C; --refus-texte: #8E2438; --fond-refus: #FBE7EA; --entretien: #5B3FC4; --entretien-texte: #46299E; --fond-entretien: #ECE8FB; /* Surfaces */ --surface: #FFFFFF; /* carte posée sur le papier crème */ --surface-survol: #F7F5FD; /* survol : lavande à peine posée */ --surface-creuse: #F4F2FB; /* fond de piste, champ inactif */ /* Le troisieme niveau de texte. Il valait #8B87A8 jusqu au lot 3b : la landing l employait pour des etiquettes qui portent bien du sens (« A rattraper en priorite », le nom d une entreprise, le texte d invite d un champ de recherche), et il tombait a 2,84:1 sur le fond peche. Assombri pour passer 4,5:1 sur les six fonds du produit. */ --muted-doux: #656180; /* ======================================================================= 2. TYPOGRAPHIE Bricolage Grotesque en trois graisses. Jamais plus de trois tailles par écran. Les chiffres de délai, dates et SIREN passent en chasse fixe : ce sont des mesures, elles doivent s'aligner verticalement. ======================================================================= */ --police: "Bricolage Grotesque", system-ui, -apple-system, sans-serif; --police-chiffres: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --t-page: clamp(2.5rem, 1.9rem + 2.6vw, 4rem); /* 40 -> 64 px */ --t-section: clamp(1.625rem, 1.4rem + 1.05vw, 2.125rem); /* 26 -> 34 px */ --t-sous-titre: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); /* 18 -> 21 px */ --t-corps: 1rem; /* 16 px */ --t-interface: 0.8125rem; /* 13 px, étiquettes et boutons */ --graisse-titre: 700; --graisse-moyen: 500; --graisse-corps: 400; --suivi-page: -0.02em; /* -2 % */ --suivi-section: -0.01em; /* -1 % */ --interligne-titre: 1.2; --interligne-corps: 1.65; /* ======================================================================= 3. ESPACE, RAYONS, RELIEF Rythme de 4 et 8 px, sans exception. L'espace fait le calme. ======================================================================= */ --esp-0-5: 4px; --esp-1: 8px; --esp-2: 16px; --esp-3: 24px; --esp-4: 32px; --esp-5: 40px; --esp-6: 48px; --esp-8: 64px; --esp-12: 96px; --r-champ: 10px; --r-carte: 14px; --r-panneau: 24px; --r-bouton: 999px; /* Toujours un décalage vertical ET un flou. Une lueur centrée n'est pas du relief, c'est de la décoration : la charte l'interdit. */ --ombre-douce: 0 1px 2px rgba(31, 28, 80, 0.05), 0 2px 6px rgba(31, 28, 80, 0.06); --ombre-carte: 0 6px 18px rgba(31, 28, 80, 0.12); --ombre-fenetre: 0 24px 60px rgba(31, 28, 80, 0.20); /* Anneau de focus : visible sur papier crème comme sur bleu plein. */ --focus-anneau: 0 0 0 3px rgba(59, 79, 228, 0.32); --largeur: 1120px; /* ======================================================================= 4. MOUVEMENT Un moment orchestré vaut mieux que dix effets dispersés. Sortie plus rapide que l'entrée. Jamais bloquant. ======================================================================= */ --dur-court: 140ms; --dur: 220ms; --dur-long: 380ms; --ease-sortie: cubic-bezier(0.16, 1, 0.30, 1); --ease-entree: cubic-bezier(0.70, 0, 0.84, 0); /* ======================================================================= 5. COUCHES Une seule échelle, pour ne jamais improviser un z-index. ======================================================================= */ --z-base: 0; --z-collant: 10; --z-entete: 20; --z-voile: 80; --z-fenetre: 90; --z-bulle: 100; /* ======================================================================= 6. LE PONT (temporaire) Les 137 Ko de CSS existants écrivent --accent, --text, --bg, --green... Ces noms pointent désormais sur la marque : l'identité bascule d'un coup, sans réécrire chaque règle. Chaque page migrée au lot 3 cesse d'en dépendre, et ce bloc rétrécit jusqu'à disparaître. À NE PLUS UTILISER DANS DU CSS NEUF. ======================================================================= */ --bg: var(--paper); --card: var(--surface); --divider: var(--line); --track-bg: var(--surface-creuse); --survol: var(--surface-survol); --text: var(--ink); --text-secondary: var(--muted); --text-tertiaire: var(--muted-doux); --accent: var(--blue); --accent-fonce: var(--blue-dark); --accent-doux: var(--fond-neutre); --accent-bordure: var(--metal); --green: var(--blue); --green-fonce: var(--blue-dark); --succes-fond: var(--fond-succes); --attention: var(--alerte); --attention-texte: var(--alerte-texte); --attention-fond: var(--fond-alerte); --erreur: var(--refus); --erreur-texte: var(--refus-texte); --erreur-fond: var(--fond-refus); --status-todo-bg: var(--surface-creuse); --status-todo-text: var(--muted); --status-sent-bg: var(--fond-neutre); --status-sent-text: var(--blue-dark); --status-followup-bg: var(--fond-alerte); --status-followup-text: var(--alerte-texte); --status-interview-bg: var(--fond-entretien); --status-interview-text: var(--entretien-texte); --status-signed-bg: var(--fond-signature); --status-signed-text: var(--orange-texte); --status-refused-bg: var(--fond-refus); --status-refused-text: var(--refus-texte); --status-closed-bg: var(--surface-creuse); --status-closed-text: var(--muted); --police-titre: var(--police); --police-texte: var(--police); --radius-lg: var(--r-panneau); --radius-md: var(--r-carte); --radius-sm: var(--r-champ); --radius-xs: var(--esp-1); --ombre-portee: var(--ombre-carte); --ombre-focus: var(--focus-anneau); --dur-lent: var(--dur-long); --ease-out: var(--ease-sortie); } /* Un utilisateur qui a demandé moins d'animations n'en reçoit aucune. */ @media (prefers-reduced-motion: reduce) { :root { --dur-court: 0ms; --dur: 0ms; --dur-long: 0ms; --dur-lent: 0ms; } }