/* ============================================================================= Bozkurt Construction — 01-tokens.css (repris tel quel de Nataly Fit / Nataly Compta) ----------------------------------------------------------------------------- Variables de design (design tokens). Source de vérité pour la palette, la typographie, les rayons, les ombres, les espacements et les durées. Aucune règle visuelle appliquée ici : uniquement des `--variables` sous :root. Les feuilles 02-base.css et 03-composants.css consomment ces tokens. Réf. spec §6 (design system). Toute couleur, tout rayon, toute ombre du site doit venir d'une variable définie ci-dessous — jamais d'une valeur en dur. POLICES (Google Fonts) — Fraunces (titres) + Inter (corps/UI). Importées ci-dessous par @import. En complément, chaque page HTML DEVRAIT poser dans son , AVANT ce fichier, les preconnect suivants pour la performance (documenté ici, non contraignant) : ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@400;500;600;700&display=swap"); :root { /* --------------------------------------------------------------------------- PALETTE — « PAPIER SOUS NÉON » : fond GRIS neutre, cartes blanches, encre indigo. Choisie par la coach le 2026-08-13 parmi douze agencements. Cinq couleurs : Space Indigo #21295C · Grey Olive #858585 · Silver #C2C2C2 · Snow #FCF7F8 · Icy Blue #A2DBFC. Le fond #F0F0F0 est Silver ÉCLAIRCI, strictement neutre (R = V = B) : c'est la seule densité de gris où Grey Olive repasse le seuil de 3:1 et redevient une vraie bordure, donc la seule où les cinq couleurs s'emploient TELLES QUELLES, sans variante fabriquée. Les noms sémantiques (--couleur-fond, --couleur-texte…) sont l'API stable. Les noms bruts (--brut-*) sont internes et HÉRITÉS : on ne change QUE leurs VALEURS pour re-thémer tout le site. Les libellés « ivoire / sable / clay » ne décrivent plus la teinte, seulement le RÔLE. ⚠️ DEUX PARTICULARITÉS DE CETTE PALETTE, à connaître avant d'y toucher : 1. L'ACCENT EST L'ENCRE. --brut-clay vaut le même hex que --brut-brun-noir : un bouton n'est pas une couleur, c'est un bloc indigo plein. C'est VOLONTAIRE — la palette n'a aucune couleur vive, et l'énergie passe par la masse. Ce qui distingue un lien d'un texte, c'est --brut-clay-texte (#05669E, le seul bleu franc), jamais --brut-clay. 2. LA CARTE NE TIENT QUE PAR SON OMBRE. Blanc sur #F0F0F0 ne fait que 1,14 : la carte n'existe pas par sa couleur. Les --ombre-* sont donc porteuses d'information ici, pas décoratives — ne pas les alléger. ⚠️ ICY BLUE NE PEUT PAS ÊTRE UN BOUTON. Mesuré : 1,31 sur le fond, 1,49 sur la carte — il est trop clair (L 81 %) pour se détacher d'un gris pâle. Il vit comme VOILE (--brut-clay-tres-clair) et comme matière d'état : remplissage de jauge, chip, bandeau — toujours en portant du Space Indigo par-dessus (9,16). ⚠️ Contrastes AA vérifiés par script sur TOUS les fonds (fond plat, bornes du dégradé, surface, surface basse, voile accent, fonds succès/erreur) : 31 paires contrôlées, la plus serrée à 5,09. --------------------------------------------------------------------------- */ --brut-ivoire: #F0F0F0; /* fond — Silver éclairci, strictement neutre */ --brut-blanc: #FFFFFF; /* surface haute — blanc pur (cartes, en-tête, barre latérale) */ --brut-sable: #EAEAEA; /* surface basse — gris clair (champs, chips, badges, voile) */ --brut-greige: #858585; /* neutre moyen — Grey Olive TEL QUEL (icônes, bordures douces) ⚠️ PAS Silver #C2C2C2 : il tombe à 1,56 sur le fond et 1,78 sur la carte, donc invisible. --couleur-neutre sert de BORDURE dans 03-composants.css — elle doit se voir. */ --brut-bordure: #858585; /* bordures fines — Grey Olive (3,24 fond · 3,69 carte · 3,07 sable) */ --brut-brun-noir: #21295C; /* texte principal — Space Indigo */ --brut-brun-doux: #5F5F5F; /* texte secondaire — gris (AA sur fond, carte, sable ET voile) */ --brut-clay: #21295C; /* ACCENT — l'ENCRE elle-même (voir particularité 1 ci-dessus) */ --brut-clay-fonce: #141938; /* indigo profond — survol / focus (15,03 sur le fond) */ --brut-clay-texte: #05669E; /* bleu franc RÉSERVÉ au TEXTE — c'est Icy Blue (teinte 202°) descendu à 33 % de clarté. AA sur fond, surface, surface basse ET accent-voile (5,13 au pire). */ --brut-clay-tres-clair: #E1F4FE; /* Icy Blue très pâle — badges / état actif (→ accent-voile) */ /* Texte secondaire sur les SURFACES TEINTÉES. Le sable étant ici un gris très proche du fond, la même valeur suffit : 5,31 sur sable, 5,65 sur le voile. */ --brut-brun-doux-sable: #5F5F5F; /* États de validation (verts / rouges ASSOMBRIS pour le fond clair) */ --brut-succes: #0F7538; /* vert profond, lisible sur clair ET en fond (texte blanc) */ --brut-succes-fond: #E4F6EA; --brut-erreur: #C8102E; /* rouge lisible en TEXTE sur clair ET en fond de toast (texte blanc) */ --brut-erreur-fond: #FDEAEC; /* Bornes du DÉGRADÉ DE FOND. « Papier sous néon » veut un fond GRIS NEUTRE : le dégradé n'est plus une couleur, c'est un souffle de lumière du haut vers le bas. ⚠️ Ne PAS y remettre d'Icy Blue : ces deux bornes sont le FOND DE PAGE ENTIER (posé sur par 02-base.css), pas un bandeau d'en-tête. */ --brut-degrade-haut: #F4F4F4; /* gris un peu plus clair que le fond plat */ --brut-degrade-bas: #EAEAEA; /* gris un peu plus dense en bas */ /* Encre — pastilles « actives » à contraste franc (jour sélectionné, filtre actif). */ --brut-encre: #181E44; /* Space Indigo assombri */ /* --- Rôles sémantiques (à consommer par les composants) --- */ --couleur-fond: var(--brut-ivoire); --couleur-surface: var(--brut-blanc); --couleur-surface-basse: var(--brut-sable); --couleur-neutre: var(--brut-greige); --couleur-bordure: var(--brut-bordure); --couleur-texte: var(--brut-brun-noir); --couleur-texte-secondaire:var(--brut-brun-doux); --couleur-accent: var(--brut-clay); --couleur-accent-fort: var(--brut-clay-fonce); --couleur-accent-texte: var(--brut-clay-texte); /* clay en COULEUR DE TEXTE (liens, états actifs) */ --couleur-accent-voile: var(--brut-clay-tres-clair); --couleur-accent-contraste:var(--brut-blanc); /* texte posé sur l'accent */ /* Texte secondaire sur les surfaces sable/teintées (footer, .carte--sable) */ --couleur-texte-secondaire-sur-sable: var(--brut-brun-doux-sable); --couleur-succes: var(--brut-succes); --couleur-succes-fond: var(--brut-succes-fond); --couleur-erreur: var(--brut-erreur); --couleur-erreur-fond: var(--brut-erreur-fond); /* Encre — fond des pastilles actives à contraste franc (texte : --couleur-surface) */ --couleur-encre: var(--brut-encre); /* Dégradé de fond de page (posé sur par 02-base.css). Le repli plat --couleur-fond sert partout où un dégradé n'a pas de sens (blocs, sections). */ /* ⚠️ L'étape du milieu était écrite EN DUR (#F9F1FA, lilas) : re-thémer par les seules bornes laissait du rose au centre de chaque page. Elle passe donc par le fond plat, qui suit automatiquement la palette. */ --degrade-fond: linear-gradient( 168deg, var(--brut-degrade-haut) 0%, var(--brut-ivoire) 42%, var(--brut-degrade-bas) 100% ); /* Anneau de focus — accessibilité (WCAG AA) : très visible */ --focus-anneau: var(--brut-clay-fonce); --focus-epaisseur: 3px; --focus-decalage: 2px; /* Voile de fond de modale (fond clair → voile prune translucide, moins dense qu'en sombre : il doit assombrir la page sans virer au noir opaque) */ --couleur-voile: rgba(24, 30, 68, 0.44); /* voile de modale — indigo, plus prune */ /* --------------------------------------------------------------------------- TYPOGRAPHIE --------------------------------------------------------------------------- */ --police-titre: "Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif; --police-corps: "Inter", "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Échelle typographique modulaire (mobile-first, ratio ~1.2 puis élargi) */ --taille-xs: 0.75rem; /* 12px — mentions légales, badges */ --taille-sm: 0.875rem; /* 14px — annotations, labels secondaires */ --taille-base: 1rem; /* 16px — corps de texte, plancher confort mobile */ --taille-md: 1.125rem; /* 18px — texte d'introduction */ --taille-lg: 1.375rem; /* 22px — sous-titres */ --taille-xl: 1.75rem; /* 28px — titres de section */ --taille-2xl: 2.25rem; /* 36px — titres de page */ --taille-3xl: 3rem; /* 48px — hero (mobile) */ --taille-4xl: 4rem; /* 64px — hero (grand écran, via clamp côté base) */ /* Graisses */ --graisse-normale: 400; --graisse-moyenne: 500; --graisse-semi: 600; --graisse-forte: 700; /* Interlignes */ --interligne-serre: 1.15; /* grands titres */ --interligne-titre: 1.25; --interligne-corps: 1.6; /* lecture confortable */ /* Interlettrage */ --lettrage-titre: -0.02em; /* Fraunces resserrée en grand */ --lettrage-normal: 0; --lettrage-majuscule: 0.08em; /* petites capitales / surtitres */ /* --------------------------------------------------------------------------- ESPACEMENTS — échelle 4 / 8 px --------------------------------------------------------------------------- */ --espace-0: 0; --espace-1: 0.25rem; /* 4 */ --espace-2: 0.5rem; /* 8 */ --espace-3: 0.75rem; /* 12 */ --espace-4: 1rem; /* 16 */ --espace-5: 1.5rem; /* 24 */ --espace-6: 2rem; /* 32 */ --espace-7: 3rem; /* 48 */ --espace-8: 4rem; /* 64 */ --espace-9: 6rem; /* 96 */ /* Largeurs de conteneur */ --largeur-contenu: 68rem; /* ~1088px — grille générale */ --largeur-texte: 40rem; /* ~640px — colonne de lecture confortable */ --largeur-etroite: 26rem; /* ~416px — formulaires (connexion) */ /* --------------------------------------------------------------------------- RAYONS — coins arrondis modérés 12–16px (spec §6) --------------------------------------------------------------------------- */ --rayon-sm: 8px; --rayon-md: 12px; /* défaut composants (boutons, champs) */ --rayon-lg: 16px; /* cartes, modale */ --rayon-xl: 24px; /* grands blocs, hero */ --rayon-plein: 999px; /* pastilles, avatars, badges */ /* --------------------------------------------------------------------------- OMBRES — teintées INDIGO, et PORTEUSES D'INFORMATION dans cette palette --------------------------------------------------------------------------- */ /* ⚠️ Ici l'ombre n'est pas décorative. Une carte blanche sur le fond #F0F0F0 n'est qu'à 1,14 : elle n'existe pas par sa couleur, c'est l'ombre qui la découpe. Ne pas alléger ces valeurs — une carte sans ombre disparaît dans la page. Teinte : Space Indigo (33, 41, 92), jamais du noir pur, qui « salirait » le gris. Les opacités sont un cran au-dessus de celles de la palette pastel, précisément parce que le fond est plus dense et absorbait davantage l'ombre. */ --ombre-xs: 0 1px 2px rgba(33, 41, 92, 0.10); --ombre-sm: 0 2px 8px rgba(33, 41, 92, 0.12); --ombre-md: 0 6px 20px rgba(33, 41, 92, 0.14); --ombre-lg: 0 16px 40px rgba(33, 41, 92, 0.18); --ombre-accent: 0 6px 18px rgba(33, 41, 92, 0.26); /* halo indigo sous les CTA */ /* --------------------------------------------------------------------------- TRANSITIONS — micro-interactions discrètes --------------------------------------------------------------------------- */ --duree-rapide: 120ms; --duree-moyenne: 200ms; --duree-lente: 320ms; --courbe: cubic-bezier(0.4, 0, 0.2, 1); --transition-douce: var(--duree-moyenne) var(--courbe); /* Épaisseurs de trait (iconographie fine, bordures rares) */ --trait-fin: 1px; --trait-moyen: 1.5px; /* Profondeurs (z-index) — échelle nommée */ --z-header: 100; --z-voile: 900; --z-modale: 1000; --z-toast: 1100; } /* ============================================================================= ARCHIVE 1 — PALETTE « LAVANDE & ROSE » (thème clair pastel, en ligne du 2026-08-06 au 2026-08-13, remplacée par « Papier sous néon ») ----------------------------------------------------------------------------- C'EST LE RETOUR ARRIÈRE UTILE : recopier ces valeurs sur les --brut-* du bloc :root ci-dessus, remettre les à #F4EDFA dans les 8 pages HTML, et rétablir l'étape du milieu du dégradé à #F9F1FA si l'on veut l'exact rendu d'origine (elle passe désormais par --brut-ivoire). --brut-ivoire: #F8F2FB; --brut-blanc: #FFFFFF; --brut-sable: #F2E9FA; --brut-greige: #8B8497; --brut-bordure: #E7DDF2; --brut-brun-noir: #17161C; --brut-brun-doux: #6B6675; --brut-brun-doux-sable: #615C6B; --brut-clay: #E51A55; --brut-clay-fonce: #C2154A; --brut-clay-texte: #C7134D; --brut-clay-tres-clair: #FDE6EE; --brut-degrade-haut: #F4EDFA; --brut-degrade-bas: #FDECF2; --brut-encre: #131318; --couleur-voile: rgba(30, 20, 45, 0.44); --ombre-xs/sm/md/lg: rgba(70, 45, 105, …) 0.06 / 0.08 / 0.10 / 0.14 --ombre-accent: 0 6px 18px rgba(229, 26, 85, 0.26); (succès et erreur sont INCHANGÉS entre les deux palettes : #0F7538 / #C8102E.) ========================================================================== */ /* ============================================================================= ARCHIVE 2 — PALETTE « SOMBRE + TURQUOISE » (référence FitPRO, d'origine) ----------------------------------------------------------------------------- Conservée pour mémoire. Retour arrière : recopier ces valeurs sur les --brut-* du bloc :root ci-dessus, remettre `color-scheme: dark` dans 02-base.css et les à #0B0C0E. Ne PAS décommenter tel quel : ce bloc ne redéfinit que les valeurs brutes. --brut-ivoire: #0B0C0E; --brut-blanc: #17191C; --brut-sable: #212429; --brut-greige: #5B616B; --brut-bordure: #2B2E34; --brut-brun-noir: #F5F7FA; --brut-brun-doux: #9BA1AB; --brut-brun-doux-sable: #A7ADB6; --brut-clay: #2DD4BF; --brut-clay-fonce: #4FE0CE; --brut-clay-texte: #2DD4BF; --brut-clay-tres-clair: #123330; --brut-succes: #45C980; --brut-succes-fond: #12261C; --brut-erreur: #E5606A; --brut-erreur-fond: #2A1417; --couleur-voile: rgba(0, 0, 0, 0.62); --ombre-xs/sm/md/lg: noires (0.40 / 0.45 / 0.50 / 0.55) --ombre-accent: 0 6px 18px rgba(45, 212, 191, 0.28); ========================================================================== */