/* ========================================================= TOKENS — variables :root du design system. Nommage : par RÔLE, jamais par couleur. « --color-primary » et non « --red » : le rôle survit à un changement de charte, le nom d'une couleur non. Rien dans ce fichier ne doit désigner une teinte, une saison ou une marque. Valeurs : identité Vibe2Meet. Les NOMS sont ceux du socle neutre et n'ont pas bougé — seules les teintes changent. C'est tout l'intérêt d'un nommage par rôle : reposer une charte ne demande de toucher qu'à ce fichier. Direction 2026 : vert profond, ivoire, sauge, lagon pâle et terracotta. Le rose historique du logo reste un signe de reconnaissance, mais ne colore plus l'ensemble de l'interface. ========================================================= */ :root { /* NOMS ALIGNÉS SUR LA RÈGLE DE CE FICHIER — « par RÔLE, jamais par couleur ». Onze jetons la violaient encore après le passage au pétrole, et deux mentaient franchement : --filet-lilas valait une sauge, --section-lilas un gris minéral. Renommés : --filet-lilas → --filet-doux · --accent-menthe → --accent-clair --section-blanc → --section-base · --section-page → --section-papier --section-nuit → --section-sombre les six teintes → --section-teinte-1..6, numérotées et non nommées : un rang survit à un changement de charte, un nom de couleur non. Les classes .ui-fond-* ont suivi. SEULE EXCEPTION VOULUE : --color-brand-pink, qui désigne exprès la teinte exacte du logo. Un jeton dont le rôle EST de porter une couleur précise est le seul cas où la nommer se justifie. */ /* ENCRE rendue à #152925 sur toute sa famille — --color-dark, --text, --shadow-color et --section-sombre — après un essai à #1b1529. Les quatre portent la même valeur et disent la même chose : n'en bouger qu'une ferait parler la page en deux encres, ce qui se voit tout de suite sur les titres. --color-dark-soft suit par son rapport habituel : #38524d. L'ACCENT, lui, RESTE au rose de marque #e20138 — seule l'encre revient en arrière. Il donne 3,77:1 sur blanc et 3,56 sur le papier : au-dessus des 3:1 exigés d'un GRAND texte, ce que sont les accents de titre, et sous les 4,5:1 du texte courant, où il ne doit donc pas descendre. */ /* ---- Couleurs de marque ---- Le vert pétrole devient la couleur d'action : il inspire confiance, dialogue naturellement avec les photographies et passe AA en texte comme en bouton. Le rouge-rose du logo n'est plus répété partout. */ /* Pétrole. Il sert AUSSI de couleur de texte, et c'est ce qui a permis de supprimer --color-primary-ink : ce jeton n'existait que pour rattraper un primaire trop clair pour du petit texte. Le pétrole passe AA seul, et largement — 7,84:1 sur blanc, 7,39 sur le papier comme sur la surface douce, 6,18 sur --surface-appuyee. L'ancienne réserve sur cette dernière surface (4,32, sous le seuil) est levée. VALEUR CHANGÉE : #085c6a → #325763. Le déplacement n'est pas dans la teinte — 189° contre 195°, l'œil ne fait pas la différence — mais dans la SATURATION, qui tombe de 86 % à 33 %. Le pétrole cesse d'être un cyan franc pour devenir un bleu-gris ardoise. Il gagne 7 points de clarté au passage et, contre toute attente, du contraste : 7,84 contre 7,64. */ --color-primary: #325763; /* pétrole — actions, liens et accents */ --color-primary-hover: #2d4f5a; /* pétrole profond — survol. −12 % du primaire, recalculé à chaque fois qu'il bouge : à valeur égale, les deux états se confondraient. */ /* Couleur PROPRE AUX TITRES, distincte de l'encre. Les titres puisaient jusqu'ici dans --color-dark et --color-dark-soft, jetons qui servent aussi de fonds sombres et de texte courant : les repeindre y aurait entraîné la bande sombre et les paragraphes. Un rôle, un jeton. 7,84:1 sur blanc, 7,39 sur le papier, 6,18 sur la teinte la plus soutenue — confortable partout. */ /* Fond des BOUTONS. Distinct de --color-primary, qui reste la couleur des liens, des repères et des accents fonctionnels : un bouton est un aplat, pas un trait, et il peut donc porter une teinte plus sombre sans que la lecture en pâtisse — 7,84:1 en libellé blanc. À SAVOIR — #043c4a est à UN NIVEAU de --color-titre (#053c49) : un de moins sur le rouge, un de plus sur le bleu. C'est le même écart invisible que celui qui vient d'être fondu du côté des roses. Les fondre demande de choisir laquelle des deux valeurs garder. */ --color-bouton: #325763; /* pétrole profond — fond des boutons */ --color-bouton-hover: #2d4f5a; /* −12 %, recalculé si le fond bouge */ /* PÉTROLE ARDOISE — une seule valeur pour les titres, les liens et les boutons. L'historique des essais, à conserver : #053c49 (29 % de clarté, jugé trop sombre), puis #0b7c8c (55 %, un cran trop clair), puis #085c6a à mi-chemin — tous trois des cyans très saturés, autour de 86 %. #325763 sort de cette série au lieu de la prolonger. La teinte ne bouge pratiquement pas ; c'est la saturation qui chute, de 86 % à 33 %. Là où les précédents cherchaient le bon NIVEAU d'un même cyan, celui-ci change de registre : un bleu-gris d'ardoise, plus sobre, moins « aqua ». 7,84:1 sur blanc, 7,84 en libellé blanc sur un aplat. Au-delà de #0b7c8c en revanche, la contrainte redevient dure : un pétrole plus clair ne peut plus recevoir de libellé blanc sur un bouton — mesuré, 3,59 à #00969e, 3,06 à #0aa2b8, 2,43 sur un cyan. LE LOGO NE SUIT PAS AUTOMATIQUEMENT. vibe2meet.png a été recoloré une fois vers #0b7c8c ; il porte donc encore cette teinte et doit être repris à la main sur #325763 pour que mot-symbole et interface coïncident. L'écart est désormais VISIBLE : #0b7c8c est un cyan à 86 % de saturation, #325763 une ardoise à 33 %. Tant que l'image n'est pas reprise, le mot-symbole est plus vif que tout ce qui l'entoure. Ce qui NE suit pas, et c'est voulu : --section-sombre reste profond. Sur un pétrole éclairci, l'accent rose de la bande tombe à 1,57:1 — invisible. */ /* Titre de HERO — un cran plus sombre que les autres titres. Le hero occupe un écran entier et son titre s'y lit en très grand ; il peut donc porter une teinte plus dense sans peser, là où un titre de carte à 20px y gagnerait en dureté. 12,03:1 sur blanc, 10,08 sur la teinte 7. Il sert aussi de fond à la barre utilitaire, qui coiffe la page et gagne à en être le point le plus sombre. L'ACCENT du titre n'en relève pas : il garde le rose, par sa propre règle. À DEUX NIVEAUX de --section-sombre (#053c49), la teinte de la bande sombre. Les deux disent « le pétrole le plus dense » mais dans deux contextes — un texte ici, un aplat là-bas. Les fondre est possible ; ce serait un choix, pas une correction. */ --color-titre-hero: #043c48; /* pétrole dense — titres de hero */ --color-titre: #325763; /* pétrole profond — tous les titres */ /* Le même pétrole à 10 % sur blanc. Rangé dans la famille des fonds de section parce que c'en est un — pied du dégradé du hero aujourd'hui, une bande demain — et numéroté comme ses six voisines : un rang survit à un changement de charte, pas un nom de couleur. Texte courant 12,78:1 · titre 10,05 · texte secondaire 4,90. */ --color-dark: #152925; /* encre végétale — titres et grands aplats */ --color-dark-soft: #38524d; /* encre adoucie — ombres et relief */ /* Le rose reste le signal identitaire de Vibe2Meet. Il ne remplace pas la couleur fonctionnelle : il signe les mots-clés, repères et détails. */ /* UN SEUL ROSE : #e20138. Les deux jetons ci-dessous portent désormais la MÊME valeur, et c'est le point de la manœuvre. Le système en comptait deux qui se voyaient : #ff204e pour les accents de titre et #cf1a3f pour tout ce qui s'écrit petit — CTA de l'en-tête et du hero, sur-titres, heures de carte, pastilles de date, badges de lieu. Deux roses côte à côte sur le même écran, l'un plus vif que l'autre, et rien dans la page pour expliquer pourquoi. Trois autres valeurs traînaient dans les commentaires (#ff214d, #ff214e, #e51d46), vestiges d'arbitrages successifs sur un écart d'un ou deux niveaux de bleu. La séparation avait une RAISON, et #e20138 la supprime. #ff204e ne tenait que 3,77:1 sur blanc : il ne pouvait ni porter de petit texte ni recevoir un libellé blanc, d'où la variante assombrie. #e20138 donne 4,89:1 dans les deux sens — texte sur blanc ET libellé blanc sur aplat. Il passe AA seul, donc il n'a plus besoin d'une doublure, donc il n'y a plus deux roses. Le jeton --color-brand-pink-ink survit pour ne pas réécrire les quarante règles qui l'appellent ; il ne vaut simplement plus rien d'autre que le rose de marque. Ce que #e20138 ne peut pas faire, et qui est traité ailleurs : — petit texte sur le voile rose : voir --color-brand-pink-soft ci-dessous ; — accent sur bande sombre : voir --accent-sur-sombre. */ --color-brand-pink-ink: #e20138; /* identique au rose de marque — voir ci-dessus */ --color-brand-pink: #e20138; /* le rose de marque */ /* Le voile passe de 10 % à 4 % du rose. Ce n'est pas un réglage esthétique : les pastilles qui écrivent en rose SUR ce voile — score de profil, étiquette « match » — sont du petit texte, et #e20138 est plus clair que l'ancienne encre #cf1a3f. Sur l'ancien voile #ffe8ee il tombait à 4,20:1. À 4 % le voile remonte la lecture à 4,57:1. Conséquence assumée : la pastille est plus pâle qu'avant. L'alternative aurait été de l'inverser — aplat #e20138 plein, libellé blanc, 4,89:1 — ce qui passe aussi mais change franchement le poids de l'élément. */ --color-brand-pink-soft: #fef5f7;/* rose à 4 % — voile et pastilles */ /* ---- Couleurs secondaires ---- La terracotta apporte de la chaleur sans concurrencer l'action. La sauge et la menthe sont réservées aux filets, états et petits accents : elles ne deviennent jamais de grands aplats saturés. */ /* LA PAIRE DE GENRE — la couleur des deux pastilles de taux sur les cartes de profil. Elles servent d'ENCRE, pas d'aplat : le pictogramme et le pourcentage s'écrivent dedans, sur une pastille blanche. Le rose est celui de la marque, sans variante. Le bleu DÉRIVE du #83deed demandé — même teinte (188°), même saturation (75 %), clarté ramenée de 72 % à 32 % : #83deed lui-même ne tient que 1,54:1 sur blanc, il ne peut pas porter de texte. C'est un aplat, pas une encre. Les deux valeurs sont appariées en POIDS et non seulement en teinte — 4,89:1 et 4,81:1 sur blanc — de sorte qu'aucun des deux taux ne paraisse plus important que l'autre. Elles ne portent jamais l'information seules : un lecteur daltonien ne les distingue pas. Chaque pastille porte un pictogramme, une phrase complète en texte masqué et un titre au survol. */ --genre-elle: #e20138; /* le rose de marque — un taux qui concerne une femme */ --genre-lui: #157d8f; /* #83deed assombri — un taux qui concerne un homme */ /* Les VOILES sous ces encres. Le rose n'a pas de valeur propre : il POINTE vers --color-brand-pink-soft, le voile que le site emploie déjà pour les étiquettes de match. Écrire #fef5f7 une seconde fois aurait rouvert exactement le genre d'écart qu'on vient de fermer sur les roses. Le bleu, lui, n'avait pas de voile : c'est le #83deed d'origine à 10 %. Les deux encres y tiennent 4,57 et 4,62 — au-dessus du seuil, mais la moitié de leur marge y passe. Ne pas soutenir ces fonds davantage. */ --genre-elle-voile: var(--color-brand-pink-soft); /* #fef5f7 */ --genre-lui-voile: #f3fcfd; /* #83deed à 10 % */ --color-secondary: #e8a67d; /* terracotta clair — aplats décoratifs */ --filet-doux: #aacbc1; /* filets et ornements discrets */ --accent-clair: #8dd7c5; /* menthe — accent lumineux */ /* ---- FONDS DE SECTION ---- La liste CLOSE des couleurs qu'une bande pleine largeur peut porter. Un seul préfixe, --section-, et il ne veut dire qu'une chose : ce jeton se pose en fond de section, jamais ailleurs. Pourquoi une famille à part plutôt que de puiser dans --color-* : les couleurs de marque ne sont pas interchangeables en fond : à pleine intensité elles tiennent sur une pastille, pas sur huit cents pixels de haut — la page se met à crier et le texte lutte. Les cinq figurent donc ici DÉJÀ ADOUCIES à 10 % sur blanc : c'est leur seule forme utilisable en bande, et la nommer évite qu'on aille chercher la version pleine. Elles ont d'abord été posées à 20 %, puis ramenées à 10 : sur une page devenue blanche par défaut, 20 % faisait une bande franche là où l'on ne cherchait qu'à séparer deux sections. --section-sombre ne suit pas cette règle — c'est un aplat plein, pas une teinte. Toutes portent du texte --text (Nuit) au-dessus de 13:1, sauf --section-sombre qui prend du texte clair. Aucune ambiguïté à lever au moment de s'en servir : le fond décide, le texte suit. */ --section-base: #ffffff; /* respiration */ --section-papier: #faf8f4; /* ivoire éditorial */ --section-teinte-1: #fce6eb; /* le rose #e20138 à 10 % — la plus chaude */ --section-teinte-2: #fef2f5; /* le rose #e20138 à 5 % — la plus pâle des chaudes */ --section-teinte-3: #e8f4f0; /* menthe pâle */ --section-teinte-4: #eef1ee; /* brume minérale */ --section-teinte-5: #e8f3f3; /* lagon pâle */ --section-teinte-6: #fdf0f3; /* le rose #e20138 à 6 % — halo rose */ /* La teinte FROIDE de la charte, et la plus employée : pied des deux dégradés (le hero d'accueil et les sections qui le reprennent) ET fond des sections FAQ. Elle valait #e6eced — le pétrole des titres à 10 % — tant qu'elle ne servait qu'aux dégradés, et une huitième teinte #e1eced (#045e6d à 12 %) avait été ajoutée à côté pour les FAQ. Les deux ne se distinguaient que de cinq unités sur le rouge : deux noms pour une même couleur, que rien n'aurait empêché de diverger au premier retouchage. Elles sont fondues sur #e1eced, et l'énumération redevient contiguë de 1 à 7. C'est le plafond qui laisse tout passer : à 20 % (#cddfe2) le sur-titre rose tombait à 3,94 et le mot accentué du titre à 2,74 — sous leurs seuils. Ici : sur-titre 4,50, accent 3,13, texte courant 12,81 (texte atténué 4,97), et 1,26 d'écart avec les cartes blanches, assez pour qu'elles s'en détachent. */ --section-teinte-7: #e1eced; /* #045e6d à 12 % — dégradés et FAQ */ --section-sombre: #053c49; /* encre végétale */ /* Fond du PIED DE PAGE : #043c48, exactement la valeur de --color-titre-hero. Écrit en ALIAS et non recopié en dur — deux tokens qui portent le même hex finissent toujours par diverger le jour où l'un est retouché, et c'est bien la même encre pétrole qui ouvre la page (titres de hero, barre utilitaire) et qui la ferme. Elle relie le haut et le bas d'un seul geste. */ --section-pied: var(--color-titre-hero); /* #043c48 — encre du pied de page */ /* ---- Couleurs d'état ---- Distinctes de --color-primary : une erreur ne doit jamais emprunter la couleur d'action, sous peine de se lire comme un bouton. Valeurs $danger / $success / $warning de Bootstrap. */ --color-danger: #dc3545; --color-success: #198754; /* ---- Surfaces de COMPOSANT ---- --surface-page a été SUPPRIMÉ : il décrivait un papier de fond de page, et la page est blanche depuis qu'une section ne déclare un fond que lorsqu'elle en a besoin. Ses 18 emplois sont passés à --white. Les deux autres ont été RENOMMÉS et non supprimés. « muted » et « alt » décrivaient les niveaux d'une échelle de PAGE qui n'existe plus, mais leurs 46 emplois sont tous des remplissages de COMPOSANT — panneau de menu, popover, état désactivé, cadre de hero, bordure d'avatar. Le défaut était le nom, pas le jeton. D'où deux préfixes et deux sens, sans recouvrement possible : --section-* peint une bande pleine largeur, --surface-* remplit un composant. */ /* Les deux surfaces DÉRIVENT du pétrole #015f6d, à 4 % et 15 % sur blanc. Elles ne dérivaient de rien : #edf3f0 et #d9e8e2 étaient des « sauges » héritées d'une charte antérieure, et il aurait fallu partir d'un vert #4b8769 — absent de la palette — pour retomber sur la première. Sur un site devenu pétrole, deux grandes surfaces qui tirent au vert se voient. --surface-appuyee a été calée pour ne RIEN déplacer à la clarté — 0,778 de luminance contre 0,780 auparavant, seule la teinte bouge. --surface-douce a en revanche été ÉCLAIRCIE, de 8 % à 4 % : le fond des pages connectées, sa plus grande surface, pesait trop. 4 % est un réglage TROUVÉ à l'œil, pas calculé, et arrêté après avoir vu les cinq candidats côte à côte : 8 % pesait trop, 2 % virait au blanc — les cartes n'en sortaient plus — 5 % restait un cran trop soutenu et 3 % un cran trop clair. Ne pas « arrondir » cette valeur : à ces dilutions un point de pourcentage ne pèse que deux ou trois niveaux de RVB, si bien que toute la plage utile tient entre 2 et 5 %. C'est le prix d'un fond très clair — on ne le règle plus qu'à la marge, et chaque cran compte. */ /* LE DISQUE DU DÉCOR MEMBRE, déclaré une fois : deux mécanismes le peignent — les couches de fond répétées de la page et les deux pseudo-éléments d'ancrage de « main » —, et deux densités différentes se verraient tout de suite sur des formes qui se croisent. */ /* 4 %, LA VALEUR DES FORMES À BORD FRANC. Le réglage a fait un aller-retour qui vaut d'être noté, parce qu'il dit à quoi ce nombre est lié. Les formes ont été rendues DIFFUSES un moment — un fondu du centre vers le bord au lieu d'un arrêt net. Elles ont aussitôt disparu : un fondu n'atteint son pic qu'au point central, et à mi-rayon il ne restait qu'un écart de 3 ou 4 sur 255, sous le seuil où l'œil sépare deux gris. Le jeton est alors monté à 4,4 (invisible, l'arrondi à l'octet mangeait la différence), puis 10, puis 20 — où le chapô des listes tombait à 4,05:1, sous le seuil AA de 4,5. Rien de tout cela ne rendait le décor lisible. Le retour au BORD FRANC a résolu la chose sans monter d'un point : une forme pleine à 4 % se voit, parce que toute sa surface est à 4 % et non son seul centre. C'est le PROFIL qui gouvernait la visibilité, pas la densité. Contraste au bas du dégradé, tache comprise : --text-muted à 4,36 — c'est le point le plus tendu du site, et il n'y a aujourd'hui aucun texte gris posé à cette hauteur. 3,24 %, soit 4 % moins dix pour cent de transparence, deux fois de suite (4 → 3,6 → 3,24). L'écart au fond de mi-page suit : 7·6·6, puis 7·5·5, puis 6·5·5 en RVB. Le premier dixième a coûté un point sur deux canaux, le second un point sur un canal — on approche de la limite où l'arrondi à l'octet absorbe le réglage, comme il l'avait fait sur les taches diffuses à 4,4 %. Le cran suivant ne changerait plus rien de visible. */ --decor-disque: color-mix(in srgb, var(--color-titre) 3.24%, transparent); /* LE FOND TEXTURÉ DES ÉCRANS D'APP du téléphone (1er oct. 2026) — Mon compte, la recherche en swipe : un dégradé pâle en haut, et des formes floues pétrole, avec une touche de vert. Classe : .ui-fond-app. */ --fond-app: radial-gradient(circle at 8% 16%, color-mix(in srgb, var(--color-titre) 25%, transparent) 0, transparent 34%), radial-gradient(circle at 96% 44%, color-mix(in srgb, var(--color-titre) 25%, transparent) 0, transparent 38%), radial-gradient(circle at 12% 78%, color-mix(in srgb, var(--color-success) 25%, transparent) 0, transparent 36%), radial-gradient(circle at 90% 96%, color-mix(in srgb, var(--color-titre) 12%, transparent) 0, transparent 30%), linear-gradient(to bottom, var(--section-teinte-7), var(--section-papier) 40%); --surface-douce: #f5f9f9; /* #015f6d à 4 % — remplissage doux */ --surface-appuyee: #d9e7e9; /* #015f6d à 15 % — états et ornements */ --surface-card: var(--white); /* les cartes : blanc, détachées par l'ombre */ --white: #ffffff; --black: #000000; /* noir pur — la carte swipe au smartphone (30 sept. 2026) */ /* ---- Texte ---- */ --text: #152925; /* encre végétale */ /* Gris légèrement végétal, assez dense pour conserver un contraste AA sur l'ivoire et les surfaces pastel tout en restant secondaire face à l'encre. */ --text-muted: #596864; /* gris sauge, AA sur les fonds clairs */ /* ---- Bordures ---- */ --border: #dce5e1; /* filet minéral */ --border-soft: #edf2ef; /* LA TEINTE NEUTRE (30 sept. 2026) — le voile d'encre posé sous un survol, un onglet courant, un état vide, une pastille neutre. Écrite dix fois à la main (« dark-soft 5.8824 % »), c'est désormais un jeton, avec sa version appuyée pour le survol d'un état déjà teinté. LES DOSES : tout autre color-mix() prend 6 · 12 · 25 · 40 · 55 · 70 · 90 %, et rien entre deux. Seuls les dégradés (voiles de photo, halos du décor) gardent des arrêts réglés au cas par cas : leur lisibilité en dépend. */ --teinte-neutre: color-mix(in srgb, var(--color-dark-soft) 6%, transparent); --teinte-neutre-forte: color-mix(in srgb, var(--color-dark-soft) 12%, transparent); /* ---- Fonds d'état, variantes « subtle » de Bootstrap ---- Les alertes ne s'en servent pas : elles portent leur niveau par une barre et une icône, sur fond blanc (voir .ui-alert). Ces fonds restent utiles là où il faut teinter une surface entière — une case de calendrier prise, une ligne de tableau en défaut. */ --danger-subtle: #f8d7da; /* ---- Texte sur fond sombre ---- Rôle distinct des bordures et des surfaces, même si la palette Bootstrap leur donne aujourd'hui les mêmes gris. C'est justement le piège : un changement de charte les fera diverger, et du texte qui suivrait le token de bordure deviendrait illisible. Pied de page, showcase et bandeau CTA puisent ici, jamais dans --border. */ --on-dark: #f8fbf9; /* texte courant et liens sur sombre */ --on-dark-muted: #dcebe6; /* chapô, paragraphe secondaire, sur-titres */ --on-dark-soft: #b9cdc6; /* barre utilitaire, coordonnées */ --on-dark-subtle: #91aaa2; /* mentions légales, sur-titres */ /* Accent clair pour les sur-titres et mots mis en avant sur photo voilée. Sa chaleur équilibre les verts sans réduire la lisibilité. N'a aucun emploi vivant : la charte l'emporte partout où ce jeton était appelé, et y pose le rose de marque. Conservé tel quel — il a servi un temps de rose éclairci pour les bandes sombres, remplacement retiré parce qu'il ajoutait un troisième rose au système. */ --accent-sur-sombre: #f2c6a8; /* abricot clair — accents sur fond sombre */ /* Voile posé sur les photos : presque noir et très peu saturé pour protéger le contraste sans recolorer les carnations ni les scènes. */ --color-voile: #011114; /* voile photo neutre à nuance végétale */ /* ---- Filets et surfaces translucides sur fond sombre ---- Dérivés par transparence : ils restent justes quel que soit le fond, et suivent la charte puisqu'ils partent d'un token. */ --border-on-dark: color-mix(in srgb, var(--on-dark-muted) 20%, transparent); --border-on-dark-strong: color-mix(in srgb, var(--on-dark-muted) 40%, transparent); /* ---- Élévation ---- Seule la TEINTE de l'ombre est ici ; l'opacité et la géométrie restent dans le composant, parce qu'elles disent son altitude, pas la charte. Une marque qui veut des ombres colorées ne change que cette ligne. */ --shadow-color: #152925; /* ---- Focus ---- Valeurs Bootstrap : anneau à 25 % de la couleur active, bordure à 50 % éclaircie de blanc. Exprimées en color-mix pour suivre --color-primary au lieu de figer le bleu. */ --focus-border: color-mix(in srgb, var(--color-primary) 50%, var(--white)); --focus-ring: color-mix(in srgb, var(--color-primary) 25%, transparent); --focus-ring-danger: color-mix(in srgb, var(--color-danger) 25%, transparent); /* ---- Typographie ---- Une sans humaniste plus nette remplace la rondeur très ludique de Nunito. La sérif reste réservée aux fragments éditoriaux et aux témoignages. */ --font-display: "Avenir Next", Avenir, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-base: var(--font-display); /* Police des TITRES, distincte du corps. Nunito, la ronde que --font-display avait quittée : elle revient sur les titres seuls, où sa rondeur signe, pendant que le texte courant garde l'humaniste plus nette. Elle est déjà chargée par chaque page (Google Fonts, graisses 400 à 900), aucun appel réseau de plus. Les ACCENTS de titre n'en relèvent pas : ils gardent la sérif italique de --font-display, et c'est le contraste des deux qui fait le signal. */ --font-titre: "Nunito", "Avenir Next", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; /* Échelle typographique — valeurs Bootstrap 5.3. $font-size-base = 1rem ; titres = base × 2.5 / 2 / 1.75 / 1.5 / 1.25 / 1. Les « display » servent aux hero, pas aux titres de section. */ --fs-base: 1rem; /* $font-size-base 16px */ --fs-sm: 0.875rem; /* $small-font-size 14px */ --fs-caption: 0.75rem; /* $badge-font-size 12px */ --fs-lead: 1.125rem; /* chapôs — 18px dans la charte */ --fs-h1: 2.5rem; /* $h1-font-size 40px */ --fs-h2: 2rem; /* $h2-font-size 32px */ --fs-h3: 1.75rem; /* $h3-font-size 28px */ --fs-h4: 1.5rem; /* $h4-font-size 24px */ --fs-h5: 1.25rem; /* $h5-font-size 20px */ --fs-h6: 1rem; /* $h6-font-size 16px */ --fs-display-1: 5rem; /* .display-1 80px */ --fs-display-2: 4.5rem; /* .display-2 72px */ --fs-display-3: 4rem; /* .display-3 64px */ --fs-display-4: 3.5rem; /* .display-4 56px */ --fs-display-5: 3rem; /* .display-5 48px */ --fs-display-6: 2.5rem; /* .display-6 40px */ /* L'ÉCHELLE DES PICTOS (30 sept. 2026) — cinq tailles, pas une de plus. Material Symbols dessine ses glyphes pour 20, 24, 40 et 48 : l'échelle s'y cale, avec 16 pour les pictos logés dans un texte Small ou Caption. */ --icon-sm: 1rem; /* dans un texte de 12 ou 14 16px */ --icon-md: 1.25rem; /* le picto courant 20px */ --icon-lg: 1.5rem; /* navigation, boutons ronds 24px */ --icon-xl: 2rem; /* états vides, repères 32px */ --icon-2xl: 3rem; /* illustrations 48px */ --lh-base: 1.5; /* $line-height-base */ --lh-heading: 1.2; /* $headings-line-height */ /* Graisses — $font-weight-* de Bootstrap. Les composants les citent par leur rôle : un bouton est en --fw-normal parce que Bootstrap pose $btn-font-weight: $font-weight-normal, pas parce que 400 « rendait bien ». */ --fw-light: 300; /* $display-font-weight, $lead-font-weight */ --fw-normal: 400; /* $body-font-weight, $btn-font-weight */ --fw-medium: 500; /* $headings-font-weight */ --fw-semibold: 600; --fw-bold: 700; /* $badge-font-weight */ /* Échelle d'espacement — $spacers de Bootstrap, prolongée au-delà de 5 pour le rythme vertical des sections (Bootstrap s'arrête à 3rem, insuffisant pour séparer deux organismes de pleine largeur). */ --space-1: 0.25rem; /* $spacer * .25 4px */ --space-2: 0.5rem; /* $spacer * .5 8px */ --space-3: 1rem; /* $spacer 16px */ --space-4: 1.5rem; /* $spacer * 1.5 24px */ --space-5: 3rem; /* $spacer * 3 48px */ --space-6: 4rem; /* 64px */ --space-7: 7.5rem; /* rythme des sections 120px */ /* ---- Hauteur des contrôles ---- Hauteur d'un .btn / .form-control Bootstrap, déduite de ses trois ingrédients plutôt que figée : corps × interlignage + padding vertical + bordures. Vaut 38px avec l'échelle par défaut, et suit toute modification du corps de texte. Sert de gabarit commun à tout ce qui doit s'aligner sur un bouton — boutons, champs, cases de calendrier. */ /* L'ÉCHELLE A ÉTÉ RESSERRÉE : 50 / 60 / 40, contre 56 / 64 / 44 relevés sur la source. Décision explicite — les commandes restaient généreuses là où Bootstrap tient en 38px, mais un bouton de 56 pesait lourd dans une carte. Les trois valeurs bougent ensemble : c'est un rang, pas trois mesures. */ --control-h: 3.125rem; /* 50px — la taille ordinaire */ --control-h-sm: 2.5rem; /* 40px — le rang « small » */ --control-h-lg: 3.75rem; /* 60px — le rang « large » */ --control-h-tactile: 3rem; /* 48px — les boutons ronds au smartphone (30 sept. 2026) */ /* ---- Rayons — échelle Bootstrap ---- */ /* Échelle relevée sur la charte, du plus grand au plus petit. --radius est celui des CARTES et des panneaux. Il a valu 28px ; depuis le 2 oct. 2026, TOUTES les cartes prennent le même arrondi, 18px — celui de --radius-md, auquel il est désormais égal : deux rayons de carte sur une même page (28 ici, 18 là) se voyaient. */ --radius: 1.125rem; /* 18px — cartes, panneaux (= --radius-md) */ --radius-lg: 1.75rem; /* 28px — le grand panneau de recherche, seul (2 oct. 2026) */ --radius-md: 1.125rem; /* 18px — boutons */ /* LE RAYON DES PHOTOS DE PERSONNES — vignettes, avatars, portrait de profil. Elles étaient RONDES, comme partout ailleurs sur le web social ; elles sont maintenant des carrés à coins arrondis. Les photographies des cartes profil l'étaient déjà, et deux façons de découper le même sujet sur une même page se remarquaient. EN POURCENTAGE, AVEC UN PLAFOND. Les avatars vont de 22px (les piles de réactions) à plus de 200 (le portrait d'une fiche) : un rayon fixe aurait donné un carré presque net sur les petits et un galet sur les grands. 28 % tient la même allure d'un bout à l'autre — 6px à 22, 12 à 44, 20 à 73 — et le plafond de 24px empêche le grand portrait de virer au squircle. */ --radius-photo: min(28%, 24px); --radius-sm: 0.8125rem; /* 13px — champs, petits boutons */ /* Les pastilles et capsules : un rayon « infini », qui arrondit les deux bouts quelle que soit la hauteur. Les cercles, eux, restent en 50 %. */ --radius-pill: 999px; /* ---- Ombres — échelle Bootstrap ---- */ /* Pied de carte — la bande sous le filet, en bas des cartes communauté et évènement. La valeur vient de la carte COMMUNAUTÉ, où elle se déduit du contenu : un jeton d'avatar (30px), le filet (1px) et son rembourrage (--space-3). Les cartes évènement n'ont pas d'avatars et ne trouveraient donc pas cette hauteur toutes seules ; elles s'y alignent par ce jeton. Les deux grilles se suivent sur l'accueil : leurs filets doivent tomber au même endroit, et leurs pieds mesurer pareil. */ --carte-pied-h: calc(30px + 1px + var(--space-3)); /* L'ÉCHELLE DES OMBRES (30 sept. 2026) — une seule famille, teintée de l'encre du dépôt comme l'ombre photo, et non plus le noir de Bootstrap à côté d'une quarantaine d'ombres écrites à la main. --shadow-md EST L'OMBRE PAR DÉFAUT (demande du 30 sept. 2026) : toute carte, pastille, bouton, menu ou fenêtre la porte au repos. --shadow-lg ne sert qu'au SURVOL (l'élément se soulève) ; --shadow-sm reste dans l'échelle pour Bootstrap (.shadow-sm) mais les composants ne l'emploient plus. sm (réservée à l'utilitaire Bootstrap) md l'ombre de tout composant au repos lg le survol photo ce qui flotte franchement (plus bas) accent le bouton rose qui conclut une zone Hors échelle, et c'est voulu : les anneaux de focus (0 0 0 Npx) et les filets intérieurs (inset 0 1px). */ --shadow-sm: 0 4px 16px color-mix(in srgb, var(--shadow-color) 8%, transparent); --shadow-md: 0 8px 24px color-mix(in srgb, var(--shadow-color) 12%, transparent); --shadow-lg: 0 16px 40px color-mix(in srgb, var(--shadow-color) 14%, transparent); --shadow-accent: 0 12px 28px color-mix(in srgb, var(--color-brand-pink-ink) 22%, transparent); /* La barre du bas, au téléphone : la seule ombre portée VERS LE HAUT. */ --shadow-haut: 0 -4px 16px color-mix(in srgb, var(--shadow-color) 6%, transparent); /* Le quatrième niveau ne vient pas de Bootstrap : c'est l'ombre PROFONDE du dépôt, celle d'une carte qui flotte franchement au-dessus de son fond — une photo, ou une page qu'on veut faire reculer. L'échelle claire ne suffit plus dans ce cas : sur une image, 16px d'ombre se perdent. Plus haute, plus étalée, et teintée de l'encre du dépôt plutôt que du noir pur, qui virait au gris sale sur les tons chauds des photos. Elle était déjà écrite à l'identique dans trois règles — les cartes au survol (ui-charte), la carte penchée de la section communautés, la carte du hero de communaute.html — avant que celle du hero d'evenements.html ne la demande à son tour. Quatre littéraux identiques finissent par diverger ; c'est un token. */ --shadow-photo: 0 28px 62px color-mix(in srgb, var(--color-dark-soft) 16%, transparent); /* ---- La tête des pages de recherche ---- Le hero de l'ACCUEIL et sa barre sont la référence : les pages de liste doivent s'ouvrir sur la même bande, sans quoi passer de l'une à l'autre fait sauter la page. Ces deux hauteurs sont MESURÉES sur l'accueil, dont le hero est dimensionné par son contenu — un titre de deux lignes, un chapô, un bouton, une ligne de réassurance. C'est la seule façon de les accorder : on ne peut pas partager une hauteur qui n'est écrite nulle part. Si le contenu du hero d'accueil change, ces deux valeurs sont à reprendre — c'est le prix d'un accord entre une hauteur calculée et une hauteur imposée. --hero-tete-h mesure la BANDE, du bas de l'en-tête au haut de la barre, et non la seule section : le hero de l'accueil laisse 30px sous l'en-tête (sa marge, qui lui donne de l'air sur le fond de page) quand celui d'une page à photo part du ras — sinon une bande claire s'ouvrirait au-dessus de l'image. Comparer les deux SECTIONS accordait leurs hauteurs et laissait la barre 30px plus haut sur la page de liste ; comparer les bandes met les deux barres sur la même ligne, ce qui est ce que l'oeil suit d'une page à l'autre. */ --hero-tete-h: 661px; /* accueil : 30px de marge + 631px de hero */ --hero-tete-barre-h: 174px; /* sa barre de recherche */ /* ---- Repères de gabarit ---- */ --header-h: 96px; /* rangée de navigation — hauteur de la charte */ --utility-bar-h: 34px; /* 6px de moins depuis le resserrage du rembourrage */ /* Hauteur totale de l'en-tête : la barre utilitaire est DANS .ui-site-header. Sert d'ancrage au panneau de navigation mobile, qui doit s'ouvrir pile sous l'en-tête. Recalculé au pixel près par ui-main.js une fois la page chargée ; cette valeur dérivée reste juste sans JS (aperçus du DS). */ } @media (width <= 1100px) { :root { --header-h: 62px; } } @media (width <= 767px) { :root { /* .ui-utility-bar se replie à 6px (ui-organismes.css) */ --utility-bar-h: 6px; } }