/* ========================================================================== ESPACE CLIENT — 1. JETONS ========================================================================== Le socle de valeurs du nouvel espace client. RÈGLE DE COHÉRENCE AVEC L'ADMIN -------------------------------- Les deux espaces ont deux SCHÉMAS DE COULEUR différents, mais UNE SEULE grammaire. Concrètement : • Les couleurs → propres au client (sombre + vert #A5CC00). • Les espacements → MÊMES NOMS, MÊMES VALEURS que l'admin. • Les tailles de type → MÊMES NOMS, MÊMES VALEURS que l'admin. • Les rayons → MÊMES NOMS, MÊMES VALEURS que l'admin. Autrement dit : `--c-radius-sm` vaut exactement ce que vaut `--app-radius-sm` côté admin. Un suffixe (xs, sm, md, lg…) désigne TOUJOURS la même dimension des deux côtés. Sans cette règle, « sm » voudrait dire 4px ici et 8px là-bas — l'erreur classique. La duplication des valeurs est ASSUMÉE : le client ne charge pas root.css (il serait alors couplé à l'admin). On duplique les valeurs, jamais la grammaire. Correspondance de référence — root.css : espacements : xs .25 · sm .5 · (base) 1 · md 1.5 · lg 2 · xl 3 · xxl 4 (rem) rayons : sm 4 · (base) 8 · lg 12 · xl 16 · pill 9999 (px) typo : xs .75 · sm .875 · base 1 · md 1.125 · lg 1.25 · xl 1.5 · xxl 2 · xxxl 2.5 (rem) ========================================================================== */ .c-body { /* ---- COULEURS — propres au client ---------------------------------- Gris volontairement NEUTRES (aucune dominante) pour que le vert soit la seule couleur de l'interface, et que les cartes gardent toute leur intensité. */ /* Fonds, du plus profond au plus élevé */ --c-bg: #0C0E10; --c-elev-1: #14171A; --c-elev-2: #1C2024; --c-elev-3: #262B30; /* Traits — BLANC TRANSPARENT, et non un gris opaque. Un filet opaque (#242A2F) ne fonctionne que sur le fond uni pour lequel il a été choisi. Dès qu'une photo passe derrière, il s'INVERSE : plus clair que le fond sur une zone sombre, plus sombre sur une zone claire — et il disparaît quand les deux se croisent. Un blanc transparent éclaircit TOUJOURS ce qu'il recouvre : le filet reste lisible sur n'importe quelle image. Sur le fond uni, le rendu est identique à l'ancien gris (12 % de blanc sur --c-bg redonne #2A2C2E), la hiérarchie visuelle ne bouge donc pas. */ --c-line: rgba(255, 255, 255, .12); --c-line-soft: rgba(255, 255, 255, .08); /* Texte */ --c-ink: #EAEEF0; --c-ink-dim: #98A2A8; --c-ink-faint: #7D878D; /* 4,9:1 sur --c-elev-1 (AA), #6C767C avant le 16/10 : 3,9:1 */ /* Gris du texte secondaire posé sur une PHOTO. Plus clair que --c-ink-dim : c'est lui qui permet d'alléger le voile de fond sans passer sous le seuil de contraste. Sur fond uni, il ne sert pas — la hiérarchie reste celle de --c-ink-dim. */ --c-ink-on-photo: #C2C9CE; /* Primaire client — #A5CC00 (choix du client). Couleur CLAIRE : tout texte posé dessus doit être sombre (--c-on-accent). `faint` sert aux survols, `soft` aux états actifs : deux intensités du même vert, pour que survol et sélection se distinguent sans changer de couleur. */ --c-accent: #A5CC00; --c-accent-hover: #8FB200; --c-accent-soft: color-mix(in srgb, var(--c-accent) 14%, transparent); --c-accent-faint: color-mix(in srgb, var(--c-accent) 7%, transparent); --c-on-accent: #0C0E10; /* Sémantique — le LINK™ conserve son violet, identité déjà établie dans le produit ; le reste suit les mêmes usages que l'admin. Le DÉGRADÉ d'achat reprend exactement celui de l'admin (root.css : --app-purple-gradient-from / -to, .app-btn--purple). */ --c-link: #A78BFA; --c-link-soft: color-mix(in srgb, var(--c-link) 14%, transparent); --c-link-from: #A78BFA; --c-link-to: #5B21B6; --c-link-strong: #7C3AED; --c-warning: #F0A73C; /* attention · événement certifié */ /* L'encre POSÉE SUR l'orange — un rôle, un nom, comme --c-on-accent. Même valeur aujourd'hui : dans cet espace, une pastille pleine porte toujours l'encre sombre du fond de page. */ --c-on-warning: var(--c-on-accent); /* CRÉATION DE CARTE — LE VERT DE LA MARQUE, sans invention. Le mapping sémantique est posé une fois pour toutes dans root.css (admin) et vaut pour toute l'application : Carte → VERT · Événement → ORANGE · Récompense → VIOLET Créer une carte est donc vert, et rien d'autre. L'orange dirait « événement », le violet « achat ». C'est --c-accent, le vert de l'espace client — pas une nuance à part. Les deux espaces ont des palettes différentes (l'admin est clair, le client sombre) mais chacun n'a QU'UN vert : ici #A5CC00, celui des chiffres, de la pastille de panier et de l'onglet « Mes cartes ». Un second vert sur le seul bouton de création aurait fait deux verts dans la même barre. APLAT, PAS DÉGRADÉ — c'est aussi la doctrine admin : .app-btn--success est un aplat, seul le CTA d'ACHAT (.app-btn--purple) reçoit un dégradé. Le bouton violet garde donc le sien, le vert n'en prend pas. Encre SOMBRE, comme .c-btn--primary et --c-on-accent : c'est déjà la règle du vert dans cet espace, on ne la change pas pour un bouton. */ --c-create: var(--c-accent); --c-create-soft: var(--c-accent-soft); --c-create-from: var(--c-accent); --c-create-to: var(--c-accent-hover); --c-create-strong: var(--c-accent); --c-on-create: var(--c-on-accent); --c-danger: #F26B7E; /* L'encre POSÉE SUR le rouge (17/09) — un rôle, un nom, comme --c-on-accent : la valeur que .app-btn--danger écrit en dur (client/components.css), reprise par le bouton rouge animé (client/action-fx.css, section 7). Sombre, le rouge étant clair : 6,6:1 sur --c-danger. */ --c-on-danger: #1A0A0D; /* ---- JETONS DE CHAMP ------------------------------------------------- UN JETON = UN RÔLE, jamais une valeur. C'est précisément l'erreur des --app-* qu'on ne reproduit pas : --app-white y sert 103 fois de fond et 80 fois d'encre, si bien qu'on ne peut plus changer l'un sans l'autre. Ici, un champ a son fond, sa bordure, sa bordure au survol et son anneau de focus — quatre rôles, quatre noms, même s'ils empruntent aujourd'hui leurs valeurs à des jetons existants. */ --c-field-bg: var(--c-elev-2); --c-field-bg-disabled: var(--c-elev-1); --c-field-border: var(--c-line); --c-field-border-hover: rgba(255, 255, 255, .22); --c-field-ring: color-mix(in srgb, var(--c-accent) 35%, transparent); --c-placeholder: var(--c-ink-faint); /* ---- ALIAS SÉMANTIQUES ---------------------------------------------- « Réussi » et « action principale » sont deux choses différentes, même quand elles partagent une couleur : sans ces alias, un composant qui doit dire l'un dirait forcément l'autre. Le jour où le vert de réussite divergera du vert de marque, il n'y aura qu'une ligne à changer. */ --c-success: var(--c-accent); --c-success-soft: var(--c-accent-soft); --c-danger-soft: color-mix(in srgb, var(--c-danger) 14%, transparent); --c-danger-hover: color-mix(in srgb, var(--c-danger) 80%, #000); --c-warning-soft: color-mix(in srgb, var(--c-warning) 14%, transparent); --c-neutral-soft: color-mix(in srgb, var(--c-ink) 8%, transparent); /* Information — DISTINCTE du violet LINK™, comme l'admin sépare --app-info de --app-purple. Sans quoi un simple message d'information porterait la couleur qui signifie « acheter des LINK ». */ --c-info: #6FA8FF; --c-info-soft: color-mix(in srgb, #6FA8FF 14%, transparent); /* Texte posé sur le dégradé LINK™ (pendant de --c-on-accent). */ --c-on-link: #FFFFFF; /* Bandeaux — concept jetonisé côté admin (--app-banner-*). */ --c-banner-info-bg: color-mix(in srgb, var(--c-info) 13%, transparent); --c-banner-info-text: #CFE0FF; --c-banner-warn-bg: color-mix(in srgb, var(--c-warning) 13%, transparent); --c-banner-warn-text: #F6D6A3; /* Ombres — même échelle de noms que l'admin (--app-shadow-sm/-md/-lg). */ --c-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --c-shadow-md: 0 4px 12px -4px rgba(0, 0, 0, .5); --c-shadow-lg: 0 12px 32px -12px rgba(0, 0, 0, .7); /* ---- VERRE DÉPOLI --------------------------------------------------- Une seule recette pour toutes les surfaces translucides : widgets et barres de navigation. Trois jetons, donc un seul endroit à régler. 10px et non 20 : sur une surface de 60 à 72 px de haut, un rayon de 20 couvre déjà plus que toute la hauteur — le fond y est un aplat, et 14 n'aurait rien changé de perceptible. C'est vers 10 que la structure de l'image derrière redevient devinable, donc que le flou se lit comme du VERRE et non comme un cache. En dessous de 8, les formes redeviennent identifiables et l'effet se perd. À noter : réduire le rayon ne fait rien gagner en performance — le coût d'un flou gaussien ne dépend pas de son rayon. C'est un choix d'aspect. RAMENÉ À 6 px (07/09). À 10 le fond de page se réduisait à des aplats de couleur : on ne devinait plus l'image, seulement une teinte. À 6 la STRUCTURE reste lisible — on reconnaît le terrain, le grain, la lumière — tout en restant assez brouillée pour qu'aucun détail ne dispute la lecture du texte posé dessus. C'est le verre d'une vitre, pas d'un dépoli. */ --c-glass-blur: 6px; --c-glass-bg: color-mix(in srgb, var(--c-elev-1) 55%, transparent); --c-glass-line: color-mix(in srgb, var(--c-ink) 15%, transparent); /* Les barres sont plus OUVERTES que les widgets, pas plus fermées : à 72 % la tête se lisait comme un aplat de couleur posé sur la photo, pas comme du verre. Ce que la transparence coûte en contraste est repris par le texte, éclairci sur les écrans qui ont une photo (--c-ink-on-photo). */ --c-glass-bg-bar: color-mix(in srgb, var(--c-elev-1) 50%, transparent); /* ---- MOUVEMENT — même durée que l'admin (--app-transition) ----------- */ --c-transition: 200ms ease; /* ---- PLANS DE SUPERPOSITION ------------------------------------------ Échelle PROPRE au client, volontairement basse et contiguë. Toute feuille réutilisée depuis l'admin doit être portée sur cette échelle : les valeurs admin (1000 à 9999) passeraient au-dessus de tout. */ --c-z-head: 30; --c-z-nav: 40; --c-z-pop: 45; /* boîte panier, menus déroulants */ --c-z-scrim: 50; --c-z-side: 60; /* Une modale couvre la page ET le menu technique ; une notification reste lisible au-dessus d'elle. D'où sa place entre les deux. */ --c-z-modal: 65; --c-z-toast: 70; /* Étincelles du bouton LINK™ : au-dessus de la tête (30), des menus déroulants et de la boîte panier (45) — elles doivent pouvoir sortir de ces boîtes — mais SOUS le voile du menu technique (50). Menu ouvert, la page est mise en retrait : les étincelles n'ont pas à la percer. */ --c-z-fx: 46; /* Les mêmes étincelles quand une modale ouverte contient un bouton animé (client/action-fx.css, 6 bis — la demande de validation de l'aperçu d'une carte) : au-dessus des modales (65), sous les notifications (70). */ --c-z-fx-modale: 66; /* ---- TYPOGRAPHIE — alignée sur l'admin ------------------------------ Pile de polices RECOPIÉE À L'IDENTIQUE de root.css (--app-font-family). La police de marque « neulis-neue » vient du même kit Typekit, chargé par les trois gabarits : admin, client et vue publique écrivent donc avec exactement la même police. */ --c-font: 'neulis-neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --c-font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace; /* Interligne du corps — même valeur que l'admin (--app-line-height). Volontairement serré : il convient aux libellés, aux cellules et aux boutons, qui constituent l'essentiel de l'interface. */ --c-line-height: 1.2; /* Interligne des PHRASES (baseline, descriptions, notifications). Ajout propre au client, qui affiche plus de texte suivi que l'admin : à 1,2 un paragraphe devient illisible. On ne touche pas au jeton de base. */ --c-line-height-prose: 1.5; --c-font-size-xs: 0.75rem; --c-font-size-sm: 0.875rem; --c-font-size-base: 1rem; --c-font-size-md: 1.125rem; --c-font-size-lg: 1.25rem; --c-font-size-xl: 1.5rem; --c-font-size-xxl: 2rem; --c-font-size-xxxl: 2.5rem; /* ---- ESPACEMENTS — alignés sur l'admin ------------------------------ */ --c-spacer-xs: 0.25rem; --c-spacer-sm: 0.5rem; --c-spacer: 1rem; --c-spacer-md: 1.5rem; --c-spacer-lg: 2rem; --c-spacer-xl: 3rem; --c-spacer-xxl: 4rem; /* ---- RAYONS — alignés sur l'admin ----------------------------------- */ --c-radius-sm: 4px; --c-radius: 8px; --c-radius-lg: 12px; --c-radius-xl: 16px; --c-radius-pill: 9999px; /* ---- GABARIT — propre à la coquille client -------------------------- */ --c-topbar-height: 60px; --c-navbar-height: 56px; /* laisse respirer les boutons au gabarit admin */ --c-tabbar-height: 58px; /* barre d'onglets du bas, mobile uniquement */ /* Place à réserver sous le contenu : hauteur + encoche. Écrit UNE fois. */ --c-tabbar-space: calc(var(--c-tabbar-height) + env(safe-area-inset-bottom)); --c-side-width: 288px; /* LA COLONNE DE CÔTÉ DES ÉCRANS QUI EN ONT UNE — « Mes cartes », « Mes albums », « Acheter des LINK™ ». Écrite ICI depuis le 29/09 : les trois l'avaient chacune la leur (240, 280, 312) et Julien les veut uniformes, à la mesure de « Mes albums », la plus large. */ --c-panneau: 312px; --c-container: none; /* pleine largeur : le contenu suit la fenêtre */ /* Largeur d'un écran de FORMULAIRE. Un formulaire étalé sur 1900 px oblige l'œil à traverser l'écran entre le libellé et le champ ; on le borne. Valeur recopiée de --app-container (root.css:85), pour que le client et l'administration cadrent leurs formulaires à l'identique. */ --c-container-narrow: 1200px; /* Hauteur de la tête collante (.c-head = topbar + navbar). Écrite UNE fois ici parce que DEUX choses en dépendent : le décalage des éléments qui se collent sous elle, et la hauteur utile restante d'un écran. Une valeur recopiée à la main dans une feuille d'écran se désynchroniserait au premier ajustement de barre. */ --c-head-height: calc(var(--c-topbar-height) + var(--c-navbar-height)); } /* Réduction responsive de la typographie — MÊME principe et MÊME point de rupture que l'admin (root.css, @media max-width: 768px), pour que les deux espaces se comportent identiquement au passage sur téléphone. */ @media (max-width: 768px) { .c-body { --c-font-size-xs: 0.6875rem; --c-font-size-sm: 0.8125rem; --c-font-size-base: 0.875rem; --c-font-size-md: 0.9375rem; --c-font-size-lg: 1.1rem; --c-font-size-xl: 1.25rem; --c-font-size-xxl: 1.5rem; } }