:root { /* Palette alignee qdna.fr (clair par defaut) */ --bg: #FAFAFB; --fg: #18181B; --mut: #5b5b69; --bdr: #e2e2e8; --acc: #0055A4; --acc-strong: #003a72; --violet: #7B5BFE; --violet-light: #9F82FF; --ok: #15803d; --warn: #b45309; --bad: #EF4135; --card: #FFFFFF; --card-hover: #f4f1ff; --skeleton: #e6e6ee; --skeleton-shine: #f4f1ff; --atmo-color: #0055A4; --pollen-color: #7B5BFE; --chip-fg: #FFFFFF; } /* Mode sombre : opt-in via data-theme="dark" sur . */ :root[data-theme="dark"] { --bg: #0F0F15; --fg: #F5F5F5; --mut: #9a93b8; --bdr: #2a2a35; --acc: #4A90E2; --acc-strong: #0055A4; --violet: #7B5BFE; --violet-light: #8E70FF; --ok: #4ADE80; --warn: #F4C430; --bad: #EF4135; --card: #18181B; --card-hover: #1f1f25; --skeleton: #21262d; --skeleton-shine: #2d333b; --atmo-color: #4A90E2; --pollen-color: #7B5BFE; --chip-fg: #0d1117; color-scheme: dark; /* P2-7 : select/input/scrollbars natifs en sombre */ } * { box-sizing: border-box; } body { margin: 0; font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif; background: var(--bg); color: var(--fg); font-feature-settings: "kern" 1, "liga" 1; -webkit-font-smoothing: antialiased; transition: background-color 200ms ease, color 200ms ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } /* === Theme toggle (qdna.fr inspired) === */ .theme-toggle { position: absolute; top: 16px; right: 16px; width: 56px; height: 28px; padding: 0; border: 1px solid var(--bdr); border-radius: 999px; background: var(--card); cursor: pointer; transition: background 200ms ease, border-color 200ms ease; } .theme-toggle:hover { border-color: var(--violet); } .theme-toggle:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; } .theme-toggle-knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--acc); transition: transform 200ms ease, background 200ms ease; } :root:not([data-theme="dark"]) .theme-toggle-knob { transform: translateX(28px); background: var(--violet); } .theme-toggle-icon { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; line-height: 1; pointer-events: none; transition: opacity 200ms ease; } .theme-toggle-sun { left: 6px; opacity: 0.4; color: var(--warn); } .theme-toggle-moon { right: 6px; opacity: 0.4; color: var(--mut); } :root:not([data-theme="dark"]) .theme-toggle-sun { opacity: 0.95; } :root:not([data-theme="dark"]) .theme-toggle-moon { opacity: 0.2; } header { background: linear-gradient(135deg, var(--bg) 0%, var(--card-hover) 100%); padding: 24px 20px; border-bottom: 1px solid var(--bdr); text-align: center; position: relative; } h1 { margin: 0; font-size: 1.55em; letter-spacing: -0.01em; font-weight: 700; } h2, h3 { letter-spacing: -0.005em; font-weight: 600; } .subtitle { color: var(--mut); font-size: 0.9em; margin-top: 4px; } main { max-width: 1200px; margin: 0 auto; padding: 20px; } section { background: var(--card); border: 1px solid var(--bdr); border-radius: 14px; padding: 16px; margin-bottom: 16px; animation: fadeIn 0.4s ease-out both; } /* Largeur unifiee : tous les blocs du main partagent la meme colonne (760px : le tableau air 720px + padding tient sans scroll horizontal). Ville : les blocs ne sont pas tous des
, d'ou le selecteur large. */ main > * { max-width: 760px; margin-left: auto; margin-right: auto; } section:nth-child(2) { animation-delay: 0.05s; } section:nth-child(3) { animation-delay: 0.1s; } section:nth-child(4) { animation-delay: 0.15s; } section:nth-child(5) { animation-delay: 0.2s; } section:nth-child(6) { animation-delay: 0.25s; } section:nth-child(7) { animation-delay: 0.3s; } section:nth-child(8) { animation-delay: 0.35s; } section:nth-child(9) { animation-delay: 0.4s; } section:nth-child(10) { animation-delay: 0.45s; } h2 { margin-top: 0; font-size: 1.2em; color: var(--acc); } h3 { font-size: 1em; margin: 8px 0; } table { width: 100%; border-collapse: collapse; font-size: 0.9em; } th, td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--bdr); } th { background: var(--bg); color: var(--mut); font-weight: 600; } .atmo-scale { max-width: 420px; } .atmo-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 8px; vertical-align: -2px; border: 1px solid var(--bdr); } .kpi { display: inline-block; background: var(--card); padding: 8px 14px; border-radius: 6px; margin: 4px; border: 1px solid var(--bdr); transition: transform 0.2s ease, border-color 0.2s ease; min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; /* P2-5 */ } .kpi:hover { transform: translateY(-2px); border-color: var(--acc); } /* KPIs home : largeur uniforme (meme regle que CSS_CITY). P2-5 : colonnes >= 140 px, sinon 4 KPI sur 320-390 px laissaient 62-80 px a "capteurs a proximite". */ #kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 8px; } #kpis .kpi { margin: 0; text-align: center; min-width: 0; } .bad { color: var(--bad); } .warn { color: var(--warn); } .ok { color: var(--ok); } .na { color: var(--mut); } /* Variantes light (contraste AA sur fond clair) ; couleurs officielles en dark. */ .indice-1 { color: #15803d; } .indice-2 { color: #8a7500; } .indice-3 { color: #b45309; } .indice-4 { color: #cc0000; } .indice-5 { color: #7e22ce; } :root[data-theme="dark"] .indice-1 { color: #50cc50; } :root[data-theme="dark"] .indice-2 { color: #cccc00; } :root[data-theme="dark"] .indice-3 { color: #ff8800; } :root[data-theme="dark"] .indice-4 { color: #ff0000; } :root[data-theme="dark"] .indice-5 { color: #800080; } #map { height: 420px; width: 100%; max-width: 100%; border-radius: 6px; border: 1px solid var(--bdr); box-sizing: border-box; } .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .scroll-x::-webkit-scrollbar { height: 6px; } .scroll-x::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 3px; } .tab-row { cursor: pointer; transition: background 0.15s ease; } .tab-row:hover { background: rgba(88, 166, 255, 0.08); } .small { color: var(--mut); font-size: max(12px, 0.85em); } .row-loading { color: var(--mut); font-style: italic; } .skeleton-row td { padding: 8px; } .skeleton-bar { display: inline-block; height: 12px; width: 80%; border-radius: 4px; background: linear-gradient(90deg, var(--skeleton) 0%, var(--skeleton-shine) 50%, var(--skeleton) 100%); background-size: 800px 100%; animation: shimmer 1.4s infinite linear; } .skeleton-bar.short { width: 40%; } .skeleton-bar.medium { width: 60%; } #filters { margin-bottom: 12px; } #filters input { background: var(--bg); color: var(--fg); border: 1px solid var(--bdr); padding: 6px 10px; border-radius: 4px; transition: border-color 0.2s ease; } #filters input:focus { outline: none; border-color: var(--acc); } footer { color: var(--mut); font-size: 0.85em; border-top: 1px solid var(--bdr); margin-top: 40px; padding: 16px 20px; } .footer-brand a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .footer-brand img { border-radius: 4px; } a { color: var(--acc); text-decoration: none; border-bottom: 1px dotted transparent; transition: color 150ms ease, border-color 150ms ease; } a:hover { color: var(--violet); border-bottom-color: var(--violet); } a:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 2px; } /* === Phase 1 brief matinal === Mobile-first, glanceable. Hero en haut, 3 jours, timeline horaire. Chiffres tabulaires (font-variant-numeric) pour alignement. */ #brief { margin: 0 auto 32px; } /* largeur : regle main > section */ .brief-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .brief-commune { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; } .brief-commune #brief-commune-name { font-size: 1.1em; font-weight: 600; } .brief-search { position: relative; flex: 1 1 160px; max-width: 230px; min-width: 0; } .brief-search input { width: 100%; background: var(--card); color: var(--fg); border: 1px solid var(--bdr); border-radius: 8px; padding: 6px 8px; font-size: .95em; } .brief-search input:focus { outline: 2px solid var(--acc); outline-offset: -1px; border-color: var(--acc); } .brief-search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--card); border: 1px solid var(--bdr); border-radius: 8px; max-height: 264px; overflow: auto; z-index: 60; box-shadow: 0 10px 24px rgba(0,0,0,.45); } .brief-search-item { padding: 8px 10px; cursor: pointer; font-size: .95em; } .brief-search-item:hover, .brief-search-item:focus { background: var(--card-hover); color: var(--acc); } .brief-commune button, .brief-notif-btn { background: var(--card); border: 1px solid var(--bdr); color: var(--fg); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 1em; line-height: 1; } .brief-commune button:hover, .brief-notif-btn:hover { border-color: var(--acc); } #brief-city-select { background: var(--card); color: var(--fg); border: 1px solid var(--bdr); border-radius: 8px; padding: 6px; max-width: 100%; min-width: 0; } /* P2-5 : 212 > 197 px a 320 px */ .brief-hero { background: linear-gradient(160deg, var(--card), var(--card-hover)); border: 1px solid var(--bdr); border-radius: 16px; padding: 20px; font-variant-numeric: tabular-nums; } .brief-hero.skeleton { min-height: 160px; } .brief-hero-main { display: flex; align-items: center; gap: 14px; } .brief-temp { font-size: 3.4em; font-weight: 300; line-height: 1; } .brief-icon { font-size: 2.6em; } .brief-hero-sub { color: var(--mut); margin: 10px 0 14px; font-size: 0.98em; } .brief-clothing { background: rgba(88,166,255,0.08); border: 1px solid rgba(88,166,255,0.25); border-radius: 10px; padding: 10px 12px; font-size: 0.95em; margin-bottom: 10px; } .brief-air { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .brief-air-pill { background: var(--atmo-color); color: var(--chip-fg); font-weight: 700; padding: 3px 12px; border-radius: 999px; font-size: 0.9em; border: 2px solid rgba(255,255,255,0.15); /* bordure pour daltoniens (WCAG 1.4.1) */ } .brief-air-meta { color: var(--mut); font-size: 0.88em; } .brief-alerts { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } .brief-alert { background: rgba(248,81,73,0.12); border-left: 3px solid var(--bad); border-radius: 6px; padding: 8px 10px; font-size: 0.9em; } .brief-alert-uv { background: rgba(210,153,34,0.12); border-left-color: var(--warn); } .brief-alert-vent { background: rgba(88,166,255,0.12); border-left-color: var(--acc); } .brief-alert-gel { background: rgba(88,166,255,0.12); border-left-color: var(--acc); } .brief-alert-air { background: rgba(248,81,73,0.12); border-left-color: var(--bad); } .brief-section-title { font-size: 1em; color: var(--mut); margin: 24px 0 10px; font-weight: 600; } .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .brief-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; } .brief-day { background: var(--card); border: 1px solid var(--bdr); border-radius: 12px; padding: 14px 8px; text-align: center; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; user-select: none; } .brief-day:hover { border-color: var(--acc); background: var(--card-hover); } .brief-day:active { transform: scale(.97); } .brief-day:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } .brief-day.brief-day-today .brief-day-label { color: var(--acc); font-weight: 700; } /* Couleurs de dangerosité des taux (tableaux + badges). Seuils OMS via classify(). */ td.val, .val { font-variant-numeric: tabular-nums; } td.q-good, .q-good { color: #15803d; } td.q-mid, .q-mid { color: #b45309; } td.q-bad, .q-bad { color: #dc2626; font-weight: 700; } :root[data-theme="dark"] td.q-good, :root[data-theme="dark"] .q-good { color: #3fb950; } :root[data-theme="dark"] td.q-mid, :root[data-theme="dark"] .q-mid { color: #d29922; } :root[data-theme="dark"] td.q-bad, :root[data-theme="dark"] .q-bad { color: #f85149; } td.na, .na { color: var(--mut); } /* Indice ATMO (1 a 6, arrete du 10/07/2020) : teinte lisible par niveau (contraste texte), les couleurs officielles exactes sont dans ATMO_INDICE et la table de l'accueil. */ .q-idx-1 { color: #15803d; } .q-idx-2 { color: #8a7500; } .q-idx-3 { color: #b45309; font-weight: 700; } .q-idx-4 { color: #cc0000; font-weight: 700; } .q-idx-5 { color: #960032; font-weight: 700; } .q-idx-6 { color: #872181; font-weight: 700; } :root[data-theme="dark"] .q-idx-1 { color: #50cc50; } :root[data-theme="dark"] .q-idx-2 { color: #e6d700; } :root[data-theme="dark"] .q-idx-3 { color: #ff8800; } :root[data-theme="dark"] .q-idx-4 { color: #ff2020; } :root[data-theme="dark"] .q-idx-5 { color: #ff6b8a; } :root[data-theme="dark"] .q-idx-6 { color: #c060ff; } /* Bascule overlay ATMO sur la carte capteurs. */ .map-controls { margin: 8px 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .map-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: var(--card); border: 1px solid var(--bdr); border-radius: 8px; padding: 6px 12px; font-size: .95em; user-select: none; } /* Largeurs homogenes : 3 chips overlay egales + colonnes tableau capteurs (Ville/Capteur elargie, Source resserree, mesures identiques). */ .map-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .map-toggle { justify-content: center; text-align: center; min-width: 0; padding: 6px 6px; font-size: .88em; } #air-table { table-layout: fixed; min-width: 720px; } #air-table th:nth-child(1), #air-table td:nth-child(1) { width: 22%; } #air-table th:nth-child(2), #air-table td:nth-child(2) { width: 13%; overflow-wrap: anywhere; } #air-table th:nth-child(n+3), #air-table td:nth-child(n+3) { width: 9.28%; overflow-wrap: anywhere; padding-left: 5px; padding-right: 5px; } #air-table td.val .unit { display: block; } /* Controle visuel 2026-09-02 : a 390 px la table (720 px mini) defile deja dans .scroll-x, mais rien ne le montrait : ombres de bord (background-attachment local) + mention "faire defiler" sous 800 px, largeur a partir de laquelle la colonne de 760 px la contient. */ #qualite-air .scroll-x { background: linear-gradient(to right, var(--card) 40%, rgba(255,255,255,0)) 0 0, linear-gradient(to left, var(--card) 40%, rgba(255,255,255,0)) 100% 0, linear-gradient(to right, rgba(0,0,0,.22), rgba(0,0,0,0)) 0 0, linear-gradient(to left, rgba(0,0,0,.22), rgba(0,0,0,0)) 100% 0; background-repeat: no-repeat; background-size: 48px 100%, 48px 100%, 16px 100%, 16px 100%; background-attachment: local, local, scroll, scroll; } .scroll-hint { display: none; margin: 8px 0 0; text-align: center; letter-spacing: .04em; } @media (max-width: 799px) { .scroll-hint { display: block; } } /* Fleches direction du vent : divIcon tournee selon direction, couleur selon force. */ .wind-arrow-wrap { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; } .wind-arrow { display: inline-block; font-size: 20px; line-height: 1; color: var(--acc); text-shadow: 0 0 3px var(--card), 0 0 2px var(--card); will-change: transform; } .wind-arrow.w-light { opacity: .55; } .wind-arrow.w-strong { color: var(--bad); } .map-toggle input { accent-color: var(--acc); width: 18px; height: 18px; cursor: pointer; } .map-toggle:focus-within { outline: 2px solid var(--acc); outline-offset: 2px; } .brief-day.active { border-color: var(--acc); background: var(--card-hover); box-shadow: 0 0 0 2px var(--acc); } .brief-atmo-none { color: var(--mut); font-size: 0.85em; } .brief-day-label { font-size: 0.82em; color: var(--mut); font-weight: 600; } .brief-day-icon { font-size: 1.8em; margin: 4px 0; } .brief-day-temp { display: flex; justify-content: center; gap: 6px; font-size: 1.05em; } .brief-day-air { display: inline-block; margin-top: 6px; background: var(--atmo-color); color: var(--chip-fg); font-size: 0.72em; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .brief-day-rain { font-size: 0.78em; color: var(--acc); margin-top: 4px; } .brief-hours-wrap { margin-top: 24px; } .brief-hours { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 6px; font-variant-numeric: tabular-nums; scrollbar-width: thin; } .brief-hour { min-width: 52px; text-align: center; background: var(--card); border: 1px solid var(--bdr); border-radius: 10px; padding: 8px 4px; } .brief-hour-h { font-size: 0.78em; color: var(--mut); } .brief-hour-icon { font-size: 1.3em; margin: 2px 0; } .brief-hour-t { font-size: 1em; font-weight: 600; } .brief-hour-rain { font-size: max(12px, 0.68em); color: var(--acc); } /* P2-3 : plancher 12 px (10,2 px avant) */ /* Pollen (Phase 3) */ .brief-pollen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .brief-pollen-label { font-size: 0.85em; color: var(--mut); } .brief-pollen-chip { background: var(--pollen-color); color: var(--chip-fg); font-size: 0.78em; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.15); } .brief-pollen-none { font-size: 0.8em; color: var(--mut); } .brief-airfc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .brief-airfc-label { font-size: 0.85em; color: var(--mut); } .brief-airfc-day { white-space: normal; } /* Section #pollens (home) — cartes par espece, couleur ATMO pollens */ .pollens-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 14px; } .pollen-card { background: var(--card); border: 1px solid var(--bdr); border-left: 4px solid var(--pollen-color, #888); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .pollen-card-h { font-weight: 600; font-size: 0.98em; display: flex; align-items: center; gap: 6px; } .pollen-card-icon { font-size: 1.05em; } .pollen-card-l { display: inline-block; padding: 2px 10px; border-radius: 999px; color: #fff; font-size: 0.78em; font-weight: 600; letter-spacing: 0.2px; } .pollen-card-c { font-size: 0.78em; color: var(--mut); } .pollen-card-bar { height: 4px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; margin-top: 6px; } .pollen-card-bar > span { display: block; height: 100%; background: var(--pollen-color, #888); border-radius: 999px; } .pollens-skeleton { color: var(--mut); font-size: 0.9em; padding: 14px; text-align: center; } @media (prefers-reduced-motion: reduce) { .pollen-card { transition: none; } } .brief-day-pollen { font-size: 0.74em; margin-top: 3px; font-weight: 600; } .brief-alert-pollen { background: rgba(128,0,128,0.12); border-left-color: #800080; } @media (max-width: 520px) { .brief-temp { font-size: 2.8em; } .brief-icon { font-size: 2.2em; } .brief-day { padding: 10px 4px; } } /* Phase 3.3 — Accessibility / polish */ /* Daltonisme (WCAG 1.4.1) : la couleur seule ne suffit pas, on ajoute une bordure contrastée aux pastilles ATMO pour distinguer les niveaux sans la couleur. */ .atmo-pill { display: inline-block; padding: 3px 12px; border-radius: 12px; border: 2px solid rgba(0,0,0,0.35); font-weight: 600; font-size: 0.9em; } /* Respect des préférences motion réduite (WCAG 2.3.3) : on neutralise les animations. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .skeleton-bar { background: var(--skeleton); } @keyframes skeleton-shine { from { background: var(--skeleton); } to { background: var(--skeleton-shine); } } } /* P2-2 (audit mobile 2026-09-01) : cibles tactiles >= 44 px sur ecran tactile (nav accueil, fil d'Ariane et villes proches des pages ville, bouton theme). Le bouton theme passe de 56x28 a 72x44 : knob recentre (top 10 = (42-22)/2), course 44. */ @media (pointer: coarse) { nav a { display: inline-flex; align-items: center; min-height: 44px; } header nav a { padding: 0 10px; } .theme-toggle { width: 72px; height: 44px; top: 8px; right: 8px; } .theme-toggle-knob { top: 10px; } :root:not([data-theme="dark"]) .theme-toggle-knob { transform: translateX(44px); } } /* Ecrans etroits : le titre passe SOUS le bouton theme (absolu en haut a droite), qui masquait la fin de la 1re ligne du h1 a 320-360 px (defaut preexistant). */ @media (max-width: 640px) { header { padding-top: 64px; } } /* P2-5 : chips overlay empilees sous 480 px (un tiers de 320-390 px ne contient pas la case + le mot "communes)" : 90 > 75 px a 320, 102 > 98 px a 390). */ .map-toggle { white-space: normal; min-width: 0; } @media (max-width: 480px) { .map-controls { grid-template-columns: 1fr; } .map-toggle { justify-content: flex-start; } } /* Chiffres tabulaires pour toutes les valeurs mesurées (alignement colonnes). */ .cell.val, .kpi-value, .brief-temp, .brief-day-temp, .brief-hour-temp, .brief-hour-h { font-variant-numeric: tabular-nums; } }