/** * ARCHE — variables CSS * Thèmes : clair (défaut), sombre, contraste élevé * Appliqués via data-theme sur */ :root, [data-theme="light"] { /* Couleurs de marque */ --color-brand: #1a5f7a; --color-brand-hover: #144a5f; --color-accent: #57c5b6; /* Surfaces */ --color-bg: #f7f9fb; --color-surface: #ffffff; --color-surface-alt: #eef2f6; /* Texte */ --color-text: #1a1a1a; --color-text-muted: #4a5568; --color-link: #0b5cab; --color-link-hover: #084280; /* Bordures & focus */ --color-border: #cbd5e1; --color-focus: #0b5cab; --color-focus-ring: rgba(11, 92, 171, 0.35); /* États */ --color-success: #0f7b3a; --color-warning: #9a6700; --color-error: #b42318; --color-info: #1a5f7a; /* Bannière cookies / overlays */ --color-overlay: rgba(15, 23, 42, 0.45); --color-banner-bg: #ffffff; --color-banner-border: #1a5f7a; /* Ombres */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.1); /* Typo de base (modifiée par data-text-size) */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-size-base: 1rem; --line-height: 1.6; --space-unit: 0.5rem; /* Rayons */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; color-scheme: light; } [data-theme="dark"] { --color-brand: #57c5b6; --color-brand-hover: #7dd3c8; --color-accent: #1a5f7a; --color-bg: #0f172a; --color-surface: #1e293b; --color-surface-alt: #334155; --color-text: #f1f5f9; --color-text-muted: #94a3b8; --color-link: #7dd3fc; --color-link-hover: #bae6fd; --color-border: #475569; --color-focus: #38bdf8; --color-focus-ring: rgba(56, 189, 248, 0.45); --color-success: #4ade80; --color-warning: #fbbf24; --color-error: #f87171; --color-info: #57c5b6; --color-overlay: rgba(0, 0, 0, 0.65); --color-banner-bg: #1e293b; --color-banner-border: #57c5b6; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); color-scheme: dark; } /* Contraste élevé : noir / blanc / jaune focus — cible WCAG AAA */ [data-theme="high-contrast"] { --color-brand: #000000; --color-brand-hover: #000000; --color-accent: #ffff00; --color-bg: #ffffff; --color-surface: #ffffff; --color-surface-alt: #ffff00; --color-text: #000000; --color-text-muted: #000000; --color-link: #0000ee; --color-link-hover: #0000ee; --color-border: #000000; --color-focus: #ffff00; --color-focus-ring: #000000; --color-success: #006600; --color-warning: #666600; --color-error: #990000; --color-info: #000066; --color-overlay: rgba(0, 0, 0, 0.75); --color-banner-bg: #ffffff; --color-banner-border: #000000; --shadow-sm: none; --shadow-md: none; color-scheme: light; } /* Tailles de texte persistées via data-text-size sur */ [data-text-size="A"] { --font-size-base: 1rem; /* 16px */ } [data-text-size="A+"] { --font-size-base: 1.125rem; /* 18px */ } [data-text-size="A++"] { --font-size-base: 1.3125rem; /* 21px */ }