/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ JETONS DE DESIGN — chargé EN PREMIER et BLOQUANT (index.html) : c'est tout ce dont le premier paint (coque statique de l'accueil + entry.css) a besoin. Contenu = les blocs :root / html[data-theme="light"] qui ouvraient pilotage-shared.css (police, famille teal) puis analyses.css (palette, surfaces, opacités, --tx*, --sl*, --o*…), déplacés ici le 2026-09-04, dans le même ordre. Les deux feuilles d'origine (composants) se chargent désormais SANS bloquer le rendu (preload → stylesheet). Toute nouvelle custom property globale se déclare ICI. ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */ /* ── pilotage-shared.css (jetons) ── */ :root { /* ─── Palette principale ─── */ /* WHITE-LABEL : la famille « teal » suit désormais la MARQUE (--brand = palette[0]). Fallback = teal d'origine si --brand absent. Fonds/bordures dérivés en color-mix (alpha). */ --color-teal: var(--brand, #0AACA5); --color-teal-bright: var(--brand, #0BC1B9); --color-teal-bg: color-mix(in srgb, var(--brand, #0AACA5) 6%, transparent); --color-teal-bg-hover: color-mix(in srgb, var(--brand, #0AACA5) 8%, transparent); --color-teal-bg-active: color-mix(in srgb, var(--brand, #0AACA5) 12%, transparent); --color-teal-bg-strong: color-mix(in srgb, var(--brand, #0AACA5) 15%, transparent); --color-teal-border: color-mix(in srgb, var(--brand, #0AACA5) 20%, transparent); --color-teal-border-strong: color-mix(in srgb, var(--brand, #0AACA5) 40%, transparent); --color-teal-border-soft: color-mix(in srgb, var(--brand, #0AACA5) 25%, transparent); --color-teal-overlay: color-mix(in srgb, var(--brand, #0AACA5) 4%, transparent); /* ─── Texte ─── */ --color-text-primary: #ffffff; --color-text-secondary: #D9E4EA; --color-text-muted: #8FA8B5; --color-text-dim: #6B8A9A; /* ─── Backgrounds ─── */ --color-bg-card: rgba(7, 29, 40, 0.5); --color-bg-card-soft: rgba(7, 29, 40, 0.4); --color-bg-input: rgba(7, 29, 40, 0.6); /* ─── Borders ─── */ --color-border-subtle: rgba(255, 255, 255, 0.04); --color-border-light: rgba(255, 255, 255, 0.06); --color-border-medium: rgba(255, 255, 255, 0.08); --color-border-strong: rgba(255, 255, 255, 0.1); --color-border-hover: rgba(255, 255, 255, 0.12); --color-border-bright: rgba(255, 255, 255, 0.2); /* ─── États ─── */ --color-success: #5DCAA5; --color-success-bg: rgba(29, 158, 117, 0.12); --color-success-border: rgba(29, 158, 117, 0.15); --color-warning: #FAC775; --color-warning-bg: rgba(245, 158, 11, 0.06); --color-warning-border: rgba(245, 158, 11, 0.15); --color-danger: #F09595; --color-danger-bg: rgba(226, 75, 74, 0.1); --color-danger-bg-soft: rgba(226, 75, 74, 0.12); /* ─── Typo ─── */ /* Chaîne vers --app-font (posée par ikuFont/anti-flash) : toute l'UI custom utilise var(--font-family), donc le switch de police impacte TOUTE l'app. Fallback = Inter. */ --font-family: var(--app-font, 'Inter', system-ui, sans-serif); /* ─── Spacing ─── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px; } html[data-theme="light"] { --color-text-primary: #16242c; --color-text-secondary: #2c3d46; --color-text-muted: #586a73; --color-text-dim: #6b7c85; --color-bg-card: rgba(255, 255, 255, 0.72); --color-bg-card-soft: rgba(255, 255, 255, 0.55); --color-bg-input: rgba(255, 255, 255, 0.85); /* Bordures clair RENFORCÉES : à 5–20 % de noir sur blanc, les bordures extérieures de conteneurs étaient quasi invisibles. Remontées (≈ +5 pts) pour un liseré net mais doux. Dark inchangé (bloc scopé light). */ --color-border-subtle: rgba(0, 0, 0, 0.10); --color-border-light: rgba(0, 0, 0, 0.12); --color-border-medium: rgba(0, 0, 0, 0.15); --color-border-strong: rgba(0, 0, 0, 0.18); --color-border-hover: rgba(0, 0, 0, 0.22); --color-border-bright: rgba(0, 0, 0, 0.28); } /* ── analyses.css (jetons) ── */ /* ============================================================ Analyses — popup carousel + dataviz des vues de diagnostic Réutilise les variables :root de pilotage-shared.css Préfixes : apop- (coquille popup) · an- (atomes de vue) ============================================================ */ :root{ --an-blue:#3a7bd5; --an-blue2:#2a5db0; --an-violet:#7a5cd0; --an-green:#1d9e75; --an-red:#e2615f; /* accents TEXTE teal de marque → suivent --brand-strong (contraste sécurisé par thème) */ --an-teal:var(--brand-strong); --txt-teal:var(--brand-strong); --txt-teal2:var(--brand-strong); } /* ════════════ MARQUE (white-label) — l'accent de l'interface SUIT la palette sélectionnée ════════════ --brand = 1ʳᵉ couleur du thème (palette[0] = --mud-palette-primary, posé par RefreshPalette) ; --brand2 = 2ᵉ couleur (palette[1] = --mud-palette-secondary). --brand-strong / --brand2-strong = accents TEXTE/CTA à contraste SÉCURISÉ (éclaircis en sombre, assombris en clair) → restent lisibles quelle que soit la couleur choisie par le cabinet. ⚠️ Le SÉMANTIQUE (succès vert / danger rouge / warning ambre) ne suit PAS la marque. */ :root{ /* ══ SOCLE DE LA PALETTE MUDBLAZOR ORPHELINE (2026-08-07) ══════════════════════════════════ MudBlazor est sorti de l'app : plus aucune feuille ne définit ces quatre variables. Seul le script de palette d'index.html les pose — et UNIQUEMENT si `iku.activePalette` existe en localStorage. Sur un navigateur neuf, ou sur une page où la palette n'a pas été appliquée (mesuré sur /portefeuille), elles sont VIDES. Conséquence : tout `color-mix()` ou `rgba()` qui les consomme devient INVALIDE au calcul et la propriété retombe SILENCIEUSEMENT sur sa valeur initiale. C'est ce qui a produit les barres de défilement blanches. Ce ne sont pas 111 occurrences qui étaient exposées mais 408 : primary 238 · tertiary 144 · info 19 · secondary 7. ⚠️ VALEURS LITTÉRALES, surtout PAS `var(--brand)` : `--brand` lit déjà `--mud-palette-primary` juste en dessous. Se référencer mutuellement formerait un CYCLE, que CSS résout en valeur « garantie invalide » — on remplacerait une panne silencieuse par une autre, en pire. Les littéraux repris ici sont EXACTEMENT les replis déjà écrits dans les `var(…, x)`. ⚠️ Ne casse pas le white-label : `ikuBrand.set` écrit en style INLINE sur , qui l'emporte sur ce `:root`. Une palette personnalisée continue donc de primer. */ --mud-palette-primary: #00b1cf; --mud-palette-tertiary: #00b1cf; --mud-palette-secondary: #44C1A3; --mud-palette-info: #3498DB; --brand: var(--mud-palette-primary, #00b1cf); --brand2: var(--mud-palette-secondary, #44C1A3); --brand3: var(--mud-palette-info, #3498DB); /* 84% -> 50% (2026-09-06), symétrique de l'arbitrage du bloc clair ci-dessous. C'est le jeton d'ACCENT TEXTE en sombre (--txt-teal, --txt-teal2, --an-teal pointent dessus ; 119 des 162 usages sont un `color:`). A 84% de marque il n'éclaircissait pas assez : mesuré sur les 5 fonds sombres de référence (--surf-app, --surf-1, --surf-2, pastille marque 22%, verre --gl60/--gd80), 7 palettes sur 8 tombaient sous AA — Sobre 1,43:1, Corporate 2,26, Océan 2,40, Indigo 2,69, Forêt 2,79, Corail 3,75, Ambre 3,77 ; seule la palette par défaut passait (4,69). A 50% le pire cas remonte à 4,62 (Sobre). Vaut pour toute marque : mélanger davantage de #ffffff ne peut qu'éclaircir. */ --brand-strong: color-mix(in srgb, var(--brand) 50%, #ffffff); --brand2-strong: color-mix(in srgb, var(--brand2) 50%, #ffffff); --brand3-strong: color-mix(in srgb, var(--brand3) 50%, #ffffff); /* Surface des MODAUX = surface neutre + soupçon de marque (auto-flip : --surf-3 ET --brand suivent thème+palette). Subtil (8%) — chaleur de marque cohérente sur tout le parcours, sans alourdir. */ --modal-surf: color-mix(in srgb, var(--brand) 8%, var(--surf-3)); } html[data-theme="light"]{ /* 72% -> 60% (2026-08-06). C'est le jeton d'ACCENT TEXTE en clair (--tx8, --txt-teal, --txt-teal2 pointent tous dessus). A 72% de marque il rendait #0A8684, mesure a 4,42:1 sur blanc et 3,91:1 sur les pastilles teal pales : sous le seuil AA de 4,5 dans les deux cas. A 60% il rend #077676 -> 5,46:1 sur blanc et 4,84:1 sur pastille. La marge est prise sur le fond PALE, le plus exigeant des deux, pas sur le blanc. Vaut pour toute marque : melanger davantage de #052430 ne peut qu'assombrir. 60% -> 55% (2026-09-06) : la pastille de reference du 06-08 etait plus pale que celles reellement posees. Sur une pastille `color-mix(--brand 22%, transparent)` (celle de la prise en main), 60% donnait 4,14:1 pour la palette par defaut. A 55% -> 4,55:1. Les 7 autres palettes etaient deja au-dessus de 5,7 et ne peuvent que gagner. */ --brand-strong: color-mix(in srgb, var(--brand) 55%, #052430); --brand2-strong: color-mix(in srgb, var(--brand2) 55%, #052430); --brand3-strong: color-mix(in srgb, var(--brand3) 55%, #052430); } /* Mieux que le mélange au blanc quand le navigateur sait faire : la syntaxe de couleur RELATIVE ne remonte que la LUMINOSITÉ (OKLCh) et garde teinte et saturation — l'accent reste franchement de la couleur de marque au lieu de virer au pastel. Pire cas mesuré sur les mêmes 5 fonds : 5,25:1 (Corail), contre 4,62 pour le repli au blanc. Une marque déjà claire n'est pas touchée (max()). ⚠️ En @supports OBLIGATOIREMENT : une propriété personnalisée accepte n'importe quels jetons à l'analyse, donc le doublon « repli puis version enrichie » ne protège PAS — un navigateur sans couleur relative garderait la valeur enrichie et la rendrait invalide à l'usage, c'est-à-dire 162 usages sans couleur. */ @supports (color: oklch(from red max(l, 0.7) c h)){ :root{ --brand-strong: oklch(from var(--brand) max(l, .76) c h); --brand2-strong: oklch(from var(--brand2) max(l, .76) c h); --brand3-strong: oklch(from var(--brand3) max(l, .76) c h); } } /* ════ FOND « AURORE » DES VOLETS PLEIN ÉCRAN (2026-09-15, piste D des maquettes « Fonds des volets », validée par Arthur) ════ Le voile floute le hub au lieu d'être caché, et le volet est un verre teinté de deux lueurs : la 2ᵉ couleur de la palette en haut à droite, la 3ᵉ en bas à gauche (la 1ʳᵉ reste aux onglets et aux chiffres pilotes). Consommé par .apop-backdrop.is-plein et .apop.apop-plein (analyses.css). Les pourcentages ont été MESURÉS sur les maquettes : au cœur d'une lueur, avec une zone vive du hub juste derrière, le texte discret garde 4,5:1 parce qu'il remonte d'un cran dans le volet (--verre-mut, et --verre-dim pour le texte estompé). Toucher un pourcentage, c'est refaire la mesure. */ :root{ --aurore-2: var(--brand2); --aurore-3: var(--brand3); --aurore-a2: 18%; --aurore-a3: 18%; --verre-voile: 30%; --verre-1: 70%; --verre-2: 82%; --verre-flou: blur(28px) saturate(180%); --verre-mut: #A3B8C3; /* --color-text-muted #8FA8B5 remonté d'un cran */ --verre-dim: #8AA3B0; /* --color-text-dim #6B8A9A remonté d'un cran */ } html[data-theme="light"]{ --aurore-2: color-mix(in srgb, var(--brand2) 45%, #ffffff); --aurore-3: color-mix(in srgb, var(--brand3) 45%, #ffffff); --aurore-a2: 34%; --aurore-a3: 30%; --verre-1: 58%; --verre-2: 72%; --verre-flou: blur(28px) saturate(140%); --verre-mut: #4B5C65; /* #586a73 assombri d'un cran */ --verre-dim: #5F6F78; /* #6b7c85 assombri d'un cran */ } /* Lueurs recalées en LUMINOSITÉ, teinte gardée : jamais éblouissantes en sombre (Ambre), jamais sales en clair (Sobre). ⚠️ En @supports, pour la même raison que --brand-strong : hors support, la valeur serait invalide à l'usage et le volet perdrait TOUT son fond (le dégradé entier tombe avec une seule couleur invalide). */ @supports (color: oklch(from red clamp(0.42, l, 0.6) c h)){ :root{ --aurore-2: oklch(from var(--brand2) clamp(.42, l, .6) c h); --aurore-3: oklch(from var(--brand3) clamp(.42, l, .6) c h); } html[data-theme="light"]{ --aurore-2: oklch(from var(--brand2) max(l, .82) c h); --aurore-3: oklch(from var(--brand3) max(l, .82) c h); } } /* ════════════════════════════════════════════════════════════════ THÈME clair / sombre — UNE variable par couleur source. :root = SOMBRE (valeurs identiques à l'existant → aucune régression). html[data-theme="light"] = contreparties claires. Posé par le bouton ☀️/🌙 (MainLayout) + restauré au chargement. ════════════════════════════════════════════════════════════════ */ :root{ /* ombres : dark = noir plein ; light = slate doux (couleur + multiplicateur d'opacité) */ --shadow-col:0,0,0; --shadow-mul:1; /* lueurs teal/cyan (box-shadow) : pleines en sombre, atténuées en clair */ --glow-mul:1; /* textes d'état (ambre/rouge) : vifs en sombre, approfondis en clair (AA sur blanc) */ --st-amber:#fbbf24; --st-pink:#fb7185; --st-red:#f87171; --st-green:#34d399; /* ══ PALETTE-AWARE (subtil) : chaque surface/texte = teinte d'origine + soupçon de --brand. Défaut teal ≈ inchangé (brand teal mixé dans du navy teal) ; les autres palettes teintent tout l'écran. Les % ci-dessous sont l'INTENSITÉ, ajustables ici. Alpha préservé via color-mix(base, transparent). ══ */ --tint-navy: color-mix(in srgb, var(--brand) 12%, #0d2938); /* base --nv* (navy translucide) */ --tint-app: color-mix(in srgb, var(--brand) 12%, #071d28); /* base --sa… et --surfA… (fond app alpha) — NE PAS écrire « *(slash) » ici : le commentaire se refermerait et avalerait la ligne suivante */ --tint-glass: color-mix(in srgb, var(--brand) 11%, #0d222e); /* base --gl* (glass) */ --tint-gd: color-mix(in srgb, var(--brand) 11%, #091821); /* base --gd* (glass sombre) */ /* navy translucide (cartes Overview & vues) */ --nv20:color-mix(in srgb,var(--tint-navy) 20%,transparent); --nv25:color-mix(in srgb,var(--tint-navy) 25%,transparent); --nv28:color-mix(in srgb,var(--tint-navy) 28%,transparent); --nv35:color-mix(in srgb,var(--tint-navy) 35%,transparent); --nv50:color-mix(in srgb,var(--tint-navy) 50%,transparent); --nv60:color-mix(in srgb,var(--tint-navy) 60%,transparent); --nv85:color-mix(in srgb,var(--tint-navy) 85%,transparent); --nv92:color-mix(in srgb,var(--tint-navy) 92%,transparent); /* ENCRE SUR FOND DE MARQUE : le jeton est --brand-contrast, posé par ikuBrand.set (app.js) sur documentElement — pas ici. Il se CALCULE depuis la luminance de la marque (encre foncée si la marque est claire, blanc si elle est foncée), ce qui règle aussi le cas marque blanche. Repère : l'app avait DEUX conventions concurrentes sur ces surfaces, encre sombre (32 sites) et blanc (8) ; le blanc échouait au contraste (2,8:1 sur le teal par défaut contre 5,99:1). Les 8 sont passées sur --brand-contrast. ⚠️ Ne JAMAIS refiger une encre en dur sur une surface de marque (règle du projet). */ /* textes brillants (soupçon de marque) */ --tx1:color-mix(in srgb,var(--brand) 8%,#eafdff); --tx2:color-mix(in srgb,var(--brand) 8%,#cfe8ee); --tx3:color-mix(in srgb,var(--brand) 8%,#eaf6f9); --tx4:color-mix(in srgb,var(--brand) 8%,#cfe3ec); --tx5:color-mix(in srgb,var(--brand) 8%,#dceaf1); --tx6:color-mix(in srgb,var(--brand) 8%,#cfe0e6); --tx7:color-mix(in srgb,var(--brand) 8%,#eef2f4); /* --tx8 = accent TEXTE de marque (boutons/badges/liens/?) → SUIT la palette via --brand-strong (était #9be6f4 teal figé). */ --tx8:var(--brand-strong); /* textes sourds */ --mut1:color-mix(in srgb,var(--brand) 8%,#8FA8B5); --mut2:color-mix(in srgb,var(--brand) 8%,#9fb4c0); --mut3:color-mix(in srgb,var(--brand) 8%,#7e96a3); --mut4:color-mix(in srgb,var(--brand) 8%,#9fb2bd); --mut5:color-mix(in srgb,var(--brand) 8%,#8aa1ac); --mut6:color-mix(in srgb,var(--brand) 8%,#7e95a3); /* surfaces */ --surf-app:color-mix(in srgb,var(--brand) 10%,#071D28); --surf-1:color-mix(in srgb,var(--brand) 10%,#06141d); --surf-1b:color-mix(in srgb,var(--brand) 10%,#091f2b); --surf-2:color-mix(in srgb,var(--brand) 10%,#102733); --surf-3:color-mix(in srgb,var(--brand) 10%,#0c2230); --surf-pop:color-mix(in srgb,var(--brand) 10%,rgba(13,34,46,.98)); /* surfaces propres aux sous-composants */ --c1:color-mix(in srgb,var(--brand) 10%,#06222c); --c2:color-mix(in srgb,var(--brand) 10%,#04141a); --c3:color-mix(in srgb,var(--brand) 10%,#0c1c25); --c4:color-mix(in srgb,var(--brand) 10%,#0b1f29); --c5:color-mix(in srgb,var(--brand) 10%,#081a24); /* texte slate (hub & co) */ --sl1:color-mix(in srgb,var(--brand) 8%,#94a3b8); --sl2:color-mix(in srgb,var(--brand) 8%,#cbd5e1); --sl3:color-mix(in srgb,var(--brand) 8%,#f1f5f9); --sl4:color-mix(in srgb,var(--brand) 8%,#e2e8f0); --sl5:color-mix(in srgb,var(--brand) 8%,#71808f); /* #64748b -> #71808f : le gris muet plafonnait a 3,92:1 sur le fond sombre, sous le seuil AA de 4,5. Mesure apres : 4,74. */ /* surfaces semi-transparentes (fond app en alpha) */ --surfA:color-mix(in srgb,var(--tint-app) 98%,transparent); --surfA7:color-mix(in srgb,var(--tint-app) 70%,transparent); --surfA5:color-mix(in srgb,var(--tint-app) 50%,transparent); --sa0:color-mix(in srgb,var(--tint-app) 0%,transparent); --sa40:color-mix(in srgb,var(--tint-app) 40%,transparent); --sa42:color-mix(in srgb,var(--tint-app) 42%,transparent); --sa45:color-mix(in srgb,var(--tint-app) 45%,transparent); --sa46:color-mix(in srgb,var(--tint-app) 46%,transparent); --sa60:color-mix(in srgb,var(--tint-app) 60%,transparent); --sa75:color-mix(in srgb,var(--tint-app) 75%,transparent); --sa85:color-mix(in srgb,var(--tint-app) 85%,transparent); --sa95:color-mix(in srgb,var(--tint-app) 95%,transparent); --sa100:var(--tint-app); /* backdrops modaux (neutres — pas de teinte) */ --bd62:rgba(3,12,18,.62); --bd72:rgba(3,12,18,.72); --bd74:rgba(3,12,18,.74); /* surfaces hexes diverses (sous-composants) */ --hx1:color-mix(in srgb,var(--brand) 10%,#0b1220); --hx2:color-mix(in srgb,var(--brand) 10%,#0a1a23); --hx3:color-mix(in srgb,var(--brand) 10%,#0a161d); --hx4:color-mix(in srgb,var(--brand) 10%,#06222b); --hx5:color-mix(in srgb,var(--brand) 2%,#060d14); --hx6:color-mix(in srgb,var(--brand) 10%,#052b27); /* dégradés de carte */ --grad-card1:linear-gradient(180deg,color-mix(in srgb,var(--brand) 10%,#0f2a39),color-mix(in srgb,var(--brand) 10%,#0b1d29)); --grad-card2:linear-gradient(180deg,color-mix(in srgb,var(--brand) 10%,#0d2330),color-mix(in srgb,var(--brand) 10%,#0a1b25)); /* panneaux « glass » sombres (toasts, bannières, flyouts) + hexes surfaces */ --gl97:color-mix(in srgb,var(--tint-glass) 97%,transparent); --gl92:color-mix(in srgb,var(--tint-glass) 92%,transparent); --gl90:color-mix(in srgb,var(--tint-glass) 90%,transparent); --gl80:color-mix(in srgb,var(--tint-glass) 80%,transparent); --gl60:color-mix(in srgb,var(--tint-glass) 60%,transparent); --gl20:color-mix(in srgb,var(--tint-glass) 20%,transparent); --gd97:color-mix(in srgb,var(--tint-gd) 97%,transparent); --gd84:color-mix(in srgb,var(--tint-gd) 84%,transparent); --gd80:color-mix(in srgb,var(--tint-gd) 80%,transparent); --dh1:color-mix(in srgb,var(--brand) 10%,#081d28); --dh2:color-mix(in srgb,var(--brand) 10%,#0a1c27); --dh3:color-mix(in srgb,var(--brand) 10%,#0d2230); --dh4:color-mix(in srgb,var(--brand) 10%,#0f2734); --dh5:color-mix(in srgb,var(--brand) 10%,#08171f); --dh6:color-mix(in srgb,var(--brand) 10%,#0c1320); --dh7:color-mix(in srgb,var(--brand) 10%,#171a2e); /* textes brillants froids (headings) */ --tb1:color-mix(in srgb,var(--brand) 8%,#eef4f7); --tb2:color-mix(in srgb,var(--brand) 8%,#eef7fa); --tb3:color-mix(in srgb,var(--brand) 8%,#e8edf5); --tb4:color-mix(in srgb,var(--brand) 8%,#e6eef2); --tb5:color-mix(in srgb,var(--brand) 8%,#f3fbfd); /* fonds sombres résiduels (panneaux/lignes) */ --dk1:color-mix(in srgb,var(--brand) 10%,#0f1217); --dk2:color-mix(in srgb,var(--brand) 10%,#1c1f26); --dk3:color-mix(in srgb,var(--brand) 10%,#12151b); --dk4:color-mix(in srgb,var(--brand) 10%,#0e2735); --dk5:color-mix(in srgb,var(--brand) 10%,#0d3a4a); --dk6:color-mix(in srgb,var(--brand) 10%,#16313e); --dk7:color-mix(in srgb,var(--brand) 10%,#143a3a); --dk8:color-mix(in srgb,var(--brand) 10%,#0f1c22); --dk9:color-mix(in srgb,var(--brand) 10%,#0c3340); --dk10:color-mix(in srgb,var(--brand) 10%,#0c2531); /* overlays / bordures (blanc-alpha sur sombre) */ --o2:rgba(255,255,255,.02); --o3:rgba(255,255,255,.03); --o4:rgba(255,255,255,.04); --o5:rgba(255,255,255,.05); --o6:rgba(255,255,255,.06); --o7:rgba(255,255,255,.07); --o8:rgba(255,255,255,.08); --o9:rgba(255,255,255,.09); --o10:rgba(255,255,255,.1); --o12:rgba(255,255,255,.12); --o14:rgba(255,255,255,.14); --o16:rgba(255,255,255,.16); --o18:rgba(255,255,255,.18); --o22:rgba(255,255,255,.22); } html[data-theme="light"]{ /* ombres douces & froides (slate), opacité réduite → rendu « pro » sur fond clair */ --shadow-col:30,41,59; --shadow-mul:.3; --glow-mul:.5; /* --st-green AJOUTÉ le 2026-08-06. C'était le TROU de la famille sémantique : ambre, rose et rouge avaient chacun leur contrepartie claire, le vert non — il restait écrit #34d399 en dur partout, donc identique dans les deux thèmes. Sur blanc : 1,92:1, le pire score de l'app. #047857 (emerald-700) le remet dans le même registre que ses voisins (#b45309 amber-700, #dc2626 red-600) et donne 5,55:1. Le vert sémantique NE suit PAS la marque (cf. en-tête). */ --st-amber:#b45309; --st-pink:#be123c; --st-red:#dc2626; --st-green:#047857; /* accents TEXTE approfondis sur blanc (AA) — cyan/teal-green ; les FONDS/bordures teal restent inchangés */ /* teal texte de marque : --brand-strong porte déjà la version claire (color-mix assombri) → on s'appuie dessus */ --an-teal:var(--brand-strong); --txt-teal:var(--brand-strong); --txt-teal2:var(--brand-strong); /* ══ PALETTE-AWARE (subtil) — clair : bases blanches + soupçon de --brand (6%). Alpha préservé. ══ */ --tint-navy: color-mix(in srgb, var(--brand) 6%, #ffffff); --tint-app: color-mix(in srgb, var(--brand) 6%, #ffffff); --tint-glass: color-mix(in srgb, var(--brand) 6%, #ffffff); --tint-gd: color-mix(in srgb, var(--brand) 6%, #f7fafc); --nv20:color-mix(in srgb,var(--tint-navy) 60%,transparent); --nv25:color-mix(in srgb,var(--tint-navy) 62%,transparent); --nv28:color-mix(in srgb,var(--tint-navy) 65%,transparent); --nv35:color-mix(in srgb,var(--tint-navy) 70%,transparent); --nv50:color-mix(in srgb,var(--tint-navy) 78%,transparent); --nv60:color-mix(in srgb,var(--tint-navy) 85%,transparent); --nv85:color-mix(in srgb,var(--tint-navy) 92%,transparent); --nv92:color-mix(in srgb,var(--tint-navy) 95%,transparent); --tx1:color-mix(in srgb,var(--brand) 6%,#15252e); --tx2:color-mix(in srgb,var(--brand) 6%,#1d2f37); --tx3:color-mix(in srgb,var(--brand) 6%,#1d2f37); --tx4:color-mix(in srgb,var(--brand) 6%,#26383f); --tx5:color-mix(in srgb,var(--brand) 6%,#26383f); --tx6:color-mix(in srgb,var(--brand) 6%,#2b3d45); --tx7:color-mix(in srgb,var(--brand) 6%,#1d2f37); --tx8:var(--brand-strong); --mut1:color-mix(in srgb,var(--brand) 6%,#586a73); --mut2:color-mix(in srgb,var(--brand) 6%,#586a73); --mut3:color-mix(in srgb,var(--brand) 6%,#66757d); --mut4:color-mix(in srgb,var(--brand) 6%,#5d6d76); --mut5:color-mix(in srgb,var(--brand) 6%,#63717a); --mut6:color-mix(in srgb,var(--brand) 6%,#66757d); --surf-app:color-mix(in srgb,var(--brand) 6%,#eef1f5); --surf-1:color-mix(in srgb,var(--brand) 6%,#ffffff); --surf-1b:color-mix(in srgb,var(--brand) 6%,#f6f9fb); --surf-2:color-mix(in srgb,var(--brand) 6%,#f1f5f7); --surf-3:color-mix(in srgb,var(--brand) 6%,#eaf1f4); --surf-pop:color-mix(in srgb,var(--brand) 6%,rgba(255,255,255,.98)); --c1:color-mix(in srgb,var(--brand) 6%,#eef3f6); --c2:color-mix(in srgb,var(--brand) 6%,#f0f3f6); --c3:color-mix(in srgb,var(--brand) 6%,#f2f5f7); --c4:color-mix(in srgb,var(--brand) 6%,#eff4f6); --c5:color-mix(in srgb,var(--brand) 6%,#f0f4f6); /* panneaux/bordures generiques (modal tarifs, cartes) : bd1 = bordure, laissée neutre */ --bg1:color-mix(in srgb,var(--brand) 6%,#eef3f7); --bg2:color-mix(in srgb,var(--brand) 6%,#e6edf2); --bd1:#dbe5ec; /* --sl1 : #5b6b7a -> #4e6373. Meme correction que --sl5 en son temps, sur le jeton de texte SECONDAIRE — le plus repandu de l'app. Il rendait rgb(86,111,127), soit 4,42:1 sur la surface claire la plus foncee (les panneaux, #E0EDF3) : sous le seuil AA de 4,5 pour du texte normal. Mesure apres : 4,96 sur cette surface, 5,93 sur blanc. Le theme SOMBRE n'a pas bouge — mesure a 6,64:1, il passait deja largement, et l'assombrir aurait efface la hierarchie avec --sl2. */ --sl1:color-mix(in srgb,var(--brand) 6%,#4e6373); --sl2:color-mix(in srgb,var(--brand) 6%,#3a4a5a); --sl3:color-mix(in srgb,var(--brand) 6%,#18222c); --sl4:color-mix(in srgb,var(--brand) 6%,#28384a); --sl5:color-mix(in srgb,var(--brand) 6%,#5a6874); /* meme correction en clair : #677580 donnait 4,15:1 sur le fond clair. Apres : 5,02. */ --surfA:color-mix(in srgb,var(--tint-app) 98%,transparent); --surfA7:color-mix(in srgb,var(--tint-app) 72%,transparent); --surfA5:color-mix(in srgb,var(--tint-app) 55%,transparent); --sa0:color-mix(in srgb,var(--tint-app) 0%,transparent); --sa40:color-mix(in srgb,var(--tint-app) 50%,transparent); --sa42:color-mix(in srgb,var(--tint-app) 55%,transparent); --sa45:color-mix(in srgb,var(--tint-app) 58%,transparent); --sa46:color-mix(in srgb,var(--tint-app) 60%,transparent); --sa60:color-mix(in srgb,var(--tint-app) 72%,transparent); --sa75:color-mix(in srgb,var(--tint-app) 82%,transparent); --sa85:color-mix(in srgb,var(--tint-app) 90%,transparent); --sa95:color-mix(in srgb,var(--tint-app) 96%,transparent); --sa100:var(--tint-app); --bd62:rgba(15,23,32,.4); --bd72:rgba(15,23,32,.45); --bd74:rgba(15,23,32,.46); --grad-card1:linear-gradient(180deg,color-mix(in srgb,var(--brand) 6%,#f5f9fc),color-mix(in srgb,var(--brand) 6%,#eaf1f6)); --grad-card2:linear-gradient(180deg,color-mix(in srgb,var(--brand) 6%,#f3f7fb),color-mix(in srgb,var(--brand) 6%,#e9f0f5)); --tb1:color-mix(in srgb,var(--brand) 6%,#16242c); --tb2:color-mix(in srgb,var(--brand) 6%,#16242c); --tb3:color-mix(in srgb,var(--brand) 6%,#1a2733); --tb4:color-mix(in srgb,var(--brand) 6%,#1d2f37); --tb5:color-mix(in srgb,var(--brand) 6%,#15252e); --dk1:color-mix(in srgb,var(--brand) 6%,#eef1f4); --dk2:color-mix(in srgb,var(--brand) 6%,#eceef2); --dk3:color-mix(in srgb,var(--brand) 6%,#eef0f3); --dk4:color-mix(in srgb,var(--brand) 6%,#eef3f6); --dk5:color-mix(in srgb,var(--brand) 6%,#e8f1f4); --dk6:color-mix(in srgb,var(--brand) 6%,#e8eef2); --dk7:color-mix(in srgb,var(--brand) 6%,#e6f2ee); --dk8:color-mix(in srgb,var(--brand) 6%,#eef2f5); --dk9:color-mix(in srgb,var(--brand) 6%,#e9f1f4); --dk10:color-mix(in srgb,var(--brand) 6%,#eef3f6); --gl97:color-mix(in srgb,var(--tint-glass) 97%,transparent); --gl92:color-mix(in srgb,var(--tint-glass) 95%,transparent); --gl90:color-mix(in srgb,var(--tint-glass) 93%,transparent); --gl80:color-mix(in srgb,var(--tint-glass) 86%,transparent); --gl60:color-mix(in srgb,var(--tint-glass) 70%,transparent); --gl20:rgba(0,0,0,.05); --gd97:color-mix(in srgb,var(--tint-gd) 97%,transparent); --gd84:color-mix(in srgb,var(--tint-gd) 88%,transparent); --gd80:color-mix(in srgb,var(--tint-gd) 85%,transparent); --dh1:color-mix(in srgb,var(--brand) 6%,#eef3f6); --dh2:color-mix(in srgb,var(--brand) 6%,#eef3f6); --dh3:color-mix(in srgb,var(--brand) 6%,#eef3f6); --dh4:color-mix(in srgb,var(--brand) 6%,#f1f5f8); --dh5:color-mix(in srgb,var(--brand) 6%,#eef2f5); --dh6:color-mix(in srgb,var(--brand) 6%,#eef1f4); --dh7:color-mix(in srgb,var(--brand) 6%,#eceef6); --hx1:color-mix(in srgb,var(--brand) 6%,#eef1f4); --hx2:color-mix(in srgb,var(--brand) 6%,#eef3f5); --hx3:color-mix(in srgb,var(--brand) 6%,#eff2f5); --hx4:color-mix(in srgb,var(--brand) 6%,#eef3f6); --hx5:color-mix(in srgb,var(--brand) 6%,#eef1f4); --hx6:color-mix(in srgb,var(--brand) 6%,#eef4f2); /* overlays inversés en noir-alpha */ --o2:rgba(0,0,0,.025); --o3:rgba(0,0,0,.035); --o4:rgba(0,0,0,.045); --o5:rgba(0,0,0,.05); --o6:rgba(0,0,0,.06); --o7:rgba(0,0,0,.07); --o8:rgba(0,0,0,.08); --o9:rgba(0,0,0,.09); --o10:rgba(0,0,0,.1); --o12:rgba(0,0,0,.11); --o14:rgba(0,0,0,.12); --o16:rgba(0,0,0,.13); --o18:rgba(0,0,0,.14); --o22:rgba(0,0,0,.16); } /* ---------- POPUP SHELL ---------- */