/* ========================================================================== Déchets Dordogne — design system « Accessible & Ethical » Mobile-first, WCAG AA+. Public Sans, palette navy/vert/bleu, contraste ≥ 4.5:1. ========================================================================== */ @font-face { font-family: "Public Sans"; font-weight: 400; font-display: swap; src: url("../fonts/public-sans-400.woff2") format("woff2"); } @font-face { font-family: "Public Sans"; font-weight: 600; font-display: swap; src: url("../fonts/public-sans-600.woff2") format("woff2"); } @font-face { font-family: "Public Sans"; font-weight: 700; font-display: swap; src: url("../fonts/public-sans-700.woff2") format("woff2"); } :root { --bg: #f8fafc; --surface: #ffffff; --surface-2: #f1f5f9; --text: #0f172a; --text-strong: #020617; --muted: #475569; --border: #cbd5e1; --green: #15803d; /* primaire / déchèteries */ --green-700: #166534; --blue: #0369a1; /* PAV / liens / CTA */ --blue-700: #075985; --amber: #b45309; /* SICTOM Périgord Noir */ --danger: #be123c; --focus: #1d4ed8; --radius: 14px; --radius-sm: 10px; --shadow: 0 1px 2px rgba(2, 6, 23, 0.06), 0 4px 14px rgba(2, 6, 23, 0.08); --tap: 44px; --header-h: 56px; --nav-h: 64px; --z-map: 1; --z-header: 20; --z-nav: 30; --z-sheet: 50; --font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-base: 1rem; } /* High-contrast preference (toggle adds .hc on ) */ html.hc { --bg: #ffffff; --surface: #ffffff; --surface-2: #ffffff; --text: #000000; --text-strong: #000000; --muted: #1f2937; --border: #000000; --green: #0b5a2a; --blue: #034a73; } /* Larger text preference (toggle adds .big on ) */ html.big { font-size: 1.15rem; } * { box-sizing: border-box; } html { font-size: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: var(--fs-base); line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3 { line-height: 1.25; color: var(--text-strong); margin: 0 0 0.5rem; } h1 { font-size: 1.125rem; font-weight: 700; } h2 { font-size: 1.25rem; font-weight: 700; } h3 { font-size: 1.05rem; font-weight: 600; } p { margin: 0 0 0.75rem; } a { color: var(--blue-700); } /* Visible focus everywhere (3px ring) */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } /* Skip link */ .skip { position: absolute; left: 8px; top: -48px; z-index: 999; background: var(--text-strong); color: #fff; padding: 0.6rem 1rem; border-radius: 8px; transition: top 120ms ease; } .skip:focus { top: 8px; } /* ---------- Header ---------- */ .app-header { position: sticky; top: 0; z-index: var(--z-header); height: var(--header-h); display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; background: var(--green); color: #fff; border-bottom: 1px solid var(--green-700); } .app-header .brand { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .app-header h1 { color: #fff; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-header .brand svg { flex: none; } .header-tools { margin-left: auto; display: flex; gap: 0.25rem; } .icon-btn { width: var(--tap); height: var(--tap); min-width: var(--tap); display: inline-flex; align-items: center; justify-content: center; background: transparent; color: inherit; border: 1px solid transparent; border-radius: 10px; cursor: pointer; } .app-header .icon-btn:hover { background: rgba(255, 255, 255, 0.16); } .app-header .icon-btn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.28); border-color: rgba(255,255,255,0.6); } /* ---------- Layout ---------- */ .app-main { position: relative; } .tabpanel { display: none; } .tabpanel.is-active { display: block; } /* Map fills viewport minus header/nav */ #map { position: absolute; inset: 0; height: calc(100dvh - var(--header-h) - var(--nav-h)); width: 100%; z-index: var(--z-map); background: var(--surface-2); } .panel-carte.is-active ~ .scroll-panels, .panel-carte { } /* carte uses absolute map; others scroll */ .scroll-panel { min-height: calc(100dvh - var(--header-h) - var(--nav-h)); padding: 1rem 1rem 1.5rem; max-width: 720px; margin: 0 auto; } /* ---------- Filters bar (over map + list) ---------- */ .filters { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.5rem 0.75rem; scrollbar-width: none; } .filters::-webkit-scrollbar { display: none; } .map-overlay { position: absolute; top: 0.5rem; left: 0; right: 0; z-index: 10; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; } .map-overlay > * { pointer-events: auto; } .map-overlay .filters { background: transparent; } .chip { flex: none; min-height: 40px; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem; background: var(--surface); color: var(--text); border: 1.5px solid var(--border); border-radius: 999px; font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; box-shadow: var(--shadow); } .chip[aria-pressed="true"] { background: var(--text-strong); color: #fff; border-color: var(--text-strong); } .chip .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; } .chip[data-kind="decheterie"] .dot { background: var(--green); } .chip[data-kind="pav"] .dot { background: var(--blue); } .search-row { display: flex; gap: 0.5rem; padding: 0 0.75rem; } .search { flex: 1; display: flex; align-items: center; gap: 0.5rem; background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px; padding: 0 0.75rem; box-shadow: var(--shadow); } .search input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 1rem; padding: 0.7rem 0; color: var(--text); min-width: 0; } .search input:focus { outline: none; } .search svg { color: var(--muted); flex: none; } .btn-locate { min-width: var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0 0.9rem; background: var(--blue); color: #fff; border: 0; border-radius: 12px; font: inherit; font-weight: 600; cursor: pointer; box-shadow: var(--shadow); white-space: nowrap; } .btn-locate:hover { background: var(--blue-700); } .btn-locate:disabled { opacity: 0.6; cursor: progress; } /* ---------- Cards / list ---------- */ .result-count { font-size: 0.9rem; color: var(--muted); margin: 0.25rem 0 0.75rem; } .card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; } .site-card { width: 100%; text-align: left; background: var(--surface); border: 1.5px solid var(--border); border-left-width: 6px; border-radius: var(--radius); padding: 0.9rem 1rem; cursor: pointer; font: inherit; color: var(--text); box-shadow: var(--shadow); display: grid; gap: 0.25rem; } .site-card:hover { border-color: var(--text-strong); } .site-card[data-kind="decheterie"] { border-left-color: var(--green); } .site-card[data-kind="pav"] { border-left-color: var(--blue); } .site-card .site-name { font-weight: 700; color: var(--text-strong); font-size: 1.05rem; } .site-card .site-meta { font-size: 0.9rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; } .badge.decheterie { background: #dcfce7; color: var(--green-700); } .badge.pav { background: #e0f2fe; color: var(--blue-700); } html.hc .badge { border: 1.5px solid currentColor; } .dist { font-weight: 700; color: var(--text-strong); } .empty { text-align: center; color: var(--muted); padding: 2rem 1rem; } /* ---------- Bottom sheet (site detail) ---------- */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.45); z-index: var(--z-sheet); display: none; } .sheet-backdrop.is-open { display: block; } .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-sheet) + 1); max-height: 85dvh; overflow-y: auto; background: var(--surface); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(2, 6, 23, 0.25); padding: 0.5rem 1.1rem 1.5rem; transform: translateY(100%); transition: transform 220ms ease; } .sheet.is-open { transform: translateY(0); } .sheet .grip { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 0.5rem auto 0.75rem; } .sheet .sheet-head { display: flex; align-items: flex-start; gap: 0.5rem; } .sheet .sheet-head h2 { flex: 1; } .sheet dl { margin: 0.75rem 0 0; display: grid; gap: 0.6rem; } .sheet dl > div { display: flex; gap: 0.6rem; align-items: flex-start; } .sheet dt { flex: none; color: var(--muted); width: 22px; display: flex; } .sheet dd { margin: 0; } .sheet .waste-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; } .sheet .waste-tag { font-size: 0.82rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 0.15rem 0.5rem; } .sheet-actions { display: flex; gap: 0.6rem; margin-top: 1.1rem; } .btn { flex: 1; min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); } .btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); } .btn-primary:hover { background: var(--blue-700); } /* ---------- Guide « Que faire de… ? » ---------- */ .guide-result { margin-top: 1rem; display: grid; gap: 0.75rem; } .guide-card { background: var(--surface); border: 1.5px solid var(--border); border-left-width: 6px; border-radius: var(--radius); padding: 0.9rem 1rem; box-shadow: var(--shadow); } .guide-card .bac-name { font-weight: 700; color: var(--text-strong); } .guide-card .mat-name { font-size: 1.05rem; font-weight: 700; } /* ---------- Infos / organismes ---------- */ .op-card { background: var(--surface); border: 1.5px solid var(--border); border-top-width: 6px; border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); margin-bottom: 1rem; } .op-card h3 { font-size: 1.15rem; } .op-card .full { color: var(--muted); font-size: 0.9rem; margin-top: -0.25rem; } .op-card ul { margin: 0.4rem 0 0.75rem; padding-left: 1.1rem; } .op-card li { margin-bottom: 0.25rem; } .kv { font-weight: 600; color: var(--text-strong); } .callout { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; font-size: 0.92rem; color: var(--muted); } /* ---------- Bottom navigation (tablist) ---------- */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav); height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); display: flex; background: var(--surface); border-top: 1px solid var(--border); } .tabbar button { flex: 1; min-height: var(--nav-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: transparent; border: 0; border-top: 3px solid transparent; color: var(--muted); font: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer; } .tabbar button[aria-selected="true"] { color: var(--green-700); border-top-color: var(--green); } html.hc .tabbar button[aria-selected="true"] { color: #000; } .tabbar button:hover { color: var(--text); } .tabbar svg { width: 24px; height: 24px; } /* Reserve space so content isn't hidden behind the fixed nav (scroll panels) */ .scroll-panel { padding-bottom: calc(var(--nav-h) + 1.5rem); } /* ---------- Leaflet tweaks ---------- */ .leaflet-container { font: inherit; background: var(--surface-2); } .marker-pin { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(2, 6, 23, 0.4); } .marker-pin svg { transform: rotate(45deg); color: #fff; } .marker-pin.decheterie { background: var(--green); } .marker-pin.pav { background: var(--blue); } .leaflet-control-attribution { font-size: 11px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---------- Toast / status ---------- */ .toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 1rem); transform: translateX(-50%); z-index: 60; background: var(--text-strong); color: #fff; padding: 0.6rem 1rem; border-radius: 999px; font-size: 0.9rem; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity 200ms ease; } .toast.show { opacity: 1; } /* ---------- Desktop niceties ---------- */ @media (min-width: 768px) { h1 { font-size: 1.25rem; } .tabbar button { font-size: 0.8rem; } .chip, .search input { font-size: 1rem; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }