/* ============================================================ ClientBase · Design system de l'ESPACE CONNECTÉ ============================================================ Ce fichier habille tout ce qui est derrière la connexion : l'espace professionnel, l'espace client, et la page publique de réservation. POURQUOI UN FICHIER À PART `tokens.css` porte l'histoire du site : la vitrine, ses trois couleurs canoniques, et des couches successives (dont un ancien habillage « Fresha »). Y ajouter la nouvelle DA aurait mélangé deux systèmes. Ici, tout est neuf, et tout est préfixé `e-` (pour « espace »). Rien de ce fichier ne peut abîmer la vitrine : les tokens sont déclarés sur `.cb-espace`, pas sur `:root`. LA DIRECTION ARTISTIQUE, EN CINQ RÈGLES 1. Le fond n'est jamais blanc : un dégradé pastel très clair, fixe, derrière toute la page. C'est lui qui donne la profondeur, pas les ombres. 2. Les panneaux de structure (menu, en-tête) sont du blanc translucide avec un flou d'arrière-plan. Ils flottent. 3. Les cartes de contenu, elles, sont du blanc franc avec une bordure fine. Elles portent l'information, elles ne décorent pas. 4. Une seule couleur d'accent : l'indigo de la marque, décliné en dégradé vers un violet clair. Les ombres colorées remplacent les ombres noires. 5. Les titres sont gros et serrés, les étiquettes petites et espacées. Ce contraste typographique porte la hiérarchie, ce qui permet de garder très peu d'éléments à l'écran. ============================================================ */ .cb-espace { /* --- Couleur --- */ /* L'indigo est celui du logo (#5A50E6). Le violet clair ne sert qu'à terminer les dégradés : jamais seul, jamais en aplat. */ --e-accent: #5A50E6; --e-accent-2: #8B5BFF; --e-accent-deep: #3C2FBD; --e-grad: linear-gradient(110deg, var(--e-accent), var(--e-accent-2)); --e-grad-soft: linear-gradient(125deg, #F0EDFF 0%, #F6F1FF 100%); /* Teintes dérivées de l'accent. En color-mix : si l'accent change un jour, toute l'interface suit. */ --e-tint: color-mix(in srgb, var(--e-accent) 12%, transparent); --e-tint-2: color-mix(in srgb, var(--e-accent) 20%, transparent); --e-glow: color-mix(in srgb, var(--e-accent) 40%, transparent); /* --- Encre --- */ --e-ink: #141416; --e-ink-2: #45454B; --e-sub: #6B6B70; --e-ink-4: #9A9AA2; /* --- Surfaces --- */ --e-surface: #FFFFFF; --e-panel: rgba(255, 255, 255, 0.82); --e-line: #E6E8F2; --e-line-2: #F0F1F6; --e-hover: #FAFBFE; /* --- Statuts --- */ /* Le vert et le rouge ne servent qu'à dire « c'est bon » et « attention ». Jamais en décoration. */ --e-ok: #2BAB63; --e-ok-tint: #E4F7EC; --e-warn: #C77A0A; --e-warn-tint: #FDF3E2; --e-danger: #E0304A; --e-danger-tint: #FDECEE; /* --- Rayons --- */ /* Trois valeurs seulement. Au-delà, l'œil ne suit plus. */ --e-r-card: 14px; /* cartes de contenu */ --e-r-panel: 24px; /* panneaux flottants, modales */ --e-r-pill: 999px; /* boutons, étiquettes, filtres */ /* --- Ombres --- */ /* Diffuses, teintées de bleu, jamais noires. Une ombre noire sur un fond pastel fait sale. */ --e-sh-card: 0 1px 2px rgba(20, 20, 60, 0.03); --e-sh-panel: 0 20px 45px -28px rgba(30, 30, 80, 0.45), 0 2px 8px -4px rgba(30, 30, 80, 0.12); --e-sh-lift: 0 14px 30px -16px rgba(30, 30, 80, 0.22); --e-sh-accent: 0 10px 22px -10px var(--e-glow); /* --- Typographie --- */ /* Geist pour le CORPS de l'espace : menus, étiquettes, boutons, tableaux, formulaires. Variable, donc les vrais poids fonctionnent. LES TITRES, EUX, SONT EN COOLVETICA, ET C'EST NORMAL. `tokens.css` applique `font-family: var(--ff-display)` à TOUS les h1/h2/h3/h4 du site, et --ff-display vaut Coolvetica. Les titres d'ici étant de vrais

/

, ils héritent de cette règle et ignorent le --e-ff déclaré juste en dessous. Ce n'est pas un accident : c'est la répartition d'origine du site (titres condensés et fins, corps neutre et lisible). CONSÉQUENCE À NE PAS « CORRIGER » : un font-weight: 700 posé sur un

de l'espace ne produit rien de visible, parce que Coolvetica n'a qu'un Regular et que le faux-gras est coupé. Pour épaissir un titre, il faut soit le sortir de la balise h1/h2, soit lui donner explicitement `font-family: var(--e-ff)`. */ --e-ff: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; font-family: var(--e-ff); color: var(--e-ink); -webkit-font-smoothing: antialiased; } /* ============================================================ 1 · LE FOND ============================================================ Posé en `fixed` derrière tout, il passe SOUS l'en-tête flottant. Sans lui, la page démarrerait par une bande blanche au-dessus de la pilule d'en-tête. ============================================================ */ .e-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, var(--e-fond-haut, #F1EEFF) 0%, var(--e-fond-milieu, #F5F2FF) 45%, var(--e-fond-bas, #FAFAFE) 100%); } /* Le même dégradé porté par le conteneur lui-même, en filet de sécurité : l'élément `fixed` ci-dessus ne couvre que la fenêtre, et si la page est plus longue, le bas se retrouvait blanc pendant le rendu (visible aussi sur les captures pleine hauteur). `attachment: fixed` garde le dégradé calé sur la fenêtre, donc les deux se superposent exactement. */ /* UNE SEULE REGLE DE FOND POUR LES DEUX ESPACES · 30 juillet 2026. Noah : « en termes de fond, l'espace professionnel et l'espace client, j'aimerais qu'ils aient un peu la meme DA, juste avec leurs couleurs a eux. J'avais dit de me faire un fond un peu plus clair, mais il m'a fait un degrade ». Les deux fonds etaient ecrits a la main, chacun avec ses trois codes hexadecimaux : #F1EEFF -> #F5F2FF -> #FAFAFE cote pro, #F8F4FF -> #FBF8FF -> #FEFEFF cote client. Deux listes de couleurs sans rapport l'une avec l'autre, qui derivaient a chaque retouche de l'un des deux. Maintenant c'est la MEME formule : la couleur d'accent de l'espace, diluee dans du blanc. .cb-espace-client redefinit --e-accent, donc son fond suit tout seul, dans le violet consommateur. Une regle, deux couleurs, et regler la clarte se fait a un seul endroit, pour les deux. Les pourcentages sont ceux du cote client (le plus clair des deux) : c'est l'eclaircissement que Noah avait demande, on le garde. */ .cb-espace { --e-fond-haut: color-mix(in oklab, var(--e-accent) 7%, #fff); --e-fond-milieu: color-mix(in oklab, var(--e-accent) 4%, #fff); --e-fond-bas: color-mix(in oklab, var(--e-accent) 1%, #fff); background: linear-gradient(180deg, var(--e-fond-haut) 0%, var(--e-fond-milieu) 45%, var(--e-fond-bas) 100%); background-attachment: fixed; /* ============================================================ LA BANDE BLANCHE AU-DESSUS DU BANDEAU DÉMO · 30 juillet 2026 ============================================================ Noah : « quand on ouvre un compte client démo, au-dessus du petit header démo, il y a une petite barre blanche qui s'affiche ». Ce n'était pas une barre : c'était le FOND DE LA PAGE qui passait au travers. `.cb-demobar` porte `margin: 10px …` ; comme cette coquille n'établissait aucun contexte de formatage, cette marge du premier enfant REMONTAIT hors du conteneur (fusion des marges). Résultat : la coquille, et donc le dégradé, commençait 10 px plus bas, et le blanc du `body` apparaissait sur toute la largeur. Mesuré avant correction : `getBoundingClientRect().top` = 10 sur la racine, dans l'espace client ET dans l'espace pro. `display: flow-root` crée le contexte manquant : la marge reste à l'intérieur. À la différence de `overflow: hidden` il ne fabrique pas de conteneur de défilement (règle 13a), et à la différence de `overflow-x: clip` il n'établit pas de bloc conteneur pour les éléments `fixed` (règle 13b). C'est la seule des trois qu'on puisse poser sans casser autre chose. PORTÉE : les deux espaces CONNECTÉS seulement, pas `.cb-espace` tout court, cette classe habille aussi la PAGE PUBLIQUE de réservation, qui n'a pas de bandeau démo et donc pas le problème. On ne touche pas à ce que voient les clientes pour corriger un défaut qui n'y est pas. ============================================================ */ } .cb-espace-pro, .cb-espace-client { display: flow-root; } /* L'espace client · même construction, mais sur le violet consommateur (`--cli-accent`) au lieu de l'indigo pro. Les deux publics ont chacun leur couleur depuis le début du projet : on la respecte plutôt que d'imposer l'indigo partout. */ .cb-espace-client { --e-accent: var(--cli-accent, #8B5BFF); /* 68 % → 86 % le 30 juillet 2026. Le second ton du dégradé était si pâle qu'un bouton primaire LARGE (« Réserver » sur une carte de salon, « Ouvrir ma carte ») finissait en lilas délavé sur sa moitié droite : lisible sur un bouton étroit, mou dès qu'il s'étire. Même principe que le bandeau démo, dont le dégradé avait été resserré pour la même raison, un aplat sur lequel on ÉCRIT doit garder sa valeur d'un bout à l'autre. */ --e-accent-2: color-mix(in oklab, var(--cli-accent, #8B5BFF) 86%, #C9B6FF); --e-accent-deep: var(--cli-ink, #6B3FD4); --e-grad: linear-gradient(110deg, var(--e-accent), var(--e-accent-2)); --e-grad-soft: linear-gradient(125deg, #F7F2FF 0%, #FBF7FF 100%); --e-tint: color-mix(in srgb, var(--cli-accent, #8B5BFF) 12%, transparent); /* FOND ÉCLAIRCI · 30 juillet 2026. Noah : « la couleur du fond sur l'espace client, je la trouve un peu trop foncée, peut-être l'éclaircir un petit peu, que ça se rapproche un peu plus du blanc ». On garde le violet, c'est la couleur du public client, et sans lui les cartes blanches n'auraient plus de fond sur quoi flotter, mais on le dilue : #F4EEFF → #F8F4FF en haut, et le bas termine à #FEFEFF, c'est-à-dire pratiquement blanc. */ /* Plus de `background` ici : il vient de .cb-espace, calcule sur --e-accent que cette regle vient de redefinir. Cf. le commentaire de .cb-espace. */ /* MÊME POLICE QUE L'ESPACE PRO · 30 juillet 2026. Noah, sur le bandeau démo : « Créer mon compte, Quitter, c'est plus les bonnes polices d'écriture ». Les boutons du bandeau sont en Geist ; les titres de l'espace client, eux, étaient restés en Coolvetica. Dans le même en-tête, deux familles. L'espace pro a réglé ça le 30 juillet en redéfinissant les deux jetons de police sur sa racine (cf. `.cb-espace-pro` plus bas). Noah demande explicitement que les deux espaces se ressemblent : on applique la même chose ici. La PAGE PUBLIQUE de réservation (`.cb-espace-book`) garde Coolvetica, c'est la vitrine du pro, pas un espace connecté. */ --ff-display: var(--e-ff); --ff-coolvetica: var(--e-ff); } /* Coolvetica n'ayant qu'un Regular, les `font-weight` des titres ne produisaient rien. En Geist, variable, il faut les redonner, sinon le changement de police se lit comme une perte de hiérarchie. Mêmes valeurs que l'espace pro. */ .cb-espace-client .e-h1 { font-weight: 700; letter-spacing: -0.028em; } .cb-espace-client .e-h2 { font-weight: 700; letter-spacing: -0.022em; } .cb-espace-client .e-h3 { font-weight: 650; letter-spacing: -0.014em; } .cb-espace-client h1, .cb-espace-client h2, .cb-espace-client h3, .cb-espace-client h4 { font-weight: 700; letter-spacing: -0.02em; } /* .cb-espace-client .e-bg : supprime le 30 juillet 2026. La regle generique .e-bg calcule desormais son degrade sur --e-accent, donc elle donne deja le violet consommateur ici. */ /* ============================================================ L'ESPACE PRO PASSE EN NOIR/GRIS · 16 septembre 2026 ============================================================ Noah, après une capture de son vrai compte : « ça n'a absolument pas changé », le menu était bien repassé en gris, mais tout le RESTE de l'écran (bouton « Nouveau RDV », carte du jour, barre de progression, ombre des boutons…) restait sur l'indigo/violet de marque, donc rien ne se voyait à côté. Demande répétée sur plusieurs tours : moins de couleur, plus de noir/blanc/gris, le langage du nouveau design travaillé sur clientbase.fr/design/pro. Tout l'espace pro est construit sur --e-accent (cf. le commentaire de .cb-espace tout en haut : « si l'accent change un jour, toute l'interface suit »). Exactement comme .cb-espace-client redéfinit ces jetons sur le violet consommateur, on les redéfinit ici sur du noir/gris : boutons primaires, fond de page, teintes et ombres d'accent en découlent TOUS automatiquement, sans toucher chaque composant un par un. L'espace client et la page publique de réservation gardent leur couleur, seul le pro change. COMPLÉTÉ LE 16 SEPTEMBRE 2026, CORRIGÉ DEUX FOIS LE MÊME JOUR. Round 2 : l'indigo restait visible sur « Résumé du jour », le jour sélectionné dans la vue Mois, et les formules d'abonnement, un pont de l'ANCIEN jeton --accent (posé par tokens.css sur :root, celui que lit encore RToneChip/RAvatar/RDelta) vers --e-accent a été posé, puis retiré en pensant qu'il était trop large : --accent sert aussi de COULEUR DE CATÉGORIE, celle qu'une pro choisit pour un rendez-vous (COLOR_CHOICES l'étiquette « Violet », face à Rose/Vert/Orange), et le pont la rendait noire, un rendez-vous « Violet » se confondait avec un rendez-vous honoré (déjà grisé). Round 3 : retirer le pont réglait "Violet" mais rendait tout le RESTE de l'app (page Agenda entière, bandeau démo, mini-calendrier « 16 », trait « maintenant ») de nouveau indigo, --accent y sert de couleur de MARQUE, pas de catégorie, sur des dizaines d'usages. La vraie correction n'est pas dans ce fichier : RTONE.indigo et COLOR_MAP.accent (app-dashboard.jsx) portent maintenant des valeurs FIXES au lieu de var(--accent), les deux SEULS endroits où « Violet » se choisit. Plus rien ne dépend donc de --accent pour catégoriser, et le pont peut couvrir TOUT le reste sans rien casser. */ .cb-espace-pro { --e-accent: #0A0A0A; --e-accent-2: #2B2B2B; --e-accent-deep: #000000; --e-grad: linear-gradient(110deg, var(--e-accent), var(--e-accent-2)); --e-grad-soft: linear-gradient(125deg, #F6F6F7 0%, #FAFAFA 100%); --e-tint: color-mix(in srgb, var(--e-accent) 8%, transparent); --e-tint-2: color-mix(in srgb, var(--e-accent) 14%, transparent); --e-glow: color-mix(in srgb, var(--e-accent) 30%, transparent); --accent: var(--e-accent); --accent-ink: var(--e-accent-deep); --accent-strong: var(--e-accent-deep); --accent-soft: var(--e-tint); --accent-soft-2: var(--e-tint-2); --accent-line: var(--e-tint-2); /* UN FOND VRAIMENT GRIS, PAS UN DÉGRADÉ QUI FINIT EN BLANC · 16 sept. 2026, gabarit Figma de Noah : « partir sur un fond un peu gris, comme je t'ai donné en référence ». La formule générique de `.cb-espace` (7 % → 4 % → 1 % de --e-accent dans du blanc, pensée pour le violet clair de l'espace client) donnait ici un gris à peine perceptible qui tournait quasi blanc en bas de page, juste assez pour que le widget de contenu blanc ne se détache plus. Resserré et remonté pour un gris plus soutenu et plus uniforme sur toute la hauteur. */ --e-fond-haut: color-mix(in oklab, var(--e-accent) 11%, #fff); --e-fond-milieu: color-mix(in oklab, var(--e-accent) 10%, #fff); --e-fond-bas: color-mix(in oklab, var(--e-accent) 9%, #fff); } /* ============================================================ LA PAGE PUBLIQUE DE RÉSERVATION ============================================================ Cas particulier : ce n'est pas notre couleur qui commande, c'est celle que le professionnel a choisie dans « Ma page ». Le système de thèmes existant (`[data-cb-theme]`) redéfinit `--accent` ; on fait donc dériver toute la DA de cette variable au lieu de l'indigo ClientBase. Conséquence : un pro qui passe sa page en vert obtient des boutons verts, un dégradé de fond verdâtre et des étiquettes vertes, sans que rien ne soit codé en dur. Et si le thème ne définit rien, on retombe sur l'indigo de marque. ============================================================ */ .cb-espace-book { --e-accent: var(--accent, #5A50E6); /* Le second ton du dégradé : la même couleur, éclaircie et pivotée. color-mix garde la teinte du pro tout en donnant du relief. */ --e-accent-2: color-mix(in oklab, var(--accent, #5A50E6) 72%, #C9B6FF); --e-accent-deep: color-mix(in oklab, var(--accent, #5A50E6) 78%, #000); --e-grad: linear-gradient(110deg, var(--e-accent), var(--e-accent-2)); --e-grad-soft: linear-gradient(125deg, color-mix(in oklab, var(--accent, #5A50E6) 10%, #fff) 0%, color-mix(in oklab, var(--accent, #5A50E6) 5%, #fff) 100%); /* Fond de page : un voile de la couleur du pro, très dilué. */ background: linear-gradient(180deg, color-mix(in oklab, var(--accent, #5A50E6) 8%, #fff) 0%, color-mix(in oklab, var(--accent, #5A50E6) 4%, #fff) 42%, #FCFCFE 100%); background-attachment: fixed; } /* Le pro peut choisir un fond personnalisé (crème, sauge, blush, sombre…) dans « Ma page ». Ce réglage écrit `--bg` en !important sur `.cb-booking` et doit gagner contre notre dégradé : on s'efface alors. `--cb-bg-perso` est posé par BookingThemeStyles quand un fond est choisi. */ .cb-espace-book[data-cb-bg-perso="1"] { background: var(--bg); } .e-above { position: relative; z-index: 1; } /* ============================================================ 2 · PANNEAUX FLOTTANTS (en-tête, menu latéral) ============================================================ */ .e-panel { background: var(--e-panel); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: var(--e-r-panel); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); } /* ============================================================ LA BARRE D'IDENTITÉ · 16 septembre 2026, deux passes sur le figé ============================================================ Gabarit Figma de Noah : une bande pleine largeur, au-dessus du menu ET du contenu, avec la photo/le nom à gauche et la recherche + la cloche à droite. ⚠️ D'ABORD RENDUE STICKY (même jour), PUIS LA VRAIE CORRECTION (même soir, cf. `.cb-espace-pro:not(.cb-admin)` dans le bloc 1024px+) : Noah, après avoir vu le fond gris et le widget blanc : « toute la partie grise... je veux qu'elle soit figée, si je descends une page, faut pas que la partie grise descende, seulement la page blanche... faut que ça donne l'impression que c'est une page dans une page ». `position: sticky` suffisait tant que la PAGE entière défilait, mais donnait l'impression d'un bandeau qui « rattrape » le scroll, pas d'un cadre immobile. La vraie réponse : la page ne défile plus DU TOUT (`overflow: hidden` sur la racine `.cb-espace-pro`), seul `.cb-content-widget` a son propre défilement interne. Cette bande n'a donc plus besoin d'être sticky : elle ne peut plus défiler, elle est simplement dans le flux d'une coquille qui ne bouge pas. */ /* ⚠️ ALIGNÉE SUR LE MÊME CADRE QUE `.e-shell` · 16 septembre 2026. Noah : « colle-le vraiment à gauche pour qu'ils soient à peu près au même niveau que mon profil ». La vraie cause n'était pas un simple décalage de quelques pixels : cette bande utilisait un retrait en `clamp(…vw…)`, plafonné à 32px, tandis que `.e-shell` (le menu et le widget) est CENTRÉ avec une largeur maximale, sur un grand écran, la marge du centrage dépasse 32px et continue de grandir alors que celle de la bande reste bloquée : les deux glissent l'une par rapport à l'autre à mesure que l'écran s'élargit. Même formule des deux côtés maintenant (`max-width` + `margin: auto`), donc le même bord gauche, à toute largeur d'écran. ⚠️ PIÈGE FLEXBOX, découvert en vérifiant la mesure : `.e-above` (le parent) est un conteneur flex. Un enfant flex avec des marges `auto` sur l'axe croisé NE S'ÉTIRE PAS avant d'être limité par `max-width` - au lieu de ça, il revient à la taille de SON CONTENU (ici, avatar + recherche + cloche, bien plus étroit que 2400px), puis centre CETTE petite boîte. `.e-shell` n'a pas le problème : en grille avec une colonne `1fr`, son contenu « veut » déjà toute la largeur. `width: 100%` force `.cb-idbar` à partir de la largeur du conteneur AVANT que `max-width` ne la limite, le seul moyen fiable de centrer un enfant flex avec `margin: auto`. */ .cb-idbar { display: flex; align-items: center; gap: 14px; width: 100%; max-width: min(2400px, calc(100% - 24px)); margin: 0 auto; padding: 18px 8px 10px; background: none; border-bottom: none; } /* LE BLOC PROFIL, VRAIMENT UN PROFIL · 16 septembre 2026, deux passes. Première passe : nom + étiquette empilés, mais toujours à plat sur le gris, Noah : « le profil en haut à gauche, je le trouve beaucoup trop simple ». Deuxième passe : une vraie pastille blanche, comme la recherche et la cloche à côté, les trois contrôles du haut forment maintenant un seul langage (surface blanche + ombre douce, jamais de filet dur) plutôt que trois traitements différents. */ .cb-idbar-idwrap { position: relative; display: flex; align-items: center; gap: 6px; flex: none; } .cb-idbar-id { display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; background: var(--e-surface); border: none; cursor: pointer; font-family: inherit; padding: 6px 16px 6px 6px; border-radius: 999px; box-shadow: 0 1px 2px rgba(10, 10, 10, .04), 0 8px 20px -14px rgba(10, 10, 10, .35); transition: box-shadow .15s ease, transform .15s ease; } .cb-idbar-id:hover { box-shadow: 0 1px 2px rgba(10, 10, 10, .05), 0 10px 24px -12px rgba(10, 10, 10, .4); transform: translateY(-1px); } .cb-idbar-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .cb-idbar-nom { font-size: 14px; font-weight: 800; letter-spacing: -.005em; color: var(--e-ink); max-width: 200px; } .cb-idbar-role { font-size: 11px; font-weight: 600; color: var(--e-ink-4); max-width: 200px; } /* La flèche : un second geste à côté de la pastille, pas dedans, le clic sur le nom continue d'ouvrir l'accueil, celui-ci ouvre le menu. */ .cb-idbar-chevron { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--e-surface); border: none; color: var(--e-ink-3, var(--e-ink-4)); cursor: pointer; box-shadow: 0 1px 2px rgba(10, 10, 10, .04), 0 8px 20px -14px rgba(10, 10, 10, .35); transition: transform .15s ease, box-shadow .15s ease; } .cb-idbar-chevron:hover { box-shadow: 0 1px 2px rgba(10, 10, 10, .05), 0 10px 24px -12px rgba(10, 10, 10, .4); } .cb-idbar-chevron[aria-expanded="true"] { transform: rotate(180deg); } .cb-idbar-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px; background: var(--e-surface); border-radius: 16px; padding: 6px; box-shadow: 0 4px 12px rgba(10, 10, 10, .06), 0 20px 40px -18px rgba(10, 10, 10, .28); z-index: 70; } .cb-idbar-menu .cb-session-sortie { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 12px; border: none; border-radius: 11px; background: none; font-family: inherit; font-size: 13.5px; font-weight: 650; color: var(--e-danger, #C0392B); cursor: pointer; transition: background-color .14s ease; } .cb-idbar-menu .cb-session-sortie:hover { background: var(--e-hover); } /* LA RECHERCHE, TOUJOURS SANS CONTOUR · 16 septembre 2026, QUATRIÈME passe. Le filet gris (tour précédent) puis l'ombre douce qui l'a remplacé (tour suivant) ont TOUS LES DEUX été lus comme le même « petit contour gris » : Noah confirme qu'elle ne veut RIEN qui dessine le bord du champ, ombre comprise, seul l'aplat blanc sur le gris de la page doit suffire. Aucun box-shadow ici, à la différence du profil et de la cloche. */ .cb-idbar-search { position: relative; flex: none; width: 280px; max-width: 34vw; min-width: 0; margin-left: auto; display: flex; align-items: center; gap: 9px; background: var(--e-surface); border: none; outline: none; box-shadow: none; border-radius: 999px; padding: 11px 18px; } .cb-idbar-search input { border: none; outline: none; box-shadow: none; background: none; font: inherit; font-size: 13.5px; color: var(--e-ink); width: 100%; -webkit-appearance: none; appearance: none; } .cb-idbar-search input::-webkit-search-decoration, .cb-idbar-search input::-webkit-search-cancel-button, .cb-idbar-search input::-webkit-search-results-button, .cb-idbar-search input::-webkit-search-results-decoration { -webkit-appearance: none; } .cb-idbar-search input::placeholder { color: var(--e-ink-4); } .cb-idbar-search-drop { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--e-surface); border: 1px solid var(--e-line); border-radius: 14px; box-shadow: var(--e-sh-card); overflow: hidden; z-index: 70; } .cb-idbar-bell { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--e-surface); border: none; color: var(--e-ink-2); cursor: pointer; box-shadow: 0 1px 2px rgba(10, 10, 10, .04), 0 8px 20px -14px rgba(10, 10, 10, .35); transition: transform .15s ease, box-shadow .15s ease; } .cb-idbar-bell:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(10, 10, 10, .05), 0 10px 24px -12px rgba(10, 10, 10, .4); } .cb-idbar-ping { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--e-danger); box-shadow: 0 0 0 2px var(--e-surface); } @media (max-width: 640px) { .cb-idbar-nom { max-width: 120px; } .cb-idbar-search { display: none; } } .e-topbar { position: sticky; top: 0; z-index: 60; /* ⚠️ 12 px AU-DESSUS, C'ÉTAIT TROP SUR TÉLÉPHONE · 1er septembre 2026. Noah : « je trouve que le header est un peu bas, on peut essayer de le remonter un peu ». Descendu à 6 px ce jour-là, puis à 2 le 4 septembre (« est-ce qu'on pourrait monter légèrement le header afin de gagner un peu plus de place »). env() VAUT ZÉRO DANS UN NAVIGATEUR, et la hauteur de l'encoche quand l'application tourne depuis l'écran d'accueil. On l'écrit donc sans condition : dans Safari on gagne les pixels demandés, en application installée le titre ne passe pas sous la Dynamic Island. Un `2px` nu aurait réglé le premier cas en cassant le second. Sur ordinateur, où la place ne manque pas, les 20 px restent (cf. la règle à 768 px). */ padding: calc(2px + env(safe-area-inset-top, 0px)) 16px 10px; } /* ============================================================ RIEN NE DOIT PASSER AU-DESSUS DE L'EN-TÊTE · 4 septembre 2026 ------------------------------------------------------------ Noah : « quand je monte une page, ça remonte au-dessus du header et j'ai les éléments qui s'affichent en légèrement floutés, alors que je veux pas ça. Je veux que ça puisse pas remonter plus haut que le header, sinon ça fait un peu bizarre. » CE QUI SE PASSAIT, et pourquoi le flou était un mauvais remède. La pilule ne remplit pas toute la hauteur de `.e-topbar` : il reste une bande au-dessus et une en dessous. Le 31 août, ces bandes ont reçu un `backdrop-filter` pour que le contenu qui défile derrière ne se lise plus en clair. Mais FLOUTER N'EST PAS CACHER, un titre flouté reste un titre, et il bouge. On voyait donc la page glisser sous l'en-tête, en trouble, ce qui est plus dérangeant que si on l'avait vue nette : l'œil sait qu'il y a quelque chose et n'arrive pas à le lire. CE QUE ÇA DEVIENT : une bande OPAQUE, peinte de la couleur exacte du haut du dégradé de fond. Le contenu disparaît vraiment. Comme `.e-bg` est `fixed`, le haut de la fenêtre vaut toujours `--e-fond-haut` : la bande et le fond se confondent, on ne voit aucune arête. Seuls les derniers pixels s'estompent, pour que la limite basse ne dessine pas un trait. ⚠️ NE PAS REVENIR À UN backdrop-filter ICI. C'est la correction demandée, et un flou ne pourra jamais faire disparaître ce qui passe dessous. ============================================================ */ /* La regle qui faisait taire ici la bande globale du haut est partie avec la bande elle-meme, le 4 septembre 2026 : aucun aplat ne pouvait egaler un degrade, et elle aplatissait les soixante premiers pixels de chaque page. Voir la note « LE HAUT DE PAGE SOUS L'ENCOCHE » dans tokens.css. Ce qui suit couvre la zone d'encoche dans les espaces, et suffit. */ .e-topbar::before { content: ""; position: absolute; /* ⚠️ LA BANDE REMONTE JUSQU'AU BORD PHYSIQUE DE L'ÉCRAN · 5 septembre 2026, huitième passe sur la barre blanche. La capture de Noah tranche : le texte de l'heure y est NOIR. C'est la signature de `black-translucent`, la barre d'état est transparente et LA PAGE se dessine dessous. Donc cette zone nous appartient, et si elle est blanche, c'est nous qui la laissons blanche. Jusqu'ici elle était couverte par trois choses qui, chacune, peuvent manquer à l'appel : `.e-bg` (un enfant en `fixed`), le canevas (`html`), et le fond du corps de page. Trois maillons, trois occasions de rater, et on les a toutes ratées au moins une fois cette semaine. Celle-ci est le quatrième maillon, et le plus court : l'en-tête lui-même peint la hauteur de l'encoche AU-DESSUS de lui. Il porte `z-index: 60`, il est collé en haut, il ne dépend d'aucun parent. Au repos comme au défilement, la zone est peinte de la couleur exacte du fond. `env()` vaut zéro partout ailleurs : sur un ordinateur ou un téléphone sans encoche, cette règle ne change rien. */ inset: calc(-2px - env(safe-area-inset-top, 0px)) 0 0; z-index: -1; pointer-events: none; /* ⚠️ OPAQUE SUR TOUTE SA HAUTEUR, SANS FONDU · 5 septembre 2026. Noah : « quand je défile, la page remonte au-dessus du header et elle est légèrement floutée · mets une sorte de barre pour qu'on ne voie plus ça ». La bande s'estompait sur ses seize derniers pour cent, c'est-à-dire exactement les dix pixels sous la pilule. Le fondu était là pour éviter une arête franche contre le fond de la page ; il ouvrait en réalité une fenêtre par laquelle le contenu passait, net, sous le titre. L'arête qu'on craignait n'existe pas. `.e-bg` est un dégradé FIXE sur la fenêtre : entre le haut de l'écran et le bas de l'en-tête, soixante- dix pixels sur huit cents, il parcourt un cinquième du chemin entre `--e-fond-haut` et `--e-fond-milieu`, soit moins d'un point sur 255. Mesuré : la jointure ne se voit pas. ⚠️ NE PAS Y REMETTRE DE TRANSPARENCE. Une bande qui s'estompe ne cache rien là où elle s'estompe, c'est le même raisonnement que le flou du 31 août, remplacé pour la même raison : flouter n'est pas cacher, et estomper non plus. */ background: var(--e-fond-haut, #F1EEFF); } /* ============================================================ LA BARRE DU HAUT EST PLUS ÉTROITE QUE LA PAGE · 31 août 2026 ------------------------------------------------------------ Noah : « au niveau de l'espace pro, essaie de faire un peu comme sur Joinly / PrépaEntretien, principalement pour le header et la présentation de la page. » CE QUI CLOCHAIT ICI ÉTAIT L'INVERSE DE CE QU'IL DEMANDE. La pilule d'en-tête n'avait aucune largeur maximale : elle prenait tout l'écran moins 32 px, pendant que le contenu, lui, était plafonné à 1480. Sur un écran de 1920, l'en-tête faisait donc 1856 px pour une page de 1480, il DÉBORDAIT de la page qu'il coiffe, de 188 px de chaque côté. Elle est maintenant plafonnée, et 40 px plus étroite que le contenu : la barre se lit comme POSÉE sur la page, pas comme son bord supérieur. Le chiffre se calcule, il ne se choisit pas - .e-shell fait 1560 moins ses 2 x 32 px de marge, soit 1496 de contenu ; 1432 laisse 32 px de retrait de chaque côté. ============================================================ */ .e-topbar-inner { display: flex; align-items: center; gap: 12px; width: 100%; margin-inline: auto; /* Le titre collait le bord gauche de la pilule (14 px sur mobile, 22 px sur ordinateur, pour un panneau qui fait toute la largeur). Remonté à 20/32 px : sur un bloc aussi large, il faut plus d'air pour que le texte ne semble pas plaqué contre le bord. Demande de Noah, 27 juillet 2026, il l'a signalé deux fois, sur les deux tailles. */ padding: 8px 12px 8px 18px; border-radius: var(--e-r-pill); /* ⚠️ OPAQUE, ET C'EST VOLONTAIRE · 4 septembre 2026. Elle était blanche à 82 % avec un flou d'arrière-plan. Sur un panneau de réglages de 4 000 px, on voyait donc le contenu se déplacer À TRAVERS le titre, c'est la seconde moitié du reproche de Noah. Un verre dépoli est joli tant que rien ne bouge derrière ; ici, quelque chose bouge à chaque geste de défilement. Elle continue de FLOTTER : c'est l'ombre et le retrait qui le disent, pas la transparence. */ background: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: var(--e-sh-panel); } /* CbSousNav : « où on se trouve », icône + catégorie, au-dessus du titre de page, sur les quatre catégories du menu, pas seulement Flow/Circle. Onglets (Agenda/Prestations) seulement pour Flow, posés à droite sur la même ligne : « en dessous ça, ou alors à droite, essaye de me l'intégrer un peu bien ». Gabarit Figma de Noah, boost du 16 septembre 2026. */ /* ⚠️ DEUX CORRECTIONS · 16 septembre 2026, retour après coup sur le repère de page. (1) « tout est bien centré... sauf Flow, il est légèrement plus bas » : `align-items: center` centrait l'icône+nom (courts) sur la hauteur du plus grand des deux enfants de la ligne - or seul Flow a un second enfant (les onglets, plus hauts que l'icône+nom). Sur les trois autres pages, la ligne n'a qu'un seul enfant, donc une hauteur plus COURTE : l'icône+nom s'y retrouvait plus haut qu'à côté des onglets. `min-height` fixe la hauteur de la ligne UNE FOIS pour toutes, qu'il y ait des onglets ou non. (2) « agenda prestations, ce soit vraiment juste à droite de Flow et pas à l'autre bout à droite » : `justify-content: space-between` les envoyait au bord du widget, élargi la semaine dernière. Retiré. */ /* ⚠️ RESSERRÉ · 27 septembre 2026. Noah : « l'écart entre le bloc du haut et le jour/semaine/mois + prestations, un peu plus rapproché ». 20px de marge ici, plus 9px sur le bloc suivant (toolbar Agenda) : l'addition faisait un vide trop net entre la barre d'identité et les vrais outils de la page. */ .cb-sousnav { display: flex; align-items: center; gap: 18px; min-height: 35px; margin-bottom: 12px; } .cb-sousnav-id { display: flex; align-items: center; gap: 9px; } .cb-sousnav-icon { flex: none; width: 22px; height: 22px; border-radius: 7px; } .cb-sousnav-icon-mark { background: var(--e-grad); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 6px -2px rgba(10, 10, 10, .5); } .cb-sousnav-cat { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--e-ink); } .cb-sousnav-tabs { display: flex; align-items: center; gap: 4px; background: var(--e-hover); padding: 4px; border-radius: 999px; } .cb-sousnav-tab { padding: 6px 14px; border: none; border-radius: 999px; background: none; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--e-ink-4); cursor: pointer; transition: background-color .14s ease, color .14s ease; } .cb-sousnav-tab:hover { color: var(--e-ink-2); } .cb-sousnav-tab[aria-current="page"] { background: var(--e-surface); color: var(--e-ink); box-shadow: 0 1px 2px rgba(10, 10, 10, .08); } /* ============================================================ LE RETRAIT DE L'EN-TÊTE EST UNE AFFAIRE D'ORDINATEUR ------------------------------------------------------------ Noah, 31 août 2026 : « sur mobile, j'ai besoin que le header fasse une taille normale en haut, qu'il prenne à peu près tout le haut de la page ». Le min(1432px, 100% - 64px) s'appliquait PARTOUT. Sur un téléphone de 390 px, il retirait 64 px à la pilule, qui perdait en plus les 2 x 16 px de marge de la barre : elle faisait donc 294 px sur 390, soit 48 px de blanc de chaque côté. Sur un grand écran ce retrait fait « barre posée sur la page » ; sur un téléphone, il fait juste « barre trop petite ». Le retrait passe donc dans le media query, avec le reste de ce qui ne vaut que sur grand écran. Sur téléphone, la pilule prend toute la largeur disponible, moins la gouttière de la barre. ============================================================ */ @media (min-width: 768px) { .e-topbar { padding: 20px 32px 8px; } .e-topbar-inner { padding: 13px 24px 13px 32px; /* L'en-tête suit l'élargissement, en gardant son retrait : c'est ce retrait qui la fait lire comme une barre POSÉE sur la page plutôt que comme un bandeau collé au bord. Elle reste donc plus étroite que la coquille, mais proportionnellement, pas d'un nombre fixe qui deviendrait ridicule sur un grand écran. */ max-width: min(1960px, calc(100% - 136px)); } } /* ============================================================ 3 · CARTES DE CONTENU ============================================================ */ .e-card { background: var(--e-surface); border: 1px solid var(--e-line); border-radius: var(--e-r-card); box-shadow: var(--e-sh-card); } /* Une carte cliquable se soulève. 2 px : assez pour être senti, pas assez pour sauter. */ .e-card-link { cursor: pointer; text-align: left; width: 100%; transition: transform .16s ease, box-shadow .16s ease; } .e-card-link:hover { transform: translateY(-2px); box-shadow: var(--e-sh-lift); } .e-card-link:active { transform: translateY(0); } /* La carte « mise en avant » : fond pastel dégradé au lieu du blanc. Réservée à UN bloc par écran (le prochain rendez-vous, l'objectif du mois). Deux, et plus rien ne ressort. */ .e-card-hero { background: var(--e-grad-soft); border: 1px solid #E3E0F8; border-radius: var(--e-r-card); } .e-card-pad { padding: 18px; } @media (min-width: 768px) { .e-card-pad { padding: 20px; } } /* « Aucun rendez-vous à venir » : photo en fond au lieu du dégradé pastel, demandé par Noah le 16 septembre 2026 pour rendre la carte vide plus sympa. ⚠️ PHOTO CHANGÉE + FLOU LÉGER · 28 septembre 2026. Noah a fourni une vraie photo dédiée (« header mobile ») plutôt que salon-photo.jpg, et demande « à chaque fois un petit flou de fond ». Calque à part pour le flou (`.cb-nextcard-bg`), séparé du texte : un `filter: blur()` posé directement sur ce conteneur flouterait aussi le titre et le bouton. */ .cb-nextcard-empty { position: relative; overflow: hidden; border: none; min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; } /* Flou monté à 8px · 28 septembre 2026, deuxième passe. Noah, sur le texte encore difficile à lire : « n'hésite pas à jouer plus sur le flou ». */ .cb-nextcard-bg { position: absolute; inset: -16px; z-index: 0; background-size: cover; background-position: center; filter: blur(8px); } /* Même correctif que `.cbx-hero-photo-veil` (28 septembre 2026, retour dur) : bleu marine de la marque au lieu du noir neutre, plus une lueur douce fixe pour un effet « photo habillée » plutôt qu'« assombrie ». */ /* Voile allégé une nouvelle fois · 29 septembre 2026. Le passage au bleu marine (28 septembre) n'a pas suffi : Noah trouve encore la photo trop sombre, on ne voit pas ce qu'il y a derrière. Ce n'est plus une histoire de teinte (déjà réglée) mais de DOSAGE : 80% de noir au point le plus fort, ça reste une photo quasi éteinte. Le voile tient maintenant transparent plus longtemps (jusqu'à 65% de la hauteur) et plafonne à 50% au lieu de 80%, la moitié moins sombre, juste ce qu'il faut de contraste derrière le texte du bas. */ .cb-nextcard-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(195deg, rgba(10,18,42,.05) 0%, rgba(10,16,40,.14) 65%, rgba(8,14,36,.50) 100%); } .cb-nextcard-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(380px 300px at 85% 10%, rgba(255,255,255,.18), transparent 68%); } .cb-nextcard-content { position: relative; z-index: 2; } /* Noah, 16 septembre 2026 : « pas un bouton noir, mais plus un bouton gris » - sur la photo, le noir se fondait avec l'assombrissement du dégradé. */ /* Éclairci une seconde fois le 16 septembre 2026 : Noah, « rends-le gris un peu plus clair pour que ça respecte un peu la DA qu'il y a là actuellement », le gris ardoise d'origine tranchait trop fort à côté du gris de fond de page, bien plus clair, posé le même jour. Même teinte que ce fond (`--e-fond-haut`), texte foncé plutôt que blanc pour rester lisible sur du gris clair. */ .cb-nextcard-empty .e-btn-primary { background: #E4E4E7; color: var(--e-ink); box-shadow: none; } .cb-nextcard-empty .e-btn-primary:hover { background: #EDEDEF; } /* En-tête de carte : titre à gauche, action à droite, filet dessous. */ .e-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--e-line-2); } /* En-tete cliquable des cartes pliables (editeur de la page de reservation). Le bouton reprend .e-card-head pour garder exactement le meme gabarit : seule la ligne du bas disparait quand la carte est fermee, sinon un filet flottait sous un titre sans contenu. */ .e-card-plier { width: 100%; /* Sans ca le bouton garde la bordure par defaut du navigateur : un cadre gris autour de l'en-tete, alors que .e-card-head ne veut qu'un filet en bas. On remet ce filet explicitement, il est perdu par le border: 0. */ border: 0; border-bottom: 1px solid var(--e-line-2); font: inherit; color: inherit; background: none; cursor: pointer; text-align: left; transition: background-color .15s ease; } .e-card-plier:hover { background: var(--e-bg-alt); } .e-card-plier[aria-expanded="false"] { border-bottom-color: transparent; } .e-card-chev { flex-shrink: 0; display: inline-flex; color: var(--e-ink-4); transition: transform .2s ease; } .e-card-plier[aria-expanded="true"] .e-card-chev { transform: rotate(180deg); } /* ============================================================ 4 · TYPOGRAPHIE ============================================================ `e-eyebrow` (petit, capitales, espacé) au-dessus de `e-h1` (gros, serré) : c'est ce couple qui donne le côté premium. LES TITRES SONT EN COOLVETICA, PAS EN GEIST GRAS · 27 juillet 2026 Ils étaient tous en Geist 800. Noah : « j'aime pas la police d'écriture en gras, je la trouve pas belle ». Il a raison, et le problème est réel : Geist est une police d'INTERFACE, dessinée pour être lisible à 13 px. Poussée à 800 sur un titre de 28 px, elle devient massive et molle, les lettres se touchent, les contreformes se bouchent. Coolvetica est une police d'AFFICHAGE : condensée, un seul poids, faite pour les grandes tailles. C'est elle qui porte les titres du site depuis toujours ; les titres de l'espace connecté n'avaient simplement jamais suivi. Le poids 400 n'est donc pas un affaiblissement, c'est le seul poids que Coolvetica possède, et le rendu est plus contrasté qu'avant, parce que la forme des lettres fait le travail que le gras faisait mal. `e-eyebrow` RESTE en Geist gras : à 11 px en capitales espacées, ce n'est pas un titre mais une étiquette, et Coolvetica condensée y serait illisible. C'est la ligne de partage : la taille, pas le poids. ============================================================ */ .e-eyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: var(--e-sub); } /* 2 · LE SUR-TITRE DE PAGE · seule la variante ACCENT passe à la main. La .e-eyebrow ordinaire reste en petites capitales : elle étiquette des données dans les cartes (« Prochain rendez-vous », les jours des notifications) et sert à repérer, pas à lire. */ .e-eyebrow-accent { font-family: var(--ff-hand); font-style: italic; font-size: 19px; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1; color: var(--e-accent); display: inline-block; transform: rotate(-1.4deg); transform-origin: left center; } /* PLUS DE POLICE MANUSCRITE DANS L'ESPACE PRO · 16 septembre 2026. Noah, sur le nouveau gabarit : « je veux plus la DA un peu écrite au stylo comme on peut avoir dans aucun rendez-vous ce jour-là ». L'espace client (pages-espace.jsx) garde l'écriture manuscrite, elle n'a pas changé, seule l'espace PRO perd ce traitement. Les deux classes reprennent --ff-display, la police des autres titres. */ .cb-espace-pro .e-empty-title { font-family: var(--ff-display); font-style: normal; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--e-ink); } .cb-espace-pro .e-eyebrow-accent { font-family: var(--ff-display); font-style: normal; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--e-ink); transform: none; } /* .e-confirme (« Votre page est prête. ») a la même correction, voir sa définition, plus bas dans ce fichier, pour le détail. */ .cb-espace-pro .e-confirme { font-family: var(--ff-display); font-style: normal; font-weight: 700; letter-spacing: -0.01em; color: var(--e-ink); } .e-h1 { font-family: var(--ff-display); font-size: 30px; font-weight: 400; letter-spacing: -0.015em; line-height: 1.04; color: var(--e-ink); margin: 0; } .e-h2 { font-family: var(--ff-display); font-size: 21px; font-weight: 400; letter-spacing: -0.01em; color: var(--e-ink); margin: 0; } .e-h3 { font-family: var(--ff-display); font-size: 16.5px; font-weight: 400; letter-spacing: -0.008em; color: var(--e-ink); margin: 0; } /* ============================================================ L'ESPACE PRO REPASSE SES TITRES EN GEIST · 30 juillet 2026 ============================================================ Noah : « il y a juste la police d'écriture où je suis pas trop fan, que ce soit votre activité, disponibilités, congés, tout ça, mets la police d'écriture normale ». POURQUOI UN SEUL ENDROIT, ET PAS TRENTE. Les titres de l'espace pro venaient de Coolvetica par TROIS chemins différents : la règle `h1, h2, h3, h4` de tokens.css, les classes `.e-h1/.e-h2/.e-h3` ci-dessus, et une trentaine de `fontFamily: var(--ff-display)` ou `var(--ff-coolvetica)` écrits en ligne dans app-dashboard.jsx. Les reprendre un par un aurait garanti d'en oublier, et le prochain écrit serait reparti en Coolvetica. On redéfinit donc les DEUX jetons sur la racine de l'espace pro. Tout ce qui les lit, par n'importe lequel des trois chemins, suit automatiquement. Un `var(--ff-display)` écrit demain dans cet écran sera correct sans qu'on y pense. PORTÉE : `cb-espace-pro`, et pas `cb-espace`. Cette dernière habille aussi la PAGE PUBLIQUE de réservation et l'espace client, qui gardent Coolvetica, Noah n'a parlé que de l'espace professionnel, et la page publique est ce que voient les clientes. LES POIDS DEVIENNENT VISIBLES, et il fallait s'en occuper. Coolvetica n'a qu'un Regular : les `font-weight: 400` déclarés au-dessus ne produisaient rien. En Geist, variable, de 300 à 700, un 400 donne des titres MAIGRES. On remonte donc les trois classes, sinon le changement de police se lisait comme une perte de hiérarchie. On resserre aussi l'interlettrage : Geist est plus large que Coolvetica, qui est condensée. ============================================================ */ .cb-espace-pro { --ff-display: var(--e-ff); --ff-coolvetica: var(--e-ff); } /* ============================================================ LE BOUTON DE RETOUR, UN SEUL POUR TOUT L'ESPACE PRO ============================================================ Noah : « revoir le bouton tous les paramètres pour le rendre un peu plus sympa, mettre des transitions également ». Il en existait DEUX, sur deux écrans voisins qui font la même chose : celui de « Paramètres de ma page » (une pilule blanche de 48 px) et celui de « Paramètres » (une pilule grise de 30 px, sans survol). Deux objets pour un même geste, c'est un de trop, et le second n'avait aucune réaction au survol, donc rien ne disait qu'il était cliquable. Les transitions sont volontairement de deux ordres : · la flèche RECULE (elle dit où l'on va) ; · la pilule se soulève d'un pixel et prend la teinte d'accent (elle dit qu'on peut appuyer). Rien ne grossit et rien ne clignote : c'est un bouton de navigation, pas une action à célébrer. ============================================================ */ .cb-retour-pilule { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; box-sizing: border-box; padding: 0 20px 0 16px; background: var(--e-surface); border: 1px solid var(--e-line); border-radius: var(--e-r-pill); font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--e-ink); cursor: pointer; box-shadow: var(--e-sh-card); transition: border-color .16s ease, box-shadow .16s ease, color .16s ease, background-color .16s ease, transform .16s ease; } .cb-retour-pilule:hover { border-color: var(--e-accent); color: var(--e-accent-deep); background: var(--e-tint); box-shadow: var(--e-sh-lift); transform: translateY(-1px); } .cb-retour-pilule:active { transform: translateY(0); box-shadow: var(--e-sh-card); } .cb-retour-pilule:focus-visible { outline: 2px solid var(--e-accent); outline-offset: 2px; } .cb-retour-pilule [data-fleche] { display: inline-flex; transition: transform .16s ease; } .cb-retour-pilule:hover [data-fleche] { transform: translateX(-4px); } @media (max-width: 760px) { .cb-retour-pilule { width: 100%; justify-content: center; } } /* ============================================================ LE RETOUR EN FIL D'ARIANE · 30 juillet 2026 ============================================================ Noah, sur la fiche cliente : « juste le bouton toute ma clientèle qu'il faut revoir ». La grosse pilule de 48 px marche bien sur « Paramètres de ma page », où elle est ÉPAULÉE par la pilule du lien public : deux objets de même taille qui se répondent. Sur la fiche cliente elle est seule au-dessus du contenu, et un bouton blanc de 48 px posé dans le vide se lit comme une action principale, alors que c'est une sortie. Ici, un fil d'Ariane : pas de fond, pas de bordure, pas d'ombre. Juste une flèche et un mot, en gris, qui prennent la couleur d'accent au survol. Le poids visuel correspond enfin à l'importance du geste. Et surtout il ne prend PAS toute la largeur sur téléphone, où la pilule ressemblait à un titre de section. ============================================================ */ /* ============================================================ LE RETOUR EN PASTILLE · 30 juillet 2026 · 4e forme, la bonne ============================================================ Quatre essais sur la fiche cliente, et ils apprennent quelque chose : 1. pilule blanche de 48 px → trop lourde, seule au-dessus du contenu elle se lisait comme l'action principale de l'écran ; 2. fil d'Ariane gris (`.cb-retour-fil`, plus bas) → l'inverse : trop effacé, on ne le voyait plus ; 3. flèche dans l'en-tête → Noah n'aime pas qu'elle quitte le contenu ; 4. celle-ci. Ce qui manquait aux trois premières : une SILHOUETTE. Un rectangle de texte, gris ou blanc, ne se distingue de rien. Ici, une pastille ronde blanche porte la flèche, posée sur une pilule teintée d'accent : l'objet a une forme reconnaissable, il est visiblement cliquable, et il reste léger. Il ne prend que la largeur de son libellé, y compris sur téléphone, où la pilule pleine largeur ressemblait à un titre de section. 5e ET DERNIÈRE PASSE · Noah : « il est sympa, mais fais-le un peu plus dans la DA ». Il avait raison : la pilule teintée avec sa pastille blanche était un objet INVENTÉ pour cet endroit. Or la DA du projet n'a qu'un seul bouton secondaire, `.e-btn-ghost` : fond blanc, filet de 1,5 px, pilule. En fabriquer un autre, c'était ajouter un dialecte. On repart donc du bouton maison, avec exactement deux écarts, et chacun a sa raison : · la flèche recule au survol (elle dit où l'on va) ; · le filet et le texte prennent l'accent au survol, comme partout ailleurs. Et il est DÉCOLLÉ de la carte qui suit, il était collé dessus, ce que Noah a signalé en même temps. L'espacement vit ici plutôt qu'en style en ligne : c'est une propriété du composant, pas de l'écran qui l'utilise. ============================================================ */ .cb-retour-chip { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; box-sizing: border-box; margin-bottom: 18px; padding: 0 18px 0 14px; background: var(--e-surface); border: 1.5px solid var(--e-line); border-radius: var(--e-r-pill); font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--e-ink); cursor: pointer; transition: border-color .16s ease, color .16s ease, background-color .16s ease; } .cb-retour-chip-rond { display: inline-flex; flex-shrink: 0; color: var(--e-ink-4); transition: transform .16s ease, color .16s ease; } .cb-retour-chip:hover { background: var(--e-hover); border-color: var(--e-accent); color: var(--e-accent-deep); } .cb-retour-chip:hover .cb-retour-chip-rond { transform: translateX(-3px); color: var(--e-accent); } .cb-retour-chip:focus-visible { outline: 2px solid var(--e-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .cb-retour-chip, .cb-retour-chip-rond { transition: none; } } .cb-retour-fil { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 4px; margin-left: -4px; background: none; border: none; border-radius: var(--e-r-pill); font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--e-sub); cursor: pointer; transition: color .15s ease, background-color .15s ease; } .cb-retour-fil:hover { color: var(--e-accent-deep); background: var(--e-tint); } .cb-retour-fil:focus-visible { outline: 2px solid var(--e-accent); outline-offset: 2px; } .cb-retour-fil [data-fleche] { display: inline-flex; transition: transform .15s ease; } .cb-retour-fil:hover [data-fleche] { transform: translateX(-3px); } @media (prefers-reduced-motion: reduce) { .cb-retour-fil, .cb-retour-fil [data-fleche] { transition: none; } } /* L'entrée d'une page ouverte depuis un sommaire · elle glisse de 10 px et se révèle. Sans ça, cliquer une tuile de « Paramètres » remplaçait brutalement l'écran et on doutait d'avoir changé de page. */ @keyframes eSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .e-page-enter { animation: eSlideIn .26s cubic-bezier(0.22, 1, 0.36, 1) both; } /* ⚠️ TRANSITION ENTRE LES PAGES DE LA VITRINE · 22 septembre 2026. Noah : « des petites transitions sympas entre les pages [...] quand je clique sur se connecter ou s'inscrire, et pareil quand je navigue sur toute la landing ». `
` (boot.jsx) change de `key` à chaque page, donc se démonte et remonte, sans qu'aucune animation n'accompagne jamais ce remplacement brutal. Un fondu-montée plus large que `.e-page-enter` (qui sert, lui, aux sous-onglets à l'intérieur d'une même page) : la page entière glisse légèrement et apparaît. */ @keyframes cbPageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .cb-page-enter { animation: cbPageIn .38s cubic-bezier(0.22, 1, 0.36, 1) both; } @media (prefers-reduced-motion: reduce) { .e-page-enter, .cb-page-enter { animation: none; } .cb-retour-pilule, .cb-retour-pilule [data-fleche] { transition: none; } } .cb-espace-pro .e-h1 { font-weight: 700; letter-spacing: -0.028em; } .cb-espace-pro .e-h2 { font-weight: 700; letter-spacing: -0.022em; } .cb-espace-pro .e-h3 { font-weight: 650; letter-spacing: -0.014em; } /* Les

..

nus de l'espace pro (ceux qui ne portent pas de classe `e-h*`) : la règle de tokens.css leur donnait Coolvetica en poids unique. Le jeton redéfini ci-dessus règle la police ; il reste à leur donner un poids, sinon ils héritent du 400 par défaut du navigateur. */ .cb-espace-pro h1, .cb-espace-pro h2, .cb-espace-pro h3, .cb-espace-pro h4 { font-weight: 700; letter-spacing: -0.02em; } .e-sub { font-size: 13.5px; line-height: 1.5; color: var(--e-sub); } /* Les chiffres ont leur propre police : Sora, via --ff-num (cf. tokens.css). Ni la police des titres, condensée, un « 217 € » y devient étroit et se confond avec un titre, ni celle du corps de texte. Un montant se lit d'un coup d'œil et s'aligne en colonne : c'est un troisième usage. */ .e-num { font-family: var(--ff-num); font-size: 27px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--e-ink); } /* Sur mobile le titre peut grossir : il n'y a rien à sa droite. */ @media (max-width: 767px) { .e-h1 { font-size: 32px; letter-spacing: -0.018em; line-height: 1.08; } } /* ============================================================ 5 · BOUTONS ============================================================ Tous en pilule. Le primaire est le seul élément en dégradé plein de l'écran, c'est ce qui le rend évident. ============================================================ */ .e-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: var(--e-r-pill); border: none; /* POLICE DE TEXTE · cf. l'explication complète dans tokens.css. Les boutons sont passés par Geist 800 (trop gras), puis Coolvetica (pas assez lisible), et se posent ici : Geist en 600. Assez marqué pour qu'un bouton se distingue, assez neutre pour se lire d'un coup. NE PAS remettre la police d'affichage sur les boutons. */ font-family: var(--e-ff); font-size: 14px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; white-space: nowrap; transition: transform .14s ease, background-color .14s ease, box-shadow .14s ease; } .e-btn:active { transform: scale(0.97); } .e-btn-primary { background: var(--e-grad); color: #fff; box-shadow: var(--e-sh-accent); } .e-btn-primary:hover { transform: translateY(-1px); } .e-btn-ghost { background: var(--e-surface); color: var(--e-ink); border: 1.5px solid var(--e-line); } .e-btn-ghost:hover { background: var(--e-hover); } .e-btn-quiet { background: #F4F4F6; color: var(--e-ink-2); } .e-btn-quiet:hover { background: #ECECEE; } .e-btn-danger { background: var(--e-danger-tint); color: var(--e-danger); } /* Tailles. 46 px de haut sur mobile : c'est le minimum confortable au pouce. */ .e-btn-lg { min-height: 52px; padding: 0 26px; font-size: 15px; width: 100%; } /* PETITS BOUTONS : RETOUR À GEIST · 27 juillet 2026. Noah, sur les pastilles de section de « Ma page » : « on arrive mal à les lire ». Il a raison, et c'est ma règle de partage qui était mal appliquée. J'avais posé : la taille décide, pas le poids, au-delà de 17 px c'est un titre, donc Coolvetica. Mais j'ai mis Coolvetica sur TOUS les boutons, y compris les petits. Or un petit bouton n'est pas un titre : c'est une étiquette de navigation. À 12,5 px, une display condensée à graisse unique perd, surtout en blanc sur indigo et surtout sur un libellé long comme « Disponibilités & congés ». Les gros boutons gardent Coolvetica (libellés courts, grande taille, ce sont de vraies actions). Les petits reviennent à Geist, en 600 : lisible sans être le gras massif que Noah n'aime pas. */ .e-btn-sm { min-height: 34px; padding: 0 14px; font-family: var(--e-ff); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; } /* Bouton rond, icône seule. */ .e-btn-icon { width: 40px; min-height: 40px; padding: 0; border-radius: 50%; background: var(--e-surface); border: 1px solid var(--e-line); color: var(--e-ink-2); } .e-btn-icon:hover { background: var(--e-hover); } /* ============================================================ 6 · ÉTIQUETTES ET PASTILLES ============================================================ */ .e-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--e-r-pill); font-size: 11.5px; font-weight: 800; white-space: nowrap; } .e-tag-accent { background: var(--e-tint); color: var(--e-accent-deep); } .e-tag-grad { background: var(--e-grad); color: #fff; } .e-tag-ok { background: var(--e-ok-tint); color: var(--e-ok); } .e-tag-warn { background: var(--e-warn-tint); color: var(--e-warn); } .e-tag-danger { background: var(--e-danger-tint); color: var(--e-danger); } .e-tag-quiet { background: #F4F4F6; color: var(--e-sub); } /* Pastille de 6 px qui précède une statistique. Elle code la catégorie sans ajouter de texte. */ .e-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; display: inline-block; } /* ============================================================ 7 · AVATARS ============================================================ */ .e-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: var(--e-grad); color: #fff; font-weight: 800; letter-spacing: -0.01em; } /* ============================================================ 8 · NAVIGATION LATÉRALE (ordinateur) ============================================================ Le repère actif est un trait vertical de 3 px à gauche, plus un fond très pâle. Pas de pilule pleine : trop lourd répété huit fois. ============================================================ */ .e-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px 14px; } /* ============================================================ LES INTERTITRES DU MENU · écrits pour la première fois le 4 septembre 2026 ------------------------------------------------------------ Noah : « j'aime pas du tout la police d'écriture que t'as utilisée pour Mon compte, Mon activité, Mes clients, Mon quotidien. Ça rend vraiment pas bien et c'est vraiment trop proche du bord sur la gauche. » Les deux reproches avaient la même cause, et elle est bête : `.e-nav-label` N'EXISTAIT PAS DANS CETTE FEUILLE. La classe était posée dans le JSX depuis le 1er septembre, jamais habillée. Ces quatre mots s'affichaient donc en corps de texte ordinaire, même taille, même graisse et presque même couleur que les entrées qu'ils annoncent, collés à 10 px du bord parce que c'était le seul retrait du panneau. Un intertitre ne se lit pas, il se REPÈRE : on le voit en balayant la colonne pour trouver la bonne famille. D'où le traitement inverse de celui d'une entrée, plus petit, plus espacé, en capitales, et en gris clair. Le contraste de FORME remplace le contraste de taille : sans lui, quatorze lignes se suivent sans qu'on distingue les panneaux des portes. ⚠️ PAS DE PASTILLE DE COULEUR AU DÉBUT. Il y en a eu une, le 4 septembre au matin, reprenant la teinte du groupe. Noah, le soir même, deux fois : « je veux pas un rond de couleur au début, j'aime pas du tout », puis « supprime-moi les petites pastilles de couleur ». Il a raison et l'argument tient en une phrase : cette pastille ne codait RIEN. Personne n'apprend que le rose veut dire « mes clients », il aurait fallu la retrouver ailleurs dans l'interface pour que la couleur devienne un repère, et elle n'existait qu'ici. Quatre points de couleur dans une colonne de navigation, c'est de la décoration qui se fait passer pour de l'information. Le contraste de forme (capitales petites et espacées contre libellés gras) suffit à séparer les familles. Ne pas la remettre. ============================================================ */ /* ⚠️ ILS ÉTAIENT LÀ, ET ON NE LES VOYAIT PAS · 5 septembre 2026. Noah : « t'as enlevé toutes les catégories · quand on clique sur Plus il n'y a plus aucune catégorie ». Elles n'avaient pas bougé, vérifié en ligne, sur téléphone : la feuille « Plus » affiche bien ses quatre familles, et les réglages leurs deux. Le problème n'était pas qu'elles manquent, c'est qu'elles ne se voyaient pas : 10 px, en capitales, dans le gris le plus clair de la palette. À l'écran d'un ordinateur, en capturé à 200 %, ça se lit très bien. Sur un téléphone de six pouces tenu à bout de bras, non. « Personne ne les voit » et « elles ne sont pas là » ont exactement le même coût : un intertitre qu'on ne perçoit pas ne sépare rien. 11,5 px et l'encre secondaire, au lieu de 10 et de l'encre la plus pâle. Elles restent des intertitres, petites capitales espacées, moitié moins grasses à l'œil que les entrées qu'elles annoncent, mais elles se voient. */ .e-nav-label { display: flex; align-items: center; padding: 0 14px; margin: 18px 0 7px; font-family: var(--e-ff); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: var(--e-sub); user-select: none; } /* Le premier intertitre est déjà décollé par le rembourrage du panneau : une marge de plus creuserait un trou en haut du menu. */ .e-nav > .e-nav-label:first-child, .e-nav > *:first-child .e-nav-label { margin-top: 2px; } .e-nav-item { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 18px; border: none; /* Pilule visible EN PERMANENCE, pas juste au survol · gabarit Figma de Noah, 16 septembre 2026, les boutons de menu y sont des pilules grises de bout en bout, jamais transparentes. Toujours du gris neutre, jamais de couleur, conformément à la demande d'origine (cf. le commentaire juste en dessous). */ background: #F1F1F3; border-radius: 999px; font-family: inherit; font-size: 14.5px; font-weight: 700; color: var(--e-sub); text-align: left; cursor: pointer; transition: background-color .14s ease, color .14s ease; } /* GRIS NEUTRE, PAS DE COULEUR · demande de Noah sur le nouveau design (clientbase.fr/design/pro) : boutons de menu plus grands, et surtout plus de fond teinté (lavande) ni de noir plein sur l'item actif - « un truc un peu gris, sinon ça fait vraiment beaucoup ». Le même choix a déjà été fait pour le fond dégradé du bloc d'identité plus haut (retiré le 31 juillet) : cohérent de l'appliquer ici aussi. */ .e-nav-item:hover { background: #EAEAED; color: var(--e-ink-2); } /* ============================================================ LE MENU RÉINVENTÉ · 16 septembre 2026, TROISIÈME passe ------------------------------------------------------------ Noah, après le fond gris fixe (16/9) puis l'ombre en guise de contour (16/9, tour suivant) : « j'aime toujours pas le style... tout le cadre, tout le contour gris, je suis pas fan. Réinvente-moi complètement le style. Fais-moi quelque chose de sympa, d'animé surtout principalement. » Les boutons perdent tout fond et tout contour propres : plus de pilule grise, plus d'ombre. Le seul repère visuel est désormais UNE pastille blanche qui GLISSE d'un bouton à l'autre (`.e-nav-indicator`, mesurée en JS dans ProSidebar sur le vrai bouton actif), l'« animé » qu'elle demande, plutôt qu'un état qui apparaît/disparaît d'un coup. Portée : la navigation principale du menu desktop seulement (`.e-shell-nav .e-nav`), Paramètres (`.cb-sidebar-bas`, hors de ce `