/* * leaflet-theme.css — mise au thème des cartes Leaflet, pour TOUTES les cartes du site. * * POURQUOI UN FICHIER À PART. Ces règles vivaient dans `carnet.css`, que seules les pages * du carnet et la carte des clubs chargent. Les deux cartes du forum — « Localisations des * utilisateurs » et l'éditeur de position du profil — vivent dans une IFRAME * (`forum/mods/openstreetmap/maptool/mapframe.php`) qui ne charge que les CSS de Leaflet : * ni `tireur.min.css`, ni `carnet.css`. Elles restaient donc en clair, carte du monde * éblouissante sous un chrome de forum noir, constaté le 2026-09-20. * * Trois consommateurs : `carte-clubs.php`, les deux carnets (via `carnet.css` qui ne les * porte plus), et l'iframe du forum. Un seul endroit, pour qu'une correction n'ait pas à * être portée trois fois — l'archétype du dépôt. * * AUTONOME PAR CONSTRUCTION. L'iframe ne charge pas `tireur.css`, donc pas les jetons de * couleur. Chaque `var(--color-…)` porte ici une VALEUR DE REPLI, qui est la valeur claire * du jeton correspondant. Sur une page du site les jetons gagnent ; dans l'iframe le repli * s'applique, et le thème sombre y passe par les blocs ci-dessous. Sans repli, la propriété * retomberait en `unset` et l'iframe perdrait jusqu'au fond blanc de ses popups. */ /* ------------------------------------------------------------------ thème clair Ces règles ne sont PAS conditionnelles, et c'est voulu : elles l'étaient — préfixées `.dark-theme` —, si bien qu'elles ne s'appliquaient qu'au choix EXPLICITE de thème et restaient inertes pour un visiteur dont seul le système est en sombre. Le popup gardait alors son fond blanc sur une page noire tout en héritant du texte clair : contraste mesuré à 1,54. Les valeurs claires coïncidant avec les défauts de Leaflet, une règle unique est juste dans les deux thèmes — et ne peut pas diverger d'un jumeau. */ .leaflet-bar a { background-color: var(--color-surface, #ffffff); color: var(--color-text, #2c3e50); border-bottom: 1px solid var(--color-border, #e0e4e8); } .leaflet-bar a:hover { background-color: var(--color-bg, #f4f7f9); } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--color-surface, #ffffff); color: var(--color-text, #2c3e50); box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4); } .leaflet-popup-content h4 { color: var(--color-text, #2c3e50) !important; } .leaflet-popup-close-button { color: var(--color-text-light, #5a6a7a) !important; } /* ------------------------------------------------------------------ thème sombre LE FILTRE PORTE SUR `.leaflet-tile-pane`, et ce choix est MESURÉ. Luminance moyenne de la carte rendue, même vue, thème sombre : 175/255 sans filtre, **155 sur `.leaflet-tile-container`** — c'est-à-dire presque rien, sa boîte faisant 0 px de large et les tuiles étant positionnées en absolu hors de la zone filtrée — **et 42 sur `.leaflet-tile-pane`**. `getComputedStyle` affichait pourtant le filtre dans les deux cas : seule la mesure des pixels tranche. Pas sur `.leaflet-container` : punaises, popups et contrôles vivent dans d'autres panes et doivent garder leurs couleurs. Pas non plus sur le pane ET les tuiles à la fois — les secondes sont les enfants du premier, et deux inversions s'annulent. Deux chemins à chaque fois : le `@media` couvre la préférence système, la classe `.dark-theme` le choix explicite. Dans l'iframe du forum, cette classe est posée par le script de `mapframe.php`, qui relit `localStorage.theme` — le `` de la page parente ne se voit pas depuis un document enfant. */ .dark-theme .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.85); } .dark-theme .leaflet-container { background: #141d26; } .dark-theme .leaflet-tile-container { filter: none; } /* Agrégats de marqueurs : valeurs franchement sombres, sans équivalent clair. */ .dark-theme .leaflet-marker-icon.marker-cluster { background-color: rgba(22, 27, 34, 0.6) !important; border: 1px solid var(--color-border, #30363d); } .dark-theme .leaflet-marker-icon.marker-cluster div { background-color: rgba(9, 132, 227, 0.85) !important; color: #ffffff !important; } @media (prefers-color-scheme: dark) { :root:not(.light-theme) .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.85); } :root:not(.light-theme) .leaflet-container { background: #141d26; } :root:not(.light-theme) .leaflet-tile-container { filter: none; } :root:not(.light-theme) .leaflet-marker-icon.marker-cluster { background-color: rgba(22, 27, 34, 0.6) !important; border: 1px solid var(--color-border, #30363d); } :root:not(.light-theme) .leaflet-marker-icon.marker-cluster div { background-color: rgba(9, 132, 227, 0.85) !important; color: #ffffff !important; } /* L'iframe du forum n'a pas les jetons du site : sans cela, son popup garderait le repli clair sur une carte devenue sombre. */ :root:not(.light-theme) .leaflet-popup-content-wrapper, :root:not(.light-theme) .leaflet-popup-tip { background: var(--color-surface, #161b22); color: var(--color-text, #c9d1d9); } :root:not(.light-theme) .leaflet-bar a { background-color: var(--color-surface, #161b22); color: var(--color-text, #c9d1d9); border-bottom-color: var(--color-border, #30363d); } } .dark-theme .leaflet-popup-content-wrapper, .dark-theme .leaflet-popup-tip { background: var(--color-surface, #161b22); color: var(--color-text, #c9d1d9); } .dark-theme .leaflet-bar a { background-color: var(--color-surface, #161b22); color: var(--color-text, #c9d1d9); border-bottom-color: var(--color-border, #30363d); }