/* ================================================================ ZaZa — Variables CSS par thème Appliquées sur html[data-theme="jour"|"nuit"] Toutes les variables --zz-* sont héritées par l'ensemble du DOM. ---------------------------------------------------------------- DEUX thèmes seulement — « jour » et « nuit » — plus un mode « auto » qui n'est PAS un thème CSS : il est résolu en jour ou nuit par zaZaSetTheme() (index.html) selon prefers-color-scheme. Le choix brut de l'utilisateur reste lisible sur html[data-theme-choice] si un composant en a besoin. Chaque thème est une DÉCLINAISON de la charte (zaza-brand.css) : son accent est toujours pris dans la palette --z-*, jamais inventé. Tous les couples texte/fond ci-dessous passent WCAG AA (≥ 4.5:1), la plupart AAA (≥ 7:1) — ratios en commentaire. MIGRATION : les clés historiques a→e restent acceptées comme ALIAS (a, c, e = sombres → nuit ; b, d = clairs → jour) pour que les réglages déjà en localStorage ne cassent pas si la migration JS n'a pas encore tourné. À retirer une fois le parc migré. Contrat de nommage : --zz-accent accent de marque du thème (couleur d'ACTION) --zz-on-accent couleur de TEXTE posée SUR l'accent (≥ 4.5:1) --zz-warn surface d'alerte / promo (jaune de charte) --zz-on-warn texte posé SUR --zz-warn --zz-warn-text le jaune utilisé COMME TEXTE sur le fond du thème. ⚠ N'utiliser --zz-warn en couleur de texte nulle part : #FFC400 sur blanc = 1.6:1. --zz-border séparation DÉCORATIVE (cartes, filets). Faible par construction, ne porte aucune information. --zz-border-strong contour d'un CONTRÔLE dont la bordure est la seule délimitation (champ de saisie, bouton fantôme). Tenu à ≥ 3:1 — WCAG 1.4.11. --zz-yellow* ALIAS historiques de --zz-accent. Le nom ment désormais (l'accent n'est plus jaune) mais il est conservé pour ne pas toucher les ~200 usages existants. À retirer progressivement. ================================================================ */ /* ── THÈME NUIT — encre profonde + accent bleu clair ───────────── Défaut historique. Sert aussi de repli :root. */ [data-theme="nuit"], [data-theme="a"], [data-theme="c"], [data-theme="e"], :root { --zz-accent: var(--z-blue-lt); /* #4A90F0 — 5.98:1 sur fond */ --zz-accent-dim: rgba(74,144,240,.16); --zz-accent-dark: var(--z-blue); --zz-on-accent: var(--z-ink); /* 5.10:1 sur l'accent */ --zz-accent-rgb: var(--z-blue-lt-rgb); --zz-warn: var(--z-yellow); --zz-on-warn: var(--z-ink); /* 10.25:1 */ --zz-warn-text: var(--z-yellow); /* 12.56:1 sur fond nuit */ --zz-black: #070F1C; --zz-dark: #0B1728; --zz-card: #101E33; --zz-card2: #17263D; --zz-border: #24354F; /* décoratif */ --zz-border-strong: #5C7291; /* 3.90:1 sur fond, 3.40:1 sur carte */ --zz-white: #FFFFFF; /* 19.19:1 */ --zz-dim: #AEBED4; /* 10.16:1 — AAA */ --zz-muted: #8494AB; /* 6.22:1 — AA */ --app-bg: #070F1C; --app-text: #FFFFFF; --zz-nav-bg: #0B1728; --zz-nav-shadow: rgba(0,0,0,.5); } /* ── THÈME JOUR — clair haute lisibilité + accent bleu marque ──── Calibré pour l'usage en extérieur : fond très clair, texte encre, séparation par bordure franche plutôt que par ombre (plus net au soleil et moins coûteux à composer sur les Android d'entrée). */ [data-theme="jour"], [data-theme="b"], [data-theme="d"] { --zz-accent: var(--z-blue); /* #0A4FC4 — 7.17:1 sur blanc */ --zz-accent-dim: rgba(10,79,196,.10); --zz-accent-dark: var(--z-blue-dk); --zz-on-accent: #FFFFFF; /* 7.17:1 sur l'accent */ --zz-accent-rgb: var(--z-blue-rgb); --zz-warn: var(--z-yellow); --zz-on-warn: var(--z-ink); /* 10.25:1 */ --zz-warn-text: #8A5A00; /* le jaune de charte assombri : #FFC400 sur blanc = 1.6:1 */ --zz-black: #F2F5F9; /* fond clair */ --zz-dark: #E7ECF4; --zz-card: #FFFFFF; --zz-card2: #F2F5F9; --zz-border: #D7DEE9; /* décoratif */ --zz-border-strong: #7E8CA0; /* 3.42:1 sur carte, 3.12:1 sur fond */ --zz-white: var(--z-ink); /* texte sombre — 14.98:1 */ --zz-dim: #46586F; /* 7.28:1 — AAA */ --zz-muted: #5A6B85; /* 4.95:1 sur le fond — AA (#63748D y tombait à 4.35:1) */ --app-bg: #F2F5F9; --app-text: var(--z-ink); --zz-nav-bg: #FFFFFF; --zz-nav-shadow: rgba(14,32,56,.12); } /* ================================================================ ACCENT AU CHOIX — html[data-accent="bleu"|"cyan"|"vert"] ---------------------------------------------------------------- Le passager choisit sa couleur d'ACTION parmi les couleurs de la charte. Absent ou "bleu" = comportement par défaut ci-dessus, donc rien à écrire pour le bleu. Chaque accent a DEUX valeurs, une par thème : la charte fournit une éclaircie (-lt) pour le fond encre et une variante foncée (-dk) pour le fond clair. Prendre la couleur pleine dans les deux cas ne marche pas — mesuré sur le fond jour #F2F5F9 : cyan #1592C6 → 3.22:1 vert #22A04A → 3.10:1 soit sous les 4.5:1 exigés pour du TEXTE, et l'accent SERT de texte (liens de section, onglet actif, bordure de champ au focus). Avec les variantes foncées : cyan-dk #0F7099 → 5.06:1 vert-dk #197A38 → 4.95:1 ⚠️ LE JAUNE N'EST PAS PROPOSÉ, pour deux raisons cumulatives : · #FFC400 sur le fond jour = 1.46:1 — illisible, et il n'existe pas de variante foncée qui resterait « le jaune ZaZa » ; · il porte déjà un SENS dans le système (--zz-warn : alerte et promo). En faire aussi la couleur d'action effacerait la distinction entre « attention » et « appuyez ici ». Sélecteurs qualifiés par le thème pour éviter toute guerre de spécificité : :not() couvre le cas nuit, y compris quand data-theme porte l'un des alias historiques (a, c, e = nuit ; b, d = jour). « clair » est exclu ici et traité en fin de fichier : sans ce :not(), l'empilement de :not() ferait de cette règle la plus spécifique et le cyan CLAIR l'emporterait sur un fond blanc. ================================================================ */ /* ── CYAN ─────────────────────────────────────────────────────── */ [data-accent="cyan"]:not([data-theme="jour"]):not([data-theme="b"]):not([data-theme="d"]):not([data-theme="clair"]) { --zz-accent: var(--z-cyan-lt); /* #35B4E6 — 8.06:1 sur fond */ --zz-accent-dim: rgba(53,180,230,.16); --zz-accent-soft: rgba(53,180,230,.08); --zz-accent-dark: var(--z-cyan); --zz-on-accent: var(--z-ink); /* 6.88:1 sur l'accent */ --zz-accent-rgb: var(--z-cyan-lt-rgb); } [data-theme="jour"][data-accent="cyan"], [data-theme="b"][data-accent="cyan"], [data-theme="d"][data-accent="cyan"] { --zz-accent: var(--z-cyan-dk); /* #0F7099 — 5.06:1 sur fond */ --zz-accent-dim: rgba(15,112,153,.10); --zz-accent-soft: rgba(15,112,153,.06); --zz-accent-dark: var(--z-cyan-dk); --zz-on-accent: #FFFFFF; /* 5.53:1 sur l'accent */ /* Littéral : --z-cyan-dk-rgb n'existe pas dans zaza-brand.css, et ce fichier doit rester identique sur les quatre fronts. */ --zz-accent-rgb: 15, 112, 153; } /* ── VERT ─────────────────────────────────────────────────────── */ [data-accent="vert"]:not([data-theme="jour"]):not([data-theme="b"]):not([data-theme="d"]):not([data-theme="clair"]) { --zz-accent: var(--z-green-lt); /* #3EC46A — 8.51:1 sur fond */ --zz-accent-dim: rgba(62,196,106,.16); --zz-accent-soft: rgba(62,196,106,.08); --zz-accent-dark: var(--z-green); --zz-on-accent: var(--z-ink); /* 7.26:1 sur l'accent */ /* Littéral : --z-green-lt-rgb n'existe pas dans zaza-brand.css. */ --zz-accent-rgb: 62, 196, 106; } [data-theme="jour"][data-accent="vert"], [data-theme="b"][data-accent="vert"], [data-theme="d"][data-accent="vert"] { --zz-accent: var(--z-green-dk); /* #197A38 — 4.95:1 sur fond */ --zz-accent-dim: rgba(25,122,56,.10); --zz-accent-soft: rgba(25,122,56,.06); --zz-accent-dark: var(--z-green-dk); --zz-on-accent: #FFFFFF; /* 5.41:1 sur l'accent */ --zz-accent-rgb: var(--z-green-dk-rgb); } /* ── Alias de compatibilité ───────────────────────────────────── Rebranche les ~200 usages historiques de --zz-yellow* sur l'accent du thème courant. Défini APRÈS les thèmes pour hériter de la valeur résolue, et sur :root pour couvrir tous les data-theme. */ :root { --zz-yellow: var(--zz-accent); --zz-yellow-dim: var(--zz-accent-dim); --zz-yellow-dark: var(--zz-accent-dark); /* --zz-text : nom de token utilisé côté CHAUFFEUR pour la couleur de texte. Côté passager ce rôle est tenu par --zz-white (nom trompeur hérité). On définit l'alias pour (a) réparer ComptePage.razor qui le consommait sans qu'il existe — le repli #eee devenait illisible sur les thèmes clairs — et (b) converger vers un vocabulaire commun. */ --zz-text: var(--zz-white); } /* ── Fond du body suit le thème ─────────────────────────────────── */ html[data-theme="jour"] body, html[data-theme="b"] body, html[data-theme="d"] body { background: var(--zz-black); color: var(--zz-white); } /* ── Repli des variables propres au thème clair ────────────────── Placé AVANT le bloc « clair » et non après : `:root` a exactement la même spécificité que `[data-theme="clair"]` (0,1,0) et vise le même élément ( porte data-theme). À égalité c'est la dernière règle qui gagne — écrit dans l'autre ordre, le repli écraserait le dégradé et les ombres du thème clair. Objectif de ce bloc : que jour et nuit rendent quelque chose de correct si un écran emploie ces tokens, au lieu de rien. */ [data-theme="jour"], [data-theme="b"], [data-theme="d"], [data-theme="nuit"], [data-theme="a"], [data-theme="c"], [data-theme="e"], :root { --zz-cta-grad: var(--zz-accent); --zz-cta-grad-135: var(--zz-accent); --zz-cta-grad-sm: var(--zz-accent); --zz-shadow-card: none; --zz-shadow-hero: none; --zz-shadow-cta: none; --zz-radius-card: 16px; --zz-radius-hero: 20px; /* Fond de la carte promo : le DÉGRADÉ DU LOGO, à 50 % d'opacité. Mêmes teintes et mêmes positions d'arrêt que --z-grad (zaza-brand.css), bleu → cyan → vert → jaune : c'est la signature de la marque, reprise telle quelle. Les triplets --z-*-rgb sont obligatoires ici — un hex de la charte ne peut pas porter d'alpha. Défini pour TOUS les thèmes, contrairement aux ombres et aux rayons : ces couleurs sortent de la charte, elles ne dépendent d'aucun thème, et une promotion invisible en jour ou en nuit n'aurait pas de sens. TRANSPARENCE À 70 % : les couleurs sont donc posées à .3 d'alpha. Plus la carte s'efface, plus son fond se rapproche de celui de la page, et plus le texte gagne — le passage de .5 à .3 a fait remonter le pire cas de 6,0:1 à 8,8:1 en clair (portion bleue) et de 5,2:1 à 9,5:1 en nuit (portion jaune). Aucun couple ne descend sous AA. ⚠️ Le SOUS-TITRE reste néanmoins traité à part dans HomeA.razor.css : même à .3, --zz-dim ne remonte qu'à 4,2:1 sur la portion bleue, sous les 4,5:1 exigés. */ --zz-hero-wash: linear-gradient(135deg, rgba(var(--z-blue-rgb), .3) 0%, rgba(var(--z-cyan-rgb), .3) 32%, rgba(var(--z-green-rgb), .3) 63%, rgba(var(--z-yellow-rgb), .3) 120%); } /* ── THÈME CLAIR — maquette ZaZa (blanc · bleu · vert) ─────────── Troisième thème, à côté de jour et nuit. Différence avec « jour » : celui-ci est calibré pour l'écran, pas pour le plein soleil — fond légèrement bleuté, séparation par OMBRE douce plutôt que par filet, cartes blanches franches. L'accent reste le bleu de charte ; le dégradé vert→bleu est réservé aux actions principales. Comme les deux autres thèmes, toutes les couleurs sortent de la palette --z-* (zaza-brand.css). Ratios mesurés sur --zz-card. */ [data-theme="clair"] { --zz-accent: var(--z-blue); /* #0A4FC4 — 7.17:1 sur blanc */ --zz-accent-dim: rgba(10,79,196,.10); --zz-accent-soft: rgba(10,79,196,.06); --zz-accent-dark: var(--z-blue-dk); --zz-on-accent: #FFFFFF; /* 7.17:1 sur l'accent */ --zz-accent-rgb: var(--z-blue-rgb); --zz-warn: var(--z-yellow); --zz-on-warn: var(--z-ink); /* 10.25:1 */ --zz-warn-text: #8A5A00; /* le jaune de charte assombri */ --zz-black: #F4F7FB; /* fond de l'application */ --zz-dark: #EAF0F7; --zz-card: #FFFFFF; --zz-card2: #F4F7FB; --zz-border: #E7EEF7; /* décoratif — les cartes portent une ombre */ --zz-border-strong: #7E8CA0; /* 3.42:1 sur carte — contrôles */ --zz-white: #0B2545; /* texte principal — 15.3:1 */ --zz-dim: #46586F; /* 7.28:1 — AAA */ --zz-muted: #5A6B85; /* 5.31:1 sur carte — AA */ --app-bg: #F4F7FB; --app-text: #0B2545; --zz-nav-bg: rgba(255,255,255,.96); --zz-nav-shadow: rgba(11,37,69,.10); /* Propres à ce thème — ignorés par jour et nuit, donc sans effet ailleurs. Utilisez-les au lieu de recoder le dégradé dans chaque écran. */ --zz-cta-grad: linear-gradient(90deg, var(--z-green), var(--z-blue)); --zz-cta-grad-135:linear-gradient(135deg, var(--z-green), var(--z-blue)); /* Même dégradé, mais bâti sur le vert FONCÉ. La maquette pose du blanc sur du dégradé jusque dans des pilules de 10 px, or le blanc sur le vert clair (#22A04A) ne donne que 3,10:1 — admis à 18 px, pas en dessous. Avec --z-green-dk (#197A38) le point le plus clair remonte à 4,95:1, donc AA à n'importe quelle taille. À réserver aux petits corps : au-dessus de 18 px, --zz-cta-grad reste plus proche de la maquette. */ --zz-cta-grad-sm: linear-gradient(90deg, var(--z-green-dk), var(--z-blue)); --zz-shadow-card: 0 10px 22px rgba(11,37,69,.06); --zz-shadow-hero: 0 16px 34px rgba(11,37,69,.08); --zz-shadow-cta: 0 14px 28px rgba(10,79,196,.28); --zz-radius-card: 20px; --zz-radius-hero: 26px; } /* Accents cyan et vert en thème clair : mêmes variantes foncées que le thème jour, pour la même raison (les couleurs pleines tombent sous 4.5:1 sur un fond très clair). */ [data-accent="cyan"][data-theme="clair"] { --zz-accent: var(--z-cyan-dk); /* #0F7099 — 5.06:1 */ --zz-accent-dim: rgba(15,112,153,.10); --zz-accent-soft: rgba(15,112,153,.06); --zz-accent-dark: var(--z-cyan-dk); --zz-on-accent: #FFFFFF; --zz-accent-rgb: var(--z-cyan-rgb); } [data-accent="vert"][data-theme="clair"] { --zz-accent: var(--z-green-dk); /* #197A38 — 4.95:1 */ --zz-accent-dim: rgba(25,122,56,.10); --zz-accent-soft: rgba(25,122,56,.06); --zz-accent-dark: var(--z-green-dk); --zz-on-accent: #FFFFFF; --zz-accent-rgb: var(--z-green-dk-rgb); } /* Même traitement du fond de page que pour jour : la règle générique html,body de zaza-theme.css suffirait, celle-ci existe pour rester symétrique du bloc jour ci-dessus et ne rien laisser au hasard. */ html[data-theme="clair"] body { background: var(--zz-black); color: var(--zz-white); }