/* ========================================================= DESIGNER BY NATURE — 02. VARIABLES Source de vérité unique. Aucun composant ne code une couleur en dur : chaque surface (ivoire, noir, brun) redéfinit un jeu de tokens sémantiques, les composants ne lisent que ceux-là. Ajouter une surface ne demande donc jamais de retoucher un composant, et deux règles ne peuvent pas se disputer une couleur. ========================================================= */ :root { /* ---------- PALETTE BRUTE ---------- */ --noir: #11110F; /* noir profond */ --ivoire: #F4F0E8; /* ivoire */ --beige: #D8CFC0; /* beige chaud */ --brun: #302820; /* brun foncé */ --or: #B69A68; /* doré discret */ --blanc-casse: #FAF8F3; /* blanc cassé */ /* Déclinaisons calculées — jamais improvisées ailleurs. */ --noir-2: #191815; /* strate au-dessus du noir */ --noir-3: #23211D; /* cartes, champs */ --or-clair: #C9B189; /* survol sur fond sombre */ /* Doré assombri, réservé au TEXTE sur surface claire. Le doré de marque plafonne à 2,4:1 sur ivoire — sous le seuil AA. Celui-ci tient 5,1:1 et garde la même température. Le doré de marque reste autorisé sur fond sombre (7,0:1) et en décoratif. */ --or-texte: #7E6237; /* Gris chauds — teintés brun, jamais neutres. */ --encre-clair: #5C554A; /* texte secondaire sur ivoire — 6,4:1 */ --encre-sombre:#A79E90; /* texte secondaire sur noir — 7,4:1 */ /* ---------- SURFACE PAR DÉFAUT : IVOIRE ---------- */ --surface: var(--ivoire); --fg: var(--noir); --muted: var(--encre-clair); --accent: var(--or-texte); /* doré lisible */ --accent-deco: var(--or); /* doré décoratif */ --rule: rgba(17, 17, 15, .14); --rule-fort: rgba(17, 17, 15, .30); --voile: rgba(17, 17, 15, .04); /* ---------- TYPOGRAPHIE ---------- */ /* DEUX GROTESQUES, PAS UN SERIF EN VUE La charte du client tient en deux caractères : Cabinet Grotesk pour les titres, Work Sans pour le texte. Le site quitte donc entièrement le registre serif éditorial dans lequel il avait été composé. La hiérarchie, elle, ne bouge pas : ce qui portait le serif porte maintenant `--display`, ce qui portait le sans porte `--sans`. Deux familles échangées, aucun rapport de force redessiné. DEUX FOURNISSEURS Cabinet Grotesk n'est pas sur Google Fonts — elle est distribuée par Fontshare. Deux feuilles, deux preconnect. Si Fontshare venait à ne pas répondre, la pile de repli désigne Work Sans : le site resterait composé dans une seule des deux familles plutôt que dans une grotesque système qui n'a rien à voir. AUCUN ITALIQUE DESSINÉ Cabinet Grotesk n'existe qu'en romain. Le mot penché au milieu d'une ligne droite — geste signature de la maquette — est donc composé en Work Sans italique, qui en a un vrai. LES GRAISSES La charte n'en retient que deux pour les titres, Regular et Medium : 400 et 500 sont seules chargées, et les 300 hérités des fontes précédentes sont remontés à 400 partout où `--display` est en jeu. Le texte garde ses 300 : Work Sans les dessine, et c'est ce qui tient la légèreté des paragraphes. */ --display: "Cabinet Grotesk", "Work Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --sans: "Work Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* Échelle fluide. Chaque palier interpole entre 375 px et 1440 px ; aucune media query n'est nécessaire pour la taille du texte. */ /* Le hero tient en DEUX lignes composées à la main. La pente est calée sur la plus longue — « QUI VOUS RESSEMBLENT » — pour qu'elle ne se replie jamais. ELLE SE MESURE SUR LA LIGNE RÉELLE, PAS SUR SON TEXTE Cette ligne est composée dans DEUX polices : « QUI VOUS » en Cabinet Grotesk, « RESSEMBLENT » en Work Sans italique, que Cabinet Grotesk n'a pas. Mesurée dans la seule police de titre elle tenait en 317 px pour 332 disponibles ; composée réellement elle en fait 334, et se repliait. Toute vérification de ce palier doit inclure l'italique. Deux points mesurés, donc : 26 px à 375 px d'écran (310 px pour 332 disponibles) et 80 px à 1440 (954 pour 1024). Le palier haut n'est pas poussé plus loin : à 84 px il ne restait que 22 px de marge, une marge qu'un simple changement de graisse effacerait. */ --fs-display: clamp(1.625rem, .437rem + 5.07vw, 5rem); /* hero */ --fs-h1: clamp(2.25rem, 1.2rem + 4.4vw, 4.5rem); --fs-h2: clamp(1.75rem, 1.1rem + 2.8vw, 3.25rem); /* titres section */ --fs-h3: clamp(1.375rem, 1rem + 1.6vw, 2rem); --fs-h4: clamp(1.125rem, .95rem + .8vw, 1.5rem); /* LE TEXTE COURANT VAUT SEIZE PIXELS, PARTOUT `--fs-small` portait 14 px et servait à presque tous les paragraphes du site — biographie, matières, promesses, services, étapes du processus, coordonnées. Il en porte maintenant 16 : c'est la taille de lecture, et elle ne dépend plus de la section où l'on se trouve. Le nom du token est resté le même pour ne pas réécrire quinze règles, mais il ne désigne plus « petit » — il désigne le texte courant. `--fs-lead` suit, pour la même raison : un chapô plus grand que le corps rouvrirait la hiérarchie qu'on vient de refermer. */ --fs-lead: 1.125rem; --fs-body: 1.125rem; --fs-small: 1.125rem; --fs-label: .6875rem; /* 11 px — surtitres, nav, boutons */ --fs-micro: .625rem; /* 10 px — dates, compteurs */ --lh-tight: 1.08; --lh-titre: 1.18; --lh-normal: 1.5; --lh-lisible: 1.85; /* corps de texte éditorial */ /* Interlettrage — le sans-serif ne vit qu'en capitales très espacées. */ --ls-display: .01em; --ls-titre: .02em; --ls-section: .18em; /* « À PROPOS », « PROJETS »… */ --ls-label: .22em; --ls-micro: .14em; /* ---------- ESPACEMENTS ---------- */ /* Base 8. Les paliers fluides servent aux respirations de section. */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem; --sp-10: 5rem; --sp-11: 6rem; --sp-12: 8rem; --sp-section: clamp(4.5rem, 2rem + 8vw, 10rem); /* padding vertical */ --sp-bloc: clamp(2.5rem, 1.5rem + 4vw, 5rem); /* entre sous-blocs */ --gouttiere: clamp(1.25rem, .8rem + 1.6vw, 2rem);/* colonnes de grille*/ --marge: clamp(1.25rem, .5rem + 3.6vw, 4.5rem); /* marge latérale */ /* ---------- GRILLE ---------- */ --colonnes: 12; --largeur-max: 1440px; --mesure: 64ch; /* longueur de ligne confortable */ /* ---------- TRAITS & FORMES ---------- */ --trait: 1px; --filet: 2.5rem; /* filet doré sous les surtitres */ --rayon: 0px; /* angles vifs — parti pris éditorial */ --rayon-rond: 50%; /* ---------- MOUVEMENT ---------- */ --ease-sortie: cubic-bezier(.22, 1, .36, 1); /* décélération douce */ --ease-doux: cubic-bezier(.65, .05, .36, 1); --ease-net: cubic-bezier(.4, 0, .2, 1); --dur-court: .28s; --dur-moyen: .55s; --dur-long: .9s; /* ---------- PLANS ---------- */ --z-fond: 0; --z-contenu: 1; --z-sticky: 50; --z-nav: 100; --z-menu: 150; --z-curseur: 200; --z-loader: 300; /* ---------- CHROME ---------- */ --h-nav: clamp(4.5rem, 4rem + 1.6vw, 6rem); } /* ========================================================= SURFACES Une classe pose un contexte de couleur complet. Les composants qu'elle contient s'y adaptent sans une seule règle descendante. ========================================================= */ .surface-ivoire { --surface: var(--ivoire); --fg: var(--noir); --muted: var(--encre-clair); --accent: var(--or-texte); --accent-deco: var(--or); --rule: rgba(17, 17, 15, .14); --rule-fort: rgba(17, 17, 15, .30); --voile: rgba(17, 17, 15, .04); } .surface-blanc { --surface: var(--blanc-casse); --fg: var(--noir); --muted: var(--encre-clair); --accent: var(--or-texte); --accent-deco: var(--or); --rule: rgba(17, 17, 15, .12); --rule-fort: rgba(17, 17, 15, .26); --voile: rgba(17, 17, 15, .03); } .surface-noire { --surface: var(--noir); --fg: var(--ivoire); --muted: var(--encre-sombre); --accent: var(--or); /* 7,0:1 — lisible ici */ --accent-deco: var(--or); --rule: rgba(244, 240, 232, .14); --rule-fort: rgba(244, 240, 232, .30); --voile: rgba(244, 240, 232, .04); } .surface-brune { --surface: var(--brun); --fg: var(--blanc-casse); --muted: var(--beige); --accent: var(--or-clair); --accent-deco: var(--or-clair); --rule: rgba(250, 248, 243, .16); --rule-fort: rgba(250, 248, 243, .32); --voile: rgba(250, 248, 243, .05); } /* Une surface applique toujours ses deux couleurs de base : sans fond explicite, un bloc transparent emprunterait celui du parent et le contraste calculé plus haut ne serait plus garanti. */ .surface-ivoire, .surface-blanc, .surface-noire, .surface-brune { background-color: var(--surface); color: var(--fg); }