/* ===================================================================== tokens.css — le pont entre le fichier Figma et le code. Les noms reprennent ceux des variables et des rampes de texte du fichier Figma « Clinique Dentaire Luong », page 03 SYSTEME : repro/… valeurs mesurees sur le site actuel, reproduites telles quelles v2/… valeurs de la refonte, bureau v2/sm/… palier unique de la refonte sous 768 px Une seule source : ce fichier est copie tel quel dans le /css de chacune des quatre racines. Changer une valeur ici la change dans les quatre. RESERVE : les rampes v2/ et v2/sm/ ci-dessous sont construites depuis la rampe repro/ et les paliers decides en maquette. Le serveur Figma MCP de ce poste ne repond qu'a une selection faite a la main dans l'editeur ; les 33 styles de texte n'ont donc pas pu etre relus programmatiquement au moment d'ecrire ce fichier. A rapprocher des styles v2/ du fichier Figma avant la mise en ligne officielle. ===================================================================== */ :root { /* --------------------------------------------------------------- repro/ — palette mesuree sur le site actuel Quatre teintes vert/turquoise/bleu cohabitent pour un role apparemment unique. C'est l'etat du site. --------------------------------------------------------------- */ --repro-turquoise: #02B8BF; /* carte 1, titre « Notre clinique », nav active, bouton */ --repro-bleu: #1990CE; /* carte 2, filets, chevron */ --repro-vert: #07BC83; /* carte 3, filets */ --repro-vert-clair: #38D1A1; /* titres « Notre equipe » et « Nous joindre », et rien d'autre */ --repro-bleu-fonce: #116089; /* ligne telephone de l'en-tete */ --repro-blanc: #FFFFFF; --repro-gris-bande: #F2F2F2; /* bande de navigation, fond du pied de page */ --repro-gris-souscouche: #FAFAFA; /* sous-couche des deux bandes photo */ --repro-texte-fort: #333333; --repro-texte: #666666; /* Les trois cartes du heros : couleurs de marque a 60 % d'opacite, posees sur la photo. Fonds transparents, mesures. */ --repro-carte-1: rgba(2, 184, 191, .6); --repro-carte-2: rgba(25, 144, 206, .6); --repro-carte-3: rgba(7, 188, 131, .6); /* repro/ — typographie. Aucun text-transform nulle part sur le site : les capitales sont saisies en dur dans le contenu. */ --repro-police-titre: 'Nunito Sans', 'Trebuchet MS', sans-serif; /* subst. Avenir LT 85 Heavy */ --repro-police-legere: 'Nunito Sans', 'Trebuchet MS', sans-serif; /* subst. Avenir LT 35 Light */ --repro-police-courante: 'Open Sans', 'Segoe UI', sans-serif; --repro-titre-section: 60px; --repro-titre-carte: 30px; --repro-sous-titre: 25px; /* FR. EN : 24 px, quatrieme divergence FR/EN */ --repro-sous-titre-en: 24px; --repro-service: 24px; --repro-nom: 24px; --repro-pied-services: 20px; --repro-telephone: 19px; --repro-courant: 17px; --repro-fonction: 16px; /* EN : 15 px */ --repro-fonction-en: 15px; --repro-nav: 15px; --repro-champ: 13px; --repro-interligne-courant: 27.2px; --repro-interlettrage-carte: 1.5px; --repro-interlettrage-tel: 0.95px; /* repro/ — grille. Mesuree a 1425 px de largeur de rendu. */ --repro-canevas: 1425px; --repro-colonne: 980px; --repro-marge: 222px; /* EN : 223 px, effet de rendu */ --repro-gouttiere: 16px; /* --------------------------------------------------------------- v2/ — refonte. Couleurs corrigees, contrastes recalcules a la main. Les valeurs d'origine echouaient toutes aux seuils WCAG AA. --------------------------------------------------------------- */ --v2-turquoise: #017B80; /* etait #02B8BF — 5,06:1 sur blanc, 4,52 sur #F2F2F2 */ --v2-bleu: #167DB3; /* etait #1990CE — 4,55:1 ; ATTENTION : 4,06 sur #F2F2F2 */ --v2-vert: #05875E; /* etait #07BC83 — 4,53:1 */ --v2-vert-clair: #248567; /* etait #38D1A1 — 4,54:1 sur blanc, 4,35 SEULEMENT sur #FAFAFA : a n'utiliser que sur blanc */ --v2-surface: #FFFFFF; --v2-surface-douce: #F6F8F8; /* v2/gris-f6 */ --v2-surface-bande: #F2F2F2; /* v2/ardoise-900, alias fond/contraste. Blanc dessus : 14,71:1. ATTENTION, deux interdits mesures sur cette surface : --v2-turquoise dessus tombe a 2,90:1, sous le seuil 3:1 de WCAG 1.4.11. Les cartes de specialite sont des LIENS : elles restent sur blanc. --v2-focus dessus tombe a 2,38:1. Tout focus pose sur cette surface prend un contour blanc, jamais --v2-focus. */ --v2-surface-contraste: #0B2C36; /* Seul contour des cinq champs du formulaire, des deux selecteurs de langue et du bouton de menu : il doit franchir 3:1 (WCAG 1.4.11) sur toutes les surfaces ou il apparait. L'ancienne valeur #D7DEE1 tombait a 1,36:1 sur blanc et 1,22 sur #F2F2F2 — un champ dont la bordure est invisible n'est pas un champ. */ --v2-bordure: #78878E; /* v2/gris-78 · 3,71:1 blanc · 3,48 #F6F8F8 · 3,32 #F2F2F2 */ /* Filet purement decoratif, sans role d'interface : il n'a pas a franchir 3:1 et ne doit jamais servir a dessiner un champ. */ --v2-filet: #D7DEE1; /* texte/principal. Aligne sur la variable Figma, qui vaut #1F2328 ; le code portait #1F2A2E. Ecart reel, sans consequence de contraste (15,80 contre 14,70:1). Seule la rampe v2/ bouge : les jetons repro/ sont geles. */ --v2-texte: #1F2328; /* 15,80:1 sur blanc · 14,82 sur #F6F8F8 */ --v2-texte-doux: #4A5A60; /* 7,19:1 sur blanc · 6,74 sur #F6F8F8 */ --v2-focus: #B5300B; /* 6,19:1 sur blanc. Jamais sur --v2-surface-contraste : 2,38 */ /* Statut d'ouverture — les quatre etats. Posés sur BLANC, jamais sur #F6F8F8, ou --v2-statut-ouvert tomberait a 4,25:1. */ --v2-statut-ouvert: #05875E; /* 4,53:1 sur blanc */ --v2-statut-alerte: #8A5A00; /* 5,93:1 sur blanc — « ferme bientot » et « ferme le midi » */ --v2-statut-ferme: #5A6169; /* 6,27:1 sur blanc */ /* Les cartes du heros passent en fonds OPAQUES : le texte blanc ne repose plus sur une photographie dont la luminance varie. */ --v2-carte-1: var(--v2-turquoise); --v2-carte-2: var(--v2-bleu); --v2-carte-3: var(--v2-vert); /* v2/ — typographie, bureau */ --v2-police-titre: 'Nunito Sans', 'Trebuchet MS', sans-serif; --v2-police-courante: 'Open Sans', 'Segoe UI', sans-serif; --v2-display: 56px; /* titre de page */ --v2-h2: 40px; /* titre de section */ --v2-statut: 28px; /* v2/statut-28 — la phrase du statut d'ouverture */ --v2-h3: 26px; /* nom de praticien, titre de carte */ --v2-carte: 28px; /* les deux lignes des cartes du heros */ --v2-lead: 20px; --v2-service: 20px; --v2-corps: 18px; --v2-petit: 15px; --v2-etiquette: 14px; --v2-interligne-serre: 1.15; --v2-interligne: 1.6; /* v2/ — espacements */ --v2-espace-4: 4px; --v2-espace-8: 8px; --v2-espace-12: 12px; --v2-espace-16: 16px; --v2-espace-24: 24px; --v2-espace-32: 32px; --v2-espace-40: 40px; --v2-espace-48: 48px; --v2-espace-64: 64px; --v2-espace-80: 80px; --v2-espace-96: 96px; /* v2/ — geometrie */ --v2-colonne: 1120px; --v2-gouttiere: 24px; --v2-rayon: 10px; --v2-rayon-sm: 6px; --v2-cible: 48px; /* cible tactile minimale */ --v2-ombre: 0 1px 2px rgba(31, 42, 46, .08), 0 8px 24px rgba(31, 42, 46, .07); } /* --------------------------------------------------------------- v2/sm/ — palier typographique UNIQUE sous 768 px. Pas de valeur orpheline : chaque ligne ci-dessous redefinit un jeton v2/ deja declare plus haut, jamais un nom nouveau. --------------------------------------------------------------- */ @media (max-width: 767px) { :root { --v2-display: 34px; --v2-h2: 28px; --v2-statut: 22px; /* v2/sm/statut-22 */ --v2-h3: 22px; --v2-carte: 22px; --v2-lead: 18px; --v2-service: 18px; --v2-corps: 17px; --v2-petit: 15px; --v2-etiquette: 14px; --v2-gouttiere: 16px; } }