/* --------------------------------------------------------------------------- Mon fait divers · Brest — feuille de style Sobre, sérieux, lisible. Tout le thème passe par des variables -> le mode sombre n'est qu'une surcharge de :root sous prefers-color-scheme: dark. Le rouge est réservé aux faits mortels. --------------------------------------------------------------------------- */ :root { color-scheme: light dark; --ink: #1a1d23; --ink-soft: #5b616e; --ink-faint: #8b909b; --line: #e6e8ec; --line-strong: #d4d7dd; --panel: #ffffff; /* fond panneau + infobulle */ --panel-blur: rgba(255, 255, 255, 0.94); --surface: #ffffff; /* inputs, boutons, drapeaux */ --surface-2: #f3f4f6; /* remplissages discrets (stats, survol) */ --foot-bg: #fbfcfd; --chip-bg: #ffffff; /* pastilles (gardées claires sur fond sombre) */ --map-bg: #eef0f3; --accent: #334155; /* ardoise */ --accent-soft: #eef1f5; --on-accent: #ffffff; /* texte/coche sur fond accent */ --grave: #b42318; /* rouge sobre — faits mortels */ --link: #1d4ed8; --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 6px 20px rgba(16, 24, 40, 0.12); --radius: 12px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --panel-w: 290px; --chip-size: 30px; /* piloté en super-admin */ --chip-font: 16px; } /* Le thème est piloté par data-theme sur (script en ) : défaut = système, mais l'utilisateur peut forcer clair/sombre. */ :root[data-theme="dark"] { --ink: #e7e9ee; --ink-soft: #a3a9b5; --ink-faint: #777d8a; --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.20); --panel: #1c2027; --panel-blur: rgba(24, 28, 34, 0.90); --surface: #262b33; --surface-2: #2c313a; --foot-bg: #20242b; --chip-bg: #f5f6f8; --map-bg: #15171c; --accent: #8aa0c0; --accent-soft: rgba(255, 255, 255, 0.07); --on-accent: #12161c; --grave: #ff6f61; --link: #8ab4ff; --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 26px rgba(0, 0, 0, 0.55); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; font-family: var(--font); color: var(--ink); background: var(--map-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } #map { position: absolute; inset: 0; z-index: 0; background: var(--map-bg); } .leaflet-tile-pane { filter: saturate(0.82) contrast(0.98); } /* --- Panneau latéral ------------------------------------------------------*/ #panel { position: absolute; top: 14px; left: 14px; bottom: 14px; z-index: 1000; width: var(--panel-w); max-width: calc(100vw - 28px); display: flex; flex-direction: column; background: var(--panel-blur); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; } body.panel-collapsed #panel { transform: translateX(calc(-100% - 20px)); opacity: 0; pointer-events: none; } /* --- Logo / marque --------------------------------------------------------*/ .brand { display: flex; align-items: center; gap: 10px; padding: 14px 14px 13px; border-bottom: 1px solid var(--line); } .brand-mark { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); } .brand-mark svg path { fill: var(--accent); } .brand-mark svg circle { fill: var(--grave); } .brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .bt-name { font-size: 15.5px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); } .bt-place { font-size: 11.5px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; } #panel-close { margin-left: auto; flex: none; width: 26px; height: 26px; border: 1px solid var(--line); background: var(--surface); border-radius: 7px; color: var(--ink-soft); font-size: 17px; line-height: 1; cursor: pointer; } #panel-close:hover { background: var(--accent-soft); } #panel-open { position: absolute; top: 14px; left: 14px; z-index: 1001; width: 42px; height: 42px; border: 1px solid var(--line); background: var(--panel-blur); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 11px; box-shadow: var(--shadow); cursor: pointer; display: none; align-items: center; justify-content: center; } body.panel-collapsed #panel-open { display: flex; } .burger, .burger::before, .burger::after { display: block; width: 17px; height: 2px; background: var(--accent); border-radius: 2px; position: relative; } .burger::before, .burger::after { content: ""; position: absolute; left: 0; } .burger::before { top: -5px; } .burger::after { top: 5px; } /* --- Corps du panneau -----------------------------------------------------*/ .panel-scroll { flex: 1; overflow-y: auto; padding: 4px 0; } .fb { padding: 13px 15px; border-bottom: 1px solid var(--line); } .fb:last-child { border-bottom: 0; } .fb-title { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); margin-bottom: 11px; } .fb-actions button { border: 0; background: none; font: inherit; font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--link); cursor: pointer; padding: 0 1px; } .fb-actions button:hover { text-decoration: underline; } .fb-actions .dot { color: var(--ink-faint); margin: 0 2px; } /* --- Plage temporelle (double curseur) ------------------------------------*/ .range { position: relative; height: 26px; margin: 2px 2px 0; } .range-track { position: absolute; top: 11px; left: 0; right: 0; height: 4px; background: var(--line-strong); border-radius: 4px; } .range-fill { position: absolute; top: 0; height: 100%; background: var(--accent); border-radius: 4px; } .range input[type=range] { position: absolute; top: 0; left: 0; width: 100%; height: 26px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; } .range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--chip-bg); border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25); cursor: pointer; } .range input[type=range]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--chip-bg); border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25); cursor: pointer; } .range-labels { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .presets { display: flex; gap: 6px; margin-top: 11px; } .presets button { flex: 1; padding: 5px 4px; border: 1px solid var(--line); background: var(--surface); border-radius: 7px; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; } .presets button:hover { background: var(--accent-soft); } .presets button.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } /* --- Liste des catégories (filtre) ---------------------------------------*/ #catList { display: flex; flex-direction: column; gap: 1px; } .cat-row { display: flex; align-items: center; gap: 9px; padding: 5px 7px; border-radius: 8px; font-size: 12.5px; color: var(--ink); cursor: pointer; user-select: none; } .cat-row:hover { background: var(--accent-soft); } .cat-check { flex: none; width: 16px; height: 16px; border: 1.5px solid var(--line-strong); border-radius: 5px; position: relative; background: var(--surface); } .cat-row.on .cat-check { background: var(--accent); border-color: var(--accent); } .cat-row.on .cat-check::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(42deg); } .cat-emoji { font-size: 15px; width: 20px; text-align: center; flex: none; line-height: 1; } .cat-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cat-count { font-variant-numeric: tabular-nums; color: var(--ink-faint); font-size: 11.5px; } .cat-row:not(.on) { color: var(--ink-faint); } .cat-row:not(.on) .cat-emoji { filter: grayscale(1); opacity: 0.55; } /* --- Pied du panneau ------------------------------------------------------*/ .panel-foot { padding: 10px 13px; border-top: 1px solid var(--line); background: var(--foot-bg); } .pf-count { font-size: 12px; color: var(--ink-soft); } .pf-count b { color: var(--ink); font-variant-numeric: tabular-nums; } .pf-count .pf-grave { color: var(--grave); } .pf-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; } .pf-themes { display: flex; gap: 6px; } .icon-btn { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; color: var(--ink-soft); cursor: pointer; padding: 0; font-size: 16px; line-height: 1; } .icon-btn:hover { background: var(--accent-soft); color: var(--ink); } .icon-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .icon-btn svg { width: 16px; height: 16px; display: block; } .pf-admin { display: none; } /* visible seulement en super-admin */ body.super-admin .pf-admin { display: flex; } /* --- Pastilles emoji (marqueurs) -----------------------------------------*/ /* Le marqueur Leaflet est ancré à 0×0 sur le point exact ; la pastille est centrée par transform -> sa taille peut varier sans décalage. */ .chip-marker.mk-hidden { display: none !important; } .chip-wrap { position: absolute; left: 0; top: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)); /* écartement anti-chevauchement */ will-change: transform; } .chip { position: absolute; left: 0; top: 0; width: var(--chip-size); height: var(--chip-size); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--chip-bg); border: 1px solid var(--line-strong); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12), 0 2px 8px rgba(16, 24, 40, 0.10); font-size: var(--chip-font); line-height: 1; cursor: pointer; transform: translate(-50%, -50%); transition: transform 0.13s ease, box-shadow 0.13s ease; user-select: none; } .chip > span { transform: translateY(0.5px); } .chip:hover, .chip.is-active { transform: translate(-50%, -50%) scale(1.22); box-shadow: 0 2px 6px rgba(16, 24, 40, 0.20), 0 8px 22px rgba(16, 24, 40, 0.26); z-index: 5; } .chip.grave { border-color: var(--grave); box-shadow: 0 0 0 2px rgba(180, 35, 24, 0.22), 0 2px 8px rgba(16, 24, 40, 0.16); } /* --- Infobulle riche ------------------------------------------------------*/ #tip { position: absolute; z-index: 1200; width: 340px; max-width: calc(100vw - 24px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.14s ease, transform 0.14s ease; pointer-events: none; overflow: hidden; } #tip.visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .tip-head { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px 11px; border-bottom: 1px solid var(--line); } .tip-head .th-emoji { font-size: 22px; line-height: 1.1; flex: none; } .tip-head .th-meta { min-width: 0; } .tip-head .th-cat { font-size: 13.5px; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; } .tip-head.grave .th-cat { color: var(--grave); } .tip-head .th-when { margin-top: 2px; font-size: 12px; color: var(--ink-soft); } .tip-head .th-addr { margin-top: 2px; font-size: 12px; color: var(--ink-faint); } .tip-body { padding: 12px 15px; } .tip-summary { margin: 0 0 11px; font-size: 13px; line-height: 1.5; color: var(--ink); } .tip-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; } .stat { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); font-size: 11.5px; color: var(--ink-soft); } .stat b { font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .stat.grave { background: rgba(180, 35, 24, 0.12); } .stat.grave b { color: var(--grave); } .tip-flags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; } .flag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); font-size: 11.5px; color: var(--ink-soft); } .tip-detail { font-size: 12px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 8px; } .tip-detail .td-label { font-weight: 650; color: var(--ink); } .tip-detail .td-euro { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; } .tip-foot { padding: 10px 15px 13px; border-top: 1px solid var(--line); background: var(--foot-bg); } .tip-foot a { font-size: 12.5px; font-weight: 600; color: var(--link); text-decoration: none; line-height: 1.4; display: inline-block; } .tip-foot a:hover { text-decoration: underline; } .tip-foot .tf-src { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-faint); font-weight: 400; } /* --- Panneau super-admin (ouvert via ⚙ du volet, s'affiche à côté) --------*/ #admin { display: none; position: absolute; z-index: 1101; left: calc(28px + var(--panel-w)); bottom: 14px; width: 286px; max-width: calc(100vw - 28px); background: var(--panel-blur); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } body.super-admin.admin-open #admin { display: block; } .admin-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--ink); } .admin-head em { color: var(--accent); font-style: normal; font-weight: 700; } #admin-close { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--ink-faint); cursor: pointer; padding: 0 2px; } #admin-close:hover { color: var(--ink); } .admin-body { padding: 12px 14px 14px; } .ad-row { margin-bottom: 12px; } .ad-l { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; } .ad-l label { font-size: 12px; font-weight: 600; color: var(--ink-soft); } .ad-hint { font-weight: 400; color: var(--ink-faint); } .ad-l output { font-size: 12.5px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; font-family: var(--mono); } .ad-row input[type=range] { width: 100%; height: 18px; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: none; } .ad-row input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--line-strong); } .ad-row input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line-strong); } .ad-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--chip-bg); border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(16,24,40,0.25); } .ad-row input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--chip-bg); border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(16,24,40,0.25); } .ad-config { margin-top: 4px; border-top: 1px dashed var(--line-strong); padding-top: 11px; } .ad-config-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; } .ad-config-h span { font-size: 11px; color: var(--ink-faint); } .ad-config-h code { font-family: var(--mono); color: var(--ink-soft); } #adCopy { border: 1px solid var(--line); background: var(--surface); color: var(--link); border-radius: 6px; font: inherit; font-size: 11px; font-weight: 600; padding: 2px 9px; cursor: pointer; } #adCopy:hover { background: var(--accent-soft); } #adConfig { margin: 0; padding: 10px 11px; border-radius: 8px; background: var(--surface-2); color: var(--ink); font-family: var(--mono); font-size: 11px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; } .ad-reset { margin-top: 11px; width: 100%; padding: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); border-radius: 8px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .ad-reset:hover { background: var(--accent-soft); color: var(--ink); } /* --- Habillage Leaflet ---------------------------------------------------*/ .leaflet-control-zoom a { background: var(--surface) !important; color: var(--ink) !important; border-radius: 8px !important; border-color: var(--line) !important; } .leaflet-control-zoom a:hover { background: var(--accent-soft) !important; } .leaflet-control-attribution { background: var(--panel-blur) !important; color: var(--ink-faint) !important; font-size: 10px !important; } .leaflet-control-attribution a { color: var(--link) !important; } .leaflet-bar { box-shadow: var(--shadow) !important; border: none !important; } /* --- Petit écran ----------------------------------------------------------*/ @media (max-width: 620px) { #tip { width: calc(100vw - 24px); } #panel { width: min(86vw, 320px); } #admin { left: 14px; right: 14px; width: auto; max-width: none; } }