/* * Tokens de design extraits du fichier Figma "TDB final desktop + smartphone * (13.07.2026)" via le serveur MCP Figma Dev Mode (get_variable_defs sur les * frames homepage, dashboard BO et mon compte BO, desktop + smartphone). * * Breakpoints déduits des frames Figma réellement fournies : smartphone 390px, * desktop 1920px. Aucun frame "tablette" n'était présent dans le fichier — le * point de rupture intermédiaire (960px) est donc une interpolation de bon * sens, pas une valeur vérifiée contre un frame Figma dédié (voir README). * * Police : Figma utilise "Google Sans Flex", une police propriétaire Google * non redistribuable pour un site tiers. Substituée par "Plus Jakarta Sans" * (Google Fonts, licence OFL, auto-hébergeable), la correspondance visuelle la * plus proche pour une géométrique arrondie de ce type — voir README. */ :root { /* Couleurs de marque (variables Figma "TDB orange", "TDB noir anthracite", "TDB Gris box") */ --color-primary: #FC9728; /* TDB orange */ --color-primary-hover: #E38519; /* dérivée : ~10% plus sombre, pas de variable hover dédiée dans Figma */ --color-ink: #212121; /* TDB noir anthracite — texte, header, footer */ --color-ink-strong: #000000; /* second ton du groupe "TDB noir anthracite" — fonds pleins (footer bar, cards sombres) */ --color-surface: #ffffff; --color-surface-muted: #F7F7F7; /* TDB Gris box — fonds de card/formulaire */ --color-text: #212121; --color-text-muted: #7C7C7C; /* Gris info secondaire */ --color-border: #ECECEC; /* Filet neutre (hairlines, contours de repli) */ /* Couleurs de statut des bons (variables Figma vues sur le dashboard et Mon compte BO) */ --color-status-validated: #99D7A3; /* Vert validé */ --color-status-pending: #FFD752; /* Jaune à valider */ --color-status-expired: #FD6060; /* Rouge échu */ /* MOD-IA 2026-09-02 : #FD6060 donne un contraste de 2,6:1 sur fond blanc — illisible en texte. Ce ton foncé (5,6:1) sert au message d'un champ en erreur (voir template-parts/ui/champ.php) ; le filet et les fonds de badge gardent --color-status-expired tel quel. Pas de variable Figma associée : dérivé pour l'accessibilité, à documenter dans la charte. */ --color-status-expired-text: #C0332F; --color-status-inactive: #DF87F5; /* Violet non activé */ --color-status-depleted: #BEBEBE; /* Gris épuisé */ /* MOD-IA 2026-09-08 : tons SATURÉS du vert et du rouge de statut, pour les aplats qui portent un pictogramme blanc. Les trois couleurs de statut ci-dessus sont des PASTELS : elles ont été relevées sur des badges où elles servent de fond à un texte NOIR. Posées en aplat sous un glyphe blanc — c'est le cas de la pastille de l'écran « Valider un bon » — elles tombent à 1,7:1 (vert) et 2,6:1 (rouge) : le pictogramme y disparaît, et le verdict ne se lit plus d'un coup d'œil au comptoir. Ces deux tons foncés donnent 5,2:1 (vert) et 5,6:1 (rouge) sous du blanc, tout en restant les mêmes teintes. --color-status-expired-text portait déjà ce rôle pour le rouge : il est repris tel quel plutôt que dédoublé. Pas de variable Figma associée : dérivés pour l'accessibilité. */ --color-status-validated-strong: #2E7D46; /* vert validé, ton foncé */ --color-status-expired-strong: #C0332F; /* = --color-status-expired-text */ /* Fonds et filets teintés des mêmes deux états — surface d'un panneau de verdict, là où le badge se contente d'une pastille. */ --color-status-validated-surface: #F1F9F3; --color-status-validated-line: #CBE7D3; --color-status-expired-surface: #FEF4F4; --color-status-expired-line: #F9D2D2; /* Survols/animations — extraits du prototype Figma (node 1:10, table des réactions lue via le Plugin API : trigger ON_HOVER → CHANGE_TO / Smart Animate). Le fichier n'utilise qu'UN seul ressort, à deux vitesses : - masse 1 / raideur 100 / amortissement 60/4 = 15 → ~1,022 s (cartes "étapes", bouton panier, bouton mascotte du footer) - masse 1 / raideur 1600 / amortissement 60 → ~0,2555 s (CTA "bouton rejoindre") Les deux partagent le même taux d'amortissement (ζ = 0,75), donc la même courbe normalisée : une seule easing suffit, seule la durée change. --ease-spring est cette courbe, échantillonnée en 25 points depuis l'équation du ressort amorti x(t) = 1 − e^(−ζω₀t)·( cos(ω_d t) + (ζω₀/ω_d)·sin(ω_d t) ) avec ω₀ = 10 rad/s et ω_d = 6,614 rad/s. Le léger dépassement (+2,8 %) est celui du ressort Figma, pas un ajout décoratif. */ --ease-spring: linear( 0 0%, 0.073 4.17%, 0.234 8.33%, 0.4201 12.5%, 0.5949 16.67%, 0.7407 20.83%, 0.8519 25%, 0.9301 29.17%, 0.9807 33.33%, 1.0099 37.5%, 1.024 41.67%, 1.0283 45.83%, 1.0268 50%, 1.0225 54.17%, 1.0173 58.33%, 1.0122 62.5%, 1.0079 66.67%, 1.0046 70.83%, 1.0023 75%, 1.0007 79.17%, 0.9998 83.33%, 0.9994 87.5%, 0.9992 91.67%, 0.9995 95.83%, 1 100% ); --duration-spring: 1.022s; /* ressort souple (raideur 100) */ --duration-spring-snap: .256s; /* ressort raide (raideur 1600) */ /* Repli pour les transitions hors prototype (aucune réaction Figma associée). */ --ease-tdb: cubic-bezier(0.22, 1, 0.36, 1); --ease-tdb-snap: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-tdb: .4s; --duration-tdb-snap: .2s; /* Dégradé orange (badges "Promotion" / bandeau footer) — Figma expose la variable "degrade orange" mais get_variable_defs ne renvoie pas ses arrêts (variable de type gradient). Stops approximés visuellement depuis les captures d'écran : à vérifier en Dev Mode Figma avant mise en prod. */ --gradient-orange: linear-gradient(135deg, #FFB65C 0%, #FC9728 100%); /* Typographie — substitution de "Google Sans Flex" par "Plus Jakarta Sans" */ --font-heading: "Plus Jakarta Sans", "Google Sans Flex", system-ui, sans-serif; --font-body: "Plus Jakarta Sans", "Google Sans Flex", system-ui, sans-serif; /* Échelle typographique desktop (styles Figma "Desktop/...") */ --text-hero-size: 4.875rem; /* 78px — Desktop/accroche box (usage: gros chiffre/accroche) */ --text-hero-lh: 1.026; /* 80/78 */ --text-h1-home-size: 2.5rem; /* 40px — Desktop/Titre H1 homepage */ --text-h1-home-lh: 1.2; /* 48/40 */ --text-h1-size: 2rem; /* 32px — Desktop/Titre H1 */ --text-h1-lh: 1.1875; /* 38/32 */ --text-h2-size: 1.5rem; /* 24px — Desktop/Titre H2 */ --text-h2-lh: 1.166; /* 28/24 */ --text-h3-size: 1.125rem; /* 18px — Desktop/Titre H3 */ --text-h3-lh: 1.222; /* 22/18 */ --text-h4-size: 0.875rem; /* 14px — Desktop/H4 */ --text-h4-lh: 1.428; /* 20/14 */ --text-h5-size: 0.75rem; /* 12px — Desktop/H5 */ --text-h5-lh: 1.5; /* 18/12 */ --text-kicker-size: 1rem; /* 16px — Desktop/Texte chapeau */ --text-kicker-lh: 1.5; /* 24/16 */ --text-body-size: 1rem; /* 16px — Desktop/texte commun */ --text-body-lh: 1.625; /* 26/16 */ --text-card-desc-size: 0.875rem; /* 14px — Desktop/texte box descriptif */ --text-card-desc-lh: 1.571; /* 22/14 */ --text-card-sector-size: 0.875rem; /* 14px — Desktop/texte box secteur activité */ --text-card-place-size: 0.875rem; /* 14px — texte box lieu */ --text-card-place-lh: 1.571; /* 22/14 */ --text-caption-size: 0.75rem; /* 12px — Desktop/texte box légende */ --text-caption-lh: 1.5; /* 18/12 */ --text-button-size: 0.875rem; /* 14px — Desktop/bouton */ --text-button-lh: 1.285; /* 18/14 */ /* Poids (les styles Figma nomment "SemiBold/Medium/Regular/Light" plutôt que des chiffres) */ /* MOD-IA 2026-09-21 : story G1 — compensation de la substitution de police. Le relevé Figma (docs/feedback_20260921/00-RELEVE-FIGMA.md §2) confirme que la maquette est en 600 (titres) et 500 (boutons/labels) : les graisses du thème étaient donc déjà conformes. Mais Plus Jakarta Sans, qui remplace la police propriétaire Google Sans Flex (voir fonts.css), a des fûts plus fins à graisse nominale égale : le client perçoit les textes comme trop légers. On monte donc d'un cran les deux poids porteurs — écart volontaire à la maquette, assumé pour retrouver la densité visuelle du Figma. La fonte est variable 300→700 (fonts.css) : aucun fichier ni requête en plus. Retour en arrière = redécommenter les deux valeurs d'origine ci-dessous. Les noms des tokens restent ceux des styles Figma (ils désignent le rôle, plus la valeur numérique). Regular et Light sont laissés intacts : le corps de texte en 400 ne fait pas partie du retour client. ANCIEN CODE : --weight-semibold: 600; --weight-medium: 500; */ --weight-semibold: 700; --weight-medium: 600; --weight-regular: 400; --weight-light: 300; /* Tracking : tous les styles Figma partagent un tracking de -1 (letter-spacing) */ --tracking-tight: -0.01em; /* Espacements — échelle usuelle en attendant confirmation frame par frame via get_design_context (auto-layout gap/padding). Affinée au fil de l'implémentation de chaque gabarit. */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* Rayons relevés dans le fichier Figma : 10px est le rayon standard des surfaces d'interface (selects, boutons, champs, cartouches, blocs, vignettes de bon), 5px celui des petites pastilles (badge "Promotion", icônes sociales), 20px celui des grandes boîtes (carte commerçant, panneau de filtres, donut). Le 8px utilisé auparavant ne correspondait à aucune valeur du design. */ --radius-sm: 10px; --radius-badge: 5px; --radius-card: 20px; --radius-pill: 999px; --shadow-card: 0 4px 12px rgba(33, 33, 33, .08); --shadow-popover: 0 8px 24px rgba(33, 33, 33, .12); /* Grille — la frame "elements" du fichier Figma fait 1440px de CONTENU (centrée dans un canvas desktop de 1920px) : les cartes "étapes" (463 ×3 + 24 de gap), les vignettes commerçant (341,24 ×4 + 25 de gap) et le retrait de 122px du footer se mesurent tous sur ces 1440px. Comme .container ajoute 24px de padding de chaque côté, le maximum doit valoir 1440 + 48 pour que le contenu retombe exactement sur la maquette. */ --container-max: 1488px; /* MOD-IA 2026-09-22 : MD10 — échelle de largeurs SÉMANTIQUES pour les champs de saisie du back-office. Le retour client était « affiner les longueurs des champs de texte dans les détails et les informations bancaires (ex. NPA) » : un NPA à quatre chiffres occupait toute la colonne, pendant qu'un champ PassVal voisin restait à la largeur native du navigateur. La largeur d'un champ doit parler de la DONNÉE attendue, pas de la place disponible. Quatre paliers suffisent ; ils se posent en `max-width`, jamais en `width`, pour que le champ reste fluide sous son plafond et repasse en pleine largeur en mobile. */ --champ-court: 140px; /* NPA, numéro, quantité */ --champ-moyen: 260px; /* localité, canton, téléphone, date */ --champ-long: 460px; /* adresse, IBAN, e-mail, URL */ } /* Échelle typographique smartphone (styles Figma "phone/...") — appliquée sous le breakpoint mobile, voir style.css. */ :root { --text-hero-size-mobile: 2.125rem; /* 34px — phone/accroche box */ --text-hero-lh-mobile: 1.117; /* 38/34 */ --text-h1-home-size-mobile: 1.5rem; /* 24px — phone/titre H1 homepage */ --text-h1-home-lh-mobile: 1.25; /* 30/24 */ --text-h2-size-mobile: 1.125rem; /* 18px — phone/H2 */ --text-h2-lh-mobile: 1.222; /* 22/18 */ --text-card-sector-size-mobile: 0.75rem; /* 12px — phone/texte box secteur */ --text-card-place-size-mobile: 0.75rem; /* 12px — phone/texte box lieu */ --text-caption-size-mobile: 0.625rem; /* 10px — phone/texte box légende */ --text-caption-lh-mobile: 1.4; /* 14/10 */ --text-button-size-mobile: 0.8125rem; /* 13px — phone/bouton */ }