/* ========================================================================= NOVA POTENTIEL · Design tokens Fidèles au Figma « Hole » (4gNny9z7au9UkfOINTvoIF) : géométrie, échelle typographique, rayons et flous sont repris tels quels. Seules les COULEURS changent. L'accent bronze du 14/08 a laissé la place au vert du logo (demande du 15/08) : les jetons s'appellent désormais --jade*. Correspondance avec la maquette : #d9fd76 lime vif → --jade (pastille claire, texte sombre dessus) #282828 encre → --ink #f5f5f5 surface → --surface #8d8d8d gris → --muted #cfcfcf gris clair→ --muted-dark #040607 noir → --night #363839 gris fonc→ --night-2 #064c37 forêt → --jade-deep (bandeau) #c2f96c lime bis → --jade (les deux limes sont fusionnés) ========================================================================= */ :root { /* --- Base noir & blanc --------------------------------------------------- Neutres purs : la page ne porte aucune teinte. Toute la couleur est réservée aux éléments actionnables (voir « Accents » plus bas). */ --ink: #141414; /* texte principal, nav, titres */ --paper: #FFFFFF; /* fond de page */ --card: #FFFFFF; /* nav, cartes, boutons pilule (posés sur photo) */ --surface: #F2F2F2; /* fond des pastilles et blocs en creux */ --line: #E4E4E4; /* filets sur fond clair */ --wordmark: #DCDCDC; /* lettrage géant du pied de page */ /* --- Texte secondaire ---------------------------------------------------- */ --muted: #6F6F6F; /* paragraphes secondaires sur clair, 5,3:1 */ --muted-dark: #B4B4B4; /* texte secondaire sur fond sombre, 9,6:1 */ /* --- Accents : réservés à ce qui se clique ------------------------------- Verts relevés sur le casque du logo. Le vif sert d'aplat (pastilles, surlignage) et porte du texte encre, 9,6:1 ; il tient aussi comme texte sur fond nuit, 10,1:1. Le profond est réservé au texte et aux points sur blanc, où le vif ne passerait pas (1,9:1) ; il y tient à 5,9:1. */ --jade: #67D42F; /* pastille des boutons, porte du texte SOMBRE */ --jade-deep: #14742A; /* liens et points sur fond clair */ --jade-lt: #7FE04A; /* accent sur fond sombre */ /* --- Nuit ---------------------------------------------------------------- */ --night: #0E0E0E; /* section articles, newsletter, bandeau */ --night-2: #262626; /* média sur fond nuit */ --on-night: #F2F2F2; /* texte sur fond nuit */ /* --- Voiles & verre (repris à l'identique de la maquette) ---------------- */ --veil: transparent; /* calque sur les photos */ /* Le voile noir à 20 % est retiré (demande du 15/08). Les calques qui le portaient restent en place (.stack, .rubric__media, .tile) : il suffit de redonner une valeur ici pour le rétablir partout d'un coup. Le hero, lui, garde son propre dégradé montant, indépendant de ce jeton. */ --glass-from: rgba(255, 255, 255, .30); --glass-to: rgba(255, 255, 255, .05); --glass-to-lg: rgba(255, 255, 255, .10); --glass-edge: rgba(255, 255, 255, .80); /* Traitement unique des photos : noir et blanc franc, sans virage. C'est ce qui absorbera les futurs visuels du client sans casser l'unité, et ce qui laisse la couleur aux seuls boutons. */ /* Les photos sont en couleur (décision du 15/08, le grayscale a sauté). Il reste un étalonnage léger, volontairement discret : c'est lui qui donnera de l'unité aux vrais visuels du client, qui arriveront d'origines et de rendus très différents. Mettre `none` pour n'avoir aucun traitement. */ --img-filter: saturate(.94) contrast(1.04); /* --- Polices -------------------------------------------------------------- Depuis le 15/08 les rôles sont inversés : l'Urbanist du bandeau porte tout le texte courant, l'Inter est reculée sur les seuls titres. */ --f-sans: 'Inter', system-ui, -apple-system, sans-serif; /* pile de repli */ --f-text: 'Urbanist', var(--f-sans); /* texte courant, nav, boutons */ /* Titres : Helvetica Neue, la police du titre relevée sur la maquette Runova (nœud 0:299). Elle ne se licencie pas pour le web, elle ne peut donc être que demandée, jamais servie : les Mac et les iPhone l'ont installée et l'afficheront, les autres non. D'où le repli hébergé juste derrière, Switzer, néo-grotesque libre de la même famille d'esprit, en 400 et 500. Conséquence à connaître : le rendu diffère selon la machine du visiteur. Braah One, la police d'affichage du même fichier Figma, a été essayée puis écartée le 15/08. --fw-title vaut 400 comme le titre de 48px du relevé ; --fw-title-sm vaut 500, la graisse que ce même relevé donne à ses petits titres (nom de produit, nom de personne). Aucune graisse en dur dans les règles de titre : tout passe par ces deux jetons. */ --f-title: 'Helvetica Neue', 'Switzer', var(--f-sans); --fw-title: 400; --fw-title-sm: 500; --f-display: var(--f-text); /* guillemet des citations */ /* --- Échelle typographique (valeurs desktop du Figma) --------------------- */ /* --t-marquee (67px) est parti avec le bandeau défilant, retiré le 16/08. */ /* Échelle des titres calée sur les crans du relevé Runova là où il en donne un : 48px pour un titre de section (nœud 0:300), 36 le cran en dessous, 24 les petits titres. Le hero et le titre d'article n'y ont pas d'équivalent en grotesque, la maquette source y mettant sa police d'affichage : leurs deux valeurs viennent de nos propres largeurs. */ /* Cran libre depuis le 16/08 : le hero ne porte plus un slogan mais un titre d'article, et il a pris son propre cran, --t-h1-une, le 19/08. Conservé, c'est le haut de l'échelle. */ --t-h1: 72px; /* Titre d'article, porté par la une de l'accueil et par le H1 de la page article. Il ne partage plus le cran du hero (demande du 15/08 : trop gros) : ce n'est pas une affiche mais un titre de lecture, en bas de casse. Descendu de 56 à 48px le 18/08. Il rejoint donc le corps des titres de section : sur l'accueil la une s'en distingue par le blanc sur photo, non plus par la taille. Remonter à 56 rétablit la marche d'escalier. */ --t-h1-art: 48px; /* Titre de la une, séparé de --t-h1-art le 19/08, demande du client : à 48px sur deux lignes il occupait la moitié de la hauteur de la photo. Il reste d'un cran au-dessus des titres de section, passés à 36px, pour garder la hiérarchie de l'accueil. Le H1 de la page article, lui, garde --t-h1-art : là-bas le titre est seul en haut d'une page blanche, il porte la page. */ --t-h1-une: 40px; /* Titres de section, et titre des rubriques sur l'accueil. Descendus de 48 à 36px le 19/08, demande du client : à 48px, un titre de rubrique posé sur une grille de cartes dont les titres tiennent 20px pesait plus que la grille qu'il annonce. Ils rejoignent le cran de --t-h2-art, les deux valeurs coïncident donc : elles restent deux jetons parce que l'un règle l'annonce d'une section et l'autre un sous-titre dans un article, et qu'ils peuvent redivorcer. Remonter à 48 rétablit l'état validé le 16/08. */ --t-h2: 36px; /* Titres de carte, descendus de 24 à 20px le 18/08 : à 24px sur une carte de 384px, le titre écrasait son chapô à 17px. Même cran sur toutes les largeurs depuis, d'où le retrait de la surcharge sous 1024px. */ --t-h3: 20px; /* Titre de section dans le corps d'un article (Figma 16:182). Il tombe entre --t-h2 et --t-h3, d'où son propre cran : au corps de --t-h2 il concurrençait le titre de l'article, à celui de --t-h3 il ne se distinguait plus du texte. */ --t-h2-art: 36px; --t-lead: 20px; /* Inter 400, chapô */ /* 17px et non 16 : l'Urbanist a une hauteur d'x de 0,500 em contre 0,546 pour l'Inter, soit 8 % de moins à corps égal. Repasser à 16px si le texte doit coller au plancher du Figma. */ --t-body: 17px; /* Urbanist 400, texte courant */ /* --- Rayons (identiques au Figma) ---------------------------------------- */ --r-inner: 16px; /* carte imbriquée */ --r-chip: 20px; /* badge / chip pilule */ --r-card: 24px; /* grandes cartes, panneau flottant */ --r-pill: 40px; /* barre de nav, boutons pilule */ --r-round: 100px; /* pastilles circulaires 44 / 56 */ --r-stat: 10px; /* barre statistique du hero */ /* --- Flous (identiques au Figma) ----------------------------------------- */ --blur-sm: 10px; /* barre statistique */ --blur-md: 20px; /* bouton secondaire du hero */ --blur-lg: 30px; /* voile texte des cartes bento */ --blur-xl: 40px; /* panneau flottant du hero */ --blur-2xl: 50px; /* barre de navigation */ /* --- Espacement (base 4, valeurs relevées) ------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; /* --s-12 est la gouttière du corps scindé de la page article (Figma 16:145), entre les 40 et les 60 déjà relevés. */ --s-10: 40px; --s-12: 48px; --s-15: 60px; --s-20: 80px; /* --- Grille --------------------------------------------------------------- */ --grid-max: 1280px; --grid-gutter: 80px; --grid-gap: 24px; /* Bento : 522 + 24 + 355 + 24 + 355 = 1280 */ --bento-lead: 522fr; --bento-side: 355fr; /* --- Contrôles ------------------------------------------------------------ */ --ctl-nav-h: 80px; --ctl-btn: 44px; --ctl-btn-lg: 56px; --ctl-btn-pad: 6px; } @media (max-width: 1023px) { :root { --t-h1: clamp(32px, 6.6vw, 72px); --t-h1-art: clamp(27px, 4.8vw, 48px); --t-h1-une: clamp(24px, 4vw, 40px); --t-h2: clamp(24px, 3.8vw, 36px); --t-h2-art: clamp(24px, 3.8vw, 36px); /* --t-h3 ne descend plus ici : ses 20px valent désormais sur toute largeur. */ --t-lead: 18px; --grid-gutter: 40px; } } @media (max-width: 767px) { :root { --grid-gutter: 20px; --s-15: 40px; --ctl-nav-h: 64px; } }