/** * TOKENS SEEYOO - SOURCE UNIQUE DE TOUTES LES COULEURS DE L'APPLICATION. * * Charge en SYNCHRONE avant toute autre feuille (index.php, admin_panel.html) : * `modules/loadingScreenBackground.css` peint le loader avant que `style.css` (async) * n'arrive ; des canaux vivant dans style.css donneraient des `var()` vides au 1er paint. * * POUR CHANGER LES COULEURS DE L'APP : modifier UNIQUEMENT les canaux `*-rgb` ci-dessous. * Tout suit - CSS applicatif (`var(--sy-danger-600)`), transparences * (`rgb(var(--sy-danger-600-rgb) / .35)`), les ~1900 classes utilitaires Tailwind * (`bg-brand-600`, `text-danger-500`, `border-neutral-200`...) via * tools/tailwind/tailwind.config.js, et le JS via modules/brandTokensRuntime.js. * * Canaux en composantes RGB nues ("2 132 199") : seule forme permettant a Tailwind de * composer l'opacite (`bg-danger-600/60`). Les `--sy--` juste apres les * emballent en couleur utilisable directement en CSS. * * Doc : Documentations/Chartes graphique/charte_couleurs.md */ :root { /* Clair par défaut. Les pages qui déclarent le sombre (meta color-scheme « light dark » : index.php) passent en « light dark » et ont le thème sombre : bloc généré en fin de fichier. Le panneau admin, qui charge aussi cette feuille sans le déclarer, reste clair. Les champs date du formulaire de connexion gardent [color-scheme:dark] (fond sombre), voulu. Doc : Documentations/UI/theme_sombre.md */ color-scheme: light; /* ---------- Primaire (marque) - azur : canaux ---------- */ --sy-brand-50-rgb: 240 249 255; --sy-brand-100-rgb: 224 242 254; --sy-brand-200-rgb: 186 230 253; --sy-brand-300-rgb: 125 211 252; --sy-brand-400-rgb: 56 189 248; --sy-brand-500-rgb: 14 165 233; --sy-brand-600-rgb: 2 132 199; --sy-brand-700-rgb: 3 105 161; --sy-brand-800-rgb: 7 89 133; --sy-brand-900-rgb: 12 74 110; --sy-brand-950-rgb: 8 47 73; /* ---------- Secondaire (degrade scanner, liens) - bleu : canaux ---------- */ --sy-accent-50-rgb: 239 246 255; --sy-accent-100-rgb: 219 234 254; --sy-accent-200-rgb: 191 219 254; --sy-accent-300-rgb: 147 197 253; --sy-accent-400-rgb: 96 165 250; --sy-accent-500-rgb: 59 130 246; --sy-accent-600-rgb: 37 99 235; --sy-accent-700-rgb: 29 78 216; --sy-accent-800-rgb: 30 64 175; --sy-accent-900-rgb: 30 58 138; --sy-accent-950-rgb: 23 37 84; /* ---------- Encre adaptative (2026-09-27) ---------- Couleur réellement employée quand un cran brand / accent sert de TEXTE (classes `text-brand-*` / `text-accent-*` via `textColor` de tools/tailwind/tailwind.config.js, et les `color:` de style.css), puis encre des textes posés sur les aplats de marque. Par défaut : le cran lui-même et du blanc, donc l'azur ne change pas. Un thème les recalcule (colorThemeApply.js -> themePalette.computeThemeInkVars) : un cran trop clair ou trop sombre pour du texte bascule sur une encre lisible. Cf. Documentations/Boutique/themes_de_couleurs.md */ --sy-brand-50-ink-rgb: var(--sy-brand-50-rgb); --sy-brand-100-ink-rgb: var(--sy-brand-100-rgb); --sy-brand-200-ink-rgb: var(--sy-brand-200-rgb); --sy-brand-300-ink-rgb: var(--sy-brand-300-rgb); --sy-brand-400-ink-rgb: var(--sy-brand-400-rgb); --sy-brand-500-ink-rgb: var(--sy-brand-500-rgb); --sy-brand-600-ink-rgb: var(--sy-brand-600-rgb); --sy-brand-700-ink-rgb: var(--sy-brand-700-rgb); --sy-brand-800-ink-rgb: var(--sy-brand-800-rgb); --sy-brand-900-ink-rgb: var(--sy-brand-900-rgb); --sy-brand-950-ink-rgb: var(--sy-brand-950-rgb); --sy-accent-50-ink-rgb: var(--sy-accent-50-rgb); --sy-accent-100-ink-rgb: var(--sy-accent-100-rgb); --sy-accent-200-ink-rgb: var(--sy-accent-200-rgb); --sy-accent-300-ink-rgb: var(--sy-accent-300-rgb); --sy-accent-400-ink-rgb: var(--sy-accent-400-rgb); --sy-accent-500-ink-rgb: var(--sy-accent-500-rgb); --sy-accent-600-ink-rgb: var(--sy-accent-600-rgb); --sy-accent-700-ink-rgb: var(--sy-accent-700-rgb); --sy-accent-800-ink-rgb: var(--sy-accent-800-rgb); --sy-accent-900-ink-rgb: var(--sy-accent-900-rgb); --sy-accent-950-ink-rgb: var(--sy-accent-950-rgb); --sy-on-brand-rgb: 255 255 255; --sy-on-accent-rgb: 255 255 255; --sy-on-primary-rgb: 255 255 255; /* ---------- Neutres (textes, bordures, surfaces) : canaux ---------- */ --sy-neutral-50-rgb: 249 250 251; --sy-neutral-100-rgb: 243 244 246; --sy-neutral-200-rgb: 229 231 235; --sy-neutral-300-rgb: 209 213 219; --sy-neutral-400-rgb: 156 163 175; --sy-neutral-500-rgb: 107 114 128; --sy-neutral-600-rgb: 75 85 99; --sy-neutral-700-rgb: 55 65 81; --sy-neutral-800-rgb: 31 41 55; --sy-neutral-900-rgb: 17 24 39; --sy-neutral-950-rgb: 3 7 18; /* ---------- Erreur / suppression / blocage - rouge : canaux ---------- */ --sy-danger-50-rgb: 254 242 242; --sy-danger-100-rgb: 254 226 226; --sy-danger-200-rgb: 254 202 202; --sy-danger-300-rgb: 252 165 165; --sy-danger-400-rgb: 248 113 113; --sy-danger-500-rgb: 239 68 68; --sy-danger-600-rgb: 220 38 38; --sy-danger-700-rgb: 185 28 28; --sy-danger-800-rgb: 153 27 27; --sy-danger-900-rgb: 127 29 29; --sy-danger-950-rgb: 69 10 10; /* ---------- Alerte / attention - ambre : canaux ---------- */ --sy-warning-50-rgb: 255 251 235; --sy-warning-100-rgb: 254 243 199; --sy-warning-200-rgb: 253 230 138; --sy-warning-300-rgb: 252 211 77; --sy-warning-400-rgb: 251 191 36; --sy-warning-500-rgb: 245 158 11; --sy-warning-600-rgb: 217 119 6; --sy-warning-700-rgb: 180 83 9; --sy-warning-800-rgb: 146 64 14; --sy-warning-900-rgb: 120 53 15; --sy-warning-950-rgb: 69 26 3; /* ---------- Succes / validation - vert : canaux ---------- */ --sy-success-50-rgb: 236 253 245; --sy-success-100-rgb: 209 250 229; --sy-success-200-rgb: 167 243 208; --sy-success-300-rgb: 110 231 183; --sy-success-400-rgb: 52 211 153; --sy-success-500-rgb: 16 185 129; --sy-success-600-rgb: 5 150 105; --sy-success-700-rgb: 4 120 87; --sy-success-800-rgb: 6 95 70; --sy-success-900-rgb: 6 78 59; --sy-success-950-rgb: 2 44 34; /* ---------- Promotion / mise en avant - rose : canaux ---------- */ --sy-promo-50-rgb: 253 242 248; --sy-promo-100-rgb: 252 231 243; --sy-promo-200-rgb: 251 207 232; --sy-promo-300-rgb: 249 168 212; --sy-promo-400-rgb: 244 114 182; --sy-promo-500-rgb: 236 72 153; --sy-promo-600-rgb: 219 39 119; --sy-promo-700-rgb: 190 24 93; --sy-promo-800-rgb: 157 23 77; --sy-promo-900-rgb: 131 24 67; --sy-promo-950-rgb: 80 7 36; /* ---------- Premium - or : canaux ---------- */ --sy-gold-500-rgb: 212 175 55; --sy-gold-700-rgb: 180 148 43; /* ---------- Divers ---------- */ --sy-ink-rgb: 62 62 62; --sy-magenta-rgb: 255 0 170; /* Teintes violettes claires des dégradés (QR code, jeu des drapeaux) : #f8f5ff fusionné dans 50. */ --sy-violet-50-rgb: 250 245 255; --sy-violet-100-rgb: 243 232 255; /* ---------- Surfaces, blanc fixe et noir (2026-10-17) : canaux ---------- Deux blancs à ne pas confondre : - SURFACE : fond des cartes, tiroirs, modales, champs, header et navbar, voiles posés sur la page, anneaux qui détachent un élément du fond. Suit le thème clair / sombre. - BLANC FIXE : blanc posé SUR une couleur, une photo ou une carte (verre sur dégradé, reflets, contours de photos et de marqueurs, cadre du QR code, flash photo). Reste blanc partout. Transparences composées sur le canal : rgb(var(--sy-surface-rgb) / 0.8). Doc : Documentations/UI/theme_sombre.md */ --sy-surface-rgb: 255 255 255; --sy-white-rgb: 255 255 255; --sy-white-hover-rgb: 244 244 245; --sy-black-rgb: 0 0 0; /* Couleur des ombres portées (box-shadow, text-shadow, drop-shadow). */ --sy-shadow-rgb: 0 0 0; /* ---------- Couleurs pretes a l'emploi (CSS) ---------- */ --sy-brand-50: rgb(var(--sy-brand-50-rgb)); --sy-brand-100: rgb(var(--sy-brand-100-rgb)); --sy-brand-200: rgb(var(--sy-brand-200-rgb)); --sy-brand-300: rgb(var(--sy-brand-300-rgb)); --sy-brand-400: rgb(var(--sy-brand-400-rgb)); --sy-brand-500: rgb(var(--sy-brand-500-rgb)); --sy-brand-600: rgb(var(--sy-brand-600-rgb)); --sy-brand-700: rgb(var(--sy-brand-700-rgb)); --sy-brand-800: rgb(var(--sy-brand-800-rgb)); --sy-brand-900: rgb(var(--sy-brand-900-rgb)); --sy-brand-950: rgb(var(--sy-brand-950-rgb)); --sy-accent-50: rgb(var(--sy-accent-50-rgb)); --sy-accent-100: rgb(var(--sy-accent-100-rgb)); --sy-accent-200: rgb(var(--sy-accent-200-rgb)); --sy-accent-300: rgb(var(--sy-accent-300-rgb)); --sy-accent-400: rgb(var(--sy-accent-400-rgb)); --sy-accent-500: rgb(var(--sy-accent-500-rgb)); --sy-accent-600: rgb(var(--sy-accent-600-rgb)); --sy-accent-700: rgb(var(--sy-accent-700-rgb)); --sy-accent-800: rgb(var(--sy-accent-800-rgb)); --sy-accent-900: rgb(var(--sy-accent-900-rgb)); --sy-accent-950: rgb(var(--sy-accent-950-rgb)); --sy-neutral-50: rgb(var(--sy-neutral-50-rgb)); --sy-neutral-100: rgb(var(--sy-neutral-100-rgb)); --sy-neutral-200: rgb(var(--sy-neutral-200-rgb)); --sy-neutral-300: rgb(var(--sy-neutral-300-rgb)); --sy-neutral-400: rgb(var(--sy-neutral-400-rgb)); --sy-neutral-500: rgb(var(--sy-neutral-500-rgb)); --sy-neutral-600: rgb(var(--sy-neutral-600-rgb)); --sy-neutral-700: rgb(var(--sy-neutral-700-rgb)); --sy-neutral-800: rgb(var(--sy-neutral-800-rgb)); --sy-neutral-900: rgb(var(--sy-neutral-900-rgb)); --sy-neutral-950: rgb(var(--sy-neutral-950-rgb)); --sy-danger-50: rgb(var(--sy-danger-50-rgb)); --sy-danger-100: rgb(var(--sy-danger-100-rgb)); --sy-danger-200: rgb(var(--sy-danger-200-rgb)); --sy-danger-300: rgb(var(--sy-danger-300-rgb)); --sy-danger-400: rgb(var(--sy-danger-400-rgb)); --sy-danger-500: rgb(var(--sy-danger-500-rgb)); --sy-danger-600: rgb(var(--sy-danger-600-rgb)); --sy-danger-700: rgb(var(--sy-danger-700-rgb)); --sy-danger-800: rgb(var(--sy-danger-800-rgb)); --sy-danger-900: rgb(var(--sy-danger-900-rgb)); --sy-danger-950: rgb(var(--sy-danger-950-rgb)); --sy-warning-50: rgb(var(--sy-warning-50-rgb)); --sy-warning-100: rgb(var(--sy-warning-100-rgb)); --sy-warning-200: rgb(var(--sy-warning-200-rgb)); --sy-warning-300: rgb(var(--sy-warning-300-rgb)); --sy-warning-400: rgb(var(--sy-warning-400-rgb)); --sy-warning-500: rgb(var(--sy-warning-500-rgb)); --sy-warning-600: rgb(var(--sy-warning-600-rgb)); --sy-warning-700: rgb(var(--sy-warning-700-rgb)); --sy-warning-800: rgb(var(--sy-warning-800-rgb)); --sy-warning-900: rgb(var(--sy-warning-900-rgb)); --sy-warning-950: rgb(var(--sy-warning-950-rgb)); --sy-success-50: rgb(var(--sy-success-50-rgb)); --sy-success-100: rgb(var(--sy-success-100-rgb)); --sy-success-200: rgb(var(--sy-success-200-rgb)); --sy-success-300: rgb(var(--sy-success-300-rgb)); --sy-success-400: rgb(var(--sy-success-400-rgb)); --sy-success-500: rgb(var(--sy-success-500-rgb)); --sy-success-600: rgb(var(--sy-success-600-rgb)); --sy-success-700: rgb(var(--sy-success-700-rgb)); --sy-success-800: rgb(var(--sy-success-800-rgb)); --sy-success-900: rgb(var(--sy-success-900-rgb)); --sy-success-950: rgb(var(--sy-success-950-rgb)); --sy-promo-50: rgb(var(--sy-promo-50-rgb)); --sy-promo-100: rgb(var(--sy-promo-100-rgb)); --sy-promo-200: rgb(var(--sy-promo-200-rgb)); --sy-promo-300: rgb(var(--sy-promo-300-rgb)); --sy-promo-400: rgb(var(--sy-promo-400-rgb)); --sy-promo-500: rgb(var(--sy-promo-500-rgb)); --sy-promo-600: rgb(var(--sy-promo-600-rgb)); --sy-promo-700: rgb(var(--sy-promo-700-rgb)); --sy-promo-800: rgb(var(--sy-promo-800-rgb)); --sy-promo-900: rgb(var(--sy-promo-900-rgb)); --sy-promo-950: rgb(var(--sy-promo-950-rgb)); --sy-gold-500: rgb(var(--sy-gold-500-rgb)); --sy-gold-700: rgb(var(--sy-gold-700-rgb)); --sy-ink: rgb(var(--sy-ink-rgb)); --sy-magenta: rgb(var(--sy-magenta-rgb)); --sy-violet-50: rgb(var(--sy-violet-50-rgb)); --sy-violet-100: rgb(var(--sy-violet-100-rgb)); --sy-surface: rgb(var(--sy-surface-rgb)); --sy-white: rgb(var(--sy-white-rgb)); --sy-white-hover: rgb(var(--sy-white-hover-rgb)); --sy-black: rgb(var(--sy-black-rgb)); /* ---------- Ombres (2026-10-17) : échelle unique ---------- Les ~40 ombres noires quasi identiques de style.css et des modules y sont fusionnées. Une ombre hors échelle compose sa couleur sur --sy-shadow-rgb. */ --sy-shadow-hairline: 0 0 1px rgb(var(--sy-shadow-rgb) / 0.15); --sy-shadow-xs: 0 2px 4px rgb(var(--sy-shadow-rgb) / 0.1); --sy-shadow-sm: 0 2px 6px rgb(var(--sy-shadow-rgb) / 0.2); --sy-shadow-md: 0 4px 14px rgb(var(--sy-shadow-rgb) / 0.12); --sy-shadow-md-strong: 0 4px 14px rgb(var(--sy-shadow-rgb) / 0.18); --sy-shadow-lg: 0 8px 24px rgb(var(--sy-shadow-rgb) / 0.2); --sy-shadow-xl: 0 16px 40px rgb(var(--sy-shadow-rgb) / 0.45); --sy-shadow-up: 0 -6px 24px rgb(var(--sy-shadow-rgb) / 0.18); --sy-text-shadow-soft: 0 1px 2px rgb(var(--sy-shadow-rgb) / 0.35); --sy-text-shadow-strong: 0 1px 2px rgb(var(--sy-shadow-rgb) / 0.85); /* Filtre des tuiles de la carte (Leaflet) : aucun en clair, tamisé en sombre. */ --sy-map-tiles-filter: none; /* ---------- Alias semantiques (a preferer dans le nouveau code) ---------- */ --sy-primary: var(--sy-brand-600); --sy-primary-strong: var(--sy-brand-700); --sy-secondary: var(--sy-accent-500); --sy-text: var(--sy-ink); --sy-text-muted: var(--sy-neutral-500); --sy-border: var(--sy-neutral-200); --sy-surface-muted: var(--sy-neutral-100); --sy-premium: var(--sy-gold-500); --sy-scanner-gradient-from: var(--sy-brand-600); --sy-scanner-gradient-to: var(--sy-accent-500); } /* >>> THÈME SOMBRE : généré par tools/gen-dark-tokens.mjs, ne pas éditer à la main >>> */ /* Encre des familles fixes en clair : le cran lui-même (rendu inchangé). Les classes text-* de Tailwind lisent ces -ink-rgb (tools/tailwind/tailwind.config.js), les fonds le canal brut. */ :root { --sy-neutral-50-ink-rgb: var(--sy-neutral-50-rgb); --sy-neutral-100-ink-rgb: var(--sy-neutral-100-rgb); --sy-neutral-200-ink-rgb: var(--sy-neutral-200-rgb); --sy-neutral-300-ink-rgb: var(--sy-neutral-300-rgb); --sy-neutral-400-ink-rgb: var(--sy-neutral-400-rgb); --sy-neutral-500-ink-rgb: var(--sy-neutral-500-rgb); --sy-neutral-600-ink-rgb: var(--sy-neutral-600-rgb); --sy-neutral-700-ink-rgb: var(--sy-neutral-700-rgb); --sy-neutral-800-ink-rgb: var(--sy-neutral-800-rgb); --sy-neutral-900-ink-rgb: var(--sy-neutral-900-rgb); --sy-neutral-950-ink-rgb: var(--sy-neutral-950-rgb); --sy-danger-50-ink-rgb: var(--sy-danger-50-rgb); --sy-danger-100-ink-rgb: var(--sy-danger-100-rgb); --sy-danger-200-ink-rgb: var(--sy-danger-200-rgb); --sy-danger-300-ink-rgb: var(--sy-danger-300-rgb); --sy-danger-400-ink-rgb: var(--sy-danger-400-rgb); --sy-danger-500-ink-rgb: var(--sy-danger-500-rgb); --sy-danger-600-ink-rgb: var(--sy-danger-600-rgb); --sy-danger-700-ink-rgb: var(--sy-danger-700-rgb); --sy-danger-800-ink-rgb: var(--sy-danger-800-rgb); --sy-danger-900-ink-rgb: var(--sy-danger-900-rgb); --sy-danger-950-ink-rgb: var(--sy-danger-950-rgb); --sy-warning-50-ink-rgb: var(--sy-warning-50-rgb); --sy-warning-100-ink-rgb: var(--sy-warning-100-rgb); --sy-warning-200-ink-rgb: var(--sy-warning-200-rgb); --sy-warning-300-ink-rgb: var(--sy-warning-300-rgb); --sy-warning-400-ink-rgb: var(--sy-warning-400-rgb); --sy-warning-500-ink-rgb: var(--sy-warning-500-rgb); --sy-warning-600-ink-rgb: var(--sy-warning-600-rgb); --sy-warning-700-ink-rgb: var(--sy-warning-700-rgb); --sy-warning-800-ink-rgb: var(--sy-warning-800-rgb); --sy-warning-900-ink-rgb: var(--sy-warning-900-rgb); --sy-warning-950-ink-rgb: var(--sy-warning-950-rgb); --sy-success-50-ink-rgb: var(--sy-success-50-rgb); --sy-success-100-ink-rgb: var(--sy-success-100-rgb); --sy-success-200-ink-rgb: var(--sy-success-200-rgb); --sy-success-300-ink-rgb: var(--sy-success-300-rgb); --sy-success-400-ink-rgb: var(--sy-success-400-rgb); --sy-success-500-ink-rgb: var(--sy-success-500-rgb); --sy-success-600-ink-rgb: var(--sy-success-600-rgb); --sy-success-700-ink-rgb: var(--sy-success-700-rgb); --sy-success-800-ink-rgb: var(--sy-success-800-rgb); --sy-success-900-ink-rgb: var(--sy-success-900-rgb); --sy-success-950-ink-rgb: var(--sy-success-950-rgb); --sy-promo-50-ink-rgb: var(--sy-promo-50-rgb); --sy-promo-100-ink-rgb: var(--sy-promo-100-rgb); --sy-promo-200-ink-rgb: var(--sy-promo-200-rgb); --sy-promo-300-ink-rgb: var(--sy-promo-300-rgb); --sy-promo-400-ink-rgb: var(--sy-promo-400-rgb); --sy-promo-500-ink-rgb: var(--sy-promo-500-rgb); --sy-promo-600-ink-rgb: var(--sy-promo-600-rgb); --sy-promo-700-ink-rgb: var(--sy-promo-700-rgb); --sy-promo-800-ink-rgb: var(--sy-promo-800-rgb); --sy-promo-900-ink-rgb: var(--sy-promo-900-rgb); --sy-promo-950-ink-rgb: var(--sy-promo-950-rgb); } /* Pages qui déclarent le sombre (meta color-scheme « light dark », index.php) : éléments natifs clair ou sombre, et navigateurs qui forcent le sombre (Samsung Internet) sur NOTRE thème. */ :root:has(meta[name="color-scheme"][content~="dark"]) { color-scheme: light dark; } /* « Clair » choisi dans les Paramètres : clair même si le système est en sombre. */ :root[data-sy-scheme="light"] { color-scheme: light; } /* Sombre : préférence du système (réglage « Auto », pages qui déclarent le sombre) ou « Sombre » choisi dans les Paramètres (attribut posé par modules/ui/colorScheme.js). Deux copies du même bloc, générées. Sans :has() (navigateurs anciens), l’Auto reste clair, sans casse. */ @media (prefers-color-scheme: dark) { :root:not([data-sy-scheme="light"]):has(meta[name="color-scheme"][content~="dark"]) { color-scheme: dark; /* Neutres : fond de page anthracite, surfaces, bordures, textes tamisés */ --sy-neutral-50-rgb: 33 35 39; --sy-neutral-100-rgb: 51 53 58; --sy-neutral-200-rgb: 60 62 67; --sy-neutral-300-rgb: 76 78 83; --sy-neutral-400-rgb: 126 128 133; --sy-neutral-500-rgb: 156 158 164; --sy-neutral-600-rgb: 178 180 185; --sy-neutral-700-rgb: 197 199 205; --sy-neutral-800-rgb: 214 217 223; --sy-neutral-900-rgb: 226 229 234; --sy-neutral-950-rgb: 234 237 242; --sy-neutral-50-ink-rgb: 234 237 242; --sy-neutral-100-ink-rgb: 227 230 236; --sy-neutral-200-ink-rgb: 219 222 227; --sy-neutral-300-ink-rgb: 203 206 211; --sy-neutral-400-ink-rgb: 126 128 133; --sy-neutral-500-ink-rgb: 156 158 164; --sy-neutral-600-ink-rgb: 178 180 185; --sy-neutral-700-ink-rgb: 197 199 205; --sy-neutral-800-ink-rgb: 214 217 223; --sy-neutral-900-ink-rgb: 226 229 234; --sy-neutral-950-ink-rgb: 234 237 242; --sy-surface-rgb: 41 43 47; --sy-ink-rgb: 214 217 223; /* danger */ --sy-danger-50-rgb: 65 43 43; --sy-danger-100-rgb: 78 47 48; --sy-danger-200-rgb: 100 56 57; --sy-danger-300-rgb: 134 71 72; --sy-danger-400-rgb: 239 121 119; --sy-danger-500-rgb: 229 82 78; --sy-danger-600-rgb: 210 59 52; --sy-danger-700-rgb: 176 47 41; --sy-danger-800-rgb: 151 46 41; --sy-danger-900-rgb: 142 57 52; --sy-danger-950-rgb: 126 70 65; --sy-danger-50-ink-rgb: 236 226 226; --sy-danger-100-ink-rgb: 247 222 222; --sy-danger-200-ink-rgb: 251 204 203; --sy-danger-300-ink-rgb: 247 168 168; --sy-danger-400-ink-rgb: 212 100 99; --sy-danger-500-ink-rgb: 255 130 121; --sy-danger-600-ink-rgb: 255 130 117; --sy-danger-700-ink-rgb: 255 130 117; --sy-danger-800-ink-rgb: 246 135 124; --sy-danger-900-ink-rgb: 249 156 147; --sy-danger-950-ink-rgb: 255 219 214; /* warning */ --sy-warning-50-rgb: 54 50 34; --sy-warning-100-rgb: 63 57 35; --sy-warning-200-rgb: 78 70 38; --sy-warning-300-rgb: 106 91 43; --sy-warning-400-rgb: 233 181 60; --sy-warning-500-rgb: 238 162 58; --sy-warning-600-rgb: 210 124 46; --sy-warning-700-rgb: 173 88 36; --sy-warning-800-rgb: 140 69 30; --sy-warning-900-rgb: 130 70 40; --sy-warning-950-rgb: 118 76 56; --sy-warning-50-ink-rgb: 232 229 215; --sy-warning-100-ink-rgb: 239 229 190; --sy-warning-200-ink-rgb: 249 229 147; --sy-warning-300-ink-rgb: 248 212 98; --sy-warning-400-ink-rgb: 171 128 0; --sy-warning-500-ink-rgb: 224 152 52; --sy-warning-600-ink-rgb: 232 147 76; --sy-warning-700-ink-rgb: 233 145 97; --sy-warning-800-ink-rgb: 225 148 112; --sy-warning-900-ink-rgb: 227 161 131; --sy-warning-950-ink-rgb: 255 212 192; /* success */ --sy-success-50-rgb: 38 54 47; --sy-success-100-rgb: 41 63 52; --sy-success-200-rgb: 47 78 64; --sy-success-300-rgb: 55 103 83; --sy-success-400-rgb: 82 208 157; --sy-success-500-rgb: 59 182 133; --sy-success-600-rgb: 44 148 108; --sy-success-700-rgb: 34 118 89; --sy-success-800-rgb: 36 101 79; --sy-success-900-rgb: 47 100 82; --sy-success-950-rgb: 62 96 85; --sy-success-50-ink-rgb: 218 233 226; --sy-success-100-ink-rgb: 202 239 220; --sy-success-200-ink-rgb: 174 241 210; --sy-success-300-ink-rgb: 123 229 185; --sy-success-400-ink-rgb: 0 153 107; --sy-success-500-ink-rgb: 71 186 138; --sy-success-600-ink-rgb: 91 184 144; --sy-success-700-ink-rgb: 106 181 150; --sy-success-800-ink-rgb: 127 189 164; --sy-success-900-ink-rgb: 151 204 183; --sy-success-950-ink-rgb: 201 237 225; /* promo */ --sy-promo-50-rgb: 62 43 54; --sy-promo-100-rgb: 74 47 64; --sy-promo-200-rgb: 94 56 79; --sy-promo-300-rgb: 128 70 103; --sy-promo-400-rgb: 236 122 180; --sy-promo-500-rgb: 227 86 152; --sy-promo-600-rgb: 210 59 120; --sy-promo-700-rgb: 182 45 95; --sy-promo-800-rgb: 150 39 79; --sy-promo-900-rgb: 142 51 82; --sy-promo-950-rgb: 130 64 82; --sy-promo-50-ink-rgb: 235 225 231; --sy-promo-100-ink-rgb: 241 222 233; --sy-promo-200-ink-rgb: 248 209 231; --sy-promo-300-ink-rgb: 244 171 211; --sy-promo-400-ink-rgb: 205 98 153; --sy-promo-500-ink-rgb: 255 122 181; --sy-promo-600-ink-rgb: 255 124 168; --sy-promo-700-ink-rgb: 255 125 162; --sy-promo-800-ink-rgb: 247 131 162; --sy-promo-900-ink-rgb: 245 147 174; --sy-promo-950-ink-rgb: 255 205 216; /* Marque (azur de base) : un thème de couleur posé en JS remplace ces valeurs en style inline */ --sy-brand-50-rgb: 38 52 60; --sy-brand-50-ink-rgb: 222 230 235; --sy-brand-100-rgb: 41 60 72; --sy-brand-100-ink-rgb: 215 231 242; --sy-brand-200-rgb: 44 75 90; --sy-brand-200-ink-rgb: 190 229 250; --sy-brand-300-rgb: 52 99 121; --sy-brand-300-ink-rgb: 134 210 247; --sy-brand-400-rgb: 81 188 239; --sy-brand-400-ink-rgb: 31 144 192; --sy-brand-500-rgb: 55 164 224; --sy-brand-500-ink-rgb: 75 176 234; --sy-brand-600-rgb: 41 132 190; --sy-brand-600-ink-rgb: 92 174 233; --sy-brand-700-rgb: 31 105 154; --sy-brand-700-ink-rgb: 106 173 224; --sy-brand-800-rgb: 33 94 132; --sy-brand-800-ink-rgb: 120 177 219; --sy-brand-900-rgb: 45 93 126; --sy-brand-900-ink-rgb: 145 193 228; --sy-brand-950-rgb: 60 92 117; --sy-brand-950-ink-rgb: 188 223 251; --sy-accent-50-rgb: 39 50 65; --sy-accent-50-ink-rgb: 223 229 237; --sy-accent-100-rgb: 43 58 79; --sy-accent-100-ink-rgb: 216 230 248; --sy-accent-200-rgb: 49 72 100; --sy-accent-200-ink-rgb: 194 219 250; --sy-accent-300-rgb: 57 95 135; --sy-accent-300-ink-rgb: 152 197 247; --sy-accent-400-rgb: 106 165 240; --sy-accent-400-ink-rgb: 80 137 206; --sy-accent-500-rgb: 71 132 233; --sy-accent-500-ink-rgb: 114 167 255; --sy-accent-600-rgb: 48 103 221; --sy-accent-600-ink-rgb: 120 166 255; --sy-accent-700-rgb: 38 83 202; --sy-accent-700-ink-rgb: 124 165 255; --sy-accent-800-rgb: 45 79 175; --sy-accent-800-ink-rgb: 138 173 255; --sy-accent-900-rgb: 55 84 155; --sy-accent-900-ink-rgb: 159 189 255; --sy-accent-950-rgb: 69 86 131; --sy-accent-950-ink-rgb: 207 221 255; --sy-on-brand-rgb: 255 255 255; --sy-on-accent-rgb: 255 255 255; --sy-on-primary-rgb: 255 255 255; --sy-on-white-rgb: 3 105 161; --sy-violet-50-rgb: 53 46 60; --sy-violet-100-rgb: 62 52 72; /* Ombres plus marquées */ --sy-shadow-hairline: 0 0 1px rgb(var(--sy-shadow-rgb) / 0.3); --sy-shadow-xs: 0 2px 4px rgb(var(--sy-shadow-rgb) / 0.28); --sy-shadow-sm: 0 2px 6px rgb(var(--sy-shadow-rgb) / 0.4); --sy-shadow-md: 0 4px 14px rgb(var(--sy-shadow-rgb) / 0.32); --sy-shadow-md-strong: 0 4px 14px rgb(var(--sy-shadow-rgb) / 0.42); --sy-shadow-lg: 0 8px 24px rgb(var(--sy-shadow-rgb) / 0.45); --sy-shadow-xl: 0 16px 40px rgb(var(--sy-shadow-rgb) / 0.6); --sy-shadow-up: 0 -6px 24px rgb(var(--sy-shadow-rgb) / 0.35); /* Tuiles de la carte tamisées (les cartes claires éblouissent sur fond sombre) */ --sy-map-tiles-filter: brightness(0.72) contrast(1.08) saturate(0.8); } } :root[data-sy-scheme="dark"] { color-scheme: dark; /* Neutres : fond de page anthracite, surfaces, bordures, textes tamisés */ --sy-neutral-50-rgb: 33 35 39; --sy-neutral-100-rgb: 51 53 58; --sy-neutral-200-rgb: 60 62 67; --sy-neutral-300-rgb: 76 78 83; --sy-neutral-400-rgb: 126 128 133; --sy-neutral-500-rgb: 156 158 164; --sy-neutral-600-rgb: 178 180 185; --sy-neutral-700-rgb: 197 199 205; --sy-neutral-800-rgb: 214 217 223; --sy-neutral-900-rgb: 226 229 234; --sy-neutral-950-rgb: 234 237 242; --sy-neutral-50-ink-rgb: 234 237 242; --sy-neutral-100-ink-rgb: 227 230 236; --sy-neutral-200-ink-rgb: 219 222 227; --sy-neutral-300-ink-rgb: 203 206 211; --sy-neutral-400-ink-rgb: 126 128 133; --sy-neutral-500-ink-rgb: 156 158 164; --sy-neutral-600-ink-rgb: 178 180 185; --sy-neutral-700-ink-rgb: 197 199 205; --sy-neutral-800-ink-rgb: 214 217 223; --sy-neutral-900-ink-rgb: 226 229 234; --sy-neutral-950-ink-rgb: 234 237 242; --sy-surface-rgb: 41 43 47; --sy-ink-rgb: 214 217 223; /* danger */ --sy-danger-50-rgb: 65 43 43; --sy-danger-100-rgb: 78 47 48; --sy-danger-200-rgb: 100 56 57; --sy-danger-300-rgb: 134 71 72; --sy-danger-400-rgb: 239 121 119; --sy-danger-500-rgb: 229 82 78; --sy-danger-600-rgb: 210 59 52; --sy-danger-700-rgb: 176 47 41; --sy-danger-800-rgb: 151 46 41; --sy-danger-900-rgb: 142 57 52; --sy-danger-950-rgb: 126 70 65; --sy-danger-50-ink-rgb: 236 226 226; --sy-danger-100-ink-rgb: 247 222 222; --sy-danger-200-ink-rgb: 251 204 203; --sy-danger-300-ink-rgb: 247 168 168; --sy-danger-400-ink-rgb: 212 100 99; --sy-danger-500-ink-rgb: 255 130 121; --sy-danger-600-ink-rgb: 255 130 117; --sy-danger-700-ink-rgb: 255 130 117; --sy-danger-800-ink-rgb: 246 135 124; --sy-danger-900-ink-rgb: 249 156 147; --sy-danger-950-ink-rgb: 255 219 214; /* warning */ --sy-warning-50-rgb: 54 50 34; --sy-warning-100-rgb: 63 57 35; --sy-warning-200-rgb: 78 70 38; --sy-warning-300-rgb: 106 91 43; --sy-warning-400-rgb: 233 181 60; --sy-warning-500-rgb: 238 162 58; --sy-warning-600-rgb: 210 124 46; --sy-warning-700-rgb: 173 88 36; --sy-warning-800-rgb: 140 69 30; --sy-warning-900-rgb: 130 70 40; --sy-warning-950-rgb: 118 76 56; --sy-warning-50-ink-rgb: 232 229 215; --sy-warning-100-ink-rgb: 239 229 190; --sy-warning-200-ink-rgb: 249 229 147; --sy-warning-300-ink-rgb: 248 212 98; --sy-warning-400-ink-rgb: 171 128 0; --sy-warning-500-ink-rgb: 224 152 52; --sy-warning-600-ink-rgb: 232 147 76; --sy-warning-700-ink-rgb: 233 145 97; --sy-warning-800-ink-rgb: 225 148 112; --sy-warning-900-ink-rgb: 227 161 131; --sy-warning-950-ink-rgb: 255 212 192; /* success */ --sy-success-50-rgb: 38 54 47; --sy-success-100-rgb: 41 63 52; --sy-success-200-rgb: 47 78 64; --sy-success-300-rgb: 55 103 83; --sy-success-400-rgb: 82 208 157; --sy-success-500-rgb: 59 182 133; --sy-success-600-rgb: 44 148 108; --sy-success-700-rgb: 34 118 89; --sy-success-800-rgb: 36 101 79; --sy-success-900-rgb: 47 100 82; --sy-success-950-rgb: 62 96 85; --sy-success-50-ink-rgb: 218 233 226; --sy-success-100-ink-rgb: 202 239 220; --sy-success-200-ink-rgb: 174 241 210; --sy-success-300-ink-rgb: 123 229 185; --sy-success-400-ink-rgb: 0 153 107; --sy-success-500-ink-rgb: 71 186 138; --sy-success-600-ink-rgb: 91 184 144; --sy-success-700-ink-rgb: 106 181 150; --sy-success-800-ink-rgb: 127 189 164; --sy-success-900-ink-rgb: 151 204 183; --sy-success-950-ink-rgb: 201 237 225; /* promo */ --sy-promo-50-rgb: 62 43 54; --sy-promo-100-rgb: 74 47 64; --sy-promo-200-rgb: 94 56 79; --sy-promo-300-rgb: 128 70 103; --sy-promo-400-rgb: 236 122 180; --sy-promo-500-rgb: 227 86 152; --sy-promo-600-rgb: 210 59 120; --sy-promo-700-rgb: 182 45 95; --sy-promo-800-rgb: 150 39 79; --sy-promo-900-rgb: 142 51 82; --sy-promo-950-rgb: 130 64 82; --sy-promo-50-ink-rgb: 235 225 231; --sy-promo-100-ink-rgb: 241 222 233; --sy-promo-200-ink-rgb: 248 209 231; --sy-promo-300-ink-rgb: 244 171 211; --sy-promo-400-ink-rgb: 205 98 153; --sy-promo-500-ink-rgb: 255 122 181; --sy-promo-600-ink-rgb: 255 124 168; --sy-promo-700-ink-rgb: 255 125 162; --sy-promo-800-ink-rgb: 247 131 162; --sy-promo-900-ink-rgb: 245 147 174; --sy-promo-950-ink-rgb: 255 205 216; /* Marque (azur de base) : un thème de couleur posé en JS remplace ces valeurs en style inline */ --sy-brand-50-rgb: 38 52 60; --sy-brand-50-ink-rgb: 222 230 235; --sy-brand-100-rgb: 41 60 72; --sy-brand-100-ink-rgb: 215 231 242; --sy-brand-200-rgb: 44 75 90; --sy-brand-200-ink-rgb: 190 229 250; --sy-brand-300-rgb: 52 99 121; --sy-brand-300-ink-rgb: 134 210 247; --sy-brand-400-rgb: 81 188 239; --sy-brand-400-ink-rgb: 31 144 192; --sy-brand-500-rgb: 55 164 224; --sy-brand-500-ink-rgb: 75 176 234; --sy-brand-600-rgb: 41 132 190; --sy-brand-600-ink-rgb: 92 174 233; --sy-brand-700-rgb: 31 105 154; --sy-brand-700-ink-rgb: 106 173 224; --sy-brand-800-rgb: 33 94 132; --sy-brand-800-ink-rgb: 120 177 219; --sy-brand-900-rgb: 45 93 126; --sy-brand-900-ink-rgb: 145 193 228; --sy-brand-950-rgb: 60 92 117; --sy-brand-950-ink-rgb: 188 223 251; --sy-accent-50-rgb: 39 50 65; --sy-accent-50-ink-rgb: 223 229 237; --sy-accent-100-rgb: 43 58 79; --sy-accent-100-ink-rgb: 216 230 248; --sy-accent-200-rgb: 49 72 100; --sy-accent-200-ink-rgb: 194 219 250; --sy-accent-300-rgb: 57 95 135; --sy-accent-300-ink-rgb: 152 197 247; --sy-accent-400-rgb: 106 165 240; --sy-accent-400-ink-rgb: 80 137 206; --sy-accent-500-rgb: 71 132 233; --sy-accent-500-ink-rgb: 114 167 255; --sy-accent-600-rgb: 48 103 221; --sy-accent-600-ink-rgb: 120 166 255; --sy-accent-700-rgb: 38 83 202; --sy-accent-700-ink-rgb: 124 165 255; --sy-accent-800-rgb: 45 79 175; --sy-accent-800-ink-rgb: 138 173 255; --sy-accent-900-rgb: 55 84 155; --sy-accent-900-ink-rgb: 159 189 255; --sy-accent-950-rgb: 69 86 131; --sy-accent-950-ink-rgb: 207 221 255; --sy-on-brand-rgb: 255 255 255; --sy-on-accent-rgb: 255 255 255; --sy-on-primary-rgb: 255 255 255; --sy-on-white-rgb: 3 105 161; --sy-violet-50-rgb: 53 46 60; --sy-violet-100-rgb: 62 52 72; /* Ombres plus marquées */ --sy-shadow-hairline: 0 0 1px rgb(var(--sy-shadow-rgb) / 0.3); --sy-shadow-xs: 0 2px 4px rgb(var(--sy-shadow-rgb) / 0.28); --sy-shadow-sm: 0 2px 6px rgb(var(--sy-shadow-rgb) / 0.4); --sy-shadow-md: 0 4px 14px rgb(var(--sy-shadow-rgb) / 0.32); --sy-shadow-md-strong: 0 4px 14px rgb(var(--sy-shadow-rgb) / 0.42); --sy-shadow-lg: 0 8px 24px rgb(var(--sy-shadow-rgb) / 0.45); --sy-shadow-xl: 0 16px 40px rgb(var(--sy-shadow-rgb) / 0.6); --sy-shadow-up: 0 -6px 24px rgb(var(--sy-shadow-rgb) / 0.35); /* Tuiles de la carte tamisées (les cartes claires éblouissent sur fond sombre) */ --sy-map-tiles-filter: brightness(0.72) contrast(1.08) saturate(0.8); } /* <<< FIN DU THÈME SOMBRE <<< */