/* * ui-extras.css — Thème clair, boutons d'en-tête, modale Infos & Crédits * Audioguide « Die, mémoires vivantes » / Trajet Spectacle * * Ce fichier complète main.css et layout.css sans les modifier : * 1. Palette claire (activée par la classe .theme-light sur ) * 2. Boutons icône du header (ⓘ infos, ☀/☾ thème) * 3. Modale Infos / Générique / Mentions légales */ /* ═════════════════════════════════════════════ 1. THÈME CLAIR Le thème sombre reste le défaut (variables dans :root de main.css). La classe .theme-light redéfinit les mêmes variables : tout le reste du CSS s'adapte automatiquement. [CHOIX TECHNIQUE] : l'accent ocre est assombri en mode clair (#c77f28 au lieu de #e8a045) pour conserver un contraste WCAG AA sur fonds clairs, notamment pour le texte des boutons. ═════════════════════════════════════════════ */ body.theme-light { --color-bg-primary: #f5f1ea; --color-bg-secondary: #ffffff; --color-bg-tertiary: #ede7dc; --color-bg-elevated: #e3dccd; --color-accent: #c77f28; --color-accent-muted: rgba(199, 127, 40, 0.12); --color-accent-dim: rgba(199, 127, 40, 0.45); --color-text-primary: #221f1a; --color-text-secondary: #5c564b; --color-text-muted: #8a8272; --color-success: #3d8a58; --color-warning: #b0741f; --color-error: #bb4a3e; --color-info: #4a6fa8; --color-border: rgba(0, 0, 0, 0.08); --color-border-strong: rgba(0, 0, 0, 0.16); --shadow-sm: 0 1px 3px rgba(60, 50, 30, 0.12); --shadow-md: 0 4px 16px rgba(60, 50, 30, 0.15); --shadow-lg: 0 8px 32px rgba(60, 50, 30, 0.18); --shadow-accent: 0 0 20px rgba(199, 127, 40, 0.15); } /* Fond du conteneur carte pendant le chargement des tuiles */ body.theme-light #map-container { background: #e8e4da; } /* Overrides Leaflet en clair (map.css utilise des couleurs en dur) */ body.theme-light #map-container .leaflet-control-attribution { background: rgba(255, 255, 255, 0.85) !important; color: var(--color-text-muted) !important; } body.theme-light .poi-marker { background: #ffffff; box-shadow: 0 2px 8px rgba(60, 50, 30, 0.35); } body.theme-light .user-marker { border-color: #ffffff; } /* Backdrop des modales plus doux en clair */ body.theme-light dialog::backdrop { background: rgba(40, 34, 24, 0.45); } /* ═════════════════════════════════════════════ 2. HEADER — groupe d'outils et boutons icône ═════════════════════════════════════════════ */ .app-header__tools { display: flex; align-items: center; gap: var(--space-2); } .icon-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-text-secondary); transition: background var(--transition-fast), color var(--transition-fast); flex-shrink: 0; } .icon-btn:active { background: var(--color-bg-elevated); color: var(--color-text-primary); } /* Icônes soleil/lune : une seule visible selon le thème */ #icon-theme-sun { display: none; } #icon-theme-moon { display: block; } body.theme-light #icon-theme-sun { display: block; } body.theme-light #icon-theme-moon { display: none; } /* ═════════════════════════════════════════════ 3. MODALE INFOS / GÉNÉRIQUE / MENTIONS LÉGALES Même mécanique que la modale POI :